/* ═══════════════════════════════════════════════════════════ SITHIYAM QUOTE BUILDER 2.0 — DESIGN SYSTEM All rules scoped under #s-qb2 to avoid collision with v1 ═══════════════════════════════════════════════════════════ */ /* ── QB2 Topbar — REMOVED (was redundant with pill nav) ── */ #s-qb2 .qb2-topbar{display:none !important} /* Status dropdown — now lives in sec-nav right side */ #s-qb2 .topbar-status-sel{ font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:4px 22px 4px 8px;border-radius:999px; background:var(--accent-seam);color:var(--accent); border:1px solid rgba(196,154,60,.25);cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23C49A3C'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 7px center;background-size:7px 4px; font-family:inherit;outline:none;flex-shrink:0; } #s-qb2 .topbar-status-sel:focus{box-shadow:0 0 0 2px rgba(196,154,60,.3)} #s-qb2 .topbar-status-sel option{background:var(--bg-1);color:var(--t1);text-transform:none;letter-spacing:0;font-weight:600} /* Save button in sec-nav */ #s-qb2 .topbar-save{ background:var(--accent-metal);color:var(--bg-1); border:none;border-radius:999px;padding:5px 14px; font-size:11px;font-weight:700;cursor:pointer; transition:transform .15s,box-shadow .15s;font-family:inherit;flex-shrink:0; } #s-qb2 .topbar-save:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(139,105,20,.3)} /* Classic button in sec-nav */ #s-qb2 .topbar-classic{ background:none;border:1px solid var(--b1); color:var(--t4);border-radius:999px;padding:4px 10px; font-size:10px;font-weight:700;cursor:pointer; transition:background .15s,color .15s;font-family:inherit;flex-shrink:0; } #s-qb2 .topbar-classic:hover{background:var(--b1);color:var(--t1)} /* Dirty chip in sec-nav */ #s-qb2 .qb2-dirty-chip{ display:none;font-size:10px;font-weight:700; padding:3px 8px;border-radius:999px;cursor:pointer;white-space:nowrap;flex-shrink:0; background:rgba(255,210,60,.12);color:#B8920A;border:1px solid rgba(255,210,60,.3); } #s-qb2 .qb2-dirty-chip.show{display:inline-flex;align-items:center} #s-qb2 .qb2-dirty-chip.saving{background:rgba(26,107,90,.1);color:var(--green);border-color:rgba(26,107,90,.25)} /* ── Section Nav (now the only top bar in QB2) ───────────── */ /* Pill nav is fixed at top:14px, height:48px → bottom at 62px. App has padding-top:80px. Sec-nav sticks just below pill nav. */ #s-qb2 .sec-nav{ position:relative;flex-shrink:0;z-index:250; background:rgba(247,244,239,.97);backdrop-filter:blur(12px); border-bottom:1px solid var(--b1); overflow:visible; /* allow tabs to scroll horizontally */ } /* Inner row — full-width, padding matches qb2-shell */ #s-qb2 .sec-nav__inner{ width:100%; display:flex;align-items:center;padding:0 24px; } @media(max-width:600px){#s-qb2 .sec-nav__inner{padding:0 12px}} /* Tabs scroll left */ #s-qb2 .sec-nav__tabs{ display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none; } #s-qb2 .sec-nav__tabs::-webkit-scrollbar{display:none} /* Actions pin right */ #s-qb2 .sec-nav__actions{ display:flex;align-items:center;gap:6px;padding-left:8px;flex-shrink:0; border-left:1px solid var(--b1);margin-left:4px; } @media(max-width:520px){ #s-qb2 .topbar-classic{display:none} /* Constrain DRAFT dropdown on mobile so tabs get more room */ #s-qb2 .topbar-status-sel{max-width:72px;font-size:10px;padding:4px 2px 4px 6px} #s-qb2 .sec-nav__actions{padding-left:4px;gap:4px} #s-qb2 .sec-tab{padding:12px 10px} } #s-qb2 .sec-tab{ padding:12px 16px;font-size:12px;font-weight:700;color:var(--t4); cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent; transition:color .15s,border-color .15s;position:relative; } #s-qb2 .sec-tab:hover{color:var(--t1)} #s-qb2 .sec-tab.active{color:var(--accent-dn);border-bottom-color:var(--accent)} #s-qb2 .sec-tab .tab-badge{ position:absolute;top:6px;right:4px;width:6px;height:6px;border-radius:50%; background:var(--accent); } /* ── QB2 screen: sidebar + main layout ── */ #s-qb2.on{ display:flex !important; flex-direction:row; /* sidebar left, main right */ height:calc(100vh - 80px); overflow:hidden; padding:0 !important; position:relative; /* anchor for FAB absolute positioning */ } @media(max-width:768px){ #s-qb2.on{ flex-direction:column; /* --mob-nav-h is 72px in styles.css (app bottom nav) */ height:calc(100vh - 72px - 0px); } } /* Hide old horizontal sec-nav — replaced by sidebar */ #s-qb2 .sec-nav{display:none !important} /* ── Sidebar ─────────────────────────────────────────────── */ #s-qb2 .qb2-sidebar{ width:192px;min-width:192px;flex-shrink:0; display:flex;flex-direction:column; border-right:1px solid var(--b1); background:var(--bg-1); height:100%;overflow-y:auto;overflow-x:hidden; } @media(max-width:768px){#s-qb2 .qb2-sidebar{display:none}} /* Sidebar brand strip */ #s-qb2 .qb2-sidebar-brand{ display:flex;align-items:center;gap:8px; padding:18px 16px 14px; border-bottom:1px solid var(--b1); flex-shrink:0; } #s-qb2 .qb2-sidebar-brandmark{font-size:16px;color:var(--accent)} #s-qb2 .qb2-sidebar-brandname{ font-family:var(--fd);font-size:16px;font-weight:700;color:var(--t1); } /* Sidebar navigation */ #s-qb2 .qb2-nav{padding:10px 0;flex:1} #s-qb2 .qb2-nav-item{ display:flex;align-items:center;gap:10px; padding:10px 16px;cursor:pointer; border-radius:0 12px 12px 0; margin:0 10px 2px 0; transition:background .15s,color .15s; color:var(--t4);position:relative; user-select:none; } #s-qb2 .qb2-nav-item:hover{background:var(--bg-2);color:var(--t1)} #s-qb2 .qb2-nav-item.active{ background:linear-gradient(135deg,rgba(196,154,60,.13),rgba(139,105,20,.06)); color:var(--accent-dn); border-right:3px solid var(--accent); margin-right:7px; } #s-qb2 .qb2-nav-icon{width:18px;text-align:center;font-size:13px;flex-shrink:0} #s-qb2 .qb2-nav-label{font-size:12px;font-weight:700;letter-spacing:.03em;flex:1} #s-qb2 .qb2-nav-badge{ width:6px;height:6px;border-radius:50%; background:var(--accent);flex-shrink:0; } /* Sidebar spacer + footer */ #s-qb2 .qb2-sidebar-spacer{flex:1} #s-qb2 .qb2-sidebar-footer{ padding:12px;border-top:1px solid var(--b1); display:flex;flex-direction:column;gap:7px;flex-shrink:0; } #s-qb2 .qb2-sidebar-footer .topbar-status-sel{ width:100%;border-radius:8px; background-position:right 8px center; } #s-qb2 .qb2-sidebar-footer .topbar-save, #s-qb2 .qb2-sidebar-footer .topbar-classic{ width:100%;border-radius:8px; justify-content:center;display:flex; } /* ── Main content area (right of sidebar) ─────────────── */ #s-qb2 .qb2-main-area{ flex:1;min-width:0; display:flex;flex-direction:column; overflow:hidden;height:100%; } /* ── Persistent hero (top of main area, all sections) ─── */ #s-qb2 .qb2-persistent-hero{ background:linear-gradient(135deg,var(--t1),#252016); padding:16px 24px;flex-shrink:0; border-bottom:1px solid rgba(255,255,255,.06); position:relative;overflow:hidden; } #s-qb2 .qb2-persistent-hero::after{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse at 75% 40%,var(--accent-seam),transparent 60%); pointer-events:none; } #s-qb2 .qb2-persistent-hero .qb2-ph-row{ display:flex;align-items:center;gap:10px;margin-bottom:3px;position:relative;z-index:1; } #s-qb2 .qb2-persistent-hero .client-hero-name{ font-family:var(--fd);font-size:22px;font-weight:700;color:#F5EFE3; } #s-qb2 .qb2-persistent-hero .client-hero-meta{ font-size:11px;color:rgba(255,255,255,.5); display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px; position:relative;z-index:1; } #s-qb2 .qb2-persistent-hero .client-kpis{ display:flex;gap:16px;flex-wrap:wrap;position:relative;z-index:1; } #s-qb2 .qb2-persistent-hero .client-kpi{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08); border-radius:10px;padding:7px 12px;text-align:center;min-width:56px; } #s-qb2 .qb2-persistent-hero .client-kpi-val{font-size:17px;font-weight:800;color:var(--accent)} #s-qb2 .qb2-persistent-hero .client-kpi-lbl{ font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.38);margin-top:1px; } @media(max-width:600px){ #s-qb2 .qb2-persistent-hero{padding:12px 14px} #s-qb2 .qb2-persistent-hero .client-hero-name{font-size:18px} #s-qb2 .qb2-persistent-hero .client-hero-meta{gap:8px;margin-bottom:8px} #s-qb2 .qb2-persistent-hero .client-kpis{gap:8px} } /* Hide the old in-section hero (now in shell) */ #s-qb2 .client-hero{display:none !important} /* ── Scroll container: inside main area ─────────────────── */ #s-qb2 .qb2-scroll-container{ flex:1;min-height:0; overflow-y:auto;-webkit-overflow-scrolling:touch; } /* ── Mobile bottom tab bar ──────────────────────────────── */ #s-qb2 .qb2-mob-tabs{display:none} @media(max-width:768px){ #s-qb2 .qb2-mob-tabs{ display:flex;flex-shrink:0; background:rgba(247,244,239,.97);backdrop-filter:blur(8px); border-top:1px solid var(--b1); height:58px;overflow-x:auto;scrollbar-width:none; } #s-qb2 .qb2-mob-tabs::-webkit-scrollbar{display:none} #s-qb2 .qb2-mob-tab{ flex:1;min-width:56px; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;cursor:pointer;padding:4px 2px; color:var(--t4);transition:color .15s; } #s-qb2 .qb2-mob-tab.active{color:var(--accent-dn)} #s-qb2 .qb2-mob-tab-icon{font-size:15px;line-height:1} #s-qb2 .qb2-mob-tab-label{font-size:8px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} /* Mobile save FAB — sits above the 58px mob-tabs */ #s-qb2 .qb2-mob-save-fab{ position:absolute;bottom:66px;right:14px; width:50px;height:50px;border-radius:50%; background:var(--accent-metal); color:var(--bg-1);border:none;font-size:22px;cursor:pointer; box-shadow:0 6px 20px rgba(139,105,20,.35); display:flex;align-items:center;justify-content:center; z-index:300;font-family:inherit; } } /* ── Shell ──────────────────────────────────────────────── */ #s-qb2 .qb2-shell{width:100%;padding:24px 24px 100px} @media(max-width:600px){#s-qb2 .qb2-shell{padding:16px 12px 80px}} /* ── Sections ───────────────────────────────────────────── */ #s-qb2 .qb2-section{display:none} #s-qb2 .qb2-section.active{display:block;animation:qb2FadeIn .3s ease} @keyframes qb2FadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* ── Cards ──────────────────────────────────────────────── */ #s-qb2 .card{ background:var(--bg-1);border:1px solid var(--b1);border-radius:18px; padding:20px;margin-bottom:14px;box-shadow:0 2px 8px var(--b0),0 1px 3px var(--b0);position:relative; } @media(max-width:600px){#s-qb2 .card{padding:14px 12px;border-radius:14px;margin-bottom:10px}} #s-qb2 .card-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);margin-bottom:12px} #s-qb2 .card-title{font-family:var(--fd);font-size:22px;font-weight:600;color:var(--t1);margin-bottom:4px} #s-qb2 .card-sub{font-size:12px;color:var(--t4);margin-bottom:16px} /* ── Forms ──────────────────────────────────────────────── */ #s-qb2 .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:600px){#s-qb2 .form-grid{grid-template-columns:1fr}} #s-qb2 .form-grid.three{grid-template-columns:1fr 1fr 1fr} @media(max-width:600px){#s-qb2 .form-grid.three{grid-template-columns:1fr 1fr}} #s-qb2 .form-grid.four{grid-template-columns:1fr 1fr 1fr 1fr} @media(max-width:600px){#s-qb2 .form-grid.four{grid-template-columns:1fr 1fr}} #s-qb2 .f{display:flex;flex-direction:column;gap:5px} #s-qb2 .f.full{grid-column:1/-1} #s-qb2 .f label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t4)} #s-qb2 .f input,#s-qb2 .f select,#s-qb2 .f textarea{ width:100%;font-size:14px;border:1px solid var(--b1);border-radius:12px; padding:10px 12px;background:var(--bg-1);color:var(--t1);outline:none; transition:border-color .15s,box-shadow .15s;font-family:inherit; } #s-qb2 .f input:focus,#s-qb2 .f select:focus,#s-qb2 .f textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-seam)} #s-qb2 .f textarea{resize:vertical;min-height:60px} @media(max-width:600px){#s-qb2 .f input,#s-qb2 .f select,#s-qb2 .f textarea{font-size:16px !important;min-height:44px}} /* ── Buttons ────────────────────────────────────────────── */ #s-qb2 .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600; cursor:pointer;transition:background .18s,border-color .18s,transform .18s;font-family:inherit;border:1px solid var(--b1); background:var(--bg-1);color:var(--t3); } #s-qb2 .btn:hover{background:#eee7dd;border-color:var(--b2);transform:translateY(-1px)} #s-qb2 .btn-gold{background:var(--accent-metal);color:var(--bg-1);border:none;box-shadow:0 4px 16px rgba(139,105,20,.2)} #s-qb2 .btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,105,20,.3)} #s-qb2 .btn-sm{padding:6px 12px;font-size:11px;font-weight:700} #s-qb2 .btn-green{background:var(--green-bg);color:var(--green);border-color:var(--green-bg)} #s-qb2 .btn-red{background:var(--red-bg);color:var(--red);border-color:var(--red-bg)} /* ── Tags ───────────────────────────────────────────────── */ #s-qb2 .tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:4px 10px;border-radius:999px;font-weight:800;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent} #s-qb2 .tag-green{background:var(--green-bg);color:var(--green);border-color:var(--green-bg)} #s-qb2 .tag-blue{background:var(--blue-bg);color:var(--blue);border-color:#c8d8ea} #s-qb2 .tag-amber{background:var(--accent-ghost);color:var(--accent-dn);border-color:var(--accent-ring)} #s-qb2 .tag-gold{background:var(--accent-ghost);color:var(--accent-dn);border-color:var(--accent-ring)} #s-qb2 .tag-red{background:var(--red-bg);color:var(--red);border-color:var(--red-bg)} #s-qb2 .tag-violet{background:#F7EFF1;color:#8B5E6A;border-color:#e8cfd4} /* ── Revenue Ticker ─────────────────────────────────────── */ #s-qb2 .ticker{ background:var(--bg-1);border:1px solid var(--b1);border-radius:16px; padding:14px 18px;margin-bottom:20px;box-shadow:0 2px 8px var(--b0),0 1px 3px var(--b0); } #s-qb2 .ticker-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} #s-qb2 .ticker-total{font-family:var(--fd);font-size:28px;font-weight:700;color:var(--t1);line-height:1} #s-qb2 .ticker-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)} #s-qb2 .ticker-pills{display:flex;gap:6px;flex:1;justify-content:flex-end;flex-wrap:wrap} #s-qb2 .ticker-pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--bg-1);border:1px solid var(--b1);color:var(--t3);white-space:nowrap} #s-qb2 .ticker-pill b{color:var(--t1)} #s-qb2 .ticker-bar{height:6px;border-radius:999px;background:var(--bg-2);margin-top:8px;overflow:hidden;display:flex} #s-qb2 .ticker-bar-seg{height:100%;transition:width .5s} #s-qb2 .ticker-budget{display:flex;justify-content:space-between;margin-top:5px;font-size:11px;color:var(--t4);font-weight:600} /* ── Divider ────────────────────────────────────────────── */ #s-qb2 .divider{display:flex;align-items:center;gap:8px;margin:16px 0} #s-qb2 .divider::before,#s-qb2 .divider::after{content:'';flex:1;height:1px;background:var(--b1)} #s-qb2 .divider span{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);white-space:nowrap} /* ── Journey River ──────────────────────────────────────── */ #s-qb2 .river{background:var(--bg-1);border:1px solid var(--b1);border-radius:18px;padding:18px 14px;margin-bottom:16px;box-shadow:0 2px 8px var(--b0),0 1px 3px var(--b0);overflow-x:auto;scrollbar-width:none} #s-qb2 .river::-webkit-scrollbar{display:none} #s-qb2 .river-track{display:flex;align-items:stretch;min-width:max-content;gap:0} /* Zone block */ #s-qb2 .river-zone{display:flex;flex-direction:column;min-width:100px;flex:1} #s-qb2 .river-zone--dep{min-width:70px;flex:0 0 auto} #s-qb2 .river-zone-head{display:flex;align-items:flex-start;gap:10px;padding:0 4px} #s-qb2 .river-dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--accent);background:var(--bg-1);flex-shrink:0;margin-top:2px;transition:background .2s,box-shadow .2s} #s-qb2 .river-dot.arr{border-color:var(--green);background:var(--green)} #s-qb2 .river-dot.dep{border-color:var(--blue);background:var(--blue)} #s-qb2 .river-zone-info{min-width:0} #s-qb2 .river-city{font-size:13px;font-weight:800;color:#3D352E;letter-spacing:.01em;line-height:1.2;white-space:nowrap} #s-qb2 .river-meta{font-size:10px;font-weight:600;color:var(--t4);margin-top:2px;white-space:nowrap} #s-qb2 .river-hotel{font-size:9px;font-weight:700;color:var(--accent-dn);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px} /* Day pills row under zone */ #s-qb2 .river-days{display:flex;gap:4px;margin-top:10px;padding:0 4px} #s-qb2 .river-daypill{display:flex;align-items:center;gap:3px;padding:4px 10px;border-radius:8px;background:var(--bg-1);font-size:10px;font-weight:700;color:var(--t3);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;user-select:none} #s-qb2 .river-daypill:hover{background:var(--accent-ghost);color:var(--accent-dn)} #s-qb2 .river-daypill.active{background:var(--accent);color:var(--bg-1);box-shadow:0 2px 8px rgba(196,154,60,.25)} #s-qb2 .river-daypill-label{font-size:10px;font-weight:800} #s-qb2 .river-daypill-dot{width:5px;height:5px;border-radius:50%;background:var(--green)} #s-qb2 .river-daypill.active .river-daypill-dot{background:var(--bg-1)} #s-qb2 .river-daypill-icon{font-size:10px;line-height:1} #s-qb2 .river-daypill-icon.dep{font-size:11px} /* Drive edge between zones */ #s-qb2 .river-edge{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:5px 4px 0;flex:0 0 auto;min-width:48px} #s-qb2 .river-edge-line{width:32px;height:2px;background:linear-gradient(90deg,var(--b2),var(--accent) 50%,var(--b2));border-radius:1px;margin-top:6px} #s-qb2 .river-edge-time{font-size:9px;font-weight:800;color:var(--accent-dn);margin-top:4px;white-space:nowrap;letter-spacing:.03em;background:var(--accent-ghost);padding:1px 6px;border-radius:4px} /* ── Day Cards (Collapsed) ──────────────────────────────── */ #s-qb2 .day-c{background:var(--bg-1);border:1px solid var(--b1);border-radius:14px;padding:12px 16px;margin-bottom:6px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;box-shadow:0 2px 8px var(--b0),0 1px 3px var(--b0);display:flex;align-items:center;gap:12px} #s-qb2 .day-c:hover{border-color:var(--accent);box-shadow:0 8px 28px var(--b1),0 2px 8px var(--b0);transform:translateY(-1px)} #s-qb2 .day-c-num{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--accent-dn);background:#F5EDD6;flex-shrink:0} #s-qb2 .day-c-body{flex:1;min-width:0} #s-qb2 .day-c-route{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #s-qb2 .day-c-sub{font-size:10px;color:var(--t4);margin-top:1px} #s-qb2 .day-c-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0} #s-qb2 .day-c-cost{font-size:12px;font-weight:800;color:var(--t1)} /* ── Expanded Day Panel ─────────────────────────────────── */ #s-qb2 .day-panel{background:var(--bg-1);border:1px solid var(--b1);border-radius:18px;box-shadow:0 8px 28px var(--b1),0 2px 8px var(--b0);margin-bottom:10px;overflow:hidden;animation:qb2FadeIn .3s ease} #s-qb2 .day-header{padding:16px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--b1);background:linear-gradient(180deg,var(--bg-1),var(--bg-1))} /* ── Two-Column Day Layout (desktop) ──────────────────── */ #s-qb2 .day-body-grid{display:grid;grid-template-columns:1fr 1fr;gap:0} #s-qb2 .day-col-left{border-right:1px solid var(--b1);min-width:0} #s-qb2 .day-col-right{min-width:0} /* ── Timeline collapse toggle ────────────────────────── */ #s-qb2 .tl-collapse-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 18px;cursor:pointer;user-select:none;border-bottom:1px solid var(--b1);background:var(--bg-2)} #s-qb2 .tl-collapse-hdr:hover{background:var(--bg-3)} #s-qb2 .tl-collapse-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)} #s-qb2 .tl-collapse-arr{font-size:9px;color:var(--t4);margin-left:6px} /* ── Room Configuration block (inside hotel panel) ──────────── */ #s-qb2 .htl-rc-wrap{margin:10px 14px 4px;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px} #s-qb2 .htl-rc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} #s-qb2 .htl-rc-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--t3)} #s-qb2 .htl-rc-head-r{display:flex;align-items:center;gap:10px} #s-qb2 .htl-rc-lock-lbl{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--t3);cursor:pointer} #s-qb2 .htl-rc-lock-lbl input{accent-color:var(--accent-metal)} #s-qb2 .htl-rc-pax{font-size:11px;font-weight:700} #s-qb2 .htl-rc-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:8px} #s-qb2 .htl-rc-table thead tr{border-bottom:1px solid rgba(255,255,255,.1)} #s-qb2 .htl-rc-table th{text-align:left;padding:3px 4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t4)} #s-qb2 .htl-rc-table td{padding:4px 4px;vertical-align:middle} #s-qb2 .htl-rc-table tfoot tr{border-top:1px solid rgba(255,255,255,.1)} #s-qb2 .htl-rc-sel{width:100%;background:var(--bg-2);border:1px solid var(--bg-3);color:var(--t1);border-radius:5px;padding:3px 4px;font-size:11px} #s-qb2 .htl-rc-num{width:44px;text-align:center;background:var(--bg-2);border:1px solid var(--bg-3);color:var(--t1);border-radius:5px;padding:3px 4px;font-size:11px;font-weight:700} #s-qb2 .htl-rc-rate{font-size:10px;color:var(--t3);white-space:nowrap;padding-right:6px} #s-qb2 .htl-rc-total{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap} #s-qb2 .htl-rc-foot-lbl{text-align:right;font-size:10px;color:var(--t3);padding-top:5px} #s-qb2 .htl-rc-foot-tot{font-size:13px;font-weight:800;color:var(--t1);padding-top:5px} #s-qb2 .htl-rc-del{background:none;border:none;color:var(--t4);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px} #s-qb2 .htl-rc-del:hover{color:#ef4444;background:rgba(239,68,68,.1)} #s-qb2 .htl-rc-auto{font-size:11px;color:var(--t4);margin:4px 0 8px;font-style:italic} #s-qb2 .htl-rc-add-btn{font-size:11px;padding:4px 12px;border-radius:7px;border:1px dashed rgba(255,255,255,.2);background:none;color:var(--t3);cursor:pointer;margin-top:2px} #s-qb2 .htl-rc-add-btn:hover{border-color:var(--accent-metal);color:var(--accent-metal)} #s-qb2 .htl-rc-ri{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:6px 10px;background:rgba(250,204,21,.08);border:1px solid rgba(250,204,21,.2);border-radius:7px;font-size:11px;color:var(--t2);flex-wrap:wrap} #s-qb2 .htl-rc-ri-btn{font-size:10px;padding:3px 10px;border-radius:6px;background:var(--accent-metal);border:none;color:#000;font-weight:700;cursor:pointer;white-space:nowrap} @media(max-width:900px){ #s-qb2 .day-body-grid{grid-template-columns:1fr} #s-qb2 .day-col-left{border-right:none} } #s-qb2 .day-num{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--bg-1);background:var(--accent-metal);flex-shrink:0;box-shadow:0 4px 12px rgba(139,105,20,.2)} #s-qb2 .day-meta{flex:1;min-width:0} #s-qb2 .day-title{font-size:14px;font-weight:800;color:var(--t1)} #s-qb2 .day-subtitle{font-size:10px;color:var(--t4);margin-top:2px} #s-qb2 .dtype{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px} #s-qb2 .dtype.transfer{background:var(--blue-bg);color:var(--blue)} #s-qb2 .dtype.base{background:var(--green-bg);color:var(--green)} #s-qb2 .dtype.arrival{background:#F7EFF1;color:#8B5E6A} #s-qb2 .dtype.departure{background:var(--accent-ghost);color:var(--accent-dn)} /* ── Client Hero (Setup) ──────────────────────────────── */ #s-qb2 .client-hero{ background:linear-gradient(135deg,var(--t1),#252016); border-radius:18px;padding:24px;margin-bottom:14px;color:var(--bg-1); position:relative;overflow:hidden;box-shadow:0 8px 28px var(--b1),0 2px 8px var(--b0); } @media(max-width:600px){#s-qb2 .client-hero{padding:16px 14px;border-radius:14px;margin-bottom:10px}} #s-qb2 .client-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,var(--accent-seam),transparent 60%);pointer-events:none} #s-qb2 .client-hero-name{font-family:var(--fd);font-size:26px;font-weight:700;position:relative;z-index:1} @media(max-width:600px){#s-qb2 .client-hero-name{font-size:20px}} #s-qb2 .client-hero-meta{font-size:12px;color:rgba(255,255,255,.55);margin-top:4px;display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1} @media(max-width:600px){#s-qb2 .client-hero-meta{font-size:11px;gap:8px}} #s-qb2 .client-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin-top:16px;position:relative;z-index:1} @media(max-width:600px){#s-qb2 .client-kpis{grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px}} #s-qb2 .client-kpi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;text-align:center} @media(max-width:600px){#s-qb2 .client-kpi{padding:8px 6px;border-radius:10px}} #s-qb2 .client-kpi-val{font-size:20px;font-weight:800;color:var(--accent)} @media(max-width:600px){#s-qb2 .client-kpi-val{font-size:16px}} #s-qb2 .client-kpi-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:2px} /* ── Intelligence Grid (Setup) ────────────────────────── */ #s-qb2 .intel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:600px){#s-qb2 .intel-grid{grid-template-columns:1fr}} #s-qb2 .intel-card{background:var(--bg-1);border:1px solid var(--b1);border-radius:14px;padding:14px 16px;box-shadow:0 2px 8px var(--b0),0 1px 3px var(--b0)} #s-qb2 .intel-card-icon{font-size:18px;margin-bottom:4px} #s-qb2 .intel-card-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);margin-bottom:4px} #s-qb2 .intel-card-val{font-size:16px;font-weight:800;color:var(--t1)} #s-qb2 .intel-card-sub{font-size:11px;color:var(--t3);margin-top:3px} /* ── Tier Compare (Commercials) ───────────────────────── */ #s-qb2 .tier-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} @media(max-width:600px){#s-qb2 .tier-compare{grid-template-columns:1fr}} #s-qb2 .tier-card{background:var(--bg-1);border:2px solid var(--b1);border-radius:16px;padding:16px;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 2px 8px var(--b0),0 1px 3px var(--b0)} #s-qb2 .tier-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--b1),0 2px 8px var(--b0)} #s-qb2 .tier-card.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-seam)} #s-qb2 .tier-card.recommended::before{content:'RECOMMENDED';display:block;font-size:8px;font-weight:800;letter-spacing:.1em;color:var(--accent-dn);background:var(--accent-ghost);padding:3px 10px;border-radius:999px;margin:-6px auto 8px;width:fit-content} #s-qb2 .tier-card-name{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--t1)} #s-qb2 .tier-card-price{font-family:var(--fd);font-size:26px;font-weight:700;color:var(--t1);margin:6px 0 4px} #s-qb2 .tier-card-sub{font-size:10px;color:var(--t4)} #s-qb2 .tier-card-margin{font-size:11px;font-weight:800;margin-top:8px;padding-top:8px;border-top:1px solid var(--b1)} /* ── Margin Dial (Commercials) ────────────────────────── */ #s-qb2 .dial-wrap{display:flex;align-items:center;justify-content:center;gap:28px;padding:16px 0} #s-qb2 .dial{position:relative;width:110px;height:110px} #s-qb2 .dial svg{transform:rotate(-90deg)} #s-qb2 .dial-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} #s-qb2 .dial-pct{font-family:var(--fd);font-size:24px;font-weight:800;color:var(--green)} #s-qb2 .dial-label{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)} #s-qb2 .dial-profit{font-size:14px;font-weight:800;color:var(--accent-dn);margin-top:2px} #s-qb2 .dial-meta{display:flex;flex-direction:column;gap:8px} #s-qb2 .dial-meta-item{font-size:12px;color:var(--t3);display:flex;flex-direction:column;gap:1px} #s-qb2 .dial-meta-val{font-weight:800;color:var(--t1);font-size:14px} #s-qb2 .margin-slider-wrap{display:flex;align-items:center;gap:12px;margin:8px 0} #s-qb2 .margin-slider{flex:1;-webkit-appearance:none;height:6px;border-radius:999px;background:var(--bg-2);outline:none} #s-qb2 .margin-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 2px 8px rgba(196,154,60,.3)} #s-qb2 .margin-val{font-size:16px;font-weight:800;color:var(--accent-dn);min-width:50px;text-align:right} #s-qb2 .freeze-btn{font-size:11px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--b1);background:var(--bg-1);cursor:pointer;font-weight:700;transition:background .15s,border-color .15s,color .15s;font-family:inherit} #s-qb2 .freeze-btn.active{background:var(--blue-bg);border-color:var(--blue);color:var(--blue)} /* ── Waterfall (Commercials) ──────────────────────────── */ #s-qb2 .waterfall{display:flex;align-items:flex-end;gap:6px;height:130px;padding:0 8px;margin:16px 0} #s-qb2 .wf-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end} #s-qb2 .wf-bar{width:100%;border-radius:6px 6px 0 0;min-height:4px;transition:height .3s} #s-qb2 .wf-bar.cost{background:linear-gradient(to top,#DC2626,#EF4444)} #s-qb2 .wf-bar.margin{background:linear-gradient(to top,var(--green),#2e9c7f)} #s-qb2 .wf-bar.total{background:linear-gradient(to top,var(--accent),#d4a843)} #s-qb2 .wf-bar-val{font-size:9px;font-weight:800;color:var(--t1)} #s-qb2 .wf-bar-lbl{font-size:8px;color:var(--t4);text-transform:uppercase;letter-spacing:.02em;text-align:center} /* ── What-If (Commercials) ────────────────────────────── */ #s-qb2 .whatif-grid{display:flex;flex-direction:column;gap:6px} #s-qb2 .whatif-card{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--b1);border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;background:var(--bg-1)} #s-qb2 .whatif-card:hover{border-color:var(--accent);background:var(--bg-1);transform:translateY(-1px)} #s-qb2 .whatif-icon{font-size:18px;flex-shrink:0;margin-top:2px} #s-qb2 .whatif-body{flex:1} #s-qb2 .whatif-title{font-size:12px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:6px;flex-wrap:wrap} #s-qb2 .whatif-delta{font-size:9px;font-weight:800;padding:2px 8px;border-radius:999px} #s-qb2 .whatif-delta.save{background:var(--green-bg);color:var(--green)} #s-qb2 .whatif-delta.spend{background:var(--red-bg);color:var(--red)} #s-qb2 .whatif-desc{font-size:11px;color:var(--t3);margin-top:3px} /* ── Cost Table (Commercials) ─────────────────────────── */ #s-qb2 .comm-table{width:100%;border-collapse:collapse;font-size:13px} #s-qb2 .comm-table th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);padding:8px 12px;border-bottom:1px solid var(--b1)} #s-qb2 .comm-table td{padding:8px 12px;border-bottom:1px solid var(--bg-2)} #s-qb2 .comm-table td:last-child{text-align:right;font-weight:700} #s-qb2 .comm-table tr.total td{border-top:2px solid var(--b1);font-weight:800;font-size:14px;color:var(--t1)} #s-qb2 .comm-table tr.sub td{color:var(--t3);font-size:12px;padding-left:24px} #s-qb2 .comm-table tr:hover td{background:var(--bg-1)} #s-qb2 .comm-highlight{ background:linear-gradient(135deg,var(--accent-ghost),#fff8ed); border:1px solid var(--accent-ring);border-radius:14px;padding:18px; display:flex;align-items:center;gap:16px;margin:16px 0; } #s-qb2 .comm-highlight-price{font-family:var(--fd);font-size:36px;font-weight:700;color:var(--t1);line-height:1} #s-qb2 .comm-highlight-detail{flex:1} #s-qb2 .comm-highlight-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dn)} #s-qb2 .comm-highlight-sub{font-size:12px;color:var(--t3);margin-top:2px} /* ── Currency (Commercials) ───────────────────────────── */ #s-qb2 .currency-row{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0} #s-qb2 .currency-chip{padding:8px 14px;border:1px solid var(--b1);border-radius:12px;font-size:13px;cursor:pointer;transition:border-color .15s} #s-qb2 .currency-chip.primary{background:var(--accent-metal);color:var(--bg-1);border-color:var(--accent);font-weight:700} #s-qb2 .currency-chip:hover{border-color:var(--accent)} /* ── Payment Timeline (Commercials) ───────────────────── */ #s-qb2 .payment-timeline{display:flex;align-items:center;justify-content:space-between;padding:10px 0} #s-qb2 .payment-node{text-align:center;flex-shrink:0} #s-qb2 .payment-dot{width:16px;height:16px;border-radius:50%;background:var(--b1);margin:0 auto 5px;border:2px solid var(--t4)} #s-qb2 .payment-dot.done{background:var(--green);border-color:var(--green)} #s-qb2 .payment-dot.next{background:#F5EDD6;border-color:var(--accent)} #s-qb2 .payment-label{font-size:10px;color:var(--t3);font-weight:700} #s-qb2 .payment-amount{font-size:12px;font-weight:800;color:var(--t1);margin-top:2px} #s-qb2 .payment-line{flex:1;height:2px;background:var(--b1);margin:0 6px;margin-bottom:30px} /* ── Summary Hero ──────────────────────────────────────── */ #s-qb2 .summary-hero{ background:linear-gradient(135deg,var(--t1),#252016); border-radius:24px;padding:32px 28px;color:var(--bg-1);margin-bottom:20px; position:relative;overflow:hidden; } #s-qb2 .summary-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,var(--accent-seam),transparent 60%);pointer-events:none} #s-qb2 .summary-hero-label{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;position:relative;z-index:1} #s-qb2 .summary-hero-title{font-family:var(--fd);font-size:32px;font-weight:600;line-height:1.1;margin-bottom:6px;position:relative;z-index:1} #s-qb2 .summary-hero-sub{font-size:13px;color:rgba(255,255,255,.5);position:relative;z-index:1} #s-qb2 .summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin-top:20px;position:relative;z-index:1} #s-qb2 .summary-stat{text-align:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} #s-qb2 .summary-stat-val{font-size:20px;font-weight:800;color:var(--accent)} #s-qb2 .summary-stat-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:2px} /* ── Map Section ───────────────────────────────────────── */ #s-qb2 .map-container{background:var(--bg-1);border:1px solid var(--b1);border-radius:18px;overflow:hidden;box-shadow:0 2px 8px var(--b0),0 1px 3px var(--b0);margin-bottom:16px;position:relative} #s-qb2 .map-canvas{width:100%;aspect-ratio:1.4/1;min-height:400px;background:linear-gradient(135deg,#e8eeef,#dce5e3 40%,#d4ddd8 70%,#ccd5d0);position:relative;overflow:hidden} /* ── Rooming Section ───────────────────────────────────── */ #s-qb2 .room-alloc-summary{background:linear-gradient(135deg,var(--green-bg),#f0faf6);border:1px solid var(--green-bg);border-radius:14px;padding:16px;margin-bottom:14px} #s-qb2 .room-alloc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px} #s-qb2 .room-alloc-val{font-size:20px;font-weight:800;color:var(--green);text-align:center} #s-qb2 .room-alloc-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;text-align:center} #s-qb2 .nbn-grid{display:flex;flex-direction:column;gap:0} #s-qb2 .nbn-row{display:grid;grid-template-columns:42px 1fr 100px 60px 70px;align-items:center;gap:6px;padding:7px 10px;font-size:12px;border-bottom:1px solid var(--bg-2)} #s-qb2 .nbn-row:hover{background:var(--bg-1)} #s-qb2 .nbn-row.header{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t4);background:none;border-bottom:1px solid var(--b1)} #s-qb2 .nbn-row.total{background:var(--green-bg);font-weight:800;border-radius:10px;border:none;margin-top:4px} #s-qb2 .nbn-num{font-weight:800;color:var(--accent-dn);text-align:center} #s-qb2 .nbn-hotel{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #s-qb2 .nbn-cost{font-weight:700;text-align:right;color:var(--t1)} #s-qb2 .nbn-row.total .nbn-cost{color:var(--green);font-size:14px} #s-qb2 .nbn-row.peak{background:var(--accent-ghost)} #s-qb2 .nbn-row.peak .nbn-cost{color:var(--accent-dn)} #s-qb2 .nbn-row.expensive{background:#FEF2F2} #s-qb2 .nbn-row.expensive .nbn-cost{color:var(--red)} #s-qb2 .nbn-room{font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── Map ─────────────────────────────────────────────── */ #s-qb2 .map-dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--accent);background:var(--bg-1);position:absolute;transform:translate(-50%,-50%);z-index:2;cursor:pointer;transition:background .15s,box-shadow .15s} #s-qb2 .map-dot:hover{box-shadow:0 0 0 4px rgba(196,154,60,.25)} #s-qb2 .map-dot.active{background:var(--accent)} #s-qb2 .map-label{position:absolute;transform:translate(-50%,10px);font-size:10px;font-weight:800;color:var(--t1);white-space:nowrap;z-index:3;text-shadow:0 1px 3px rgba(255,255,255,.9)} #s-qb2 .map-line{position:absolute;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-dn));transform-origin:0 50%;z-index:1;border-radius:1px;opacity:.5} #s-qb2 .map-legend{display:flex;align-items:center;gap:16px;padding:10px 16px;border-top:1px solid var(--bg-2);font-size:11px;color:var(--t3);flex-wrap:wrap} #s-qb2 .map-legend-item{display:flex;align-items:center;gap:6px} #s-qb2 .map-legend-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--accent)} /* ── Extra Bed ───────────────────────────────────────── */ #s-qb2 .extrabed-card{background:linear-gradient(135deg,var(--accent-ghost),var(--accent-ghost));border:1px solid var(--accent-ring);border-radius:14px;padding:14px 16px;margin-bottom:14px} #s-qb2 .extrabed-title{font-size:13px;font-weight:800;color:var(--accent-dn);margin-bottom:10px} #s-qb2 .extrabed-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px} #s-qb2 .eb-label{color:var(--t3)} #s-qb2 .eb-val{font-weight:700;color:var(--t1)} /* ── Summary Day Rows ────────────────────────────────── */ #s-qb2 .summary-day{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--bg-2);font-size:12px} #s-qb2 .summary-day:last-child{border-bottom:none} #s-qb2 .summary-day-num{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg-1);font-weight:800;color:var(--accent-dn);font-size:11px;flex-shrink:0} #s-qb2 .summary-day-body{flex:1;min-width:0} #s-qb2 .summary-day-route{font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #s-qb2 .summary-day-info{font-size:11px;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} #s-qb2 .summary-day-cost{white-space:nowrap;font-size:11px;flex-shrink:0} #s-qb2 .sday-board{font-size:9px;font-weight:800;color:var(--bg-1);background:var(--green);padding:1px 4px;border-radius:3px;vertical-align:middle} #s-qb2 .sday-tag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;white-space:nowrap} #s-qb2 .sday-tag--act{background:var(--green-bg);color:var(--green)} #s-qb2 .sday-tag--htl{background:var(--bg-2);color:var(--t3)} #s-qb2 .sday-tag--dep{background:var(--accent-ghost);color:var(--accent-dn)} /* Summary Trip Cost Breakdown */ #s-qb2 .sbd-card{margin-top:14px;border-top:2px solid var(--b1);padding-top:12px} #s-qb2 .sbd-head{display:flex;align-items:center;gap:4px;margin-bottom:6px;padding:0 2px} #s-qb2 .sbd-head-label{flex:1;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--t4)} #s-qb2 .sbd-head-col{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--t4);width:54px;text-align:right} #s-qb2 .sbd-row{display:flex;align-items:center;gap:6px;padding:4px 2px;border-bottom:1px solid var(--bg-1)} #s-qb2 .sbd-row:last-child{border-bottom:none} #s-qb2 .sbd-icon{font-size:12px;flex-shrink:0;width:18px;text-align:center} #s-qb2 .sbd-label{flex:1;font-size:11px;color:var(--t3)} #s-qb2 .sbd-cost{font-size:11px;font-weight:700;color:var(--t1);width:54px;text-align:right} #s-qb2 .sbd-sell{font-size:11px;font-weight:700;color:var(--accent);width:54px;text-align:right} #s-qb2 .sbd-total{margin-top:4px;padding-top:6px;border-top:1.5px solid var(--b1);background:transparent} #s-qb2 .sbd-total .sbd-label{font-size:12px} #s-qb2 .sbd-total .sbd-cost{font-size:12px} #s-qb2 .sbd-sell--total{color:var(--accent-dn);font-size:13px} /* ── Cost Table Sub-rows ────────────────────────────────── */ #s-qb2 .comm-table .cost-cat-row td{padding-top:10px;padding-bottom:4px;border-top:1px solid var(--bg-2)} #s-qb2 .comm-table .cost-cat-row:first-child td{border-top:none;padding-top:6px} #s-qb2 .comm-table .cost-sub-row td{padding-top:3px;padding-bottom:3px;border-bottom:none} #s-qb2 .cost-sub-label{padding-left:20px !important;font-size:11px;color:var(--t3)} #s-qb2 .cost-sub-meta{font-size:10px;color:var(--t4);font-weight:400} #s-qb2 .cost-sub-meta-cell{font-size:10px;color:var(--t4)} #s-qb2 .cost-sub-amt{text-align:right;font-size:11px;color:var(--t3)} #s-qb2 .cost-sub-sell{text-align:right;font-size:11px;color:var(--accent)} /* ── Conversion / Health (Summary) ────────────────────── */ #s-qb2 .conv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:600px){#s-qb2 .conv-grid{grid-template-columns:1fr}} #s-qb2 .conv-card{background:var(--bg-1);border:1px solid var(--b1);border-radius:14px;padding:14px;text-align:center;box-shadow:0 2px 8px var(--b0),0 1px 3px var(--b0)} #s-qb2 .conv-card-val{font-family:var(--fd);font-size:22px;font-weight:800} #s-qb2 .conv-card-lbl{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t4);margin-top:3px} #s-qb2 .conv-card-sub{font-size:10px;color:var(--t3);margin-top:5px;line-height:1.4} #s-qb2 .health-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} @media(max-width:600px){#s-qb2 .health-grid{grid-template-columns:1fr}} #s-qb2 .health-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--bg-1)} #s-qb2 .health-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} #s-qb2 .health-dot.pass{background:var(--green)} #s-qb2 .health-dot.warn{background:var(--accent-dn)} #s-qb2 .health-dot.fail{background:var(--red)} #s-qb2 .health-label{font-size:11px;font-weight:700;color:var(--t1);flex:1} #s-qb2 .health-val{font-size:10px;color:var(--t3)} /* ── WhatsApp (Summary) ───────────────────────────────── */ #s-qb2 .wa-preview{background:#E5DDD5;border-radius:14px;padding:14px;margin-bottom:12px} #s-qb2 .wa-bubble{background:#DCF8C6;border-radius:10px 10px 0 10px;padding:12px 14px;font-size:13px;line-height:1.6;max-width:88%;box-shadow:0 1px 2px rgba(0,0,0,.1)} /* ── Repeat Badge ──────────────────────────────────────── */ #s-qb2 .repeat-badge{font-size:10px;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(196,154,60,.2);color:var(--accent);margin-left:8px} /* ── Season Bar ────────────────────────────────────────── */ #s-qb2 .season-bar{display:flex;border-radius:999px;overflow:hidden;height:20px;margin-top:12px;font-size:9px;font-weight:700;letter-spacing:.02em} #s-qb2 .season-seg{display:flex;align-items:center;justify-content:center;color:var(--bg-1);white-space:nowrap} #s-qb2 .season-seg.dry{background:var(--green)} #s-qb2 .season-seg.peak{background:var(--red)} #s-qb2 .season-seg.shoulder{background:var(--accent-dn)} #s-qb2 .season-seg.wet{background:var(--blue)} /* ── Empty state ───────────────────────────────────────── */ #s-qb2 .qb2-empty{text-align:center;padding:60px 20px;color:var(--t4)} #s-qb2 .qb2-empty-icon{font-size:48px;margin-bottom:12px;opacity:.4} #s-qb2 .qb2-empty-title{font-size:16px;font-weight:700;color:var(--t3);margin-bottom:6px} #s-qb2 .qb2-empty-sub{font-size:13px;color:var(--t4)} /* ═══════════════════════════════════════════════════════════ Phase 14: QB2 Independence — Overlay, Pickers, Day Panel ═══════════════════════════════════════════════════════════ */ /* ── Overlay System ───────────────────────────────────── */ #s-qb2 .qb2-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-end;justify-content:center} #s-qb2 .qb2-overlay-bg{position:absolute;inset:0;background:rgba(26,23,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:qb2FadeIn .25s ease} @keyframes qb2FadeIn{from{opacity:0}to{opacity:1}} #s-qb2 .qb2-sheet{position:relative;z-index:1;width:100%;max-width:100%;max-height:85vh;background:var(--bg-1);border-radius:24px 24px 0 0;overflow:hidden;display:flex;flex-direction:column;animation:qb2SlideUp .35s cubic-bezier(.22,.61,.36,1)} @keyframes qb2SlideUp{from{transform:translateY(100%);opacity:.8}to{transform:translateY(0);opacity:1}} #s-qb2 .qb2-sheet-handle{width:40px;height:4px;border-radius:2px;background:var(--b2);margin:10px auto 4px} #s-qb2 .qb2-sheet-title{font-size:15px;font-weight:800;padding:10px 20px 14px;border-bottom:1px solid var(--bg-2);color:var(--t1);letter-spacing:-.02em} /* ── Picker Search ───────────────────────────────────── */ #s-qb2 .qb2-picker-search{width:100%;padding:14px 20px;border:none;border-bottom:1px solid var(--bg-2);font-size:15px;outline:none;font-family:inherit;background:var(--bg-1);border-radius:0} #s-qb2 .qb2-picker-search:focus{background:var(--bg-1);box-shadow:inset 0 -2px 0 var(--accent)} /* ── Picker Grid (card-style) ────────────────────────── */ #s-qb2 .qb2-picker-list{overflow-y:auto;max-height:60vh;-webkit-overflow-scrolling:touch;padding:16px 22px;display:flex;flex-direction:column;gap:12px} /* ── Picker Card ─────────────────────────────────────── */ #s-qb2 .pk-card{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;border:1.5px solid var(--bg-2);background:var(--bg-1);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,transform .15s} #s-qb2 .pk-card:hover{border-color:var(--accent);background:var(--accent-ghost);box-shadow:0 2px 8px var(--accent-ghost)} #s-qb2 .pk-card:active{transform:scale(.98);background:var(--accent-ghost)} #s-qb2 .pk-card.sel{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-ghost),#FEF9F0);box-shadow:0 2px 10px var(--accent-seam)} #s-qb2 .pk-card.disabled{opacity:.45;pointer-events:none} /* Picker card icon */ #s-qb2 .pk-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;background:linear-gradient(135deg,var(--bg-1),var(--bg-2))} #s-qb2 .pk-icon.gold{background:linear-gradient(135deg,var(--accent-ghost),var(--accent-ghost))} #s-qb2 .pk-icon.green{background:linear-gradient(135deg,var(--green-bg),#d4ede4)} /* Picker card body */ #s-qb2 .pk-body{flex:1;min-width:0} #s-qb2 .pk-name{font-size:15px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #s-qb2 .pk-sub{font-size:12px;color:var(--t4);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #s-qb2 .pk-tags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap} #s-qb2 .pk-tag{font-size:8px;font-weight:700;padding:2px 7px;border-radius:99px;letter-spacing:.04em;text-transform:uppercase} #s-qb2 .pk-tag.gold{background:var(--accent-ghost);color:var(--accent-dn);border:1px solid #E8D5A8} #s-qb2 .pk-tag.green{background:var(--green-bg);color:var(--green);border:1px solid #c4e5d8} #s-qb2 .pk-tag.amber{background:#FFF8EB;color:var(--accent-dn);border:1px solid #F0DDB8} #s-qb2 .pk-tag.blue{background:#EEF2F6;color:var(--blue);border:1px solid #D0DAE4} /* Picker card right side (price, badge, etc) */ #s-qb2 .pk-right{text-align:right;flex-shrink:0} #s-qb2 .pk-price{font-size:16px;font-weight:800;color:var(--t1)} #s-qb2 .pk-per{font-size:9px;color:var(--t4)} #s-qb2 .pk-delta{font-size:9px;font-weight:800} #s-qb2 .pk-delta.save{color:var(--green)} #s-qb2 .pk-delta.spend{color:var(--red)} #s-qb2 .pk-badge{font-size:8px;font-weight:800;padding:2px 8px;border-radius:99px;letter-spacing:.04em;text-transform:uppercase;display:inline-block;margin-bottom:2px} #s-qb2 .pk-badge.contract{background:var(--green-bg);color:var(--green)} #s-qb2 .pk-badge.rack{background:var(--bg-1);color:var(--t4)} #s-qb2 .pk-badge.selected{background:var(--accent-ghost);color:var(--accent-dn)} /* Picker section headers */ #s-qb2 .pk-section{font-size:11px;font-weight:800;color:var(--t4);text-transform:uppercase;letter-spacing:.08em;padding:12px 4px 6px;margin-top:8px} #s-qb2 .pk-section:first-child{margin-top:0} /* Picker check mark */ #s-qb2 .pk-check{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#A07A2E);color:var(--bg-1);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0} /* Backwards compat for old picker items */ #s-qb2 .qb2-picker-item{padding:12px 16px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .15s} #s-qb2 .qb2-picker-item:hover{background:var(--accent-ghost)} #s-qb2 .qb2-picker-item:active{background:var(--accent-ghost)} #s-qb2 .qb2-picker-item.selected{background:var(--accent-ghost);border-left:3px solid var(--accent)} /* ── Pills (tier, board, occupancy) ───────────────────── */ #s-qb2 .qb2-pills{display:flex;gap:6px;flex-wrap:wrap} #s-qb2 .qb2-pill{padding:7px 14px;border-radius:999px;font-size:11px;font-weight:700;border:1.5px solid #E8E2D8;background:var(--bg-1);cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit;color:var(--t3)} #s-qb2 .qb2-pill:hover{border-color:var(--accent);background:var(--accent-ghost);color:var(--accent-dn)} #s-qb2 .qb2-pill.active{background:linear-gradient(135deg,var(--accent),#A07A2E);color:var(--bg-1);border-color:var(--accent);box-shadow:0 2px 6px rgba(196,154,60,.25)} /* ── Day Panel (expanded) ─────────────────────────────── */ #s-qb2 .day-panel{background:var(--bg-1);border:1.5px solid var(--accent);border-radius:16px;margin-bottom:8px;overflow:hidden;box-shadow:0 4px 16px var(--accent-seam)} #s-qb2 .day-panel-head{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;background:linear-gradient(135deg,var(--accent-ghost),var(--bg-1));border-bottom:1px solid var(--bg-2)} #s-qb2 .day-sec{padding:14px 18px;border-bottom:1px solid var(--bg-2)} #s-qb2 .day-sec:last-of-type{border-bottom:none} #s-qb2 .day-sec-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t4);margin-bottom:8px} /* ── City Tags ────────────────────────────────────────── */ #s-qb2 .city-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center} #s-qb2 .city-add{font-size:11px;font-weight:700;color:var(--accent-dn);cursor:pointer;padding:5px 12px;border-radius:999px;border:1.5px dashed var(--accent);transition:background .15s;background:transparent} #s-qb2 .city-add:hover{background:var(--accent-ghost)} #s-qb2 .city-tag-ed{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:var(--bg-1);font-size:11px;font-weight:700;color:var(--t1);border:1px solid #E8E2D8} #s-qb2 .city-tag-x{font-size:13px;color:var(--red);cursor:pointer;line-height:1;border-radius:50%;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s} #s-qb2 .city-tag-x:hover{background:#fee2e2} /* ── Hotel Picker Card ────────────────────────────────── */ #s-qb2 .hotel-pick{padding:12px 14px;border:1.5px solid #E8E2D8;border-radius:14px;cursor:pointer;transition:border-color .2s,background .2s} #s-qb2 .hotel-pick:hover{border-color:var(--accent);background:var(--accent-ghost)} #s-qb2 .hotel-pick-name{font-size:13px;font-weight:700;color:var(--t1)} #s-qb2 .hotel-pick-sub{font-size:11px;color:var(--t4);margin-top:2px} /* ── Activity Rows ────────────────────────────────────── */ #s-qb2 .act-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px} #s-qb2 .act-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--bg-1)} #s-qb2 .act-name{flex:1;font-size:12px;font-weight:600;color:var(--t1)} #s-qb2 .act-price{font-size:11px;font-weight:700;color:var(--green)} #s-qb2 .act-remove{font-size:16px;color:var(--red);cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1;transition:background .15s} #s-qb2 .act-remove:hover{background:var(--red-bg)} #s-qb2 .act-price-btn{cursor:pointer;border-radius:6px;padding:2px 5px;transition:background .15s} #s-qb2 .act-price-btn:hover{background:rgba(26,107,90,.1)} #s-qb2 .act-price-btn.custom{color:var(--accent)} #s-qb2 .tl-act-meta .act-price-btn{font-size:11px;font-weight:700;color:var(--green)} #s-qb2 .tl-act-meta .act-price-btn.custom{color:var(--accent)} /* ── Curated Hotel Mini-Cards (in collapsed day card) ── */ #s-qb2 .day-htl-row{display:flex;gap:6px;margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} #s-qb2 .day-htl-row::-webkit-scrollbar{display:none} #s-qb2 .day-htl-mini{flex:0 0 auto;min-width:100px;max-width:140px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--bg-2);background:var(--bg-1);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .15s,transform .15s} #s-qb2 .day-htl-mini:hover{border-color:var(--accent);background:var(--accent-ghost);box-shadow:0 2px 6px var(--accent-seam);transform:translateY(-1px)} #s-qb2 .day-htl-mini.sel{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-ghost),var(--accent-ghost));box-shadow:0 2px 8px var(--accent-seam)} #s-qb2 .day-htl-mini-name{font-size:10px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3} #s-qb2 .day-htl-mini-info{font-size:9px;color:var(--accent);margin-top:1px} #s-qb2 .day-htl-mini-badge{display:inline-block;font-size:7px;font-weight:800;padding:1px 4px;border-radius:3px;background:var(--green-bg);color:var(--green);vertical-align:middle;margin-left:2px} #s-qb2 .day-htl-mini-price{font-size:11px;font-weight:800;color:var(--green);margin-top:2px} #s-qb2 .day-htl-swap{flex:0 0 auto;min-width:56px;padding:8px 10px;border-radius:10px;border:1.5px dashed var(--accent);background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:background .2s} #s-qb2 .day-htl-swap:hover{background:var(--accent-ghost)} #s-qb2 .day-htl-swap-icon{font-size:16px;color:var(--accent)} #s-qb2 .day-htl-swap-label{font-size:9px;font-weight:800;color:var(--accent-dn);letter-spacing:.03em} #s-qb2 .day-htl-swap-count{font-size:8px;color:var(--t4)} #s-qb2 .day-c.has-hotels{flex-wrap:wrap} /* ── Zone Toggle & Indicator ──────────────────────────────── */ #s-qb2 .day-htl-zone-toggle{flex:0 0 auto;padding:6px 10px;border-radius:10px;border:1.5px dashed var(--blue);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:9px;font-weight:800;transition:background .15s,border-color .15s;white-space:nowrap} #s-qb2 .day-htl-zone-toggle:hover{background:var(--blue-bg);border-color:#2d4a5a} #s-qb2 .day-htl-zone-toggle.active{background:var(--blue-bg);border-color:#2d4a5a;color:#2d4a5a} #s-qb2 .day-zone-badge{font-size:12px;margin-right:4px;opacity:.7} #s-qb2 .day-c.zone-active{border-left:3px solid var(--blue)} /* ── Day Footer ───────────────────────────────────────── */ #s-qb2 .day-footer{padding:10px 18px;background:var(--bg-1);display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0 0 14px 14px;border-top:1px solid #EAE0D5} #s-qb2 .day-footer-breakdown{display:flex;gap:0;flex-wrap:wrap} #s-qb2 .day-footer-item{font-size:11px;color:var(--t4);font-weight:600;display:flex;align-items:center;gap:3px} #s-qb2 .day-footer-item+.day-footer-item::before{content:'·';margin:0 6px;color:#D4C5B0} #s-qb2 .day-footer-item b{color:#2D2520;font-weight:700} #s-qb2 .day-footer-total{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3);white-space:nowrap;font-weight:600} #s-qb2 .day-footer-total b{font-size:14px;font-weight:800;color:var(--green)} /* ── Timeline Toolbar (Refresh Timing) ────────────────── */ #s-qb2 .tl-toolbar{display:flex;align-items:center;gap:8px;padding:6px 18px 4px;margin-bottom:2px} #s-qb2 .tl-refresh-btn{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--green);background:#E8F3F0;border:1px solid #C8DED9;border-radius:6px;padding:4px 10px;cursor:pointer;transition:background .15s} #s-qb2 .tl-refresh-btn:hover{background:#D1EAE4} #s-qb2 .tl-override-badge{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-ghost);border:1px solid var(--accent-ring);border-radius:4px;padding:2px 7px} /* ── Drag Handle + Drag States ────────────────────────── */ #s-qb2 .day-drag-handle{width:20px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--t4);cursor:grab;flex-shrink:0;user-select:none;transition:color .15s;letter-spacing:-1px} #s-qb2 .day-drag-handle:hover{color:var(--accent-dn)} #s-qb2 .day-drag-handle:active{cursor:grabbing} #s-qb2 .day-c[draggable="true"]{touch-action:none} #s-qb2 .day-c--dragging{opacity:.35;transform:scale(.97);border-color:var(--accent);box-shadow:0 2px 12px var(--accent-seam)} #s-qb2 .day-c--drop-above{border-top:3px solid var(--accent);margin-top:-1px;border-top-left-radius:4px;border-top-right-radius:4px} #s-qb2 .day-c--drop-below{border-bottom:3px solid var(--accent);margin-bottom:-1px;border-bottom-left-radius:4px;border-bottom-right-radius:4px} /* ── Day Card Locked State ────────────────────────────── */ #s-qb2 .day-c--locked{cursor:pointer;align-items:flex-start} #s-qb2 .day-c--locked .day-c-num{margin-top:1px} #s-qb2 .day-c--locked .day-c-body{cursor:pointer} #s-qb2 .day-c--locked .day-c-right{cursor:pointer;padding-top:1px} #s-qb2 .day-c-head{display:flex;align-items:center;gap:6px;margin-bottom:6px} #s-qb2 .day-c-head .day-c-route{flex:1;min-width:0} #s-qb2 .day-c-type-tag{font-size:8px !important;flex-shrink:0} #s-qb2 .day-c-lock{font-size:11px;margin-top:4px;opacity:.45;display:block;text-align:right} #s-qb2 .day-c--locked:hover .day-c-lock{opacity:.8} /* Edit chip — replaces lock icon on non-checkout days */ #s-qb2 .day-c-edit-btn{font-size:9px;font-weight:800;color:var(--green);background:var(--green-bg);border:1px solid #B8E0D3;border-radius:6px;padding:2px 8px;margin-top:4px;display:inline-block;letter-spacing:.03em;transition:background .15s,border-color .15s;white-space:nowrap} #s-qb2 .day-c:hover .day-c-edit-btn{background:#D4EFE6;border-color:var(--green);color:#0f5040} /* Intelligence alert badges on collapsed day cards */ #s-qb2 .day-alert-row{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;margin-top:2px} #s-qb2 .day-alert-warn{font-size:9px;font-weight:800;color:#9B3F3F;background:#FDF0F0;border:1px solid #E8B4B4;border-radius:5px;padding:1px 5px;white-space:nowrap;cursor:help} #s-qb2 .day-alert-sug{font-size:9px;font-weight:800;color:var(--accent-dn);background:var(--accent-ghost);border:1px solid #E8D49A;border-radius:5px;padding:1px 5px;white-space:nowrap;cursor:help} #s-qb2 .day-alert-ok{font-size:9px;font-weight:800;color:var(--green);background:var(--green-bg);border:1px solid #B8E0D3;border-radius:5px;padding:1px 5px;white-space:nowrap} /* Mini Day Dashboard */ #s-qb2 .day-dash{display:flex;flex-direction:column;gap:4px} #s-qb2 .day-dash--checkout{flex-direction:row;align-items:center;gap:6px;color:var(--t4)} #s-qb2 .day-dash-dep-icon{font-size:13px} #s-qb2 .day-dash-dep-text{font-size:10px;color:var(--t4);font-style:italic} /* Hotel row */ #s-qb2 .day-dash-hotel{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;min-width:0} #s-qb2 .day-dash-hotel-icon{font-size:11px;flex-shrink:0} #s-qb2 .day-dash-hotel-name{font-size:11px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0} #s-qb2 .day-dash-hotel-stars{font-size:8px;color:var(--accent);letter-spacing:-1px;flex-shrink:0} #s-qb2 .day-dash-hotel-board{font-size:9px;font-weight:800;color:var(--bg-1);background:var(--green);padding:1px 5px;border-radius:4px;flex-shrink:0;letter-spacing:.03em} #s-qb2 .day-dash-hotel-rate{font-size:10px;font-weight:700;color:var(--green);flex-shrink:0} #s-qb2 .day-dash-hotel-rate.overridden{color:var(--accent)} #s-qb2 .day-dash-contract-badge{font-size:7px;font-weight:800;padding:1px 4px;border-radius:3px;background:var(--green-bg);color:var(--green);flex-shrink:0} #s-qb2 .day-dash-hotel--empty .day-dash-hotel-empty{font-size:10px;color:var(--t4);font-style:italic} /* Drive row */ #s-qb2 .day-dash-drive{display:flex;align-items:center;gap:5px;font-size:10px;color:#6B7B8C} #s-qb2 .day-dash-drive-icon{font-size:10px;flex-shrink:0} #s-qb2 .day-dash-drive-dur{font-size:9px;font-weight:700;color:var(--blue);background:var(--blue-bg);padding:1px 5px;border-radius:4px} /* Activity pills */ #s-qb2 .day-dash-acts{display:flex;flex-wrap:wrap;gap:3px} #s-qb2 .day-dash-act-pill{font-size:9px;font-weight:600;color:#5A4F45;background:var(--bg-2);padding:2px 7px;border-radius:20px;white-space:nowrap} /* ── Desktop overlay positioning ──────────────────────── */ @media(min-width:601px){ #s-qb2 .qb2-overlay{align-items:center} #s-qb2 .qb2-sheet{border-radius:20px;max-height:80vh;max-width:800px;box-shadow:0 16px 48px rgba(0,0,0,.2)} } /* ── Presets Management Page ────────────────────────────── */ #s-qb2 .presets-page{padding:0 0 80px} #s-qb2 .presets-header{display:flex;align-items:flex-start;gap:16px;padding:20px 20px 16px;border-bottom:1px solid var(--bg-2);background:linear-gradient(180deg,var(--bg-1),var(--bg-1))} #s-qb2 .presets-header-text{flex:1;min-width:0} #s-qb2 .presets-title{font-size:16px;font-weight:800;color:var(--t1);margin-bottom:3px} #s-qb2 .presets-sub{font-size:11px;color:var(--t4);line-height:1.5} #s-qb2 .presets-stats{text-align:center;flex-shrink:0;background:var(--bg-1);border:1.5px solid var(--bg-2);border-radius:12px;padding:10px 18px} #s-qb2 .presets-stat-num{font-size:24px;font-weight:900;color:var(--accent);font-family:var(--fd)} #s-qb2 .presets-stat-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t4)} #s-qb2 .presets-search{display:block;width:calc(100% - 40px);margin:14px 20px 0;padding:9px 14px;border:1.5px solid var(--b1);border-radius:10px;font-size:12px;font-family:inherit;background:var(--bg-1);outline:none} #s-qb2 .presets-search:focus{border-color:var(--accent)} #s-qb2 .presets-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 20px} @media(max-width:600px){#s-qb2 .presets-grid{grid-template-columns:1fr}} #s-qb2 .presets-tip{padding:0 20px 16px;font-size:10px;color:var(--t4);line-height:1.5} /* Preset cards */ #s-qb2 .pcard{background:var(--bg-1);border:1.5px solid var(--bg-2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s} #s-qb2 .pcard:hover{border-color:var(--accent);box-shadow:0 4px 16px var(--accent-ghost)} #s-qb2 .pcard-head{display:flex;align-items:flex-start;gap:8px} #s-qb2 .pcard-name{flex:1;font-size:13px;font-weight:800;color:var(--t1);line-height:1.3} #s-qb2 .pcard-date{font-size:9px;color:var(--t4);flex-shrink:0;margin-top:2px} #s-qb2 .pcard-pills{display:flex;flex-wrap:wrap;gap:4px} #s-qb2 .pcard-pill{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px} #s-qb2 .pcard-pill--city{background:var(--blue-bg);color:var(--blue)} #s-qb2 .pcard-pill--hotel{background:var(--green-bg);color:var(--green)} #s-qb2 .pcard-pill--act{background:var(--bg-2);color:var(--t3)} #s-qb2 .pcard-pill--tier{background:var(--accent-ghost);color:var(--accent-dn)} #s-qb2 .pcard-pill--timeline{background:#EDF1FF;color:#4a60c8;border:1px solid #c8d4f8} #s-qb2 .pcard-pill--pace{background:var(--bg-1);color:#7B6E63} #s-qb2 .pcard-pill--dur{background:#F0F7F5;color:var(--green)} #s-qb2 .pcard-detail{display:flex;flex-direction:column;gap:3px} #s-qb2 .pcard-meta-row{display:flex;align-items:flex-start;gap:5px;font-size:10px;color:var(--t4);line-height:1.4} #s-qb2 .pcard-meta-icon{flex-shrink:0;font-size:11px} #s-qb2 .pcard-actions{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap} #s-qb2 .pcard-btn{border:none;border-radius:8px;padding:6px 10px;font-size:10px;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap} #s-qb2 .pcard-btn--apply{flex:1;background:var(--green);color:var(--bg-1)} #s-qb2 .pcard-btn--apply:hover{background:#155a4a} #s-qb2 .pcard-btn--link{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bg)} #s-qb2 .pcard-btn--link:hover{background:var(--blue-bg);color:#2A4A68} #s-qb2 .pcard-btn--del{background:var(--bg-1);color:var(--t4);border:1px solid var(--bg-2);font-size:13px;padding:6px 10px} #s-qb2 .pcard-btn--del:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-bg)} #s-qb2 .pcard-linked{display:flex;align-items:center;gap:5px;margin-top:6px;padding:5px 8px;background:#FFF8E8;border:1px solid var(--accent-ring);border-radius:7px;font-size:9.5px} #s-qb2 .pcard-linked-label{color:var(--t4);font-weight:700;white-space:nowrap} #s-qb2 .pcard-linked-name{color:var(--t1);font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #s-qb2 .pcard-linked-x{background:none;border:none;color:var(--t4);font-size:12px;cursor:pointer;padding:0 2px;line-height:1} /* Preset empty state */ #s-qb2 .preset-empty{padding:40px 20px;text-align:center;grid-column:1/-1} #s-qb2 .preset-empty-icon{font-size:40px;margin-bottom:12px} #s-qb2 .preset-empty-title{font-size:15px;font-weight:800;color:var(--t1);margin-bottom:8px} #s-qb2 .preset-empty-sub{font-size:12px;color:var(--t4);line-height:1.6;max-width:280px;margin:0 auto} /* ── Standalone Presets Screen (#s-presets) — mirrors QB2 pcard styles ─── */ #s-presets .presets-page{padding:0 0 80px} #s-presets .presets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:16px 0} #s-presets .pcard{background:var(--bg-1);border:1.5px solid var(--bg-2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s} #s-presets .pcard:hover{border-color:var(--accent);box-shadow:0 4px 16px var(--accent-ghost)} #s-presets .pcard-head{display:flex;align-items:flex-start;gap:8px} #s-presets .pcard-name{flex:1;font-size:13px;font-weight:800;color:var(--t1);line-height:1.3} #s-presets .pcard-date{font-size:9px;color:var(--t4);flex-shrink:0;margin-top:2px} #s-presets .pcard-pills{display:flex;flex-wrap:wrap;gap:4px} #s-presets .pcard-pill{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px} #s-presets .pcard-pill--city{background:var(--blue-bg);color:var(--blue)} #s-presets .pcard-pill--hotel{background:var(--green-bg);color:var(--green)} #s-presets .pcard-pill--act{background:var(--bg-2);color:var(--t3)} #s-presets .pcard-pill--tier{background:var(--accent-ghost);color:var(--accent-dn)} #s-presets .pcard-pill--timeline{background:#EDF1FF;color:#4a60c8;border:1px solid #c8d4f8} #s-presets .pcard-pill--pace{background:var(--bg-1);color:#7B6E63} #s-presets .pcard-pill--dur{background:#F0F7F5;color:var(--green)} #s-presets .pcard-detail{display:flex;flex-direction:column;gap:3px} #s-presets .pcard-meta-row{display:flex;align-items:flex-start;gap:5px;font-size:10px;color:var(--t4);line-height:1.4} #s-presets .pcard-meta-icon{flex-shrink:0;font-size:11px} #s-presets .pcard-actions{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap} #s-presets .pcard-btn{border:none;border-radius:8px;padding:6px 10px;font-size:10px;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap} #s-presets .pcard-btn--apply{flex:1;background:var(--green);color:var(--bg-1)} #s-presets .pcard-btn--apply:hover{background:#155a4a} #s-presets .pcard-btn--link{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bg)} #s-presets .pcard-btn--link:hover{background:var(--blue-bg);color:#2A4A68} #s-presets .pcard-btn--del{background:var(--bg-1);color:var(--t4);border:1px solid var(--bg-2);font-size:13px;padding:6px 10px} #s-presets .pcard-btn--del:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-bg)} #s-presets .pcard-linked{display:flex;align-items:center;gap:5px;margin-top:6px;padding:5px 8px;background:#FFF8E8;border:1px solid var(--accent-ring);border-radius:7px;font-size:9.5px} #s-presets .pcard-linked-label{color:var(--t4);font-weight:700;white-space:nowrap} #s-presets .pcard-linked-name{color:var(--t1);font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #s-presets .pcard-linked-x{background:none;border:none;color:var(--t4);font-size:12px;cursor:pointer;padding:0 2px;line-height:1} #s-presets .preset-empty{padding:60px 20px;text-align:center;grid-column:1/-1} #s-presets .preset-empty-icon{font-size:48px;margin-bottom:14px} #s-presets .preset-empty-title{font-size:16px;font-weight:800;color:var(--t1);margin-bottom:8px} #s-presets .preset-empty-sub{font-size:13px;color:var(--t4);line-height:1.6;max-width:380px;margin:0 auto} #s-presets .presets-search{display:block;width:100%;box-sizing:border-box;padding:9px 14px;border:1.5px solid var(--b1);border-radius:10px;font-size:12px;font-family:inherit;background:var(--bg-1);outline:none;margin-bottom:4px} #s-presets .presets-search:focus{border-color:var(--accent)} #s-presets .presets-tip{margin-top:16px;font-size:11px;color:var(--t4);line-height:1.5} /* ── Day Presets (overlay) ─────────────────────────────── */ #s-qb2 .preset-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto} #s-qb2 .preset-row{padding:10px 12px;border-radius:12px;border:1.5px solid var(--bg-2);background:var(--bg-1);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s} #s-qb2 .preset-row:hover{border-color:var(--accent);background:var(--accent-ghost);box-shadow:0 2px 8px var(--accent-ghost)} #s-qb2 .preset-row-head{display:flex;align-items:center;gap:8px;margin-bottom:3px} #s-qb2 .preset-name{font-size:12px;font-weight:700;color:var(--t1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #s-qb2 .preset-date{font-size:9px;color:var(--t4);flex-shrink:0} #s-qb2 .preset-del{font-size:14px;color:var(--t4);cursor:pointer;flex-shrink:0;line-height:1;padding:0 2px;transition:color .15s} #s-qb2 .preset-del:hover{color:var(--red)} #s-qb2 .preset-meta{font-size:10px;color:var(--t4);line-height:1.6} /* ── Chat-to-Change Bar ─────────────────────────────────── */ /* ── Floating Chat FAB + Popup ────────────────────────── */ #s-qb2 .qb2-chat-fab{ position:fixed;bottom:28px;right:28px;z-index:400; width:52px;height:52px;border-radius:50%;border:none; background:var(--accent-metal); color:var(--bg-1);font-size:22px;cursor:pointer; box-shadow:0 4px 20px rgba(139,105,20,.35),0 0 0 0 rgba(196,154,60,.4); transition:transform .2s,box-shadow .2s; display:flex;align-items:center;justify-content:center; } #s-qb2 .qb2-chat-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(139,105,20,.45)} #s-qb2 .qb2-chat-fab.hidden{transform:scale(0);opacity:0;pointer-events:none} #s-qb2 .qb2-chat-popup{ position:fixed;bottom:28px;right:28px;z-index:401; width:380px;max-height:500px; background:var(--t1);border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,.35),0 0 0 1px rgba(232,221,212,.1); display:flex;flex-direction:column; transform:scale(0.4) translateY(40px);opacity:0;pointer-events:none; transform-origin:bottom right; transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s; } #s-qb2 .qb2-chat-popup.open{transform:scale(1) translateY(0);opacity:1;pointer-events:auto} #s-qb2 .qb2-chat-popup-head{ display:flex;align-items:center;justify-content:space-between; padding:14px 16px;border-bottom:1px solid rgba(232,221,212,.1); } #s-qb2 .qb2-chat-popup-title{font-size:13px;font-weight:700;color:var(--accent)} #s-qb2 .qb2-chat-popup-close{background:none;border:none;color:rgba(250,240,220,.4);font-size:20px;cursor:pointer;padding:0 4px;line-height:1} #s-qb2 .qb2-chat-popup-close:hover{color:#FAF0DC} #s-qb2 .qb2-chat-popup-body{ flex:1;overflow-y:auto;padding:12px 16px;min-height:120px;max-height:320px; display:flex;flex-direction:column;gap:8px; } #s-qb2 .qb2-chat-hint{font-size:11px;color:rgba(250,240,220,.3);text-align:center;padding:16px 0;line-height:1.5} #s-qb2 .qb2-chat-popup-input{ display:flex;gap:6px;align-items:center; padding:10px 12px;border-top:1px solid rgba(232,221,212,.1); } #s-qb2 .qb2-chat-input{ flex:1;padding:10px 14px;border:1px solid rgba(232,221,212,.2); border-radius:10px;background:rgba(255,255,255,.08);color:#FAF0DC; font-family:"Syne",system-ui,sans-serif;font-size:13px;outline:none; transition:border-color .15s,background .15s; } #s-qb2 .qb2-chat-input:focus{border-color:var(--accent);background:rgba(255,255,255,.12)} #s-qb2 .qb2-chat-input::placeholder{color:rgba(250,240,220,.35)} #s-qb2 .qb2-chat-send{ width:36px;height:36px;border-radius:8px;border:none;cursor:pointer; font-size:14px;display:flex;align-items:center;justify-content:center; background:var(--accent);color:var(--t1);transition:filter .15s; } #s-qb2 .qb2-chat-send:hover{filter:brightness(1.1)} /* Chat result inside popup */ #s-qb2 .qb2-chat-result{padding:8px 12px} @media(max-width:480px){ #s-qb2 .qb2-chat-popup{width:calc(100vw - 24px);right:12px;bottom:12px;max-height:70vh} #s-qb2 .qb2-chat-fab{bottom:16px;right:16px} } #s-qb2 .qb2-chat-success{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--green-bg);color:var(--green);font-size:12px;font-weight:600} #s-qb2 .qb2-chat-whatif{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:rgba(196,146,28,.1);color:var(--accent-dn);font-size:12px;font-weight:600} #s-qb2 .qb2-chat-error{padding:8px 12px;border-radius:8px;background:rgba(183,63,63,.1);color:var(--red);font-size:12px;font-weight:600} #s-qb2 .qb2-chat-loading{padding:8px 12px;border-radius:8px;background:rgba(196,146,28,.08);color:var(--accent);font-size:12px;font-style:italic} #s-qb2 .qb2-chat-label{flex:1} #s-qb2 .qb2-chat-delta{font-weight:700;font-family:"Syne",system-ui,sans-serif;font-size:13px} #s-qb2 .qb2-chat-delta.up{color:var(--red)} #s-qb2 .qb2-chat-delta.down{color:var(--green)} #s-qb2 .qb2-chat-delta.neutral{color:#8C7E72} #s-qb2 .qb2-chat-accept{padding:4px 12px;border-radius:6px;border:none;background:var(--green);color:var(--bg-1);font-size:11px;font-weight:700;cursor:pointer} #s-qb2 .qb2-chat-reject{padding:4px 12px;border-radius:6px;border:1px solid rgba(0,0,0,.1);background:transparent;color:var(--t3);font-size:11px;font-weight:700;cursor:pointer} /* ── Intelligence Items (Route Day Panel) ────────────── */ #s-qb2 .intel{display:flex;flex-direction:column;gap:4px;margin-top:8px} #s-qb2 .intel-item{display:flex;gap:8px;padding:8px 12px;border-radius:10px;margin-bottom:0;font-size:11px;line-height:1.4;align-items:flex-start} #s-qb2 .intel-item.suggest{background:var(--accent-ghost);border:1px solid var(--accent-ring);color:var(--accent-dn)} #s-qb2 .intel-item.warn{background:var(--accent-ghost);border:1px solid var(--accent-ring);color:var(--accent-dn)} #s-qb2 .intel-item.info{background:var(--blue-bg);border:1px solid #c8d8ea;color:var(--blue)} #s-qb2 .intel-item.ok{background:var(--green-bg);border:1px solid var(--green-bg);color:var(--green)} #s-qb2 .intel-icon{font-size:14px;flex-shrink:0;line-height:1.3} #s-qb2 .intel-text{flex:1;font-weight:600} #s-qb2 .intel-btn{font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;border:1.5px solid currentColor;background:rgba(255,255,255,.6);cursor:pointer;white-space:nowrap;flex-shrink:0;align-self:center;font-family:inherit} #s-qb2 .intel-btn:hover{background:rgba(255,255,255,.9)} /* ── Pulse Dots (Collapsed Day Cards) ────────────────── */ #s-qb2 .pulse{display:flex;gap:3px;margin-top:4px;justify-content:flex-end} #s-qb2 .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--b1)} #s-qb2 .pulse-dot.on{background:var(--accent)} #s-qb2 .pulse-dot.hi{background:var(--green)} /* ── Day Panel Divider ───────────────────────────────── */ #s-qb2 .day-divider{text-align:center;margin:14px 0 10px;position:relative} #s-qb2 .day-divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--b1)} #s-qb2 .day-divider span{position:relative;background:var(--bg-1);padding:0 12px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t4)} /* ── Enhanced Hotel Picker (Overlay) — legacy rules removed E4 ─── */ /* ── Day Header (Expanded Panel) ───────────────────────── */ #s-qb2 .day-header{padding:12px 18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--bg-2);background:linear-gradient(180deg,var(--bg-1),var(--bg-1))} #s-qb2 .day-header-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0} #s-qb2 .day-preset-btn{flex-shrink:0;font-size:10px;font-weight:700;color:var(--accent-dn);background:var(--accent-ghost);border:1px solid var(--accent-ring);border-radius:8px;padding:5px 10px;cursor:pointer;white-space:nowrap;transition:background .15s,box-shadow .15s} #s-qb2 .day-preset-btn:hover{background:var(--accent-ghost);box-shadow:0 2px 8px var(--accent-seam)} #s-qb2 .day-preset-btn--load{color:var(--blue);background:var(--blue-bg);border-color:var(--blue-bg)} #s-qb2 .day-preset-btn--load:hover{background:var(--blue-bg);box-shadow:0 2px 8px rgba(74,101,128,.12)} /* Day picker popup */ .day-pick-list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto} .day-pick-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;cursor:pointer;transition:background .12s;border:1px solid transparent} .day-pick-row:hover{background:var(--green-bg);border-color:#B8E0D3} .day-pick-num{width:22px;height:22px;border-radius:7px;background:var(--green);color:var(--bg-1);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0} .day-pick-label{font-size:11px;font-weight:600;color:var(--t1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .day-pick-filled{font-size:12px;opacity:.5;flex-shrink:0} #s-qb2 .day-num{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--bg-1);background:var(--accent-metal);flex-shrink:0;box-shadow:0 4px 12px rgba(139,105,20,.2)} #s-qb2 .day-meta{flex:1;min-width:0} #s-qb2 .day-title{font-size:14px;font-weight:800;color:var(--t1)} #s-qb2 .day-subtitle{font-size:10px;color:var(--t4);margin-top:2px} #s-qb2 .dtype{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;flex-shrink:0} #s-qb2 .dtype.transfer{background:var(--blue-bg);color:var(--blue)} #s-qb2 .dtype.base{background:var(--green-bg);color:var(--green)} #s-qb2 .dtype.arrival{background:#fce8ec;color:#8B4A5E} #s-qb2 .dtype.departure{background:var(--accent-ghost);color:var(--accent-dn)} #s-qb2 .tag-violet{background:#fce8ec;color:#8B4A5E;border-color:#e8cfd4} /* ── Timeline ──────────────────────────────────────────── */ #s-qb2 .tl{padding:16px 18px} #s-qb2 .tl-item{display:flex;gap:12px} #s-qb2 .tl-rail{display:flex;flex-direction:column;align-items:center;width:18px;flex-shrink:0} #s-qb2 .tl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;border:2px solid var(--b2);background:var(--bg-1);z-index:1} #s-qb2 .tl-dot.gold{border-color:var(--accent);background:var(--accent-ghost)} #s-qb2 .tl-dot.green{border-color:var(--green);background:var(--green-bg)} #s-qb2 .tl-dot.amber{border-color:var(--accent-dn);background:var(--accent-ghost)} #s-qb2 .tl-line{flex:1;width:2px;background:var(--b1);min-height:20px} #s-qb2 .tl-line.dashed{background:repeating-linear-gradient(180deg,var(--b2) 0,var(--b2) 3px,transparent 3px,transparent 6px)} /* .tl-body/.tl-place/.tl-desc/.tl-act/.tl-drag-grip/.tl-dur-badge — legacy removed E4 (superseded by E1 .tl-item-body rules) */ #s-qb2 .tl-time{font-size:10px;font-weight:700;color:var(--t4);margin-bottom:2px} #s-qb2 .tl-free{background:var(--bg-1);border-radius:8px;padding:8px 12px;margin-top:4px;font-size:11px;color:var(--t4);font-weight:600;font-style:italic} /* ── Timeline Interactive: Drag + Swipe ─────────────── */ #s-qb2 .tl-item[data-draggable="1"]{position:relative;cursor:grab;touch-action:none;transition:opacity .2s} #s-qb2 .tl-item[data-draggable="1"]:active{cursor:grabbing} #s-qb2 .tl-item[data-draggable="0"]{cursor:default} #s-qb2 .tl-item[data-draggable="1"] button, #s-qb2 .tl-item[data-draggable="1"] input, #s-qb2 .tl-item[data-draggable="1"] a{cursor:pointer;touch-action:auto} #s-qb2 .tl-item--placeholder{opacity:.25!important} #s-qb2 .tl-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.88;box-shadow:0 12px 36px rgba(26,23,20,.15),0 2px 8px var(--b1);border-radius:10px;background:var(--bg-1);will-change:transform;padding:6px 10px} #s-qb2 .tl-drop-above{border-top:2.5px solid var(--accent)!important} #s-qb2 .tl-drop-below{border-bottom:2.5px solid var(--accent)!important} #s-qb2.is-dragging .tl-item:not(.tl-item--placeholder){transition:transform .15s ease} #s-qb2 .tl-free-slot{background:var(--bg-1);border-radius:8px;padding:6px 12px;font-size:11px;color:var(--t4);font-weight:600;font-style:italic;margin:4px 0} #s-qb2 .tl-swipe-delete{position:absolute;right:0;top:0;bottom:0;width:72px;display:flex;align-items:center;justify-content:center;background:var(--red);color:var(--bg-1);font-size:11px;font-weight:800;border-radius:0 10px 10px 0;cursor:pointer;z-index:2} /* ── Enhanced Time Budget (M/A/E Blocks) ─────────────── */ #s-qb2 .tb-enhanced{display:flex;gap:6px;margin:12px 18px} #s-qb2 .tb-block{flex:1;border-radius:10px;padding:8px 10px;background:var(--bg-1);border:1px solid var(--b1)} #s-qb2 .tb-morning{border-left:3px solid var(--accent)} #s-qb2 .tb-afternoon{border-left:3px solid var(--green)} #s-qb2 .tb-evening{border-left:3px solid var(--blue)} #s-qb2 .tb-block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} #s-qb2 .tb-block-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--t4)} #s-qb2 .tb-block-range{font-size:8px;color:var(--t4)} #s-qb2 .tb-block-items{display:flex;flex-direction:column;gap:2px} #s-qb2 .tb-chip{font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px} #s-qb2 .tb-chip.drive{color:var(--blue);background:var(--blue-bg)} #s-qb2 .tb-chip.act{color:var(--green);background:var(--green-bg)} #s-qb2 .tb-chip.free{color:var(--t4);background:var(--bg-1);font-style:italic} #s-qb2 .tb-chip.checkin{color:var(--accent);background:var(--accent-ghost)} /* ── Time Budget Bar ───────────────────────────────────── */ #s-qb2 .tb{padding:0 18px 14px} #s-qb2 .tb-bar{display:flex;height:24px;border-radius:8px;overflow:hidden;background:var(--bg-2);border:1px solid var(--b1)} #s-qb2 .tb-seg{display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;text-transform:uppercase;color:rgba(255,255,255,.9);min-width:16px} #s-qb2 .tb-seg.drive{background:linear-gradient(135deg,#8a9bae,var(--blue))} #s-qb2 .tb-seg.act{background:linear-gradient(135deg,#2e9c7f,var(--green))} #s-qb2 .tb-seg.free{background:transparent;color:var(--t4)} #s-qb2 .tb-seg.meal{background:linear-gradient(135deg,var(--accent),#d4a843)} /* ── Hotel Intelligence Panel — legacy .htl-panel/.htl-head removed E4 ─── */ #s-qb2 .zone-tag{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green);background:var(--green-bg);border:1px solid var(--green-bg);padding:3px 8px;border-radius:999px} #s-qb2 .tier-tog{display:flex;gap:3px;margin-left:auto} #s-qb2 .tier-btn{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1.5px solid var(--b1);background:var(--bg-1);color:var(--t4);cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit} #s-qb2 .tier-btn:hover{border-color:var(--accent);color:var(--accent-dn)} #s-qb2 .tier-btn.on{background:var(--accent);color:var(--bg-1);border-color:var(--accent)} #s-qb2 .htl-zone-tabs{display:flex;gap:0;border-bottom:1px solid var(--b1);margin-bottom:12px} #s-qb2 .htl-zone-tab{padding:8px 14px;font-size:11px;font-weight:700;color:var(--t4);border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s} #s-qb2 .htl-zone-tab:hover{color:var(--t1)} #s-qb2 .htl-zone-tab.on{color:var(--accent-dn);border-bottom-color:var(--accent)} #s-qb2 .htl-search-btn{padding:10px 16px;border:none;border-radius:12px;background:var(--accent-metal);color:var(--bg-1);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit} /* ── Compare Tray ──────────────────────────────────────── */ #s-qb2 .compare-tray{background:var(--bg-1);border:1px solid var(--b1);border-radius:14px;padding:14px;margin-top:12px;box-shadow:0 4px 16px var(--b1)} #s-qb2 .compare-tray-head{display:flex;align-items:center;gap:8px;margin-bottom:10px} #s-qb2 .compare-tray-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dn)} #s-qb2 .compare-grid{display:grid;grid-template-columns:100px 1fr 1fr 1fr;gap:0;font-size:11px} #s-qb2 .compare-grid .cg-label{padding:6px 8px;font-weight:700;color:var(--t4);background:var(--bg-1);border-bottom:1px solid var(--bg-2)} #s-qb2 .compare-grid .cg-val{padding:6px 8px;text-align:center;border-bottom:1px solid var(--bg-2)} #s-qb2 .compare-grid .cg-val.best{font-weight:800;color:var(--green)} /* ── Hotel Option Slots — legacy rules removed E4 ─── */ /* ── Child Policy Band Editor ─────────────────────────── */ #s-qb2 .cp-bands-wrap{display:flex;flex-direction:column;gap:8px} #s-qb2 .cp-band-row{ display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap; padding:10px 12px;border-radius:12px;background:var(--bg-1);border:1px solid var(--b1); } #s-qb2 .cp-band-age{ font-size:13px;font-weight:800;color:var(--accent-dn);min-width:70px; padding:8px 0;white-space:nowrap; } #s-qb2 .cp-band-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:80px} #s-qb2 .cp-band-field label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t4)} #s-qb2 .cp-band-field input,#s-qb2 .cp-band-field select{ font-size:12px;padding:6px 8px;border-radius:8px;border:1px solid var(--b1); background:var(--bg-1);font-family:inherit;outline:none;width:100%; } #s-qb2 .cp-band-field input:focus,#s-qb2 .cp-band-field select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-ghost)} #s-qb2 .cp-band-remove{ width:26px;height:26px;border-radius:8px;border:1px solid var(--red-bg); background:var(--red-bg);color:var(--red);font-size:16px;cursor:pointer; display:flex;align-items:center;justify-content:center;flex-shrink:0; align-self:flex-end;margin-bottom:2px; } #s-qb2 .cp-band-remove:hover{background:#fecaca;border-color:#f87171} #s-qb2 .cp-child-summary{display:flex;gap:6px;flex-wrap:wrap} #s-qb2 .cp-child-tag{ font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px; } #s-qb2 .cp-child-tag.free{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bg)} #s-qb2 .cp-child-tag.charge{background:var(--accent-ghost);color:var(--accent-dn);border:1px solid var(--b1)} #s-qb2 .cp-child-tag.adult{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bg)} @media(max-width:600px){ #s-qb2 .cp-band-row{flex-direction:column;align-items:stretch} #s-qb2 .cp-band-age{min-width:auto} } /* ── Send Studio ──────────────────────────────────────── */ #s-qb2 .send-studio{border-color:#25D366;border-width:1.5px} /* Message type tabs */ #s-qb2 .ss-type-tabs{display:flex;gap:0;border-bottom:2px solid var(--b1);margin-bottom:14px} #s-qb2 .ss-type-tab{ flex:1;padding:10px 8px;font-size:11px;font-weight:700;text-align:center; background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px; color:var(--t4);cursor:pointer;transition:color .15s,border-color .15s;font-family:inherit; } #s-qb2 .ss-type-tab:hover{color:var(--t1)} #s-qb2 .ss-type-tab.active{color:#25D366;border-bottom-color:#25D366} /* Template cards */ #s-qb2 .ss-templates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px} @media(max-width:600px){#s-qb2 .ss-templates{grid-template-columns:1fr}} #s-qb2 .ss-tpl-card{ border:1.5px solid var(--b1);border-radius:12px;padding:10px 12px;cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; } #s-qb2 .ss-tpl-card:hover{border-color:#25D366;background:#f0faf5} #s-qb2 .ss-tpl-card.active{border-color:#25D366;background:#edfaf3;box-shadow:0 0 0 3px rgba(37,211,102,.12)} #s-qb2 .ss-tpl-name{font-size:12px;font-weight:800;color:var(--t1);margin-bottom:4px} #s-qb2 .ss-tpl-card.active .ss-tpl-name{color:#25D366} #s-qb2 .ss-tpl-preview{font-size:10px;color:var(--t4);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #s-qb2 .ss-tpl-meta{font-size:9px;color:var(--t4);margin-top:4px} /* WhatsApp chat preview */ #s-qb2 .ss-wa-chat{ border-radius:14px;overflow:hidden;margin-bottom:14px; background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='60' height='60' fill='%23ECE5DD'/%3E%3Ccircle cx='30' cy='30' r='1' fill='%23d4cec4' opacity='.5'/%3E%3C/svg%3E") repeat; background-color:#ECE5DD; } #s-qb2 .ss-wa-header{ background:#075E54;color:var(--bg-1);padding:10px 14px;font-size:12px;font-weight:700; display:flex;align-items:center;gap:8px; } #s-qb2 .ss-wa-header::before{content:'\u25C0';font-size:14px;opacity:.6} #s-qb2 .ss-wa-body{padding:12px 10px} #s-qb2 .ss-wa-bubble{ background:#DCF8C6;border-radius:0 10px 10px 10px;padding:10px 14px; max-width:85%;font-size:13px;line-height:1.6;color:#111; box-shadow:0 1px 2px var(--b1);outline:none; word-wrap:break-word;position:relative; } #s-qb2 .ss-wa-bubble:focus{box-shadow:0 0 0 2px rgba(37,211,102,.3),0 1px 2px var(--b1)} #s-qb2 .ss-wa-bubble::before{ content:'';position:absolute;top:0;left:-8px; border-width:0 8px 8px 0;border-style:solid;border-color:transparent #DCF8C6 transparent transparent; } #s-qb2 .ss-wa-time{text-align:right;font-size:10px;color:#999;padding:4px 14px 8px;margin-top:-4px} #s-qb2 .ss-wa-meta{ background:var(--bg-1);padding:8px 14px;font-size:10px;color:var(--t4); border-top:1px solid var(--b1);text-align:center; } /* Big green send button */ #s-qb2 .ss-send-btn{ display:block;width:100%;padding:14px 20px;margin-bottom:10px; background:#25D366;color:var(--bg-1);border:none;border-radius:14px; font-size:15px;font-weight:800;cursor:pointer;font-family:inherit; transition:background .15s,transform .15s,box-shadow .15s; box-shadow:0 4px 16px rgba(37,211,102,.25); } #s-qb2 .ss-send-btn:hover{background:#20c05c;transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,211,102,.35)} /* Advanced controls */ #s-qb2 .ss-advanced{margin-top:12px} #s-qb2 .ss-advanced summary{ font-size:11px;font-weight:700;color:var(--t4);cursor:pointer; padding:8px 0;list-style:none;display:flex;align-items:center;gap:6px; } #s-qb2 .ss-advanced summary::before{content:'\u25B6';font-size:8px;transition:transform .2s} #s-qb2 .ss-advanced[open] summary::before{transform:rotate(90deg)} #s-qb2 .ss-advanced summary::-webkit-details-marker{display:none} /* ── Proposal Textarea (legacy, kept for compat) ─────── */ #s-qb2 .proposal-textarea{ width:100%;min-height:180px;font-size:13px;line-height:1.6; border:1px solid var(--b1);border-radius:12px;padding:14px 16px; background:var(--bg-1);color:var(--t1);font-family:inherit;outline:none; resize:vertical; } #s-qb2 .proposal-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-seam)} /* ═══════════════════════════════════════════════════════════ QB2 DESIGN MIGRATION — LWS v6.1 additive layer (S1-S10 + discovered gaps; all scoped under #s-qb2) ═══════════════════════════════════════════════════════════ */ /* ── S6: Day card golden border-top accent seam ───────────── */ #s-qb2 .day-c{border-top:1px solid rgba(196,152,32,.4)} #s-qb2 .day-c.expanded{border-top-color:var(--accent)} /* ── S7: base-city metal gradient tag ─────────────────────── */ #s-qb2 .city-tag.base-city, #s-qb2 .city-tag-ed.base-city{ background:var(--accent-metal); color:#0A0804;border-color:transparent;font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 var(--b3); } #s-qb2 .city-tag.base-city .city-x, #s-qb2 .city-tag-ed.base-city .city-tag-x{color:rgba(10,8,4,.45)} #s-qb2 .city-tag.base-city .city-x:hover, #s-qb2 .city-tag-ed.base-city .city-tag-x:hover{color:#0A0804;background:rgba(255,255,255,.3)} /* ── S1: Skeleton / shimmer loaders ───────────────────────── */ #s-qb2 .qb2-skeleton{ position:relative;overflow:hidden; background:var(--bg-2);border-radius:10px; } #s-qb2 .qb2-skeleton::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent 0%,var(--bg-3) 50%,transparent 100%); animation:qb2Shimmer 1.8s infinite; } @keyframes qb2Shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} #s-qb2 .qb2-skel-line{height:12px;margin-bottom:8px;border-radius:6px;background:var(--bg-2);position:relative;overflow:hidden} #s-qb2 .qb2-skel-line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--bg-3) 50%,transparent 100%);animation:qb2Shimmer 1.8s infinite} #s-qb2 .qb2-skel-line.w40{width:40%} #s-qb2 .qb2-skel-line.w60{width:60%} #s-qb2 .qb2-skel-line.w80{width:80%} #s-qb2 .qb2-skel-line.w100{width:100%} #s-qb2 .qb2-skel-line.h20{height:20px} #s-qb2 .qb2-skel-line.h32{height:32px} #s-qb2 .qb2-skel-circle{width:44px;height:44px;border-radius:50%;background:var(--bg-2);position:relative;overflow:hidden;flex-shrink:0} #s-qb2 .qb2-skel-circle::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--bg-3) 50%,transparent 100%);animation:qb2Shimmer 1.8s infinite} #s-qb2 .qb2-skel-card{padding:16px;border-radius:14px;border:1px solid var(--b1);background:var(--bg-1);margin-bottom:10px} #s-qb2 .qb2-skel-day{padding:16px 20px;border-radius:14px;border:1px solid var(--b1);border-top:2px solid rgba(196,152,32,.4);background:var(--bg-1);margin-bottom:10px;display:flex;gap:14px;align-items:center} #s-qb2 .qb2-skel-hotel{padding:12px;border-radius:14px;border:1px solid var(--b1);background:var(--bg-1);margin-bottom:8px;display:flex;gap:12px;align-items:center} #s-qb2 .qb2-skel-act{padding:10px 14px;border-radius:10px;background:var(--bg-2);margin-bottom:4px;display:flex;gap:10px;align-items:center} /* ── S2: Empty state cards ────────────────────────────────── */ #s-qb2 .qb2-empty-card{ text-align:center;padding:48px 24px; background:var(--bg-1);border:1px solid var(--b1);border-top:2px solid rgba(196,152,32,.4); border-radius:20px;margin:24px; } #s-qb2 .qb2-empty-card .qb2-empty-icon{font-size:48px;margin-bottom:12px;opacity:.5} #s-qb2 .qb2-empty-card .qb2-empty-title{font-family:var(--fd);font-size:22px;font-weight:400;color:var(--t2);margin-bottom:6px;letter-spacing:-.01em} #s-qb2 .qb2-empty-card .qb2-empty-sub{font-size:13px;color:var(--t4);line-height:1.6;max-width:320px;margin:0 auto 16px} #s-qb2 .qb2-empty-cta{ display:inline-flex;align-items:center;gap:6px; padding:10px 24px;border-radius:999px;border:none;cursor:pointer; font-family:var(--fu);font-size:11px;font-weight:700; letter-spacing:.06em;text-transform:uppercase; background:var(--accent-metal); color:#080706; box-shadow:0 4px 14px rgba(168,116,18,.28),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 var(--b3); position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s; } #s-qb2 .qb2-empty-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 55%);pointer-events:none} #s-qb2 .qb2-empty-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(168,116,18,.38),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 var(--b3)} /* ── S3: Preset Save Modal ────────────────────────────────── */ #s-qb2 .prst-save-modal-overlay, .prst-save-modal-overlay{ position:fixed;inset:0;z-index:10100; background:rgba(20,14,8,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;padding:20px; animation:qb2ModalFade .18s ease-out; } @keyframes qb2ModalFade{from{opacity:0}to{opacity:1}} @keyframes qb2ModalRise{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} .prst-save-modal-overlay .prst-save-modal{ background:var(--bg-1);border:1px solid var(--b1);border-top:2px solid var(--accent); border-radius:20px;width:100%;max-width:460px; box-shadow:0 24px 64px var(--b3),0 8px 24px rgba(20,14,8,.12); font-family:var(--fb); animation:qb2ModalRise .22s cubic-bezier(.2,.9,.3,1);overflow:hidden; } .prst-save-modal-overlay .prst-save-modal-head{padding:22px 26px 14px;border-bottom:1px solid var(--bg-0)} .prst-save-modal-overlay .prst-save-modal-title{font-family:var(--fd);font-size:24px;font-weight:500;color:var(--t1);letter-spacing:-.01em;line-height:1.2} .prst-save-modal-overlay .prst-save-modal-sub{font-size:12px;color:var(--t4);margin-top:4px;line-height:1.5} .prst-save-modal-overlay .prst-save-modal-body{padding:18px 26px 20px;display:flex;flex-direction:column;gap:16px} .prst-save-modal-overlay .prst-save-modal-field{display:flex;flex-direction:column;gap:6px} .prst-save-modal-overlay .prst-save-modal-label{font-family:var(--fu);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)} .prst-save-modal-overlay .prst-save-modal-input{ width:100%;padding:10px 12px;border:1.5px solid var(--b1);border-radius:10px; font-size:13px;font-family:inherit;color:var(--t1);background:var(--bg-1);outline:none; transition:border-color .15s,box-shadow .15s; } .prst-save-modal-overlay .prst-save-modal-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-seam)} .prst-save-modal-overlay .prst-save-modal-preview{ background:var(--bg-0);border:1px solid var(--bg-2);border-radius:10px;padding:10px 12px; display:flex;flex-direction:column;gap:6px; } .prst-save-modal-overlay .prst-save-modal-preview-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2)} .prst-save-modal-overlay .prst-save-modal-preview-icon{font-size:13px;width:18px;text-align:center;flex-shrink:0} .prst-save-modal-overlay .prst-save-modal-preview-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prst-save-modal-overlay .prst-save-modal-foot{ padding:14px 26px 20px;display:flex;gap:8px;justify-content:flex-end; border-top:1px solid var(--bg-0);background:var(--bg-1); } .prst-save-modal-overlay .prst-save-modal-btn{ padding:9px 18px;border-radius:999px;font-family:var(--fu); font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s; } .prst-save-modal-overlay .prst-save-modal-btn.cancel{background:var(--bg-1);border-color:var(--bg-3);color:var(--t3)} .prst-save-modal-overlay .prst-save-modal-btn.cancel:hover{background:var(--bg-0);color:var(--t1)} .prst-save-modal-overlay .prst-save-modal-btn.save{ background:var(--accent-metal);color:#080706; box-shadow:0 4px 14px rgba(168,116,18,.28),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 var(--b3); } .prst-save-modal-overlay .prst-save-modal-btn.save:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(168,116,18,.38),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 var(--b3)} /* ── S4: Activity price editor popup class ────────────────── */ #s-qb2 .qb2-price-editor, .qb2-price-editor{ position:fixed;z-index:9999; background:var(--bg-1);border:1px solid var(--b1);border-top:2px solid var(--accent); border-radius:14px;box-shadow:0 12px 36px rgba(20,14,8,.22),0 4px 12px rgba(20,14,8,.1); padding:14px 16px;min-width:240px; font-family:var(--fb); animation:qb2ModalRise .18s cubic-bezier(.2,.9,.3,1); } .qb2-price-editor .qb2-pe-label{font-family:var(--fu);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:6px} .qb2-price-editor .qb2-pe-auto{font-size:11px;color:var(--t4);margin-bottom:8px} .qb2-price-editor .qb2-pe-row{display:flex;gap:8px;align-items:center} .qb2-price-editor .qb2-pe-sym{font-family:var(--fd);font-size:16px;font-weight:600;color:var(--t3)} .qb2-price-editor .qb2-pe-input{flex:1;border:1.5px solid var(--b1);border-radius:8px;padding:7px 10px;font-size:13px;font-family:inherit;width:90px;outline:none;background:var(--bg-1);color:var(--t1);transition:border-color .15s,box-shadow .15s} .qb2-price-editor .qb2-pe-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-seam)} .qb2-price-editor .qb2-pe-btns{display:flex;gap:6px;margin-top:10px} .qb2-price-editor .qb2-pe-btn{font-family:var(--fu);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:8px;padding:7px 12px;cursor:pointer;border:1px solid transparent;transition:background .15s,transform .15s} .qb2-price-editor .qb2-pe-btn.apply{flex:1;background:var(--green);color:var(--bg-1)} .qb2-price-editor .qb2-pe-btn.apply:hover{background:#155a4b;transform:translateY(-1px)} .qb2-price-editor .qb2-pe-btn.reset{background:var(--bg-0);color:var(--t3);border-color:var(--bg-3)} .qb2-price-editor .qb2-pe-btn.reset:hover{background:var(--bg-2);color:var(--t1)} .qb2-price-editor .qb2-pe-btn.cancel{background:var(--bg-0);color:var(--t3);border-color:var(--bg-3)} .qb2-price-editor .qb2-pe-btn.cancel:hover{background:var(--bg-2);color:var(--t1)} /* ── S5: Timeline polish ──────────────────────────────────── */ #s-qb2 .tl-photo-strip{display:flex;gap:3px;margin-top:6px} #s-qb2 .tl-photo{ width:36px;height:36px;border-radius:6px;background:var(--bg-3); border:1px solid var(--b1);overflow:hidden;display:flex;align-items:center; justify-content:center;font-size:14px;flex-shrink:0; } #s-qb2 .tl-photo img{width:100%;height:100%;object-fit:cover;display:block} /* .tl-weather/.tl-weather-icon/.tl-progress (Turn C dups) — removed E4 */ #s-qb2 .tl-item-card{ background:var(--bg-2);border:1px solid var(--b1);border-radius:10px; padding:8px 12px;margin:2px 0;transition:background .15s,border-color .15s,box-shadow .15s; } #s-qb2 .tl-item-card:hover{background:var(--bg-3);border-color:var(--bg-4);box-shadow:0 2px 8px var(--b1)} #s-qb2 .tl-item-card.highlight{border-left:3px solid var(--accent);padding-left:9px} #s-qb2 .tl-item-card.drive-card{border-style:dashed;background:transparent} /* ── S8: Setup step progress bar (scoped defensively) ─────── */ #s-qb2 .setup-steps{display:flex;gap:0;padding:0 24px;margin-bottom:20px} #s-qb2 .setup-step{ flex:1;display:flex;align-items:center;gap:8px;padding:10px 14px; border-bottom:2px solid var(--b1);cursor:pointer;transition:border-color .15s; } #s-qb2 .setup-step:hover{border-bottom-color:var(--bg-4)} #s-qb2 .setup-step.active{border-bottom-color:var(--accent)} #s-qb2 .setup-step.done{border-bottom-color:var(--green)} #s-qb2 .setup-step-num{ width:22px;height:22px;border-radius:50%;border:1.5px solid var(--b1); display:flex;align-items:center;justify-content:center; font-family:var(--fu);font-size:10px;font-weight:800; color:var(--t4);background:var(--bg-1);flex-shrink:0;transition:all .15s; } #s-qb2 .setup-step.active .setup-step-num{background:var(--accent);color:#080706;border-color:var(--accent)} #s-qb2 .setup-step.done .setup-step-num{background:var(--green);color:var(--bg-1);border-color:var(--green)} #s-qb2 .setup-step-text{font-family:var(--fu);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t4)} #s-qb2 .setup-step.active .setup-step-text{color:var(--accent)} #s-qb2 .setup-step.done .setup-step-text{color:var(--green)} @media(max-width:700px){ #s-qb2 .setup-steps{flex-direction:column} #s-qb2 .setup-step{border-bottom:none;border-left:2px solid var(--b1)} #s-qb2 .setup-step.active{border-left-color:var(--accent)} #s-qb2 .setup-step.done{border-left-color:var(--green)} } /* ═══════════════════════════════════════════════════════════ QB2 PROTOTYPE-MATCH (Turn A — §1 Shell + §2 Setup, v68a) All values inlined; zero var() usage here. ═══════════════════════════════════════════════════════════ */ /* Neutralize legacy sidebar-layout rules — the new shell is hero-at-top. Kept as rules (not deletion) so prior helpers still compile. */ #s-qb2 .qb2-sidebar{display:none !important} #s-qb2 .qb2-mob-tabs{display:none !important} #s-qb2 .qb2-mob-save-fab{display:none !important} #s-qb2 .qb2-persistent-hero{display:none !important} #s-qb2 .qb2-main-area{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;width:100%;background:var(--bg-0)} #s-qb2 .qb2-scroll-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 24px;background:var(--bg-0)} /* ── §1 Hero Strip ─────────────────────────────────────── */ #s-qb2 .qb2-hero{ background:var(--bg-1);border-top:2px solid var(--accent);position:relative;flex-shrink:0; } #s-qb2 .qb2-hero-top{ display:flex;justify-content:space-between;align-items:flex-start; padding:28px 32px 24px;gap:20px;flex-wrap:wrap; } #s-qb2 .qb2-hero-left{flex:1;min-width:200px} #s-qb2 .qb2-hero-label{ font-family:var(--fu);font-size:9px;font-weight:800; text-transform:uppercase;letter-spacing:.16em;color:var(--t4);margin-bottom:6px; } #s-qb2 .qb2-hero-name{ font-family:var(--fd);font-size:28px;font-weight:400; color:var(--t1);margin-bottom:12px;letter-spacing:-.01em; } #s-qb2 .qb2-hero-meta{display:flex;gap:20px;flex-wrap:wrap} #s-qb2 .qb2-hero-meta-item{ display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2); font-family:var(--fb); } #s-qb2 .qb2-hero-meta-item svg{width:15px;height:15px;stroke:var(--t3);fill:none;stroke-width:1.5} #s-qb2 .qb2-hero-right{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end} #s-qb2 .qb2-status-chip{ display:inline-flex;align-items:center;gap:4px; padding:3px 9px;border-radius:999px; font-family:var(--fu);font-size:8px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;cursor:pointer; } #s-qb2 .qb2-status-chip::before{ content:'';width:4px;height:4px;border-radius:50%; background:currentColor;flex-shrink:0; } #s-qb2 .qb2-status-chip.chip-draft {background:rgba(74,127,181,.14);color:var(--blue)} #s-qb2 .qb2-status-chip.chip-sent {background:var(--accent-seam);color:var(--accent)} #s-qb2 .qb2-status-chip.chip-followup {background:rgba(192,106,32,.14);color:var(--orange)} #s-qb2 .qb2-status-chip.chip-confirmed {background:var(--green-bg);color:var(--green)} #s-qb2 .qb2-status-chip.chip-cancelled {background:rgba(155,77,92,.14);color:var(--red)} #s-qb2 .qb2-status-chip.chip-enquiry {background:var(--violet-bg);color:var(--violet)} #s-qb2 .qb2-status-chip.chip-expired {background:rgba(107,96,89,.14);color:var(--t3)} #s-qb2 .qb2-price{ font-family:var(--fd);font-size:32px;font-weight:300; color:var(--t1);margin-top:8px;letter-spacing:-.02em; } #s-qb2 .qb2-price-sub{font-size:11px;color:var(--t3);margin-top:3px;font-family:var(--fb)} /* ── §1 Tab Bar ────────────────────────────────────────── */ #s-qb2 .qb2-tabs{ display:flex;gap:0;border-top:1px solid var(--b1);overflow-x:auto; -webkit-overflow-scrolling:touch;background:var(--bg-1); } #s-qb2 .qb2-tab{ flex:1;min-width:0;padding:14px 18px;text-align:center;cursor:pointer; font-family:var(--fu);font-size:10px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--t4); border-bottom:2px solid transparent;background:transparent; transition:color .2s ease,border-color .2s ease; position:relative;white-space:nowrap; } #s-qb2 .qb2-tab:hover{color:var(--t2);background:rgba(0,0,0,.02)} /* Active tab: multi-signal so it's unambiguous at a glance - gold text + weight 800 + 3px gold underline + soft accent-ghost background */ #s-qb2 .qb2-tab.active{ color:var(--accent); font-weight:800; background:var(--accent-ghost); border-bottom:3px solid var(--accent); box-shadow:inset 0 -1px 0 rgba(0,0,0,.03); } #s-qb2 .qb2-tab .tab-dot{ display:inline-block;width:5px;height:5px;border-radius:50%; background:var(--green);margin-left:6px;vertical-align:middle; } /* ── §1 Action Bar ─────────────────────────────────────── */ #s-qb2 .qb2-actions{ display:flex;gap:8px;padding:14px 32px;border-top:1px solid var(--b1); background:var(--bg-1);flex-wrap:wrap; } #s-qb2 .qb2-action{ padding:7px 16px;border-radius:999px;border:1px solid var(--bg-3); background:var(--bg-2);font-family:var(--fu);font-size:10px; font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t2); cursor:pointer;transition:all .15s ease;line-height:1; } #s-qb2 .qb2-action:hover{background:var(--bg-3);color:var(--t1);border-color:var(--bg-4)} #s-qb2 .qb2-action.primary{ background:var(--accent-metal); color:#080706;border-color:transparent; box-shadow:0 2px 6px rgba(20,14,8,.12),inset 0 1px 0 rgba(255,255,255,.2); position:relative;overflow:hidden; } #s-qb2 .qb2-action.primary::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 55%); pointer-events:none; } #s-qb2 .qb2-action.primary:hover{ filter:brightness(1.08);transform:translateY(-1px); box-shadow:0 4px 12px var(--b2),inset 0 1px 0 rgba(255,255,255,.2); } /* Manual Save — teal, distinct from gold Send Quote, signals "safe to click" */ #s-qb2 .qb2-action--save{ background:var(--green,#1A6B5A); color:#fff;border-color:transparent; box-shadow:0 2px 6px rgba(26,107,90,.25),inset 0 1px 0 rgba(255,255,255,.15); } #s-qb2 .qb2-action--save:hover{ background:var(--green,#1A6B5A);filter:brightness(1.1); color:#fff;transform:translateY(-1px); box-shadow:0 4px 12px rgba(26,107,90,.35); } /* Back to Dashboard — subtle, pushed to the left edge */ #s-qb2 .qb2-action--back{ margin-right:auto; background:transparent;border:1px dashed var(--bg-3);color:var(--t3); } #s-qb2 .qb2-action--back:hover{ background:var(--bg-2);border-style:solid;color:var(--t2); } @media(max-width:700px){ #s-qb2 .qb2-hero-top{padding:20px 16px 16px;gap:12px;flex-direction:column} #s-qb2 .qb2-hero-right{text-align:left;align-items:flex-start} #s-qb2 .qb2-hero-name{font-size:22px} #s-qb2 .qb2-price{font-size:26px} #s-qb2 .qb2-hero-meta{gap:10px} #s-qb2 .qb2-hero-meta-item{font-size:11px} #s-qb2 .qb2-actions{padding:10px 16px;gap:6px} #s-qb2 .qb2-action{padding:6px 12px;font-size:9px} #s-qb2 .qb2-tabs{gap:0} #s-qb2 .qb2-tab{padding:10px 8px;font-size:8px;letter-spacing:.04em} } /* ═══════════════════════════════════════════════════════════ §2 SETUP TAB ═══════════════════════════════════════════════════════════ */ /* Intelligence Briefing (4-cell grid, 1px borders) */ #s-qb2 .intel-briefing-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--b1);border:1px solid var(--b1);border-radius:10px; overflow:hidden;margin-bottom:20px; } #s-qb2 .intel-cell{background:var(--bg-1);padding:16px 14px;text-align:center} #s-qb2 .intel-cell-icon{font-size:18px;margin-bottom:4px;line-height:1} #s-qb2 .intel-cell-title{ font-family:var(--fu);font-size:8px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px; } #s-qb2 .intel-cell-val{ font-family:var(--fb);font-size:12px;font-weight:500;color:var(--t1); } #s-qb2 .intel-cell-val-fx{color:var(--green)} #s-qb2 .intel-cell-sub{ font-family:var(--fb);font-size:9px;color:var(--t3);margin-top:2px; } @media(max-width:700px){#s-qb2 .intel-briefing-grid{grid-template-columns:repeat(2,1fr)}} /* Setup grid + cards */ #s-qb2 .setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 0 8px} @media(max-width:700px){#s-qb2 .setup-grid{grid-template-columns:1fr;padding:0;gap:12px}} #s-qb2 .setup-card-v2{ background:var(--bg-1);border:1px solid var(--b1);border-radius:14px; overflow:hidden;position:relative; } #s-qb2 .setup-card-v2::before{ content:'';position:absolute;left:0;top:0;width:3px;height:100%; background:var(--bg-3);transition:background .2s ease; } #s-qb2 .setup-card-v2.filled::before{background:var(--green)} #s-qb2 .setup-card-head-v2{ padding:14px 18px 10px;display:flex;align-items:center;gap:10px; } #s-qb2 .setup-card-num{ width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--fd);font-size:15px;font-weight:400; background:var(--bg-3);color:var(--t3);border:1px solid var(--bg-4);flex-shrink:0; } #s-qb2 .setup-card-v2.filled .setup-card-num{ background:var(--green-bg);color:var(--green);border-color:rgba(26,107,90,.2); } #s-qb2 .setup-card-headline{flex:1;min-width:0} #s-qb2 .setup-card-headline .title{ font-family:var(--fu);font-size:11px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;color:var(--t1); } #s-qb2 .setup-card-headline .subtitle{ font-family:var(--fb);font-size:10px;color:var(--t3);margin-top:2px; } #s-qb2 .setup-card-status{ font-family:var(--fu);font-size:8px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px; } #s-qb2 .setup-card-status.complete{background:var(--green-bg);color:var(--green)} #s-qb2 .setup-card-status.partial{background:var(--accent-seam);color:var(--accent)} #s-qb2 .setup-card-status.empty{background:var(--bg-3);color:var(--t4)} #s-qb2 .setup-card-body{padding:14px 16px} #s-qb2 .setup-card-body-wrap{display:flex;gap:24px;flex-wrap:wrap} #s-qb2 .setup-row{ display:flex;align-items:center;gap:10px;padding:6px 0; border-bottom:1px solid var(--bg-0); } #s-qb2 .setup-row:last-child{border-bottom:none} #s-qb2 .setup-row-inline{flex:1;min-width:200px;border-bottom:none} #s-qb2 .setup-label{ font-family:var(--fb);font-size:11px;color:var(--t3); width:110px;flex-shrink:0; } #s-qb2 .setup-value{ font-family:var(--fb);font-size:12px;color:var(--t1);font-weight:500;flex:1; } #s-qb2 .setup-input{ flex:1;padding:5px 10px;border-radius:6px;border:1px solid var(--bg-4); background:var(--bg-2);font-size:12px;color:var(--t1); font-family:var(--fb);min-width:0; } #s-qb2 .setup-input:focus{outline:none;border-color:var(--accent);background:var(--bg-1)} #s-qb2 .setup-select{ flex:1;padding:5px 26px 5px 10px;border-radius:6px;border:1px solid var(--bg-4); background:var(--bg-2);font-size:12px;color:var(--t1); font-family:var(--fb); appearance:none;-webkit-appearance:none;cursor:pointer;min-width:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%238C7C6A'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center; } #s-qb2 .setup-select:focus{outline:none;border-color:var(--accent);background-color:var(--bg-1)} #s-qb2 .setup-full{grid-column:1/-1} #s-qb2 .setup-intel{ display:flex;align-items:flex-start;gap:8px;padding:10px 12px; border-radius:10px;background:rgba(168,116,18,.1);border:1px solid var(--accent-ring); font-family:var(--fb);font-size:11px;color:var(--accent);margin-top:8px; } #s-qb2 .setup-intel-icon{font-size:14px;flex-shrink:0} #s-qb2 .setup-pills{display:flex;gap:4px;flex:1} #s-qb2 .htl-pill{ padding:4px 10px;border-radius:999px;font-family:var(--fu); font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; cursor:pointer;background:var(--bg-3);color:var(--t3);border:1px solid var(--b1); transition:all .15s ease;user-select:none; } #s-qb2 .htl-pill:hover{background:var(--bg-4);border-color:#C5BCB0;color:var(--t2)} #s-qb2 .htl-pill.on{ background:var(--accent-seam);color:var(--accent);border-color:rgba(168,116,18,.35); } #s-qb2 .setup-trans-total{ display:flex;align-items:center;gap:8px;padding:10px 0;margin-top:4px; border-top:1px solid var(--bg-0); } #s-qb2 .setup-trans-total-lbl{ font-family:var(--fb);font-size:11px;color:var(--t3); } #s-qb2 .setup-trans-total-val{ margin-left:auto;font-family:var(--fd); font-size:18px;font-weight:300;color:var(--accent); } #s-qb2 .setup-cta{padding:16px 0 24px;text-align:center} #s-qb2 .setup-cta-sub{ font-family:var(--fb);font-size:10px;color:var(--t4);margin-top:6px; } @media(max-width:700px){ #s-qb2 .setup-grid{padding:0;gap:12px} #s-qb2 .setup-card-body{padding:12px 14px} #s-qb2 .setup-row{flex-direction:column;align-items:stretch;gap:4px} #s-qb2 .setup-label{width:auto} #s-qb2 .setup-card-head-v2{padding:12px 14px 8px} #s-qb2 .setup-card-status{font-size:7px;padding:2px 7px} } /* ════════════════════════════════════════════════════════════ §3 ROUTE & DAYS — prototype-match DOM (Turn B) ════════════════════════════════════════════════════════════ */ /* --- Revenue ticker --- */ #s-qb2 .rev-ticker{background:var(--bg-1);border:1px solid var(--bg-3);border-radius:14px;padding:14px 18px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 8px var(--b0)} #s-qb2 .rev-ticker-head{display:flex;align-items:baseline;gap:4px} #s-qb2 .rev-ticker .rev-total{font-family:var(--fd);font-weight:300;font-size:34px;color:var(--t1);letter-spacing:.01em;line-height:1} #s-qb2 .rev-ticker .rev-total-label{font-family:'Syne','Inter',system-ui,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--t3);font-weight:700} #s-qb2 .rev-bar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--bg-2)} #s-qb2 .rev-bar-seg{height:100%;min-width:2px;transition:flex .3s ease} #s-qb2 .rev-pills{display:flex;flex-wrap:wrap;gap:14px;align-items:center} #s-qb2 .rev-chip{display:flex;align-items:center;gap:6px;font-family:var(--fb);font-size:11px} #s-qb2 .rev-chip-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0} #s-qb2 .rev-chip-val{font-weight:800;color:var(--t1);font-size:12px} #s-qb2 .rev-chip-label{color:var(--t3);font-size:10px;letter-spacing:.03em} /* --- Journey river (prototype layout) --- */ #s-qb2 .river{background:var(--bg-1);border:1px solid var(--bg-3);border-radius:14px;padding:14px 12px;margin-bottom:12px;display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:thin} #s-qb2 .river-track{display:none} /* neutralize old wrapper */ #s-qb2 .river-endpoint{display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--accent);padding:0 8px;flex-shrink:0} #s-qb2 .river .river-zone{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 6px;min-width:82px;flex:0 0 auto} #s-qb2 .river-zone-name{font-family:'Syne','Inter',system-ui,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t2);white-space:nowrap} #s-qb2 .river-bar{display:flex;gap:3px;align-items:center} #s-qb2 .river-pill{padding:4px 8px;border-radius:6px;font-family:var(--fb);font-size:10px;font-weight:700;color:var(--t2);cursor:pointer;user-select:none;transition:transform .15s, box-shadow .15s} #s-qb2 .river-pill:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(20,14,8,.08)} #s-qb2 .river-pill.active{outline:2px solid var(--accent);outline-offset:1px} #s-qb2 .river .river-hotel{font-size:9px;font-weight:600;color:var(--t3);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px} #s-qb2 .river .contract-dot{width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0} #s-qb2 .river-drive{display:flex;align-items:center;justify-content:center;gap:2px;flex:0 0 auto;padding:0 2px;align-self:center} #s-qb2 .river-drive-line{width:14px;height:1px;background:linear-gradient(90deg,var(--t5),var(--accent),var(--t5))} #s-qb2 .river-drive-time{font-family:var(--fb);font-size:9px;font-weight:700;color:var(--accent);background:var(--accent-ghost);padding:1px 5px;border-radius:4px;white-space:nowrap} /* --- Chat bar (prototype §3 .chat-bar) --- */ #s-qb2 .chat-bar{display:flex;gap:8px;align-items:center;background:var(--bg-1);border:1px solid var(--bg-3);border-radius:12px;padding:8px 10px;margin-bottom:12px} #s-qb2 .chat-bar .chat-input{flex:1;border:none;outline:none;font-family:var(--fb);font-size:12px;color:var(--t1);background:transparent;padding:6px 4px} #s-qb2 .chat-bar .chat-input::placeholder{color:var(--t4);font-style:italic} #s-qb2 .chat-bar .chat-send{background:var(--accent-metal);color:var(--bg-1);border:none;border-radius:8px;padding:6px 14px;font-family:'Syne','Inter',system-ui,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer} #s-qb2 .chat-bar .chat-send:hover{filter:brightness(1.06)} #s-qb2 .chat-bar .chat-undo{background:var(--bg-2);color:var(--t2);border:1px solid var(--bg-4);border-radius:8px;padding:6px 10px;font-family:var(--fb);font-size:10px;font-weight:600;cursor:pointer} /* --- Day card (collapsed, prototype §3) --- */ #s-qb2 .day-card{background:var(--bg-1);border:1px solid var(--bg-3);border-radius:14px;padding:0;margin-bottom:8px;cursor:pointer;transition:border-color .18s, box-shadow .18s, transform .18s;box-shadow:0 2px 8px var(--b0);overflow:hidden;position:relative} #s-qb2 .day-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(20,14,8,.08);transform:translateY(-1px)} #s-qb2 .day-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .2s} #s-qb2 .day-card:hover::before{opacity:.7} #s-qb2 .day-card.expanded{border:1.5px solid var(--accent);box-shadow:0 10px 32px var(--accent-seam)} #s-qb2 .day-card.expanded::before{opacity:1;background:var(--accent-metal);height:3px} #s-qb2 .day-card .day-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid transparent;background:transparent} #s-qb2 .day-card.expanded .day-header{background:linear-gradient(180deg,var(--bg-1),var(--bg-0));border-bottom-color:var(--bg-3)} #s-qb2 .day-card .day-drag{font-size:14px;color:var(--t4);cursor:grab;user-select:none;flex-shrink:0;padding:2px 4px} #s-qb2 .day-card .day-drag:hover{color:var(--t2)} #s-qb2 .day-card .day-num{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:300;font-size:20px;color:var(--accent);background:var(--bg-0);border:1px solid var(--bg-3);flex-shrink:0} #s-qb2 .day-card .day-num--dep{font-size:16px} #s-qb2 .day-card .day-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} #s-qb2 .day-card .day-route{font-family:var(--fb);font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #s-qb2 .day-card .day-date{font-family:var(--fb);font-size:10px;color:var(--t3);font-weight:500} #s-qb2 .day-card .day-c-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0} #s-qb2 .day-card .day-c-cost{font-family:var(--fd);font-weight:300;font-size:18px;color:var(--t1)} /* Day type chip */ #s-qb2 .day-type{font-family:'Syne','Inter',system-ui,sans-serif;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:3px 8px;border-radius:999px;flex-shrink:0} #s-qb2 .day-type.arrival{background:rgba(107,90,165,.12);color:var(--violet);border:1px solid rgba(107,90,165,.2)} #s-qb2 .day-type.transfer{background:rgba(74,127,181,.12);color:var(--blue);border:1px solid rgba(74,127,181,.2)} #s-qb2 .day-type.base{background:var(--green-bg);color:var(--green);border:1px solid rgba(26,107,90,.2)} #s-qb2 .day-type.departure{background:var(--accent-seam);color:var(--accent);border:1px solid rgba(168,116,18,.2)} /* Day dash (horizontal rows per prototype) */ #s-qb2 .day-card .day-dash{display:flex;flex-direction:column;gap:4px;padding:10px 16px 12px;background:var(--bg-1)} #s-qb2 .day-card.expanded .day-dash{padding:0} #s-qb2 .day-dash-row{display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:11px;color:var(--t2);flex-wrap:wrap} #s-qb2 .day-dash-icon{font-size:13px;flex-shrink:0} #s-qb2 .day-dash-hotel-name{font-weight:700;color:var(--t1)} #s-qb2 .day-dash-stars{color:var(--accent);font-size:10px;letter-spacing:0} #s-qb2 .day-dash-board{background:var(--bg-0);border:1px solid var(--bg-3);border-radius:4px;padding:1px 6px;font-family:'Syne','Inter',system-ui,sans-serif;font-size:9px;font-weight:700;color:var(--t3);letter-spacing:.05em} #s-qb2 .day-dash-rate{font-family:var(--fb);font-size:11px;font-weight:700;color:var(--t1);margin-left:auto} #s-qb2 .day-dash-rate.overridden{color:var(--accent)} #s-qb2 .day-dash-contract{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0} #s-qb2 .day-dash-acts{font-size:11px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0} #s-qb2 .day-dash-drive{font-family:var(--fb);font-size:11px;font-weight:700;color:var(--blue);margin-left:auto} #s-qb2 .day-dash-cost{font-family:var(--fd);font-weight:300;font-size:18px;color:var(--t1)} /* Day panel (expanded internals) */ #s-qb2 .day-card.expanded .day-panel{padding:0;background:var(--bg-1)} #s-qb2 .city-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--bg-3)} #s-qb2 .city-tag{display:inline-flex;align-items:center;gap:4px;background:var(--bg-0);border:1px solid var(--bg-3);border-radius:999px;padding:3px 10px;font-family:var(--fb);font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;transition:background .15s, border-color .15s} #s-qb2 .city-tag:hover{border-color:var(--accent)} #s-qb2 .city-tag.base-city{background:var(--accent-metal);color:var(--bg-1);border-color:var(--accent-dn);font-weight:800} #s-qb2 .city-x{cursor:pointer;margin-left:4px;opacity:.6;font-size:12px} #s-qb2 .city-x:hover{opacity:1;color:var(--red)} #s-qb2 .city-add{font-family:var(--fb);font-size:11px;font-weight:700;color:var(--accent);cursor:pointer;padding:3px 10px;border:1px dashed var(--t5);border-radius:999px} #s-qb2 .city-add:hover{border-color:var(--accent);background:var(--bg-0)} /* Day grid (two-column) Hotel column gets 60% — activities column 40%. Timeline is collapsible so hotel panel is now the primary workspace. */ #s-qb2 .day-grid{display:grid;grid-template-columns:2fr 3fr;gap:0} #s-qb2 .day-col-left,#s-qb2 .day-col-right{min-width:0;width:auto} #s-qb2 .day-col-right{border-left:1px solid var(--bg-3)} @media(max-width:900px){ #s-qb2 .day-grid{grid-template-columns:1fr} #s-qb2 .day-col-right{border-left:none;border-top:1px solid var(--bg-3)} } /* Timeline controls + progress + item cards */ #s-qb2 .tl-controls{display:flex;align-items:center;gap:8px;padding:10px 16px 6px;flex-wrap:wrap} #s-qb2 .tl-controls .tl-btn{background:var(--bg-0);border:1px solid var(--bg-3);border-radius:8px;padding:4px 10px;font-family:var(--fb);font-size:10px;font-weight:600;color:var(--t2);cursor:pointer;transition:background .15s} #s-qb2 .tl-controls .tl-btn:hover{background:var(--bg-2);border-color:var(--accent)} #s-qb2 .tl-badge-custom{font-family:'Syne','Inter',system-ui,sans-serif;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);background:rgba(168,116,18,.1);border:1px solid var(--accent-ring);padding:3px 8px;border-radius:999px} /* .tl-weather/.tl-progress/.tl-dur-badge (Turn D dups) — removed E4; canonical rules in E1 section */ /* htl-selected, htl-pill, tier-toggle — canonical rules in §E3 hotel panel v3 block (~line 2685) */ /* ════════════════════════════════════════════════════════════ §4 MAP — prototype-match DOM (Turn B) ════════════════════════════════════════════════════════════ */ #s-qb2 .map-canvas{width:100%;aspect-ratio:1.6/1;min-height:340px;background:linear-gradient(135deg,var(--bg-2),var(--bg-4) 60%,var(--t5));border:1px solid var(--bg-3);border-radius:14px;overflow:hidden;margin-bottom:12px;position:relative} #s-qb2 .map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--t3)} #s-qb2 .map-placeholder svg{width:48px;height:48px;fill:var(--accent);opacity:.6} #s-qb2 .map-placeholder-title{font-family:'Syne','Inter',system-ui,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t2)} #s-qb2 .map-placeholder-sub{font-family:var(--fb);font-size:11px;color:var(--t3)} #s-qb2 .map-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 0 14px;border-bottom:1px solid var(--bg-3);margin-bottom:12px} #s-qb2 .map-stat{background:var(--bg-1);border:1px solid var(--bg-3);border-radius:12px;padding:10px 12px;text-align:center} #s-qb2 .map-stat-val{font-family:var(--fd);font-weight:300;font-size:22px;color:var(--t1);line-height:1.1} #s-qb2 .map-stat-label{font-family:'Syne','Inter',system-ui,sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-top:3px} #s-qb2 .zone-list{display:flex;flex-direction:column;gap:0;margin-bottom:12px} #s-qb2 .zone-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--bg-0)} #s-qb2 .zone-row:last-child{border-bottom:none} #s-qb2 .zone-color{width:12px;height:12px;border-radius:3px;flex-shrink:0} #s-qb2 .zone-name{font-family:var(--fb);font-size:12px;font-weight:700;color:var(--t1);flex:1} #s-qb2 .zone-nights{font-family:var(--fb);font-size:10px;font-weight:600;color:var(--t3)} #s-qb2 .zone-days{font-family:var(--fb);font-size:10px;color:var(--t4)} #s-qb2 .transfer-list{display:flex;flex-direction:column;gap:0} #s-qb2 .transfer-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--bg-0)} #s-qb2 .transfer-row:last-child{border-bottom:none} #s-qb2 .transfer-route{flex:1;font-family:var(--fb);font-size:12px;font-weight:600;color:var(--t1)} #s-qb2 .transfer-time{font-family:var(--fb);font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px} #s-qb2 .transfer-time.short{color:var(--green);background:rgba(26,107,90,.1)} #s-qb2 .transfer-time.medium{color:var(--orange);background:rgba(192,106,32,.1)} #s-qb2 .transfer-time.long{color:var(--red);background:rgba(155,77,92,.1)} /* ════════════════════════════════════════════════════════════ Neutralize v5 compact day-c styles that collide with new .day-card ════════════════════════════════════════════════════════════ */ #s-qb2 .day-c{all:unset} /* any lingering v5 day-c wrappers no longer used */ @media(max-width:700px){ #s-qb2 .rev-pills{gap:10px} #s-qb2 .rev-chip-label{display:none} #s-qb2 .map-stats{grid-template-columns:repeat(2,1fr)} #s-qb2 .chat-bar{flex-wrap:wrap} #s-qb2 .chat-bar .chat-input{flex:1 1 100%;order:1} } /* ════════════════════════════════════════════════════════════ QB2 Turn C — Section 5 Rooming + Section 6 Commercials + Section 7 Summary Prototype-match (LWS v6.1). Hex only. All scoped under #s-qb2. ════════════════════════════════════════════════════════════ */ /* Neutralize legacy v5 selectors that conflict with new DOM */ #s-qb2 .summary-stats, #s-qb2 .summary-stat-lbl, #s-qb2 .waterfall, #s-qb2 .wf-bar, #s-qb2 .wf-label, #s-qb2 .wf-val, #s-qb2 .dial-wrap, #s-qb2 .dial, #s-qb2 .health-grid, #s-qb2 .health-item, #s-qb2 .health-val, #s-qb2 .conv-grid, #s-qb2 .conv-card, #s-qb2 .summary-day, #s-qb2 .summary-day-row, #s-qb2 .sbd-row, #s-qb2 .sbd-day, #s-qb2 .sbd-route, #s-qb2 .sbd-cost, #s-qb2 .ss-tpl-card, #s-qb2 .comm-highlight{all:unset;display:revert;} /* ===== Section 5 ROOMING ===== */ #s-qb2 .rooming-hero{ display:grid;grid-template-columns:repeat(6,1fr);gap:1px; background:var(--bg-2);border-radius:10px;overflow:hidden;margin:20px 24px; } #s-qb2 .rooming-stat{background:var(--bg-1);padding:16px 12px;text-align:center;} #s-qb2 .rooming-stat-val{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-weight:300;color:var(--t1);letter-spacing:-.02em;} #s-qb2 .rooming-stat-label{font-family:"Inter",sans-serif;font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-top:4px;} @media(max-width:700px){#s-qb2 .rooming-hero{grid-template-columns:repeat(3,1fr);}} #s-qb2 .room-config{padding:0 24px 24px;} #s-qb2 .room-config-row{display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--bg-0);} #s-qb2 .room-config-label{font-size:12px;color:var(--t3);width:100px;flex-shrink:0;} #s-qb2 .room-mode-toggle{display:flex;gap:0;border-radius:999px;overflow:hidden;border:1px solid var(--b2);} #s-qb2 .room-mode-btn{ padding:5px 14px;font-family:"Inter",sans-serif;font-size:9px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;background:var(--bg-2);color:var(--t3); border:none;cursor:pointer;transition:all .15s; } #s-qb2 .room-mode-btn.on{ background:var(--accent-metal); color:#0A0804;font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 var(--b3); } #s-qb2 .room-count{display:flex;align-items:center;gap:6px;} #s-qb2 .room-count-input{ width:52px;padding:5px 8px;border-radius:6px;border:1px solid var(--b2); background:var(--bg-2);font-size:13px;color:var(--t1);text-align:center; font-family:"Cormorant Garamond",Georgia,serif;font-weight:400; } #s-qb2 .room-count-label{font-size:10px;color:var(--t3);} #s-qb2 .night-table{padding:0 24px 24px;} #s-qb2 .night-row{display:grid;grid-template-columns:36px 1fr 100px 60px 70px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--bg-0);font-size:11px;cursor:pointer;} #s-qb2 .night-row:hover{background:var(--bg-2);} #s-qb2 .night-num{font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;font-weight:300;color:var(--accent);text-align:center;} #s-qb2 .night-hotel{font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #s-qb2 .night-meal{display:inline-block;padding:2px 7px;border-radius:999px;font-size:8px;font-weight:800;font-family:"Inter",sans-serif;background:var(--bg-2);color:var(--t3);} #s-qb2 .night-meal.hb{background:var(--accent-ghost);color:var(--accent);} #s-qb2 .night-cost{font-family:"Cormorant Garamond",Georgia,serif;font-size:13px;font-weight:400;color:var(--t1);text-align:right;} #s-qb2 .night-row-head{font-weight:700;color:var(--t3);font-family:"Inter",sans-serif;font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--b2);cursor:default;} #s-qb2 .night-row-head:hover{background:transparent;} #s-qb2 .night-row-total{border-top:2px solid var(--b2);border-bottom:none;font-weight:700;cursor:default;} #s-qb2 .night-row-total:hover{background:transparent;} #s-qb2 .night-row-total .night-hotel{color:var(--t2);} #s-qb2 .night-row-total .night-cost{font-size:16px;font-weight:600;color:var(--accent);} #s-qb2 .night-zone-band{ display:flex;align-items:center;gap:8px;padding:8px 0 4px; border-bottom:1px solid var(--b2);margin-top:8px; } #s-qb2 .night-zone-band:first-child{margin-top:0;} #s-qb2 .night-zone-color{width:10px;height:10px;border-radius:3px;flex-shrink:0;} #s-qb2 .night-zone-name{font-family:"Inter",sans-serif;font-size:8px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--t3);} #s-qb2 .night-zone-nights{margin-left:auto;font-family:"Cormorant Garamond",Georgia,serif;font-size:12px;font-weight:400;color:var(--t3);} #s-qb2 .night-occ{display:flex;gap:2px;align-items:center;} #s-qb2 .night-occ-block{ width:18px;height:14px;border-radius:3px;display:flex;align-items:center;justify-content:center; font-size:7px;font-weight:800;font-family:"Inter",sans-serif;letter-spacing:.02em; } #s-qb2 .night-occ-block.dbl{background:var(--accent-ghost);color:var(--accent);border:1px solid var(--accent-ring);} #s-qb2 .night-occ-block.sgl{background:var(--bg-2);color:var(--t3);border:1px solid var(--b2);} #s-qb2 .night-occ-block.tpl{background:rgba(107,154,184,.12);color:var(--blue);border:1px solid rgba(107,154,184,.20);} #s-qb2 .night-upgrade-hint{ font-size:9px;color:var(--green);font-weight:600;cursor:pointer; display:inline-flex;align-items:center;gap:3px; } #s-qb2 .room-compare{ display:grid;grid-template-columns:1fr auto 1fr;gap:12px;padding:0 24px 16px; align-items:center; } #s-qb2 .room-compare-card{ padding:14px;border-radius:10px;border:1px solid var(--bg-2);text-align:center; } #s-qb2 .room-compare-card.current{background:var(--bg-2);} #s-qb2 .room-compare-card.optimal{background:rgba(26,107,90,.06);border-color:rgba(26,107,90,.20);} #s-qb2 .room-compare-label{font-family:"Inter",sans-serif;font-size:8px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--t3);margin-bottom:6px;} #s-qb2 .room-compare-alloc{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:4px;} #s-qb2 .room-compare-cost{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:300;color:var(--t1);} #s-qb2 .room-compare-arrow{font-size:18px;color:var(--green);font-weight:700;text-align:center;} #s-qb2 .room-compare-saving{font-family:"Inter",sans-serif;font-size:9px;font-weight:800;color:var(--green);letter-spacing:.06em;} @media(max-width:700px){ #s-qb2 .room-compare{grid-template-columns:1fr;gap:8px;padding:0 16px 12px;} #s-qb2 .room-compare-card{padding:12px;} } #s-qb2 .setup-intel{ display:flex;align-items:flex-start;gap:8px;padding:10px 12px; border-radius:8px;background:var(--accent-ghost);border:1px solid var(--accent-ring); font-size:11px;color:var(--accent); } #s-qb2 .setup-intel-icon{font-size:14px;flex-shrink:0;} /* ===== Section 6 COMMERCIALS ===== */ #s-qb2 .comm-tier-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px 24px;} #s-qb2 .comm-tier{ background:var(--bg-1);border:1px solid var(--bg-2);border-radius:14px; padding:20px;position:relative;overflow:hidden;cursor:pointer; transition:all .2s; } #s-qb2 .comm-tier:hover{border-color:var(--b2);transform:translateY(-1px);} #s-qb2 .comm-tier.on{border-color:var(--accent);box-shadow:0 0 0 1px rgba(168,116,18,.20);} #s-qb2 .comm-tier-label{font-family:"Inter",sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:4px;} #s-qb2 .comm-tier-price{font-family:"Cormorant Garamond",Georgia,serif;font-size:36px;font-weight:300;color:var(--t1);letter-spacing:-.03em;} #s-qb2 .comm-tier-sub{font-size:11px;color:var(--t3);margin-top:4px;} #s-qb2 .comm-tier-margin{ display:inline-flex;align-items:center;gap:4px; padding:3px 9px;border-radius:999px;font-family:"Inter",sans-serif; font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:8px; } #s-qb2 .comm-tier-margin.good{background:var(--green-bg);color:var(--green);} #s-qb2 .comm-tier-margin.ok{background:var(--accent-ghost);color:var(--accent);} #s-qb2 .comm-tier-margin.low{background:rgba(155,77,92,.10);color:var(--red);} #s-qb2 .margin-engine{padding:0 24px 24px;} #s-qb2 .margin-card{background:var(--bg-1);border:1px solid var(--bg-2);border-radius:14px;padding:24px;position:relative;} #s-qb2 .margin-mode-bar{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap;} #s-qb2 .margin-mode{ padding:5px 14px;border-radius:999px;font-family:"Inter",sans-serif; font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; background:var(--bg-2);color:var(--t3);border:1px solid var(--bg-2);cursor:pointer; transition:all .15s; } #s-qb2 .margin-mode:hover{border-color:var(--b2);} #s-qb2 .margin-mode.on{background:var(--accent-ghost);color:var(--accent);border-color:var(--accent-ring);} #s-qb2 .margin-dial{width:180px;height:180px;margin:0 auto 16px;position:relative;} #s-qb2 .margin-dial svg{width:100%;height:100%;display:block;} #s-qb2 .margin-dial-center{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center; } #s-qb2 .margin-dial-pct{font-family:"Cormorant Garamond",Georgia,serif;font-size:36px;font-weight:300;color:var(--t1);letter-spacing:-.03em;line-height:1;} #s-qb2 .margin-dial-label{font-family:"Inter",sans-serif;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-top:2px;} #s-qb2 .margin-dial-profit{font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;font-weight:400;color:var(--green);margin-top:4px;} #s-qb2 .margin-slider{ width:100%;margin:16px 0;-webkit-appearance:none;appearance:none; height:4px;background:var(--b2);border-radius:2px;outline:none; } #s-qb2 .margin-slider::-webkit-slider-thumb{ -webkit-appearance:none;width:18px;height:18px; background:var(--accent-metal); border-radius:50%;cursor:pointer; box-shadow:0 1px 2px var(--b3),inset 0 1px 0 rgba(255,255,255,.30); } #s-qb2 .margin-slider::-moz-range-thumb{ width:18px;height:18px;border:none; background:var(--accent-metal); border-radius:50%;cursor:pointer; box-shadow:0 1px 2px var(--b3); } #s-qb2 .margin-presets{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap;} #s-qb2 .margin-preset{ padding:5px 12px;border-radius:999px;font-size:9px;font-weight:700; font-family:"Inter",sans-serif;cursor:pointer;background:var(--bg-2);color:var(--t3); border:1px solid var(--bg-2);transition:all .15s; } #s-qb2 .margin-preset:hover{background:var(--bg-2);border-color:var(--b2);} #s-qb2 .margin-preset.on{background:var(--accent-ghost);color:var(--accent);border-color:var(--accent-ring);} #s-qb2 .cost-waterfall{display:flex;align-items:flex-end;gap:6px;padding:20px 18px 16px;height:220px;background:var(--bg-1);border:1px solid var(--b1);border-radius:12px;margin:0 24px 16px;} #s-qb2 .waterfall-bar{flex:1;border-radius:6px 6px 0 0;min-height:4px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;} #s-qb2 .waterfall-bar .bar-fill{width:100%;border-radius:6px 6px 0 0;transition:height .55s cubic-bezier(.22,.61,.36,1);} #s-qb2 .waterfall-bar .bar-label{font-family:"Inter",sans-serif;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-top:8px;white-space:nowrap;text-align:center;} #s-qb2 .waterfall-bar .bar-val{font-family:"Cormorant Garamond",Georgia,serif;font-size:15px;font-weight:500;color:var(--t1);margin-bottom:4px;} #s-qb2 .cost-table{padding:0 24px 24px;} /* Commercials is a REVIEW page — agents verify accuracy line by line. Numbers need to be large enough to scan quickly without squinting. Category rows: 16px body, 18px values, 13px labels. Detail rows (expanded): 15px body, 16px values, 12px meta. */ #s-qb2 .cost-row-v2{display:grid;grid-template-columns:1fr 120px 120px 80px 120px;gap:14px;padding:16px 6px;border-bottom:1px solid var(--bg-0);font-size:16px;align-items:center;} #s-qb2 .cost-row-v2.head{font-family:"Inter",sans-serif;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--b2);padding:14px 6px;} #s-qb2 .cost-row-v2.expandable{cursor:pointer;transition:background .12s} #s-qb2 .cost-row-v2.expandable:hover{background:var(--bg-2)} #s-qb2 .cost-row-v2.expandable.expanded{background:var(--bg-2)} #s-qb2 .cost-caret{display:inline-block;width:16px;font-size:12px;color:var(--t4);transition:transform .15s;text-align:center} #s-qb2 .cost-caret-spacer{display:inline-block;width:16px} #s-qb2 .cost-cat{color:var(--t2);display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;} #s-qb2 .cost-cat-icon{font-size:20px;} #s-qb2 .cost-val{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:400;color:var(--t1);text-align:right;} #s-qb2 .cost-margin-pct{font-family:"Inter",sans-serif;font-size:12px;font-weight:800;letter-spacing:.04em;} #s-qb2 .cost-row-v2.total .cost-val{font-size:24px;} /* Itemised detail rows shown when a category is expanded */ #s-qb2 .cost-detail{background:var(--bg-2);border-left:3px solid var(--accent-ring);margin:0 0 6px 22px;padding:12px 18px 14px;border-radius:0 8px 8px 0} #s-qb2 .cost-detail-head{display:grid;grid-template-columns:1fr 120px 120px;gap:14px;font-family:"Inter",sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);padding:6px 0 8px;border-bottom:1px dashed var(--bg-3)} #s-qb2 .cost-detail-row{display:grid;grid-template-columns:1fr 120px 120px;gap:14px;padding:12px 0;font-size:15px;border-bottom:1px dotted var(--bg-3);align-items:center} #s-qb2 .cost-detail-row:last-child{border-bottom:none} #s-qb2 .cost-detail-lbl{color:var(--t2);min-width:0;font-weight:500} #s-qb2 .cost-detail-meta{font-size:12px;color:var(--t4);margin-top:3px;font-weight:400} #s-qb2 .cost-detail-val{font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;color:var(--t1);text-align:right;font-weight:400} #s-qb2 .cost-detail-empty{color:var(--t4);font-size:13px;font-style:italic;padding:10px 0} #s-qb2 .cost-margin-bar{height:6px;border-radius:3px;background:var(--bg-2);overflow:hidden;position:relative;} #s-qb2 .cost-margin-fill{height:100%;border-radius:3px;transition:width .55s cubic-bezier(.22,.61,.36,1);} #s-qb2 .cost-margin-fill.good{background:var(--green);} #s-qb2 .cost-margin-fill.ok{background:var(--accent);} #s-qb2 .cost-margin-fill.low{background:var(--red);} #s-qb2 .cost-margin-pct{font-family:"Inter",sans-serif;font-size:8px;font-weight:800;letter-spacing:.04em;text-align:right;} #s-qb2 .cost-margin-pct.good{color:var(--green);} #s-qb2 .cost-margin-pct.ok{color:var(--accent);} #s-qb2 .cost-margin-pct.low{color:var(--red);} #s-qb2 .cost-row-v2.total{border-top:2px solid var(--b2);border-bottom:none;} #s-qb2 .cost-row-v2.total .cost-cat{font-weight:700;color:var(--t1);} #s-qb2 .cost-row-v2.total .cost-val{font-size:16px;font-weight:600;color:var(--accent);} /* ===== Section 7 SUMMARY ===== */ #s-qb2 .summary-hero{ background:var(--bg-1);border:1px solid var(--bg-2);border-top:2px solid rgba(168,116,18,.40); border-radius:14px;margin:20px 24px;padding:32px;text-align:center; } #s-qb2 .summary-hero-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:400;color:var(--t1);letter-spacing:-.01em;} #s-qb2 .summary-hero-sub{font-size:12px;color:var(--t3);margin-top:6px;} #s-qb2 .summary-hero-price{font-family:"Cormorant Garamond",Georgia,serif;font-size:48px;font-weight:300;color:var(--t1);letter-spacing:-.03em;margin-top:16px;} #s-qb2 .summary-hero-stats{display:flex;justify-content:center;gap:24px;margin-top:16px;flex-wrap:wrap;} #s-qb2 .summary-stat{text-align:center;} #s-qb2 .summary-stat-val{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:300;color:var(--t1);} #s-qb2 .summary-stat-label{font-family:"Inter",sans-serif;font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-top:2px;} #s-qb2 .health-card{margin:0 24px 16px;background:var(--bg-1);border:1px solid var(--bg-2);border-radius:14px;overflow:hidden;} /* C5_2026_04_21_HEALTH_COLLAPSE:
/ reset so it renders like a card header */ #s-qb2 .health-details{list-style:none;} #s-qb2 .health-details summary.health-summary{cursor:pointer;-webkit-appearance:none;appearance:none;border-bottom:none;} #s-qb2 .health-details summary.health-summary::-webkit-details-marker{display:none;} #s-qb2 .health-details[open] summary.health-summary{border-bottom:1px solid var(--bg-0);} #s-qb2 .health-head{padding:14px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--bg-0);} #s-qb2 .health-title{font-family:"Inter",sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);} #s-qb2 .health-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--bg-0);font-size:13px;} #s-qb2 .health-row:last-child{border-bottom:none;} #s-qb2 .health-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} #s-qb2 .health-dot.pass{background:var(--green);} #s-qb2 .health-dot.warn{background:var(--accent);} #s-qb2 .health-dot.fail{background:var(--red);} #s-qb2 .health-label{flex:1;color:var(--t2);font-size:13px;} #s-qb2 .health-detail{font-size:12px;color:var(--t3);} #s-qb2 .health-status-badge{font-size:11px;font-weight:700;} #s-qb2 .conv-intel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bg-2);} #s-qb2 .conv-intel-cell{background:var(--bg-1);padding:14px;text-align:center;} #s-qb2 .conv-intel-val{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:300;color:var(--t1);} #s-qb2 .conv-intel-val.green{color:var(--green);} #s-qb2 .conv-intel-val.accent{color:var(--accent);} #s-qb2 .conv-intel-val.orange{color:#C28033;} #s-qb2 .conv-intel-lbl{font-family:"Inter",sans-serif;font-size:7px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--t3);margin-top:4px;} @media(max-width:700px){#s-qb2 .conv-intel-grid{grid-template-columns:repeat(2,1fr);}} /* C6_2026_04_21_TG_LAYOUT: Trip at a Glance — 4-col grid (no cost), bigger fonts */ #s-qb2 .dbs-strip{padding:0 0 16px;} #s-qb2 .dbs-row{ display:grid;grid-template-columns:36px 0.7fr 1fr 1.4fr;gap:10px; align-items:center;padding:10px 16px;border-bottom:1px solid var(--bg-0); font-size:13px;transition:background .15s; } #s-qb2 .dbs-row:hover{background:var(--bg-2);} #s-qb2 .dbs-day{font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;font-weight:300;color:var(--accent);text-align:center;} #s-qb2 .dbs-route{font-weight:500;color:var(--t1);display:flex;align-items:center;gap:6px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #s-qb2 .dbs-route .type-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--accent);} #s-qb2 .dbs-hotel{font-size:13px;color:var(--t2);display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #s-qb2 .dbs-hotel .stars{font-size:9px;color:var(--accent);letter-spacing:-1px;} #s-qb2 .dbs-acts{font-size:12px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #s-qb2 .dbs-row-head{font-family:"Inter",sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--bg-0);padding:10px 16px;} @media(max-width:700px){#s-qb2 .dbs-row{grid-template-columns:28px 1fr 1fr;padding:8px 12px;}#s-qb2 .dbs-acts{display:none;}} #s-qb2 .wa-composer{margin:0 24px 24px;background:var(--bg-1);border:1px solid var(--bg-2);border-radius:14px;overflow:hidden;} #s-qb2 .wa-head{padding:14px 16px;border-bottom:1px solid var(--bg-0);display:flex;align-items:center;gap:8px;background:rgba(37,211,102,.06);} #s-qb2 .wa-head-icon{font-size:18px;} #s-qb2 .wa-head-title{font-family:"Inter",sans-serif;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green);} #s-qb2 .wa-tabs{display:flex;gap:0;border-bottom:1px solid var(--bg-2);} #s-qb2 .wa-tab{ flex:1;padding:10px 12px;text-align:center;font-family:"Inter",sans-serif; font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--t3);cursor:pointer;border:none;border-bottom:2px solid transparent; transition:all .15s;background:transparent; } #s-qb2 .wa-tab:hover{color:var(--t2);} #s-qb2 .wa-tab.on{color:var(--green);border-bottom-color:var(--green);} #s-qb2 .wa-bubble{ margin:16px;padding:14px 16px;border-radius:14px 14px 14px 4px; background:var(--bg-2);font-size:12px;line-height:1.7;color:var(--t2); border:1px solid var(--bg-2);white-space:pre-wrap; } #s-qb2 .wa-actions{padding:0 16px 16px;display:flex;gap:8px;flex-wrap:wrap;} #s-qb2 .wa-btn{ padding:7px 16px;border-radius:999px;font-size:10px;font-weight:700; font-family:"Inter",sans-serif;cursor:pointer;border:none;transition:all .15s; } #s-qb2 .wa-btn.send{background:#25D366;color:var(--bg-1);box-shadow:0 1px 2px rgba(0,0,0,.12);} #s-qb2 .wa-btn.send:hover{filter:brightness(1.08);transform:translateY(-1px);} #s-qb2 .wa-btn.ghost{background:var(--bg-2);color:var(--t3);border:1px solid var(--b2);} #s-qb2 .wa-btn.ghost:hover{background:var(--bg-2);color:var(--t2);} /* ═══════════════════════════════════════════════════════════════ TURN D — §8 Chat-to-Change · §9 Overlays/Pickers · §10 Edge Prototype-native selectors. LWS v6.1 hex only. No var(). ═══════════════════════════════════════════════════════════════ */ /* ── §8 Chat FAB + Popup (prototype-native .chat-fab / .chat-popup) ── */ #s-qb2 .chat-fab,.qb2-overlay .chat-fab,.qb2-sheet .chat-fab{ position:fixed;bottom:28px;right:28px;width:52px;height:52px;border-radius:50%; background:var(--accent-metal); color:var(--t1);font-size:20px;display:flex;align-items:center;justify-content:center; cursor:pointer;border:none;box-shadow:0 8px 28px rgba(26,23,20,.24),inset 0 1px 0 rgba(255,255,255,.18); z-index:200;transition:transform .22s ease,box-shadow .22s ease; } #s-qb2 .chat-fab:hover{transform:scale(1.08);box-shadow:0 12px 36px rgba(26,23,20,.28);} #s-qb2 .chat-popup{ position:fixed;bottom:92px;right:28px;width:380px;max-height:480px; background:var(--bg-1);border:1px solid var(--bg-4);border-radius:20px; box-shadow:0 16px 48px rgba(26,23,20,.18);z-index:200; display:flex;flex-direction:column;overflow:hidden; } #s-qb2 .chat-popup-head{padding:14px 18px;border-bottom:1px solid var(--bg-2);display:flex;align-items:center;justify-content:space-between;} #s-qb2 .chat-popup-title{font-family:var(--fu);font-size:11px;font-weight:800;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;} #s-qb2 .chat-popup-close{width:26px;height:26px;border-radius:50%;background:var(--bg-3);border:1px solid var(--bg-4);color:var(--t3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;} #s-qb2 .chat-messages{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-height:200px;} #s-qb2 .chat-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:12px;line-height:1.6;font-family:var(--fb);} #s-qb2 .chat-msg.user{align-self:flex-end;background:var(--accent-seam);color:var(--t1);border:1px solid rgba(168,116,18,.28);border-bottom-right-radius:4px;} #s-qb2 .chat-msg.ai,#s-qb2 .chat-msg.system{align-self:flex-start;background:var(--bg-2);color:var(--t2);border:1px solid var(--bg-3);border-bottom-left-radius:4px;} #s-qb2 .chat-msg .diff-card{margin-top:8px;padding:8px 12px;border-radius:10px;background:var(--bg-3);border:1px solid var(--bg-2);font-size:11px;color:var(--t2);} #s-qb2 .chat-msg .diff-delta{font-family:var(--fd);font-size:16px;font-weight:300;margin-top:4px;} #s-qb2 .chat-msg .diff-delta.up{color:var(--red);} #s-qb2 .chat-msg .diff-delta.down{color:var(--green);} #s-qb2 .chat-msg .diff-actions{display:flex;gap:6px;margin-top:8px;} #s-qb2 .chat-msg .diff-btn{padding:4px 12px;border-radius:999px;font-size:9px;font-weight:700;font-family:var(--fu);cursor:pointer;border:none;letter-spacing:.04em;text-transform:uppercase;} #s-qb2 .chat-msg .diff-btn.accept{background:var(--green);color:var(--bg-1);} #s-qb2 .chat-msg .diff-btn.reject{background:var(--bg-4);color:var(--t3);} #s-qb2 .chat-suggestions{display:flex;gap:4px;padding:0 18px 8px;flex-wrap:wrap;} #s-qb2 .chat-suggestion{padding:4px 10px;border-radius:999px;font-size:9px;font-weight:700;font-family:var(--fu);color:var(--t3);background:var(--bg-2);border:1px solid var(--bg-3);cursor:pointer;letter-spacing:.04em;} #s-qb2 .chat-suggestion:hover{background:var(--bg-3);color:var(--t2);} #s-qb2 .chat-popup-input{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--bg-2);} #s-qb2 .chat-popup-input input{flex:1;padding:8px 14px;border-radius:999px;border:1px solid var(--bg-4);background:var(--bg-2);font-size:12px;color:var(--t1);outline:none;font-family:var(--fb);} #s-qb2 .chat-popup-input input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-seam);} #s-qb2 .chat-popup-input button{padding:8px 14px;border-radius:999px;border:none;cursor:pointer;background:var(--accent-metal);color:var(--t1);font-family:var(--fu);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;} @media(max-width:700px){ #s-qb2 .chat-fab{right:16px;bottom:16px;width:46px;height:46px;font-size:18px;} #s-qb2 .chat-popup{right:12px;left:12px;bottom:76px;width:auto;} } /* ── §9 Overlays / Pickers (prototype .picker / .hpk- / .cpk- / .apk- / .pk-group) ── */ #s-qb2 .picker,.qb2-overlay .picker,.qb2-sheet .picker{ background:var(--bg-1);border:1px solid var(--bg-3);border-radius:20px; box-shadow:0 16px 48px rgba(26,23,20,.14);overflow:hidden;display:flex;flex-direction:column; } #s-qb2 .picker-head{padding:14px 18px 10px;border-bottom:1px solid var(--bg-2);background:var(--bg-1);} #s-qb2 .picker-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;} #s-qb2 .picker-title{font-family:var(--fu);font-size:13px;font-weight:800;color:var(--t1);letter-spacing:.04em;text-transform:uppercase;} #s-qb2 .picker-count{font-family:var(--fu);font-size:9px;font-weight:800;color:var(--green);letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--green-bg);} #s-qb2 .picker-close{width:26px;height:26px;border-radius:50%;background:var(--bg-3);border:1px solid var(--bg-4);color:var(--t3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;} #s-qb2 .picker-search{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--bg-4);background:var(--bg-2);} #s-qb2 .picker-search svg{width:14px;height:14px;fill:none;stroke:var(--t3);stroke-width:1.6;flex-shrink:0;} #s-qb2 .picker-search input{flex:1;border:none;outline:none;background:transparent;font-size:12px;color:var(--t1);font-family:var(--fb);} #s-qb2 .picker-filters{display:flex;gap:6px;padding:10px 18px;flex-wrap:wrap;border-bottom:1px solid var(--bg-2);} #s-qb2 .picker-filter{padding:4px 10px;border-radius:999px;font-size:9px;font-weight:700;font-family:var(--fu);color:var(--t3);background:var(--bg-2);border:1px solid var(--bg-3);cursor:pointer;letter-spacing:.04em;text-transform:uppercase;} #s-qb2 .picker-filter.on{background:var(--accent);color:var(--bg-1);border-color:var(--accent);} #s-qb2 .pk-group{display:flex;align-items:center;gap:6px;padding:10px 18px 4px;border-top:1px solid var(--bg-2);} #s-qb2 .pk-group:first-child{border-top:none;} #s-qb2 .pk-group-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} #s-qb2 .pk-group-dot.green{background:var(--green);} #s-qb2 .pk-group-dot.blue{background:var(--blue);} #s-qb2 .pk-group-dot.red{background:var(--red);} #s-qb2 .pk-group-dot.amber{background:var(--accent);} #s-qb2 .pk-group-label{font-family:var(--fu);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);flex:1;} #s-qb2 .pk-group-count{font-family:var(--fd);font-size:13px;font-weight:300;color:var(--t4);} /* Hotel picker cards */ #s-qb2 .hpk-card{display:grid;grid-template-columns:40px 1fr auto;gap:12px;padding:14px 18px;border-bottom:1px solid var(--bg-2);cursor:pointer;align-items:center;transition:background .15s;} #s-qb2 .hpk-card:hover{background:var(--bg-0);} #s-qb2 .hpk-card.selected{background:var(--accent-ghost);} #s-qb2 .hpk-avatar{width:40px;height:40px;border-radius:10px;background:var(--bg-2);border:1px solid var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:18px;} #s-qb2 .hpk-name{font-family:var(--fb);font-size:13px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:4px;} #s-qb2 .hpk-name .stars{font-size:9px;color:var(--accent);letter-spacing:-1px;margin-left:4px;} #s-qb2 .hpk-sub{font-size:10px;color:var(--t3);margin-top:2px;display:flex;align-items:center;gap:6px;} #s-qb2 .hpk-tags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;} #s-qb2 .hpk-rates{text-align:right;display:flex;flex-direction:column;gap:2px;align-items:flex-end;} #s-qb2 .hpk-price{font-family:var(--fd);font-size:20px;font-weight:300;color:var(--t1);line-height:1;} #s-qb2 .hpk-per{font-size:9px;color:var(--t4);font-family:var(--fu);letter-spacing:.04em;text-transform:uppercase;} #s-qb2 .hpk-delta{font-family:var(--fu);font-size:9px;font-weight:800;letter-spacing:.04em;} #s-qb2 .hpk-check{font-size:18px;color:var(--accent);font-weight:700;} #s-qb2 .hpk-rate-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 0 0;margin-top:8px;border-top:1px dashed var(--bg-3);} #s-qb2 .hpk-rate-cell{padding:6px 8px;border-radius:8px;background:var(--bg-2);border:1px solid var(--bg-3);text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:all .15s;} #s-qb2 .hpk-rate-cell:hover{border-color:var(--accent);background:var(--bg-0);} #s-qb2 .hpk-rate-cell.on{background:var(--accent-seam);border-color:var(--accent);} #s-qb2 .hpk-rate-cell.na{opacity:.45;cursor:not-allowed;} #s-qb2 .hpk-rate-cell .rate-label{font-family:var(--fu);font-size:8px;font-weight:800;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;} #s-qb2 .hpk-rate-cell .rate-val{font-family:var(--fd);font-size:14px;font-weight:300;color:var(--t1);} /* Activity picker cards */ #s-qb2 .apk-card{display:grid;grid-template-columns:40px 1fr auto;gap:12px;padding:12px 18px;border-bottom:1px solid var(--bg-2);cursor:pointer;align-items:center;transition:background .15s;} #s-qb2 .apk-card:hover{background:var(--bg-0);} #s-qb2 .apk-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;} #s-qb2 .apk-icon.nature{background:var(--green-bg);color:var(--green);} #s-qb2 .apk-icon.culture{background:var(--accent-seam);color:var(--accent);} #s-qb2 .apk-icon.adventure{background:rgba(74,127,181,.14);color:var(--blue);} #s-qb2 .apk-icon.food{background:rgba(192,106,32,.14);color:var(--orange);} #s-qb2 .apk-name{font-family:var(--fb);font-size:12px;font-weight:600;color:var(--t1);} #s-qb2 .apk-meta{font-size:10px;color:var(--t3);margin-top:3px;display:flex;gap:10px;align-items:center;} #s-qb2 .apk-meta .dur{display:inline-flex;align-items:center;gap:3px;} #s-qb2 .apk-meta svg{width:11px;height:11px;fill:none;stroke:var(--t3);stroke-width:1.4;} #s-qb2 .apk-right{text-align:right;} #s-qb2 .apk-price{font-family:var(--fd);font-size:18px;font-weight:300;color:var(--t1);line-height:1;} #s-qb2 .apk-pricing-type{font-family:var(--fu);font-size:8px;font-weight:800;color:var(--t4);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;} /* City picker cards */ #s-qb2 .cpk-card{display:grid;grid-template-columns:40px 1fr auto;gap:12px;padding:12px 18px;border-bottom:1px solid var(--bg-2);cursor:pointer;align-items:center;transition:background .15s;} #s-qb2 .cpk-card:hover{background:var(--bg-0);} #s-qb2 .cpk-card.used{background:rgba(168,116,18,.06);} #s-qb2 .cpk-icon{width:40px;height:40px;border-radius:10px;background:var(--bg-2);border:1px solid var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:18px;} #s-qb2 .cpk-name{font-family:var(--fb);font-size:13px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:6px;} #s-qb2 .cpk-check{color:var(--accent);font-size:12px;} #s-qb2 .cpk-desc{font-size:10px;color:var(--t3);margin-top:2px;} #s-qb2 .cpk-stats{display:flex;gap:10px;margin-top:4px;font-size:9px;color:var(--t4);font-family:var(--fu);letter-spacing:.02em;} #s-qb2 .cpk-stats .stat{display:inline-flex;align-items:center;gap:3px;} #s-qb2 .cpk-right{text-align:right;} #s-qb2 .cpk-hotels{font-family:var(--fd);font-size:20px;font-weight:300;color:var(--accent);line-height:1;} #s-qb2 .cpk-hotels-label{font-family:var(--fu);font-size:8px;font-weight:800;color:var(--t4);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;} #s-qb2 .zone-chip{font-family:var(--fu);font-size:8px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--violet-bg);color:var(--violet);letter-spacing:.04em;text-transform:uppercase;margin-left:4px;} /* Hotel badges used inside picker cards */ #s-qb2 .htl-badge{font-family:var(--fu);font-size:8px;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;} #s-qb2 .htl-badge.contract{background:var(--green-bg);color:var(--green);} #s-qb2 .htl-badge.rack{background:rgba(155,77,92,.12);color:var(--red);} #s-qb2 .htl-badge.hie{background:var(--accent-seam);color:var(--accent);} #s-qb2 .htl-card-conf{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;} #s-qb2 .htl-card-conf.green{background:var(--green);} #s-qb2 .htl-card-conf.blue{background:var(--blue);} #s-qb2 .htl-card-conf.red{background:var(--red);} /* Price-override modal — E4: full qb2-modal-card pattern */ #s-qb2 .qb2-modal-card{background:var(--bg-1);border-radius:14px;padding:24px;max-width:380px;width:90%;} #s-qb2 .qb2-modal-title{font-family:var(--fu);font-size:15px;font-weight:700;color:var(--t1);margin-bottom:10px;} #s-qb2 .qb2-modal-body{margin-bottom:4px;} #s-qb2 .qb2-modal-sub{font-family:var(--fb);font-size:13px;color:var(--t4);margin:0 0 12px;} #s-qb2 .qb2-modal-input{ display:block;width:100%;height:44px;border-radius:10px; border:1.5px solid var(--bg-4);font-family:var(--fb); font-size:14px;padding:0 12px;box-sizing:border-box;outline:none; transition:border-color .15s; } #s-qb2 .qb2-modal-input:focus{border-color:var(--accent);} #s-qb2 .qb2-modal-actions{display:flex;flex-direction:row;gap:8px;margin-top:16px;} #s-qb2 .qb2-modal-btn{ font-family:var(--fb);font-size:13px;font-weight:600; border-radius:10px;height:38px;padding:0 18px;cursor:pointer;border:none; transition:opacity .15s; } #s-qb2 .qb2-modal-btn--primary{background:var(--accent);color:var(--bg-1);} #s-qb2 .qb2-modal-btn--primary:hover{opacity:.88;} #s-qb2 .qb2-modal-btn--ghost{background:transparent;border:1.5px solid var(--bg-4);color:var(--t3);} #s-qb2 .qb2-modal-btn--ghost:hover{background:var(--bg-2);} /* ── §10 Edge Cases — Empty states + Skeletons ── */ #s-qb2 .empty-state{text-align:center;padding:48px 24px;} #s-qb2 .empty-state-icon{font-size:48px;margin-bottom:12px;opacity:.5;} #s-qb2 .empty-state-title{font-family:var(--fd);font-size:22px;font-weight:300;color:var(--t2);margin-bottom:6px;} #s-qb2 .empty-state-desc{font-size:13px;color:var(--t4);line-height:1.6;max-width:320px;margin:0 auto 16px;font-family:var(--fb);} #s-qb2 .empty-state-cta{ display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border-radius:999px;border:none;cursor:pointer; font-family:var(--fu);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; background:var(--accent-metal);color:var(--t1); box-shadow:0 4px 14px rgba(26,23,20,.14),inset 0 1px 0 rgba(255,255,255,.18);position:relative;overflow:hidden; } #s-qb2 .empty-state-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 55%);pointer-events:none;} @media(max-width:700px){ #s-qb2 .empty-state{padding:32px 16px;} #s-qb2 .empty-state-icon{font-size:36px;} #s-qb2 .empty-state-title{font-size:18px;} } @keyframes qb2TDShimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}} #s-qb2 .skeleton{position:relative;overflow:hidden;background:var(--bg-2);border-radius:10px;} #s-qb2 .skeleton::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,var(--bg-3) 50%,transparent 100%);animation:qb2TDShimmer 1.8s infinite;} #s-qb2 .skel-line{height:12px;margin-bottom:8px;border-radius:6px;} #s-qb2 .skel-line.w40{width:40%;} #s-qb2 .skel-line.w60{width:60%;} #s-qb2 .skel-line.w80{width:80%;} #s-qb2 .skel-line.w100{width:100%;} #s-qb2 .skel-line.h20{height:20px;} #s-qb2 .skel-line.h32{height:32px;} #s-qb2 .skel-circle{width:44px;height:44px;border-radius:50%;} #s-qb2 .skel-card{padding:16px;border-radius:14px;border:1px solid var(--bg-3);background:var(--bg-1);} /* Sheet-mode overrides for mobile (< 700px): pickers fill the sheet */ @media(max-width:700px){ .qb2-sheet .picker{border:none;border-radius:0;box-shadow:none;} .qb2-sheet .hpk-card,.qb2-sheet .apk-card,.qb2-sheet .cpk-card{padding-left:16px;padding-right:16px;} } /* ═══════════════════ END TURN D ═══════════════════════════════ */ /* ═══════════════════════════════════════════════════ TURN E1 — Timeline rebuild (prototype-native DOM) LWS v6.1 palette, all scoped under #s-qb2. ═══════════════════════════════════════════════════ */ /* Neutralise legacy weather — no emission any more */ #s-qb2 .tl-weather{display:none !important} /* Controls row */ #s-qb2 .tl-controls{display:flex;align-items:center;gap:8px;padding:10px 20px 8px;flex-wrap:wrap} #s-qb2 .tl-controls .tl-btn{ background:var(--bg-0);border:1px solid var(--bg-3);border-radius:8px;padding:5px 12px; font-family:var(--fb);font-size:10px;font-weight:600; color:var(--t2);cursor:pointer;transition:background .15s,border-color .15s; } #s-qb2 .tl-controls .tl-btn:hover{background:var(--bg-2);border-color:var(--accent);color:var(--t1)} #s-qb2 .tl-badge-custom{ display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px; background:var(--accent-seam);color:var(--accent);border:1px solid rgba(168,116,18,.28); font-family:'Syne','Inter',system-ui,sans-serif;font-size:8px;font-weight:700; letter-spacing:.1em;text-transform:uppercase; } /* Real progress bar */ #s-qb2 .tl-progress{display:flex;align-items:center;gap:8px;padding:4px 20px 12px} #s-qb2 .tl-progress-bar{flex:1;height:4px;background:var(--bg-2);border-radius:999px;overflow:hidden} #s-qb2 .tl-progress-fill{ height:100%;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-dn) 60%,var(--accent-dn) 100%); border-radius:999px;transition:width .45s cubic-bezier(.2,.9,.3,1); } #s-qb2 .tl-progress-text{ font-family:var(--fb);font-size:10px;font-weight:600; color:var(--t3);white-space:nowrap;letter-spacing:.02em; } #s-qb2 .tl-progress-planned{ font-family:'Syne','Inter',system-ui,sans-serif;font-size:8px;font-weight:700; color:var(--accent);white-space:nowrap;letter-spacing:.1em;text-transform:uppercase;margin-left:4px; } /* Timeline body */ #s-qb2 .tl{padding:4px 16px 14px;display:flex;flex-direction:column;gap:0} /* Item row (rail + handle + card) */ #s-qb2 .tl-item{ display:flex;align-items:stretch;gap:8px;position:relative;padding:2px 0; min-height:40px;transition:background .15s; } #s-qb2 .tl-item:hover{background:rgba(234,228,218,.35);border-radius:10px} /* Rail — override legacy sizing to align with taller card */ #s-qb2 .tl .tl-rail{width:20px;display:flex;flex-direction:column;align-items:center;flex-shrink:0;padding-top:14px} #s-qb2 .tl .tl-dot{ width:10px;height:10px;border-radius:50%;flex-shrink:0; border:2px solid var(--t5);background:var(--bg-1);z-index:1; transition:transform .15s ease,box-shadow .15s ease; } #s-qb2 .tl .tl-item:hover .tl-dot{transform:scale(1.25);box-shadow:0 0 0 3px var(--accent-seam)} #s-qb2 .tl .tl-dot.gold{border-color:var(--accent);background:var(--accent)} #s-qb2 .tl .tl-dot.green{border-color:var(--green);background:var(--green)} #s-qb2 .tl .tl-dot.amber{border-color:var(--orange);background:var(--orange)} #s-qb2 .tl .tl-line{flex:1;width:2px;background:var(--bg-3);min-height:14px} #s-qb2 .tl .tl-line.dashed{ background:repeating-linear-gradient(180deg,var(--t5) 0,var(--t5) 3px,transparent 3px,transparent 6px); } /* Drag handle */ #s-qb2 .tl-drag-handle{ width:14px;flex-shrink:0;cursor:grab;user-select:none; display:flex;align-items:center;justify-content:center;padding-top:10px; font-size:11px;color:var(--t5);touch-action:none;letter-spacing:-1px; opacity:0;transition:opacity .15s,color .15s; } #s-qb2 .tl-item:hover .tl-drag-handle{opacity:.7} #s-qb2 .tl-drag-handle:hover{color:var(--accent);opacity:1 !important} #s-qb2 .tl-drag-handle:active{cursor:grabbing} #s-qb2 .tl-drag-handle--pinned{cursor:default;opacity:0 !important;pointer-events:none} /* Item card */ #s-qb2 .tl-item-card{ flex:1;min-width:0;background:var(--bg-1);border:1px solid var(--bg-3);border-radius:14px; padding:10px 14px;margin:2px 0;position:relative; transition:background .15s,border-color .15s,box-shadow .2s,transform .15s; } #s-qb2 .tl-item-card:hover{ background:var(--bg-0);border-color:var(--bg-4); box-shadow:0 4px 14px rgba(20,14,8,.07),0 1px 3px var(--b0); } #s-qb2 .tl-item-card.highlight{ border-left:3px solid var(--accent);padding-left:11px; background:linear-gradient(180deg,var(--bg-1) 0%,#FDF9F1 100%); } #s-qb2 .tl-item-card.drive-card{ border-style:dashed;border-color:var(--t5);background:rgba(242,237,228,.4); } #s-qb2 .tl-item-card.tl-item-card--checkin, #s-qb2 .tl-item-card.tl-item-card--arrival{ background:rgba(26,107,90,.06);border-color:rgba(26,107,90,.22); } /* Head row (time + badge) */ #s-qb2 .tl-item-head{display:flex;align-items:center;gap:10px;margin-bottom:4px} #s-qb2 .tl-item-head .tl-time{ font-family:var(--fd);font-size:15px;font-weight:400; color:var(--t2);margin:0;letter-spacing:.01em;line-height:1.1; } #s-qb2 .tl-item-head .tl-time--clickable{cursor:pointer;transition:color .15s} #s-qb2 .tl-item-head .tl-time--clickable:hover{color:var(--accent)} #s-qb2 .tl-item-head .tl-dur-badge{margin-left:auto} /* Body (place/label/desc) */ #s-qb2 .tl-item-body{display:flex;flex-direction:column;gap:2px;min-width:0} #s-qb2 .tl-item-body .tl-place{ font-family:'Syne','Inter',system-ui,sans-serif;font-size:9px;font-weight:700; color:var(--t3);letter-spacing:.12em;text-transform:uppercase;line-height:1.2; } #s-qb2 .tl-item-body .tl-label{ font-family:var(--fb);font-size:13px;font-weight:600; color:var(--t1);line-height:1.3;letter-spacing:.005em; } #s-qb2 .tl-item-body .tl-label--editable{cursor:text;border-radius:4px;padding:1px 3px;margin:-1px -3px;transition:background .15s} #s-qb2 .tl-item-body .tl-label--editable:hover{background:var(--accent-ghost)} #s-qb2 .tl-item-body .tl-desc{ font-family:var(--fb);font-size:11px;font-weight:400; color:var(--t3);line-height:1.35;margin-top:2px; } #s-qb2 .tl-item-body .tl-desc.tl-label--editable:hover{background:rgba(168,116,18,.06)} #s-qb2 .tl-placeholder{color:var(--t5);font-style:italic} /* Inline editor input (re-used by _startLabelEdit) */ #s-qb2 .tl-inline-editor{ font-family:var(--fb);font-size:13px;font-weight:600; color:var(--t1);background:var(--bg-1);border:1px solid var(--accent);border-radius:6px; padding:2px 6px;outline:none;box-shadow:0 0 0 3px var(--accent-seam);width:100%; } /* Photo strip (real images only) */ #s-qb2 .tl-photo-strip{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap} #s-qb2 .tl-photo-strip .tl-photo{ width:64px;height:48px;border-radius:8px;overflow:hidden; border:1px solid var(--bg-3);background:var(--bg-2);object-fit:cover;display:block; transition:transform .2s ease,box-shadow .2s ease; } #s-qb2 .tl-photo-strip .tl-photo:hover{transform:scale(1.04);box-shadow:0 4px 12px rgba(20,14,8,.12)} /* Actions row (lock + remove) */ #s-qb2 .tl-item-actions{ position:absolute;top:8px;right:10px;display:flex;gap:4px; opacity:0;transition:opacity .15s; } #s-qb2 .tl-item-card:hover .tl-item-actions{opacity:1} #s-qb2 .tl-item-actions:has(.tl-lock-btn--on){opacity:1} #s-qb2 .tl-item-actions .tl-lock-btn, #s-qb2 .tl-item-actions .tl-remove-btn, #s-qb2 .tl-item-actions .tl-edit-btn{ width:22px;height:22px;border-radius:6px;border:1px solid transparent; background:transparent;cursor:pointer;display:inline-flex;align-items:center; justify-content:center;font-size:12px;color:var(--t3);padding:0;line-height:1; transition:background .15s,color .15s,border-color .15s; } #s-qb2 .tl-item-actions .tl-lock-btn:hover{background:var(--bg-0);color:var(--accent);border-color:var(--bg-3)} #s-qb2 .tl-item-actions .tl-lock-btn.tl-lock-btn--on{color:var(--accent)} #s-qb2 .tl-item-actions .tl-remove-btn{font-size:16px;font-weight:400} #s-qb2 .tl-item-actions .tl-remove-btn:hover{background:rgba(183,63,63,.08);color:var(--red);border-color:rgba(183,63,63,.22)} /* Activity price meta */ #s-qb2 .tl-item-body .tl-act-meta{display:flex;align-items:center;gap:8px;margin-top:4px} #s-qb2 .tl-item-body .tl-act-meta .act-price-btn{ font-family:'Syne','Inter',system-ui,sans-serif;font-size:10px;font-weight:700; color:var(--green);background:var(--green-bg);border:1px solid rgba(26,107,90,.2); border-radius:999px;padding:2px 10px;cursor:pointer;letter-spacing:.04em; transition:background .15s; } #s-qb2 .tl-item-body .tl-act-meta .act-price-btn:hover{background:var(--green-bg)} #s-qb2 .tl-item-body .tl-act-meta .act-price-btn.custom{color:var(--accent);background:rgba(168,116,18,.1);border-color:var(--accent-ring)} /* Insert point (unchanged mechanic) */ #s-qb2 .tl-insert{ display:flex;align-items:center;gap:6px;padding:1px 0 1px 28px;height:18px; opacity:0;transition:opacity .2s; } #s-qb2 .tl:hover .tl-insert{opacity:1} #s-qb2 .tl-insert__line{flex:1;height:1px;background:var(--bg-3)} #s-qb2 .tl-insert__btn{ width:20px;height:20px;border-radius:50%;border:1px dashed var(--accent); background:var(--bg-1);color:var(--accent);font-size:13px;cursor:pointer; display:flex;align-items:center;justify-content:center;font-weight:700;line-height:1; transition:all .15s ease; } #s-qb2 .tl-insert__btn:hover{transform:scale(1.15);background:rgba(168,116,18,.1);border-style:solid} /* Authored footer (reset overrides) */ #s-qb2 .tl-authored-footer{ display:flex;align-items:center;gap:8px;padding:8px 20px 4px; font-family:var(--fb);font-size:10px;color:var(--t3); } #s-qb2 .tl-authored-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block} #s-qb2 .tl-reset-link{ background:transparent;border:none;color:var(--accent);font-size:10px;font-weight:600; cursor:pointer;text-decoration:underline;padding:0 4px;font-family:var(--fb); } #s-qb2 .tl-reset-link:hover{color:var(--accent-dn)} /* Mobile */ @media(max-width:600px){ #s-qb2 .tl{padding:4px 10px 12px} #s-qb2 .tl-controls{padding:8px 12px 6px;gap:6px} #s-qb2 .tl-progress{padding:4px 12px 10px} #s-qb2 .tl-item-card{padding:9px 12px} #s-qb2 .tl-item-head .tl-time{font-size:14px} #s-qb2 .tl-item-body .tl-label{font-size:12.5px} #s-qb2 .tl-photo-strip .tl-photo{width:56px;height:42px} } /* ═══════════════════ END TURN E1 ═══════════════════════════════ */ /* ═══════════════════ BEGIN TURN E2 ═════════════════════════════ Hotel panel (.htl-selected + pills + backups) and hotel picker overlay (.hpk-card + .hpk-rate-grid). Prototype nd-prototype-qb2 §3 DOM match. LWS v6.1 palette — zero var(--). All scoped under #s-qb2 or .qb2-overlay. ════════════════════════════════════════════════════════════════ */ /* ── Neutralise legacy inline emissions (no longer rendered) ── */ #s-qb2 .htl-opt-enhanced, #s-qb2 .htl-card-list, #s-qb2 .htl-sort-bar, #s-qb2 .htl-filters, #s-qb2 .htl-city-tabs, #s-qb2 .htl-search-bar, #s-qb2 .htl-panel, #s-qb2 .htl-slot, #s-qb2 .htl-tier-row { /* stale — no longer emitted by v3 */ } /* ── Rate-override status strip ─────────────────────────────── */ #s-qb2 .htl-override-strip{ display:flex;align-items:center;gap:8px; margin:0 16px 10px;padding:7px 12px;border-radius:10px; background:rgba(192,106,32,.08);border:1px solid rgba(192,106,32,.25); } #s-qb2 .htl-override-strip .htl-override-label{ font-family:var(--fu);font-size:9px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--orange); } #s-qb2 .htl-override-strip .htl-override-val{ font-family:var(--fd);font-size:14px;font-weight:400; color:var(--t1);margin-right:auto; } /* ── Gap warning ────────────────────────────────────────────── */ #s-qb2 .htl-gap-warn{ display:flex;align-items:flex-start;gap:8px; margin:0 16px 10px;padding:8px 12px;border-radius:10px; background:rgba(196,152,32,.1);border:1px solid rgba(196,152,32,.3); font-family:var(--fb);font-size:11px;color:var(--t3); } #s-qb2 .htl-gap-warn__icon{flex-shrink:0;} #s-qb2 .htl-gap-warn__text strong{color:var(--t2);} /* ── Hotel Panel v3 (prototype-native) ────────────────────────────────────── Replaces old E2 .htl-selected grid layout. All scoped under #s-qb2. Zero var(--). LWS v6.1 hex tokens only. ─────────────────────────────────────────────────────────────────────────── */ #s-qb2 .htl-panel-v3 { background: var(--bg-1); border-top: 1px solid var(--b1); } #s-qb2 .htl-head { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 10px; } #s-qb2 .zone-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--t4); font-family:var(--fb); } #s-qb2 .tier-toggle { display: flex; gap: 0; border-radius: 999px; overflow: hidden; border: 1px solid var(--bg-4); align-self: flex-start; } #s-qb2 .tier-btn { padding: 6px 14px; font-family:var(--fu); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--bg-1); color: var(--t4); border: none; cursor: pointer; transition: background .15s, color .15s; } #s-qb2 .tier-btn + .tier-btn { border-left: 1px solid var(--bg-4); } #s-qb2 .tier-btn:hover { background: var(--bg-2); color: var(--t3); } #s-qb2 .tier-btn.on { background: var(--accent); color: var(--bg-1); font-weight: 800; } #s-qb2 .tier-btn.pricing { position: relative; } #s-qb2 .tier-btn.pricing::after { content: ''; position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--green); } #s-qb2 .htl-search { display: block; width: calc(100% - 32px); padding: 8px 14px; border-radius: 10px; border: 1px solid var(--bg-4); background: var(--bg-1); font-size: 12px; color: var(--t1); font-family:var(--fb); margin: 0 16px 10px; cursor: pointer; box-sizing: border-box; outline: none; transition: border-color .15s; } #s-qb2 .htl-search::placeholder { color:var(--t4); } #s-qb2 .htl-search:hover { border-color: var(--accent); } #s-qb2 .htl-tier-nudge { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 16px 8px; padding: 7px 12px; background: rgba(168,116,18,.06); border-radius: 8px; font-size: 10px; color: var(--accent); font-family:var(--fb); } #s-qb2 .htl-tier-nudge-btn { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent-ring); background: var(--accent-ghost); color: var(--accent); font-size: 9px; font-weight: 700; font-family:var(--fu); cursor: pointer; white-space: nowrap; } /* Selected hotel card */ #s-qb2 .htl-selected { margin: 0 16px 10px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--bg-3); box-shadow: inset 0 1px 3px rgba(20,14,8,.08); overflow: hidden; } #s-qb2 .htl-sel-photo { width: 100%; height: 80px; object-fit: cover; display: block; border-radius: 10px 10px 0 0; } #s-qb2 .htl-sel-name { font-size: 13px; font-weight: 600; color: var(--t1); padding: 12px 14px 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; line-height: 1.3; } #s-qb2 .htl-stars { font-size: 9px; color: var(--accent); letter-spacing: -1px; } #s-qb2 .htl-sel-rate-badge { margin-left: auto; font-size: 10px; font-weight: 700; font-family:var(--fb); color: var(--t3); white-space: nowrap; } #s-qb2 .htl-sel-room { font-size: 11px; color: var(--t4); padding: 0 14px 8px; } #s-qb2 .htl-sel-pills { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 14px 8px; } #s-qb2 .htl-pill { padding: 4px 10px; border-radius: 999px; font-size: 9px; font-weight: 700; font-family:var(--fu); cursor: pointer; background: var(--bg-2); color: var(--t4); border: 1px solid var(--bg-3); transition: background .12s, color .12s, border-color .12s; user-select: none; } #s-qb2 .htl-pill:hover:not(.disabled) { background: var(--bg-3); color: var(--t3); } #s-qb2 .htl-pill.on { background: rgba(168,116,18,.1); color: var(--accent); border-color: var(--accent-ring); } #s-qb2 .htl-pill.disabled { opacity: .4; cursor: default; } #s-qb2 .htl-sel-actions { display: flex; gap: 5px; flex-wrap: wrap; padding: 4px 14px 12px; } #s-qb2 .htl-sel-btn { padding: 5px 11px; border-radius: 999px; font-size: 9px; font-weight: 700; font-family:var(--fu); cursor: pointer; background: var(--bg-2); color: var(--t4); border: 1px solid var(--bg-3); transition: all .12s; } #s-qb2 .htl-sel-btn:hover { background: var(--bg-3); color: var(--t1); } #s-qb2 .htl-sel-btn--danger { color: #9B3A3A; background: rgba(155,58,58,.06); border-color: rgba(155,58,58,.2); } #s-qb2 .htl-sel-btn--danger:hover { background: rgba(155,58,58,.12); } /* Empty state */ #s-qb2 .htl-empty { padding: 20px 16px; text-align: center; } #s-qb2 .htl-pick-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 999px; border: 1.5px dashed var(--bg-4); background: transparent; color: var(--accent); font-size: 11px; font-weight: 700; font-family:var(--fu); cursor: pointer; transition: border-color .15s, background .15s; } #s-qb2 .htl-pick-btn:hover { border-color: var(--accent); background: rgba(168,116,18,.04); } /* Backup slots */ #s-qb2 .htl-backups { border-top: 1px solid var(--b1); padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; } #s-qb2 .htl-backup-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; min-height: 30px; } #s-qb2 .htl-backup-label { font-size: 8px; font-weight: 700; font-family:var(--fu); text-transform: uppercase; letter-spacing: .07em; color:var(--t4); min-width: 52px; flex-shrink: 0; } #s-qb2 .htl-backup-name { flex: 1; font-size: 11px; color: var(--t3); font-family:var(--fb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #s-qb2 .htl-backup-add { flex: 1; text-align: left; padding: 4px 0; border: none; background: none; font-size: 10px; font-weight: 600; color:var(--t4); cursor: pointer; font-family:var(--fb); transition: color .12s; } #s-qb2 .htl-backup-add:hover { color: var(--accent); } /* PE_FIX_2026_04_20_AUTO_BACKUPS — suggest-backups action + auto badge */ #s-qb2 .htl-backup-autofill-row { display:flex; justify-content:flex-start; padding:2px 0 4px; } #s-qb2 .htl-backup-autofill { padding:5px 10px; border-radius:8px; border:1px dashed var(--accent); background:transparent; color:var(--accent); cursor:pointer; font-family:var(--fb); font-size:10px; font-weight:600; letter-spacing:.02em; transition: background .12s, color .12s; } #s-qb2 .htl-backup-autofill:hover { background:var(--accent); color:var(--bg-0); } #s-qb2 .htl-backup-auto-badge { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px; background:var(--accent); color:var(--bg-0); font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; } /* PE_FIX_2026_04_20_BULK_PICK3 — bulk pick-3 UI */ .qb2-overlay .picker-filter--bulk { border:1px dashed var(--accent); color:var(--accent); } .qb2-overlay .picker-filter--bulk.on { background:var(--accent); color:var(--bg-0); border-style:solid; } .qb2-overlay .hpk-card.bulk-staged { outline:2px solid var(--accent); outline-offset:-2px; } .qb2-overlay .hpk-bulk-tray { border-top:1px solid var(--b1); padding:10px 14px 12px; background:var(--bg-1); display:flex; flex-direction:column; gap:8px; position:sticky; bottom:0; } .qb2-overlay .hpk-bulk-tray-title { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--t4); } .qb2-overlay .hpk-bulk-tray-items { display:flex; flex-wrap:wrap; gap:6px; min-height:28px; } .qb2-overlay .hpk-bulk-empty { color:var(--t5); font-size:11px; font-style:italic; padding:4px 0; } .qb2-overlay .hpk-bulk-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; background:var(--bg-2); border:1px solid var(--b1); color:var(--t1); font-size:11px; cursor:pointer; transition: background .12s, border-color .12s; } .qb2-overlay .hpk-bulk-chip:hover { background:var(--bg-3); } .qb2-overlay .hpk-bulk-chip.primary { background:var(--accent); border-color:var(--accent); color:var(--bg-0); font-weight:700; } .qb2-overlay .hpk-bulk-chip-x { border:none; background:transparent; color:inherit; cursor:pointer; padding:0 2px; font-size:14px; line-height:1; opacity:.7; } .qb2-overlay .hpk-bulk-chip-x:hover { opacity:1; } .qb2-overlay .hpk-bulk-tray-actions { display:flex; justify-content:flex-end; gap:8px; } .qb2-overlay .hpk-bulk-cancel, .qb2-overlay .hpk-bulk-done { padding:6px 14px; border-radius:8px; cursor:pointer; font-family:var(--fb); font-size:12px; font-weight:600; } .qb2-overlay .hpk-bulk-cancel { background:transparent; border:1px solid var(--b1); color:var(--t2); } .qb2-overlay .hpk-bulk-done { background:var(--accent); border:1px solid var(--accent); color:var(--bg-0); } .qb2-overlay .hpk-bulk-done.disabled { opacity:.4; cursor:not-allowed; } #s-qb2 .htl-backup-chg, #s-qb2 .htl-backup-del { padding: 3px 7px; border-radius: 6px; border: 1px solid var(--bg-3); background: var(--bg-1); font-size: 10px; cursor: pointer; color: var(--t4); transition: background .12s; } #s-qb2 .htl-backup-chg:hover { background: var(--b1); color: var(--t1); } #s-qb2 .htl-backup-del { color: #9B3A3A; } #s-qb2 .htl-backup-del:hover { background: rgba(155,58,58,.08); } /* Confidence dot helpers (used in rate badges) */ #s-qb2 .conf-dot--contract, #s-qb2 .conf-dot--rack, #s-qb2 .conf-dot--none { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } #s-qb2 .conf-dot--contract { background: var(--green); } #s-qb2 .conf-dot--rack { background: var(--accent); } #s-qb2 .conf-dot--none { background: var(--b2); } /* Hotel badges (picker overlay — retained) */ #s-qb2 .htl-badge { padding: 2px 7px; border-radius: 999px; font-family:var(--fu); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; } #s-qb2 .htl-badge.contract { background: var(--green-bg); color: var(--green); } #s-qb2 .htl-badge.rack { background: #EDEDEC; color: var(--t3); } #s-qb2 .htl-badge.hie { background: var(--accent-seam); color: var(--accent); } /* ═══════════════════ HOTEL PICKER OVERLAY ═══════════════════ */ .qb2-overlay .picker.qb2-picker-hotel{ background:var(--bg-1);border-radius:14px;overflow:hidden;display:flex;flex-direction:column; } .qb2-overlay .picker.qb2-picker-hotel .picker-head{ padding:14px 20px 12px;border-bottom:1px solid var(--bg-3); } .qb2-overlay .picker.qb2-picker-hotel .picker-search{ display:flex;align-items:center;gap:8px;padding:9px 14px; border-radius:10px;border:1px solid var(--bg-4);background:var(--bg-0); transition:border-color .15s ease,box-shadow .15s ease; } .qb2-overlay .picker.qb2-picker-hotel .picker-search:focus-within{ border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-seam);background:var(--bg-1); } .qb2-overlay .picker.qb2-picker-hotel .picker-search svg{ width:15px;height:15px;color:var(--t4);flex-shrink:0; } .qb2-overlay .picker.qb2-picker-hotel .picker-search input{ flex:1;border:none;background:none;outline:none; font-family:var(--fb);font-size:12px;color:var(--t1); } .qb2-overlay .picker.qb2-picker-hotel .picker-search input::placeholder{color:var(--t4);} .qb2-overlay .picker.qb2-picker-hotel .picker-filters{ display:flex;align-items:center;gap:4px;padding:10px 20px;flex-wrap:wrap; border-bottom:1px solid var(--bg-3);background:var(--bg-0); } .qb2-overlay .picker.qb2-picker-hotel .picker-filter{ padding:4px 11px;border-radius:999px; font-family:var(--fu);font-size:9px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--t3); background:var(--bg-1);border:1px solid var(--bg-4);cursor:pointer; transition:all .15s ease; } .qb2-overlay .picker.qb2-picker-hotel .picker-filter:hover{background:var(--bg-2);color:var(--t2);border-color:var(--t4);} .qb2-overlay .picker.qb2-picker-hotel .picker-filter.on{ background:var(--accent-seam);color:var(--accent);border-color:rgba(168,116,18,.4); } .qb2-overlay .picker.qb2-picker-hotel .picker-filter--zone{border-style:dashed;} .qb2-overlay .picker.qb2-picker-hotel .picker-count{ margin-left:auto; font-family:var(--fu);font-size:9px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--green); } /* Picker list + group headers */ .qb2-overlay .hpk-list{max-height:min(62vh,560px);overflow-y:auto;-webkit-overflow-scrolling:touch;} .qb2-overlay .pk-group{ display:flex;align-items:center;gap:8px; padding:10px 20px 6px; border-top:1px solid var(--bg-3);margin-top:2px; background:var(--bg-0); } .qb2-overlay .pk-group:first-child{border-top:none;margin-top:0;} .qb2-overlay .pk-group-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .qb2-overlay .pk-group-dot.green{background:var(--green);} .qb2-overlay .pk-group-dot.blue{background:var(--blue);} .qb2-overlay .pk-group-dot.red{background:var(--red);} .qb2-overlay .pk-group-dot.amber{background:var(--orange);} .qb2-overlay .pk-group-label{ font-family:var(--fu);font-size:8px;font-weight:900; letter-spacing:.12em;text-transform:uppercase;color:var(--t3); } .qb2-overlay .pk-group-count{ margin-left:auto; font-family:var(--fu);font-size:8px;font-weight:700; color:var(--t4); } /* .hpk-card — prototype hotel picker row with optional rate grid */ .qb2-overlay .hpk-card{ display:grid;grid-template-columns:48px 1fr auto;gap:4px 12px; padding:12px 20px;cursor:pointer;border-bottom:1px solid var(--bg-2); background:var(--bg-1);transition:background .15s ease;position:relative; } .qb2-overlay .hpk-card:hover{background:var(--bg-0);} .qb2-overlay .hpk-card.selected{background:var(--accent-ghost);padding-left:17px;border-left:3px solid var(--accent);} .qb2-overlay .hpk-avatar{ grid-row:1/4;width:48px;height:48px;border-radius:10px;overflow:hidden; background:var(--bg-2);border:1px solid var(--bg-4); display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--t4); } .qb2-overlay .hpk-avatar img{width:100%;height:100%;object-fit:cover;display:block;} .qb2-overlay .hpk-main{min-width:0;display:flex;flex-direction:column;gap:3px;} .qb2-overlay .hpk-name{ font-family:var(--fb);font-size:13px;font-weight:600;color:var(--t1); display:flex;align-items:center;gap:6px;flex-wrap:wrap; } .qb2-overlay .hpk-name .stars{color:var(--accent);font-size:10px;letter-spacing:-1px;} .qb2-overlay .hpk-sub{ font-family:var(--fb);font-size:10px;color:var(--t3); display:flex;align-items:center;gap:6px;flex-wrap:wrap; } .qb2-overlay .hpk-sub .zone-chip{ padding:2px 7px;border-radius:999px; font-family:var(--fu);font-size:7px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--t4); background:var(--bg-0);border:1px solid var(--bg-4); } .qb2-overlay .hpk-tags{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:3px;} .qb2-overlay .hpk-rates{ grid-row:1/4;display:flex;flex-direction:column;align-items:flex-end; justify-content:center;gap:1px; } .qb2-overlay .hpk-price{ font-family:var(--fd);font-size:20px;font-weight:400; color:var(--t1);letter-spacing:-.02em;line-height:1; } .qb2-overlay .hpk-per{ font-family:var(--fb);font-size:9px;color:var(--t3); } .qb2-overlay .hpk-per--na{color:var(--red);font-weight:700;} .qb2-overlay .hpk-delta{ font-family:var(--fu);font-size:9px;font-weight:700; letter-spacing:.06em;margin-top:1px; } .qb2-overlay .hpk-delta--save{color:var(--green);} .qb2-overlay .hpk-delta--spend{color:var(--red);} .qb2-overlay .hpk-check{font-size:18px;color:var(--accent);} /* Rate confidence dot (green/blue/red diagnostic) */ .qb2-overlay .htl-card-conf, #s-qb2 .htl-card-conf{ display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0; } .qb2-overlay .htl-card-conf.green,#s-qb2 .htl-card-conf.green{background:var(--green);} .qb2-overlay .htl-card-conf.blue,#s-qb2 .htl-card-conf.blue{background:var(--blue);} .qb2-overlay .htl-card-conf.red,#s-qb2 .htl-card-conf.red{background:var(--red);} /* Rate grid (board × occ current) — click cell to pick hotel+board in one */ .qb2-overlay .hpk-rate-grid{ grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px; margin-top:8px;padding-top:8px;border-top:1px solid var(--bg-2); } .qb2-overlay .hpk-rate-cell{ display:flex;flex-direction:column;align-items:center;gap:2px; padding:6px 4px;border-radius:6px; background:var(--bg-0);border:1px solid var(--bg-3); cursor:pointer;transition:all .15s ease; } .qb2-overlay .hpk-rate-cell:hover{background:var(--bg-2);border-color:var(--t4);} .qb2-overlay .hpk-rate-cell.on{ background:var(--accent-seam);border-color:rgba(168,116,18,.4); } .qb2-overlay .hpk-rate-cell.na{opacity:.4;cursor:not-allowed;} .qb2-overlay .hpk-rate-cell.na:hover{background:var(--bg-0);border-color:var(--bg-3);} .qb2-overlay .hpk-rate-cell .rate-label{ font-family:var(--fu);font-size:7px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--t4); } .qb2-overlay .hpk-rate-cell.on .rate-label{color:var(--accent);} .qb2-overlay .hpk-rate-cell .rate-val{ font-family:var(--fd);font-size:13px;font-weight:500;color:var(--t1); line-height:1; } .qb2-overlay .hpk-rate-cell.na .rate-val{ font-family:var(--fu);font-size:9px;font-weight:700; color:var(--t4); } /* Mobile: bottom-sheet variant — tighter padding, 2-col rate grid */ @media(max-width:600px){ .qb2-overlay .picker.qb2-picker-hotel .picker-head{padding:12px 14px 10px;} .qb2-overlay .picker.qb2-picker-hotel .picker-filters{padding:8px 14px;} .qb2-overlay .pk-group{padding:8px 14px 5px;} .qb2-overlay .hpk-card{padding:10px 14px;gap:4px 10px;grid-template-columns:44px 1fr auto;} .qb2-overlay .hpk-card.selected{padding-left:11px;} .qb2-overlay .hpk-avatar{width:44px;height:44px;} .qb2-overlay .hpk-rate-grid{grid-template-columns:repeat(2,1fr);} #s-qb2 .htl-selected{grid-template-columns:54px 1fr;gap:0 10px;padding:12px;margin:8px 14px;} #s-qb2 .htl-sel-photo{width:54px;height:54px;} #s-qb2 .htl-sel-actions{grid-row:3/4;grid-column:1/3;flex-direction:row;flex-wrap:wrap;margin-top:8px;} #s-qb2 .htl-sel-pills{margin:0 14px 10px;} #s-qb2 .htl-backups{margin:0 14px 10px;} } /* ═══════════════════ END TURN E2 ═══════════════════════════════ */ /* ═══════════════════════════════════════════════════ TURN E3 — Activity picker, City picker, Inline activity row LWS v6.1 palette, all scoped under #s-qb2 / .qb2-overlay / .qb2-sheet. ═══════════════════════════════════════════════════ */ /* ── Activity picker (apk-*) overlay ─────────────── */ .qb2-overlay .picker.qb2-picker-activity{background:var(--bg-1);border-radius:14px;overflow:hidden;} .qb2-overlay .picker.qb2-picker-activity .picker-head{padding:16px 20px 12px;border-bottom:1px solid var(--bg-2);background:var(--bg-1);} .qb2-overlay .picker.qb2-picker-activity .picker-title{font-family:var(--fu);font-size:12px;font-weight:800;color:var(--t1);letter-spacing:.08em;text-transform:uppercase;} .qb2-overlay .picker.qb2-picker-activity .picker-search{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--bg-4);background:var(--bg-2);margin-top:10px;} .qb2-overlay .picker.qb2-picker-activity .picker-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-seam);} .qb2-overlay .picker.qb2-picker-activity .picker-search svg{width:14px;height:14px;fill:none;stroke:var(--t3);stroke-width:1.6;flex-shrink:0;} .qb2-overlay .picker.qb2-picker-activity .picker-search input{flex:1;border:none;outline:none;background:transparent;font-size:12px;color:var(--t1);font-family:var(--fb);} .qb2-overlay .picker.qb2-picker-activity .picker-search input::placeholder{color:var(--t4);} .qb2-overlay .picker.qb2-picker-activity .picker-filters{display:flex;flex-wrap:wrap;gap:5px;padding:10px 20px;border-bottom:1px solid var(--bg-2);align-items:center;} .qb2-overlay .picker.qb2-picker-activity .picker-filter{padding:4px 11px;border-radius:999px;font-size:9px;font-weight:700;color:var(--t3);background:var(--bg-0);border:1px solid var(--bg-3);cursor:pointer;font-family:var(--fu);letter-spacing:.06em;text-transform:uppercase;transition:all .15s;} .qb2-overlay .picker.qb2-picker-activity .picker-filter:hover{background:var(--bg-2);color:var(--t2);border-color:var(--t4);} .qb2-overlay .picker.qb2-picker-activity .picker-filter.on{background:var(--accent-seam);color:var(--accent);border-color:rgba(168,116,18,.35);} .qb2-overlay .picker.qb2-picker-activity .picker-count{margin-left:auto;font-family:var(--fu);font-size:9px;font-weight:700;color:var(--t4);letter-spacing:.06em;text-transform:uppercase;} .qb2-overlay .apk-list{max-height:460px;overflow-y:auto;} .qb2-overlay .apk-card{ display:grid;grid-template-columns:48px 1fr auto;gap:0 12px; padding:12px 20px;cursor:pointer;border-bottom:1px solid var(--bg-0); transition:background .15s;align-items:center; } .qb2-overlay .apk-card:hover{background:var(--bg-0);} .qb2-overlay .apk-card.selected{background:var(--accent-ghost);cursor:default;border-left:3px solid var(--accent);padding-left:17px;} .qb2-overlay .apk-card.selected .apk-name{color:var(--accent);} .qb2-overlay .apk-photo{ position:relative;width:48px;height:48px;border-radius:10px;overflow:hidden; background:var(--bg-2);border:1px solid var(--bg-3); } .qb2-overlay .apk-photo img{width:100%;height:100%;object-fit:cover;display:block;} .qb2-overlay .apk-photo .apk-icon--overlay{ position:absolute;right:-4px;bottom:-4px;width:22px;height:22px; border-radius:50%;font-size:12px;border:2px solid var(--bg-1); box-shadow:0 2px 4px rgba(20,14,8,.14); } .qb2-overlay .apk-icon{ width:48px;height:48px;border-radius:10px;display:flex; align-items:center;justify-content:center;font-size:22px; background:var(--bg-2);border:1px solid var(--bg-3);color:var(--t3); } .qb2-overlay .apk-icon--wildlife {background:var(--green-bg); color:var(--green);border-color:rgba(26,107,90,.22);} .qb2-overlay .apk-icon--water {background:rgba(74,127,181,.14); color:var(--blue);border-color:rgba(74,127,181,.22);} .qb2-overlay .apk-icon--cultural {background:var(--accent-seam); color:var(--accent);border-color:rgba(168,116,18,.26);} .qb2-overlay .apk-icon--adventure {background:rgba(192,106,32,.14); color:var(--orange);border-color:rgba(192,106,32,.24);} .qb2-overlay .apk-icon--scenic {background:var(--violet-bg); color:var(--violet);border-color:rgba(107,90,165,.24);} .qb2-overlay .apk-icon--experiential{background:var(--accent-seam); color:var(--accent);border-color:rgba(196,152,32,.26);} .qb2-overlay .apk-icon--general {background:rgba(106,90,72,.12); color:var(--t3);border-color:var(--bg-4);} .qb2-overlay .apk-main{min-width:0;} .qb2-overlay .apk-name{font-family:var(--fb);font-size:13px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .qb2-overlay .apk-check{color:var(--accent);font-size:12px;} .qb2-overlay .apk-meta{font-size:10px;color:var(--t3);margin-top:3px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--fb);} .qb2-overlay .apk-meta .dur{display:inline-flex;align-items:center;gap:3px;} .qb2-overlay .apk-meta svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;} .qb2-overlay .apk-time{font-family:var(--fu);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t4);} .qb2-overlay .apk-tags{color:var(--t4);} .qb2-overlay .apk-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;} .qb2-overlay .apk-price{font-family:var(--fd);font-size:20px;font-weight:300;color:var(--t1);letter-spacing:-.01em;line-height:1;} .qb2-overlay .apk-pricing-type{font-family:var(--fu);font-size:8px;font-weight:800;color:var(--t4);letter-spacing:.06em;text-transform:uppercase;} /* Category-colored filter chips */ .qb2-overlay .picker-filter--cat-wildlife.on {background:var(--green-bg);color:var(--green);border-color:rgba(26,107,90,.35);} .qb2-overlay .picker-filter--cat-water.on {background:rgba(74,127,181,.14);color:var(--blue);border-color:rgba(74,127,181,.35);} .qb2-overlay .picker-filter--cat-cultural.on {background:var(--accent-seam);color:var(--accent);border-color:rgba(168,116,18,.35);} .qb2-overlay .picker-filter--cat-adventure.on {background:rgba(192,106,32,.14);color:var(--orange);border-color:rgba(192,106,32,.35);} .qb2-overlay .picker-filter--cat-scenic.on {background:var(--violet-bg);color:var(--violet);border-color:rgba(107,90,165,.35);} .qb2-overlay .picker-filter--cat-experiential.on{background:var(--accent-seam);color:var(--accent);border-color:rgba(196,152,32,.35);} .qb2-overlay .picker-filter--cat-general.on {background:rgba(106,90,72,.12);color:var(--t3);border-color:var(--t4);} /* ── City picker (cpk-*) overlay ─────────────────── */ .qb2-overlay .picker.qb2-picker-city{background:var(--bg-1);border-radius:14px;overflow:hidden;} .qb2-overlay .picker.qb2-picker-city .picker-head{padding:16px 20px 12px;border-bottom:1px solid var(--bg-2);background:var(--bg-1);} .qb2-overlay .picker.qb2-picker-city .picker-title{font-family:var(--fu);font-size:12px;font-weight:800;color:var(--t1);letter-spacing:.08em;text-transform:uppercase;} .qb2-overlay .picker.qb2-picker-city .picker-search{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--bg-4);background:var(--bg-2);margin-top:10px;} .qb2-overlay .picker.qb2-picker-city .picker-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-seam);} .qb2-overlay .picker.qb2-picker-city .picker-search svg{width:14px;height:14px;fill:none;stroke:var(--t3);stroke-width:1.6;flex-shrink:0;} .qb2-overlay .picker.qb2-picker-city .picker-search input{flex:1;border:none;outline:none;background:transparent;font-size:12px;color:var(--t1);font-family:var(--fb);} .qb2-overlay .picker.qb2-picker-city .picker-search input::placeholder{color:var(--t4);} .qb2-overlay .cpk-list{max-height:460px;overflow-y:auto;} .qb2-overlay .cpk-card{ display:grid;grid-template-columns:48px 1fr auto;gap:0 12px; padding:12px 20px;cursor:pointer;border-bottom:1px solid var(--bg-0); transition:background .15s;align-items:center; } .qb2-overlay .cpk-card:hover{background:var(--bg-0);} .qb2-overlay .cpk-card.used{background:var(--accent-ghost);opacity:.7;cursor:default;border-left:3px solid var(--accent);padding-left:17px;} .qb2-overlay .cpk-icon{ width:48px;height:48px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:22px; background:var(--bg-2);border:1px solid var(--bg-3); } .qb2-overlay .cpk-photo{width:48px;height:48px;border-radius:10px;overflow:hidden;border:1px solid var(--bg-3);background:var(--bg-2);} .qb2-overlay .cpk-photo img{width:100%;height:100%;object-fit:cover;display:block;} .qb2-overlay .cpk-card.used .cpk-icon, .qb2-overlay .cpk-card.used .cpk-photo{border-color:rgba(168,116,18,.35);} .qb2-overlay .cpk-main{min-width:0;} .qb2-overlay .cpk-name{font-family:var(--fb);font-size:13px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .qb2-overlay .cpk-check{color:var(--accent);font-size:12px;} .qb2-overlay .cpk-desc{font-size:10px;color:var(--t3);margin-top:2px;font-family:var(--fb);} .qb2-overlay .cpk-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px;font-size:9px;color:var(--t4);font-family:var(--fu);letter-spacing:.02em;text-transform:uppercase;font-weight:700;} .qb2-overlay .cpk-stats .stat{display:inline-flex;align-items:center;gap:3px;} .qb2-overlay .cpk-hotels-label{font-family:var(--fu);font-size:8px;font-weight:800;color:var(--t4);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;} .qb2-overlay .cpk-hotels{font-size:10px;color:var(--t3);font-family:var(--fb);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;} .qb2-overlay .cpk-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;} .qb2-overlay .cpk-hotels-big{font-family:var(--fd);font-size:22px;font-weight:300;color:var(--accent);line-height:1;letter-spacing:-.01em;} .qb2-overlay .cpk-added{font-family:var(--fu);font-size:9px;font-weight:800;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;} .qb2-overlay .zone-chip{font-family:var(--fu);font-size:8px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--violet-bg);color:var(--violet);letter-spacing:.04em;text-transform:uppercase;} /* ── Inline activity row inside day panel (upgraded) ── */ #s-qb2 .act-row{ display:grid;grid-template-columns:34px 1fr auto auto;gap:0 10px; align-items:center;padding:10px 12px;margin-bottom:6px; border-radius:10px;background:var(--bg-1);border:1px solid var(--bg-2); transition:background .15s,border-color .15s; } #s-qb2 .act-row:hover{background:var(--bg-0);border-color:var(--bg-3);} #s-qb2 .act-row .act-icon{ width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:17px;background:rgba(106,90,72,.12);color:var(--t3);border:1px solid var(--bg-3); } #s-qb2 .act-row .act-icon--wildlife {background:var(--green-bg); color:var(--green);border-color:rgba(26,107,90,.24);} #s-qb2 .act-row .act-icon--water {background:rgba(74,127,181,.14); color:var(--blue);border-color:rgba(74,127,181,.24);} #s-qb2 .act-row .act-icon--cultural {background:var(--accent-seam); color:var(--accent);border-color:rgba(168,116,18,.28);} #s-qb2 .act-row .act-icon--adventure {background:rgba(192,106,32,.14); color:var(--orange);border-color:rgba(192,106,32,.26);} #s-qb2 .act-row .act-icon--scenic {background:var(--violet-bg); color:var(--violet);border-color:rgba(107,90,165,.26);} #s-qb2 .act-row .act-icon--experiential{background:var(--accent-seam); color:var(--accent);border-color:rgba(196,152,32,.28);} #s-qb2 .act-row .act-icon--general {background:rgba(106,90,72,.12); color:var(--t3);border-color:var(--bg-4);} #s-qb2 .act-row .act-main{min-width:0;} #s-qb2 .act-row .act-main .act-name{font-family:var(--fb);font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #s-qb2 .act-row .act-meta{font-size:10px;color:var(--t3);margin-top:2px;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--fb);} #s-qb2 .act-row .act-price-col{display:flex;flex-direction:column;align-items:flex-end;gap:1px;} #s-qb2 .act-row .act-price-col .act-price{font-family:var(--fd);font-size:16px;font-weight:300;color:var(--green);line-height:1;letter-spacing:-.01em;} #s-qb2 .act-row .act-price-col .act-price.custom{color:var(--accent);} #s-qb2 .act-row .act-pricing-type{font-family:var(--fu);font-size:8px;font-weight:800;color:var(--t4);letter-spacing:.06em;text-transform:uppercase;} #s-qb2 .act-row .act-price-col .act-price.custom + .act-pricing-type{color:var(--accent);} #s-qb2 .act-row .act-actions{display:flex;align-items:center;gap:4px;} #s-qb2 .act-row .act-actions .act-remove{ font-size:16px;color:var(--red);cursor:pointer;padding:3px 8px;border-radius:6px;line-height:1; background:transparent;border:1px solid transparent;transition:all .15s; } #s-qb2 .act-row .act-actions .act-remove:hover{background:rgba(155,77,92,.1);border-color:rgba(155,77,92,.25);} /* ── Mobile sheet tweaks for pickers ──────────────── */ @media(max-width:700px){ .qb2-sheet .picker.qb2-picker-activity, .qb2-sheet .picker.qb2-picker-city{border:none;border-radius:0;box-shadow:none;} .qb2-sheet .picker.qb2-picker-activity .picker-head, .qb2-sheet .picker.qb2-picker-city .picker-head{padding:12px 14px 10px;} .qb2-sheet .picker.qb2-picker-activity .picker-filters{padding:8px 14px;} .qb2-sheet .apk-card, .qb2-sheet .cpk-card{padding-left:14px;padding-right:14px;gap:0 10px;grid-template-columns:44px 1fr auto;} .qb2-sheet .apk-card.selected, .qb2-sheet .cpk-card.used{padding-left:11px;} .qb2-sheet .apk-photo,.qb2-sheet .apk-icon, .qb2-sheet .cpk-icon,.qb2-sheet .cpk-photo{width:44px;height:44px;} .qb2-sheet .apk-list,.qb2-sheet .cpk-list{max-height:none;} #s-qb2 .act-row{grid-template-columns:30px 1fr auto auto;padding:8px 10px;} #s-qb2 .act-row .act-icon{width:30px;height:30px;font-size:15px;} } /* ═══════════════════ END TURN E3 ═══════════════════════════════ */ /* ═══════════════════ STALE HOTEL PANEL V2 — removed (v3 active) ═══════════ Classes below are no longer emitted by _buildHotelPanel. Kept as empty rules to prevent any stale cached CSS from applying layout. ══════════════════════════════════════════════════════════════════════════ */ #s-qb2 .htl-panel-v2, #s-qb2 .htl-tier-tabs, #s-qb2 .htl-tier-tab, #s-qb2 .htl-tier-tab--active, #s-qb2 .htl-tier-tab--pricing, #s-qb2 .htl-tier-tab-label, #s-qb2 .htl-tier-tab-rate, #s-qb2 .htl-tier-tab-dot, #s-qb2 .htl-tier-body, #s-qb2 .htl-tier-use-row, #s-qb2 .htl-tier-activate-btn, #s-qb2 .htl-tier-section, #s-qb2 .htl-tier-section--active, #s-qb2 .htl-tier-header, #s-qb2 .htl-tier-label, #s-qb2 .htl-tier-rate, #s-qb2 .htl-slots-grid, #s-qb2 .htl-slot--primary, #s-qb2 .htl-slot--empty, #s-qb2 .htl-slot-label, #s-qb2 .htl-slot-label--backup, #s-qb2 .htl-slot-photo, #s-qb2 .htl-slot-name, #s-qb2 .htl-slot-meta, #s-qb2 .htl-slot-rate, #s-qb2 .htl-slot-actions, #s-qb2 .htl-slot-btn, #s-qb2 .htl-slot-btn--primary, #s-qb2 .htl-slot-btn--danger, #s-qb2 .htl-slot-pick, #s-qb2 .conf-contract, #s-qb2 .conf-rack, #s-qb2 .conf-none { /* stale — no longer emitted */ } /* ═══════════════════ END STALE HOTEL PANEL V2 ══════════════════════════════ */ /* ── Fix 1: Number input sizing ─────────────────────────────────────────── */ #s-qb2 .qb2-num-input { min-width: 72px; width: 80px; text-align: center; font-family:var(--fb); font-size: 15px; padding: 8px 10px; border: 1.5px solid var(--bg-4); border-radius: 10px; background: var(--bg-1); color: var(--t1); min-height: 44px; } #s-qb2 .qb2-num-input:focus { border-color: var(--accent); outline: none; } /* ── Fix 3: City filter pills in hotel picker ───────────────────────────── */ #s-qb2 .picker-city-row, .qb2-overlay .picker-city-row { display: flex; gap: 6px; padding: 6px 14px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--b1); } .qb2-overlay .picker-city-pill { font-family:var(--fb); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--bg-4); background: var(--bg-1); color: var(--t3); cursor: pointer; } .qb2-overlay .picker-city-pill.on { background: var(--accent); border-color: var(--accent); color: var(--bg-1); } /* ── Fix 4: Rate card modal ─────────────────────────────────────────────── */ .qb2-overlay .rc-modal { min-width: 300px; } .qb2-overlay .rc-meta { font-family:var(--fb); font-size: 12px; color: var(--t4); margin: -4px 0 12px; } .qb2-overlay .rc-table { width: 100%; border-collapse: collapse; font-family:var(--fb); font-size: 13px; } .qb2-overlay .rc-th { padding: 6px 10px; background: #F5F0EB; color: var(--t3); font-weight: 700; font-size: 11px; text-align: center; } .qb2-overlay .rc-th--corner { width: 60px; } .qb2-overlay .rc-th--board { font-family:var(--fu); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; } .qb2-overlay .rc-cell { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--b1); color: var(--t1); } .qb2-overlay .rc-cell.rc-na { color: var(--t5); } .qb2-overlay .rc-note { font-family:var(--fb); font-size: 11px; color: var(--t4); margin-top: 10px; } /* ── Full-screen overlay: QB2 covers the entire viewport including app nav ── */ body.qb2-active { overflow: hidden !important; } body.qb2-active #s-qb2 { position: fixed !important; inset: 0 !important; z-index: 9999 !important; height: 100dvh !important; width: 100vw !important; padding: 0 !important; background: var(--bg-0); } /* ── Fix 3: .tl-swipe-delete button style override (branded colour) ── */ #s-qb2 .tl-swipe-delete { background: var(--red) !important; color: var(--bg-1) !important; font-family:var(--fb); font-size: 11px; font-weight: 700; border: none; cursor: pointer; border-radius: 0 10px 10px 0; } #s-qb2 .tl-item-card { position: relative; overflow: hidden; } /* ── Fix 4: Pricing Controls 2×2 grid ── */ #s-qb2 .pricing-ctrl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } #s-qb2 .pricing-ctrl-item { display: flex; flex-direction: column; gap: 6px; } #s-qb2 .pricing-ctrl-row { display: flex; align-items: center; gap: 8px; } #s-qb2 .pricing-ctrl-unit { font-family:var(--fb); font-size: 13px; color: var(--t4); white-space: nowrap; } #s-qb2 .pricing-ctrl-item .setup-select, #s-qb2 .pricing-ctrl-item .setup-input { width: 100%; min-height: 44px; font-size: 14px; } /* ── Fix 5: Full-bleed calling card photo treatment ── Fixed 150px height — card keeps a consistent, magazine-banner feel at any width. object-fit:cover on the means the photo crops cleanly regardless of how wide the timeline grows. No aspect-ratio lock because that fought with the timeline's responsive width and caused either letterboxing or wasted space. */ #s-qb2 .tl-item-card--photo { position: relative; overflow: hidden; height: 150px; border: none; border-radius: 14px; background: var(--t1); } #s-qb2 .tl-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s ease; } #s-qb2 .tl-item-card--photo:hover .tl-card-bg { transform: scale(1.04); } #s-qb2 .tl-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,14,8,.88) 0%, rgba(20,14,8,.45) 55%, rgba(20,14,8,.12) 100%); pointer-events: none; } #s-qb2 .tl-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 14px 16px 12px; } #s-qb2 .tl-item-card--photo .tl-time, #s-qb2 .tl-item-card--photo .tl-time--clickable { color: rgba(255,255,255,.75); font-size: 11px; } #s-qb2 .tl-item-card--photo .tl-place { color: rgba(255,255,255,.6); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-family:var(--fu); font-weight: 700; } #s-qb2 .tl-item-card--photo .tl-label { color: var(--bg-1); font-family:var(--fd); font-weight: 300; font-size: 18px; line-height: 1.2; margin: 2px 0 4px; } #s-qb2 .tl-item-card--photo .tl-desc { color: rgba(255,255,255,.65); font-size: 11px; } #s-qb2 .tl-item-card--photo .tl-dur-badge { background: rgba(255,255,255,.18); color: var(--bg-1); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.25); } #s-qb2 .tl-item-card--photo .tl-item-actions { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .15s; } #s-qb2 .tl-item-card--photo:hover .tl-item-actions { opacity: 1; } #s-qb2 .tl-item-card--photo .tl-lock-btn, #s-qb2 .tl-item-card--photo .tl-edit-btn, #s-qb2 .tl-item-card--photo .tl-remove-btn { background: rgba(0,0,0,.45); color: var(--bg-1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(4px); } #s-qb2 .tl-item-card--photo .tl-drag-handle { position: absolute; top: 8px; left: 8px; color: rgba(255,255,255,.5); z-index: 2; } /* ════════════════════════════════════════════════════════════ Picker Calling Cards — hotel, activity, city pickers Replaces flat list-row style with full-bleed photo cards matching the timeline calling card aesthetic. Uses #s-qb2 .qb2-overlay prefix (specificity 1,2,0) to beat #s-qb2 .hpk-card (1,1,0). ════════════════════════════════════════════════════════════ */ /* ── Base: override flat-row display ── */ #s-qb2 .qb2-overlay .hpk-card, #s-qb2 .qb2-overlay .apk-card, #s-qb2 .qb2-overlay .cpk-card { position: relative; overflow: hidden; border-radius: 14px; border-bottom: none; margin: 0 14px 8px; display: block; cursor: pointer; background: var(--t1); padding: 0; grid-template-columns: unset; transition: box-shadow .2s; } #s-qb2 .qb2-overlay .hpk-card:hover, #s-qb2 .qb2-overlay .apk-card:hover, #s-qb2 .qb2-overlay .cpk-card:hover { background: var(--t1); box-shadow: 0 8px 28px rgba(20,14,8,.22); } /* Min heights */ #s-qb2 .qb2-overlay .hpk-card { min-height: 112px; } #s-qb2 .qb2-overlay .apk-card { min-height: 96px; } #s-qb2 .qb2-overlay .cpk-card { min-height: 112px; } /* ── Photo background ── */ #s-qb2 .qb2-overlay .pk-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .45s ease; } #s-qb2 .qb2-overlay .hpk-card:hover .pk-card-bg, #s-qb2 .qb2-overlay .apk-card:hover .pk-card-bg, #s-qb2 .qb2-overlay .cpk-card:hover .pk-card-bg { transform: scale(1.05); } /* ── No-photo emoji watermark ── */ #s-qb2 .qb2-overlay .pk-card-no-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; opacity: .18; pointer-events: none; } /* ── Gradient overlay ── */ #s-qb2 .qb2-overlay .pk-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,14,8,.9) 0%, rgba(20,14,8,.5) 50%, rgba(20,14,8,.15) 100%); pointer-events: none; transition: background .2s; } #s-qb2 .qb2-overlay .hpk-card.selected .pk-card-overlay, #s-qb2 .qb2-overlay .apk-card.selected .pk-card-overlay { background: linear-gradient(to top, rgba(168,116,18,.82) 0%, rgba(168,116,18,.3) 50%, rgba(20,14,8,.15) 100%); } #s-qb2 .qb2-overlay .cpk-card.used .pk-card-overlay { background: linear-gradient(to top, rgba(168,116,18,.72) 0%, var(--accent-ring) 50%, rgba(20,14,8,.15) 100%); } /* ── Top badge strip ── */ #s-qb2 .qb2-overlay .pk-card-top { position: absolute; top: 9px; left: 11px; right: 11px; display: flex; align-items: center; gap: 5px; z-index: 2; flex-wrap: nowrap; } /* ── Bottom content ── */ #s-qb2 .qb2-overlay .pk-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 38px 14px 12px; justify-content: flex-end; } /* ── Card name — Cormorant display ── */ #s-qb2 .qb2-overlay .pk-card-name { color: var(--bg-1); font-family:var(--fd); font-weight: 300; font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Stars beside name ── */ #s-qb2 .qb2-overlay .pk-stars { font-size: 10px; color: var(--accent); letter-spacing: -1px; vertical-align: middle; } /* ── Sub line — Syne uppercase ── */ #s-qb2 .qb2-overlay .pk-card-sub { color: rgba(255,255,255,.62); font-size: 9px; font-family:var(--fu); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Badge pills (top strip) ── */ #s-qb2 .qb2-overlay .pk-badge { padding: 2px 8px; border-radius: 999px; font-size: 8px; font-weight: 700; font-family:var(--fu); text-transform: uppercase; letter-spacing: .06em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; flex-shrink: 0; } #s-qb2 .qb2-overlay .pk-badge--contract { background: rgba(26,107,90,.8); color:var(--bg-1); border:1px solid rgba(26,107,90,.9); } #s-qb2 .qb2-overlay .pk-badge--rack { background: rgba(168,116,18,.65); color:var(--bg-1); border:1px solid rgba(168,116,18,.8); } #s-qb2 .qb2-overlay .pk-badge--no-rate { background: rgba(155,58,58,.7); color:var(--bg-1); border:1px solid rgba(155,58,58,.85); } #s-qb2 .qb2-overlay .pk-badge--hie { background: rgba(255,255,255,.18);color:var(--bg-1); border:1px solid rgba(255,255,255,.28); } #s-qb2 .qb2-overlay .pk-badge--zone { background: rgba(74,101,128,.7); color:var(--bg-1); border:1px solid rgba(74,101,128,.8); } #s-qb2 .qb2-overlay .pk-badge--price { background: rgba(0,0,0,.52); color:var(--bg-1); border:1px solid rgba(255,255,255,.2); } #s-qb2 .qb2-overlay .pk-badge--check { background: rgba(196,152,32,.8); color:var(--bg-1); border:1px solid rgba(196,152,32,.95); } #s-qb2 .qb2-overlay .pk-badge--added { background: rgba(168,116,18,.75); color:var(--bg-1); border:1px solid rgba(168,116,18,.9); } #s-qb2 .qb2-overlay .pk-badge--free { background: rgba(26,107,90,.75); color:var(--bg-1); border:1px solid rgba(26,107,90,.9); } #s-qb2 .qb2-overlay .pk-badge--pax { background: rgba(0,0,0,.48); color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.2); } /* ── Hotel board rate pill row ── */ #s-qb2 .qb2-overlay .hpk-rate-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } #s-qb2 .qb2-overlay .hpk-rcell { padding: 2px 9px; border-radius: 999px; font-size: 9px; font-weight: 700; font-family:var(--fu); background: rgba(255,255,255,.14); color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.22); cursor: pointer; transition: background .15s; } #s-qb2 .qb2-overlay .hpk-rcell.on { background: rgba(196,152,32,.8); color: var(--bg-1); border-color: rgba(196,152,32,.95); } #s-qb2 .qb2-overlay .hpk-rcell.na { opacity: .32; cursor: default; } #s-qb2 .qb2-overlay .hpk-rcell:not(.na):not(.on):hover { background: rgba(255,255,255,.26); } /* ── City picker: stats row + hotel preview ── */ #s-qb2 .qb2-overlay .pk-stats-row { display: flex; gap: 10px; margin-top: 4px; } #s-qb2 .qb2-overlay .pk-stat-chip { font-size: 9px; color: rgba(255,255,255,.58); font-family:var(--fb); text-transform: none; letter-spacing: 0; } #s-qb2 .qb2-overlay .cpk-htl-preview { font-size: 9px; color: rgba(255,255,255,.45); font-family:var(--fb); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; } /* ── Group header spacing ── */ #s-qb2 .qb2-overlay .pk-group { margin: 4px 14px 4px; } #s-qb2 .qb2-overlay .qb2-picker-list { padding: 8px 0 12px; } /* ── Mobile ── */ @media (max-width: 600px) { #s-qb2 .qb2-overlay .hpk-card, #s-qb2 .qb2-overlay .apk-card, #s-qb2 .qb2-overlay .cpk-card { margin-left: 10px; margin-right: 10px; border-radius: 12px; } #s-qb2 .qb2-overlay .hpk-card { min-height: 100px; } #s-qb2 .qb2-overlay .apk-card { min-height: 88px; } #s-qb2 .qb2-overlay .cpk-card { min-height: 100px; } #s-qb2 .qb2-overlay .pk-card-name { font-size: 16px; } #s-qb2 .qb2-overlay .pk-card-content { padding: 32px 12px 10px; } } /* ═══════════════════ VARIANT EXPLORER TOGGLES ═══════════════════ */ #s-qb2 .htl-ve-row{display:flex;align-items:center;gap:8px;padding:7px 14px;background:rgba(201,152,28,.05);border-top:1px solid rgba(201,152,28,.14);} #s-qb2 .htl-ve-label{font-family:var(--fb);font-size:10px;font-weight:600;color:var(--accent);flex:1;} #s-qb2 .htl-ve-hint{font-size:10px;color:var(--t3);} #s-qb2 .htl-ve-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;} #s-qb2 .htl-ve-toggle input{position:absolute;opacity:0;width:0;height:0;} #s-qb2 .htl-ve-track{display:inline-block;width:32px;height:17px;border-radius:999px;background:var(--b2);transition:background .18s;position:relative;} #s-qb2 .htl-ve-toggle input:checked ~ .htl-ve-track{background:var(--accent);} #s-qb2 .htl-ve-knob{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:999px;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.35);} #s-qb2 .htl-ve-toggle input:checked ~ .htl-ve-track .htl-ve-knob{transform:translateX(15px);} #s-qb2 .htl-ve-toggle--sm .htl-ve-track{width:26px;height:14px;} #s-qb2 .htl-ve-toggle--sm .htl-ve-knob{width:10px;height:10px;} #s-qb2 .htl-ve-toggle--sm input:checked ~ .htl-ve-track .htl-ve-knob{transform:translateX(12px);} #s-qb2 .htl-ve-summary{display:flex;align-items:center;gap:8px;padding:6px 14px;border-top:1px solid var(--b1);background:var(--bg-2);} #s-qb2 .htl-ve-sum-text{font-size:11px;color:var(--t3);flex:1;} #s-qb2 .htl-ve-sum-icon{color:var(--accent);font-size:11px;} #s-qb2 .htl-ve-sum-badge{font-family:var(--fu);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--bg-0);} #s-qb2 .htl-ve-sum-badge.off{background:var(--b2);color:var(--t4);} #s-qb2 .htl-ve-mini-label{font-size:9px;color:var(--t4);} /* ═══════════════════ VARIANT PREVIEW BUTTON ═══════════════════ */ .btn-ve-preview{padding:8px 16px;border-radius:10px;border:1px solid var(--accent-ring);background:var(--accent-ghost);color:var(--accent);font-family:var(--fu);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .15s;white-space:nowrap;} .btn-ve-preview:hover{background:var(--accent);color:var(--bg-0);} /* ══════════════════════════════════════════════════════════════════ HOTEL PANEL v4 — 3-card tier grid + expandable detail All rules scoped under #s-qb2 ══════════════════════════════════════════════════════════════════ */ /* ── Wrapper ── */ #s-qb2 .htl-panel-v4{background:var(--bg-1);border-top:1px solid var(--b1);} /* ── City header ── */ #s-qb2 .htl-v4-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--b1);} #s-qb2 .htl-v4-city{font-family:var(--fu);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);} #s-qb2 .htl-v4-search-btn{padding:4px 12px;border-radius:999px;border:1px solid var(--accent-ring);background:var(--accent-ghost);color:var(--accent);font-size:9px;font-weight:700;font-family:var(--fu);cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;} #s-qb2 .htl-v4-search-btn:hover{background:rgba(168,116,18,.12);border-color:var(--accent);} /* ── 3-card tier grid ── */ #s-qb2 .htl-v4-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px 12px;} #s-qb2 .htl-v4-card{position:relative;border-radius:10px;overflow:hidden;border:1.5px solid var(--bg-3);background:var(--bg-2);padding:9px 10px 12px;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-height:82px;} #s-qb2 .htl-v4-card:hover{border-color:var(--bg-4);box-shadow:0 2px 8px rgba(0,0,0,.06);} #s-qb2 .htl-v4-card--active{border-color:var(--accent);background:rgba(168,116,18,.05);box-shadow:0 2px 10px rgba(168,116,18,.1);} #s-qb2 .htl-v4-card-tier{display:flex;align-items:center;gap:5px;font-family:var(--fu);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);margin-bottom:4px;} #s-qb2 .htl-v4-pricing-pip{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;} #s-qb2 .htl-v4-card-name{font-size:10px;font-weight:700;color:var(--t1);line-height:1.3;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} #s-qb2 .htl-v4-card-stars{font-size:8px;color:var(--accent);letter-spacing:-1px;margin-bottom:2px;} #s-qb2 .htl-v4-card-rate{font-family:var(--fu);font-size:11px;font-weight:800;color:var(--accent-dn);line-height:1;} #s-qb2 .htl-v4-card-rate span{font-size:9px;font-weight:600;color:var(--t4);margin-left:1px;} #s-qb2 .htl-v4-card-badge{margin-top:4px;display:inline-block;font-size:8px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:999px;background:rgba(155,58,58,.07);color:#9B3A3A;border:1px solid rgba(155,58,58,.18);} #s-qb2 .htl-v4-card-badge.contract{background:rgba(26,107,90,.07);color:#1A6B5A;border-color:rgba(26,107,90,.18);} #s-qb2 .htl-v4-card-empty{font-size:10px;color:var(--t4);display:flex;align-items:center;justify-content:center;height:100%;min-height:50px;text-align:center;padding-top:6px;} #s-qb2 .htl-v4-card-active-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent-metal);border-radius:0 0 8px 8px;} /* ── Detail panel ── */ #s-qb2 .htl-v4-detail{padding:10px 16px 12px;} /* Nudge: viewing non-pricing tier */ #s-qb2 .htl-v4-nudge{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;margin-bottom:10px;border-radius:8px;background:rgba(168,116,18,.06);font-size:10px;color:var(--accent);font-family:var(--fb);} #s-qb2 .htl-v4-nudge button{padding:3px 10px;border-radius:999px;border:1px solid var(--accent-ring);background:var(--accent-ghost);color:var(--accent);font-size:9px;font-weight:700;font-family:var(--fu);cursor:pointer;white-space:nowrap;} #s-qb2 .htl-v4-nudge button:hover{background:rgba(168,116,18,.12);} /* Hotel identity */ #s-qb2 .htl-v4-identity{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;} #s-qb2 .htl-v4-identity-info{display:flex;align-items:flex-start;gap:8px;flex:1;min-width:0;} #s-qb2 .htl-v4-identity-icon{font-size:18px;flex-shrink:0;line-height:1;} #s-qb2 .htl-v4-identity-name{font-size:12px;font-weight:700;color:var(--t1);line-height:1.3;} #s-qb2 .htl-v4-identity-stars{font-size:9px;color:var(--accent);letter-spacing:-1px;} #s-qb2 .htl-v4-identity-rate{font-size:10px;color:var(--t3);margin-top:2px;font-weight:600;} #s-qb2 .htl-v4-identity-actions{display:flex;gap:4px;flex-shrink:0;flex-wrap:wrap;align-items:flex-start;} #s-qb2 .htl-v4-act-btn{padding:4px 9px;border-radius:999px;border:1px solid var(--bg-3);background:var(--bg-2);color:var(--t3);font-size:9px;font-weight:700;font-family:var(--fu);cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap;} #s-qb2 .htl-v4-act-btn:hover{background:var(--bg-3);color:var(--t1);} #s-qb2 .htl-v4-act-btn--danger{color:#9B3A3A;background:rgba(155,58,58,.05);border-color:rgba(155,58,58,.18);} #s-qb2 .htl-v4-act-btn--danger:hover{background:rgba(155,58,58,.12);} /* Pill rows: ROOM / MEAL / OCC */ #s-qb2 .htl-v4-pill-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;} #s-qb2 .htl-v4-pill-label{font-family:var(--fu);font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t4);flex-shrink:0;min-width:28px;} #s-qb2 .htl-v4-pills{display:flex;gap:4px;flex-wrap:wrap;} #s-qb2 .htl-v4-pill{padding:3px 9px;border-radius:999px;border:1px solid var(--bg-3);background:var(--bg-2);color:var(--t4);font-size:9px;font-weight:700;font-family:var(--fu);cursor:pointer;transition:background .12s,color .12s,border-color .12s;user-select:none;white-space:nowrap;} #s-qb2 .htl-v4-pill em{font-style:normal;color:var(--t3);margin-left:2px;} #s-qb2 .htl-v4-pill:hover:not(.disabled){background:var(--bg-3);color:var(--t2);} #s-qb2 .htl-v4-pill.on{background:rgba(168,116,18,.1);color:var(--accent);border-color:var(--accent-ring);} #s-qb2 .htl-v4-pill.on em{color:var(--accent-dn);} #s-qb2 .htl-v4-pill.disabled{opacity:.4;cursor:default;} /* Variant Explorer row inside detail */ #s-qb2 .htl-v4-ve-row{display:flex;align-items:center;gap:8px;padding:7px 0 2px;margin-top:8px;border-top:1px solid var(--b1);} #s-qb2 .htl-v4-ve-label{font-size:10px;font-weight:600;color:var(--accent);flex:1;} #s-qb2 .htl-v4-ve-hint{font-size:10px;color:var(--t4);} /* Pick hotel empty state */ #s-qb2 .htl-v4-pick-wrap{padding:20px 16px;text-align:center;} /* ── Backup slots ── */ #s-qb2 .htl-v4-backups{border-top:1px solid var(--b1);padding:8px 14px;} #s-qb2 .htl-v4-backup-row{display:flex;align-items:center;gap:6px;padding:4px 0;min-height:28px;} #s-qb2 .htl-v4-bk-label{font-family:var(--fu);font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t4);flex-shrink:0;min-width:52px;} #s-qb2 .htl-v4-bk-name{flex:1;font-size:10px;font-weight:600;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #s-qb2 .htl-v4-bk-name em{font-style:normal;color:var(--t4);font-size:9px;margin-left:3px;} #s-qb2 .htl-v4-bk-btn{padding:2px 8px;border-radius:999px;border:1px solid var(--bg-3);background:var(--bg-2);color:var(--t4);font-size:9px;cursor:pointer;transition:background .12s,color .12s;flex-shrink:0;font-weight:700;} #s-qb2 .htl-v4-bk-btn:hover{background:var(--bg-3);color:var(--t1);} /* ── Room config collapsible header ── */ #s-qb2 .htl-rc-collapse-hdr{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;padding:0 0 6px;margin-bottom:2px;} #s-qb2 .htl-rc-collapse-hdr:hover .htl-rc-title{color:var(--accent);} #s-qb2 .htl-rc-summary{flex:1;font-size:10px;color:var(--t3);font-family:var(--fb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #s-qb2 .htl-rc-collapse-arr{font-size:8px;color:var(--t4);flex-shrink:0;margin-left:auto;} /* Remove the old non-clickable head padding now that header is integrated */ #s-qb2 .htl-rc-wrap{margin:8px 0 4px;padding:10px 14px 10px;} /* ── Empty hint ── */ #s-qb2 .htl-v4-empty-hint{padding:10px 0 4px;font-size:11px;color:var(--t4);text-align:center;font-style:italic;} /* ── Backup section header ── */ #s-qb2 .htl-v4-backups-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 0 6px;margin-bottom:4px;border-bottom:1px solid var(--b1);} #s-qb2 .htl-v4-bk-title{font-family:var(--fu);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t4);} /* ── Backup mini-card (filled) ── */ #s-qb2 .htl-v4-bk-card{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid var(--b1);} #s-qb2 .htl-v4-bk-card:last-of-type{border-bottom:none;} #s-qb2 .htl-v4-bk-num{flex-shrink:0;width:20px;height:20px;border-radius:6px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-family:var(--fu);font-size:8px;font-weight:800;color:var(--t4);} #s-qb2 .htl-v4-bk-body{flex:1;min-width:0;} #s-qb2 .htl-v4-bk-name{font-size:10px;font-weight:700;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #s-qb2 .htl-v4-bk-stars{font-size:8px;color:var(--accent);letter-spacing:-1px;} #s-qb2 .htl-v4-bk-rate{font-size:9px;color:var(--t4);margin-top:1px;font-family:var(--fb);} #s-qb2 .htl-v4-bk-btn--del{color:#9B3A3A;border-color:rgba(155,58,58,.15);background:rgba(155,58,58,.04);} #s-qb2 .htl-v4-bk-btn--del:hover{background:rgba(155,58,58,.12);color:#7a2020;} /* ── Backup empty row ── */ #s-qb2 .htl-v4-bk-empty{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid var(--b1);} #s-qb2 .htl-v4-bk-empty:last-of-type{border-bottom:none;} /* ── Mobile: stack cards 2-up on narrow screens ── */ @media(max-width:520px){ #s-qb2 .htl-v4-grid{grid-template-columns:repeat(3,1fr);gap:5px;padding:8px 10px;} #s-qb2 .htl-v4-card{padding:7px 8px 10px;min-height:70px;} #s-qb2 .htl-v4-card-name{font-size:9px;} #s-qb2 .htl-v4-detail{padding:8px 12px 10px;} #s-qb2 .htl-v4-identity-actions{gap:3px;} #s-qb2 .htl-v4-act-btn{padding:3px 7px;font-size:8px;} } /* ══════════════════════════════════════════════════════════════════ HOTEL PANEL v4 — 9-slot grid (3 tiers × 3 slots) Replaces the old 3-card grid + separate backup section ══════════════════════════════════════════════════════════════════ */ /* ── 9-grid outer wrapper ── */ #s-qb2 .htl-v4-9grid{padding:8px 12px 4px;display:flex;flex-direction:column;gap:5px;} /* ── One tier row: label col + 3 slot cards ── */ #s-qb2 .htl-v4-tier-row{display:grid;grid-template-columns:54px 1fr 1fr 1fr;gap:5px;align-items:stretch;} /* ── Tier label column ── */ #s-qb2 .htl-v4-tier-hdr{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:4px 2px;} #s-qb2 .htl-v4-tier-lbl{font-family:var(--fu);font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t4);line-height:1;} #s-qb2 .htl-v4-tier-use-btn{padding:2px 7px;border-radius:999px;border:1px solid var(--bg-3);background:var(--bg-2);color:var(--t4);font-size:7px;font-weight:700;font-family:var(--fu);cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;letter-spacing:.04em;} #s-qb2 .htl-v4-tier-use-btn:hover{background:var(--accent-ghost);color:var(--accent);border-color:var(--accent-ring);} #s-qb2 .htl-v4-tier-active-dot{font-size:9px;color:#4ade80;line-height:1;} /* ── Slot card ── */ #s-qb2 .htl-v4-slot-card{position:relative;border-radius:8px;border:1.5px solid var(--bg-3);background:var(--bg-2);padding:6px 7px 7px;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-height:70px;display:flex;flex-direction:column;overflow:hidden;} #s-qb2 .htl-v4-slot-card:hover{border-color:var(--bg-4);box-shadow:0 2px 6px rgba(0,0,0,.05);} #s-qb2 .htl-v4-slot-card--active{border-color:var(--accent);background:rgba(168,116,18,.04);box-shadow:0 2px 8px rgba(168,116,18,.1);} /* Green bottom bar = this is the active pricing hotel */ #s-qb2 .htl-v4-slot-card--pricing::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#4ade80;border-radius:0 0 6px 6px;} /* ── Slot card top row (badge + check) ── */ #s-qb2 .htl-v4-slot-top{display:flex;align-items:center;gap:3px;margin-bottom:3px;min-height:13px;} #s-qb2 .htl-v4-slot-bk{font-family:var(--fu);font-size:7px;font-weight:800;letter-spacing:.04em;color:var(--t4);background:var(--bg-3);border-radius:4px;padding:1px 4px;flex-shrink:0;} #s-qb2 .htl-v4-slot-check{margin-left:auto;font-size:9px;font-weight:900;color:#4ade80;flex-shrink:0;} #s-qb2 .htl-v4-slot-auto{font-size:7px;color:var(--accent);background:var(--accent-ghost);border:1px solid var(--accent-ring);border-radius:3px;padding:0 3px;margin-left:auto;flex-shrink:0;} /* ── Slot card content ── */ #s-qb2 .htl-v4-slot-name{font-size:9px;font-weight:700;color:var(--t1);line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:2px;flex:1;} #s-qb2 .htl-v4-slot-stars{font-size:7px;color:var(--accent);letter-spacing:-1px;margin-bottom:1px;} #s-qb2 .htl-v4-slot-rate{font-family:var(--fu);font-size:10px;font-weight:800;color:var(--accent-dn);line-height:1;margin-bottom:3px;} #s-qb2 .htl-v4-slot-rate span{font-size:7px;font-weight:600;color:var(--t4);margin-left:1px;} #s-qb2 .htl-v4-slot-badge{display:inline-block;font-size:7px;font-weight:700;letter-spacing:.03em;padding:1px 5px;border-radius:999px;background:rgba(155,58,58,.07);color:#9B3A3A;border:1px solid rgba(155,58,58,.15);} #s-qb2 .htl-v4-slot-badge.contract{background:rgba(26,107,90,.07);color:#1A6B5A;border-color:rgba(26,107,90,.18);} #s-qb2 .htl-v4-slot-empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--t4);font-style:italic;text-align:center;padding:4px 2px;line-height:1.3;} /* ── Rate summary line ── */ #s-qb2 .htl-v4-rate-line{display:flex;align-items:center;justify-content:space-between;padding:5px 0 3px;border-top:1px solid var(--b1);margin-top:5px;} #s-qb2 .htl-v4-rate-line-label{font-size:9px;color:var(--t4);font-family:var(--fb);} #s-qb2 .htl-v4-rate-line-val{font-family:var(--fu);font-size:11px;font-weight:800;color:var(--accent-dn);} /* ── Backup slot note in detail panel ── */ #s-qb2 .htl-v4-detail-slot-note{font-size:9px;color:var(--accent);font-weight:600;padding:0 0 7px;margin-bottom:4px;border-bottom:1px solid var(--b1);} /* ── Board label in identity rate line ── */ #s-qb2 .htl-v4-identity-board{font-size:9px;color:var(--t4);font-family:var(--fu);font-weight:700;background:var(--bg-3);border-radius:4px;padding:1px 5px;} /* ── Mobile adjustments for 9-grid ── */ @media(max-width:520px){ #s-qb2 .htl-v4-tier-row{grid-template-columns:42px 1fr 1fr 1fr;gap:4px;} #s-qb2 .htl-v4-9grid{padding:6px 10px 2px;} #s-qb2 .htl-v4-slot-card{padding:5px 5px 6px;min-height:62px;} #s-qb2 .htl-v4-slot-name{font-size:8px;} #s-qb2 .htl-v4-slot-rate{font-size:9px;} #s-qb2 .htl-v4-tier-lbl{font-size:7px;} }