/* Theme: brand glass. Frosted white panels over a calm, near-white field tinted with the two
   brands (Hifz sky, Irfan green and gold); an editorial Naskh display face for headlines, a
   floating glass dock for the tabs, deep-green pill buttons and a soft green glow on focus.
   Loaded after the page's own styles so it wins ties. */
:root{
  --ink:#1D2C29; --muted:#5B6D69; --line:rgba(255,255,255,.7);
  --card:rgba(255,255,255,.5); --card-solid:rgba(255,255,255,.82); --wash:rgba(240,248,247,.75);
  --sky:#3DB2E6; --sky-ink:#0F5F88; --sky-soft:rgba(220,240,250,.7);
  --green:#2C9B6A; --green-ink:#17654A; --green-soft:rgba(222,242,232,.72);
  --gold:#F4B12D; --gold-ink:#8E6208; --gold-soft:rgba(253,240,210,.75);
  --bad:#C0413A; --bad-soft:rgba(251,229,226,.75);
  --deep:#0F4A3A;
  --f-display:"Amiri","Noto Naskh Arabic","Geeza Pro",serif;
  --r:26px;
  --glass:linear-gradient(140deg,rgba(255,255,255,.74),rgba(255,255,255,.38));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55);
  --lift:0 24px 46px -30px rgba(15,74,58,.38);
}

/* Calm field: near-white with faint brand light, so the glass reads without the colour shouting. */
body{background:#EEF6F6;color:var(--ink)}
body::before{
  background:
    radial-gradient(60vmax 44vmax at 100% 0%, rgba(61,178,230,.26), transparent 64%),
    radial-gradient(54vmax 42vmax at 0% 45%, rgba(44,155,106,.18), transparent 64%),
    radial-gradient(50vmax 36vmax at 85% 100%, rgba(244,177,45,.16), transparent 62%),
    linear-gradient(165deg,#E5F3FA 0%,#EDF7F2 48%,#F9F5E6 100%)}
.wrap{max-width:1080px}

/* Shared glass surface */
.card,.phase,.axis,.op,.lockcard,.dform,.rep,.tbl,.vbox,.rt,.case,.goal,.flow li,.mile,.tpl,.mapfig,.overall,.scorebox,.quote,.magnet,.lb-box{
  background:var(--glass)!important;backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:0!important;border-radius:var(--r)!important;box-shadow:var(--glass-edge),var(--lift)!important}
.vbox::after,.rt::after{display:none}
.card.ok{box-shadow:var(--glass-edge),inset 0 4px 0 var(--green),var(--lift)!important}
.card.no{box-shadow:var(--glass-edge),inset 0 4px 0 var(--bad),var(--lift)!important}
.role,.cycle .card,.partner{border-top:0!important}

/* Masthead: logos float in a glass bar, account controls at the other end. */
.mast{margin-top:16px;padding:10px 18px;border-radius:999px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);box-shadow:var(--glass-edge),0 16px 34px -26px rgba(15,74,58,.45)}
.logos{gap:14px}
.logos img{height:54px}
.logos .sep{background:linear-gradient(transparent,rgba(91,109,105,.4),transparent)}

/* Hero: editorial headline beside a framed field photo. */
.hero{margin-top:18px;padding:40px 40px 34px;border-radius:34px;border:0;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:center;
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.42));backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:var(--glass-edge),0 40px 70px -44px rgba(15,74,58,.5);overflow:visible}
.hero::after{display:none}
.hero .stripe{display:none}
.hero>:not(.hero-art){grid-column:1}
.hero-kicker{justify-self:start;font-size:.88rem;color:var(--muted)}
.hero-kicker i{display:none}
.hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.5;color:var(--deep);letter-spacing:0}
.hero h1 span{display:inline;color:transparent;background:linear-gradient(100deg,var(--sky) 0%,var(--green) 70%);-webkit-background-clip:text;background-clip:text}
.hero p{font-size:1.05rem}
.tagline{font-size:1.25rem!important;color:var(--ink)!important;font-weight:700}
.tagline .hadith{border-inline-start-color:rgba(244,177,45,.6);color:var(--muted);flex:1 1 auto;font-weight:700}
@media (min-width:761px){.tagline{flex-wrap:nowrap}.tagline>span{flex:none;white-space:nowrap}}
.facts{gap:10px;margin-top:6px}
.fact{background:rgba(255,255,255,.8);border:0;box-shadow:var(--glass-edge),0 6px 14px -10px rgba(15,74,58,.45);padding:5px 16px;font-weight:700}
.fact .ic{color:var(--green)}
.fact:nth-child(2) .ic{color:var(--sky-ink)}
/* The field photos are 540px video stills, so the frame stays near that size to keep them sharp. */
.hero-art{grid-column:2;grid-row:1/span 4;position:relative;margin:0;width:270px;aspect-ratio:3/4;justify-self:end}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;border-radius:30px;display:block;box-shadow:0 30px 60px -32px rgba(15,60,50,.6)}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:26px 22px}
  .hero-art{grid-column:1;grid-row:auto;width:min(100%,270px);justify-self:center;margin-top:4px}
  .hero-art img{border-radius:22px}
}
/* Phone: one tidy header row, and hero type sized as one family. */
@media (max-width:560px){
  .mast{flex-wrap:nowrap;padding:8px 10px 8px 14px;gap:8px;border-radius:22px;margin-top:10px}
  .logos{gap:8px;flex:none}
  .logos img{height:38px}
  .userbar{flex-wrap:nowrap;gap:6px;font-size:.78rem}
  .userbar .tag{display:none}
  .userbar .btn{padding:0 10px;font-size:.78rem;line-height:1.9}
  .hero{padding:22px 18px;border-radius:28px;gap:12px}
  .hero-kicker{font-size:.78rem}
  .hero h1{font-size:2.6rem;line-height:1.4}
  .tagline{font-size:1.05rem!important;gap:6px 12px}
  .tagline .hadith{font-size:.82rem;padding-inline-start:12px}
  .facts{gap:8px}
  .fact{font-size:.82rem;padding:3px 12px}
          .panel{gap:34px;padding-top:14px}
}

/* Tabs: a floating glass dock; the current tab is a deep-green pill. */
.tabs{width:max-content;max-width:100%;margin-inline:auto;margin-top:22px;padding:6px!important;gap:4px;border-radius:999px;
  background:rgba(255,255,255,.62)!important;backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:var(--glass-edge),0 18px 36px -24px rgba(15,74,58,.5)!important;clip-path:none!important}
.tabs.stuck{background:rgba(255,255,255,.82)!important}
.tab{border:0;background:transparent;padding:4px 14px;font-size:.84rem;color:var(--ink);border-radius:999px}
.tab:hover{transform:none;background:rgba(255,255,255,.85)}
.tab .ic{color:var(--muted)}
.tab[aria-selected="true"]{background:linear-gradient(135deg,var(--green),var(--green-ink));color:#fff;box-shadow:0 10px 20px -10px rgba(23,101,74,.85)}
.tab[aria-selected="true"] .ic{color:#fff}
@media (max-width:640px){.tabs{margin-inline:auto;max-width:100%}.tab{padding:4px 14px;font-size:.84rem;gap:8px}.tab .ic{display:inline-block}}

/* Section jump links: small frosted chips. */
.jump{padding-top:8px!important}
.jump button{border:0;background:rgba(255,255,255,.62);box-shadow:var(--glass-edge);color:var(--muted)}
.jump button:hover{background:#fff;color:var(--ink)}
.jump button.on{background:var(--sky-ink);color:#fff;box-shadow:0 8px 16px -8px rgba(15,95,136,.8)}
.jump.stuck{background:rgba(246,250,249,.86)!important;box-shadow:0 0 0 100vmax rgba(246,250,249,.86)!important}

/* Headings: Naskh display, generous size. */
.panel{gap:48px;padding-top:30px}
.panel-head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.3;color:var(--deep)}
.panel-head h2.h-long{font-family:var(--f);font-size:1.45rem}
.kicker{color:var(--green-ink);font-weight:700}
.sh{gap:14px}
.sh h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.3rem);line-height:1.35;color:var(--deep)}
.badge{width:48px;height:48px;border-radius:50%;background:linear-gradient(140deg,#6CC8EF,var(--sky-ink));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 22px -12px rgba(15,95,136,.75)}
.badge.gold{background:linear-gradient(140deg,#F8CB63,#D18F12)}
.badge.green{background:linear-gradient(140deg,#4FBA84,var(--green-ink))}
.card h3 .ic,.axis-head h3 .ic{color:var(--green)}
.lead{font-size:1.15rem}

/* Icon wells */
.pillar .pi,.res .ri,.flow .fi,.idea .ii,.mile .mi,.vi{background:rgba(255,255,255,.85)!important;box-shadow:var(--glass-edge),0 6px 12px -8px rgba(15,74,58,.4)}
.goal .gi{border-radius:50%}
.flow .n{color:rgba(91,109,105,.32);font-family:var(--f-display)}
.flow li.key{box-shadow:var(--glass-edge),0 0 0 2px var(--sky),var(--lift)!important}

/* Photos */
.still,.clip,.magnet-photo{border-radius:var(--r)!important;box-shadow:0 22px 40px -28px rgba(15,60,50,.6)!important;border:0}

/* Tables */
.tbl{overflow-x:auto}
table{background:transparent}
th{background:rgba(255,255,255,.6)!important;color:var(--green-ink);font-weight:800}
th,td{border-bottom:1px solid rgba(214,229,230,.75)}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.35)}

/* Chips and pills */
.chip,.sheetnav button,.seg,.rate label,.status{border:0!important;background:rgba(255,255,255,.75)!important;box-shadow:var(--glass-edge),0 4px 10px -8px rgba(15,74,58,.4)}
.sheetnav button[aria-pressed="true"]{background:var(--sky-ink)!important;color:#fff}
.status[data-s="1"]{background:var(--sky-soft)!important}
.status[data-s="2"]{background:var(--green)!important;color:#fff}

/* Buttons: deep-green pills; hover adds a soft green glow. */
.btn{border:0;background:rgba(255,255,255,.85);box-shadow:var(--glass-edge),0 8px 18px -12px rgba(15,74,58,.45);border-radius:999px}
.btn:hover{background:#fff}
.btn.done{background:linear-gradient(135deg,var(--green),var(--green-ink));color:#fff;box-shadow:0 12px 24px -12px rgba(23,101,74,.85)}
.btn.done:hover{box-shadow:0 0 0 4px rgba(44,155,106,.18),0 14px 28px -12px rgba(23,101,74,.9)}
.btn.done .ic{color:#fff}

/* Forms: white fields that glow softly on focus. */
.dform{background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.45))!important;padding:24px}
.df-head>.ic{border-radius:50%}
.df-f input:not([type=checkbox]):not([type=radio]),.df-f select,.df-f textarea,.ph-wrap,.df-other{
  border:0!important;border-radius:16px!important;background:#fff!important;box-shadow:inset 0 0 0 1px rgba(91,109,105,.16),0 6px 14px -12px rgba(15,74,58,.45)}
.df-f input:focus,.df-f select:focus,.df-f textarea:focus,.ph-wrap:focus-within,.df-other:focus{
  outline:none!important;box-shadow:inset 0 0 0 1.5px var(--green),0 0 0 5px rgba(44,155,106,.14),0 12px 26px -12px rgba(44,155,106,.55)!important}
.ph-wrap em{background:transparent;border-inline-end-color:rgba(91,109,105,.15)}
.ocards label>span{border:0;background:#fff;box-shadow:var(--glass-edge),0 8px 18px -14px rgba(15,74,58,.45)}
.ocards input:checked+span{box-shadow:inset 0 0 0 2px var(--green),0 14px 26px -14px rgba(44,155,106,.7)}
.df-file{border:0;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(44,155,106,.45)}

/* Timeline and meters */
.ph{border-radius:20px;box-shadow:0 14px 26px -16px rgba(15,60,50,.55)}
.meter{background:rgba(255,255,255,.7)}
.phase{border-inline-start:0!important;box-shadow:var(--glass-edge),inset -5px 0 0 var(--c,var(--green)),var(--lift)!important}
.phase-head .pn,.scorebox .big{font-family:var(--f-display)}
.rep-head{background:rgba(255,255,255,.55)}
.rep-grid{background:transparent}
.rep-g{background:rgba(255,255,255,.35);box-shadow:0 0 0 .5px rgba(214,229,230,.9)}

/* Footer and login */
footer{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--glass-edge),var(--lift);border-radius:var(--r)}
footer b{font-family:var(--f-display)}
.lockcard{background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(225,243,252,.45))!important}
.lockcard h2{font-family:var(--f-display);font-size:1.7rem;color:var(--deep)}
.userbar .ub-name .ic{color:var(--green)}

/* Main action: "طلب حفظ النعمة". A glowing pill in the hero, a tinted tab, and on phones a
   floating glass dock at the bottom of the screen that opens the form. */
.hero-cta{justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:6px;border:0;cursor:pointer;
  font:inherit;font-weight:800;font-size:1.08rem;color:#fff;padding:8px 10px 8px 22px;border-radius:999px;
  background:linear-gradient(135deg,var(--green),var(--green-ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 6px rgba(44,155,106,.12),0 18px 34px -14px rgba(23,101,74,.85);
  transition:transform .2s,box-shadow .2s}
.hero-cta>.ic{width:20px;height:20px;color:var(--gold)}
.hero-cta .arr{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);margin-inline-start:6px}
.hero-cta .arr .ic{width:18px;height:18px}
.hero-cta:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 8px rgba(44,155,106,.16),0 22px 40px -14px rgba(23,101,74,.95)}
.tab#t-request{background:var(--gold-soft);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(244,177,45,.45)}
.tab#t-request .ic{color:var(--gold-ink)}
.tab#t-request[aria-selected="true"]{background:linear-gradient(135deg,var(--green),var(--green-ink));color:#fff;box-shadow:0 10px 20px -10px rgba(23,101,74,.85)}
.tab#t-request[aria-selected="true"] .ic{color:#fff}
#request{scroll-margin-top:calc(var(--tabsH,60px) + 14px)}
.cta-dock{display:none}
@media (max-width:760px){
  .hero-cta{display:none}
  body{padding-bottom:110px}
  .cta-dock{display:flex;position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));
    padding:7px;border-radius:999px;background:rgba(255,255,255,.5);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
    box-shadow:var(--glass-edge),0 18px 40px -16px rgba(15,74,58,.55)}
  .cta-dock button{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:1rem;white-space:nowrap;
    color:#fff;padding:10px 26px;border-radius:999px;background:linear-gradient(135deg,var(--green),var(--green-ink));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -10px rgba(23,101,74,.9)}
  .cta-dock button .ic{width:19px;height:19px;color:var(--gold)}
  body:has(#request:not([hidden])) .cta-dock{display:none}
}

/* Motion: a calm entrance for the header, sections that rise in as they scroll into view, a soft
   breathing glow on the main button, gentle hover lifts and a slow drift in the background light.
   Everything sits behind prefers-reduced-motion. */
@keyframes hz-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hz-drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes hz-settle{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
@keyframes hz-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hz-breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 6px rgba(44,155,106,.12),0 18px 34px -14px rgba(23,101,74,.85)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 12px rgba(44,155,106,.06),0 22px 40px -14px rgba(23,101,74,.9)}}
@keyframes hz-dock{from{opacity:0;transform:translate(-50%,28px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes hz-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,1.5%,0) scale(1.06)}}
@media (prefers-reduced-motion:no-preference){
  body::before{animation:hz-drift 26s ease-in-out infinite alternate}
  .mast{animation:hz-drop .7s cubic-bezier(.2,.7,.2,1) both}
  .hero>:not(.stripe):not(.hero-art){animation:hz-rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero>.hero-kicker{animation-delay:.08s}.hero>h1{animation-delay:.16s}.hero>.tagline{animation-delay:.26s}
  .hero>.hero-actions{animation-delay:.36s}.hero-actions>.hero-cta{animation:hz-rise .8s .46s cubic-bezier(.2,.7,.2,1) both,hz-breathe 3.2s 1.4s ease-in-out infinite}
  .hero-art{animation:hz-settle 1s .2s cubic-bezier(.2,.7,.2,1) both}
  .tabs{animation:hz-rise .7s .5s cubic-bezier(.2,.7,.2,1) both}
  .panel:not([hidden]){animation:hz-fade .45s cubic-bezier(.2,.7,.2,1) both}
  .cta-dock{animation:hz-dock .6s .7s cubic-bezier(.2,.7,.2,1) both}
  .anim .hz-rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),box-shadow .35s}
  .anim .hz-rv.in{opacity:1;transform:none}
  .anim .hz-rv.in:is(.card,.goal,.vbox,.still,.mile,.case,.flow li):hover{transform:translateY(-4px)}
  .still img,.hero-art img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .still:hover img,.hero-art:hover img{transform:scale(1.04)}
  .tab,.jump button,.btn,.sheetnav button,.ocards label>span{transition:background .25s,color .25s,box-shadow .25s,transform .25s}
}

/* Icon circles: soft brand tints with a coloured icon instead of saturated fills. */
.badge,.goal .gi,.df-head>.ic,.vbadge{background:var(--sky-soft)!important;color:var(--sky-ink)!important;box-shadow:inset 0 0 0 1px rgba(15,95,136,.12)!important}
.badge.green,.goal:nth-child(3n+2) .gi,.df-head>.ic,.vbox.ok .vbadge{background:var(--green-soft)!important;color:var(--green-ink)!important;box-shadow:inset 0 0 0 1px rgba(23,101,74,.12)!important}
.badge.gold,.goal:nth-child(3n) .gi{background:var(--gold-soft)!important;color:var(--gold-ink)!important;box-shadow:inset 0 0 0 1px rgba(142,98,8,.14)!important}
.vbox.no .vbadge{background:var(--bad-soft)!important;color:var(--bad)!important;box-shadow:inset 0 0 0 1px rgba(192,65,58,.14)!important}
.goal:first-child{background:var(--glass)!important}

/* Phone: keep all three field photos, as a compact row of three. */
@media (max-width:520px){
  .stills{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stills .still:nth-child(3){display:flex}
  .still{border-radius:16px!important}
  .still figcaption{font-size:.72rem;padding:16px 8px 6px;line-height:1.4}
}

/* Phone: the hero is text and the main button only; the photo stays on wide screens. */
@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .hero-art{display:none}
}

/* Place pill: the city, with the current service area beneath it in smaller type. */
.fact-place{align-items:center;padding-block:6px}
.fact-place .fp{display:grid;line-height:1.45}
.fact-place .fp b{font-weight:800}
.fact-place .fp small{font-size:.74rem;font-weight:400;color:var(--muted)}

/* WhatsApp contact: a pill link in the same outline-icon style, with a green hover. */
a.fact-wa{text-decoration:none;color:inherit;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
a.fact-wa .ic{color:#1FA855}
a.fact-wa:hover{transform:translateY(-2px);background:#fff;box-shadow:var(--glass-edge),0 0 0 4px rgba(31,168,85,.16),0 12px 22px -12px rgba(31,168,85,.7)}

/* Partner call-out: a compact card, text in full lines, buttons in one row. */
.partner.card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 22px}
.partner .sh h2{font-size:clamp(1.4rem,3vw,1.7rem)}
.partner>p{max-width:none;margin:0}
.partner .phone-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.partner .phone-big{font-size:1.1rem;font-weight:800;color:var(--green-ink)}
.partner .btn{line-height:2.1;padding:0 16px;text-decoration:none}
.partner .btn.done .ic{color:#fff}

/* Partner call-out: the WhatsApp button is the point of the card, so it is large. */
.partner .btn.done{font-size:1.1rem;font-weight:800;line-height:1.5;padding:12px 30px;gap:10px}
.partner .btn.done .ic{width:24px;height:24px}
@media (max-width:760px){.partner .phone-row,.partner .btn.done{width:100%;justify-content:center}}

/* Section links: a floating glass pill like the tab bar, never a full-width strip. */
.jump,.jump.stuck{width:max-content;max-width:100%;margin-inline:auto;padding:5px!important;gap:4px;border-radius:999px;overflow-x:auto;
  background:rgba(255,255,255,.62)!important;backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:var(--glass-edge),0 14px 30px -20px rgba(15,74,58,.5)!important;clip-path:none!important}
.jump.stuck{background:rgba(255,255,255,.85)!important}
.jump button{padding:2px 12px;font-size:.8rem}
.panel{grid-template-columns:minmax(0,1fr)}
.jump,.jump.stuck{justify-self:center;min-width:0}

/* Phone: all section links visible at once on a single row inside the floating pill. */
@media (max-width:760px){
  .jump,.jump.stuck{flex-wrap:nowrap;justify-content:center;overflow:visible;border-radius:999px;padding:4px!important;gap:1px}
  .jump button{padding:1px 6px;font-size:.66rem;letter-spacing:0}
}

/* "What is Hifz al-Nima?": a definition, the gap it closes, and the food's journey as three
   connected stops with a slow flowing dashed line between them. */
.idea-box{display:grid;gap:14px;padding:30px 32px;border-radius:30px;
  background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(225,243,252,.45))!important;backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:var(--glass-edge),var(--lift)}
.ib-lead{font-family:var(--f);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.35rem);line-height:2;color:var(--ink);max-width:none!important}
.ib-lead b{color:var(--green)}
.ib-why{color:var(--muted);font-size:1.02rem;max-width:46em}
.ib-flow{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ib-flow li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px}
.ib-flow b{font-size:1.08rem;color:var(--ink)}
.ib-flow li>span:last-child{font-size:.9rem;color:var(--muted);line-height:1.7;max-width:16em}
.ib-ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  background:#fff;box-shadow:var(--glass-edge),0 12px 24px -14px rgba(15,74,58,.5)}
.ib-ic .ic{width:32px;height:32px}
.ib-flow li:nth-child(1) .ib-ic{color:var(--gold-ink);box-shadow:inset 0 0 0 6px var(--gold-soft),0 12px 24px -14px rgba(142,98,8,.5)}
.ib-flow li:nth-child(2) .ib-ic{color:var(--sky-ink);box-shadow:inset 0 0 0 6px var(--sky-soft),0 12px 24px -14px rgba(15,95,136,.5)}
.ib-flow li:nth-child(3) .ib-ic{color:var(--green-ink);box-shadow:inset 0 0 0 6px var(--green-soft),0 12px 24px -14px rgba(23,101,74,.5)}
.ib-flow li:not(:last-child)::after{content:"";position:absolute;top:35px;height:3px;border-radius:3px;
  inset-inline-start:calc(50% + 44px);inset-inline-end:calc(-50% + 44px - 18px);
  background:repeating-linear-gradient(90deg,rgba(44,155,106,.55) 0 8px,transparent 8px 16px)}
@keyframes hz-flow{to{background-position:-32px 0}}
@media (prefers-reduced-motion:no-preference){.ib-flow li:not(:last-child)::after{animation:hz-flow 1.4s linear infinite}}
@media (max-width:760px){
  .idea-box{padding:22px 18px}
  .ib-flow{grid-template-columns:1fr;gap:16px}
  .ib-flow li{grid-template-columns:60px 1fr;justify-items:start;text-align:start;column-gap:14px;row-gap:0}
  .ib-flow li .ib-ic{grid-row:1/span 2;width:60px;height:60px}
  .ib-flow li .ib-ic .ic{width:26px;height:26px}
  .ib-flow li:not(:last-child)::after{top:62px;bottom:-16px;height:auto;width:3px;inset-inline-start:28px;inset-inline-end:auto;
    background:repeating-linear-gradient(180deg,rgba(44,155,106,.55) 0 8px,transparent 8px 16px)}
  @keyframes hz-flow-v{to{background-position:0 32px}}
  .ib-flow li:not(:last-child)::after{animation-name:hz-flow-v}
}

/* Where the food comes from and where it goes: sources on one side, families on the other. */
.src-map{display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr);align-items:center;gap:18px;padding:24px;border-radius:var(--r);
  background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:var(--glass-edge),var(--lift)}
.sm-col{display:grid;gap:10px}
.sm-label{font-size:.85rem;font-weight:800;color:var(--muted)}
.sm-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px;background:#fff;font-weight:700;box-shadow:var(--glass-edge),0 8px 16px -12px rgba(15,74,58,.45)}
.sm-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--gold-soft);color:var(--gold-ink)}
.sm-ic .ic{width:20px;height:20px}
.sm-to .sm-ic{background:var(--green-soft);color:var(--green-ink)}
.sm-big{padding:18px;border-radius:22px}
.sm-big .sm-ic{width:52px;height:52px}
.sm-big .sm-ic .ic{width:26px;height:26px}
.sm-big b{display:block;font-size:1.15rem}
.sm-big small{color:var(--muted);font-weight:400}
.sm-arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--green),var(--green-ink));box-shadow:0 10px 20px -10px rgba(23,101,74,.8)}
@media (max-width:760px){
  .src-map{grid-template-columns:1fr;justify-items:stretch;padding:18px}
  .sm-arrow{justify-self:center;transform:rotate(-90deg)}
}

/* Logos and hero title link home. */
.home-link{cursor:pointer;transition:opacity .2s}
.home-link:hover{opacity:.82}

/* Accepted / refused: two clear cards, a tinted header with the verdict, then full-width rows. */
.verdict{gap:18px}
.vbox{display:grid!important;gap:14px;align-content:start;padding:0!important;overflow:hidden}
.vbox .vh{margin:0;padding:16px 20px;gap:12px;background:linear-gradient(90deg,var(--cs),rgba(255,255,255,0))}
.vbox .vh h3{font-family:var(--f-display);font-size:1.6rem}
.vbox .vbadge{width:44px;height:44px}
.vbox ul{display:grid;gap:10px;padding:0 20px 20px}
.vbox li{width:100%;justify-content:flex-start;background:#fff;border:0;border-radius:16px;padding:12px 14px;font-weight:700;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 18%,#fff),0 6px 14px -12px rgba(15,74,58,.45)}
.vbox li .vi{background:var(--cs)!important;color:var(--ci)!important;box-shadow:none}
.vbox.ok{--c:var(--green);--ci:var(--green-ink);--cs:var(--green-soft)}
.vbox.no{--c:var(--bad);--ci:var(--bad);--cs:var(--bad-soft)}

/* Phone: the pickup form is one column with full-width fields, and the page intro is sized for a small screen. */
@media (max-width:560px){
  .dform{grid-template-columns:1fr!important;padding:18px!important;gap:12px}
  .dform .df-f,.dform .df-w{grid-column:1/-1}
  .req-intro h2{font-size:1.75rem;line-height:1.5}
  .req-intro .lead{font-size:1rem}
  .ocards{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .ocards:has(input[name=hour]){grid-template-columns:1fr}
  .df-foot .btn.done{width:100%;justify-content:center;line-height:2.6}
}

/* Accepted / refused, compact: one glass card, two rows; the verdict on the side, items as small chips. */
#p-safety .verdict{display:grid;grid-template-columns:1fr;gap:0;padding:8px 18px;border-radius:var(--r);
  background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:var(--glass-edge),var(--lift)}
#p-safety .vbox{display:grid!important;grid-template-columns:120px 1fr;align-items:center;gap:12px;padding:12px 0!important;
  background:none!important;box-shadow:none!important;border-radius:0!important;backdrop-filter:none;-webkit-backdrop-filter:none}
#p-safety .vbox+.vbox{border-top:1px dashed rgba(91,109,105,.25)!important}
#p-safety .vbox .vh{padding:0;background:none;gap:8px}
#p-safety .vbox .vh h3{font-size:1.3rem}
#p-safety .vbox .vbadge{width:34px;height:34px}
#p-safety .vbox .vbadge .ic{width:18px;height:18px}
#p-safety .vbox ul{display:flex;flex-wrap:wrap;gap:8px;padding:0}
#p-safety .vbox li{width:auto;padding:5px 12px 5px 8px;gap:8px;border-radius:999px;font-size:.92rem;background:var(--cs);box-shadow:none}
#p-safety .vbox li .vi{width:26px;height:26px;background:#fff!important}
#p-safety .vbox li .vi .ic{width:15px;height:15px}
@media (max-width:560px){#p-safety .vbox{grid-template-columns:1fr;gap:8px}}

/* On the request page the hero is redundant: the form is the page. */
body:has(#request:not([hidden])) .hero{display:none}

/* The request page stands alone: no tab bar, and a quiet way back home at the top. */
body:has(#request:not([hidden])) .tabs{display:none}
.back-home{justify-self:start;display:inline-flex;align-items:center;gap:4px;border:0;cursor:pointer;font:inherit;font-size:.88rem;font-weight:700;
  color:var(--green-ink);padding:4px 14px 4px 10px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:var(--glass-edge),0 6px 14px -10px rgba(15,74,58,.45)}
.back-home .ic{width:16px;height:16px}
.back-home:hover{background:#fff}

/* The photo picker's real input stays a 1px hidden control; the generic full-width field rule must not stretch it. */
.df-file{position:relative;overflow:hidden}
.df-file input[type=file]{position:absolute!important;inset:0!important;width:1px!important;height:1px!important;padding:0!important;opacity:0;clip-path:inset(50%);box-shadow:none!important}
html{overflow-x:clip}

/* Option buttons sit together instead of spreading across the row. */
.ocards{display:flex!important;flex-wrap:wrap;gap:10px}
.ocards label{flex:0 0 116px}
.ocards:has(input[name=hour]) label{flex-basis:200px}
@media (max-width:560px){
  .ocards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ocards:has(input[name=cond]),.ocards:has(input[name=day]){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ocards:has(input[name=hour]){grid-template-columns:1fr}
  .ocards label>span{padding:12px 6px 10px}
}
.ocards label{display:block!important}
.ocards label>span{width:100%;box-sizing:border-box}

/* A time slot shown but closed for now. */
.ocards label.off{cursor:not-allowed}
.ocards label.off>span{opacity:.55;filter:grayscale(.6);box-shadow:inset 0 0 0 1px rgba(91,109,105,.18)!important;background:rgba(255,255,255,.6)!important}
.ocards label.off small{font-size:.75rem;font-weight:700;color:var(--bad)}

/* Phone: a larger, easier form for older donors — bigger labels, taller fields, larger option text. */
@media (max-width:560px){
  .dform .df-f>span,.dform .df-f legend{font-size:1.02rem}
  .dform .df-f input:not([type=checkbox]):not([type=radio]),.dform .df-f select,.dform .df-f textarea{font-size:1.05rem!important;padding:10px 14px!important;line-height:1.7}
  .dform .ph-wrap em{font-size:1rem}
  .dform .ocards em{font-size:.98rem}
  .dform .df-head strong{font-size:1.15rem}
  .dform .df-head span{font-size:.95rem}
  .dform .df-file{font-size:1rem;padding:9px 18px}
  .df-foot .btn.done{font-size:1.1rem;line-height:2.8}
}
.ocards:has(input[name=pack]) label{flex-basis:190px}
@media (max-width:560px){.ocards:has(input[name=pack]){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Food | Clothes switch on the request page: the same floating pill as the tab bar. */
.kind-switch{justify-self:center;display:flex;gap:4px;padding:6px;border-radius:999px;background:rgba(255,255,255,.62);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:var(--glass-edge),0 18px 36px -24px rgba(15,74,58,.5)}
.kind-switch button{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:1rem;
  padding:8px 26px;border-radius:999px;background:transparent;color:var(--ink);transition:background .25s,color .25s,box-shadow .25s}
.kind-switch button .ic{width:20px;height:20px;color:var(--muted)}
.kind-switch button:hover{background:rgba(255,255,255,.85)}
.kind-switch button[aria-pressed="true"]{background:linear-gradient(135deg,var(--green),var(--green-ink));color:#fff;box-shadow:0 10px 20px -10px rgba(23,101,74,.85)}
.kind-switch button[aria-pressed="true"] .ic{color:#fff}
.df-note{display:flex;gap:6px;align-items:center;margin:6px 0 0;font-size:.9rem;color:var(--muted)}
.df-note .ic{width:16px;height:16px;color:var(--gold-ink);flex:none}
.ocards:has(input[name=ccond]) label{flex-basis:190px}
.ocards:has(input[name=cwhen]) label{flex-basis:150px}
@media (max-width:560px){
  .kind-switch button{padding:8px 22px;font-size:1.05rem}
  .ocards:has(input[name=ccond]),.ocards:has(input[name=cwhen]){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ocards input[name=pack][value^="لا"]:checked+span{box-shadow:inset 0 0 0 2px var(--gold),0 14px 26px -14px rgba(244,177,45,.7)!important;background:var(--gold-soft)!important}
.ocards input[name=pack][value^="لا"]:checked+span .ic{background:var(--gold)!important;color:#fff!important}

/* Clear-answers button: quiet, at the far end of the form's footer. */
.df-reset{margin-inline-start:auto;color:var(--muted);line-height:2.2;padding:0 16px}
.df-reset .ic{width:16px;height:16px}
@media (max-width:560px){.df-foot{flex-wrap:wrap}.df-reset{width:100%;justify-content:center;margin:0}}

/* Request page: tighter spacing between the back link, the switch, the title and the form. */
#request.panel{gap:24px;padding-top:22px}
#request .req-intro{gap:0}
#request .req-intro h2{line-height:1.35;margin-top:4px}
@media (max-width:560px){#request.panel{gap:18px;padding-top:16px}}
/* More air from the switch down: around the title and before the form. */
#request .req-intro{margin-block:14px 12px}
@media (max-width:560px){#request .req-intro{margin-block:10px 8px}}

/* Phone: goals as a compact two-column grid (icon above a short line), and the food sources as a
   single row of chips flowing into the families card, so both sections fit in about a screen. */
@media (max-width:560px){
  .goals{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .goal{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px}
  .goal .gi{width:38px;height:38px}
  .goal .gi .ic{width:20px;height:20px}
  .goal .gt{font-size:.88rem;line-height:1.6}

  .src-map{padding:14px;gap:10px}
  .sm-col{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .sm-label{width:100%;font-size:.78rem}
  .sm-item{padding:5px 10px 5px 6px;gap:6px;border-radius:999px;font-size:.88rem}
  .sm-ic{width:28px;height:28px}
  .sm-ic .ic{width:16px;height:16px}
  .sm-big{padding:8px 14px 8px 8px;border-radius:999px}
  .sm-big .sm-ic{width:34px;height:34px}
  .sm-big .sm-ic .ic{width:18px;height:18px}
  .sm-big b{font-size:1rem}
  .sm-arrow{width:32px;height:32px}
  .sm-arrow .ic{width:16px;height:16px}
}
@media (max-width:560px){
  .sh h2{font-size:1.45rem}
  .sh .badge{width:38px;height:38px}
  .src-map{grid-template-columns:1fr auto;align-items:end}
  .src-map>.sm-col:first-child{grid-column:1/-1}
  .sm-arrow{grid-column:2;grid-row:2;transform:none}
  .sm-to{grid-column:1;grid-row:2}
  .sm-to .sm-label{display:none}
}

/* Phone held sideways (wide but short): the desktop layout is too tall here, so the same compact
   source chips and two-column goals apply. */
@media (pointer:coarse) and (max-height:520px){
  .src-map{grid-template-columns:1fr auto;align-items:end;padding:14px;gap:10px}
  .src-map>.sm-col:first-child{grid-column:1/-1}
  .sm-col{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .sm-label{width:100%;font-size:.78rem}
  .sm-arrow{grid-column:2;grid-row:2;width:32px;height:32px;transform:none}
  .sm-to{grid-column:1;grid-row:2}
  .sm-to .sm-label{display:none}
  .sm-item{padding:5px 10px 5px 6px;gap:6px;border-radius:999px;font-size:.88rem}
  .sm-ic{width:28px;height:28px}
  .sm-big{padding:8px 14px 8px 8px;border-radius:999px}
  .sm-big .sm-ic{width:34px;height:34px}
  .sm-big b{font-size:1rem}
  .goal{padding:12px 14px}
  .goal .gi{width:38px;height:38px}
  .goal .gt{font-size:.9rem}
}

/* Sources card follows its own width, not the screen's: whenever the card is narrower than 700px
   (any phone, tablet or small window) it uses the compact chip layout. */
#p-sources{container-type:inline-size}
@container (max-width:700px){
  .src-map{grid-template-columns:1fr auto!important;align-items:end;padding:14px;gap:10px}
  .src-map>.sm-col:first-child{grid-column:1/-1}
  .sm-col{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .sm-label{width:100%;font-size:.78rem}
  .sm-arrow{grid-column:2;grid-row:2;width:32px;height:32px;transform:none!important}
  .sm-arrow .ic{width:16px;height:16px}
  .sm-to{grid-column:1;grid-row:2}
  .sm-to .sm-label{display:none}
  .sm-item{padding:5px 10px 5px 6px;gap:6px;border-radius:999px;font-size:.88rem}
  .sm-ic{width:28px;height:28px}
  .sm-ic .ic{width:16px;height:16px}
  .sm-big{padding:8px 14px 8px 8px;border-radius:999px}
  .sm-big .sm-ic{width:34px;height:34px}
  .sm-big .sm-ic .ic{width:18px;height:18px}
  .sm-big b{font-size:1rem}
}

/* Stronger glass: more colour behind the page for the frost to catch, clearer panes with a bright
   rim and a top sheen, and the same treatment on form fields and option buttons. */
:root{
  --glass:linear-gradient(135deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.26) 55%,rgba(255,255,255,.14) 100%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.62),inset 0 -1px 0 rgba(255,255,255,.25);
  --glass-blur:blur(26px) saturate(1.8);
}
body::before{
  background:
    radial-gradient(38vmax 30vmax at 92% 26%, rgba(61,178,230,.38), transparent 62%),
    radial-gradient(34vmax 28vmax at 6% 30%, rgba(44,155,106,.32), transparent 62%),
    radial-gradient(30vmax 26vmax at 70% 55%, rgba(61,178,230,.22), transparent 64%),
    radial-gradient(32vmax 26vmax at 18% 82%, rgba(244,177,45,.26), transparent 62%),
    radial-gradient(30vmax 24vmax at 92% 96%, rgba(44,155,106,.24), transparent 62%),
    linear-gradient(165deg,#E3F2F9 0%,#EAF6F0 50%,#F8F3E3 100%)}
.card,.phase,.axis,.op,.lockcard,.dform,.rep,.tbl,.vbox,.rt,.case,.goal,.mile,.tpl,.mapfig,.overall,.scorebox,.quote,.magnet,.lb-box,
.idea-box,.hero,.mast,.tabs,.jump,.kind-switch,#p-safety .verdict,footer{
  backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;position:relative}
.card,.phase,.axis,.op,.lockcard,.rep,.tbl,.vbox,.rt,.case,.goal,.mile,.tpl,.mapfig,.overall,.scorebox,.quote,.magnet,#p-safety .verdict{
  background:var(--glass)!important}
.hero,.idea-box,.dform,.lockcard{background:linear-gradient(140deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.16) 100%)!important}
/* Sheen: a soft light band across the top of each pane. */
.hero::before,.idea-box::before,.dform::before,.card::before,.goal::before,#p-safety .verdict::before,.lockcard::before{
  content:"";position:absolute;inset:0 0 auto 0;height:46%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.hero>*,.idea-box>*,.dform>*,.card>*,.goal>*,#p-safety .verdict>*,.lockcard>*{position:relative}

/* Fields: frosted, with a bright rim, instead of solid white. */
.df-f input:not([type=checkbox]):not([type=radio]):not([type=file]),.df-f select,.df-f textarea,.ph-wrap,.df-other{
  background:rgba(255,255,255,.5)!important;backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.8),0 8px 18px -14px rgba(15,74,58,.5)!important}
.ph-wrap input{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.ocards label>span{background:linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.28))!important;
  backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.75),0 10px 20px -14px rgba(15,74,58,.5)!important}
.ocards input:checked+span{background:linear-gradient(150deg,rgba(226,243,234,.9),rgba(226,243,234,.5))!important;box-shadow:inset 0 0 0 2px var(--green),0 14px 26px -14px rgba(44,155,106,.7)!important}

/* The tab bar and section links stay pinned while scrolling (the glass rule above must not unpin them),
   and the section links sit right under the tab bar. */
.tabs{position:sticky!important;top:env(safe-area-inset-top,0px)}
.jump{position:sticky!important;top:calc(var(--tabsH,52px) + 6px)}
.panel>.jump:first-child{margin-top:-16px}
@media (max-width:560px){.panel>.jump:first-child{margin-top:-6px}}

/* Logo bar: nearly opaque so the light-blue logo never sits on the blue glow behind it. */
.mast{background:linear-gradient(140deg,rgba(255,255,255,.94),rgba(255,255,255,.84))!important}

/* Reading progress: a thin bar down the right edge that fills from top to bottom. */
.progress{inset:0 0 0 auto!important;width:5px!important;height:auto!important;padding:0!important;background:rgba(214,229,230,.45)!important}
.progress i{width:5px!important;height:100%!important;transform:scaleY(0);transform-origin:center top!important;
  background:linear-gradient(180deg,var(--sky),var(--green),var(--gold))!important;border-radius:0 0 3px 3px}

/* Option buttons as real glass tiles: mostly clear, a bright rim, a top highlight and a faint
   blue depth at the bottom; the form pane behind is clearer too so the colours read through. */
.dform{background:linear-gradient(140deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.2) 55%,rgba(255,255,255,.1) 100%)!important}
.ocards label>span{
  background:linear-gradient(160deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.16) 58%,rgba(225,243,252,.22) 100%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  backdrop-filter:blur(18px) saturate(1.9)!important;-webkit-backdrop-filter:blur(18px) saturate(1.9)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),inset 0 -10px 18px -12px rgba(61,178,230,.35),0 12px 24px -16px rgba(15,74,58,.5)!important}
.ocards label>span .ic{background:rgba(44,155,106,.12)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.ocards label:hover>span{background:linear-gradient(160deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.28) 60%,rgba(225,243,252,.3) 100%)!important}
.ocards input:checked+span{background:linear-gradient(160deg,rgba(226,243,234,.85) 0%,rgba(226,243,234,.35) 60%,rgba(44,155,106,.14) 100%)!important;
  box-shadow:inset 0 0 0 2px var(--green),inset 0 1px 1px #fff,0 14px 26px -14px rgba(44,155,106,.7)!important}

/* Pills (food/clothes switch, back link, tab bar, section links, account buttons) in the same clear glass. */
.kind-switch,.tabs,.jump,.jump.stuck,.back-home,.userbar .btn:not(.done){
  background:linear-gradient(160deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.18) 60%,rgba(225,243,252,.22) 100%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  backdrop-filter:blur(20px) saturate(1.9)!important;-webkit-backdrop-filter:blur(20px) saturate(1.9)!important;
  box-shadow:inset 0 1px 1px #fff,inset 0 -8px 16px -12px rgba(61,178,230,.35),0 14px 28px -18px rgba(15,74,58,.55)!important}
.tabs.stuck,.jump.stuck{background:linear-gradient(160deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.42) 60%,rgba(225,243,252,.4) 100%)!important}
.back-home:hover,.userbar .btn:not(.done):hover{background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.35))!important}
.jump button:not(.on),.tab:not([aria-selected="true"]),.kind-switch button[aria-pressed="false"]{background:transparent!important;box-shadow:none!important}

/* Option tiles: neutral clear glass (no blue tint), and an unmistakable chosen state —
   green fill, green rim, solid green icon and a small check mark in the corner. */
.ocards label>span{
  background:linear-gradient(160deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.22) 100%)!important;
  border:1px solid rgba(255,255,255,.85)!important;
  box-shadow:inset 0 1px 1px #fff,0 10px 22px -16px rgba(15,74,58,.45)!important;position:relative}
.ocards label:hover>span{background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.38))!important}
.ocards label>span .ic{background:rgba(255,255,255,.55)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)!important;color:var(--green-ink)!important}
.ocards input:checked+span{
  background:linear-gradient(160deg,rgba(44,155,106,.26) 0%,rgba(44,155,106,.14) 100%)!important;
  border:1.5px solid var(--green)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 12px 24px -14px rgba(23,101,74,.65)!important}
.ocards input:checked+span .ic{background:var(--green)!important;color:#fff!important;box-shadow:none!important}
.ocards input:checked+span em{color:var(--green-ink);font-weight:800}
.ocards input:checked+span::after{content:"✓";position:absolute;top:6px;inset-inline-start:6px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#fff;font-size:.72rem;font-weight:800;line-height:1}
/* Leftovers and pots keep their gold warning look when chosen. */
.ocards input[value="بقايا"]:checked+span,.ocards input[name=pack][value^="لا"]:checked+span{
  background:linear-gradient(160deg,rgba(244,177,45,.28),rgba(244,177,45,.14))!important;border-color:var(--gold)!important}
.ocards input[value="بقايا"]:checked+span .ic,.ocards input[name=pack][value^="لا"]:checked+span .ic{background:var(--gold)!important}
.ocards input[value="بقايا"]:checked+span::after,.ocards input[name=pack][value^="لا"]:checked+span::after{background:var(--gold-ink)}
.ocards input[value="بقايا"]:checked+span em,.ocards input[name=pack][value^="لا"]:checked+span em{color:var(--gold-ink)}

/* Make the glass read as glass: the form pane is nearly clear and only lightly blurred, so the brand
   colours behind it show; tiles and fields are thin frosted panes with a lit top-left edge, a darker
   bottom-right edge and a diagonal sheen. */
.dform{background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.08))!important;
  backdrop-filter:blur(8px) saturate(1.4)!important;-webkit-backdrop-filter:blur(8px) saturate(1.4)!important}
.dform::before{display:none}
.ocards label>span,.df-f input:not([type=checkbox]):not([type=radio]):not([type=file]),.df-f select,.df-f textarea,.ph-wrap,.df-other{
  background:linear-gradient(135deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.14) 100%)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  backdrop-filter:blur(14px) saturate(2)!important;-webkit-backdrop-filter:blur(14px) saturate(2)!important;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(15,74,58,.08),0 10px 24px -14px rgba(15,74,58,.4)!important}
.ph-wrap input{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.ocards label>span{overflow:hidden}
.ocards label>span::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.18) 100%)}
.ocards label>span>*{position:relative}
.ocards label>span .ic{background:rgba(255,255,255,.35)!important}
.ocards input:checked+span{background:linear-gradient(135deg,rgba(44,155,106,.32) 0%,rgba(44,155,106,.12) 100%)!important;border:1.5px solid var(--green)!important}

/* The icon square inside each option: clearly visible — near-white with a thin green rim and a small lift. */
.ocards label>span .ic{background:rgba(255,255,255,.9)!important;
  box-shadow:inset 0 0 0 1px rgba(44,155,106,.22),0 6px 12px -8px rgba(15,74,58,.45)!important;color:var(--green-ink)!important}
.ocards input:checked+span .ic{background:var(--green)!important;color:#fff!important;box-shadow:0 6px 12px -6px rgba(23,101,74,.7)!important}
.ocards input[value="بقايا"]:checked+span .ic,.ocards input[name=pack][value^="لا"]:checked+span .ic{background:var(--gold)!important}
/* No corner check mark: the green fill and icon already show the choice. */
.ocards input:checked+span::after{display:none!important}

/* Request page only: a soft dark vignette at the edges to calm the brightness around the form. */
body:has(#request:not([hidden]))::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,rgba(10,40,34,0) 45%,rgba(10,40,34,.16) 75%,rgba(10,40,34,.32) 100%)}
/* Stronger: an overall dim plus darker edges. */
body:has(#request:not([hidden]))::after{
  background:radial-gradient(110% 85% at 50% 38%,rgba(10,40,34,0) 30%,rgba(10,40,34,.26) 70%,rgba(10,40,34,.5) 100%),rgba(10,40,34,.1)!important}

/* Notes boxes keep a fixed size: no drag handle to stretch them. */
.dform textarea{resize:none}

/* The soft dark vignette now frames every page, not only the request form. */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(110% 85% at 50% 38%,rgba(10,40,34,0) 30%,rgba(10,40,34,.26) 70%,rgba(10,40,34,.5) 100%),rgba(10,40,34,.1)}
/* A little lighter. */
body::after,body:has(#request:not([hidden]))::after{
  background:radial-gradient(110% 85% at 50% 38%,rgba(10,40,34,0) 34%,rgba(10,40,34,.18) 72%,rgba(10,40,34,.38) 100%),rgba(10,40,34,.06)!important}

/* "What we accept": the two rows are plain lines inside the one glass card — the general glass rules
   added later must not turn each row into its own pane. */
#p-safety .verdict .vbox{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;margin:0!important;padding:12px 4px!important}
#p-safety .verdict .vbox::before,#p-safety .verdict .vbox::after{display:none!important}
#p-safety .verdict .vbox+.vbox{border-top:1px dashed rgba(91,109,105,.25)!important}
#p-safety .verdict{padding:6px 18px!important}

/* Reading progress, easier to see on the dimmed edges: a white rounded track a little off the edge,
   a brighter fill and a soft glow. */
.progress{inset:14px 5px 14px auto!important;width:6px!important;border-radius:6px;overflow:hidden;
  background:rgba(255,255,255,.72)!important;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 12px rgba(10,40,34,.25)}
.progress i{width:6px!important;border-radius:6px;background:linear-gradient(180deg,#2BA8E0,#1E9B62,#F2A81E)!important;
  box-shadow:0 0 8px rgba(30,155,98,.6)}
/* Logos moved a little in from the right edge of their bar (toward the left). */
.mast{padding-inline-start:34px!important}
@media (max-width:560px){.mast{padding-inline-start:18px!important}}

/* Team sign-in button: a soft green pill so it reads as a button on the white logo bar. */
.userbar .btn:not(.done){background:linear-gradient(160deg,rgba(44,155,106,.16),rgba(44,155,106,.08))!important;
  color:var(--green-ink)!important;font-weight:800;border:1px solid rgba(44,155,106,.35)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 14px -10px rgba(23,101,74,.6)!important}
.userbar .btn:not(.done) .ic{color:var(--green)}
.userbar .btn:not(.done):hover{background:linear-gradient(160deg,rgba(44,155,106,.26),rgba(44,155,106,.14))!important}

/* Team sign-in button back to glass, but defined: a faint cool tint, a visible rim and a small lift. */
.userbar .btn:not(.done){background:linear-gradient(160deg,rgba(255,255,255,.55) 0%,rgba(214,232,232,.55) 100%)!important;
  color:var(--ink)!important;font-weight:700;border:1px solid rgba(15,74,58,.18)!important;
  backdrop-filter:blur(14px) saturate(1.6)!important;-webkit-backdrop-filter:blur(14px) saturate(1.6)!important;
  box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(15,74,58,.45)!important}
.userbar .btn:not(.done) .ic{color:var(--green-ink)}
.userbar .btn:not(.done):hover{background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(214,232,232,.7))!important}
/* Clearer still: a deeper glass tint, a firmer rim and slightly larger type. */
.userbar .btn:not(.done){background:linear-gradient(160deg,rgba(226,241,238,.95) 0%,rgba(190,219,214,.9) 100%)!important;
  border:1px solid rgba(15,74,58,.32)!important;color:var(--deep)!important;font-size:.95rem!important;padding:3px 16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 18px -8px rgba(15,74,58,.55)!important}
.userbar .btn:not(.done):hover{background:linear-gradient(160deg,rgba(236,247,244,1),rgba(200,228,222,1))!important}

/* Sign-in card: a vertical stack (a later rule had turned it into a row), and no tab bar above it. */
.lockcard{display:grid!important;grid-template-columns:1fr;justify-items:start;align-content:start;gap:10px}
.lockcard .lform{width:100%}
.lockcard h2{line-height:1.5}
body:has(.panel.prot:not([hidden]) .lockcard) .tabs{display:none}
/* Sign-in is a page of its own: no hero box either. */
body:has(.panel.prot:not([hidden]) .lockcard) .hero{display:none}
.lockcard .back-home{margin-bottom:4px}

/* Team sign-in button: the same clear glass as the form's option tiles. */
.userbar .btn:not(.done){background:linear-gradient(135deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.14) 100%)!important;
  border:1px solid rgba(255,255,255,.55)!important;color:var(--ink)!important;font-weight:700;
  backdrop-filter:blur(14px) saturate(2)!important;-webkit-backdrop-filter:blur(14px) saturate(2)!important;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(15,74,58,.08),0 8px 20px -12px rgba(15,74,58,.45)!important;
  position:relative;overflow:hidden}
.userbar .btn:not(.done)::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 70%,rgba(255,255,255,.18) 100%)}
.userbar .btn:not(.done)>*{position:relative}
.userbar .btn:not(.done):hover{background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.3))!important}
/* Team sign-in is secondary: smaller and lighter. */
.userbar .btn:not(.done){font-size:.8rem!important;font-weight:600!important;padding:1px 11px!important;line-height:1.9!important;gap:5px;color:var(--muted)!important}
.userbar .btn:not(.done) .ic{width:14px;height:14px}

/* Admin pages (the account area) don't repeat the public homepage box. */
body.authed:has(#admin:not([hidden]),#tracking:not([hidden]),#plan:not([hidden]),#ideas:not([hidden])) .hero{display:none}

/* Signed-in bar: name with a role chip, then "حسابي" and "خروج" as the same small glass buttons, evenly spaced. */
.userbar{gap:8px;align-items:center}
.userbar .ub-name{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--ink);margin-inline-end:4px}
.userbar .ub-name .ic{width:16px;height:16px;color:var(--green)}
.ub-role{font-size:.72rem;font-weight:700;color:var(--green-ink);padding:0 9px;line-height:1.9;border-radius:999px;
  background:linear-gradient(135deg,rgba(44,155,106,.16),rgba(44,155,106,.06));border:1px solid rgba(44,155,106,.3)}
.userbar .btn:not(.done){display:inline-flex;align-items:center}
@media (max-width:560px){.userbar .ub-name{display:none}}

/* Plan tab: the pinned "الإنجاز" bar must read clearly over the phase cards scrolling beneath it. */
.overall{background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(240,248,246,.9))!important;z-index:6!important;
  top:calc(var(--tabsH,52px) + 10px)!important;padding:8px 18px!important;border-radius:999px!important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(15,74,58,.1),0 12px 26px -14px rgba(15,74,58,.5)!important}
.overall h3{font-size:.95rem;white-space:nowrap}
.overall .meter{background:rgba(15,74,58,.1)!important}
/* The "الإنجاز" bar is pinned (sticky); the glass rule's position:relative had pushed it down onto the first phase. */
.overall{position:sticky!important}
/* "الإنجاز" bar in the same glass as the phase cards below it. */
.overall{background:var(--glass)!important;border-radius:var(--r)!important;
  backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;
  box-shadow:var(--glass-edge),var(--lift)!important}
.overall .meter{background:rgba(255,255,255,.55)!important}
.userbar .ub-me{gap:6px}
.userbar .ub-me .ub-role{line-height:1.6;padding:0 7px;font-size:.68rem}
@media (max-width:560px){.userbar .ub-me{display:inline-flex}}

/* In-page confirmation dialog: dimmed backdrop and a centred glass card. */
.hz-ask{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(10,40,34,.35);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:hz-fade .2s both}
.hz-ask-box{width:min(100%,360px);display:grid;gap:16px;padding:22px;border-radius:24px;text-align:center;
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.78));box-shadow:var(--glass-edge),0 30px 60px -28px rgba(10,40,34,.6)}
.hz-ask-box p{margin:0;font-weight:700;font-size:1.05rem;line-height:1.8}
.hz-ask-btns{display:flex;gap:10px;justify-content:center}
.hz-ask-btns .btn{line-height:2.4;padding:0 22px;font-weight:700}

/* Logo bar back in our glass: clear enough to show the colours behind, with the bright rim and sheen. */
.mast{background:linear-gradient(135deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.34) 100%)!important;
  border:1px solid rgba(255,255,255,.6)!important;
  backdrop-filter:blur(24px) saturate(1.9)!important;-webkit-backdrop-filter:blur(24px) saturate(1.9)!important;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(15,74,58,.08),0 16px 34px -22px rgba(15,74,58,.5)!important;
  position:relative;overflow:hidden}
.mast::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0) 75%,rgba(255,255,255,.15) 100%)}
.mast>*{position:relative}

/* Tracking sheets use the full screen width (up to 1500px) instead of the page column, so the
   requests log shows its columns without squeezing; phone numbers and dates stay on one line. */
@media (min-width:900px){
  #tracking .sheet .tbl{width:min(1500px,calc(100vw - 48px));margin-inline-start:calc(50% - min(750px,calc(50vw - 24px)))}
}
#tracking .sheet td bdi,#tracking .sheet td:first-child{white-space:nowrap}
/* …and down to the bottom of the screen, so the log reads as a full working sheet. */
@media (min-width:900px){
  #tracking .sheet .tbl{min-height:calc(100vh - 250px)}
}
/* Tighter cells in the tracking sheets so every column fits across the screen. */
#tracking .sheet th,#tracking .sheet td{padding:9px 10px;font-size:.88rem}
#tracking .sheet th{font-size:.84rem}
/* No "who fills this sheet" line above the tracking sheets. */
.sheet-meta{display:none!important}

/* Delete button in each request row (admin only). */
.tbl td .row-del{line-height:1.9;font-size:.82rem;padding:0 12px;white-space:nowrap;color:#b4443a;background:rgba(255,255,255,.55);border:1px solid rgba(180,68,58,.25)}
.tbl td .row-del:hover{background:#fdecea}
.tbl td .row-del .ic{width:14px;height:14px}

/* Laptop and wider: larger hero type beside a photo sized to the text block. */
@media (min-width:761px){
  .hero{padding:44px 48px;gap:18px 40px}
  .hero-kicker{font-size:.95rem}
  .hero h1{font-size:clamp(2.8rem,4.9vw,4rem);line-height:1.4}
  .tagline{font-size:1.22rem!important;gap:8px 18px}
  .tagline .hadith{font-size:.92rem;line-height:1.85;padding-inline-start:16px}
  .facts{gap:8px;margin-top:4px}
  .fact{font-size:.8rem;padding:3px 12px;gap:6px}
  .fact-place{padding-block:3px}
  .fact-place .fp{line-height:1.35}
  .fact-place .fp small{font-size:.64rem}
  .fact .ic{width:15px;height:15px}
  .hero-cta{font-size:1.16rem;padding:10px 12px 10px 26px;margin-top:8px}
  .hero-cta>.ic{width:22px;height:22px}
  .hero-cta .arr{width:40px;height:40px}
}

/* The photo sits beside the text on laptops only, as tall as the text block;
   the hadith drops under the motto when the row runs out of room instead of being cut off. */
@media (min-width:761px){
  /* Text takes the start side; the photo sits centred in the space that remains. */
  .hero{grid-template-columns:minmax(0,64%) minmax(0,1fr);column-gap:48px}
  .hero-art{grid-row:1/span 4;width:clamp(220px,22vw,300px);aspect-ratio:4/5;align-self:center;justify-self:center}
  .tagline{flex-wrap:nowrap!important;align-items:center}
  .tagline>span{flex:none}
}
/* Narrow laptops and tablets: not enough room for both side by side, so the hadith goes under the motto. */
@media (min-width:761px) and (max-width:1060px){.tagline{flex-wrap:wrap!important}}

/* Pills and main button form one block of equal width: the pills share the row, the button spans it. */
.hero-actions{justify-self:start;display:grid;gap:14px;width:max-content;max-width:100%}
.hero-actions .facts{margin:0;flex-wrap:nowrap}
.hero-actions .fact{flex:1 1 auto;justify-content:center}
.hero-actions .hero-cta{justify-self:stretch;justify-content:flex-start;margin:0}
.hero-actions .hero-cta .arr{margin-inline-start:auto}
@media (max-width:760px){.hero-actions{width:auto}.hero-actions .facts{flex-wrap:wrap}}

/* Line break used only in the phone motto. */
.m-br{display:none}
/* Phone hero: motto and hadith side by side in smaller type, compact pills that keep their own width. */
@media (max-width:560px){
  .hero h1{font-size:2.25rem}
  /* Equal space on both sides of the gold bar. */
  .tagline{flex-wrap:nowrap!important;align-items:center;gap:12px!important}
  /* The motto breaks at its comma, so its box is exactly as wide as its longer line. */
  .tagline>span:first-child{flex:0 0 auto;white-space:nowrap!important;font-size:.94rem;line-height:1.55}
  .tagline .m-br{display:inline}
  /* The hadith keeps its two lines; the type scales with the screen so they always fit. */
  .tagline .hadith{flex:0 1 auto;min-width:0;white-space:nowrap;font-size:min(.72rem,2.6vw)!important;line-height:1.9;padding-inline-start:12px!important;margin:0!important}
  .hero-actions{justify-self:start}
  .hero-actions .facts{flex-wrap:nowrap;justify-content:flex-start;gap:7px}
  .hero-actions .fact{flex:0 0 auto;font-size:.75rem;padding:2px 11px;gap:5px}
  .fact-place{padding-block:2px}
  .fact-place .fp{line-height:1.3}
  .fact-place .fp small{font-size:.6rem}
  .fact .ic{width:14px;height:14px}
}

/* The hadith shares the motto's colour. */
.tagline .hadith{color:var(--ink)!important}

/* Thank-you after a donor sends a request: prayer, hadith and a WhatsApp note to the team. */
.hz-thanks .hz-ask-box{width:min(100%,390px);gap:12px;padding:26px 22px 20px}
.hz-th-ok{width:64px;height:64px;margin:0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--green),var(--green-ink));box-shadow:0 0 0 8px rgba(44,155,106,.14)}
.hz-th-ok .ic{width:32px;height:32px}
.hz-thanks h3{margin:4px 0 0;font-size:1.3rem;color:var(--deep)}
.hz-th-dua{font-weight:600!important;font-size:.98rem!important;color:var(--ink);line-height:1.9!important}
.hz-th-hadith{margin:0;padding:12px 16px;border-radius:16px;background:rgba(253,240,210,.8);box-shadow:inset 0 0 0 1px rgba(244,177,45,.4);
  font-weight:700;color:var(--deep);line-height:1.9}
.hz-th-hadith cite{display:block;font-style:normal;font-size:.8rem;font-weight:600;color:var(--gold-ink)}
.hz-th-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:#fff!important;font-weight:800;
  line-height:2.8!important;border-radius:999px!important;background:linear-gradient(135deg,#25C366,#1A9E52)!important;border:0!important;
  box-shadow:0 12px 22px -12px rgba(26,158,82,.9)}
.hz-th-wa .ic{width:20px;height:20px}
.hz-th-close{line-height:2.4!important;font-weight:700}
.hz-th-hadith span{display:block;font-size:.88rem;font-weight:600;color:var(--muted)}
.hz-th-hadith b{display:block;font-size:1.12rem;white-space:nowrap}
.hz-th-close{display:flex!important;justify-content:center;text-align:center;width:100%}
.hz-th-hadith b{white-space:normal;font-size:1.02rem;line-height:1.9}

/* «تعديل القائمة» under the partners and beneficiaries sheets: opens the shared list in the volunteer screen's admin. */
.sheet-edit{display:inline-flex;align-items:center;gap:8px;margin-top:12px;text-decoration:none;font-weight:800;line-height:2.4;padding:0 18px;border-radius:999px;
  color:#fff!important;background:linear-gradient(135deg,var(--green),var(--green-ink))!important;border:0!important}

/* «أرسل موقعي الحالي» in the donor forms. */
.geo{display:grid;gap:6px}
.geo-btn{justify-self:start;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:800;padding:10px 18px;border-radius:999px;
  color:#fff;background:linear-gradient(135deg,#1B7FB0,var(--sky-ink));box-shadow:0 10px 18px -12px rgba(15,95,136,.9)}
.geo-btn .ic{width:18px;height:18px}
.geo-btn.done{background:linear-gradient(135deg,var(--green),var(--green-ink))}
.geo-btn:disabled{opacity:.7}
.geo-msg{font-size:.82rem;color:var(--muted)}
.geo-msg.good{color:var(--green-ink);font-weight:700}
.geo-msg.bad{color:var(--bad);font-weight:700}
.geo-msg a{color:var(--sky-ink)}

/* The floating «طلب حفظ النعمة» button belongs to the public site, not the admin's pages. */
body:has(#admin:not([hidden]),#tracking:not([hidden]),#plan:not([hidden]),#ideas:not([hidden])) .cta-dock{display:none!important}
/* Logout is an icon-only pill; nothing in the bar hides on phones. */
.userbar #ub-out{padding:1px 8px!important}
.userbar #ub-out .ic{width:15px;height:15px}
@media (max-width:560px){.userbar .ub-name{display:inline-flex}}
@media (max-width:420px){
  .mast{gap:6px!important;padding-inline:12px 10px!important}
  .userbar{gap:4px!important}
  .userbar .btn:not(.done){padding:1px 6px!important;gap:3px!important;font-size:.74rem!important}
  .userbar .btn:not(.done) .ic{width:13px;height:13px}
  .userbar #ub-out{padding:1px 6px!important}
  .userbar .ub-me .ub-role{padding:0 5px}
}
@media (max-width:360px){.mast{gap:4px!important;padding-inline:10px 8px!important}
  .logos{gap:6px}.userbar{gap:3px!important}
  .userbar .btn:not(.done){padding:1px 5px!important}.userbar #ub-out{padding:1px 5px!important}.userbar .ub-me .ub-role{padding:0 4px}}
.userbar #ub-out{align-self:stretch;justify-content:center}
/* iPhone: while Safari's bottom bar is showing, the fixed background layers end above it and the bar
   shows the bare canvas. Give the canvas the tone of the page's soft lower edge so the bar blends in. */
body{background-color:#A9B4AA}
/* Monthly report: the month picker in its head. */
.rep-month{font:inherit;font-weight:800;font-size:.9rem;color:var(--green-ink);background:rgba(255,255,255,.75);border:1px solid rgba(23,101,74,.25);
  border-radius:99px;padding:4px 14px;cursor:pointer}
.tag.sky{background:var(--sky-soft);color:var(--sky-ink)}
/* The donor's rating in the log and the donors sheet: stars, then the volunteer's note under them. */
.rate-c{display:grid;gap:2px;min-width:170px}
.rate-c b{color:#E0A100;letter-spacing:1px;font-size:1rem}
.rate-c small{color:var(--muted);line-height:1.5}
.tbl .nw{white-space:nowrap}
/* Control page: the data card (download as Excel, clear trial data). */
.data-card{display:grid;gap:4px}
.data-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 0;border-top:1px dashed rgba(91,109,105,.25)}
.data-row>div{display:grid;gap:4px;flex:1;min-width:220px}
.data-row strong{font-size:1rem}
.data-row span{color:var(--muted);font-size:.86rem}
.data-row .df-f{margin-top:6px;max-width:260px}
.data-row .df-msg{flex-basis:100%}
.btn.danger{background:#C0392B;color:#fff;border-color:transparent;box-shadow:0 12px 24px -14px rgba(192,57,43,.8)}
.btn.danger .ic,.data-row .btn.done .ic{color:#fff}
.data-row a.btn{text-decoration:none}
/* Site footer: a light glass card like the page's own, rounded on every corner. Hidden on the team's management pages. */
.site-foot{display:block;margin:40px 0 24px;border-radius:28px;background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),0 18px 40px -28px rgba(15,74,58,.45)}
body:has(#admin:not([hidden]),#tracking:not([hidden]),#plan:not([hidden]),#ideas:not([hidden])) .site-foot{display:none}
.sf-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px 16px;flex-wrap:wrap}
.sf-brand{display:grid;gap:8px;max-width:460px}
.sf-logos{display:inline-flex;align-items:center;gap:12px}
.sf-logos img{height:44px;width:auto}
.sf-logos i{width:1px;height:30px;background:rgba(91,109,105,.3)}
.sf-brand p{margin:0;font-size:.9rem;line-height:1.8;color:var(--muted)}
.sf-mail{display:inline-flex;align-items:center;gap:7px;color:var(--green-ink);text-decoration:none;font-weight:700;font-size:.9rem;width:max-content}
.sf-mail .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.sf-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sf-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:99px;font-weight:700;font-size:.9rem;text-decoration:none;color:var(--green-ink);
  background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(23,101,74,.18)}
.sf-btn.go{color:#fff;background:linear-gradient(135deg,var(--green),var(--green-ink));box-shadow:0 10px 20px -12px rgba(23,101,74,.8)}
.sf-btn .ic{width:17px;height:17px}
.sf-btn.go .ic{color:var(--gold)}
.sf-social{display:flex;gap:8px}
.sf-social:not(:has(a:not([href=""]))){display:none}
.sf-social a{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:var(--green-ink);background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(23,101,74,.14)}
.sf-social a[href=""]{display:none}
.sf-social svg{width:18px;height:18px}
.sf-bottom{margin:0 26px;padding:10px 0 14px;border-top:1px dashed rgba(91,109,105,.25);text-align:center;font-size:.78rem;color:var(--muted)}
@media (max-width:760px){
  .site-foot{margin:32px 0 20px;border-radius:24px}
  .sf-in{flex-direction:column;align-items:center;text-align:center;padding:20px 18px 12px;gap:14px}
  .sf-brand{justify-items:center}
  .sf-logos img{height:38px}
  .sf-act{justify-content:center;gap:8px;width:100%}
  .sf-btn{padding:7px 13px;font-size:.86rem}
}
/* Footer: the hero's own WhatsApp pill under the email; the main action above the social icons. */
.sf-wa{width:max-content;margin-top:2px}
.sf-act{flex-direction:column;align-items:flex-end;gap:12px}
@media (max-width:760px){
  .sf-wa{margin-inline:auto}
  .sf-act{align-items:center}
}
/* The same blue as the volunteers' «أقبل الطلب» button. */
.sf-tag{font-style:normal;font-weight:800;font-size:1.02rem;color:var(--sky-ink);background:linear-gradient(135deg,#1B7FB0,var(--sky-ink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:max-content}
/* Footer: «تواصل الآن» with the social icons beside it; the main button alone, larger, in the middle of its side. */
.sf-reach{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.sf-reach .sf-wa{margin:0}
.sf-act{align-self:center}
.sf-act .sf-btn.go{padding:14px 34px;font-size:1.12rem;gap:10px;box-shadow:0 14px 26px -14px rgba(23,101,74,.9)}
.sf-act .sf-btn.go .ic{width:22px;height:22px}
@media (max-width:760px){
  .sf-reach{justify-content:center}
  .sf-act .sf-btn.go{padding:12px 28px;font-size:1.02rem}
}
/* «يُقبَل» and «يُرفَض» in the same type as the items beside them. */
#p-safety .vbox .vh h3{font-family:var(--f);font-weight:800;font-size:1.12rem}
/* «تنزيل Excel» under each tracking sheet, beside «تعديل القائمة». */
.sheet-dl{display:inline-flex;align-items:center;gap:8px;margin-top:12px;margin-inline-start:8px;font-weight:800;line-height:2.4;padding:0 18px;border-radius:999px;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,#1B7FB0,var(--sky-ink));border:0;box-shadow:0 10px 20px -12px rgba(15,95,136,.8)}
.sheet-dl .ic{color:#fff}
.sheet-dl:disabled{opacity:.6}
.sheet-edit,.sheet-dl{justify-self:start;width:max-content}
.sheet-dl{margin-inline-start:0}

/* Merged columns in the tracking sheets (see compactSheet in auth.js): the table fits the page, no sideways scroll. */
#tracking .sheet .tbl:has(.cm-t){overflow:hidden}
#tracking .sheet td.cm .cm-l+.cm-l{font-size:.82rem;color:var(--muted)}
#tracking .sheet td.cm .cm-l .wa-btn{margin-top:4px}
#tracking .sheet .cm-t td{overflow-wrap:anywhere}
#tracking .sheet .cm-t th{white-space:normal}
#tracking .sheet .cm-t .tag{white-space:normal;display:inline-block;line-height:1.6}
#tracking .sheet .cm-t .rate-c{min-width:0}
@media (max-width:760px){
  #tracking .sheet .cm-t thead{display:none}
  #tracking .sheet .cm-t,#tracking .sheet .cm-t tbody,#tracking .sheet .cm-t tr,#tracking .sheet .cm-t td{display:block;width:auto}
  #tracking .sheet .cm-t tr{padding:10px 12px;border-bottom:1px solid var(--line)}
  #tracking .sheet .cm-t td{border:0;padding:3px 0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;background:none!important;white-space:normal}
  #tracking .sheet .cm-t td>*{min-width:0}
  #tracking .sheet:has(.cm-t){grid-template-columns:minmax(0,1fr)}
  #tracking .sheet .cm-t td::before{content:attr(data-h);color:var(--muted);font-size:.78rem;font-weight:700}
  #tracking .sheet .cm-t td:not([data-h])::before,#tracking .sheet .cm-t td[data-h=""]::before{content:none}
  #tracking .sheet .cm-t td[colspan]{display:block}
}

/* The sheet's buttons in one bar above the table, at its left end. */
.sheet-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;justify-self:stretch}
.sheet-tools .sheet-edit,.sheet-tools .sheet-dl{margin:0;line-height:2.2;font-size:.88rem;padding:0 16px}