/* ===== جمعية البن بمنطقة عسير — نموذج طلب العضوية ===== */
:root{
  /* Brand palette — unified with login.html identity */
  --emerald-950:#042E22;
  --emerald-900:#064E3B;   /* matches login --emerald-900 */
  --emerald-850:#0B5E48;   /* matches login --emerald-800 */
  --emerald-800:#0E6E54;   /* matches login --emerald-700 */
  --emerald-700:#11604A;
  --emerald-600:#15795D;
  --panel-a:#042E22;
  --panel-b:#064E3B;
  --gold:#C7A35A;
  --gold-soft:#D8BC84;
  --gold-deep:#9C7A38;
  --cream:#F4F5F1;          /* matches login --bg */
  --cream-2:#ECEEE9;
  --cream-3:#E3E5DF;        /* matches login --line */
  --paper:#FFFFFF;
  --ink:#0F1714;            /* matches login --ink-900 */
  --ink-2:#2C3833;          /* matches login --ink-700 */
  --muted:#6A736E;          /* matches login --ink-500 */
  --muted-2:#B6BCB7;        /* matches login --ink-300 */
  --line:#E3E5DF;           /* matches login --line */
  --line-2:#CFD3CB;         /* matches login --line-2 */
  --field:#F7F8F4;
  --danger:#DC2626;
  --ok:#16A34A;

  --r-sm:8px; --r-md:11px; --r-lg:16px; --r-xl:20px;  /* matches login border-radius */
  --shadow-sm:0 1px 2px rgba(15,23,21,.04), 0 1px 1px rgba(15,23,21,.03);
  --shadow-md:0 6px 24px rgba(11,58,44,.10);
  --shadow-lg:0 24px 60px rgba(11,58,44,.20);
  --ring: 0 0 0 4px rgba(11,94,72,0.08); /* matches login focus ring */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --aside-w: 40%;
  --motion: 1; /* scaled by tweaks */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"IBM Plex Sans Arabic","Tajawal",system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.latin{font-family:"Outfit",sans-serif;direction:ltr;unicode-bidi:isolate}
::selection{background:rgba(199,163,90,.28)}

/* ============ SHELL ============ */
.shell{
  display:grid;
  grid-template-columns: 1fr var(--aside-w);
  height:100vh; height:100dvh;
  background:var(--cream);
}
.shell.aside-left{ grid-template-columns: var(--aside-w) 1fr; }
.shell.aside-left .aside{order:-1}

/* ============ ASIDE (emerald brand panel) ============ */
.aside{
  position:relative;
  overflow:hidden;
  color:#EAF3EE;
  background:
    radial-gradient(120% 90% at 85% 8%, rgba(199,163,90,.16), transparent 46%),
    radial-gradient(120% 120% at 12% 100%, rgba(21,121,93,.55), transparent 55%),
    linear-gradient(155deg, var(--panel-a) 0%, var(--panel-b) 62%, #0A4636 100%);
  display:flex; flex-direction:column;
  padding:clamp(26px,3vw,46px);
}
.aside__map{position:absolute;inset:0;opacity:.5;pointer-events:none;mix-blend-mode:soft-light}
.aside__grain{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.8) .5px, transparent .6px);
  background-size:7px 7px}
.aside__glow{position:absolute;width:50vmax;height:50vmax;border-radius:50%;
  background:radial-gradient(circle, rgba(199,163,90,.20), transparent 60%);
  top:-18vmax;left:-12vmax;filter:blur(8px);pointer-events:none;
  animation:floaty calc(16s / var(--motion)) ease-in-out infinite alternate}
@keyframes floaty{to{transform:translate3d(4vmax,3vmax,0) scale(1.08)}}

.aside__inner{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}

.brandrow{display:flex;align-items:center;gap:14px;justify-content:flex-start}
.brandrow .logo{flex:0 0 auto}
.brandrow .names{line-height:1.5}
.brandrow .names .ar{font-weight:700;font-size:clamp(15px,1.15vw,18px);color:#fff;letter-spacing:.2px}
.brandrow .names .en{font-size:10.5px;letter-spacing:.22em;color:rgba(216,188,132,.9);font-weight:600}

.logo{width:50px;height:50px;border-radius:14px;
  background:linear-gradient(160deg,#D8BC84,#C7A35A 55%,#A9883F);
  display:grid;place-items:center;box-shadow:0 8px 22px rgba(169,136,63,.4), inset 0 1px 0 rgba(255,255,255,.5)}
.logo svg{width:30px;height:30px}
/* real logo image wrapper */
.logo-img-wrap{flex:0 0 auto}

.aside__head{margin-top:clamp(26px,5vh,60px)}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold-soft);
  font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:1.5px;background:linear-gradient(90deg,var(--gold),transparent)}
.aside h1{font-size:clamp(26px,2.7vw,40px);line-height:1.28;font-weight:800;color:#fff;letter-spacing:-.5px}
.aside h1 .g{color:var(--gold-soft)}
.aside__lede{margin-top:18px;max-width:38ch;color:rgba(226,239,232,.82);font-size:clamp(13px,1vw,15px);line-height:2;font-weight:400}

/* vertical stepper */
.vstep{margin-top:clamp(24px,4vh,46px);display:flex;flex-direction:column;gap:2px}
.vstep__item{display:flex;align-items:flex-start;gap:14px;padding:9px 0;position:relative;cursor:pointer}
.vstep__rail{display:flex;flex-direction:column;align-items:center;align-self:stretch}
.vstep__dot{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  border:1.5px solid rgba(216,188,132,.4);background:rgba(255,255,255,.04);
  color:rgba(234,243,238,.65);font-weight:700;font-size:14px;
  transition:all .45s var(--ease)}
.vstep__line{width:2px;flex:1;min-height:14px;background:rgba(255,255,255,.12);margin:4px 0}
.vstep__item:last-child .vstep__line{display:none}
.vstep__txt{padding-top:5px}
.vstep__txt .t{font-weight:700;font-size:14.5px;color:rgba(234,243,238,.9);transition:color .4s}
.vstep__txt .s{font-size:11.5px;color:rgba(216,232,224,.5);margin-top:2px}
.vstep__item.done .vstep__dot{background:linear-gradient(160deg,var(--gold-soft),var(--gold));border-color:transparent;color:#0C3B2D;box-shadow:0 6px 16px rgba(169,136,63,.4)}
.vstep__item.done .vstep__line{background:linear-gradient(180deg,var(--gold),rgba(255,255,255,.12))}
.vstep__item.active .vstep__dot{background:rgba(199,163,90,.16);border-color:var(--gold);color:#fff;
  box-shadow:0 0 0 5px rgba(199,163,90,.12); transform:scale(1.06)}
.vstep__item.active .vstep__txt .t{color:#fff}
.vstep__item.active .vstep__txt .s{color:var(--gold-soft)}

/* stats */
.aside__foot{margin-top:auto;padding-top:26px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
.stat{text-align:center}
.stat .k{font-size:10px;letter-spacing:.2em;color:rgba(216,188,132,.85);font-weight:700}
.stat .v{font-size:clamp(22px,2vw,28px);font-weight:800;color:#fff;margin:4px 0;font-feature-settings:"tnum"}
.stat .l{font-size:11px;color:rgba(226,239,232,.6)}
.aside__note{margin-top:22px;font-size:12px;line-height:1.9;color:rgba(216,232,224,.55);font-style:italic}
.aside__copy{margin-top:14px;font-size:11px;color:rgba(216,232,224,.4)}

/* ============ FORM SIDE ============ */
.main{position:relative;height:100vh;height:100dvh;display:flex;flex-direction:column;
  background-color:#FBFCF9;
  background-image:
    radial-gradient(ellipse 100% 65% at 100% 0%, rgba(11,94,72,.06), transparent 52%),
    radial-gradient(ellipse 85% 55% at 0% 100%, rgba(199,163,90,.075), transparent 50%),
    repeating-linear-gradient(128deg,transparent 0 36px,rgba(11,94,72,.018) 36px 37px),
    repeating-linear-gradient(-128deg,transparent 0 36px,rgba(6,78,59,.014) 36px 37px),
    radial-gradient(circle at 1px 1px,rgba(11,94,72,.035) 1px,transparent 1.5px);
  background-size:auto,auto,auto,auto,20px 20px;
}
.main::before{content:"";position:absolute;inset:-50%;pointer-events:none;z-index:0;opacity:.35;
  background:conic-gradient(from 210deg at 50% 50%,transparent 0deg,rgba(11,94,72,.04) 72deg,transparent 144deg,rgba(199,163,90,.035) 216deg,transparent 288deg,rgba(11,94,72,.03) 360deg)}

.topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(26px,4vw,60px) 0}
.topbar .mini-brand{display:none;align-items:center;gap:10px}
.topbar .crumb{font-size:13px;color:var(--muted);font-weight:500}
.topbar .crumb b{color:var(--emerald-800)}
.save-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);padding:7px 13px;border-radius:999px;box-shadow:var(--shadow-sm)}
.save-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(30,138,95,.15)}

/* progress bar */
.pbar{position:relative;z-index:3;height:3px;margin:18px clamp(26px,4vw,60px) 0;background:var(--cream-3);border-radius:999px;overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--emerald-600));
  border-radius:999px;transition:width .6s var(--ease)}

.scroller{position:relative;z-index:2;flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
.scroller::-webkit-scrollbar{width:10px}
.scroller::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid transparent;background-clip:content-box}

.stage{max-width:760px;margin:0 auto;padding:clamp(22px,3.5vh,40px) clamp(26px,4vw,60px) 30px}

.step-head{margin-bottom:24px}
.step-head .kик{display:none}
.step-head .lead{display:flex;align-items:center;gap:10px;color:var(--gold-deep);font-weight:700;font-size:13px;margin-bottom:10px}
.step-head .lead .n{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(199,163,90,.14);color:var(--gold-deep);font-size:12px}
.step-head h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.5px}
.step-head p{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.8;max-width:54ch}

/* slide animation between steps */
.slide{animation:slideIn calc(.55s / var(--motion)) var(--ease-out) both}
@keyframes slideIn{from{transform:translateY(16px)}to{transform:translateY(0)}}

/* ============ FIELDS ============ */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.col-2{grid-column:1 / -1}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

.field{position:relative;display:flex;flex-direction:column;gap:0}
.field > label{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.field .req{color:var(--gold-deep);font-size:11px}
.field .hint{font-size:11.5px;color:var(--muted-2);font-weight:500;margin-right:auto}

.inp{position:relative;display:flex;align-items:center}
.inp input,.inp textarea,.sel-btn{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:#FCFCFA;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:14px 15px;transition:border-color .14s, background .14s, box-shadow .14s;
  outline:none}
.inp.has-icon input{padding-left:44px}
.inp textarea{resize:vertical;min-height:92px;line-height:1.7}
.inp input::placeholder,.inp textarea::placeholder{color:var(--muted-2)}
.inp input:focus,.inp textarea:focus,.sel-btn:focus,.sel-btn.open{
  background:var(--paper);border-color:var(--emerald-850);box-shadow:var(--ring)}
.inp .ic{position:absolute;left:14px;color:var(--muted-2);display:grid;place-items:center;pointer-events:none;transition:color .25s}
.inp input:focus ~ .ic{color:var(--gold-deep)}
.inp .vchk{position:absolute;left:14px;opacity:0;transform:scale(.6);transition:.3s var(--ease)}
.field.valid .inp .vchk{opacity:1;transform:none}
.field.valid .inp.has-icon input{padding-left:44px}
.field.valid .inp input{border-color:rgba(22,163,74,.5)}
.field.invalid .inp input,.field.invalid .sel-btn{border-color:var(--danger);background:#fef2f2}
.err{font-size:12px;color:var(--danger);margin-top:7px;display:flex;align-items:center;gap:5px;
  animation:slideIn .3s var(--ease) both}

/* select */
.sel{position:relative}
.sel-btn{display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:right}
.sel-btn.placeholder{color:var(--muted-2)}
.sel-btn .chev{transition:transform .3s var(--ease);color:var(--muted)}
.sel-btn.open .chev{transform:rotate(180deg)}
.sel-menu{position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:30;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:6px;max-height:240px;overflow:auto;
  animation:menuIn .25s var(--ease) both}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sel-opt{padding:11px 13px;border-radius:9px;cursor:pointer;font-size:14.5px;color:var(--ink-2);
  display:flex;align-items:center;justify-content:space-between;transition:background .15s}
.sel-opt:hover{background:var(--cream-2)}
.sel-opt.sel-active{background:rgba(199,163,90,.12);color:var(--emerald-800);font-weight:700}

/* choice pills (segmented) */
.choice{display:flex;gap:10px;flex-wrap:wrap}
.choice.equal{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice.equal .chip{min-width:0}
.chip{flex:1;min-width:120px;cursor:pointer;position:relative;
  border:1.5px solid var(--line);background:var(--field);border-radius:var(--r-md);
  padding:14px 16px;display:flex;align-items:center;gap:11px;transition:all .25s var(--ease)}
.chip .ci{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);color:var(--muted);transition:all .25s}
.chip .ct{font-weight:700;font-size:14.5px;color:var(--ink-2)}
.chip .cs{font-size:11.5px;color:var(--muted);font-weight:500}
.chip:hover{border-color:var(--line-2);background:var(--paper)}
.chip.on{border-color:var(--emerald-700);background:rgba(17,96,74,.06);box-shadow:0 0 0 3px rgba(17,96,74,.08)}
.chip.on .ci{background:linear-gradient(160deg,var(--emerald-700),var(--emerald-600));border-color:transparent;color:#fff}
.chip .tick{position:absolute;top:10px;left:10px;opacity:0;transform:scale(.5);transition:.25s var(--ease);color:var(--emerald-700)}
.chip.on .tick{opacity:1;transform:none}

/* number stepper */
.stepper{display:flex;align-items:center;gap:0;background:var(--field);border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;width:100%}
.stepper:focus-within{border-color:var(--gold);box-shadow:var(--ring);background:var(--paper)}
.stepper button{width:52px;height:52px;flex:0 0 auto;border:none;background:transparent;cursor:pointer;
  color:var(--emerald-800);font-size:22px;display:grid;place-items:center;transition:background .2s}
.stepper button:hover{background:rgba(17,96,74,.08)}
.stepper button:active{transform:scale(.92)}
.stepper input{flex:1;border:none;background:transparent;text-align:center;font-size:17px;font-weight:700;color:var(--ink);outline:none;font-feature-settings:"tnum";min-width:0}

/* dropzone */
.drop{position:relative;border:1.8px dashed var(--line-2);border-radius:var(--r-lg);
  background:var(--field);padding:26px;text-align:center;cursor:pointer;transition:all .25s var(--ease)}
.drop:hover,.drop.drag{border-color:var(--gold);background:rgba(199,163,90,.06)}
.drop input{display:none}
.drop .di{width:54px;height:54px;border-radius:14px;margin:0 auto 12px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);color:var(--gold-deep)}
.drop .dt{font-weight:700;color:var(--ink-2);font-size:14.5px}
.drop .ds{font-size:12px;color:var(--muted);margin-top:4px}
.drop.filled{border-style:solid;border-color:rgba(30,138,95,.45);background:rgba(30,138,95,.05)}
.file-card{display:flex;align-items:center;gap:13px;text-align:right}
.file-card .thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--cream-2)}
.file-card .fi{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--ok);flex:0 0 auto}
.file-card .fn{font-weight:700;font-size:14px;color:var(--ink-2);word-break:break-all}
.file-card .fz{font-size:12px;color:var(--muted)}
.file-card .rm{margin-right:auto;background:none;border:none;cursor:pointer;color:var(--muted-2);padding:8px;border-radius:8px;transition:.2s}
.file-card .rm:hover{color:var(--danger);background:#fdf3f3}

/* map picker — Leaflet container */
.mapwrap-outer{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.mapwrap-leaflet{
  height:340px;
  width:100%;
  background:#0E4434;
  border-radius:var(--r-lg) var(--r-lg) 0 0; /* instructions bar closes the bottom */
}
/* keep Leaflet z-index below sticky nav (z-index 20) */
.mapwrap-outer .leaflet-pane        { z-index:4  !important; }
.mapwrap-outer .leaflet-top,
.mapwrap-outer .leaflet-bottom      { z-index:6  !important; }
.mapwrap-outer .leaflet-control     { z-index:6  !important; }
/* style Leaflet zoom controls to match site theme */
.mapwrap-outer .leaflet-control-zoom a{
  font-family:"IBM Plex Sans Arabic",sans-serif;
  color:var(--emerald-900);
  font-weight:700;
}
.mapwrap-outer .leaflet-control-zoom a:hover{ background:var(--cream-2); }
/* attribution text */
.mapwrap-outer .leaflet-control-attribution{
  font-size:10px;background:rgba(255,255,255,.75);backdrop-filter:blur(4px);
}
.map-hint{position:absolute;top:12px;right:12px;left:12px;z-index:10;text-align:center;
  background:rgba(10,40,28,.58);backdrop-filter:blur(4px);color:#EAF3EE;font-size:12.5px;
  padding:9px 14px;border-radius:999px;pointer-events:none;
  animation:slideIn .35s var(--ease) both}
.map-coords{position:absolute;bottom:10px;right:10px;z-index:10;
  font-family:"Outfit",monospace;font-size:12px;
  background:rgba(6,78,59,.85);color:var(--gold-soft);
  padding:6px 12px;border-radius:8px;
  display:flex;gap:7px;align-items:center;pointer-events:none;
  backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* map instructions row below the map */
.map-instructions{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:11px 14px;
  background:var(--cream-2);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  font-size:12.5px;color:var(--muted);
}
.map-instr-item{display:flex;align-items:center;gap:7px}
.map-instr-icon{display:grid;place-items:center;color:var(--emerald-900);flex:0 0 auto}

/* ============ FOOTER NAV ============ */
.foot{position:relative;z-index:5;display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:16px clamp(26px,4vw,60px);background:rgba(250,251,248,.85);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
.btn{font-family:inherit;font-weight:700;font-size:15px;border-radius:var(--r-md);cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:1.5px solid transparent;transition:all .18s var(--ease)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--emerald-900);color:#fff;
  box-shadow:0 2px 8px rgba(6,78,59,.22), inset 0 1px 0 rgba(255,255,255,.10)}
.btn-primary:hover{background:var(--emerald-850);box-shadow:0 4px 16px rgba(6,78,59,.30);transform:translateY(-1px)}
.btn-primary .arr{transition:transform .3s var(--ease)}
.btn-primary:hover .arr{transform:translateX(-4px)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--paper);border-color:var(--muted-2)}
.btn-ghost.hidden{visibility:hidden}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-gold{background:linear-gradient(165deg,var(--gold-soft),var(--gold) 60%,var(--gold-deep));color:#3a2c0c;
  box-shadow:0 10px 24px rgba(169,136,63,.34), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(169,136,63,.42)}
.foot .spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* commitment */
.pledge{display:flex;gap:13px;align-items:flex-start;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:18px;cursor:pointer;transition:all .25s var(--ease)}
.pledge:hover{border-color:var(--line-2)}
.pledge.on{border-color:var(--emerald-700);background:rgba(17,96,74,.05)}
.cbox{width:24px;height:24px;border-radius:7px;border:1.8px solid var(--line-2);flex:0 0 auto;display:grid;place-items:center;
  background:var(--field);transition:all .25s var(--ease);margin-top:1px}
.pledge.on .cbox{background:linear-gradient(160deg,var(--emerald-700),var(--emerald-600));border-color:transparent}
.cbox svg{opacity:0;transform:scale(.5);transition:.25s var(--ease);color:#fff}
.pledge.on .cbox svg{opacity:1;transform:none}
.pledge .pt{font-size:14px;line-height:1.85;color:var(--ink-2)}

/* ============ PAYMENT ============ */
.pay-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
@media (max-width:720px){.pay-grid{grid-template-columns:1fr}}
.summary{background:linear-gradient(160deg,var(--emerald-850),var(--emerald-900));color:#EAF3EE;
  border-radius:var(--r-xl);padding:26px;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.summary .grain{position:absolute;inset:0;opacity:.06;background-image:radial-gradient(rgba(255,255,255,.8) .5px,transparent .6px);background-size:7px 7px}
.summary h3{font-size:15px;color:var(--gold-soft);font-weight:700;margin-bottom:18px;position:relative}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.12);position:relative;font-size:14px}
.sum-row .v{font-weight:700;color:#fff}
.sum-total{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px;position:relative}
.sum-total .lbl{font-size:13px;color:rgba(226,239,232,.7)}
.sum-total .amt{font-size:34px;font-weight:800;color:#fff;font-feature-settings:"tnum"}
.sum-total .amt small{font-size:15px;font-weight:600;color:var(--gold-soft)}
.secure{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;color:rgba(226,239,232,.65);position:relative}

.methods{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.method{flex:1;min-width:84px;cursor:pointer;border:1.5px solid var(--line);background:var(--paper);
  border-radius:12px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:all .25s var(--ease)}
.method:hover{border-color:var(--line-2)}
.method.on{border-color:var(--emerald-700);box-shadow:0 0 0 3px rgba(17,96,74,.1)}
.method .mlogo{height:22px;display:grid;place-items:center}
.method .mname{font-size:11px;font-weight:700;color:var(--ink-2)}

/* credit card preview */
.cardview{position:relative;height:210px;border-radius:18px;padding:22px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#13503D,#0B3A2C 70%);box-shadow:var(--shadow-lg);margin-bottom:20px;
  transition:transform .3s var(--ease)}
.cardview .cv-grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;
  background:radial-gradient(120% 90% at 100% 0%, rgba(199,163,90,.5), transparent 50%)}
.cardview .cv-chip{width:44px;height:34px;border-radius:7px;background:linear-gradient(135deg,#E6CF8E,#C7A35A);position:relative;z-index:2}
.cardview .cv-brand{position:absolute;top:22px;left:22px;z-index:2;font-weight:800;letter-spacing:1px;font-size:15px}
.cardview .cv-num{position:absolute;bottom:62px;right:22px;left:22px;z-index:2;font-family:"Outfit",monospace;
  font-size:21px;letter-spacing:3px;direction:ltr;text-align:left}
.cardview .cv-foot{position:absolute;bottom:20px;right:22px;left:22px;z-index:2;display:flex;justify-content:space-between;direction:ltr}
.cardview .cv-foot .cap{font-size:8.5px;letter-spacing:.12em;opacity:.6;text-transform:uppercase}
.cardview .cv-foot .val{font-size:13px;font-weight:600;margin-top:2px;font-family:"Outfit"}

/* receipt / success */
.success{max-width:560px;margin:0 auto;text-align:center;padding:30px 0}
.checkwrap{width:104px;height:104px;border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle,rgba(30,138,95,.14),transparent 70%)}
.checkwrap .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(30,138,95,.25)}
.checkwrap .disc{width:74px;height:74px;border-radius:50%;background:linear-gradient(160deg,var(--ok),var(--emerald-700));
  display:grid;place-items:center;box-shadow:0 14px 30px rgba(20,110,75,.4)}
.checkwrap svg{width:38px;height:38px;color:#fff}
.success h2{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.success > p{color:var(--muted);font-size:15px;line-height:1.9;margin-top:10px;max-width:46ch;margin-inline:auto}
.receipt{margin-top:28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);text-align:right;overflow:hidden}
.receipt .rh{padding:20px 24px;background:linear-gradient(160deg,var(--emerald-850),var(--emerald-900));color:#fff;
  display:flex;align-items:center;justify-content:space-between}
.receipt .rh .rt{font-weight:700;font-size:15px}
.receipt .rh .rno{font-family:"Outfit";font-size:13px;color:var(--gold-soft);direction:ltr}
.receipt .rb{padding:8px 24px 18px}
.rrow{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px dashed var(--line);font-size:14px}
.rrow:last-child{border-bottom:none}
.rrow .rk{color:var(--muted)}
.rrow .rv{font-weight:700;color:var(--ink-2)}
.rrow .rv.paid{color:var(--ok);display:inline-flex;align-items:center;gap:6px}
.success-actions{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}

/* responsive: collapse aside on small screens */
@media (max-width:880px){
  .shell,.shell.aside-left{grid-template-columns:1fr}
  .aside{display:none}
  .topbar .mini-brand{display:flex}
}

/* number-input cleanup */
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* compact density */
.dense .grid{gap:13px}
.dense .inp input,.dense .inp textarea,.dense .sel-btn{padding:11px 13px;font-size:14px}
.dense .stage{padding-top:18px;padding-bottom:22px}
.dense .step-head{margin-bottom:18px}
.dense .chip{padding:11px 13px}
.dense .field > label{margin-bottom:6px}

/* ============ SINGLE-PAGE LAYOUT ============ */
.page{min-height:100vh;display:flex;flex-direction:column;
  background-color:#FBFCF9;
  background-image:
    radial-gradient(ellipse 100% 65% at 100% 0%, rgba(11,94,72,.06), transparent 52%),
    radial-gradient(ellipse 85% 55% at 0% 100%, rgba(199,163,90,.065), transparent 50%),
    repeating-linear-gradient(128deg,transparent 0 36px,rgba(11,94,72,.018) 36px 37px),
    repeating-linear-gradient(-128deg,transparent 0 36px,rgba(6,78,59,.014) 36px 37px),
    radial-gradient(circle at 1px 1px,rgba(11,94,72,.03) 1px,transparent 1.5px);
  background-size:auto,auto,auto,auto,20px 20px}
.page::before{content:"";position:fixed;inset:-50%;pointer-events:none;opacity:.30;z-index:0;
  background:conic-gradient(from 210deg at 50% 50%,transparent 0deg,rgba(11,94,72,.04) 72deg,transparent 144deg,rgba(199,163,90,.035) 216deg,transparent 288deg,rgba(11,94,72,.03) 360deg)}

/* hero */
.hero{position:relative;overflow:hidden;color:#EAF3EE;z-index:1;
  background:
    radial-gradient(120% 120% at 88% 0%, rgba(199,163,90,.18), transparent 46%),
    radial-gradient(120% 130% at 8% 120%, rgba(21,121,93,.5), transparent 55%),
    linear-gradient(160deg, var(--panel-a) 0%, var(--panel-b) 64%, #0A4636 100%)}
.hero__map{position:absolute;inset:0;opacity:.45;mix-blend-mode:soft-light;pointer-events:none}
.hero__grain{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.8) .5px, transparent .6px);background-size:7px 7px}
.hero__glow{position:absolute;width:46vmax;height:46vmax;border-radius:50%;top:-22vmax;left:-10vmax;
  background:radial-gradient(circle, rgba(199,163,90,.18), transparent 60%);pointer-events:none;
  animation:floaty calc(16s / var(--motion)) ease-in-out infinite alternate}
.hero__inner{position:relative;z-index:2;max-width:1000px;margin:0 auto;width:100%;
  padding:clamp(24px,3.5vw,40px) clamp(22px,4vw,48px) clamp(28px,3.5vw,40px)}
.hero__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hero__head{margin-top:clamp(24px,4vw,42px);max-width:680px}
.hero .eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold-soft);font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:16px}
.hero .eyebrow::before{content:"";width:34px;height:1.5px;background:linear-gradient(90deg,var(--gold),transparent)}
.hero h1{font-size:clamp(27px,3.4vw,44px);line-height:1.22;font-weight:800;color:#fff;letter-spacing:-.6px}
.hero h1 .g{color:var(--gold-soft)}
.hero__lede{margin-top:16px;color:rgba(226,239,232,.82);font-size:clamp(14px,1.1vw,16px);line-height:1.95;max-width:56ch}
.hero-stats{display:flex;align-items:center;gap:clamp(18px,3.5vw,46px);margin-top:clamp(22px,3vw,32px);flex-wrap:wrap}
.hero-stats .stat{text-align:right}
.hero-stats .stat .k{font-size:10px;letter-spacing:.2em;color:rgba(216,188,132,.85);font-weight:700}
.hero-stats .stat .v{font-size:clamp(23px,2.3vw,31px);font-weight:800;color:#fff;margin:2px 0;font-feature-settings:"tnum"}
.hero-stats .stat .l{font-size:11.5px;color:rgba(226,239,232,.6)}
.hero-stats .vdiv{width:1px;align-self:stretch;background:rgba(255,255,255,.14)}

/* sticky section nav */
.secnav{position:sticky;top:0;z-index:20;background:rgba(247,250,244,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.secnav__in{max-width:1000px;margin:0 auto;padding:0 clamp(22px,4vw,48px);position:relative;
  display:flex;align-items:center;gap:8px;height:62px;overflow-x:auto;scrollbar-width:none}
.secnav__in::-webkit-scrollbar{display:none}
.secnav button{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;background:none;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--muted);padding:8px 15px;border-radius:999px;
  border:1.5px solid transparent;transition:all .25s var(--ease);cursor:pointer;white-space:nowrap}
.secnav button .nn{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11px;
  background:var(--cream-3);color:var(--muted);transition:all .25s}
.secnav button:hover{color:var(--ink-2);background:var(--paper)}
.secnav button.active{color:var(--emerald-800);background:rgba(17,96,74,.07);border-color:rgba(17,96,74,.18)}
.secnav button.active .nn{background:linear-gradient(160deg,var(--emerald-700),var(--emerald-600));color:#fff}
.secnav button.ok .nn{background:linear-gradient(160deg,var(--gold-soft),var(--gold));color:#0C3B2D}
.secnav__prog{position:absolute;bottom:-1px;right:0;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--emerald-600));transition:width .5s var(--ease)}

/* content column */
.content{position:relative;z-index:1;max-width:1000px;margin:0 auto;width:100%;
  padding:clamp(24px,3.5vw,40px) clamp(22px,4vw,48px) 30px;flex:1}

/* section card */
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);padding:clamp(22px,3vw,36px);margin-bottom:24px;scroll-margin-top:80px;
  transform:translateY(22px);transition:transform .6s var(--ease-out)}
.card.in{transform:none}
.card__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.card__num{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-weight:800;font-size:18px;color:var(--emerald-800);
  background:linear-gradient(160deg,rgba(199,163,90,.16),rgba(17,96,74,.08));border:1px solid var(--line)}
.card__t .eb{display:flex;align-items:center;gap:9px;color:var(--gold-deep);font-weight:700;font-size:12px;letter-spacing:.04em;margin-bottom:7px}
.card__t .eb::before{content:"";width:24px;height:1.5px;background:linear-gradient(90deg,var(--gold),transparent)}
.card__t h2{font-size:clamp(20px,2.2vw,26px);font-weight:800;color:var(--ink);letter-spacing:-.4px}
.card__t p{margin-top:7px;color:var(--muted);font-size:14px;line-height:1.75;max-width:58ch}

/* sticky submit / pay bar */
.paybar{position:sticky;bottom:0;z-index:18;margin-top:6px;
  background:rgba(247,250,244,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(14,46,34,.07)}
.paybar__in{max-width:1000px;margin:0 auto;padding:15px clamp(22px,4vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.paybar .tot{display:flex;align-items:baseline;gap:10px}
.paybar .tot .lbl{font-size:13px;color:var(--muted)}
.paybar .tot .amt{font-size:26px;font-weight:800;color:var(--ink);font-feature-settings:"tnum"}
.paybar .tot .amt small{font-size:14px;color:var(--gold-deep);font-weight:700}
.page-foot{position:relative;z-index:1;text-align:center;padding:20px;color:var(--muted-2);font-size:12px}

/* success as full page */
.success-page{position:relative;z-index:1;max-width:620px;margin:0 auto;width:100%;
  padding:clamp(30px,5vw,60px) clamp(22px,4vw,48px)}