/* ============ MoMPA Welcome Experience — Design Tokens (spec §1) ============ */
:root{
--mompa-purple:#4B168A; --mompa-purple-dark:#35105F; --mompa-purple-deep:#24113F;
--mompa-purple-soft:#F3ECFA; --mompa-purple-light:#F8F4FD; --mompa-purple-pale:#FAF7FD;
--mompa-orange:#F28A00; --mompa-orange-dark:#D86F00;
--mompa-gold:#D9A441; --mompa-gold-light:#FFF4DC;
--success:#168B5B; --success-bg:#ECF8F2;
--warning:#A96516; --warning-bg:#FFF7ED;
--danger:#B34A4A; --danger-bg:#FDF1F1;
--border-focus:#B99BD5;
--radius-control:8px; --radius-button:10px;
--shadow-modal:0 24px 70px rgba(36,17,63,.16);
--text-primary:#24113F; --text-secondary:#665E70; --text-muted:#8E8798;
--surface:#FFFFFF; --surface-soft:#FCFAF7; --page-bg:#FAF7F2;
--border:#E9E2EE; --border-soft:#F0EAF4;
--shadow-card:0 18px 50px rgba(54,22,91,.10);
--shadow-soft:0 8px 24px rgba(54,22,91,.07);
--radius-xl:28px; --radius-lg:20px; --radius-md:14px; --radius-sm:10px; --radius-pill:999px;
--container-max:1440px;
--font-head:'Fraunces',Georgia,serif;
--font-body:'Plus Jakarta Sans',Inter,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text-primary);
background:radial-gradient(circle at 85% 10%,rgba(242,138,0,.07),transparent 35%),var(--page-bg);
line-height:1.5;-webkit-font-smoothing:antialiased}
a,button{-webkit-tap-highlight-color:transparent;font-family:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--mompa-purple);outline-offset:2px}
svg{display:block}
.mwx-wrap{max-width:var(--container-max);margin:0 auto;padding:28px 16px calc(90px + env(safe-area-inset-bottom))}
/* ==================== HERO (§4) ==================== */
.mwx-hero{position:relative;display:grid;gap:10px 8px;padding:8px 4px 22px;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"eb art" "hh art" "sub sub"}
.hero-eyebrow{grid-area:eb;align-self:end}
.hero-h{grid-area:hh}
.hero-sub{grid-area:sub}
.hero-eyebrow{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--mompa-purple)}
.hero-h{font-family:var(--font-head);font-size:34px;line-height:1.08;font-weight:700;color:var(--mompa-purple-deep)}
.hero-h em{font-style:normal;color:var(--mompa-orange)}
.hero-h .hh{display:inline-block;vertical-align:middle;margin-left:6px}
.hero-h .hh svg{width:30px;height:30px}
.hero-sub{font-size:15px;line-height:1.55;color:var(--text-secondary);max-width:520px}
.hero-art{grid-area:art;width:150px;align-self:start;opacity:.95;pointer-events:none}
.hero-art svg{width:100%;height:auto}
/* ==================== MAIN CARD (§5) ==================== */
.mwx-card{
position:relative;background:var(--surface);
border:1px solid rgba(75,22,138,.08);border-radius:22px;
box-shadow:var(--shadow-card);overflow:hidden;
}
/* MOST CHOSEN (§6) */
.mc-ribbon{
position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;
height:38px;padding:0 20px 0 16px;margin:14px 0 0 14px;
background:var(--mompa-orange);color:#fff;font-size:12px;font-weight:800;letter-spacing:.05em;
border-radius:10px;
clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%);
}
.mc-ribbon svg{width:14px;height:14px}
/* Header (§7) */
.mc-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 16px 16px;border-bottom:1px solid var(--border-soft)}
.mh-ic{width:52px;height:52px;border-radius:50%;flex:none;background:var(--mompa-purple-soft);
display:grid;place-items:center;color:var(--mompa-purple)}
.mh-ic svg{width:26px;height:26px}
.mh-t{min-width:0;flex:1}
.mh-t b{display:block;font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.mh-t span{display:block;font-size:13px;line-height:1.5;color:var(--text-secondary);margin-top:2px}
.mh-meta{display:none;align-items:center;gap:22px}
.mh-meta .mm{display:flex;align-items:center;gap:9px}
.mh-meta .mm-ic{width:40px;height:40px;border-radius:50%;background:var(--mompa-purple-light);display:grid;place-items:center;color:var(--mompa-purple)}
.mh-meta .mm-ic svg{width:19px;height:19px}
.mh-meta b{display:block;font-size:14px;font-weight:700}
.mh-meta small{display:block;font-size:11px;color:var(--text-muted)}
.mh-price{text-align:right;flex:none}
.mh-price .sf{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--text-muted)}
.mh-price .amt{font-size:32px;font-weight:800;line-height:1;color:var(--mompa-purple);margin-top:3px}
.mh-price .amt .rs{font-family:var(--font-head);font-weight:600;margin-right:2px}
.mh-price .per{font-size:12px;color:var(--text-secondary);margin-top:2px}
/* ==================== SERVICE ITEMS ==================== */
.mc-body{display:grid;grid-template-columns:1fr}
.mc-col{padding:2px 16px}
.it{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--border-soft)}
.mc-col:last-child .it:last-child{border-bottom:none}
.it-ic{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
background:var(--mompa-purple-light);color:var(--mompa-purple)}
.it-ic.warm{background:var(--mompa-gold-light);color:var(--mompa-orange)}
.it-ic svg{width:21px;height:21px}
.it-b{min-width:0;flex:1}
.it-b b{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700}
.it-b .it-d{display:block;font-size:12px;line-height:1.45;color:var(--text-secondary);margin-top:2px}
.it-b .it-sub{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);margin-top:3px}
.it-b .it-sub svg{width:12px;height:12px;color:var(--mompa-purple)}
.it-r{flex:none;display:flex;align-items:center;gap:8px}
.b-incl{display:inline-flex;align-items:center;background:var(--success-bg);color:var(--success);
font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--radius-pill)}
.b-free{font-size:13px;font-weight:800;color:var(--success);letter-spacing:.03em}
.btn-chg,.btn-add{
display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;
background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-pill);
font-size:12.5px;font-weight:700;color:var(--mompa-purple);
transition:border-color 150ms ease,background 150ms ease;
}
.btn-chg:hover,.btn-add:hover{border-color:var(--mompa-purple)}
.btn-chg svg,.btn-add svg{width:14px;height:14px}
.btn-add.added{background:var(--success-bg);border-color:#CDEBDC;color:var(--success)}
.i-info{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:0;background:transparent;color:var(--text-muted)}
.i-info svg{width:16px;height:16px}
/* ==================== TOTAL (§16) ==================== */
.mc-total{
display:flex;align-items:center;gap:12px;min-height:64px;
background:#F7F1FC;border-radius:var(--radius-md);margin:12px 16px;padding:12px 14px;
}
.mt-ic{width:42px;height:42px;border-radius:50%;flex:none;background:#fff;display:grid;place-items:center;color:var(--mompa-purple)}
.mt-ic svg{width:20px;height:20px}
.mt-b{min-width:0;flex:1}
.mt-b b{display:block;font-size:14px;font-weight:700;color:var(--mompa-purple)}
.mt-b>span{display:block;font-size:11.5px;color:var(--text-secondary);margin-top:1px}
.mt-b b span{display:inline;font-size:inherit;color:inherit}
.mt-amt{font-size:26px;font-weight:800;color:var(--mompa-purple);white-space:nowrap;transition:opacity 180ms ease}
.mt-amt .rs{font-family:var(--font-head);font-weight:600}
/* ==================== ACTIONS (§17) ==================== */
.mc-actions{display:grid;grid-template-columns:1fr;gap:10px;padding:2px 16px 16px}
.mc-actions button,.mc-actions a{
height:52px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;
transition:transform 150ms ease,box-shadow 150ms ease;
}
.mc-actions button:hover,.mc-actions a:hover{transform:translateY(-1px)}
.a-custom{background:var(--mompa-purple);border:0;color:#fff;box-shadow:0 10px 24px rgba(75,22,138,.25)}
.a-custom svg{width:18px;height:18px}
.a-continue{background:var(--surface);border:1.5px solid var(--mompa-purple);color:var(--mompa-purple)}
.a-continue svg{width:17px;height:17px}
/* ==================== TIMING (§18) + TRUST (§19) ==================== */
.mwx-timing{
display:flex;gap:13px;align-items:flex-start;
background:#F7F1FC;border:1px solid var(--border-soft);border-radius:var(--radius-lg);
padding:15px 16px;margin-top:16px;
}
.tm-ic{width:44px;height:44px;border-radius:50%;flex:none;background:#fff;display:grid;place-items:center;color:var(--mompa-purple)}
.tm-ic svg{width:21px;height:21px}
.mwx-timing b{display:block;font-size:14px;font-weight:700}
.mwx-timing .tl{display:block;font-size:12.5px;font-weight:600;color:var(--text-primary);margin-top:3px}
.mwx-timing .tl i{font-style:normal;color:var(--text-muted);padding:0 6px}
.mwx-timing small{display:block;font-size:11.5px;line-height:1.5;color:var(--text-secondary);margin-top:3px}
.mwx-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px 6px;padding:16px 6px 0}
.mwx-trust div{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.mwx-trust svg{width:17px;height:17px;color:var(--mompa-purple);flex:none}
/* ==================== STICKY CART (§22, mobile) ==================== */
.mwx-cart{
position:fixed;left:0;right:0;bottom:0;z-index:60;
display:flex;align-items:center;gap:10px;
background:#fff;border-top:1px solid var(--border);
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
transform:translateY(110%);transition:transform 240ms ease;
}
.mwx-cart.on{transform:none}
.mwx-cart .cb{min-width:0;flex:1}
.mwx-cart .cb b{display:block;font-size:13px;font-weight:700}
.mwx-cart .cb span{display:block;font-size:11px;color:var(--text-muted)}
.mwx-cart .ca{font-size:19px;font-weight:800;color:var(--mompa-purple);white-space:nowrap}
.mwx-cart button{height:44px;padding:0 18px;border-radius:12px;border:0;background:var(--mompa-purple);color:#fff;font-size:13px;font-weight:700}
/* ==================== SHEET / MODAL (§10, §23) ==================== */
.ov{position:fixed;inset:0;z-index:80;background:rgba(28,12,48,.45);
opacity:0;pointer-events:none;transition:opacity 220ms ease}
.ov.on{opacity:1;pointer-events:auto}
.sheet{
position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:86vh;overflow:auto;
background:#fff;border-radius:20px 20px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));
transform:translateY(105%);visibility:hidden;pointer-events:none;
transition:transform 260ms cubic-bezier(.2,.8,.2,1),visibility 0s linear 260ms;
}
.sheet.on{transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
.sh-handle{width:32px;height:4px;border-radius:999px;background:#E3DAEA;margin:6px auto 14px}
.sheet h3{font-size:17px;font-weight:700;margin-bottom:4px}
.sheet .sh-sub{font-size:12px;color:var(--text-muted);margin-bottom:12px}
.opt{
display:flex;align-items:center;gap:12px;width:100%;text-align:left;
background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);
padding:13px 14px;margin-bottom:9px;transition:border-color 150ms,background 150ms;
}
.opt b{display:block;font-size:14px;font-weight:700}
.opt span{display:block;font-size:11.5px;color:var(--text-secondary);margin-top:1px}
.opt .op{margin-left:auto;flex:none;font-size:13.5px;font-weight:800;color:var(--mompa-purple);white-space:nowrap}
.opt .ock{width:22px;height:22px;border-radius:50%;flex:none;border:2px solid var(--border);display:grid;place-items:center;color:#fff}
.opt.sel{border-color:var(--mompa-purple);background:var(--mompa-purple-soft)}
.opt.sel .ock{background:var(--mompa-purple);border-color:var(--mompa-purple)}
.opt .ock svg{width:12px;height:12px}
.stp{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.stp span{font-size:13px;font-weight:600;color:var(--text-secondary);flex:1}
.stp button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--border);background:#fff;
font-size:19px;font-weight:700;color:var(--mompa-purple)}
.stp b{font-size:16px;min-width:26px;text-align:center}
.sh-sec{border-top:1px solid var(--border-soft);padding-top:12px;margin-top:6px}
.sh-sec>b{display:block;font-size:13px;font-weight:700;margin-bottom:9px;color:var(--text-primary)}
.sh-done{width:100%;height:52px;border-radius:12px;border:0;background:var(--mompa-purple);color:#fff;
font-size:15px;font-weight:700;margin-top:10px;position:sticky;bottom:0}
.sh-note{font-size:11px;line-height:1.5;color:var(--text-muted);background:var(--surface-soft);
border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px 12px;margin:4px 0 10px}
/* ==================== WELCOME STAYS — ultra-premium room selection ==================== */
.sheet-lg{display:flex;flex-direction:column;padding:0;box-shadow:var(--shadow-modal)}
.ws-head{position:sticky;top:0;z-index:5;background:#fff;padding:8px 18px 10px;border-bottom:1px solid var(--border-soft)}
.ws-head .sh-handle{margin:6px auto 10px}
.ws-head h3{font-size:19px;font-weight:700;line-height:1.25;margin-bottom:2px}
.ws-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:var(--radius-control);border:1px solid var(--border);
background:#fff;color:var(--text-secondary);display:grid;place-items:center}
.ws-x svg{width:15px;height:15px}
/* progress (§7) — chhote numbered dots, koi bade circles nahi */
.wsp{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.wsp .st{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--text-muted)}
.wsp .st i{width:21px;height:21px;border-radius:50%;font-style:normal;font-size:10px;font-weight:700;
display:grid;place-items:center;border:1.5px solid var(--border);color:var(--text-muted);background:#fff}
.wsp .st.done i{background:var(--mompa-purple-soft);border-color:var(--mompa-purple);color:var(--mompa-purple)}
.wsp .st.on{color:var(--mompa-purple)}
.wsp .st.on i{background:var(--mompa-purple);border-color:var(--mompa-purple);color:#fff}
.wsp .sep2{width:12px;height:1px;background:var(--border)}
.ws-body{flex:1;padding:14px 18px 8px}
.ws-h{font-size:14px;font-weight:700;line-height:1.3}
.ws-d{font-size:11.5px;line-height:1.45;color:var(--text-muted);margin:2px 0 12px}
.glbl{display:block;font-size:10px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;color:var(--text-muted);margin:12px 0 6px}
/* §4: RECTANGULAR segmented controls — pill NAHI */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.ch{height:38px;padding:0 12px;border-radius:var(--radius-control);border:1px solid var(--border);
background:#fff;font-size:12px;font-weight:700;color:var(--text-secondary);
display:inline-flex;align-items:center;gap:6px;transition:border-color 150ms var(--ease-premium,ease),background 150ms,color 150ms}
.ch.on{background:var(--mompa-purple-soft);border:1.5px solid var(--mompa-purple);color:var(--mompa-purple)}
.ch:disabled{opacity:.45;cursor:not-allowed}
.ch .ck{display:none;width:12px;height:12px}
.ch.on .ck{display:block}
/* §5-6: guest cards — compact premium */
#wsGuests{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
.gst{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 13px 13px}
.gst .gh{display:flex;align-items:center}
.gst .gh b{font-size:12.5px;font-weight:700}
.gst .gh em{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--text-light,#AAA3B0)}
.gst .glbl{margin:10px 0 6px}
.gst input{width:86px;height:36px;border:1px solid var(--border);border-radius:var(--radius-control);padding:0 10px;
font-family:inherit;font-size:12px;font-weight:600}
.gst input:focus{outline:none;border-color:var(--border-focus)}
/* compact stepper — 36px, 8px radius */
.wstp{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.wstp span{font-size:12.5px;font-weight:600;color:var(--text-secondary);flex:1}
.wstp button{width:38px;height:36px;border-radius:var(--radius-control);border:1px solid var(--border);background:#fff;
font-size:16px;font-weight:700;color:var(--mompa-purple)}
.wstp b{font-size:14px;min-width:24px;text-align:center}
/* §18: room list header + filters + sort */
.ws-fbar{position:sticky;top:86px;z-index:4;background:#fff;padding:8px 0 10px;border-bottom:1px solid var(--border-soft)}
.fb-top{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.fb-top b{font-size:14px;font-weight:700}
.fb-top span{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--text-muted)}
.fb-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fb-row .ch{height:34px;font-size:11.5px;padding:0 11px}
.ws-sort{margin-left:auto;height:34px;border:1px solid var(--border);border-radius:var(--radius-control);
background:#fff;font-family:inherit;font-size:11px;font-weight:600;color:var(--text-secondary);padding:0 6px}
/* §11: room cards — compact, shadow sirf hover par */
.ws-list{display:grid;grid-template-columns:1fr;gap:12px;padding:12px 0 6px}
.rc{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;
transition:box-shadow 150ms var(--ease-premium,ease)}
.rc:hover{box-shadow:var(--shadow-soft)}
.rc-ph{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#F1EBF6,#F7F1E6);cursor:zoom-in}
.rc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.rc-ph .rc-pc{position:absolute;left:9px;top:9px;display:inline-flex;align-items:center;gap:5px;
background:rgba(36,17,63,.82);color:#fff;font-size:9.5px;font-weight:700;padding:4px 8px;border-radius:6px}
.rc-ph .rc-pc svg{width:11px;height:11px}
.rc-ph .rc-ver{position:absolute;right:9px;top:9px;display:inline-flex;align-items:center;gap:4px;
background:var(--success-bg);color:var(--success);font-size:9.5px;font-weight:700;padding:4px 8px;border-radius:6px;border:1px solid #CDEBDC}
.rc-ph .rc-ver svg{width:11px;height:11px}
.rc-b{padding:11px 12px 12px}
.rc-b b{display:block;font-size:13.5px;font-weight:700}
.rc-b .rc-m{font-size:10px;font-weight:600;color:var(--text-secondary);margin-top:2px}
.rc-b .rc-av{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--success);margin-top:6px}
.rc-b .rc-av i{width:7px;height:7px;border-radius:50%;background:var(--success)}
.rc-b .rc-pr{font-size:18px;font-weight:800;color:var(--mompa-purple);margin-top:5px}
.rc-b .rc-pr small{font-size:10px;font-weight:600;color:var(--text-secondary)}
.rc-b .rc-mt{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--text-muted);margin-top:3px}
.rc-b .rc-mt svg{width:10px;height:10px;color:var(--mompa-gold)}
.rc-sel{width:100%;min-height:44px;margin-top:9px;border-radius:var(--radius-button);border:1px solid var(--mompa-purple);
background:#fff;color:var(--mompa-purple);font-size:12.5px;font-weight:700;transition:background 150ms}
.rc-sel:hover{background:var(--mompa-purple-soft)}
/* §20: skeletons */
@keyframes wsShim{0%{background-position:-200px 0}100%{background-position:200px 0}}
.shim{border-radius:14px;height:118px;
background:linear-gradient(90deg,#F3EEF7 25%,#FBF8FD 50%,#F3EEF7 75%);background-size:400px 100%;
animation:wsShim 1.1s linear infinite}
.ws-load{display:grid;gap:10px;padding:4px 0 10px}
.ws-load p{font-size:11px;font-weight:600;color:var(--text-muted);text-align:center}
.ws-done{font-size:11px;font-weight:600;color:var(--text-muted);text-align:center;padding:12px 0}
.ws-err{border:1px solid #F0D4D4;background:var(--danger-bg);border-radius:12px;padding:13px;text-align:center;
font-size:12px;color:var(--danger);margin:10px 0}
.ws-err button{margin-top:8px;height:38px;padding:0 14px;border-radius:var(--radius-control);border:1px solid var(--danger);
background:#fff;color:var(--danger);font-size:11.5px;font-weight:700}
.ws-empty{text-align:center;padding:20px 8px;color:var(--text-secondary);font-size:12.5px}
.ws-empty b{display:block;font-size:13.5px;color:var(--text-primary);margin-bottom:2px}
.ws-empty .chips{justify-content:center;margin-top:12px}
/* §17: selected room summary */
.ws-selroom{display:flex;gap:11px;align-items:center;border:1px solid var(--border);border-radius:12px;
padding:10px;background:#fff;margin-bottom:4px}
.ws-selroom img{width:72px;height:54px;object-fit:cover;border-radius:8px;flex:none}
.ws-selroom b{display:block;font-size:12.5px;font-weight:700}
.ws-selroom span{display:block;font-size:10px;font-weight:600;color:var(--text-secondary);margin-top:1px}
.ws-selroom button{margin-left:auto;flex:none;height:36px;padding:0 11px;border-radius:var(--radius-control);
border:1px solid var(--border);background:#fff;font-size:11px;font-weight:700;color:var(--mompa-purple)}
/* §14: bed tiles — 10px radius, ~86px */
.bedgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.bedt{height:86px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
border:1px solid var(--border);background:#fff;transition:border-color 150ms,background 150ms}
.bedt b{font-size:12px;font-weight:700;letter-spacing:.05em}
.bedt span{font-size:8.5px;font-weight:700;letter-spacing:.06em}
.bedt i{width:8px;height:8px;border-radius:50%}
.bedt.av{background:#F0FAF5;border-color:#BFE4D0;color:var(--success)}
.bedt.av i{background:var(--success)}
.bedt.sel{background:var(--mompa-purple-soft);border:1.5px solid var(--mompa-purple);color:var(--mompa-purple)}
.bedt.sel i{background:var(--mompa-purple)}
.bedt.oc{background:#F5F2F5;border-color:#E5DEE8;color:#9B919E;cursor:not-allowed}
.bedt.oc i{display:none}
/* §15: compact warning */
.bed-note{font-size:11px;font-weight:600;line-height:1.45;border-radius:9px;padding:9px 11px;margin:10px 0 4px}
.bed-note.warn{background:var(--warning-bg);color:var(--warning);border:1px solid #F1D9BC}
.bed-note.ok{background:var(--success-bg);color:var(--success);border:1px solid #CDEBDC}
/* §16: guest -> bed assignment */
.asg{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.asg div{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--text-secondary);
background:var(--surface-soft);border:1px solid var(--border-soft);border-radius:9px;padding:8px 11px}
.asg div b{color:var(--text-primary);font-size:11px}
.asg div svg{width:12px;height:12px;color:var(--mompa-purple)}
/* §26: sticky footer */
.ws-bar{position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--border-soft);
box-shadow:0 -6px 20px rgba(36,17,63,.05);
padding:10px 18px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.ws-bar .wt{min-width:0;flex:1}
.ws-bar .wt b{display:block;font-size:15px;font-weight:800;color:var(--mompa-purple)}
.ws-bar .wt span{display:block;font-size:10px;font-weight:600;color:var(--text-muted)}
.ws-bar>button{min-height:46px;padding:0 20px;border-radius:var(--radius-button);border:0;background:var(--mompa-purple);
color:#fff;font-size:12.5px;font-weight:700}
.ws-bar>button:disabled{opacity:.4;cursor:not-allowed}
/* §13: gallery lightbox */
.wlb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
background:rgba(20,10,30,.92);padding:18px}
.wlb.on{display:flex}
.wlb img{max-width:94vw;max-height:76vh;border-radius:12px;object-fit:contain;background:#20102E}
.wlb .wlb-x{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:var(--radius-control);border:0;
background:rgba(255,255,255,.14);color:#fff;font-size:17px}
.wlb .wlb-n{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
color:#EFE6F5;font-size:11px;font-weight:700;letter-spacing:.05em}
.wlb .wlb-a{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:var(--radius-control);
border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.wlb .wlb-a svg{width:16px;height:16px}
.wlb .wlb-p{left:14px}.wlb .wlb-nx{right:14px}
@media (min-width:768px){
.sheet-lg{width:860px;max-height:86vh;border-radius:20px}
.ws-head h3{font-size:22px}
.ws-h{font-size:15px}
#wsGuests{grid-template-columns:1fr 1fr}
.ws-list{grid-template-columns:1fr 1fr}
.ws-fbar{top:92px}
.rc-b b{font-size:14px}
.rc-b .rc-m{font-size:10.5px}
.rc-b .rc-pr{font-size:20px}
}
/* ---- date / time inputs ---- */
.tsec{border-top:1px solid var(--border-soft);margin-top:12px;padding-top:12px}
.trow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.trow label{display:block;border:1px solid var(--border);border-radius:var(--radius-control);padding:7px 10px;background:#fff}
.trow label i{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.035em;
text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.trow input{width:100%;border:0;background:transparent;font-family:inherit;font-size:12.5px;font-weight:700;
color:var(--text-primary);padding:0;min-height:22px}
.trow input:focus{outline:none}
.trow label:focus-within{border-color:var(--mompa-purple);box-shadow:0 0 0 3px rgba(75,22,138,.08)}
.cvnote.adv{display:flex;gap:8px;align-items:flex-start;background:var(--warning-bg);border-color:#F1D9BC;color:var(--warning)}
.cvnote.adv svg{width:14px;height:14px;flex:none;margin-top:1px}
.cvnote.adv b{color:var(--warning)}
/* ==================== CITY VISIT ==================== */
.cvp{display:grid;gap:8px;margin-bottom:2px}
.cvpit{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;
border:1px solid var(--border);border-radius:var(--radius-md);padding:11px 12px;transition:border-color 150ms,background 150ms}
.cvpit .ci{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
background:var(--mompa-purple-light);color:var(--mompa-purple)}
.cvpit .ci svg{width:18px;height:18px}
.cvpit .cb{min-width:0;flex:1}
.cvpit .cb b{display:block;font-size:12.5px;font-weight:700}
.cvpit .cb span{display:block;font-size:10.5px;color:var(--text-secondary);margin-top:1px}
.cvpit .cck{width:20px;height:20px;border-radius:6px;flex:none;border:1.5px solid var(--border);
display:grid;place-items:center;color:#fff}
.cvpit .cck svg{width:12px;height:12px;opacity:0;transition:opacity 150ms}
.cvpit.on{border-color:var(--mompa-purple);background:var(--mompa-purple-pale)}
.cvpit.on .ci{background:linear-gradient(145deg,#7B4BC4,#4B168A);color:#fff}
.cvpit.on .cck{background:var(--mompa-purple);border-color:var(--mompa-purple)}
.cvpit.on .cck svg{opacity:1}
#cvBody .vrow{padding:0;margin-bottom:2px}
.cvw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cvwit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;
border:1px solid var(--border);border-radius:var(--radius-control);background:#fff;padding:8px 6px;transition:border-color 150ms,background 150ms}
.cvwit b{font-size:11.5px;font-weight:700;color:var(--text-primary)}
.cvwit span{font-size:10px;font-weight:700;color:var(--success)}
.cvwit:last-child span{color:var(--warning)}
.cvwit.on{border:1.5px solid var(--mompa-purple);background:var(--mompa-purple-soft)}
.cvwit.on b{color:var(--mompa-purple)}
.cvsum{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-top:14px}
.cvsum div{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border-soft);
font-size:11.5px;font-weight:600;color:var(--text-secondary)}
.cvsum div:last-child{border-bottom:none}
.cvsum div b{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--text-primary)}
.cvsum div b.fr{color:var(--success)}
.cvsum div.tt{background:var(--mompa-purple-pale)}
.cvsum div.tt span{color:var(--mompa-purple);font-weight:700}
.cvsum div.tt b{font-size:15px;color:var(--mompa-purple)}
.cvrm{width:100%;height:44px;border-radius:var(--radius-button);border:1px solid var(--danger);
background:#fff;color:var(--danger);font-size:12.5px;font-weight:700;margin-top:8px}
.cvgrp{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:10px;background:#fff}
.cvgrp.sel{border-color:var(--mompa-purple);box-shadow:0 6px 18px rgba(75,22,138,.10)}
.cvgrp .cvpit{border:0;border-radius:0;margin:0;width:100%}
.cvgrp.sel .cvpit{background:var(--mompa-purple-pale)}
.cvpit .cvamt{margin-left:auto;flex:none;font-size:12px;font-weight:800;color:var(--mompa-purple);white-space:nowrap;margin-right:8px}
.cvwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms var(--ease-premium,ease)}
.cvgrp.sel .cvwrap{grid-template-rows:1fr}
.cvwrap>div{overflow:hidden;padding:0 12px}
.cvgrp.sel .cvwrap>div{padding:2px 12px 12px}
.cvwit span.nf{color:var(--text-muted)}
.cvwit span.wr{color:var(--warning)}
.cvnote{font-size:10.5px;line-height:1.5;color:var(--text-muted);background:var(--surface-soft);
border:1px solid var(--border-soft);border-radius:9px;padding:9px 11px;margin-top:4px}
.cvtot{display:flex;align-items:center;gap:10px;background:var(--mompa-purple-pale);
border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:11px 13px;margin-top:2px}
.cvtot span{font-size:12px;font-weight:700;color:var(--mompa-purple)}
.cvtot span em{font-style:normal;font-size:10px;font-weight:600;color:var(--text-muted);margin-left:4px}
.cvtot b{margin-left:auto;font-size:15px;font-weight:800;color:var(--mompa-purple)}
.sh-done:disabled{opacity:.45;cursor:not-allowed}
/* ==================== WELCOME FOOD — meal groups + checkboxes ==================== */
.mgrp{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:10px;background:#fff}
.mhead{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--border-soft)}
.mhead .mi{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center}
.mhead .mi svg{width:16px;height:16px}
.mhead b{font-size:12.5px;font-weight:800}
.mhead em{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--text-muted)}
.mhead em.inc{color:var(--success)}
.mh-am{background:#FFF4E3}.mh-am .mi{background:#FFE2BC;color:#C96F00}
.mh-gr{background:#EDF9F2}.mh-gr .mi{background:#D2F0E0;color:#12915C}
.mh-pu{background:#F4EEFC}.mh-pu .mi{background:#E4D6F8;color:#4B168A}
.mh-in{background:#EEF1FC}.mh-in .mi{background:#DCE2FA;color:#33409B}
.mh-go{background:#FFF8E6}.mh-go .mi{background:#F8E7B6;color:#A87400}
.mrow{display:grid;gap:0}
.mit{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:0;
border-bottom:1px solid var(--border-soft);padding:10px 12px;transition:background 150ms}
.mit:last-child{border-bottom:none}
.mit:hover{background:var(--surface-soft)}
.mit.on{background:var(--mompa-purple-pale)}
.mit .mck{width:20px;height:20px;border-radius:6px;flex:none;border:1.5px solid var(--border);
display:grid;place-items:center;color:#fff;transition:background 150ms,border-color 150ms}
.mit .mck svg{width:12px;height:12px;opacity:0;transition:opacity 150ms}
.mit.on .mck{background:var(--mompa-purple);border-color:var(--mompa-purple)}
.mit.on .mck svg{opacity:1}
.mit .mck.rd{border-radius:50%}
.mit .mck.rd i{width:8px;height:8px;border-radius:50%;background:transparent;display:block;transition:background 150ms}
.mit.on .mck.rd{background:#fff;border-color:var(--mompa-purple)}
.mit.on .mck.rd i{background:var(--mompa-purple)}
.mit .mb{min-width:0;flex:1}
.mit .mb b{display:block;font-size:12.5px;font-weight:700}
.mit .mb span{display:block;font-size:10.5px;color:var(--text-secondary);margin-top:1px}
.mit .mp{margin-left:auto;flex:none;font-size:12.5px;font-weight:800;color:var(--mompa-purple);white-space:nowrap}
.mit .mp.inc{font-size:10.5px;font-weight:700;color:var(--success)}
.msum{display:flex;align-items:center;gap:10px;background:var(--mompa-purple-pale);
border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:11px 13px;margin-top:2px}
.msum span{font-size:12px;font-weight:700;color:var(--mompa-purple)}
.msum span em{font-style:normal;font-size:10px;font-weight:600;color:var(--text-muted);margin-left:4px}
.msum b{margin-left:auto;font-size:15px;font-weight:800;color:var(--mompa-purple)}
/* ==================== PICKUP: premium location + colourful vehicle picker ==================== */
/* attractive sheet header */
.pu-hero{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--mompa-purple-deep),var(--mompa-purple));
border-radius:var(--radius-md);padding:13px 14px;margin:2px 0 14px;color:#fff;position:relative;overflow:hidden}
.pu-hero::after{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;
background:radial-gradient(circle,rgba(242,138,0,.35),transparent 65%);pointer-events:none}
.pu-hero .ph-ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
background:linear-gradient(145deg,#F7D879,#D99A16);color:#4B2600;box-shadow:0 5px 14px rgba(185,121,9,.35)}
.pu-hero .ph-ic svg{width:22px;height:22px}
.pu-hero b{display:block;font-size:14.5px;font-weight:800}
.pu-hero span{display:block;font-size:11px;color:#D9CBEA;margin-top:1px}
/* location group */
.pugrp{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:9px;background:#fff;
overflow:hidden;transition:border-color 160ms var(--ease-premium,ease),box-shadow 160ms}
.pugrp.sel{border-color:var(--mompa-purple);box-shadow:0 6px 18px rgba(75,22,138,.10)}
.puopt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#fff;border:0;padding:12px 13px}
.pugrp.sel .puopt{background:var(--mompa-purple-pale)}
/* real radio look */
.puopt .rdo{width:20px;height:20px;border-radius:50%;flex:none;border:2px solid var(--border);
display:grid;place-items:center;transition:border-color 150ms}
.puopt .rdo i{width:9px;height:9px;border-radius:50%;background:transparent;transition:background 150ms;display:block}
.pugrp.sel .puopt .rdo{border-color:var(--mompa-purple)}
.pugrp.sel .puopt .rdo i{background:var(--mompa-purple)}
.puopt .pb{min-width:0;flex:1}
.puopt .pb b{display:block;font-size:13px;font-weight:700}
.puopt .pb span{display:block;font-size:10.5px;color:var(--text-secondary);margin-top:1px}
.puopt .pp{margin-left:auto;flex:none;text-align:right;font-size:12.5px;font-weight:800;color:var(--mompa-purple);white-space:nowrap}
.puopt .pp em{display:block;font-style:normal;font-size:9px;font-weight:700;color:var(--text-muted);letter-spacing:.03em}
/* accordion reveal — sirf selected location par vehicles */
.vwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms var(--ease-premium,ease)}
.pugrp.sel .vwrap{grid-template-rows:1fr}
.vwrap>div{overflow:hidden}
.vhead{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--text-muted);padding:2px 13px 7px}
.vhead svg{width:11px;height:11px;color:var(--mompa-orange)}
.vrow{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 11px 12px}
.vch{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
min-height:82px;padding:9px 5px;border-radius:var(--radius-control);border:1px solid var(--border);
background:#fff;transition:border-color 150ms,background 150ms,transform 150ms}
.vch:hover:not(:disabled){transform:translateY(-1px)}
.vch .vi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;transition:transform 150ms}
.vch .vi svg{width:19px;height:19px}
.vch i{font-style:normal;font-size:10px;font-weight:700;color:var(--text-secondary)}
.vch b{font-size:11px;font-weight:800;color:var(--text-primary)}
/* colourful per-vehicle identity */
.vch.v-bike .vi{background:#E8F7EF;color:#12915C}
.vch.v-auto .vi{background:#FFF1DC;color:#E07C00}
.vch.v-car .vi{background:#EDE7FB;color:#4B168A}
.vch.on{border:1.5px solid var(--mompa-purple);background:var(--mompa-purple-soft)}
.vch.on i,.vch.on b{color:var(--mompa-purple)}
.vch.on .vi{transform:scale(1.06)}
.vch.v-bike.on .vi{background:linear-gradient(145deg,#2FBF7E,#12915C);color:#fff;box-shadow:0 5px 12px rgba(18,145,92,.32)}
.vch.v-auto.on .vi{background:linear-gradient(145deg,#FFB347,#E07C00);color:#fff;box-shadow:0 5px 12px rgba(224,124,0,.32)}
.vch.v-car.on .vi{background:linear-gradient(145deg,#7B4BC4,#4B168A);color:#fff;box-shadow:0 5px 12px rgba(75,22,138,.32)}
.vch .vtick{position:absolute;top:5px;right:5px;width:15px;height:15px;border-radius:50%;display:none;
place-items:center;background:var(--mompa-purple);color:#fff}
.vch .vtick svg{width:9px;height:9px}
.vch.on .vtick{display:grid}
.vch:disabled{opacity:.45;cursor:not-allowed}
.vch:disabled .vi{background:#F2EFF4;color:#A79FB0}
.vch:disabled b{color:var(--text-muted)}
/* ==================== ROOM TRANSPARENCY LAYER ==================== */
/* §1 selected-room block inside Stay item */
.selroom{display:flex;gap:11px;align-items:flex-start;width:100%;margin-top:8px}
.selroom .sr-ph{position:relative;width:84px;height:63px;border-radius:10px;overflow:hidden;flex:none;
border:1px solid var(--border);background:linear-gradient(135deg,#F1EBF6,#F7F1E6);cursor:zoom-in;padding:0}
.selroom .sr-ph img{width:100%;height:100%;object-fit:cover;display:block}
.selroom .sr-ph span{position:absolute;right:4px;bottom:4px;background:rgba(36,17,63,.82);color:#fff;
font-size:8.5px;font-weight:700;padding:2px 5px;border-radius:5px}
.selroom .sr-b{min-width:0;flex:1}
.selroom .sr-b b{display:block;font-size:13px;font-weight:700}
.selroom .sr-b .sr-m{font-size:10.5px;font-weight:600;color:var(--text-secondary);margin-top:1px}
.selroom .sr-b .sr-p{font-size:13px;font-weight:800;color:var(--mompa-purple);margin-top:3px}
.selroom .sr-b .sr-p small{font-size:9.5px;font-weight:600;color:var(--text-secondary)}
.selroom .sr-ph.noimg{display:grid;place-items:center;
background:linear-gradient(145deg,#F3ECFA,#FFF3E2);color:var(--mompa-purple)}
.selroom .sr-ph.noimg::before{content:"";width:26px;height:26px;
background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.noroom{display:flex;gap:9px;align-items:flex-start;background:var(--warning-bg);border:1px solid #F1D9BC;
border-radius:10px;padding:10px 12px;margin-top:8px}
.noroom svg{width:15px;height:15px;flex:none;color:var(--warning);margin-top:1px}
.noroom b{display:block;font-size:11.5px;font-weight:700;color:var(--warning)}
.noroom span{font-size:10.5px;line-height:1.45;color:var(--text-secondary)}
/* §30 transparency strip */
.tstrip{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tstrip span{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;
padding:3px 7px;border-radius:6px;background:var(--success-bg);color:var(--success);border:1px solid #CDEBDC}
.tstrip span.warn{background:var(--warning-bg);color:var(--warning);border-color:#F1D9BC}
.tstrip span svg{width:10px;height:10px}
.it-acts{display:flex;gap:7px;margin-top:9px}
.btn-det{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 12px;border-radius:var(--radius-control);
border:1px solid var(--border);background:#fff;font-size:11.5px;font-weight:700;color:var(--mompa-purple)}
.btn-det:hover{border-color:var(--mompa-purple)}
.btn-det svg{width:13px;height:13px}
/* §4/§31 room details sheet */
.rd-hero{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#F1EBF6;cursor:zoom-in;width:100%;padding:0;border:0;display:block}
.rd-hero img{width:100%;height:100%;object-fit:cover;display:block}
.rd-hero span{position:absolute;right:9px;bottom:9px;display:inline-flex;align-items:center;gap:5px;
background:rgba(36,17,63,.82);color:#fff;font-size:9.5px;font-weight:700;padding:4px 8px;border-radius:6px}
.rd-hero span svg{width:11px;height:11px}
.rd-t{margin-top:11px}
.rd-t b{display:block;font-size:15px;font-weight:700}
.rd-t .rd-m{font-size:10.5px;font-weight:600;color:var(--text-secondary);margin-top:2px}
.rd-t .rd-p{font-size:20px;font-weight:800;color:var(--mompa-purple);margin-top:4px}
.rd-t .rd-p small{font-size:10px;font-weight:600;color:var(--text-secondary)}
.rd-sec{border-top:1px solid var(--border-soft);margin-top:14px;padding-top:12px}
.rd-sec>.glbl{margin:0 0 8px}
/* fact rows §5-8,§15,§17 */
.facts{display:grid;grid-template-columns:1fr;gap:7px}
.fct{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--border);border-radius:10px;padding:9px 11px;background:#fff}
.fct .fi{width:28px;height:28px;border-radius:var(--radius-control);flex:none;display:grid;place-items:center;
background:var(--mompa-purple-light);color:var(--mompa-purple)}
.fct .fi svg{width:15px;height:15px}
.fct .fb{min-width:0;flex:1}
.fct .fb i{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.035em;
text-transform:uppercase;color:var(--text-muted)}
.fct .fb b{display:block;font-size:12.5px;font-weight:700;margin-top:1px}
.fct .fb small{display:block;font-size:10.5px;color:var(--text-secondary);margin-top:1px}
.fct.ok .fi{background:var(--success-bg);color:var(--success)}
.fct.ok .fb b{color:var(--success)}
.fct.pay .fi{background:var(--warning-bg);color:var(--warning)}
.fct.pay .fb b{color:var(--warning)}
/* §12/13 include & exclude lists */
.ilist{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.ilist div{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;font-weight:600;color:var(--text-primary)}
.ilist div svg{width:12px;height:12px;flex:none;margin-top:2px;color:var(--success)}
.ilist.no div{color:var(--text-secondary)}
.ilist.no div svg{color:var(--danger)}
/* §14 charges table */
.chg{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.chg div{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--border-soft);
font-size:11.5px;font-weight:600;color:var(--text-secondary)}
.chg div:last-child{border-bottom:none}
.chg div b{margin-left:auto;font-size:12px;font-weight:800;color:var(--text-primary);white-space:nowrap}
.chg div.free b{color:var(--success)}
/* §16 amenity chips */
.amn{display:flex;flex-wrap:wrap;gap:6px}
.amn span{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:var(--radius-control);
border:1px solid var(--border);background:#fff;font-size:11px;font-weight:600;color:var(--text-primary)}
.amn span svg{width:12px;height:12px;color:var(--mompa-purple)}
/* §19 photo strip */
.pstrip{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.pstrip::-webkit-scrollbar{display:none}
.pstrip button{position:relative;flex:none;width:104px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
border:1px solid var(--border);padding:0;background:#F1EBF6;cursor:zoom-in}
.pstrip img{width:100%;height:100%;object-fit:cover;display:block}
.pstrip em{position:absolute;left:0;right:0;bottom:0;font-style:normal;background:linear-gradient(transparent,rgba(24,10,40,.75));
color:#fff;font-size:8.5px;font-weight:700;padding:9px 4px 3px;text-align:center}
/* §36 house rules */
.hrules{display:grid;gap:6px}
.hrules div{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.45;color:var(--text-secondary)}
.hrules div svg{width:12px;height:12px;flex:none;margin-top:2px;color:var(--mompa-gold)}
.hrules div b{color:var(--text-primary);font-weight:700}
/* §37 suitable for */
.sfor{display:flex;flex-wrap:wrap;gap:6px}
.sfor span{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:var(--radius-control);
font-size:11px;font-weight:700;background:var(--success-bg);color:var(--success);border:1px solid #CDEBDC}
.sfor span.no{background:var(--danger-bg);color:var(--danger);border-color:#F0D4D4}
.sfor span svg{width:11px;height:11px}
/* §32 package breakdown */
.pkg{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:2px}
.pkg div{display:flex;align-items:baseline;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border-soft);font-size:11.5px}
.pkg div:last-child{border-bottom:none}
.pkg div span{color:var(--text-secondary);font-weight:600}
.pkg div em{font-style:normal;font-size:10px;color:var(--text-muted)}
.pkg div b{margin-left:auto;font-size:12.5px;font-weight:800;white-space:nowrap}
.pkg div.free b{color:var(--success)}
.pkg div.tot{background:var(--mompa-purple-pale);border-top:1px solid var(--border)}
.pkg div.tot span{color:var(--mompa-purple);font-weight:700;font-size:12.5px}
.pkg div.tot b{font-size:16px;color:var(--mompa-purple)}
/* §34 policy box */
.pol{display:flex;gap:10px;align-items:flex-start;background:var(--mompa-purple-pale);border:1px solid var(--border-soft);
border-radius:10px;padding:10px 12px;margin-top:10px}
.pol svg{width:15px;height:15px;flex:none;color:var(--mompa-purple);margin-top:1px}
.pol b{display:block;font-size:11.5px;font-weight:700}
.pol span{display:block;font-size:11px;font-weight:600;color:var(--text-primary);margin-top:2px}
.pol small{display:block;font-size:10.5px;line-height:1.45;color:var(--text-secondary);margin-top:3px}
.rd-skel{display:grid;gap:9px}
@media (min-width:768px){
.facts{grid-template-columns:1fr 1fr}
.ilist{grid-template-columns:1fr 1fr 1fr}
.selroom .sr-ph{width:104px;height:78px}
}
/* ==================== MOBILE REFINEMENTS ==================== */
@media (max-width:767px){
.it{gap:10px}
.it-ic{width:38px;height:38px}
.it-ic svg{width:18px;height:18px}
.btn-chg,.btn-add{padding:0 12px;font-size:12px}
.b-incl{font-size:10px;padding:4px 9px}
.mh-t{flex:1 1 calc(100% - 66px)}
.mh-price{margin-left:auto}
.mh-t b{font-size:20px}
}
/* ==================== TABLET / DESKTOP (§24) ==================== */
@media (min-width:768px){
.mwx-wrap{padding:44px 28px 60px}
.mwx-hero{padding-bottom:30px;grid-template-columns:1fr;grid-template-areas:"eb" "hh" "sub"}
.hero-art{position:absolute;right:0;top:0;width:340px}
.hero-eyebrow{font-size:14px}
.hero-h{font-size:44px}
.hero-sub{font-size:17px}
.mc-body{grid-template-columns:1fr 1fr;column-gap:0}
.mc-col{padding:4px 28px}
.mc-col:first-child{border-right:1px solid var(--border-soft)}
.mc-col:first-child .it:last-child{border-bottom:none}
.mc-head{padding:16px 28px 18px}
.mc-total{margin:14px 28px}
.mc-actions{grid-template-columns:1fr 1fr;padding:4px 28px 24px}
.mwx-trust{grid-template-columns:repeat(4,1fr);padding:18px 10px 0}
.mwx-cart{display:none}
.sheet{left:50%;right:auto;bottom:auto;top:50%;width:520px;max-height:82vh;
transform:translate(-50%,-46%) scale(.97);opacity:0;border-radius:20px;
transition:transform 220ms ease,opacity 220ms ease,visibility 0s linear 220ms}
.sheet.on{transform:translate(-50%,-50%) scale(1);opacity:1;transition-delay:0s}
.sh-handle{display:none}
}
@media (min-width:1200px){
.hero-h{font-size:56px}
.hero-sub{font-size:18px}
.hero-art{width:460px;top:-10px}
.mc-head{gap:20px}
.mh-ic{width:64px;height:64px}
.mh-ic svg{width:30px;height:30px}
.mh-t b{font-size:28px}
.mh-t span{font-size:15px}
.mh-meta{display:flex}
.mh-price .amt{font-size:40px}
.mh-price .per{font-size:14px}
.it-b b{font-size:16px}
.it-b .it-d{font-size:13px}
.mc-total{min-height:72px}
.mc-actions button,.mc-actions a{font-size:16px}
}
/* ============================================================================
BOOKING (Phase 3) — the guest-details form and the confirmation receipt.
These are the only markup added after the prototype was approved, so they get
their own block here rather than being wedged into the design's sections. They
reuse the same tokens, radii and type scale as every other sheet.
============================================================================ */
.gc{
border:1px solid var(--line);
border-radius:12px;
padding:14px;
background:#fff;
}
.gl{
display:block;
font:700 11px/1.4 var(--fs);
letter-spacing:.06em;
text-transform:uppercase;
color:var(--muted);
margin:0 0 5px;
}
.gi{
width:100%;
box-sizing:border-box;
font:500 14.5px/1.5 var(--fs);
color:var(--ink);
background:var(--page-bg);
border:1px solid var(--line);
border-radius:8px; /* small controls are 8px — radius lock */
padding:10px 12px;
outline:none;
transition:border-color .15s ease, box-shadow .15s ease;
}
.gi:focus{
border-color:var(--mompa-purple);
box-shadow:0 0 0 3px rgba(75,22,138,.12);
}
.gi::placeholder{ color:#A79EB4; }
/* Confirmation receipt: one row per frozen line item, then the total. */
.pk-row{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
padding:8px 0;
border-bottom:1px dashed var(--line);
font:500 13.5px/1.5 var(--fs);
color:var(--ink);
}
.pk-row:last-child{ border-bottom:0; }
.pk-row span{ color:var(--muted); }
.pk-row b{ font-weight:700; white-space:nowrap; }
.pk-total{
margin-top:4px;
padding-top:12px;
border-top:1.5px solid var(--line);
border-bottom:0;
font-size:15px;
}
.pk-total span{ color:var(--ink); font-weight:700; }
.pk-total b{ color:var(--mompa-purple); font-size:17px; }
/* =====================================================================
PHASE 4 — real stay dates, stay-time policy, and the services picker.
Same trap as Phase 3: markup shipped without styling renders as an
unstyled stack and reads as a broken page. Every class introduced by
the date picker, the policy strip and the services list is defined
here, using the existing tokens so nothing new is invented.
===================================================================== */
/* ---- stay dates -------------------------------------------------- */
/* The time column has to fit "12:00 AM" plus the browser's own clock affordance. At 96px
Chrome clipped it to "00 AM", which reads as a rendering bug and hides the AM/PM the
whole extra-day rule turns on. Measured against the widest value, not guessed. */
.staydates{
display:grid; grid-template-columns:1fr 132px; gap:8px; margin-top:6px;
}
.staydates label{
display:flex; flex-direction:column; gap:4px;
background:#fff; border:1.5px solid #E7E0F3; border-radius:12px;
padding:8px 10px; transition:border-color .16s ease, box-shadow .16s ease;
}
.staydates label:focus-within{
border-color:var(--mompa-purple);
box-shadow:0 0 0 3px rgba(75,22,138,.10);
}
.staydates label i{
font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.055em;
text-transform:uppercase; color:#8A7BA4;
}
.staydates label input{
border:0; outline:0; background:transparent; width:100%;
font:inherit; font-size:14px; font-weight:700; color:var(--ink);
padding:0; min-height:20px;
}
/* iOS renders an empty date input as a blank box — keep the caret visible.
Chrome lays the time value out in a fixed-width shadow field that ignores the input's
own width, so the first digit gets sheared off in a narrow column. Left-aligning the
value and giving the time inputs a slightly smaller face makes "09:00 AM" fit whole. */
.staydates label input::-webkit-date-and-time-value{ text-align:left; margin:0; }
.staydates label input[type="time"]{ font-size:13px; letter-spacing:-.1px; }
.staydates label input[type="time"]::-webkit-calendar-picker-indicator{ margin-left:0; padding:0; }
/* ---- stay-time policy strip -------------------------------------- */
.staypol{
margin-top:9px; padding:10px 12px; border-radius:12px;
background:#F6F2FC; border:1px solid #E7E0F3;
}
.staypol b{ display:block; font-size:12.5px; font-weight:800; color:var(--mompa-purple); }
.staypol small{ display:block; margin-top:3px; font-size:11.5px; line-height:1.5; color:#6C6180; }
/* The warning state is not decoration: it means the chosen times have added a
billable day, so it uses the orange token rather than the calm purple. */
.staypol.warn{ background:#FFF6EA; border-color:#F6D9AF; }
.staypol.warn b{ color:#9A5A00; }
.staypol.warn small{ color:#8A5A17; font-weight:600; }
.pol.warn{ background:#FFF6EA; border-color:#F6D9AF; }
/* ---- services picker --------------------------------------------- */
.svc{
display:flex; align-items:center; gap:10px; width:100%;
padding:11px 12px; margin-top:8px;
background:#fff; border:1.5px solid #EDE7F6; border-radius:13px;
text-align:left; font:inherit; color:var(--ink);
}
.svc-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.svc-b b{ font-size:13.5px; font-weight:800; line-height:1.25; }
.svc-b span{ font-size:11.5px; line-height:1.45; color:#6C6180; }
.svc-p{
flex:none; font-size:13px; font-weight:800; color:var(--mompa-purple);
white-space:nowrap;
}
/* a togglable paid service */
.svc-opt{ cursor:pointer; transition:border-color .16s ease, background .16s ease; }
.svc-opt:hover{ border-color:#D8CCEC; }
.svc-opt.on{ border-color:var(--mompa-purple); background:#F9F5FF; }
.svc-ck{
flex:none; width:22px; height:22px; border-radius:7px;
border:2px solid #D8CCEC; background:#fff;
display:grid; place-items:center; transition:all .16s ease;
}
.svc-ck svg{ width:13px; height:13px; color:#fff; opacity:0; transition:opacity .12s ease; }
.svc-opt.on .svc-ck{ background:var(--mompa-purple); border-color:var(--mompa-purple); }
.svc-opt.on .svc-ck svg{ opacity:1; }
/* the property-visit stepper */
.svc-stp{ flex:none; display:flex; align-items:center; gap:8px; }
.svc-stp button{
width:28px; height:28px; border-radius:9px; border:1.5px solid #E0D6F0;
background:#fff; color:var(--mompa-purple); font-size:16px; font-weight:800;
line-height:1; cursor:pointer; display:grid; place-items:center;
}
.svc-stp button:disabled{ opacity:.35; cursor:not-allowed; }
.svc-stp b{ min-width:18px; text-align:center; font-size:14px; font-weight:800; }
/* ---- per-unit labels --------------------------------------------- */
/* The unit is part of the price, not a footnote: "₹99 / person" must never be
mistaken for "₹99 / bed / night". */
.mp i{ font-style:normal; font-size:10px; font-weight:700; color:#8A7BA4; display:block; }
.pkg em i{ font-style:normal; color:#9A5A00; font-weight:700; }
/* Below ~360px two columns cannot hold both without clipping, so the time drops to its
own full-width row rather than being truncated. */
@media (max-width:359px){
.staydates{ grid-template-columns:1fr; }
}
/* ---- authoritative quote panel (confirmation sheet) --------------- */
/* The number here is the server's, not the page's estimate, so it is styled to read as a
statement rather than another editable figure. */
.wxq{
margin-top:12px; padding:12px; border-radius:13px;
background:#F6F2FC; border:1px solid #E7E0F3;
}
.wxq > b{ display:block; font-size:12.5px; font-weight:800; color:var(--mompa-purple); }
.wxq small{ display:block; margin-top:7px; font-size:11px; color:#6C6180; }
.wxq ul{ margin:6px 0 0; padding-left:18px; }
.wxq li{ font-size:12px; line-height:1.5; color:#8A5A17; }
.wxq-lines{ margin-top:8px; }
.wxq-row{
display:flex; align-items:baseline; justify-content:space-between; gap:10px;
padding:5px 0; font-size:12.5px;
}
.wxq-row span{ flex:1; min-width:0; color:var(--ink); }
.wxq-row em{ display:block; font-style:normal; font-size:11px; color:#6C6180; margin-top:1px; }
.wxq-row b{ flex:none; font-weight:800; white-space:nowrap; }
.wxq-total{
margin-top:4px; padding-top:9px; border-top:1px dashed #D8CCEC;
font-size:14px;
}
.wxq-total b{ color:var(--mompa-purple); font-size:16px; }
.wxq-err{ background:#FFF6EA; border-color:#F6D9AF; }
.wxq-err > b{ color:#9A5A00; }
.wxq-load .shim{ margin-top:6px; }
/* ---- "nothing configured yet" panel ------------------------------------- */
/* A new city has no food, no pickup, no city visit. That state has to look deliberate —
an empty sheet reads as a broken page, which is exactly how it was reported. */
.mempty{
margin-top:10px; padding:14px 14px; border-radius:13px;
background:#F6F2FC; border:1px solid #E7E0F3;
}
.mempty b{ display:block; font-size:13.5px; font-weight:800; color:var(--mompa-purple); }
.mempty span{ display:block; margin-top:5px; font-size:12px; line-height:1.55; color:#6C6180; }