/* -----------------------------
   STYLES (cleaned & reorganized)
   Sections: variables, base, utilities, components, partials
   Page-specific rules should live in page CSS (e.g. mercat.css)
   ----------------------------- */

/* 1) Variables & base */
:root {
  --color-forest:       #04202C;
  --color-evergreen:    #304040;
  --color-pine:         #5B7065;
  --color-fog:          #C9D1C8;

  /* Sprint 1 (Admin Parada) — single origin for tokens that were previously
     redeclared independently in admin-navbar.css / admin_spa.css / parada_spa.css.
     Any admin CSS needing these should reference the variable, never a literal hex. */
  --color-danger:        #dc3545;
  --color-danger-strong: #b02a37;
  --color-success:       #1E824C;
  --color-border-subtle: #b2bab1;
  /* Comandes V2: reuses the exact pair already established by
     .admin-badge--warning (admin-components.css), tokenized here rather
     than a 2nd independent hardcoded copy — first real semantic
     "pending/attention" color this admin surface has had (amber), as
     distinct from --color-danger (a real problem) and --color-success
     (paid/done). */
  --color-warning:       #856404;
  --color-warning-bg:    #fff3cd;
  /* Més V2: "Activar" chip — a soft blue for "available to activate",
     deliberately distinct from --color-warning (something started but
     incomplete) and --color-danger (a real problem). First blue token
     this admin surface has needed. */
  --color-info:          #2563eb;
  --color-info-strong:   #1d4ed8;

    /* Safe bottom spacing so fixed cart doesn't cover footer links */
    --cart-safe-bottom: 96px;
  --bg: var(--color-fog);
/* Ensure page content has enough bottom padding to avoid being covered
  by the fixed compact cart. Includes the device safe-area inset. */
main { padding-bottom: calc(var(--cart-safe-bottom) + env(safe-area-inset-bottom, 0px)); }

  --bs-border-radius:       16px;
  --bs-border-radius-sm:    16px;
  --bs-border-radius-lg:    16px;
  --bs-border-radius-xl:    16px;
  --bs-border-radius-xxl:   16px;
  --bs-border-radius-pill:  50rem;
}


html { scroll-behavior: smooth; }
/* `<main>` is swapped wholesale on SPA navigation (spa-nav.js/search.js) and
   its content keeps loading afterwards (images, stepper mounts). Without
   this, the browser's scroll anchoring can silently re-adjust the scroll
   position once that late content resizes something above the viewport,
   undoing the explicit scroll-to-top those navigations just did. */
main { overflow-anchor: none; }
body { background-color: var(--bg); }
main h2 { color: var(--color-evergreen); padding-inline: 12px; }
.container-fluid { max-width: 1320px; margin-inline: auto; }


/* 2) Utilities */
.bg-forest { background-color: var(--color-forest) !important; }
/* Utility: remove lateral page padding when needed (use class on wrapper) */
.full-bleed { padding-left: 0; padding-right: 0; }
.hidden { display: none !important; }
.btn-pine { background-color: var(--color-pine); border-color: var(--color-pine); color:#fff; font-weight:700; }
.btn-pine:hover, .btn-pine:focus { background-color: var(--color-evergreen); border-color: var(--color-evergreen); }

/* Botó "pill" modern (alçada fixa, cantonades semicirculars) — component
   compartit per a qualsevol pàgina que en vulgui la mateixa aparença que
   els CTA d'index.html ("Descobreix mercats", etc.). Variants de color:
   `.btn-solid` (ple, color de marca) i `.btn-glass` (translúcid, per sobre
   de fotos). Viu a styles.css (carregat a totes les pàgines) perquè és
   reutilitzable, a diferència de `.btn-pine`, que és més gruixut/antic i
   només es manté per compatibilitat amb botons existents. */
:root { --btn-pill-height: 48px; }
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--btn-pill-height);
  line-height: 1;
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent; /* el feedback de toc el dona el :active */
}
.btn-pill i { line-height: 1; font-size: 1em; }
.btn-pill:active { transform: scale(0.96); }

.btn-solid { background: var(--color-pine); border-color: var(--color-pine); color: #fff; }
.btn-solid:hover, .btn-solid:focus { background: var(--color-evergreen); border-color: var(--color-evergreen); color: #fff; }

.btn-glass {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-glass:hover, .btn-glass:focus { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Variant de `.btn-glass` per a fons clars: mateix tractament translúcid
   i amb desenfoc, però amb text/vora en pine en comptes de blanc. */
.btn-glass-dark {
  background: rgba(91, 112, 101, 0.08);
  border-color: rgba(91, 112, 101, 0.35);
  color: var(--color-pine);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-glass-dark:hover, .btn-glass-dark:focus { background: rgba(91, 112, 101, 0.16); color: var(--color-pine); }

/* Outline variant: transparent background, pine border and text */
.btn-outline-pine{
  background-color: transparent;
  color: var(--color-pine);
  border: 1px solid var(--color-pine);
  font-weight:700;
}
.btn-outline-pine{
  border-radius: var(--bs-border-radius-pill);
  padding-inline: 1.25rem;
}
.btn-outline-pine:hover, .btn-outline-pine:focus{ background-color: rgba(91,112,101,0.06); color: var(--color-pine); }


/* 3) Components */
.icon-block { display: inline-block; /* base inline layout; presentation moved to index.css */ }

/* Address header style (icon + label) - used for address lines in pages */
.address-header-row {
  display: flex;
  align-items: center;
  gap: var(--hp-header-gap, 0.65em);
  min-height: 1em;
  padding-block: 0; /* minimal vertical padding */
  font-size: .9rem; /* match horari close-info */
  font-weight: 600;
  color: var(--hp-chip-fg, rgba(255,255,255,0.6));
  margin-bottom: 0;
  padding-left: 12px; /* align with site gutter used by horari */
}
.address-header-row .hp-icon { font-size: var(--hp-icon-size, 1.25em); margin-right: .35rem; }
.address-header-row .hp-label { display: inline-flex; align-items: center; gap: .45rem; }

/* Ensure links in address header inherit the header text style */
.address-header-row a,
.hp-root .address-header-row a {
  color: inherit !important;
  text-decoration: none !important;
}
.address-header-row a:hover,
.hp-root .address-header-row a:hover {
  color: inherit !important;
  text-decoration: underline !important;
}

/* Address text should use normal font-weight to avoid bold links in mercat */
.address-header-row .hp-label,
.address-header-row .hp-label a,
.hp-root .address-header-row .hp-label,
.hp-root .address-header-row .hp-label a {
  font-weight: 400 !important;
}

/* Mercat header sits just under the navbar with 0.5rem top spacing */
.mercat-header { padding-top: 0.5rem; padding-bottom: 1rem; }
.mercat-name { font-size: 1.25rem; font-weight: 700; margin: 0; }

/* Ensure mercat headers use the same lateral gutter
   Note: parada-specific header rules are scoped to `static/css/parada.css`.
*/
.mercat-header .hp-info-block {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Prevent component `.hp-root` from introducing an extra offset inside mercat header */
.mercat-header .hp-root {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Address row shouldn't add its own extra left padding when inside header's hp-info-block */
.mercat-header .address-header-row {
  padding-left: 0 !important;
}

.mercat-header .hp-root .hp-header-row {
  padding-left: 0 !important;
}

.mercat-header .hp-root .accordion-button.hp-btn {
  padding-left: 0 !important;
}

/* Enforce the shared 12px gutter on the parent info block (mercat) */
.mercat-header > .container .hp-info-block {
  padding-left: 12px !important;
  padding-right: 12px !important;
}


/* --------------------------------------------------
   Pill chips (global)

   Purpose:
   - Small status chips used on top-left of product/parada "pill-card" elements.
   - Mapped from DB values to modifier classes (see mapping below).

   Usage (HTML):
   - Place a `span` with classes `pill-chip` plus one modifier inside a `.pill-card`:
     <button class="pill-card"> <span class="pill-chip pill-chip--nou">Nou</span> ...</button>

   DB -> class mapping (canonical):
   - "Nou"          -> `pill-chip--nou`
   - "De temporada" -> `pill-chip--temporada`
   - "Més venut"    -> `pill-chip--mesvenut`
   - "Promoció"     -> `pill-chip--promocio`
   - "no" or null   -> no chip rendered

   Accessibility:
   - These chips are decorative labels for product status. Prefer `aria-hidden="true"` when
     the chip conveys only visual info. If the chip conveys important state, expose it via
     an accessible text alternative or `aria-label` on the containing control.

   Notes:
   - `.pill-card` is given `position: relative` so `.pill-chip` can be absolutely positioned.
   - Keep the visual styles small and high-contrast for legibility.
   -------------------------------------------------- */

.pill-card { position: relative; }
.pill-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  font-size: 0.75rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  font-weight: 700;
  display: inline-block;
}
.pill-chip--nou { background: #fff; color: var(--color-evergreen); }
.pill-chip--temporada { background: var(--color-pine); color: #fff; }
.pill-chip--mesvenut { background: #d37640; color: #fff; }
.pill-chip--promocio { background: #111; color: #fff; }

/* Mobile touch optimizations: prefer `touch-action: manipulation` on interactive
   controls to avoid double-tap zoom while keeping page-level pinch/zoom intact.
   Applied only to interactive controls (chips, buttons, action links). */
.productes-chip, .pill-card > .pill-chip, button, a, .paradista-open {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}