/* ============================================
   Cafe Barbera — Stylesheet
   ============================================ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: #F5EFE6 url("https://www.caffebarbera.it/themes/leo_frido/assets/img/modules/appagebuilder/images/fondo-marchi.png") repeat center center; color: #0f172a; font-family: system-ui, -apple-system, sans-serif; }
button { font-family: inherit; }

/* ── Animations ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
@keyframes slideUp  { from { opacity:0; transform:translateY(8px) scale(.98) } to { opacity:1; transform:translateY(0) scale(1) } }
@keyframes slideInUp { from { opacity:0; transform:translateY(100%) } to { opacity:1; transform:translateY(0) } }
@keyframes pageFade { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
@keyframes cartLineIn { from { opacity:0; transform:translateX(-10px) } to { opacity:1; transform:translateX(0) } }
.anim-fade { animation: fadeUp .28s ease-out forwards }
.anim-slide { animation: slideUp .24s ease-out forwards }
.anim-page { animation: pageFade .3s ease-out forwards }
.anim-cart-bar { animation: slideInUp .35s cubic-bezier(.22,.68,.31,1.04) forwards }
.cline { animation: cartLineIn .25s ease-out forwards }

/* ── Scrollbar-hidden ── */
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; -webkit-overflow-scrolling:touch; overflow-x:auto; cursor:grab }
.no-scrollbar::-webkit-scrollbar { display:none }
.no-scrollbar:active { cursor:grabbing }

/* ── Text ── */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.label { margin-bottom:.75rem; font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b }

/* ── Header ── */
.header { position:sticky; top:0; z-index:40; border-bottom:1px solid #1f1f1f; background:linear-gradient(135deg,#0f0f0f,#151515,#1b1b1b); backdrop-filter:blur(8px); transition:transform .3s ease-out }
.header-inner { max-width:80rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem }
@media(min-width:640px){ .header-inner { padding:1rem 1.5rem } }
@media(min-width:1024px){ .header-inner { padding:1rem 2rem } }
.logo { height:2.5rem; width:auto; object-fit:contain; cursor:pointer }
@media(min-width:640px){ .logo { height:2.75rem } }

/* ── Nav tabs (desktop) ── */
.desk-nav { display:none; align-items:center; gap:.5rem }
@media(min-width:1024px){ .desk-nav { display:flex } }
.tab { display:flex; align-items:center; gap:.5rem; border-radius:1rem; padding:.5rem 1rem; font-size:.875rem; font-weight:600; border:none; cursor:pointer; transition:.15s }
.tab-on  { background:#fff; color:#000 }
.tab-off { color:rgba(255,255,255,.8); background:transparent }
.tab-off:hover { background:rgba(255,255,255,.1); color:#fff }

/* ── Language picker ── */
.lang-trigger { position:relative; display:flex; min-width:72px; align-items:center; justify-content:center; gap:.5rem; padding:.5rem 1rem; font-size:.875rem; font-weight:600; color:#fff; background:none; border:none; cursor:pointer }
.lang-blob { position:absolute; inset:-4px }
.lang-menu { position:absolute; right:0; z-index:50; margin-top:.5rem; width:12rem; border-radius:1.5rem; border:1px solid #e2e8f0; background:#fff; padding:.5rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.25) }
.lang-item { display:flex; width:100%; align-items:center; border-radius:1rem; padding:.75rem; font-size:.875rem; font-weight:500; border:none; cursor:pointer; background:transparent; transition:.15s }
.lang-item:hover { background:#f8fafc }

/* ── Main ── */
.page { max-width:80rem; margin:0 auto; padding:1.5rem 1rem 7rem }
@media(min-width:640px){ .page { padding-left:1.5rem; padding-right:1.5rem } }
@media(min-width:1024px){ .page { padding-left:2rem; padding-right:2rem } }
@media(min-width:1280px){ .page { padding-bottom:2.5rem } }

/* ── Featured section ── */
.featured { margin-bottom:1.5rem; position:relative; overflow:hidden }
.featured-bg { position:absolute; left:0; width:100% }
.featured-bg.top { top:0; height:52% }
.featured-bg.bot { bottom:0; height:52% }
.featured-body { position:relative; padding:1.5rem 1rem }
@media(min-width:640px){ .featured-body { padding:1.75rem 1.25rem } }
.featured-title { font-size:1.25rem; font-weight:700; color:#1e293b; margin-bottom:.75rem }
.featured-row { display:flex; width:max-content; align-items:center; gap:.75rem }

/* ── Quick card ── */
.qcard { width:150px; flex-shrink:0 }
@media(min-width:640px){ .qcard { width:170px } }
@media(min-width:1024px){ .qcard { width:190px } }
.qcard-wrap { position:relative; display:flex; height:168px; align-items:center; justify-content:center; overflow:hidden; border-radius:28px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.1) }
.qcard-img { height:6rem; width:6rem; border-radius:50%; object-fit:cover }
@media(min-width:640px){ .qcard-img { height:7rem; width:7rem } }
.qcard-info { margin-top:.5rem; text-align:center }
.qcard-name { font-size:.875rem; font-weight:600; color:#0f172a }
.qcard-price { margin-top:.25rem; font-size:.875rem; color:#475569 }

/* ── Add / Qty controls ── */
.btn-circle-add { position:absolute; bottom:.75rem; right:.75rem; display:flex; height:2.75rem; width:2.75rem; align-items:center; justify-content:center; border-radius:50%; background:#fff; font-size:1.25rem; color:#8B1A2B; box-shadow:0 1px 3px rgba(0,0,0,.1); border:none; cursor:pointer }
.qty-pill { position:absolute; bottom:.75rem; right:.75rem; display:flex; align-items:center; gap:.5rem; border-radius:9999px; background:rgba(255,255,255,.95); padding:.25rem; box-shadow:0 10px 15px -3px rgba(0,0,0,.1); backdrop-filter:blur(4px) }
.qty-btn { display:flex; height:2.25rem; width:2.25rem; align-items:center; justify-content:center; border-radius:50%; border:none; cursor:pointer; font-weight:700; transition:.15s }
.qty-btn.dec { color:#334155; background:transparent }
.qty-btn.dec:hover { background:#f1f5f9 }
.qty-num { min-width:24px; text-align:center; font-size:.875rem; font-weight:700; color:#0f172a }
.pop-tag { position:absolute; right:.75rem; top:.75rem; border-radius:9999px; background:#f9e8eb; padding:.25rem .75rem; font-size:.75rem; font-weight:700; color:#8B1A2B }

/* ── Dark panel (menu/category selectors) ── */
.dpanel { position:relative; overflow:hidden; border-radius:32px; background:linear-gradient(135deg,#0f0f0f,#151515,#1b1b1b); padding:1rem; box-shadow:0 1px 3px rgba(0,0,0,.1) }
@media(min-width:640px){ .dpanel { padding:1.25rem } }
.dpanel-wave { position:absolute; inset:0; opacity:.9; pointer-events:none }

/* ── Bubble button (menu/category) — always centered, never RTL ── */
.bubble { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; flex-shrink:0; background:none; border:none; cursor:pointer; transition:.2s }
.bubble.on { transform:scale(1.02) }
.bubble:not(.on) { opacity:.95 }
.bubble-blob { position:absolute; top:-4px; left:50%; transform:translateX(-50%) }
.bubble-img { border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.1) }
.bubble-name { margin-top:.5rem; font-size:.8125rem; font-weight:600; line-height:1.25rem }
@media(min-width:640px){ .bubble-name { font-size:.9375rem } }

/* Bubble scroll rows: always LTR so images stay centered */
.bubble-row { direction:ltr !important }

/* Space between menu selector and category selector */
.menu-cat-gap { margin-top:1.5rem }

/* ── Search ── */
.search { display:flex; width:100%; max-width:36rem; align-items:center; gap:.65rem; border-radius:1.25rem; border:1px solid #e2e8f0; background:#fff; padding:.7rem 1rem; margin-bottom:1.25rem; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:border-color .15s, box-shadow .15s }
.search:focus-within { border-color:#94a3b8; box-shadow:0 2px 8px rgba(0,0,0,.06) }
.search input { width:100%; background:transparent; font-size:.875rem; outline:none; border:none; color:#0f172a }
.search input::placeholder { color:#b0b8c4 }
.search-x { display:flex; align-items:center; justify-content:center; border-radius:50%; width:28px; height:28px; color:#94a3b8; background:none; border:none; cursor:pointer; transition:.15s }
.search-x:hover { background:#f1f5f9; color:#475569 }

/* ── Item card ── */
.icard { overflow:hidden; border-radius:1.5rem; border:1px solid #e2e8f0; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:transform .3s, box-shadow .3s }
.icard:hover { transform:translateY(-4px); box-shadow:0 10px 25px -5px rgba(0,0,0,.1) }
.icard-img { position:relative; height:11rem }
@media(min-width:640px){ .icard-img { height:12rem } }
.icard-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.icard-grad { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.3),transparent) }
.icard-tag { position:absolute; top:.75rem; border-radius:9999px; background:#f9e8eb; padding:.25rem .75rem; font-size:.75rem; font-weight:700; color:#8B1A2B; box-shadow:0 1px 2px rgba(0,0,0,.05) }
[dir="ltr"] .icard-tag { left:.75rem }
[dir="rtl"] .icard-tag { right:.75rem }
.icard-body { padding:1rem }
@media(min-width:640px){ .icard-body { padding:1.25rem } }
.icard-title { font-size:1.125rem; font-weight:700 }
.icard-desc { margin-top:.25rem; min-height:48px; font-size:.875rem; line-height:1.5rem; color:#64748b }
.icard-meta { margin-top:1rem; display:flex; align-items:center; gap:1rem; font-size:.75rem; font-weight:500; color:#64748b }
.icard-foot { margin-top:1.25rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem }
.icard-price { font-size:1rem; font-weight:700 }
@media(min-width:640px){ .icard-price { font-size:1.125rem } }

/* ── Buttons ── */
.btn-add { display:inline-flex; align-items:center; gap:.5rem; border-radius:1rem; padding:.625rem 1rem; font-size:.875rem; font-weight:600; border:none; cursor:pointer }
.btn-proceed { width:100%; border-radius:1rem; padding:.875rem 1.25rem; font-size:.875rem; font-weight:600; border:none; cursor:pointer }
.btn-outline { border-radius:1rem; border:1px solid #e2e8f0; background:#fff; padding:.5rem .75rem; font-size:.875rem; font-weight:600; color:#334155; cursor:pointer }
.btn-clear { border-radius:1rem; border:1px solid #fecdd3; background:#fff1f2; padding:.5rem .75rem; font-size:.875rem; font-weight:600; color:#dc2626; cursor:pointer }
.badge { border-radius:9999px; background:#f1f5f9; padding:.5rem .75rem; font-size:.875rem; font-weight:600; color:#334155 }
.badge-count { border-radius:9999px; background:#f1f5f9; padding:.25rem .75rem; font-size:.75rem; font-weight:700; color:#475569 }

/* ── Content grid ── */
.grid-layout { display:grid; gap:1.5rem }
@media(min-width:1280px){ .grid-layout.with-cart { grid-template-columns:minmax(0,1fr) 360px } }
.items-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
@media(min-width:1280px){
  .items-grid.c3 { grid-template-columns:repeat(3,1fr) }
  .items-grid.c4 { grid-template-columns:repeat(4,1fr) }
}

/* ── Cart sidebar (desktop) ── */
.sidebar { display:none }
@media(min-width:1280px){ .sidebar { display:block } }
.sidebar-box { position:sticky; top:6rem; border-radius:1.5rem; border:1px solid #e2e8f0; background:#fff; padding:1.25rem; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:.3s }
.sidebar-box.pulse { transform:scale(1.01); box-shadow:0 10px 25px -5px rgba(0,0,0,.1) }

/* ── Cart line items ── */
.cline { overflow:hidden; border-radius:1rem; background:#f8fafc; padding:1rem }
.cline-img { height:4rem; width:4rem; border-radius:1rem; object-fit:cover }
.cline-name { font-weight:600 }
.cline-meta { margin-top:.25rem; font-size:.875rem; color:#64748b }
.cline-note { margin-top:.25rem; font-size:.75rem; color:#94a3b8 }
.cline-price { font-weight:600; white-space:nowrap }
.cline-qty { display:flex; align-items:center; gap:.5rem; border-radius:1rem; border:1px solid #e2e8f0; background:#fff; padding:.25rem }
.cline-btn { display:flex; height:2.25rem; width:2.25rem; align-items:center; justify-content:center; border-radius:.75rem; font-size:1rem; font-weight:700; border:none; cursor:pointer; transition:.15s }
.cline-btn.dec { color:#334155; background:transparent }
.cline-btn.dec:hover { background:#f1f5f9 }
.cline-count { min-width:24px; text-align:center; font-size:.875rem; font-weight:600 }
.cline-edit { display:flex; height:2rem; width:2rem; align-items:center; justify-content:center; border-radius:50%; border:1px solid #e2e8f0; background:#fff; font-size:.875rem; color:#64748b; cursor:pointer }

/* ── Summary rows ── */
.srow { display:flex; align-items:center; justify-content:space-between; font-size:.875rem; color:#64748b }
.srow .v { font-weight:600; color:#0f172a }
.stotal { display:flex; align-items:center; justify-content:space-between; font-size:1rem; font-weight:700 }
.sdisc { display:flex; align-items:center; justify-content:space-between; font-size:.875rem; color:#059669 }
.sdisc .v { font-weight:600 }
.disc-bar { border-radius:1rem; border:1px solid #e2e8f0; background:#fff; padding:.75rem 1rem; margin-bottom:1rem }
.disc-bar button { display:flex; width:100%; align-items:center; justify-content:space-between; gap:.75rem; background:none; border:none; cursor:pointer }
.disc-bar .k { font-weight:600; color:#0f172a }
.disc-bar .v { font-size:.875rem; color:#64748b }
.fee-btn { background:none; border:none; color:#94a3b8; cursor:pointer }
.fee-btn:hover { color:#334155 }

/* ── Upsell ── */
.ucard { display:flex; min-width:280px; align-items:center; gap:.75rem; border-radius:1rem; border:1px solid #e2e8f0; background:#fff; padding:.75rem }
.ucard img { height:4rem; width:4rem; flex-shrink:0; border-radius:1rem; object-fit:cover }
.ucard-name { font-weight:600; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ucard-price { margin-top:.25rem; font-size:.875rem; font-weight:600; color:#64748b }

/* ── Mobile cart bar ── */
.mcbar { position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:50 }
@media(min-width:1280px){ .mcbar { display:none } }
.mcbar button { display:flex; width:100%; align-items:center; justify-content:space-between; border-radius:1rem; padding:1rem 1.25rem; color:#fff; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); border:none; cursor:pointer; transition:.3s }
.mcbar .cnt { font-size:.75rem; color:#cbd5e1 }
.mcbar .tot { font-size:1rem; font-weight:700 }
.mcbar .lbl { border-radius:.75rem; background:rgba(255,255,255,.1); padding:.5rem 1rem; font-size:.875rem; font-weight:600 }

/* ── Bottom nav ── */
.bnav-wave { position:fixed; left:0; right:0; bottom:64px; z-index:30; pointer-events:none }
@media(min-width:1280px){ .bnav-wave { display:none } }
.bnav { position:fixed; left:0; right:0; bottom:0; z-index:40; border-top:1px solid #e2e8f0; background:rgba(255,255,255,.95); backdrop-filter:blur(8px) }
@media(min-width:1280px){ .bnav { display:none } }
.bnav-inner { display:grid; grid-template-columns:repeat(3,1fr); padding:.5rem .75rem }
.bnav-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; border-radius:1rem; padding:.5rem 0; font-size:.75rem; font-weight:500; background:none; border:none; cursor:pointer }
.bnav-btn.on { color:#8B1A2B }
.bnav-btn:not(.on) { color:#64748b }

/* ── Sheet / Overlay ── */
.sheet { position:fixed; inset:0 }
.sheet.off { pointer-events:none }
.sheet.on  { pointer-events:auto }
.sheet-bg { position:absolute; inset:0; background:rgba(0,0,0,.4); transition:opacity .3s ease-out }
.sheet.off .sheet-bg { opacity:0 }
.sheet.on  .sheet-bg { opacity:1 }
.sheet-panel { position:absolute; left:0; right:0; bottom:0; margin:0 auto; width:100%; max-width:42rem; border-radius:32px 32px 0 0; background:#fff; padding:1.25rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); transition:transform .35s cubic-bezier(.22,.68,.31,1.04), opacity .25s ease-out }
.sheet.off .sheet-panel { transform:translateY(100%); opacity:0 }
.sheet.on  .sheet-panel { transform:translateY(0); opacity:1 }
@media(min-width:1024px){
  .sheet-mid .sheet-panel { bottom:50%; left:50%; right:auto; max-width:36rem; border-radius:32px }
  .sheet-mid.on  .sheet-panel { transform:translate(-50%,50%) scale(1); opacity:1 }
  .sheet-mid.off .sheet-panel { transform:translate(-50%,50%) scale(.95); opacity:0 }
}
.sheet-handle { width:3.5rem; height:.375rem; border-radius:9999px; background:#e2e8f0; margin:0 auto 1rem }
@media(min-width:1024px){ .sheet-handle { display:none } }
.sheet-title { font-size:1.5rem; font-weight:900; color:#0f172a }
.sheet-sub { font-size:.875rem; font-weight:500; color:#64748b }
.sheet-desc { margin-top:.5rem; font-size:.875rem; line-height:1.75rem; color:#64748b }

/* ── Empty state ── */
.empty { display:flex; min-height:60vh; flex-direction:column; align-items:center; justify-content:center; border-radius:1.5rem; border:1px solid #e2e8f0; background:#fff; padding:2.5rem 1.5rem; text-align:center }
.empty-ico { margin-bottom:1.25rem; display:flex; height:7rem; width:7rem; align-items:center; justify-content:center; border-radius:2rem; background:#8B1A2B; font-size:3.75rem; font-weight:900; color:#fff; box-shadow:0 10px 25px -5px rgba(139,26,43,.3) }
.empty-h { font-size:1.875rem; font-weight:900; color:#0f172a }
.empty-p { margin-top:.75rem; max-width:28rem; font-size:1rem; line-height:2rem; color:#64748b }
.empty-btn { margin-top:1.5rem; border-radius:9999px; border:2px solid #0f172a; padding:.75rem 1.5rem; font-size:.875rem; font-weight:700; color:#0f172a; background:none; cursor:pointer }

/* ── Account ── */
.acct-row { display:flex; width:100%; align-items:center; border-radius:1rem; background:#fff; padding:1rem; font-size:1.125rem; font-weight:600; color:#0f172a; border:none; cursor:pointer }

/* ── Customizer ── */
.var-btn { position:relative; overflow:hidden; border-radius:1.5rem; padding:1rem 1.25rem; font-size:.875rem; font-weight:600; border:1px solid #e2e8f0; background:#fff; color:#334155; cursor:pointer; text-align:left; transition:.15s }
.var-btn.on { background:#2b2b2b; color:#fff; border-color:#2b2b2b; box-shadow:0 1px 2px rgba(0,0,0,.05) }
.var-radio { position:absolute; top:.75rem; display:flex; height:1.75rem; width:1.75rem; align-items:center; justify-content:center; border-radius:50%; border:1px solid #e2e8f0; background:#fff }
[dir="ltr"] .var-radio { left:.75rem }
[dir="rtl"] .var-radio { right:.75rem }
.var-btn.on .var-radio { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.15) }
.var-dot { height:.75rem; width:.75rem; border-radius:50%; background:transparent }
.var-btn.on .var-dot { background:#fff }
.ext-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-radius:1rem; border:1px solid #e2e8f0; background:#fff; padding:.75rem 1rem; cursor:pointer }
.ext-row input[type="checkbox"] { height:1rem; width:1rem; border-radius:.25rem }
.ext-name { font-size:.875rem; font-weight:600; color:#1e293b }
.ext-price { font-size:.875rem; font-weight:600; color:#64748b }
.comment-box { min-height:96px; width:100%; border-radius:1rem; border:1px solid #e2e8f0; padding:.75rem 1rem; font-size:.875rem; outline:none; resize:vertical; font-family:inherit }
.no-ext { border-radius:1rem; border:1px dashed #e2e8f0; padding:.75rem 1rem; font-size:.875rem; color:#64748b }

/* ── Fee info ── */
.fee-ico { display:flex; height:3.5rem; width:3.5rem; align-items:center; justify-content:center; border-radius:1rem; background:#8B1A2B; color:#fff; font-size:1.5rem; flex-shrink:0 }

/* ── Theme button colors ── */
.th-barbera  { background:#8B1A2B; color:#fff }
.th-espresso { background:#2a1812; color:#fff }
.th-crema    { background:#C9A96E; color:#fff }
.bg-dark     { background:#111 }

/* ── Flexbox / spacing helpers ── */
.row       { display:flex; align-items:center }
.row-start { display:flex; align-items:flex-start }
.row-between { display:flex; align-items:center; justify-content:space-between }
.col { display:flex; flex-direction:column }
.wrap { display:flex; flex-wrap:wrap }
.gap-xs  { gap:.25rem }
.gap-sm  { gap:.5rem }
.gap-md  { gap:.75rem }
.gap-lg  { gap:1rem }
.gap-xl  { gap:1.5rem }
.spc-y-sm > * + * { margin-top:.5rem }
.spc-y-md > * + * { margin-top:.75rem }
.spc-y-lg > * + * { margin-top:1.25rem }
.rtl-row { flex-direction:row-reverse }
.f1 { flex:1; min-width:0 }
.shrink-0 { flex-shrink:0 }
.mt-xs { margin-top:.25rem } .mt-sm { margin-top:.5rem } .mt-md { margin-top:.75rem } .mt-lg { margin-top:1.25rem } .mt-xl { margin-top:1.5rem }
.mb-sm { margin-bottom:.5rem } .mb-md { margin-bottom:1rem }
.pt-md { padding-top:1rem }
.bt { border-top:1px solid #e2e8f0 }
.w-full { width:100% }
.text-r { text-align:right } .text-l { text-align:left } .text-c { text-align:center }
.bold { font-weight:700 } .black { font-weight:900 }
.fs-sm { font-size:.875rem } .fs-xs { font-size:.75rem } .fs-lg { font-size:1.125rem } .fs-xl { font-size:1.25rem } .fs-2xl { font-size:1.5rem } .fs-3xl { font-size:1.875rem }
.c-muted { color:#64748b } .c-light { color:#94a3b8 } .c-dark { color:#0f172a } .c-white { color:#fff }
.nowrap { white-space:nowrap }

/* ── Responsive visibility ── */
.hide-xl { display:block }
@media(min-width:1280px){ .hide-xl { display:none } }
.show-xl { display:none }
@media(min-width:1280px){ .show-xl { display:block } }
.hide-lg { display:block }
@media(min-width:1024px){ .hide-lg { display:none } }
.show-lg { display:none }
@media(min-width:1024px){ .show-lg { display:flex } }

/* ── Rating Overlay ── */
.rating-overlay {
  position: fixed; inset: 0; z-index: 90;
  transition: opacity .3s ease-out;
}
.rating-overlay.off { pointer-events: none; opacity: 0; }
.rating-overlay.on  { pointer-events: auto; opacity: 1; }

.rating-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

.rating-top {
  background: #EFE5D7;
  flex-shrink: 0;
}
.rating-bottom {
  background: #fff;
  flex: 1;
  padding: 1.25rem 1.25rem 2rem;
}

/* Desktop: centered card modal */
@media(min-width:768px) {
  .rating-content {
    inset: auto;
    position: relative;
    width: 28rem;
    max-height: 90vh;
    margin: 5vh auto;
    border-radius: 1.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,.2);
    overflow: hidden;
  }
  .rating-overlay.on {
    background: rgba(0,0,0,.45);
    display: flex; align-items: flex-start; justify-content: center;
  }
}

/* ── Floating Cart Button (mobile) ── */
.cart-fab {
  position: fixed;
  bottom: 5rem;
  left: 1rem;
  z-index: 50;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #1b1b1b;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .2s;
}
.cart-fab:active { transform: scale(.92); }
.cart-fab-badge {
  position: absolute;
  bottom: -2px; left: -2px;
  min-width: 22px; height: 22px;
  border-radius: 50%;
  background: #8B1A2B;
  color: #fff;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
}
[dir="rtl"] .cart-fab { left: auto; right: 1rem; }
@media(min-width:1280px){ .cart-fab { display: none; } }

/* ── Cart sheet: ensure checkout button visible on mobile ── */
@media(max-width:1023px) {
  #sec-sheet-cart .sheet-panel {
    max-height: 95vh;
    display: flex;
    flex-direction: column;
  }
  #sec-sheet-cart-in {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
}

/* ── Checkout Overlay ── */
.checkout-overlay {
  position: fixed; inset: 0; z-index: 88;
  background: #fff;
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.checkout-overlay.off { pointer-events: none; opacity: 0; transform: translateY(20px); }
.checkout-overlay.on  { pointer-events: auto; opacity: 1; transform: translateY(0); }
.checkout-overlay > div {
  width: 100%; height: 100%;
}

@media(min-width:768px) {
  .checkout-overlay {
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
  }
  .checkout-overlay > div {
    position: relative;
    width: 42rem;
    max-height: 92vh;
    height: 92vh;
    margin: 0 auto;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 25px 60px rgba(0,0,0,.2);
    overflow: hidden;
  }
}

/* ── Upsell scroll with visible styled scrollbar ── */
.upsell-scroll {
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.upsell-scroll:active { cursor: grabbing; }
.upsell-scroll::-webkit-scrollbar { height: 6px; }
.upsell-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; margin: 0 4px; }
.upsell-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.upsell-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Active Order Floating Banner ── */
.order-banner {
  margin-bottom: 1rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #1a1111, #2a1519);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s;
  box-shadow: 0 4px 20px rgba(139,26,43,.15);
}
.order-banner:active { transform: scale(.985); }
.order-banner-inner {
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.order-banner .ob-logo {
  width: 42px; height: 42px;
  border-radius: .6rem;
  object-fit: contain;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  padding: 3px;
  flex-shrink: 0;
}
.order-banner .ob-info { flex: 1; min-width: 0; }
.order-banner .ob-name { font-size: .82rem; font-weight: 700; color: #fff; }
.order-banner .ob-status { font-size: .72rem; color: rgba(255,255,255,.65); margin-top: .1rem; }
.order-banner .ob-eta {
  padding: .3rem .65rem;
  border-radius: 9999px;
  background: #8B1A2B;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.order-banner .ob-progress {
  display: flex;
  gap: 3px;
  padding: 0 1rem .75rem;
}
.order-banner .ob-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.15);
}
.order-banner .ob-bar.done { background: #8B1A2B; }
.order-banner .ob-bar.active { background: #8B1A2B; animation: barPulse 1.5s infinite; }
@keyframes barPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Order Timeline (vertical) ── */
.timeline { padding: 0; }
.tl-step {
  display: flex;
  gap: .75rem;
  position: relative;
  padding-bottom: 1.1rem;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
  flex-shrink: 0;
}
.tl-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .6rem;
  z-index: 1;
}
.tl-dot.done { background: #8B1A2B; color: #fff; }
.tl-dot.active { background: #fff; border: 2.5px solid #8B1A2B; box-shadow: 0 0 0 4px rgba(139,26,43,.15); }
.tl-dot.future { background: #e8ecf1; }
.tl-line {
  width: 2px;
  flex: 1;
  margin: 3px 0;
}
.tl-line.done { background: #8B1A2B; }
.tl-line.future { background: #e8ecf1; }
.tl-content { flex: 1; min-width: 0; padding-top: 1px; }
.tl-title {
  font-size: .82rem;
  font-weight: 600;
  color: #0f172a;
}
.tl-title.future { color: #94a3b8; }
.tl-sub {
  font-size: .7rem;
  color: #94a3b8;
  margin-top: .1rem;
}
.tl-time {
  font-size: .68rem;
  color: #94a3b8;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ── Tracking Map (larger) ── */
.tracking-map-full {
  width: 100%;
  height: 260px;
  border-radius: 1.25rem;
  background: #f1f5f9;
  overflow: hidden;
  margin-bottom: .85rem;
  border: 1px solid #e8ecf1;
}

/* ── Driver Card ── */
.driver-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid #e8ecf1;
  border-radius: 1rem;
  background: #fff;
  margin-bottom: .85rem;
}
.driver-card .dc-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #8B1A2B;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.driver-card .dc-info { flex: 1; min-width: 0; }
.driver-card .dc-name { font-size: .9rem; font-weight: 700; color: #0f172a; }
.driver-card .dc-role { font-size: .72rem; color: #64748b; }
.driver-card .dc-actions { display: flex; gap: .4rem; }
.dc-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #e8ecf1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .15s;
  font-size: 1rem;
}
.dc-btn:hover { background: #f8fafc; border-color: #8B1A2B; }
.dc-btn.primary {
  background: #8B1A2B;
  border-color: #8B1A2B;
  color: #fff;
}

/* ── Auto-rating banner ── */
.rate-banner {
  margin-bottom: 1rem;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid #e8ecf1;
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: transform .15s;
}
.rate-banner:active { transform: scale(.985); }
.rate-banner .rb-q { font-size: .9rem; font-weight: 700; color: #0f172a; margin-bottom: .65rem; }
.rate-banner .rb-stars { display: flex; justify-content: center; gap: .35rem; }
.rate-banner .rb-star { font-size: 1.5rem; color: #e2e8f0; transition: .15s; }
.rate-banner .rb-star:hover { color: #f59e0b; transform: scale(1.15); }

/* ── Header logo button — remove default browser background ── */
.header button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}