/* IraqFX — base layer & CSS custom properties
   Values are transcribed from the Figma source; do not round to a grid. */

:root {
  --navy: #1a3e66;
  --navy-deep: #08203b;
  --navy-mid: #1d3a62;
  --navy-blue: #476cb4;
  --lime: #8bce5b;
  --lime-light: #cfe87b;
  --surface: #f8f9fd;
  --line: #e8ebf5;
  --sky: #ddf1fa;
  --mist: #ecf1f4;
  --gold: #ffd600;
  --teal: #00b991;
  --danger: #ba1a1a;

  --r-card: 10px;
  --r-chip: 5px;
  --r-tag: 8px;
  --r-pill: 20px;

  --shadow-card: 0 4px 30px 0 rgba(26, 62, 102, 0.1);
  --shadow-float: 0 30px 40px 0 rgba(31, 40, 83, 0.1);
  --shell: 1200px;
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--surface);
  color: var(--navy);
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-weight: 400;
  /* never let the browser fake a weight the family doesn't ship */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* Type roles, straight from the .fig
   Alexandria  600 → section titles 22px / fraud banner 28px
               700 → hero h1 40px, newsletter 35px
   IBM Plex    300 → card numbers 18px, “بدون تخمين” 20px
               400 → body 12–14px   500 → buttons, labels
               600 → card titles 16px, stats 18–35px */
h1, h2 { font-family: Alexandria, 'IBM Plex Sans Arabic', sans-serif; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--lime); }
button { font: inherit; color: inherit; }
img { display: block; }

/* Arabic-Indic digits keep their Figma glyph rhythm */
.nums { font-feature-settings: 'lnum' 0; }


/*.font-normal {
  font-weight: 600!important;
}*/
/* ---- repeated primitives -------------------------------------------- */
.card { background: #fff; border-radius: var(--r-card); }
.hair { background: rgba(26, 62, 102, 0.1); }

.btn {
  display: inline-flex;
  /* markup is authored icon-first (physical LTR order), mirror it for RTL */
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-card);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  transition: 0.18s ease;
  white-space: nowrap;
}
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); color: #fff; }
.btn-grad { background: linear-gradient(180deg, #476cb4 0%, #08203b 100%); color: #fff; }
.btn-grad:hover { filter: brightness(1.12); color: #fff; }
.btn-lime { background: linear-gradient(180deg, #cfe87b 0%, #8bce5b 100%); color: var(--navy); }
.btn-lime:hover { filter: brightness(1.05); color: var(--navy); }
.btn-outline { box-shadow: inset 0 0 0 1px var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-hair { box-shadow: inset 0 0 0 1px rgba(26, 62, 102, 0.2); color: var(--navy); }
.btn-hair:hover { box-shadow: inset 0 0 0 1px var(--navy); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: #fff; color: var(--navy); filter: brightness(0.96); }
.btn-ghost-white { box-shadow: inset 0 0 0 1px #fff; color: #fff; }
.btn-ghost-white:hover { background: #fff; color: var(--navy); }

/* rating chip: 150×30, gold @15% */
.rate {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-chip);
  background: rgba(255, 214, 0, 0.2);
}

/* vertical “show all” rail (Figma rotates the label −90°) */
.rail { width: 45px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--navy); }
.rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.rail:hover { background: var(--navy); color: #fff; }

/* number tab used by prop / academy cards */
.numtab {
  clip-path: polygon(40.02% 0, 100% 0, 100% 100%, 0 100%, 32.5% 8%);
  background: #fff;
}

/* interlocking notches between hero and the navy band */
.notch-hero-tail { clip-path: polygon(0 0, 100% 0, 92.92% 100%, 0 100%); }
.notch-navy-head { clip-path: polygon(7.58% 10.66%, 100% 0, 100% 100%, 0 100%); }
.notch-news-tab { clip-path: polygon(15.98% 100%, 21.5% 20.4%, 26.1% 0, 100% 0, 100% 100%); }

/* coupon ticket notch */
/*.ticket { position: relative; }
.ticket::before,
.ticket::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ticket::before { inset-inline-start: -7px; }
.ticket::after { inset-inline-end: -7px; }
*/
.tick-sep { width: 1px; height: 20px; background: rgba(26, 62, 102, 0.15); }

/* faux chart bars in the hero collage */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.spark i { width: 4px; border-radius: 2px; background: var(--lime); opacity: 0.85; }

/* tabs */
.tab { height: 40px; padding: 0 18px; border-radius: var(--r-card); font-size: 14px; line-height: 19.5px;  color: rgba(26, 62, 102, 0.5); }
.tab[aria-selected='true'] { background: var(--navy); color: #fff; }

/* scroll-row on tablet: carousels turn into snap rows */
.scroll-row { scrollbar-width: none; }
.scroll-row::-webkit-scrollbar { display: none; }
/* native animated scrolling resolves back to 0 on these RTL rows — app.js eases with rAF */
[data-track] { scroll-behavior: auto; scroll-snap-type: none; }


/* market ticker marquee (utility bar) — pauses on hover, respects reduced motion */
.marquee { mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.marquee-track { animation: ticker-scroll 42s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(50%); } /* RTL: content flows toward the start edge */
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}




 #chooser{
 

  clip-path: shape(
    from 0 110px,
    hline to calc(53% - 70px),
    curve to calc(53% - 52px) 96px with calc(53% - 60px) 110px,
    line to calc(53% - 16px) 13px,
    curve to 53% 0 with calc(53% - 13px) 3px,
    hline to 100%,
    vline to 100%,
    hline to 0,
    close
  );

}

/* ≤1023: shallower notch, tuned to the 390 frame (kept here so it wins the
   cascade against the desktop rule above) */
@media (max-width: 1023.98px) {
  #chooser {
   
    clip-path: shape(
      from 0 55px,
      hline to calc(66% - 34px),
      curve to calc(66% - 25px) 48px with calc(66% - 29px) 55px,
      line to calc(66% - 8px) 6px,
      curve to 66% 0 with calc(66% - 6px) 1px,
      hline to 100%,
      vline to 100%,
      hline to 0,
      close
    );
  }
}

  .stat{
     --r:10px;
    --s:10px;
    --run:20px;
    --f:5px;
    --split:50%;
    background:rgb(255 255 255 / .06);
    border-radius:var(--r);
    padding:16px 12px;
    text-align:center;
  }

  @supports (clip-path: shape(from 0 0, close)){
    .stats{gap:0}
    .stat{border-radius:0}
    .stat--first{padding-bottom:calc(16px + var(--s))}
    .stat--mid  {padding-block:calc(16px + var(--s))}
    .stat--last {padding-top:calc(16px + var(--s))}

    .stat--first{
      clip-path: shape(
        from 0 var(--r),
        arc to var(--r) 0 of var(--r) cw,
        hline to calc(100% - var(--r)),
        arc to 100% var(--r) of var(--r) cw,
        vline to calc(100% - var(--s) - var(--r)),
        arc to calc(100% - var(--r)) calc(100% - var(--s)) of var(--r) cw,
        hline to calc(var(--split) + var(--run) / 2 + var(--f)),
        curve to calc(var(--split) + var(--run) / 4) calc(100% - var(--s) * 0.75)
          with calc(var(--split) + var(--run) / 2) calc(100% - var(--s)),
        line to calc(var(--split) - var(--run) / 4) calc(100% - var(--s) * 0.25),
        curve to calc(var(--split) - var(--run) / 2 - var(--f)) 100%
          with calc(var(--split) - var(--run) / 2) 100%,
        hline to var(--r),
        arc to 0 calc(100% - var(--r)) of var(--r) cw,
        close
      );
    }

    .stat--mid{
      clip-path: shape(
        from 0 calc(var(--s) + var(--r)),
        arc to var(--r) var(--s) of var(--r) cw,
        hline to calc(var(--split) - var(--run) / 2 - var(--f)),
        curve to calc(var(--split) - var(--run) / 4) calc(var(--s) * 0.75)
          with calc(var(--split) - var(--run) / 2) var(--s),
        line to calc(var(--split) + var(--run) / 4) calc(var(--s) * 0.25),
        curve to calc(var(--split) + var(--run) / 2 + var(--f)) 0
          with calc(var(--split) + var(--run) / 2) 0,
        hline to calc(100% - var(--r)),
        arc to 100% var(--r) of var(--r) cw,
        vline to calc(100% - var(--s) - var(--r)),
        arc to calc(100% - var(--r)) calc(100% - var(--s)) of var(--r) cw,
        hline to calc(var(--split) + var(--run) / 2 + var(--f)),
        curve to calc(var(--split) + var(--run) / 4) calc(100% - var(--s) * 0.75)
          with calc(var(--split) + var(--run) / 2) calc(100% - var(--s)),
        line to calc(var(--split) - var(--run) / 4) calc(100% - var(--s) * 0.25),
        curve to calc(var(--split) - var(--run) / 2 - var(--f)) 100%
          with calc(var(--split) - var(--run) / 2) 100%,
        hline to var(--r),
        arc to 0 calc(100% - var(--r)) of var(--r) cw,
        close
      );
    }

    .stat--last{
      clip-path: shape(
        from 0 calc(var(--s) + var(--r)),
        arc to var(--r) var(--s) of var(--r) cw,
        hline to calc(var(--split) - var(--run) / 2 - var(--f)),
        curve to calc(var(--split) - var(--run) / 4) calc(var(--s) * 0.75)
          with calc(var(--split) - var(--run) / 2) var(--s),
        line to calc(var(--split) + var(--run) / 4) calc(var(--s) * 0.25),
        curve to calc(var(--split) + var(--run) / 2 + var(--f)) 0
          with calc(var(--split) + var(--run) / 2) 0,
        hline to calc(100% - var(--r)),
        arc to 100% var(--r) of var(--r) cw,
        vline to calc(100% - var(--r)),
        arc to calc(100% - var(--r)) 100% of var(--r) cw,
        hline to var(--r),
        arc to 0 calc(100% - var(--r)) of var(--r) cw,
        close
      );
    }
  }


    /* newsletter keeps its notched tab, scaled for the narrow frame */
 /* .news-box {

background: linear-gradient(180deg, #CFE87B 0%, #8BCE5B 100%)!important;

  max-width: 100%;
  clip-path: path("M0 75 A20 20 0 0 1 20 55 H615 A20 20 0 0 0 633.2 42.9 L646.6 12.1 A20 20 0 0 1 665 0 H930 A20 20 0 0 1 950 20 V345 A20 20 0 0 1 930 365 H20 A20 20 0 0 1 0 345 Z");
border-radius: 20px !important;
  }*/
.news-box {
  --shelf: 40px;   /* depth of the step */
 --ridge: 50%;
  --notch: 40px;
  --tl: 20px;      /* radius of the shelf's top-left corner */

  background: linear-gradient(180deg, #CFE87B 0%, #8BCE5B 100%)!important;
  border-radius: 20px!important;

  clip-path: polygon(
    0 calc(var(--shelf) + var(--tl)),
    calc(var(--tl) * 0.076) calc(var(--shelf) + var(--tl) * 0.617),
    calc(var(--tl) * 0.293) calc(var(--shelf) + var(--tl) * 0.293),
    calc(var(--tl) * 0.617) calc(var(--shelf) + var(--tl) * 0.076),
    var(--tl) var(--shelf),

    calc(var(--ridge) - var(--notch))          var(--shelf),
    calc(var(--ridge) - var(--notch) * 0.95)   calc(var(--shelf) * 0.993),
    calc(var(--ridge) - var(--notch) * 0.9)    calc(var(--shelf) * 0.972),
    calc(var(--ridge) - var(--notch) * 0.85)   calc(var(--shelf) * 0.939),
    calc(var(--ridge) - var(--notch) * 0.8)    calc(var(--shelf) * 0.896),
    calc(var(--ridge) - var(--notch) * 0.75)   calc(var(--shelf) * 0.844),
    calc(var(--ridge) - var(--notch) * 0.7)    calc(var(--shelf) * 0.784),
    calc(var(--ridge) - var(--notch) * 0.65)   calc(var(--shelf) * 0.718),
    calc(var(--ridge) - var(--notch) * 0.6)    calc(var(--shelf) * 0.648),
    calc(var(--ridge) - var(--notch) * 0.55)   calc(var(--shelf) * 0.575),
    calc(var(--ridge) - var(--notch) * 0.5)    calc(var(--shelf) * 0.5),
    calc(var(--ridge) - var(--notch) * 0.45)   calc(var(--shelf) * 0.425),
    calc(var(--ridge) - var(--notch) * 0.4)    calc(var(--shelf) * 0.352),
    calc(var(--ridge) - var(--notch) * 0.35)   calc(var(--shelf) * 0.282),
    calc(var(--ridge) - var(--notch) * 0.3)    calc(var(--shelf) * 0.216),
    calc(var(--ridge) - var(--notch) * 0.25)   calc(var(--shelf) * 0.156),
    calc(var(--ridge) - var(--notch) * 0.2)    calc(var(--shelf) * 0.104),
    calc(var(--ridge) - var(--notch) * 0.15)   calc(var(--shelf) * 0.061),
    calc(var(--ridge) - var(--notch) * 0.1)    calc(var(--shelf) * 0.028),
    calc(var(--ridge) - var(--notch) * 0.05)   calc(var(--shelf) * 0.007),
    var(--ridge) 0,

    100% 0,
    100% 100%,
    0 100%
  );
}

@media (min-width: 1024px) {
  .news-box {
    --shelf: 55px;
    --notch: 60px;
    --ridge: 70%;
  }
}
/* ════════════════════════════════════════════════════════════════════
   MOBILE LAYER — matches the 390px "Home Page" frame from the .fig
   Everything below only ever applies under the lg / md breakpoints;
   the 1200px desktop composition is untouched.
   ════════════════════════════════════════════════════════════════════ */

/* base.css loads after Tailwind, so `.btn` display beat `.hidden`.
   Re-assert the utility without breaking the `lg:flex` counterpart. */
.hidden.btn { display: none; }
@media (min-width: 768px)  { .btn.md\:flex { display: inline-flex; } .btn.md\:hidden { display: none; } }
@media (min-width: 1024px) { .btn.lg\:flex { display: inline-flex; } .btn.lg\:hidden { display: none; } }

@media (max-width: 1023.98px) {
  body{
    font-weight:400;
  }
  /* hero ↔ navy band: shallower notch, tuned to the 390 frame */
  #chooser {
   
    clip-path: shape(
      from 0 55px,
      hline to calc(55% - 34px),
      curve to calc(55% - 25px) 48px with calc(55% - 29px) 55px,
      line to calc(55% - 8px) 6px,
      curve to 55% 0 with calc(55% - 6px) 1px,
      hline to 100%,
      vline to 100%,
      hline to 0,
      close
    );
  }
  .notch-navy-head { clip-path: none; }

  /* compact broker cards drop the outlined button for a text link */
  .broker-cta {
    align-self: flex-start;
    width: auto;
    height: auto;
    margin-top: 18px!important;
    padding: 0 0 4px;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(26, 62, 102, 1);
  }
  .broker-cta:hover { background: none; color: var(--navy); box-shadow: none; }


 
}

@media (max-width: 767.98px) {
  /* academy card head: title on top, stats as label/value rows */
  .ac-head  { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
 
  .ac-stat  {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    text-align: start;
  }
 
 

  /* fraud counters sit in one row — the interlocking shapes stack vertically */
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat  {
    clip-path: none !important;
    border-radius: 10px !important;
    padding: 12px 6px !important;
  }
  .stat p:first-child { font-size: 20px; }

  /* horizontal peek rows (mentors / reviews / blog) bleed to the frame edge */
  .peek { display: flex; overflow-x: auto; margin-inline: -20px; }
  .peek > * { flex: 0 0 auto; }
}

/* ---- mobile refinements (second pass) ------------------------------- */

@media (max-width: 1023.98px) {
  /* the 300px card can't afford a two-line rating chip */
  .rate { white-space: nowrap; }

  /* featured broker card reflows to: [logo | title] / [rating] / [chips] */
  .feat-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    align-content: start;
  }
  .feat-head  { display: contents; }
  .feat-logo  { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .feat-title { grid-column: 2; grid-row: 1;  }
  .feat-rate  { grid-column: 2; grid-row: 2; }
  .feat-chips { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; flex-wrap: wrap; }
  .feat-card > *:not(.feat-logo):not(.feat-title):not(.feat-rate):not(.feat-chips) {
    grid-column: 1 / -1;
  }
}

/* ════════════════════════════════════════════════════════════════════
   BROKER DETAIL — single.html
   Primitives that the page repeats: the section tab rail, the coupon
   ticket notch and the score bars. Everything else stays on the
   Tailwind theme utilities.
   ════════════════════════════════════════════════════════════════════ */

/* section tab rail (under the broker name) */
.bd-tab {
  flex: 0 0 auto;
  padding-bottom: 10px;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  line-height: 19.5px;
  color: rgba(26, 62, 102, 0.45);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.bd-tab:hover { color: var(--navy); }
.bd-tab.is-active {
  border-bottom-color: var(--lime);
  font-weight: 600;
  color: var(--navy-deep);
}

/* coupon ticket: the two bites sit on the divider between code and copy */
.bd-ticket::before,
.bd-ticket::after,
.bd-ticket-diffrent::before,
.bd-ticket-diffrent::after{
  content: '';
  position: absolute;
  left: 67px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border:1px solid var(--line);
  pointer-events: none;
}
.bd-ticket::before { top: -10px; }
.bd-ticket::after { bottom: -10px; }


.bd-ticket-diffrent::before {
  right: -10px;
  top: 60%;
}
.bd-ticket-diffrent::after { 
	left: -10px!important;
  top: 60%; }
/* score bars in the overall-rating block */

  .meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
}
.meter-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 4px;
  background: rgba(26, 62, 102, 0.1);
  overflow: hidden;
}
.meter-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #cfe87b 0%, #8bce5b 100%);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ════════════════════════════════════════════════════════════════════
   CATEGORY / BROKER LIST — category.html
   The filter + sort controls and the two mobile bottom sheets. The
   cards themselves reuse .card / .numtab / .btn from above.
   ════════════════════════════════════════════════════════════════════ */

/* ---- control pills in the desktop filter bar ------------------------ */
.fpill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 45px;
  padding: 0 16px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(26, 62, 102, 0.12);
  font-size: 14px;
  line-height: 19.5px;
  white-space: nowrap;
  transition: box-shadow 0.18s ease;
}
.fpill:hover { box-shadow: inset 0 0 0 1px rgba(26, 62, 102, 0.35); }
[data-dropdown][data-open='true'] > .fpill { box-shadow: inset 0 0 0 1px var(--navy); }
/* a group with something ticked reads as active without a count badge */
.fpill[data-active='true'] { box-shadow: inset 0 0 0 1px var(--lime); background: rgba(139, 206, 91, 0.08); }

/* ---- checkbox / radio rows (shared by the panels and the sheets) ---- */
.f-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-tag);
  font-size: 14px;
  line-height: 19.5px;
  cursor: pointer;
}
.f-row:hover { background: rgba(26, 62, 102, 0.04); }

/* the real control stays in the accessibility tree, the span is the skin */
.f-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.f-box,
.f-dot {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(26, 62, 102, 0.2);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.f-box { border-radius: 6px; }
.f-dot { border-radius: 50%; }

.f-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 11px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: translate(-50%, -58%) rotate(45deg);
  opacity: 0;
}
.f-dot::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.f-input:checked + .f-box {
  background: linear-gradient(180deg, #cfe87b 0%, #8bce5b 100%);
  box-shadow: none;
}
.f-input:checked + .f-box::after { opacity: 1; }
.f-input:checked + .f-dot { box-shadow: inset 0 0 0 1.5px var(--lime); }
.f-input:checked + .f-dot::after { opacity: 1; }
.f-input:focus-visible + .f-box,
.f-input:focus-visible + .f-dot { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---- accordion group inside the filter sheet ------------------------ */
.fgroup { background: var(--surface); border-radius: var(--r-card); }
.fgroup[data-open='true'] { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }

/* ---- bottom sheets --------------------------------------------------
   Mobile only: the same options live in the desktop dropdowns, so the
   sheet is display:none from lg up and never traps focus there. */
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 59, 0.55);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.sheet-panel {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  max-height: 88vh;
  flex-direction: column;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(8, 32, 59, 0.18);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.sheet[data-open='true'] .sheet-scrim { opacity: 1; }
.sheet[data-open='true'] .sheet-panel { transform: translateY(0); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; }
/* the page behind must not scroll while a sheet is up */
.sheet-lock, .sheet-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sheet-scrim, .sheet-panel { transition: none; }
}


/* ── Footer widget columns (menus added from Appearance → Widgets) ── */
.footer-col ul {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.footer-col ul  { margin-top: 12px;  }
.footer-col a { transition: color 0.2s;   color: rgba(255, 255, 255, 0.7)!important;}
.footer-col a:hover,
.footer-col .current-menu-item > a { color: #8BCE5B; }
.footer-widget + .footer-widget { margin-top: 24px; }
@media (min-width: 1024px) {
  .footer-col ul { margin-top: 20px; }
}


body .wp-block-table.is-style-stripes tbody tr:nth-child(2n+1){

background-color: #f8f9fd!important;
  border-radius: 8px!important;
}