/* --- Hide the theme chrome on this page only (this sheet loads only here) --- */
#wpadminbar{display:none!important}
html{margin-top:0!important}
html,body{overflow-x:hidden;max-width:100%}
.tm-toolbar,.tm-header,.tm-header-mobile,#tm-dialog-mobile,#tm-main + footer,body > footer,.uk-article-title{display:none!important}
#tm-main.tm-main{padding-top:0!important;background:#fbfdfc!important}
#tm-main .uk-container{padding-top:0!important}
#tm-main .uk-article,#tm-main .uk-article > .uk-margin-medium{margin-top:0!important;padding-top:0!important}
#tm-main,#tm-main .uk-container,#tm-main .uk-article{padding-bottom:0!important;margin-bottom:0!important}

/* --- Tokens (blue default) --- */
#mrz-app,.mrz-give,.mrz-appeal,.mrz-footer,.mrz-bank{--forest:#0c4a86;--deep:#082a52;--green:#1366c2;--mint:#cfe6ff;--mint-soft:#d6ecff;--paper:#fbfdfc;--ink:#11243a;--muted:#5b6b7e;--line:#e4eaf1;--surface:#fff;font-family:inherit;color:var(--ink)}
/* --- Green theme --- */
#mrz-app.t-green,.mrz-give.t-green,.mrz-appeal.t-green,.mrz-footer.t-green,.mrz-bank.t-green{--forest:#0a4133;--deep:#053026;--green:#0e7a5f;--mint:#a9f0cf;--mint-soft:#d7f6e8;--ink:#11221d;--muted:#5d706a;--line:#e6ede9}
#mrz-app{display:block;margin:0 auto}
#mrz-app *,.mrz-give *{box-sizing:border-box}

/* --- Full-bleed helper (breaks out of the theme's centered container) --- */
.mrz-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* --- HERO --- */
.mrz-hero{position:relative;overflow:hidden;min-height:620px;display:flex;align-items:center;background:linear-gradient(155deg,rgba(12,58,110,.92) 0%,rgba(8,42,82,.93) 48%,rgba(5,26,52,.96) 100%),url("plan.jpg") center bottom/cover,#0a3056;padding:60px 22px 130px;color:#fff;text-align:center}
#mrz-app.t-green .mrz-hero{background:linear-gradient(155deg,#0e6b54 0%,#0a4d3c 48%,#063228 100%)}
.mrz-hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 78% at 50% 24%,transparent 38%,rgba(5,24,49,.5));pointer-events:none}
/* Green meter: pattern is the live tile field; scrim keeps the centre legible, edges glow */
#mrz-app.t-green .mrz-hero::before{background:radial-gradient(116% 72% at 50% 50%,rgba(5,42,31,.93) 0%,rgba(5,42,31,.84) 40%,rgba(5,42,31,.34) 72%,transparent 100%)}
.mrz-hero__in{position:relative;z-index:2;max-width:680px;margin:0 auto}

/* --- Hero meter: 100 khatam tiles that light up as places fill --- */
.mrz-herofield{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(20,1fr);grid-auto-rows:1fr;pointer-events:none}
.mrz-htile{position:relative;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.10);transition:color .5s ease,filter .5s ease}
.mrz-htile svg{width:60%;height:60%;max-width:42px;max-height:42px}
.mrz-htile__n{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:#fff;opacity:.22;transition:color .5s ease,opacity .5s ease}
.mrz-htile.is-filled{color:#aef0d0;filter:drop-shadow(0 0 7px rgba(120,230,180,.55))}
.mrz-htile.is-filled .mrz-htile__n{color:#eafff4;opacity:.92}
.mrz-htile.just-filled{animation:mrzhtile .6s cubic-bezier(.2,.85,.25,1)}
@keyframes mrzhtile{0%{transform:scale(.4);opacity:.3}55%{transform:scale(1.35)}100%{transform:scale(1);opacity:1}}
.mrz-herofield.is-celebrating{animation:mrzfieldglow .7s ease}
@keyframes mrzfieldglow{0%,100%{filter:none}45%{filter:brightness(1.16)}}
.mrz-stat-num.pop{animation:mrzpop .56s ease}
@keyframes mrzpop{0%{transform:scale(1)}35%{transform:scale(1.42)}100%{transform:scale(1)}}
.mrz-logo{display:block;height:auto;width:min(300px,64vw);margin:0 auto 24px;filter:brightness(0) invert(1);opacity:.97}
@media(max-width:560px){.mrz-logo{width:min(240px,66vw);margin-bottom:20px}}
.mrz-wave{position:absolute;left:0;bottom:-1px;width:100%;height:120px;display:block;z-index:2}
.mrz-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}
.mrz-title{font-size:clamp(46px,9vw,84px);line-height:.96;font-weight:800;letter-spacing:-.035em;margin:.32em 0 .2em;color:#fff}
.mrz-title b{color:var(--mint);font-weight:800}
.mrz-title .mrz-x{color:rgba(255,255,255,.45);font-weight:400;font-size:.62em;vertical-align:.08em;margin:0 .1em}
.mrz-sub{font-size:clamp(16px,2.4vw,20px);line-height:1.45;color:rgba(255,255,255,.82);font-weight:500;margin:0 auto 30px;max-width:26em}
.mrz-stats{display:flex;justify-content:center;align-items:stretch;max-width:540px;margin:0 auto 22px}
.mrz-stat{flex:1;padding:2px 14px}
.mrz-stat + .mrz-stat{border-left:1px solid rgba(255,255,255,.16)}
.mrz-stat-num{display:block;font-size:clamp(28px,5.4vw,42px);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.mrz-stat-mid .mrz-stat-num{color:var(--mint)}
.mrz-stat-lab{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:7px}
.mrz-count{font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.74);margin:0 0 26px}
.mrz-count strong{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.mrz-cta{display:inline-block;background:#fff;color:var(--forest);font-weight:800;font-size:17px;letter-spacing:-.01em;text-decoration:none;padding:16px 40px;border-radius:999px;box-shadow:0 16px 34px -16px rgba(0,0,0,.55);transition:background .15s,color .15s}
.mrz-cta:hover{background:var(--mint-soft);color:var(--forest)}
.mrz-cta:focus-visible,.mrz-give a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

/* These blocks are siblings of .mrz-give, so they don't inherit the box-sizing
   rule scoped to #mrz-app/.mrz-give descendants — set it here or 100vw + padding overflows. */
.mrz-appeal,.mrz-video,.mrz-gallery,.mrz-footer,.mrz-footer *,.mrz-bank,.mrz-bank *{box-sizing:border-box}

/* --- Appeal grid: video|form (top), hadith|bank (below). Areas re-order on mobile. --- */
.mrz-appeal{max-width:1060px;margin:52px auto 0;padding:0 22px;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-areas:"video form" "hadith bank";column-gap:46px;row-gap:24px;align-items:start}
.mrz-video{grid-area:video}
.mrz-appeal > .mrz-give{grid-area:form;max-width:none;margin:0;padding:0;border:0;background:none;box-shadow:none}
.mrz-hadith{grid-area:hadith}
.mrz-appeal > .mrz-bank{grid-area:bank;max-width:none;margin:0;padding:0}
.mrz-appeal .mrz-give-title{text-align:left;font-size:clamp(25px,2.9vw,33px);line-height:1.06;letter-spacing:-.03em;margin:0 0 20px}

/* Portrait video — heading anchored tight to the frame */
.mrz-video{display:flex;flex-direction:column;align-items:stretch;text-align:left;margin:0;padding:0}
.mrz-video__eyebrow{font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.mrz-video__title{font-size:clamp(25px,2.9vw,33px);line-height:1.06;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0 0 14px}
.mrz-video__frame{width:100%;max-width:340px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--line);box-shadow:0 24px 60px -30px rgba(8,20,40,.5)}
.mrz-video__frame video{display:block;width:100%;height:100%;object-fit:cover}

/* Stack on smaller screens: video on top, graphics + form beneath */
@media(max-width:880px){
  /* Single column; stack order: video → form → bank → hadith */
  .mrz-appeal{grid-template-columns:1fr;grid-template-areas:"video" "form" "bank" "hadith";row-gap:24px;margin-top:38px;max-width:600px;padding:0 16px}
  .mrz-video{align-items:center;text-align:center}
  .mrz-video__frame{margin:0 auto;max-width:none;width:100%}
  .mrz-appeal .mrz-give-title{text-align:center}
}
@media(max-width:560px){
  /* Phones: video and form share one near-full-width column with a small, consistent
     gutter — same edges, so they read as a single cohesive surface. */
  .mrz-appeal{padding:0 12px;row-gap:22px;max-width:none}
  .mrz-video__frame{width:100%;max-width:none;box-shadow:0 14px 36px -26px rgba(8,20,40,.45)}
}

/* Site footer — three-column grid, flush to the bottom */
.mrz-footer{margin-top:64px;padding:44px 24px;background:var(--surface);border-top:1px solid var(--line)}
.mrz-footer__in{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;align-items:start}
.mrz-footer__logo{display:block;height:auto;width:160px;margin:0 0 16px;opacity:.92}
.mrz-fcol__h{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.mrz-footer__mission{font-size:14px;line-height:1.55;color:var(--ink);max-width:26em;margin:0}
.mrz-footer__giftaid{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 12px}
.mrz-footer__giftaid b{color:var(--green);font-weight:800}
.mrz-footer__meta{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0}
.mrz-social{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.4}
.mrz-social li + li{margin-top:11px}
.mrz-social a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;transition:color .15s,border-color .15s}
.mrz-social a:hover{color:var(--green);border-color:var(--green)}
@media(max-width:820px){.mrz-footer__in{grid-template-columns:1fr 1fr;gap:32px 40px}.mrz-fcol--about{grid-column:1 / -1}}
@media(max-width:560px){
  .mrz-footer{padding:34px 22px 40px}
  .mrz-footer__in{grid-template-columns:1fr;gap:28px;text-align:center}
  .mrz-fcol--about{grid-column:auto}
  .mrz-footer__logo,.mrz-footer__mission{margin-left:auto;margin-right:auto}
  .mrz-footer__mission{max-width:32em}
  .mrz-social a{border-bottom:0}
}

/* --- Give block (framed by hairlines) --- */
.mrz-give{max-width:600px;margin:40px auto 0;padding:30px 18px 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:14px}
.mrz-give-title{text-align:center;font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.025em;margin:0 0 16px;color:var(--ink)}
/* Hide the form's own title + goal bar (the campaign banner + hero carry the message);
   let the plugin's native card render — banner sits flush at its top via overflow:hidden. */
#mrz-give .sd-head__title,#mrz-give .sd-goal{display:none!important}
#mrz-give .sd-form{max-width:none!important}
#mrz-give.t-green .sd-form{--sd-accent:#0e7a5f!important}
/* Native cover banner shows the campaign featured image as the card header */
#mrz-give .sd-banner{aspect-ratio:4/1;height:auto}
/* Taller on phones (centred text stays within the cover crop) */
@media(max-width:560px){#mrz-give .sd-banner{aspect-ratio:2.5/1}}

/* --- Places counter — sits on the background; a single hairline divides it from the form --- */
.mrz-strip{margin:0 0 32px;padding:0 0 30px;border-bottom:1px solid var(--line);transform-origin:center}
.mrz-strip.is-celebrating{animation:mrzcelebrate .7s cubic-bezier(.2,.85,.25,1)}
@keyframes mrzcelebrate{0%{transform:scale(1)}28%{transform:scale(1.04)}66%{transform:scale(.995)}100%{transform:scale(1)}}
.mrz-strip__head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mrz-strip__count{letter-spacing:0;text-transform:none;font-size:13px;color:var(--muted)}
.mrz-strip__count b{display:inline-block;color:var(--green);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.mrz-strip__count b.pop{animation:mrzcount .56s ease}
@keyframes mrzcount{0%{transform:scale(1)}35%{transform:scale(1.5);color:var(--green)}100%{transform:scale(1)}}

/* --- Graphic A: segment bar --- */
.mrz-segs{display:grid;grid-template-columns:repeat(100,1fr);gap:2px;height:30px}
.mrz-seg{background:var(--line);border-radius:2px;transition:background .4s ease,transform .4s ease;transform-origin:bottom}
.mrz-seg.is-filled{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 80%,#fff),var(--green))}
.mrz-seg.just-filled{animation:mrzseg .6s cubic-bezier(.2,.85,.25,1)}
@keyframes mrzseg{0%{transform:scaleY(.25);opacity:.4}55%{transform:scaleY(1.3)}100%{transform:scaleY(1);opacity:1}}

/* --- Graphic B: banknote icon notes, in rows --- */
.mrz-notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:8px}
.mrz-note{aspect-ratio:48/32;color:#cdd8d3;display:flex;align-items:center;justify-content:center;transition:color .35s,transform .35s}
.mrz-note svg{width:100%;height:100%}
.mrz-note.is-filled{color:var(--green)}
.mrz-note.just-filled{animation:mrznote .55s cubic-bezier(.2,.85,.25,1)}
@keyframes mrznote{0%{transform:scale(.5);opacity:.35}55%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}

.mrz-splitline{text-align:center;margin:-2px 0 20px;font-size:14px;color:var(--muted)}
#mrz-give.t-green .mrz-splitline{display:none}

/* --- Gallery --- */
.mrz-gallery{max-width:1040px;margin:46px auto 60px;padding:0 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mrz-gallery__item{margin:0;border-radius:14px;overflow:hidden;background:var(--line);aspect-ratio:4/3}
.mrz-gallery__item img{display:block;width:100%;height:100%;object-fit:cover}

@media(max-width:760px){.mrz-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mrz-hero{display:block;min-height:560px;padding:calc(48px + env(safe-area-inset-top)) 18px 92px}.mrz-stat{padding:2px 8px}.mrz-wave{height:74px}.mrz-segs{gap:1.5px;height:26px}.mrz-notes{grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:5px}.mrz-herofield{grid-template-columns:repeat(10,1fr)}.mrz-htile svg{max-width:30px;max-height:30px}.mrz-htile__n{font-size:9px}}
@media(max-width:460px){.mrz-gallery{grid-template-columns:1fr}}

/* --- Bank transfer box --- */
.mrz-bank{max-width:600px;margin:18px auto 0;padding:0 18px}
.mrz-bank__card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:0 20px 48px -32px rgba(10,40,30,.5)}
.mrz-bank__title{font-size:clamp(19px,2.2vw,23px);font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--ink);margin:0 0 6px}
.mrz-bank__sub{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.mrz-bank__ref{display:flex;align-items:center;gap:10px;background:var(--mint-soft);border:1px solid var(--mint);border-radius:10px;padding:11px 12px 11px 14px;margin:0 0 14px}
.mrz-bank__refl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.mrz-bank__refv{flex:1;font-size:18px;font-weight:800;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.mrz-bank__rows{display:flex;flex-direction:column}
.mrz-bank__row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.mrz-bank__row:first-child{border-top:0}
.mrz-bank__l{font-size:13px;color:var(--muted);flex:none;min-width:118px}
.mrz-bank__v{flex:1;font-size:14.5px;font-weight:700;color:var(--ink);word-break:break-word}
.mrz-bank__copy{position:relative;flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:8px;color:var(--green);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.mrz-bank__copy:hover{background:var(--mint-soft);border-color:var(--mint)}
.mrz-bank__copy:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.mrz-bank__copy svg{width:17px;height:17px}
.mrz-bank__copy.is-copied{color:#fff;background:var(--green);border-color:var(--green)}
.mrz-bank__copy.is-copied::after{content:"Copied";position:absolute;bottom:calc(100% + 6px);right:0;background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:0;padding:3px 7px;border-radius:5px;white-space:nowrap;pointer-events:none}
.mrz-bank__share{margin-top:18px;width:100%;background:var(--green);color:#fff;border:0;border-radius:999px;padding:13px 20px;font-size:15px;font-weight:800;letter-spacing:-.01em;cursor:pointer;transition:background .15s}
.mrz-bank__share:hover{background:var(--forest)}
.mrz-bank__share:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
@media(max-width:560px){.mrz-bank__card{padding:22px 18px}.mrz-bank__l{min-width:96px}.mrz-bank__refv{font-size:16px}}

/* --- Hadith cards (left column, beneath the video) --- */
@font-face{font-family:'Kitab';src:url("kitab.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.mrz-hadith{display:flex;flex-direction:column;gap:12px;align-self:stretch;justify-content:space-between}
.mrz-hadith__card{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px 15px}
.mrz-hadith__text{font-size:14px;line-height:1.55;color:var(--ink);margin:0 0 9px}
.mrz-hadith__ar{display:block;direction:rtl;font-family:'Kitab',serif;font-size:23px;line-height:2;margin:10px 0 8px;color:var(--ink);font-weight:400}
.mrz-hadith__t2{display:block;margin-top:6px}
.mrz-hadith__src{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--green);font-style:normal}
@media(max-width:880px){.mrz-hadith{justify-content:flex-start}}

/* Scroll reveal — sections rise + fade as they enter view (once) */
.mrz-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.mrz-reveal.is-inview{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){.mrz-seg.just-filled,.mrz-note.just-filled,.mrz-htile.just-filled,.mrz-strip.is-celebrating,.mrz-herofield.is-celebrating,.mrz-strip__count b.pop,.mrz-stat-num.pop{animation:none}.mrz-reveal{opacity:1;transform:none;transition:none}}