/* Ported from the prototype's circles.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — الحلقات القرآنية (public listing)
   ---------------------------------------------------------
   HERO — agnos-wbs.framer.website, measured at 1265:
     three carved rings per side (2033 / 1400 / 1000px), each an
     11px groove with a soft inner shadow, anchored past the page
     edges so the arcs stay at the sides; the largest one turns and carries white
     86px tiles (8px radius, two-step soft shadow) so they glide
     along the arc. Here: cream ground, gold-ink icons, no CTAs.

   GRID — makro.framer.website ("Latest insights"): white cards
     with an inset rounded photo, a pill + meta row, a title, and
     a small square arrow sitting in a notch cut from the bottom
     corner. Here: 3 / 2 / 1 columns, one action per card.
   ========================================================= */

.cl-page{
  --cl-bg:     #F7F2E7;
  --cl-ink:    var(--u-forest);
  --cl-sub:    #5A6963;
  --cl-muted:  #87938D;
  --cl-line:   rgba(18,60,53,.10);
  --cl-card:   #FFFDF8;
  --cl-sand:   #F1EADB;
  --cl-out:    cubic-bezier(.2,.7,.2,1);
  background:var(--cl-bg);
  color:var(--cl-ink);
}

svg:where(:has(> use[href^="#i-"])){ width:1em; height:1em; flex:none; }


/* =========================================================
   1 — HERO
   ========================================================= */

.ch{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(640px, 92vh, 860px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:120px 24px 110px;
  text-align:center;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(255,252,244,.95), rgba(255,252,244,0) 70%),
    radial-gradient(40% 40% at 50% 100%, rgba(212,175,90,.10), transparent 70%),
    var(--cl-bg);
}

/* ---- carved orbits ----
   Anchored to the page edges, as in the reference: each ring is
   placed by how far it reaches in from its edge (--reach), so the
   arcs stay out at the sides at every width. The biggest reach is
   capped to stop well before the headline. */
.ch-orbits{
  --big:max(44px, min(25vw, calc(50vw - 390px)));   /* inner reach of the biggest ring; on phones they just peek in */
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.ch-side{
  position:absolute;
  top:50%;
  width:0; height:0;
}
.ch-side--start{ right:0; }                /* RTL start = right edge */
.ch-side--end  { left:0; }

.ch-ring{
  position:absolute;
  top:calc(var(--d) / -2);
  width:var(--d); height:var(--d);
  border-radius:50%;
  /* an 11px groove: dark outer lip, sand floor, light inner lip, open centre */
  background:radial-gradient(closest-side,
    transparent calc(100% - 12px),
    rgba(255,255,255,.9) calc(100% - 11px),
    rgba(228,216,190,.55) calc(100% - 9px),
    rgba(222,208,178,.65) calc(100% - 3px),
    rgba(150,126,80,.32) 100%);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
/* the three rings reach in: biggest, ~60% of it, ~22% of it */
.ch-ring:nth-child(1){ --reach:var(--big); }
.ch-ring:nth-child(2){ --reach:calc(var(--big) * .6); }
.ch-ring:nth-child(3){ --reach:calc(var(--big) * .22); }
.ch-side--start .ch-ring{ left:calc(var(--reach) * -1); }
.ch-side--end   .ch-ring{ left:calc(var(--reach) - var(--d)); }

.ch-spin{
  position:absolute; inset:0;
  animation:ch-orbit 160s linear infinite;
}
.ch-side--end .ch-spin{ animation-direction:reverse; }
@keyframes ch-orbit{ to{ transform:rotate(360deg); } }

/* a tile rides the groove's centre line, tilted with the arc */
.ch-tile{
  position:absolute;
  left:50%; top:50%;
  width:78px; height:78px;
  margin:-39px 0 0 -39px;
  display:grid; place-items:center;
  border-radius:12px;
  color:var(--gold-deep);
  background:#FFFDF8;
  border:1px solid rgba(176,143,62,.12);
  box-shadow:0 2px 4px rgba(18,60,53,.05), 0 14px 22px rgba(18,60,53,.07);
  transform:rotate(var(--a)) translateX(calc(var(--d) / 2 - 6px)) rotate(90deg);
}
.ch-tile svg{ width:30px; height:30px; stroke-width:1.5; }

/* ---- copy ---- */
.ch-inner{ position:relative; max-width:760px; }

.ch-badge{
  display:inline-flex; align-items:center; gap:10px;
  margin:0;
  padding:6px 12px;
  border-radius:6px;
  font-size:14px; font-weight:600;
  letter-spacing:.3px;
  color:var(--gold-deep);
  background:rgba(255,253,248,.7);
  border:1px dashed rgba(176,143,62,.42);
}
.ch-badge svg{ width:7px; height:11px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }

.ch-title{
  margin:26px 0 0;
  font-size:clamp(38px, 5vw, 72px);
  line-height:1.28;
  font-weight:700;
  letter-spacing:0;                            /* negative tracking breaks Arabic joins */
  color:var(--cl-ink);
}
.ch-title > span{ display:block; }
.ch-nw{ white-space:nowrap; }                  /* keeps the comma with the ringed word */

.ch-lead{
  max-width:580px;
  margin:26px auto 0;
  font-size:clamp(16px, 1.3vw, 19px);
  line-height:1.95;
  color:var(--cl-sub);
}

/* scroll cue: a hairline with a drifting dot and a quiet word */
.ch-scroll{
  position:absolute; bottom:30px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:13px; font-weight:500;
  color:var(--cl-muted);
  transition:color .3s var(--ease);
}
.ch-scroll:hover{ color:var(--cl-ink); }
.ch-scroll-line{
  position:relative;
  width:1px; height:42px;
  background:linear-gradient(to bottom, rgba(18,60,53,0), rgba(18,60,53,.25));
  overflow:hidden;
}
.ch-scroll-line i{
  position:absolute; left:-2px; top:-6px;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold);
  animation:ch-drip 2.6s var(--cl-out) infinite;
}
@keyframes ch-drip{ 0%{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(50px); opacity:0; } }

/* entrance */
.ch-up{
  opacity:0;
  transform:translateY(20px);
  animation:ch-up .8s var(--cl-out) forwards;
  animation-delay:var(--d, 0s);
}
.ch-scroll.ch-up{ transform:translate(-50%, 20px); animation-name:ch-up-x; }
@keyframes ch-up{ to{ opacity:1; transform:none; } }
@keyframes ch-up-x{ to{ opacity:1; transform:translateX(-50%); } }


/* =========================================================
   2 — CATALOGUE
   ========================================================= */

.cat{ position:relative; padding:10px 0 120px; }
.cat-wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }

/* ---- toolbar ---- */
.cf-bar{
  position:relative; z-index:20;
  display:flex; align-items:center; gap:8px;
  padding:8px;
  border-radius:22px;
  background:var(--cl-card);
  border:1px solid var(--cl-line);
  box-shadow:0 24px 50px -40px rgba(18,60,53,.6);
}

.cf-search{
  position:relative;
  flex:1 1 320px; min-width:0;
  display:flex; align-items:center; gap:10px;
  height:54px;
  padding:0 18px;
  border-radius:15px;
  background:var(--cl-sand);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.cf-search:focus-within{ background:#fff; box-shadow:0 0 0 2px rgba(212,175,90,.55); }
.cf-search > svg{ width:20px; height:20px; color:var(--cl-muted); }
.cf-search input{
  flex:1; min-width:0;
  height:100%;
  border:0; outline:0;
  background:none;
  font:inherit; font-size:16px;
  color:var(--cl-ink);
}
.cf-search input::placeholder{ color:#97A19C; }
.cf-search input::-webkit-search-cancel-button{ display:none; }
.cf-search-clear{
  width:28px; height:28px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(18,60,53,.07);
  color:var(--cl-ink);
  cursor:pointer;
}
.cf-search-clear svg{ width:14px; height:14px; }

.cf-quick{ display:flex; align-items:center; gap:4px; }

/* quick dropdown */
.cf-dd{ position:relative; }
.cf-dd-btn, .cf-all{
  display:inline-flex; align-items:center; gap:8px;
  height:54px;
  padding:0 16px;
  border:0;
  border-radius:15px;
  background:none;
  font:inherit; font-size:15px; font-weight:500;
  color:#4A5B54;
  white-space:nowrap;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.cf-dd-btn svg{ width:16px; height:16px; color:var(--cl-muted); transition:transform .3s var(--ease); }
.cf-dd-btn:hover, .cf-dd.is-open .cf-dd-btn{ background:var(--cl-sand); color:var(--cl-ink); }
.cf-dd.is-open .cf-dd-btn svg{ transform:rotate(180deg); }
.cf-dd-btn.has-value{ color:var(--cl-ink); font-weight:600; }
.cf-dd-btn > span{ display:inline-flex; align-items:center; gap:7px; }
.cf-dd-btn b{
  min-width:20px; height:20px; padding:0 6px;
  display:grid; place-items:center;
  border-radius:99px;
  font-size:11.5px; font-weight:700;
  color:var(--cl-ink);
  background:rgba(212,175,90,.3);
}

.cf-all{
  margin-inline-start:4px;
  color:var(--u-ivory);
  background:var(--u-forest);
  padding:0 20px;
}
.cf-all svg{ width:18px; height:18px; color:var(--gold-light); }
.cf-all:hover{ background:#0E322C; }
.cf-count{
  min-width:22px; height:22px; padding:0 6px;
  display:grid; place-items:center;
  border-radius:99px;
  font-size:12px; font-weight:700;
  color:var(--u-forest);
  background:var(--gold);
}

.cf-pop{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:230px;
  padding:8px;
  border-radius:18px;
  background:#FFFDF8;
  border:1px solid var(--cl-line);
  box-shadow:0 30px 60px -30px rgba(18,60,53,.45);
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .28s var(--cl-out), visibility 0s .28s;
}
.cf-dd.is-open .cf-pop{ opacity:1; visibility:visible; transform:none; transition:opacity .22s var(--ease), transform .28s var(--cl-out), visibility 0s; }

/* a selectable row (quick dropdowns) */
.opt-row{
  width:100%;
  display:flex; align-items:center; gap:10px;
  min-height:44px;
  padding:0 12px;
  border:0; border-radius:12px;
  background:none;
  font:inherit; font-size:15px;
  text-align:start;
  color:var(--cl-ink);
  cursor:pointer;
  transition:background .2s var(--ease);
}
.opt-row:hover{ background:var(--cl-sand); }
.opt-row img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.opt-box{
  width:20px; height:20px; flex:none;
  display:grid; place-items:center;
  border-radius:6px;
  border:1.5px solid rgba(18,60,53,.25);
  color:transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.opt-box svg{ width:13px; height:13px; }
.opt-row[aria-pressed="true"] .opt-box{ background:var(--u-forest); border-color:var(--u-forest); color:var(--gold-light); }
.opt-row small{ margin-inline-start:auto; font-size:12.5px; color:var(--cl-muted); }

/* ---- mobile filter / sort row ---- */
.cf-mob{ display:none; gap:8px; margin-top:10px; }
.cf-mob-btn{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px;
  border-radius:14px;
  border:1px solid var(--cl-line);
  background:var(--cl-card);
  font:inherit; font-size:15px; font-weight:600;
  color:var(--cl-ink);
  cursor:pointer;
}
.cf-mob-btn svg{ width:18px; height:18px; color:var(--gold-deep); }

/* ---- active chips ---- */
.cf-chips{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:16px;
}
.cf-chips[hidden]{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:36px;
  padding-inline:14px 8px;
  border:1px solid rgba(176,143,62,.28);
  border-radius:99px;
  background:rgba(212,175,90,.12);
  font:inherit; font-size:14px; font-weight:500;
  color:var(--cl-ink);
  cursor:pointer;
  animation:chip-in .3s var(--cl-out);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.chip svg{ width:16px; height:16px; padding:2px; border-radius:50%; background:rgba(18,60,53,.08); }
.chip:hover{ background:rgba(212,175,90,.22); border-color:rgba(176,143,62,.45); }
@keyframes chip-in{ from{ opacity:0; transform:scale(.92); } }
.chip-clear{
  height:36px; padding:0 8px;
  border:0; background:none;
  font:inherit; font-size:14px; font-weight:600;
  color:var(--gold-deep);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  cursor:pointer;
}

/* ---- results header ---- */
.cr-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:34px 0 22px;
}
.cr-count{ margin:0; font-size:17px; color:var(--cl-sub); }
.cr-count b{ font-size:22px; font-weight:700; color:var(--cl-ink); }

.cr-sort{ position:relative; display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--cl-muted); }
.cr-sort-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:44px; padding:0 16px;
  border:1px solid var(--cl-line);
  border-radius:13px;
  background:var(--cl-card);
  font:inherit; font-size:15px; font-weight:600;
  color:var(--cl-ink);
  cursor:pointer;
  transition:border-color .25s var(--ease);
}
.cr-sort-btn:hover{ border-color:rgba(176,143,62,.45); }
.cr-sort-btn svg{ width:16px; height:16px; color:var(--cl-muted); transition:transform .3s var(--ease); }
.cr-sort.is-open .cr-sort-btn svg{ transform:rotate(180deg); }
.cr-sort-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:30;
  min-width:200px;
  margin:0; padding:6px;
  list-style:none;
  border-radius:16px;
  background:#FFFDF8;
  border:1px solid var(--cl-line);
  box-shadow:0 30px 60px -30px rgba(18,60,53,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .28s var(--cl-out), visibility 0s .28s;
}
.cr-sort.is-open .cr-sort-menu{ opacity:1; visibility:visible; transform:none; transition:opacity .22s var(--ease), transform .28s var(--cl-out), visibility 0s; }
.cr-sort-menu li{
  display:flex; align-items:center; justify-content:space-between;
  min-height:42px; padding:0 12px;
  border-radius:11px;
  font-size:15px; color:var(--cl-ink);
  cursor:pointer;
}
.cr-sort-menu li:hover, .cr-sort-menu li.is-focus{ background:var(--cl-sand); }
.cr-sort-menu li[aria-selected="true"]{ font-weight:600; }
.cr-sort-menu li[aria-selected="true"]::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* =========================================================
   the grid & card
   ========================================================= */

.cg{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

/* the card itself lives in content-cards.css (shared with the dashboard) */

/* ---- skeleton ---- */
.cc.is-skel{ pointer-events:none; animation:none; }
.sk{ position:relative; overflow:hidden; border-radius:10px; background:#EEE7D7; }
.sk::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform:translateX(100%);
  animation:sk 1.3s ease-in-out infinite;
}
@keyframes sk{ to{ transform:translateX(-100%); } }
.cc.is-skel .cc-media{ background:none; }
.cc.is-skel .cc-media .sk{ position:absolute; inset:0; border-radius:16px; }

/* ---- empty ---- */
.cg-empty{
  max-width:520px;
  margin:20px auto 0;
  padding:56px 30px;
  border-radius:26px;
  text-align:center;
  background:var(--cl-card);
  border:1px dashed rgba(176,143,62,.35);
}
.cg-empty[hidden]{ display:none; }
.cg-empty-ico{
  width:62px; height:62px;
  display:inline-grid; place-items:center;
  border-radius:50%;
  color:var(--gold-deep);
  background:rgba(212,175,90,.14);
}
.cg-empty-ico svg{ width:26px; height:26px; }
.cg-empty h2{ margin:18px 0 0; font-size:22px; font-weight:600; }
.cg-empty p{ margin:10px 0 0; font-size:15.5px; line-height:1.8; color:var(--cl-sub); }
.cg-empty-btn{
  margin-top:22px;
  height:48px; padding:0 24px;
  border:0; border-radius:14px;
  font:inherit; font-size:15px; font-weight:600;
  color:var(--u-ivory); background:var(--u-forest);
  cursor:pointer;
  transition:background .3s var(--ease);
}
.cg-empty-btn:hover{ background:#0E322C; }

/* ---- load more ---- */
.cg-more{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:44px; }
.cg-more[hidden]{ display:none; }
.cg-more p{ margin:0; font-size:14px; color:var(--cl-muted); }
/* «عرض المزيد»: the site's main pill — green on light ground, gold on dark —
   with the round icon; the arrow points down, more is coming below */
.cg-more-btn{
  display:inline-flex; align-items:center; gap:14px;
  padding-block:9px; padding-inline:26px 9px;
  border:0; border-radius:100px;
  background:var(--u-forest, #123C35); color:#F8F5ED;
  font:inherit; font-size:16px; font-weight:600;
  box-shadow:0 14px 30px -18px rgba(18,60,53,.85);
  cursor:pointer;
  transition:transform .35s var(--cl-out, ease), box-shadow .35s var(--cl-out, ease);
}
.cg-more-btn::after{
  content:""; flex:none; width:38px; height:38px; border-radius:50%;
  background:#F8F5ED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123C35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 17px no-repeat;
  transition:transform .35s var(--cl-out, ease), background-color .35s;
}
.cg-more-btn:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -18px rgba(18,60,53,.9); }
.cg-more-btn:hover::after{ transform:translateY(3px); background-color:var(--u-gold, #D4AF5A); }
.cg-more-btn:focus-visible{ outline:2px solid var(--u-gold, #D4AF5A); outline-offset:3px; }
/* on a dark section: gold, the icon in forest */
.is-dark .cg-more-btn, .cg-more.is-dark .cg-more-btn{ background:var(--u-gold, #D4AF5A); color:#123C35; box-shadow:0 14px 30px -14px rgba(212,175,90,.55); }
.is-dark .cg-more-btn::after, .cg-more.is-dark .cg-more-btn::after{ background-color:#123C35; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }


/* =========================================================
   ALL FILTERS — drawer / bottom sheet
   ========================================================= */

.fd{ position:fixed; inset:0; z-index:120; }
.fd[hidden]{ display:none; }
.fd-scrim{
  position:absolute; inset:0;
  background:rgba(7,31,26,.38);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.fd-panel{
  position:absolute; top:12px; bottom:12px; left:12px;      /* opens from the end side */
  width:min(440px, calc(100% - 24px));
  display:flex; flex-direction:column;
  border-radius:26px;
  background:#FBF8F1;
  box-shadow:0 40px 80px -30px rgba(7,31,26,.5);
  transform:translateX(-24px);
  opacity:0;
  transition:transform .45s var(--cl-out), opacity .3s var(--ease);
}
.fd.is-open .fd-scrim{ opacity:1; }
.fd.is-open .fd-panel{ transform:none; opacity:1; }

.fd-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--cl-line);
}
.fd-head h2{ margin:0; font-size:20px; font-weight:600; }
.fd-x{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--cl-sand);
  color:var(--cl-ink);
  cursor:pointer;
}
.fd-x svg{ width:18px; height:18px; }

.fd-body{ flex:1; overflow-y:auto; padding:6px 24px 20px; overscroll-behavior:contain; }
.fd-group{ padding:20px 0; border-bottom:1px solid var(--cl-line); }
.fd-group:last-child{ border-bottom:0; }
.fd-group h3{ display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; font-size:15.5px; font-weight:600; }
.fd-group h3 small{ font-size:12.5px; font-weight:500; color:var(--gold-deep); }
.fd-opts{ display:flex; flex-wrap:wrap; gap:8px; }

.pick{
  display:inline-flex; align-items:center; gap:7px;
  height:42px; padding:0 16px;
  border:1px solid rgba(18,60,53,.14);
  border-radius:13px;
  background:#fff;
  font:inherit; font-size:14.5px; font-weight:500;
  color:#41524B;
  cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.pick:hover{ border-color:rgba(176,143,62,.5); }
.pick svg{ width:14px; height:14px; display:none; }
.pick[aria-pressed="true"], .pick[aria-checked="true"]{
  color:var(--u-ivory);
  background:var(--u-forest);
  border-color:var(--u-forest);
}
.pick[aria-pressed="true"] svg{ display:block; color:var(--gold-light); }

.fd-check{
  display:flex; align-items:center; gap:12px;
  padding:4px 0;
  font-size:15px;
  cursor:pointer;
}
.fd-check input{ position:absolute; opacity:0; pointer-events:none; }
.fd-check .opt-box{ width:22px; height:22px; }
.fd-check input:checked + .opt-box{ background:var(--u-forest); border-color:var(--u-forest); color:var(--gold-light); }
.fd-check input:focus-visible + .opt-box{ outline:2px solid var(--gold); outline-offset:2px; }

.fd-foot{
  display:flex; align-items:center; gap:10px;
  padding:16px 24px 20px;
  border-top:1px solid var(--cl-line);
  background:#FBF8F1;
  border-radius:0 0 26px 26px;
}
.fd-apply{
  flex:1;
  height:52px;
  border:0; border-radius:15px;
  font:inherit; font-size:16px; font-weight:600;
  color:var(--u-ivory); background:var(--u-forest);
  cursor:pointer;
  transition:background .3s var(--ease);
}
.fd-apply:hover{ background:#0E322C; }
.fd-clear{
  height:52px; padding:0 14px;
  border:0; background:none;
  font:inherit; font-size:15px; font-weight:600;
  color:var(--gold-deep);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  cursor:pointer;
}

body.is-locked{ overflow:hidden; }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1180px){
  .cf-dd-btn{ padding:0 12px; }
}

/* tablet: two columns; quick dropdowns give way to "كل الفلاتر" */
@media (max-width:1080px){
  .cg{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cf-quick{ display:none; }
}

/* mobile: search, then filters / sort; drawer becomes a bottom sheet */
@media (max-width:720px){
  .ch{ min-height:600px; padding:110px 20px 100px; }

  .ch-tile{ display:none; }                     /* no room beside the headline on phones; the arcs stay */

  .cat-wrap{ padding:0 16px; }
  .cf-bar{ padding:6px; border-radius:18px; }
  .cf-search{ height:50px; }
  .cf-all{ display:none; }
  .cf-mob{ display:flex; }
  .cr-head{ margin:24px 0 16px; }
  .cr-sort-label, .cr-sort-btn{ display:none; }
  .cr-sort{ position:static; }
  .cr-head{ position:relative; }
  .cr-sort-menu{ top:auto; left:0; right:0; }
  .cg{ grid-template-columns:1fr; gap:16px; }
  .cc-title{ font-size:19px; }

  .fd-panel{
    top:auto; bottom:0; left:0; right:0;
    width:auto; max-height:88svh;
    border-radius:26px 26px 0 0;
    transform:translateY(40px);
  }
  .fd-panel::before{
    content:""; position:absolute; top:8px; left:50%;
    width:42px; height:4px; margin-left:-21px;
    border-radius:99px; background:rgba(18,60,53,.18);
  }
  .fd-head{ padding-top:26px; }
  .fd-foot{ border-radius:0; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce){
  .ch-spin, .ch-scroll-line i{ animation:none; }
  .ch-up{ opacity:1; transform:none; animation:none; }
  .ch-scroll.ch-up{ transform:translateX(-50%); }
  .cc, .chip{ animation:none; }
  .sk::after{ animation:none; }
  .cc, .cc-media img, .cc-go svg, .fd-panel, .fd-scrim{ transition-duration:.01s !important; }
}

/* elements toggled with [hidden] that also set display */
.cf-search-clear[hidden], .cf-count[hidden]{ display:none; }


/* =========================================================
   NEXT STEP — closing guidance under the circles grid
   totopia.framer.website, its closing CTA: a big dark rounded
   block; a heavy two-line headline, a line of copy, two short
   points with small icons and one pill action on one side; on the
   other a puffy photo (rounded corners, pinched sides), a tall
   photo beside it, a light card with a few avatars under both, and
   a hand-drawn accent at the photo's corner.
   Here: deep forest, cream type, muted-gold action and accents,
   a faint star lattice, a photo under the green layer. The action
   leads to sign-in; choosing still happens on a circle's page.
   ========================================================= */

.cx{ padding:0 28px 120px; }
.cx-box{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 560px);
  align-items:center;
  gap:56px;
  max-width:1240px;
  margin:0 auto;
  padding:72px 64px;
  border-radius:36px;
  color:var(--u-ivory);
  background:
    radial-gradient(50% 70% at 0% 100%, rgba(168,199,181,.14), transparent 70%),
    radial-gradient(40% 60% at 100% 0%, rgba(212,175,90,.12), transparent 70%),
    #123C35;
  box-shadow:0 40px 80px -50px rgba(18,60,53,.8);
}
/* a photo under the green layer: blurred and toned, so the copy stays readable */
.cx-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.cx-bg img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  filter:blur(3px) saturate(.6);
  transform:scale(1.06);                        /* hides the soft blur edge */
}
.cx-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(270deg, rgba(18,60,53,.95) 0%, rgba(18,60,53,.86) 45%, rgba(18,60,53,.72) 100%),
    radial-gradient(40% 60% at 100% 0%, rgba(212,175,90,.14), transparent 70%);
}
/* a faint eight-point star lattice */
.cx-box::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F8F5ED' stroke-width='.8'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:64px 64px;
  opacity:.05;
  -webkit-mask-image:radial-gradient(60% 80% at 80% 40%, #000, transparent 75%);
          mask-image:radial-gradient(60% 80% at 80% 40%, #000, transparent 75%);
  pointer-events:none;
}

/* ---- copy ---- */
.cx-label{
  display:inline-flex; align-items:center; gap:9px;
  margin:0;
  font-size:14px; font-weight:600;
  color:var(--gold-light);
}
.cx-label span{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(212,175,90,.2); }
.cx-title{
  margin:16px 0 0;
  font-size:clamp(30px, 3.4vw, 48px);
  line-height:1.3;
  font-weight:700;
  color:#FFFDF8;
  text-wrap:balance;
}
.cx-text{
  max-width:520px;
  margin:18px 0 0;
  font-size:clamp(16px, 1.2vw, 18px);
  line-height:1.95;
  color:rgba(248,245,237,.78);
}
.cx-points{ display:grid; gap:14px; margin:28px 0 0; padding:0; list-style:none; }
.cx-points li{ display:flex; align-items:center; gap:12px; font-size:16.5px; font-weight:500; color:#FFFDF8; }
.cx-ico{
  display:grid; place-items:center;
  width:34px; height:34px; flex:none;
  border-radius:50%;
  color:var(--gold);
  background:rgba(212,175,90,.12);
  box-shadow:inset 0 0 0 1px rgba(212,175,90,.3);
}
.cx-ico svg{ width:17px; height:17px; }

.cx-cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:40px;
  padding:16px 28px;
  border-radius:99px;
  font-size:16px; font-weight:700;
  color:var(--u-forest);
  background:linear-gradient(140deg, var(--gold-light) 0%, var(--gold) 60%);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
  transition:transform .4s var(--cl-out), box-shadow .4s var(--cl-out), filter .3s var(--cl-out);
}
.cx-cta svg{ width:18px; height:18px; transition:transform .4s var(--cl-out); }
.cx-cta:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 18px 34px -14px rgba(0,0,0,.55), 0 0 0 4px rgba(212,175,90,.18); }
.cx-cta:hover svg{ transform:translateX(-4px); }
.cx-cta:focus-visible{ outline:2px solid #FFFDF8; outline-offset:4px; }

/* ---- the collage ---- */
.cx-visual{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, .42fr);
  gap:18px;
}
.cx-blob, .cx-tall{ position:relative; margin:0; overflow:hidden; }
.cx-blob{
  aspect-ratio:1.06;
  padding:5px;
  background:#F4EEE2;                           /* the cream rim, cut by the same shape */
  clip-path:url(#cx-shape);
}
.cx-blob-in{ position:relative; display:block; height:100%; overflow:hidden; clip-path:url(#cx-shape); }
.cx-tall{
  align-self:stretch;
  border-radius:24px;
  border:4px solid rgba(168,199,181,.7);
}
.cx-blob img, .cx-tall img{
  display:block;
  width:100%; height:112%;
  margin-top:-6%;
  object-fit:cover;
  filter:saturate(.85);
  will-change:transform;
}


.cx-trust{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 26px;
  border-radius:24px;
  color:var(--u-forest);
  background:#F4EEE2;
}
.cx-trust p{ margin:0; font-size:17px; line-height:1.6; font-weight:500; }
.cx-avs{ display:flex; flex:none; }
.cx-avs img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:3px solid #F4EEE2; }
.cx-avs img + img{ margin-inline-start:-12px; }

.cx-strokes{
  position:absolute; z-index:2;
  top:-46px; right:-36px;
  width:82px; height:72px;
  color:var(--gold);
  transform:scaleX(-1);
}

/* ---- reveal (circles.js adds .is-in once) ---- */
.cx.js .cx-in{ opacity:0; translate:0 22px; }
.cx.js .cx-visual .cx-in{ translate:-36px 0; }
.cx.js .cx-strokes.cx-in{ translate:0 0; }
.cx.is-in .cx-in,
.cx.js.is-in .cx-visual .cx-in{
  opacity:1; translate:0 0;
  transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d, 0s), translate .9s cubic-bezier(.16,1,.3,1) var(--d, 0s);
}

/* ---- responsive ---- */
@media (max-width:1080px){
  .cx-box{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:36px; padding:56px 40px; }
  .cx-trust{ padding:16px 18px; }
  .cx-trust p{ font-size:15.5px; }
}
@media (max-width:820px){
  .cx{ padding:0 16px 88px; }
  .cx-box{ grid-template-columns:1fr; gap:44px; padding:44px 22px 30px; border-radius:28px; }
  .cx-trust{ padding:22px 24px; }
  .cx-cta{ width:100%; justify-content:center; margin-top:32px; }
  .cx-strokes{ display:none; }
  .cx.js .cx-visual .cx-in{ translate:0 22px; }
}
@media (max-width:420px){
  .cx-visual{ gap:12px; }
  .cx-trust{ flex-direction:column; align-items:flex-start; gap:14px; padding:22px; }
}
@media (prefers-reduced-motion:reduce){
  .cx.js .cx-in{ opacity:1; translate:none; }
  .cx-blob img, .cx-tall img{ transform:none !important; }
}

}