/* Open Sans — global font */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/* -----------------------------------------
   THEME VARIABLES (Admin Controlled)
   All CSS files share these variables.
   homepage-modules.css and customer-pages.css
   both rely on them being defined here.
----------------------------------------- */
:root {
  --primary: #1E3A8A;
  --accent: #3BA9FF;
  --primary-rgb: 30, 58, 138;
  --primary-light: #3BA9FF;
  --primary-dark: #142C6E;
  --primary-glow: 0 0 14px rgba(59, 169, 255, 0.45), 0 0 2px rgba(59, 169, 255, 0.7);
  --bg: #ffffff;
  --card: #ffffff;
  --text: #1a1a1a;
  --text-muted: #6b7280;
  --border: #e2e8f0;
  --danger: #ef4444;
  --header-bg: #ffffff;
  --nav-bg: #ffffff;
  --radius: 12px;
  --shadow: 0 4px 12px rgba(0,0,0,0.06);

  /* ── Theme Customizer variables (set by layout.js) ── */
  --tc-topbar-bg: linear-gradient(180deg, #073582 0%, #031b47 100%);
  --tc-topbar-text: #ffffff;
  --tc-topbar-opacity: 1;
  --tc-navbar-bg: linear-gradient(135deg, #142C6E 0%, #0a163a 100%);
  --tc-navbar-text: #ffffff;
  --tc-navbar-opacity: 1;
  --tc-navbar-height: 52px;
  --tc-navbar-width: 100%;
  --tc-navbar-radius: 32px;
  --tc-navbar-bw: 1px;
  --tc-navbar-bc: rgba(59, 169, 255, 0.45);
  --tc-btn-bg: linear-gradient(135deg, #3BA9FF 0%, #1E3A8A 50%, #142C6E 100%);
  --tc-btn-hover-bg: linear-gradient(135deg, #53b4ff 0%, #2647a7 50%, #1d3989 100%);
  --tc-btn-text: #ffffff;
  --tc-btn-pad-y: 12px;
  --tc-btn-pad-x: 24px;
  --tc-btn-fs: 15px;
  --tc-btn-radius: 24px;
  --tc-btn-bw: 1px;
  --tc-btn-hover-text: #ffffff;
  --tc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tc-text: #1a1a1a;
  --tc-text-dark: #e0e0e0;
  --tc-page-bg: #f8fafc;
  --tc-page-bg-dark: #0a0f1d;
  --tc-btn-opacity: 1;
  --tc-card-bg: #f1f5f9;
  --tc-card-bg-dark: #0d1326;
  --tc-card-opacity: 1;
  --tc-card-radius: 16px;
  --tc-card-bw: 1px;
  --tc-card-bc: var(--border);
  --tc-topbar-radius: 0px;
  --tc-topbar-bw: 1px;
  --tc-topbar-bc: rgba(59, 169, 255, 0.3);
  --tc-catbar-radius: 0px;
  --tc-catbar-bw: 1px;
  --tc-catbar-bc: rgba(0,0,0,0.05);
  --tc-btn-bc: rgba(59, 169, 255, 0.85);

  /* ── Mobile Homepage Layout variables ── */
  --tc-mobile-page-bg: #f0f4f8;
  --tc-mobile-header-bg: #ffffff;
  --tc-mobile-cat-chip-bg: #ffffff;
  --tc-mobile-cat-chip-radius: 16px;
  --tc-mobile-cat-icon-size: 64px;
  --tc-mobile-banner-radius: 16px;
  --tc-mobile-banner-height: 160px;
  --tc-mobile-banner-grad-start: #4f46e5;
  --tc-mobile-banner-grad-end: #7c3aed;
  --tc-mobile-banner-dots: 1;
  --tc-mobile-sec-title-color: #0f172a;
  --tc-mobile-sec-title-size: 18px;
  --tc-mobile-sec-link-color: #64748b;
  --tc-mobile-prod-bg: #ffffff;
  --tc-mobile-prod-radius: 14px;
  --tc-mobile-prod-label-color: #0f172a;
  --tc-mobile-bottom-bg: #ffffff;
  --tc-mobile-bottom-active: #3b82f6;
  --tc-mobile-bottom-inactive: #94a3b8;
  --tc-mobile-bottom-indicator: underline;
}

/* Dark Mode */
.dark {
  --bg: var(--tc-page-bg-dark, #111111);
  --card: var(--tc-card-bg-dark, #1a1a1a);
  --text: var(--tc-text-dark, #f0f0f0);
  --text-muted: #9ca3af;
  --border: #2a2a2a;
  --header-bg: #1a1a1a;
  --nav-bg: #1a1a1a;
  --shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* -----------------------------------------
   GLOBAL PAGE LAYOUT
----------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

body {
  background: var(--tc-page-bg, var(--bg));
  color: var(--tc-text, var(--text));
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: background 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
}

#header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* -----------------------------------------
   BOTTOM NAVIGATION — Floating pill style
   Transparent frosted glass, lifted off bottom,
   rounded pill shape with shadow
----------------------------------------- */
#bottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  box-sizing: border-box !important;
  min-height: var(--tc-navbar-height, 56px);
  height: 56px;
  z-index: 200;
  opacity: var(--tc-navbar-opacity, 1);

  display: flex;
  justify-content: space-around;
  align-items: center;

  background: var(--tc-navbar-bg, #0f2e6e);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: none;
  border-top: var(--tc-navbar-bw, 1px) solid var(--tc-navbar-bc, rgba(255, 255, 255, 0.12));
  border-radius: 0 !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
  padding: 4px 6px;
  transition: opacity 0.3s;
}

.dark #bottomNav {
  background: var(--tc-navbar-bg, #0b1f4d);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

#bottomNav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 12px;
  border-bottom: none;
  transition: color 0.18s, background 0.18s;
  flex: 1;
  min-width: 0;
  box-sizing: border-box !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

#bottomNav .nav-item:hover {
  color: #F87A11;
}

#bottomNav .nav-item:active {
  background: rgba(255, 255, 255, 0.1);
}

.dark #bottomNav .nav-item:active {
  background: rgba(255, 255, 255, 0.1);
}

#bottomNav .nav-item.active {
  color: #F87A11 !important;
  opacity: 1;
  font-weight: 700 !important;
  border-bottom: none;
}

#bottomNav .nav-item:not([data-id="home"]) svg,
#bottomNav .nav-item .nav-icon {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  display: block;
  opacity: 1;
  stroke: var(--tc-mobile-bottom-inactive, rgba(255, 255, 255, 0.65));
  fill: none;
  transition: opacity 0.18s, stroke 0.18s;
}

#bottomNav .nav-item:not([data-id="home"]).active svg,
#bottomNav .nav-item.active .nav-icon {
  opacity: 1;
  stroke: var(--tc-mobile-bottom-active, #ffffff) !important;
  stroke-width: 2.2 !important;
}

/* Custom square SVG icons in bottom nav — equal 28x28 for every tab */
#bottomNav .nav-item .nav-icon-img {
  width: 34px;
  height: 34px;
  display: block;
  background: transparent !important;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.18s ease, filter 0.18s ease;
}

#bottomNav .nav-item:hover .nav-icon-img {
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

#bottomNav .nav-item.active .nav-icon-img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) drop-shadow(0 2px 5px rgba(224, 122, 31, 0.6));
}

/* Cart badge on bottom nav */
#bottomNav .cart-count {
  position: absolute;
  top: -5px;
  right: -7px;
  background: #ff3b30;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 999px;
  text-align: center;
  padding: 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  border: 1.5px solid #0f2e6e;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* -----------------------------------------
   PAGE CONTENT
----------------------------------------- */
#pageContent {
  padding: 16px;
  padding-bottom: 100px;
}

/* -----------------------------------------
   HOMEPAGE FIRST MODULE (banner) SPACING
   -----------------------------------------
   This intentionally does NOT use negative margins to overlap the
   HEADER, or any z-index tricks. The header (.customer-header,
   z-index: 100, sticky) and the banner live in normal document flow,
   in separate boxes, one simply after the other. The only negative
   margin here CANCELS #pageContent's own top padding (16px) — it
   does not reach up into the header itself.

   The "attached to the header" look comes entirely from:
   1. A tiny, near-zero gap below the header (this rule) instead of
      #pageContent's normal 16px.
   2. The banner's own background matching the header's color
      (var(--tc-topbar-bg), so the seam blends).
   3. Rounded corners on the banner card itself.
   4. The carousel sitting flush with the module's edges (no extra
      internal padding), so there's a single clean rounded card —
      not a colored "matte border" around the image.

   No overlap with the header means no stacking-order ambiguity: the
   banner can never render in front of the header, and it always
   scrolls away normally underneath it. */
#pageContent > .abanner-module:first-child,
#pageContent > .banner-module:first-child {
  margin-top: -10px; /* cancels #pageContent's 16px padding, leaves ~6px gap below the header */
  background: var(--tc-topbar-bg, linear-gradient(180deg, #073582 0%, #031b47 100%));
  border-radius: 20px;
  overflow: hidden;
}

/* Make the carousel sit flush with the module's own rounded edges —
   no internal padding/negative-margin offset — so the banner reads
   as one clean rounded card instead of an image floating inside a
   colored matte border. */
#pageContent > .abanner-module:first-child .abanner-carousel,
#pageContent > .banner-module:first-child .abanner-carousel {
  margin: 0;
  padding: 0;
}

/* -----------------------------------------
   HOMEPAGE-ONLY PRODUCT CARD
   This is the OLD layout.css definition — it
   only applies inside #pageContent (the homepage).
   homepage-modules.css overrides it with the
   proper carousel card design. On sub-pages
   (category, etc.) the .product-card in
   customer-pages.css takes precedence.
----------------------------------------- */
#pageContent .product-card {
  min-width: 140px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
}

/* -----------------------------------------
   ANIMATIONS
----------------------------------------- */
.fade-in {
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── "My Location" recenter button (shared) ── */
.maplibregl-ctrl-location:hover,
.leaflet-control-location:hover {
  background: #f0f0f0 !important;
}

/* Leaflet fallback: style the button container the same way */
.leaflet-control-location {
  background: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
  cursor: pointer;
}

/* -----------------------------------------
   STANDARDIZED TOAST NOTIFICATION SYSTEM
----------------------------------------- */
#toastContainer {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  width: calc(100% - 32px);
  pointer-events: none;
}

@media (max-width: 640px) {
  #toastContainer {
    top: 12px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

.toast-notification {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #1e1e24;
  color: #ffffff;
  border-radius: var(--radius, 12px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.2s, transform 0.2s;
  overflow: hidden;
  position: relative;
}

.toast-notification.toast-fade-out {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-indicator-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}

.toast-notification.success .toast-indicator-bar { background: #10b981; }
.toast-notification.error .toast-indicator-bar { background: #ef4444; }
.toast-notification.warning .toast-indicator-bar { background: #f59e0b; }
.toast-notification.info .toast-indicator-bar { background: #3b82f6; }

.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.toast-notification.success .toast-icon { color: #10b981; }
.toast-notification.error .toast-icon { color: #ef4444; }
.toast-notification.warning .toast-icon { color: #f59e0b; }
.toast-notification.info .toast-icon { color: #3b82f6; }

.toast-content {
  flex-grow: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
}

.toast-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, background-color 0.15s;
}

.toast-close-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

/* -----------------------------------------
   STANDARDIZED PAGE ERROR BOUNDARY CARD
----------------------------------------- */
.error-boundary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 24px;
  border-radius: var(--tc-card-radius, var(--radius, 14px));
  background: var(--tc-card-bg, var(--card, #f8f9fa));
  border: var(--tc-card-bw, 1px) solid var(--tc-card-bc, var(--border, #e5e7eb));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  max-width: 440px;
  margin: 24px auto;
  animation: boundaryFadeIn 0.4s ease;
}

.dark .error-boundary-card {
  background: var(--tc-card-bg-dark, var(--card, #1a1a1a));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

@keyframes boundaryFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.error-boundary-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  margin-bottom: 16px;
}

.error-boundary-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--tc-text, var(--text, #1a1a1a));
}

.error-boundary-message {
  font-size: 14px;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 0 12px;
}

.error-boundary-retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--tc-btn-pad-y, 10px) var(--tc-btn-pad-x, 20px);
  background: var(--tc-btn-bg, var(--primary, #D4A017));
  color: var(--tc-btn-text, #ffffff);
  border: var(--tc-btn-bw, 1px) solid var(--tc-btn-bc, transparent);
  border-radius: var(--tc-btn-radius, 8px);
  font-size: var(--tc-btn-fs, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.error-boundary-retry-btn:hover {
  background: var(--tc-btn-hover-bg, var(--primary-dark, #142C6E));
  color: var(--tc-btn-hover-text, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.error-boundary-retry-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* ── Divider and border gradients (thin, elegant, minimal) ── */
.divider-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(59, 169, 255, 0.45) 15%, rgba(30, 58, 138, 0.65) 50%, rgba(59, 169, 255, 0.45) 85%, transparent 100%);
  border: none;
  margin: 16px 0;
}


/* ── Mobile Bottom Nav Indicator Styles ──
   Controlled by --tc-mobile-bottom-indicator variable.
   Applied via a data attribute set by bottom-nav-renderer.js */

/* Underline indicator (only if explicitly set) */
body[data-nav-indicator="underline"] #bottomNav .nav-item.active {
  border-bottom: 2.5px solid var(--tc-mobile-bottom-active, #ffffff);
  padding-bottom: 2px;
  border-radius: 0;
}

/* Dot indicator */
body[data-nav-indicator="dot"] #bottomNav .nav-item.active {
  border-bottom: none;
  position: relative;
  padding-bottom: 4px;
}
body[data-nav-indicator="dot"] #bottomNav .nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tc-mobile-bottom-active, #3b82f6);
}

/* Pill indicator */
body[data-nav-indicator="pill"] #bottomNav .nav-item.active {
  border-bottom: none;
  background: color-mix(in srgb, var(--tc-mobile-bottom-active, #3b82f6) 15%, transparent);
  border-radius: 10px;
  padding: 4px 12px;
}

/* None indicator */
body[data-nav-indicator="none"] #bottomNav .nav-item.active {
  border-bottom: none;
}

/* Custom Animated SVG Loader Override */
.spinner, .loading-spinner, .module-loading .spinner, .page-loading .spinner {
  width: 90px !important;
  height: 90px !important;
  border: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  animation: none !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgdmFsdWVzPSIxOzEuMDU7MSIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGFkZGl0aXZlPSJzdW0iLz48L2c+PHBhdGggaWQ9InNwaXJhbCIgZD0iTTYwLDE0MCBDNDAsMTIwIDQwLDkwIDYwLDcwIEM4MCw1MCAxMTAsNTAgMTMwLDcwIEMxNTAsOTAgMTUwLDEyMCAxMzAsMTQwIEMxMTUsMTU1IDk1LDE1NSA4MCwxNDAgQzcwLDEzMCA3MCwxMTUgODAsMTA1IEM5MCw5NSAxMDUsOTUgMTE1LDEwNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkY3QTAwIiBzdHJva2Utd2lkdGg9IjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iNDAwIiBzdHJva2UtZGFzaG9mZnNldD0iNDAwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2UtZGFzaG9mZnNldCIgZnJvbT0iNDAwIiB0bz0iMCIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L3BhdGg+PHBhdGggZD0iTTEzMCw3MCBDMTQ1LDU1IDE2MCw1NSAxNzAsNzAgQzE1NSw3NSAxNDUsODAgMTM1LDc4IFoiIGZpbGw9IiNGRjdBMDAiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiB2YWx1ZXM9IjAgMTUwIDcwOyA1IDE1MCA3MDsgMCAxNTAgNzAiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjwvc3ZnPg==") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: inline-block !important;
  color: transparent !important;
  font-size: 0 !important;
}


/* ======================================================
   DESKTOP: Hide bottom nav, remove bottom padding
   Bottom nav items are in the topbar on desktop
====================================================== */
@media (min-width: 860px) {
  #bottomNav {
    display: none !important;
  }
  
  #pageContent {
    padding-bottom: 32px !important;
  }
}