/* The cart drawer, in one place.

   cart.js is shared by all eleven pages but these rules used to live inside
   catalog_app.html and packages_catalog.html only, so nine pages rendered the
   same markup completely unstyled - raw buttons, no spacing, "Total₹26,998"
   run together. Extracted verbatim from catalog_app.html so /catalog and
   /packages look exactly as they did, and linked from every page.

   Do not copy any of this back into a page's <style>. One definition. */

.nav-cart-items { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; margin-bottom: 12px; }
.nav-cart-item { display: flex; align-items: center; gap: 10px; }
.nav-cart-item-logo {
    width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center;
    justify-content: center; color: #fff; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 0.9rem;
  }
.nav-cart-item-logo.has-fav { background-color: #fff; background-size: 60%; background-repeat: no-repeat; background-position: center; border: 1px solid var(--line-soft); }
.nav-cart-item-info { flex: 1; min-width: 0; }
.nav-cart-item-name { font-weight: 700; font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-cart-item-price { font-size: 0.78rem; color: var(--ink-soft); }
.nav-cart-item-remove { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 4px; flex: none; }
.nav-cart-item-remove:hover { color: var(--signal); }
.nav-cart-item-qty { display: flex; align-items: center; gap: 6px; flex: none; }
.nav-cart-item-qty button { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-soft); background: none; color: inherit; cursor: pointer; font-size: 0.85rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.nav-cart-item-qty button:hover { border-color: var(--signal); color: var(--signal); }
.nav-cart-item-qty span { min-width: 16px; text-align: center; font-size: 0.82rem; font-weight: 700; }
.nav-cart-total { display: flex; align-items: baseline; justify-content: space-between; font-weight: 800; padding-top: 10px; border-top: 1px dashed var(--line); margin-bottom: 12px; }
.btn-cart-checkout {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--signal); color: #fff; font-weight: 700; padding: 12px; border-radius: 12px;
    text-decoration: none; border: none; cursor: pointer; font-size: 0.92rem; font-family: inherit;
    transition: background 0.15s ease;
  }
.btn-cart-checkout:hover { background: var(--ink); }

/* Mobile: still a dropdown from the cart icon, just sized for a phone.

   It was briefly a bottom sheet; that disconnected it from the icon the
   visitor actually tapped and stopped looking like part of the site. So it
   stays anchored under the header, and the mobile work is only about fitting:
   full width minus a 12px margin each side so nothing bleeds off the right
   edge, a fully opaque background so the page cannot show through, a capped
   height with the list scrolling inside, and a dimmed backdrop behind it. */
@media (max-width: 620px) {
  #nav-cart-panel {
    position: fixed;
    left: 12px; right: 12px; top: 74px; bottom: auto;
    width: auto; max-width: none;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 20px 50px var(--shadow);
    padding: 16px;
    z-index: 190;
    max-height: calc(100vh - 74px - 16px - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
  }
  #nav-cart-panel[hidden] { display: none; }
  /* only the list scrolls; the total and the checkout button stay put */
  #nav-cart-panel .nav-cart-items { max-height: none; flex: 1 1 auto; min-height: 0; }
  #nav-cart-panel .nav-cart-total,
  #nav-cart-panel .btn-cart-checkout,
  #nav-cart-panel .nav-cart-warn { flex: 0 0 auto; }
}

/* Dimmed backdrop, mobile only. Tapping it closes the drawer (cart.js).

   z-index 25 is deliberate and load-bearing. The drawer is a child of
   .navbar, which is position:sticky with z-index:30 and so forms its own
   stacking context - the drawer's own z-index is resolved inside that
   context, not against the page. A backdrop above 30 therefore covers the
   drawer itself: it looked dimmed and every tap on Checkout landed on the
   backdrop instead of the button. Sitting below 30 puts it behind the whole
   header, so the drawer stays bright and clickable. */
.nav-cart-backdrop {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(20, 17, 12, 0.45);
  border: none; padding: 0; margin: 0; cursor: pointer;
}
.nav-cart-backdrop[hidden] { display: none; }
@media (min-width: 621px) { .nav-cart-backdrop { display: none !important; } }

/* Shown when a cart exceeds the line limit create-order.js will accept. */
.nav-cart-warn {
  background: rgba(196, 64, 64, 0.10); color: #C44040; font-size: 0.78rem;
  line-height: 1.45; padding: 10px 12px; border-radius: 10px; font-weight: 600;
}

/* Set by cart.js while the drawer is open: Lavi's launcher and greeting bubble
   overlap the Checkout button on a phone, and Checkout wins. */
.adv-fab.adv-fab-behind-cart { display: none !important; }

/* No element may scroll the page sideways. `clip` not `hidden`: hidden makes
   html/body a scroll container and breaks the sticky header, clip does not. */
html, body { overflow-x: clip; max-width: 100%; }

/* Hide Lavi whenever any overlay owns the screen - cart drawer, the checkout
   details modal, or the strategy modal. Her launcher and greeting bubble sit
   bottom-left, straight over their buttons. Set by js/pr-advisor.js. */
body.has-overlay .adv-fab { display: none !important; }