/* ================= add-puja: one lamp, three small steps =================
   Same idiom as the reviews sheet (03-reviews/reviews.css) so the two can merge into one sheet component.
   Base rules are the phone (390 px). Wider screens come in min-width queries at the end. */
.apsheet [hidden],.apdock[hidden],.apdock [hidden],.apask[hidden],#gmhelp [hidden]{display:none!important}
html:has(.apsheet[open]){overflow:hidden}

/* ---------- the lamp: one pill at the foot of the finder ---------- */
.apcta{display:flex;justify-content:center;width:100%;min-height:48px;margin:14px 0 0;padding:15px 24px;font-size:1.05rem;box-shadow:0 8px 30px rgba(255,180,80,.35)}
#gmraw{min-height:120px;margin:10px 0 0;font-size:.85rem}

/* ---------- sheet: bottom sheet on phones ---------- */
.apsheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:88dvh;padding:0;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;color:var(--ink);
  background:linear-gradient(180deg,#420a1b,#20030b 70%);box-shadow:0 -20px 60px rgba(0,0,0,.55)}
.apsheet::backdrop{background:rgba(42,4,16,.7);backdrop-filter:blur(6px)}
.apsheet[open]{animation:apup .26s ease-out}
.apsheet[open]::backdrop{animation:apfade .26s ease-out}
.apsheet.out{animation:apdown .18s ease-in forwards}
.apsheet.out::backdrop{animation:apfadeout .18s ease-in forwards}
@keyframes apup{from{transform:translateY(100%)}}
@keyframes apdown{to{transform:translateY(100%)}}
@keyframes apfade{from{opacity:0}}
@keyframes apfadeout{to{opacity:0}}

.apform{position:relative;display:grid;gap:12px;padding:10px 18px calc(20px + env(safe-area-inset-bottom))}
.aphandle{justify-self:center;width:36px;height:4px;border-radius:2px;background:rgba(255,210,122,.45)}
.apx{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);font:inherit;font-size:1.1rem;cursor:pointer;opacity:.8}
.apx:hover,.apx:focus-visible{opacity:1;background:rgba(255,255,255,.08)}
.apidle{display:grid;gap:12px}
.apsheet h3{font-size:1.35rem;line-height:1.5;padding:.15em 44px 0 0;color:var(--gold);font-weight:400}

/* ---------- the rail: ১ নাম · ২ জায়গা · ৩ পাঠান ---------- */
.aprail{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;list-style:none}
.aprail li{display:flex;align-items:center;gap:7px;padding-top:8px;border-top:3px solid rgba(255,210,122,.18);font-size:.86rem;color:rgba(255,244,224,.6)}
.aprail b{display:grid;place-items:center;width:28px;height:28px;padding-top:.14em;border-radius:50%;border:1px solid var(--line);font-size:1rem;line-height:1;font-weight:400;color:var(--gold)}
.aprail li[aria-current]{border-color:var(--gold);color:#ffe9b0;font-weight:600}
.aprail li[aria-current] b{background:linear-gradient(135deg,var(--gold),var(--gold2));border-color:transparent;color:#3a0512;box-shadow:0 0 16px rgba(255,170,60,.55)}
.aprail li.done{border-color:rgba(255,210,122,.6);color:#ffe9b0}
.apback{justify-self:start;min-height:44px;margin:-6px 0 -8px;padding:0 4px;border:0;background:none;color:var(--gold);font:inherit;font-size:.9rem;cursor:pointer}
.apback:focus-visible,.aplink:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ---------- steps and fields ---------- */
.apstep{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0;animation:apstep .22s ease-out}
@keyframes apstep{from{opacity:0;transform:translateX(14px)}}
.apvh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.aplbl{font-size:.92rem;font-weight:600;color:#ffe9b0}
.aplbl small{font-weight:400;opacity:.7}
.apsheet input.plain,.apsheet select{min-height:48px}
.apsheet input[aria-invalid="true"],.apsheet select[aria-invalid="true"]{border-color:#ff9a86}
.aprow{display:grid;gap:10px}
.apfield{display:grid;gap:8px;min-width:0}
.aprow select{min-width:0;width:100%}
.approb,.apfail{font-size:.86rem;line-height:1.55;color:#ffb8a8}
.aphint,.apfine{font-size:.8rem;line-height:1.6;opacity:.7}
.apfine{text-align:center;opacity:.6}
.apdup{display:grid;gap:6px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,210,122,.08);font-size:.88rem;line-height:1.55;color:#ffe9b0}
.apdup.need{border-color:#ff9a86;box-shadow:0 0 0 1px #ff9a86}
.apchk{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600}
.apchk input{width:22px;height:22px;padding:0;accent-color:var(--gold2)}

/* ---------- step 2: three tall option rows ---------- */
.apopts{display:grid;gap:8px}
.apopt{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:0 10px;min-height:64px;padding:10px 14px;border-radius:16px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.apopt span{grid-row:span 2;font-size:1.5rem;text-align:center}
.apopt b{font-weight:600;color:#ffe9b0}
.apopt small{font-size:.8rem;opacity:.7}
.apopt:hover,.apopt[aria-expanded="true"]{border-color:var(--gold);background:rgba(255,210,122,.08)}
.apopt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.aplinkbox{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:-2px}
.aplinkbox .approb{grid-column:1/-1}
.apmsg{font-size:.86rem;line-height:1.55;color:#ffe9b0}
.apmsg.bad{color:#ffb8a8}
.apchosen{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:6px 6px 6px 14px;border-radius:16px;border:1px solid var(--gold);background:rgba(255,210,122,.08);font-size:.9rem;color:#ffe9b0}
.aplink{min-height:44px;padding:0 10px;border:0;background:none;color:var(--gold);font:inherit;font-size:.9rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- step 3: summary, send, frames ---------- */
.apsum{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:4px 0 0;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.25);font-size:.9rem;line-height:1.5}
.apsum dt{opacity:.7}
.apsum dd{margin:0;color:#ffe9b0;word-break:break-word}
.apnext{width:100%;min-height:48px;justify-content:center;padding:14px 24px}
.apnext:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.apdone{display:grid;justify-items:center;gap:16px;padding:40px 8px 26px;text-align:center}
.apdone .apdiya{scale:2.2;margin:10px 0 6px}
.apdone p.serif{font-size:1.25rem;line-height:1.7;color:#ffe9b0}
.apdone a.aplink{display:inline-flex;align-items:center}

/* ---------- the diya mark: unlit while under review, lit once approved ---------- */
.apdiya{position:relative;display:inline-block;flex:0 0 22px;width:22px;height:20px;margin-right:6px;vertical-align:-3px;pointer-events:none}
.apdiya::before{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:2px 2px 12px 12px;background:linear-gradient(#d9955e,#b5673a 55%,#5a2210)}
.apdiya::after{content:"";position:absolute;left:50%;bottom:7px;width:8px;height:12px;margin-left:-4px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#fff4d6,#ffc44d 50%,#ff7a1a);opacity:.22;filter:grayscale(.7)}
.apdiya.lit::after{opacity:1;filter:none;box-shadow:0 -2px 14px 5px rgba(255,166,60,.7);animation:apflick 2.6s ease-in-out infinite}
@keyframes apflick{50%{scale:1 1.12}}
.pin.apwait span{filter:grayscale(.75) brightness(.8);box-shadow:none;animation:none;border-style:dashed}

/* ---------- own card: badge, delete, the inline confirm line ---------- */
.apbadge{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:99px;border:1px dashed var(--gold);font-size:.72rem;font-weight:600;color:var(--gold);vertical-align:2px}
.card.apfresh{border-color:var(--gold)}
.apdel,.apask button{min-height:32px;padding:0 4px;border:0;background:none;color:#ffb8a8;font:inherit;font-size:.85rem;font-weight:500;cursor:pointer}
.apask{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:.85rem;color:#ffe9b0}
.apask .apyes{color:#ffb8a8;font-weight:700}
.apask .apno{color:var(--gold)}
.apdel:focus-visible,.apask button:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:6px}

/* ---------- dock bar: the sheet steps aside while the visitor taps the big map ---------- */
.apdock{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom) + var(--musicbar-h));z-index:60;display:flex;align-items:center;gap:8px;
  min-height:60px;padding:8px 8px 8px 18px;border-radius:22px;border:1px solid var(--gold);background:linear-gradient(180deg,#420a1b,#20030b);
  box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 24px rgba(255,170,60,.25);color:#ffe9b0;animation:apbar .25s ease-out;outline:none}
@keyframes apbar{from{opacity:0;transform:translateY(24px)}}
.apdock p{flex:1;font-size:.95rem;line-height:1.4}
.apdockgo{flex:1;min-height:44px;justify-content:center}
.apdock .apx{position:static;flex:0 0 44px}

/* ---------- wider phones: থানা and address share a row ---------- */
@media (min-width:430px){.aprow{grid-template-columns:1fr 1fr}}

/* ---------- tablet and up: the sheet becomes a centred card ---------- */
@media (min-width:700px){
  .apsheet{inset:0;margin:auto;max-width:520px;height:fit-content;border-bottom:1px solid var(--line);border-radius:26px}
  .apsheet[open]{animation:appop .26s ease-out}
  .apsheet.out{animation:appopout .18s ease-in forwards}
  .aphandle{display:none}
  .apform{padding:18px 24px 24px}
  .apdock{left:50%;right:auto;width:480px;margin-left:-240px}
  .apcta{width:fit-content;min-width:340px;margin:18px auto 0}
  @keyframes appop{from{opacity:0;transform:translateY(24px) scale(.98)}}
  @keyframes appopout{to{opacity:0;transform:translateY(16px) scale(.98)}}
}

/* ---------- reduced motion: no slide, fade only; no flame flicker ---------- */
@media (prefers-reduced-motion:reduce){
  .apsheet[open]{animation:apfade .2s ease-out!important}
  .apsheet.out{animation:apfadeout .18s ease-in forwards!important}
  .apstep,.apdock{animation:apfade .2s ease-out!important}
  .apdiya::after{animation:none!important}
}