/* ============================================================
   GAM integration — must load LAST so it wins over layout rules.
   Markup contract lives in partials; behaviour in js/kulalarab-ads.js
   ============================================================ */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.genecy-welcomer-ad-cont,
.genecy-welcomer-ad-clipper,
.genecy-welcomer-ad-ad-cont {
  max-width: 100vw !important;
}

.gam-welcomer-wrap {
  position: relative;
  z-index: 120;
  width: 100%;
  background: var(--bg);
}

.gam-welcomer-wrap > .gam-fallback {
  position: relative;
  inset: auto;
  width: min(970px, calc(100% - 32px));
  height: 90px;
  margin: 0 auto;
}

.gam-welcomer-wrap.gam-has-ad > .gam-fallback {
  display: none !important;
}

.gam-slot-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
  color: var(--muted);
  /* Every creative except the Welcomer — its host is #gam-welcomer-wrap and
     never receives .gam-slot-box. */
  border-radius: 4px;
}

.gam-slot-box iframe,
.gam-gpt-inner {
  border-radius: 4px;
  overflow: hidden;
}

.gam-slot-box::before {
  content: "إعلان";
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 4;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  color: #6d6d76;
  font-size: 9px;
  line-height: 1.5;
}

/* 1x1 markers: out of the visual flow, but left at their natural position.
 *
 * The reference CSS used `left: -9999px`. In this RTL document that pushes the
 * marker 9999px outside the page box, so documentElement.scrollWidth becomes
 * ~10764 against a 765 client width and the viewport opens on the empty region
 * — a blank page. `overflow-x: clip` on html/body does not rescue it.
 *
 * Collapsing to 1x1 with overflow:hidden hides it just as effectively, keeps
 * the marker exactly where it belongs (better for the IntersectionObserver,
 * per requirement 4) and produces no horizontal overflow (requirement 10).
 * Deliberately no opacity/transform/filter here: those would create a
 * containing block and trap any position:fixed creative the 1x1 unit injects.
 */
.gam-slot-box[data-gam-size="1x1"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  overflow: hidden !important;
  border: 0 !important;
  padding: 0 !important;
}

.gam-slot-box[data-gam-size="1x1"]::before {
  content: none !important;
}

.gam-slot-box iframe {
  display: block;
  margin: auto;
}

.gam-gpt-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.gam-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: #8f0808;
}

.gam-fallback[hidden] {
  display: none;
}

.gam-fallback svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.gam-fallback__content {
  position: relative;
  z-index: 2;
  max-width: 92%;
  padding: 12px;
  font-family: var(--font-head);
}

.gam-fallback__brand {
  display: block;
  margin-bottom: 5px;
  font-size: clamp(12px, 2vw, 18px);
  font-weight: 800;
}

.gam-fallback__title {
  display: block;
  font-size: clamp(11px, 1.5vw, 16px);
  font-weight: 700;
  line-height: 1.55;
}

.gam-fallback__size {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  opacity: .82;
}

.gam-fallback__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

/* 320x50 at the foot of the breaking-news popup, centred with its own gap. */
.news-modal .nm-ad {
  display: flex;
  justify-content: center;
  padding: 0 24px 22px;
}

/* Manually-driven popup ad host (priority chain 1x1 → 320x100 → 320x50). */
.gam-modal-ad {
  width: 100%;
  max-width: 320px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
.gam-modal-ad .gam-gpt-inner { margin-inline: auto; }

/* Fixed side rails are disabled for now (markup removed from welcomer.php and
   initRails() early-returns). This hard hide is a safety net so any cached JS
   that still injects a rail cannot make it visible. */
.gam-rail {
  display: none !important;
}

.gam-rail--left {
  left: 0 !important;
  right: auto !important;
}

.gam-rail--right {
  right: 0 !important;
  left: auto !important;
}

.gam-rail.is-visible {
  display: flex;
}

.gam-inline-300x600 {
  width: 300px;
  height: 600px;
  max-width: 100%;
  margin-inline: auto;
}

.gam-inline-728x90 {
  width: min(728px, 100%);
  height: 90px;
  margin-inline: auto;
}

/* 44px matches the section rhythm (.sec-head / .featured-cat / .sport-sec all
   use margin-top:44px). Because adjacent margins collapse to the larger value,
   this yields an identical 44px gap above and below the leaderboard. */
.gam-inline-970x250 {
  width: min(970px, 100%);
  height: 250px;
  margin: 44px auto;
}

.gam-inline-320x50 {
  width: min(320px, 100%);
  height: 50px;
  margin-inline: auto;
}

/* Only the leaderboard instance needs the vertical gap — the copy inside the
   ticker modal is spaced by .nm-ad instead. */
.gam-only-mobile.gam-inline-320x50 {
  margin-block: 28px;
}

/* Breakpoint pair for the leaderboards.
 *
 * Only the visible member is ever requested: a display:none element has no
 * box, so the IntersectionObserver never fires for it and no GPT slot is
 * defined. That gives one unit per breakpoint without a size mapping.
 *
 * 1024px is the smallest viewport where 970px still fits inside .container
 * (min(1280, vw) - 40 padding), so the wide unit can never cause a horizontal
 * scrollbar.
 */
.gam-only-desktop { display: none; }
.gam-only-mobile { display: flex; }

@media (min-width: 1024px) {
  .gam-only-desktop { display: flex; }
  .gam-only-mobile { display: none; }
}

/* Reserved square above خدمات سريعة. Requests the 1x1 parall_resp unit, but
   keeps its 500×500 footprint, so the hero column keeps its original shape. */
.gam-inline-500x500 {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

@media (max-width: 1080px) {
  .gam-inline-500x500 {
    max-width: none;
  }
}

/* Mobile: drop the fixed square so a taller creative isn't clipped by the box's
   overflow:hidden — let the ad set its own height. (Defined here, not in
   responsive.css, because ads.css loads later and would otherwise override it.) */
@media (max-width: 720px) {
  .gam-inline-500x500 {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 1199px) {
  .gam-rail {
    display: none !important;
  }
}