/* =========================================
   1. GLOBAL VARIABLES & BRANDING
========================================= */
:root {
  /* Brand Colors */
  --kopi-ivory: #F9F9F6; /* Updated to a cleaner off-white */
  --kopi-charcoal: #171717;
  --kopi-green: #18392B;
  --kopi-gold: #BE8A46; /* Warmed up bronze/gold to match the logo */
  --matte-black: #1C1C1C; /* Desktop card background */
  
  /* UI Colors */
  --gray-50: #f9fafb;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --red-500: #ef4444;
  --yellow-400: #facc15;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', monospace;
  
}

/* =========================================
   2. CSS RESETS & BASE
========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--kopi-ivory);
  color: var(--kopi-charcoal);
  -webkit-font-smoothing: antialiased;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

input, select {
  font-family: inherit;
  outline: none;
}

/* Hide scrollbar for horizontal categories */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* =========================================
   3. TYPOGRAPHY UTILITIES
========================================= */
.font-mono { font-family: var(--font-mono); }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-kopi-green { color: var(--kopi-green); }
.text-kopi-gold { color: var(--kopi-gold); }
.text-white { color: #ffffff; }
.text-gray { color: var(--gray-500); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================
   4. COMPONENT CLASSES (Mobile Foundation)
========================================= */

/* Application Container (Mobile Wrapper) */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Dedicated content padding (does NOT touch shared .page-container used by header/footer) */
.content-padding {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Buttons */
.btn-primary {
  width: 100%;
  background-color: var(--kopi-green);
  color: white;
  padding: 1rem;
  border-radius: 9999px;
  font-weight: 700;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.2s;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modifier Pills */
.modifier-group {
  display: flex;
  border: 1px solid black;
  border-radius: 9999px;
  padding: 2px;
  background-color: var(--kopi-ivory);
  overflow: hidden;
}

.modifier-btn {
  flex: 1;
  padding: 0.375rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  transition: all 0.2s;
  color: black;
}

.modifier-btn.active {
  background-color: var(--kopi-charcoal);
  color: white;
}

/* Mobile Menu Grid (Edge-to-Edge) */
.grid-2-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid black;
  background-color: var(--kopi-ivory);
  flex: 1;
}

.menu-card {
  border-bottom: 1px solid black;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 192px;
  cursor: pointer;
}

.menu-card:nth-child(odd) {
  border-right: 1px solid black;
}

.menu-card:hover {
  background-color: #F9F9E8;
}

.menu-card-img {
  width: 4rem;
  height: 5rem;
  object-fit: contain;
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
}

/* Quantity Counter UI */
.qty-counter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--kopi-ivory);
  border: 1px solid black;
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  z-index: 10;
}

.qty-counter span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Circular Cart Icon with Badge */
.cart-icon-wrapper {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid black;
  background-color: var(--kopi-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background-color: var(--kopi-green);
  color: var(--kopi-ivory);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
}

/* Bottom Sheet */
.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  border-top: 1px solid black;
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  /* Was unbounded, with only the inner #*-sheet-content area set to
     overflow-y: auto (e.g. account.js's #points-sheet-content) — but that
     flex:1 does nothing without a height limit on the sheet itself to
     flex inside of, so a sheet taller than the screen (Points with its
     full "how points work" copy, say) just grew upward past the top of
     the viewport. Nothing above the fold is reachable there: this is a
     position:fixed element, not part of the page's own scroll, so
     "scroll down" on the page can't bring it into view and the inner
     content area never gets the overflow room to scroll internally
     either. Capping the sheet itself at 80vh (same cap index.html's own
     .top-sheet already uses) is what actually makes the inner
     overflow-y: auto area do anything — and padding-bottom covers the
     home-bar safe area so the last line isn't flush against it.
  */
  max-height: 80vh;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
  box-sizing: border-box;
  max-width: 28rem;
  margin: 0 auto;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  /* Was 50 — the exact same z-index as #bottom-nav in index.html (also 50).
     With a tie, the one later in the DOM wins the stacking order, and
     #bottom-nav sits AFTER #app (where every .bottom-sheet actually lives)
     in index.html's markup — so the nav bar was winning and visually
     covering the bottom slice of every sheet, submit buttons included,
     even though max-height above was already correctly keeping the sheet
     on-screen. Raised above both #bottom-nav and #top-nav (still well
     under the location sheet's own 104/105) so a sheet's own bottom edge
     is never hidden behind the nav bar again. */
  z-index: 95;
  display: flex;
  flex-direction: column;
}

.bottom-sheet.open {
  transform: translateY(0);
}

.drag-indicator {
  width: 3rem;
  height: 0.375rem;
  background-color: var(--gray-200);
  border-radius: 9999px;
  margin: 0 auto 1.25rem auto;
}

.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  /* Was 40 — below #bottom-nav's 50, same stacking problem as
     .bottom-sheet above: the nav bar showed through on top of the dim
     backdrop instead of being dimmed with the rest of the page. Raised
     to sit just under .bottom-sheet's own 95. */
  z-index: 90;
  display: none;
}

.overlay.active {
  display: block;
}

.icon-back-btn:active {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Best Sellers - Row Divider (inset to match card padding) */
.best-sellers-grid .product-card::after {
  content: '';
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  height: 2px;
  background-color: var(--gray-200);
}

.best-sellers-grid .product-card:last-child::after {
  display: none;
}

.best-sellers-grid .product-card img {
  max-height: 11rem;
}

/* Mobile Promo Carousel — swipeable via native scroll-snap (no JS needed
   for the gesture itself; home.js only listens to scroll to keep the dots
   in sync). One slide per active promotion. */
.promo-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
/* The side gutter lives on each slide (not on the scroller): padding on the
   scroller left a 1rem strip where the NEXT card showed through. Now every
   slide is exactly the scroller's width, so only one card is ever visible
   and the dots are the only hint there are more. */
.promo-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 0 1rem;
  scroll-snap-align: start;
  box-sizing: border-box;
}

/* Shared dot indicator (the "grey pill" — small grey dot per slide, the
   active one widens into a pill). Used by both the mobile carousel (in
   normal flow, right under it) and the desktop one (absolutely positioned
   over the banner — see .promo-carousel-desktop .promo-dots above). */
.promo-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.promo-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--gray-200);
  cursor: pointer;
  transition: all 0.25s ease;
}
.promo-dot.active {
  width: 20px;
  background: var(--kopi-gold);
}

/* =========================================
   5. DESKTOP OVERRIDES (SPLIT SCREEN)
========================================= */
.desktop-only, .desktop-grid, .desktop-flex { display: none !important; }

@media (min-width: 1024px) {
  /* Visibility Toggles */
  .mobile-only, .mobile-flex { display: none !important; }
  .desktop-only { display: block !important; }
  .desktop-grid { display: grid !important; }
  .desktop-flex { display: flex !important; }
  
  .content-padding {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Desktop Promo Carousel (was: single static .promo-desktop banner —
     now a sliding track of 1+ slides, each keeping the original split
     layout). .promo-carousel-desktop is the clipped/positioned frame,
     .promo-desktop-track is the sliding flex row, .promo-desktop-slide is
     one slide (the original two-column split). */
  .promo-carousel-desktop {
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    margin: 0 auto 4rem auto;
    max-width: 960px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }
  .promo-desktop-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .promo-desktop-slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
  }
  .promo-left {
    background-color: var(--kopi-green);
    display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;
    padding: 4rem 4rem 4rem 5rem; /* extra left room so the prev arrow clears the text */
  }
  .promo-right {
    background-color: #EFEFEF;
    background-size: cover;
    background-position: center;
  }

  .promo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid black;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--kopi-charcoal);
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s;
  }
  .promo-arrow:hover { background: white; }
  .promo-arrow svg { display: block; }
  .promo-arrow-left { left: 0.6rem; }
  .promo-arrow-right { right: 0.6rem; }

  .promo-carousel-desktop .promo-dots {
    position: absolute;
    left: 0; right: 0;
    bottom: 1.25rem;
    z-index: 5;
  }
  /* Dots sit on top of the promo image/banner here, not plain page
     background, so the default grey is swapped for white/translucent to
     stay visible against either half of the split layout. */
  .promo-carousel-desktop .promo-dot { background: rgba(255, 255, 255, 0.5); }
  .promo-carousel-desktop .promo-dot.active { background: var(--kopi-gold); }

  /* Best Sellers - Exactly 2 Columns with Large Cards */
  .best-sellers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3rem !important;
  }
  .best-sellers-grid .product-card {
    min-height: 22rem !important; /* Larger footprint */
    padding: 2.5rem !important;
  }
  .best-sellers-grid .product-card h3 {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  .best-sellers-grid .product-card .card-price {
    font-size: 1.125rem !important;
  }
  .best-sellers-grid .product-card img {
    max-width: 220px !important;
    max-height: 16rem !important;
    bottom: 2rem !important;
    right: 2rem !important;
  }
  .best-sellers-grid .product-card::after {
    left: 2.5rem;
    right: 2.5rem;
  }

  /* Desktop Global Footer */
  .desktop-footer {
    background-color: var(--kopi-charcoal);
    color: white;
    padding: 5rem 0 2rem 0;
    margin-top: 1rem;
  }
  .footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
  }
  .footer-links-col h4 {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: white;
    font-weight: 700;
  }
  .footer-links-col a, .footer-links-col p {
    display: block;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    margin-bottom: 1rem;
    font-size: 0.875rem;
  }
  .footer-links-col a:hover {
    color: white;
    text-decoration: underline;
  }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 2rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
  }
}

/* =========================================
   6. FIXED BOTTOM ACTION BARS
========================================= */
.checkout-bar,
.detail-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  border-top: 1px solid black;
  padding: 1.5rem 2rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  max-width: 28rem;
  margin: 0 auto;
  z-index: 30;
}

.detail-action-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .checkout-bar,
  .detail-action-bar {
    position: static;
    max-width: none;
    padding: 0;
    border-top: none;
  }
}