/* =============================================================================
   Del Plaza — components
   Buttons, badges, cards, breadcrumbs, tooltips, keyframes, utilities
   Extracted from css/style.css during the modular asset refactor.
   DESIGN_BIBLE-aligned palette, Univers typography, civic grid discipline.
   ============================================================================= */

/* =============================================================================
   Button Geometry — DESIGN_BIBLE §8 Mandate
   Top-left & Top-right: 0px (sharp right angles)
   Bottom-left & Bottom-right: 9px (subtly rounded)
   ============================================================================= */
.btn {
  /* Typography standard (DESIGN_BIBLE §8): Univers Extended / 400 / 1rem.
     Applies to every button site-wide — Add to Cart, Proceed to Checkout,
     Place Order, Sign In, and all future CTAs. */
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  /* Geometry mandate: sharp top, rounded bottom — 9px default for all CTA */
  border-radius: 0 0 9px 9px;
  transition: all 0.2s var(--ease-in-out);
  position: relative;
  overflow: hidden;
}

/* Size variants */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn-xl {
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
}

/* Primary button — DESIGN_BIBLE §8 Variants */
.btn-primary {
  --bs-btn-bg: var(--color-interactive-primary);
  --bs-btn-border-color: var(--color-interactive-primary);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--color-interactive-hover);
  --bs-btn-hover-border-color: var(--color-interactive-hover);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--color-interactive-active);
  --bs-btn-active-border-color: var(--color-interactive-active);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--muted-silver);
  --bs-btn-disabled-border-color: var(--muted-silver);
  --bs-btn-disabled-color: rgba(255, 255, 255, 0.4);
}

/* Outline button */
.btn-outline-primary {
  --bs-btn-color: var(--color-interactive-primary);
  --bs-btn-border-color: var(--color-interactive-primary);
  --bs-btn-hover-bg: var(--color-interactive-primary);
  --bs-btn-hover-border-color: var(--color-interactive-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--color-interactive-active);
  --bs-btn-active-border-color: var(--color-interactive-active);
  --bs-btn-active-color: #ffffff;
}

/* Ghost button — custom variant */
.btn-ghost {
  --bs-btn-color: var(--color-content-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-interactive-primary);
  --bs-btn-hover-bg: rgba(247, 238, 218, 0.08);
  --bs-btn-active-color: var(--color-interactive-active);
  --bs-btn-active-bg: rgba(247, 238, 218, 0.16);
}

/* Press effect — tactile physics */
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Hover depth */
.btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   Provenance Badge — DESIGN_BIBLE §12
   ============================================================================= */
.provenance-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-quark) var(--spacing-nano);
  background-color: var(--color-badge-provenance);
  color: #ffffff;
  font-size: clamp(0.6875rem, 1vw, 0.8125rem);
  font-weight: 700; /* Univers Black */
  text-transform: uppercase;
  border-radius: var(--border-radius-sticker);
  margin-bottom: var(--spacing-nano);
  position: relative;
  overflow: hidden;
}

/* Sticker text — shared with status pill. Top margin optically re-centres
   Univers uppercase glyphs (cap-height sits high in the em box). */
.track-status-pill__text {
  font-weight: 700; /* Univers Black */
  margin-top: var(--spacing-tiny);
}

/* Exclusive/premium badge variant */
.provenance-badge.badge-exclusive {
  background-color: var(--color-badge-exclusive);
}

/* =============================================================================
   Circa Badge — Account hero "Member since" indicator
   Formerly labelled provenance-badge, now circa-badge for semantic clarity.
   Styling mirrors provenance-badge base: inline-flex, uppercase, golden background.
   ============================================================================= */
.circa-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-quark) var(--spacing-nano);
  font-size: clamp(0.6875rem, 1vw, 0.8125rem);
  text-transform: uppercase;
  border-radius: var(--border-radius-sticker);
  margin-bottom: var(--spacing-nano);
  position: relative;
  overflow: hidden;
}

.circa-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
}

.circa-badge:hover::before {
  transform: translateX(100%);
}

.circa-badge__text {
  font-weight: 700;
  margin-top: var(--spacing-tiny);
}

/* =============================================================================
   Navigation & Wayfinding — DESIGN_BIBLE §11
   ============================================================================= */
/* Active nav indicator */
.nav-link {
  position: relative;
  text-transform: uppercase;
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--color-content-primary);
  transition: color 0.2s var(--ease-out);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-interactive-primary);
  transition: width 0.3s var(--ease-out);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-interactive-primary);
}

/* =============================================================================
   Card Styles — DESIGN_BIBLE §10
   ============================================================================= */
.card {
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  background-color: var(--color-surface-card);
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-heavy);
  transform: translateY(-4px);
}

.card-body {
  padding: var(--spacing-xxs);
}

/* =============================================================================
   Breadcrumb — DESIGN_BIBLE §11
   ============================================================================= */
.breadcrumb {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-badge-provenance);
  content: '\203A';
}

.breadcrumb-item.active {
  font-weight: 600;
  color: var(--color-content-heading);
}

/* =============================================================================
   Interactive Physics — DESIGN_BIBLE §8, §13
   All interactive elements respond with tactile feedback
   ============================================================================= */
a, button, .nav-link, .dropdown-item, .footer-link, .action-icon {
  transition: all 0.2s var(--ease-in-out);
}

/* =============================================================================
   Focus Styles — ACCESSIBILITY (WCAG AA) — DESIGN_BIBLE §14
   ============================================================================= */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--color-badge-provenance);
  outline-offset: 2px;
}

/* =============================================================================
   Animation Keyframes — DESIGN_BIBLE §13
   ============================================================================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

.fade-in-up {
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

/* =============================================================================
   Utility Classes — Extended palette utilities
   ============================================================================= */
.text-cognac          { color: var(--cognac) !important; }
.text-deep-navy       { color: var(--deep-navy) !important; }
.text-parchment-cream { color: var(--parchment-cream) !important; }
.text-imperial-plum   { color: var(--imperial-plum) !important; }
.text-ash-grey        { color: var(--ash-grey) !important; }

.bg-cognac          { background-color: var(--cognac) !important; }
.bg-parchment-cream { background-color: var(--parchment-cream) !important; }
.bg-deep-navy       { background-color: var(--deep-navy) !important; }

.border-cognac    { border-color: var(--cognac) !important; }
.border-muted     { border-color: var(--muted-silver) !important; }

/* =============================================================================
   Visually Hidden — ACCESSIBILITY (WCAG AA) — DESIGN_BIBLE §14
   Removes an element from the visual field while leaving it exposed to
   assistive technology. Used for live regions, captions and supplemental
   context that the visual layout carries implicitly.
   ============================================================================= */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   Responsive Adjustments — Mobile-first
   ============================================================================= */
@media (max-width: 991.98px) {
  .header {
    /* padding removed - header sits flush */
  }

  .footer {
    text-align: center;
  }

  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .payment-methods {
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .footer {
    padding: var(--spacing-lg) 0 var(--spacing-xxs) 0;
  }
}

/* =============================================================================
   Reduced Motion — Accessibility
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   Print Styles
   ============================================================================= */
@media print {
  .header,
  .footer {
    display: none;
  }

  body {
    background-color: #ffffff;
    color: #000000;
  }
}

/* =============================================================================
   Tooltip — Flag Selector Click Tooltip
   DESIGN_BIBLE §6 (Typography), §7 (Palette)
   Tawny Umber background with Parchment Cream text.
   Bootstrap 5.3.8 tooltip custom overrides.
   ============================================================================= */

/* ---- Tooltip inner container — Tawny Umber ground ---- */
.tooltip .tooltip-inner {
  background-color: var(--tawny-umber);
  color: var(--parchment-cream);
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  padding: 15px;
  border-radius: 0 0 12px 12px; /* DESIGN_BIBLE §8: sharp top, softly rounded bottom */
  max-width: 280px;
}

/* ---- Market name span inside tooltip — Univers Black Oblique ---- */
.tooltip .tooltip-market-name {
  font-weight: 700;
  font-style: italic;
}

/* ---- Tooltip arrow — Tawny Umber to match background ---- */
.tooltip .tooltip-arrow::before {
  border-bottom-color: var(--tawny-umber) !important;
}

/* ---- Tooltip placement overrides (bottom) ---- */
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--tawny-umber) !important;
}

/* ---- Tooltip show state — subtle fade for tactile feedback ---- */
.tooltip.show {
  opacity: 1;
}

/* =============================================================================
   Store Banner — Promotional Message (site-wide component)
   Imperial Plum banner with Greek Meander divider beneath it (provenance
   accent). Used on product.php, basket.php and checkout.php.
   DESIGN_BIBLE §7 (Palette — Imperial Plum), §8 (Provenance).
   ============================================================================= */
.store-banner {
  background-color: var(--imperial-plum);
  padding: var(--spacing-xs) 0;
}

.store-banner--secondary {
  margin-top: 0;
  border-bottom: none;
}

/* ---- Greek Meander Border - Imperial Plum divider beneath the Store Banner ---- */
.meander-border {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 4.5vw, 3.75rem);
  background-color: transparent;
  background-image: url("../assets/svg/greek-meander.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left center;
}

.store-banner__inner {
  text-align: center;
  padding: var(--spacing-nano) 0;
}

.store-banner__overline {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--cognac);
  margin-bottom: var(--spacing-quark);
  letter-spacing: normal;
}

.store-banner__message {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  color: var(--parchment-cream);
  margin-bottom: 0;
  line-height: 1.6;
}

.store-banner__message strong {
  font-weight: 600;
  color: #ffffff;
}

/* ---- Responsive: consistent banner padding on narrow screens ---- */
@media (max-width: 575.98px) {
  .store-banner {
    padding: var(--spacing-nano) 0;
  }
}

/* =============================================================================
   Form Messages — shared validation feedback
   Used on checkout.php, login.php and track-order.php.
   DESIGN_BIBLE §7 (Palette), §8 (Button Geometry).
   ============================================================================= */
.form-message {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  margin-top: var(--spacing-quark);
  min-height: 1.25rem;
}

.form-message--error {
  color: #dc3545;
}

.form-message--success {
  color: var(--deep-navy);
}

/* =============================================================================
   Concierge Note — shared component
   Used on login.php and track-order.php.
   ============================================================================= */
.auth-concierge {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xxs);
  margin-top: var(--spacing-md);
  padding: var(--spacing-xxs) var(--spacing-xs);
  background-color: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 9px 9px;
}

.auth-concierge i {
  font-size: 1.25rem;
  color: var(--cognac);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.auth-concierge p {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--color-content-primary);
  line-height: 1.6;
  margin-bottom: 0;
}

.auth-concierge a {
  color: var(--deep-navy);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s var(--ease-out);
}

.auth-concierge a:hover {
  color: var(--cognac);
}

@media (max-width: 991.98px) {
  .auth-concierge {
    padding: var(--spacing-xxs);
  }
}

/* =============================================================================
   Product Carousel — Shared Component
   DESIGN_BIBLE §10 (Card Layout Patterns), §13 (Micro-interactions),
   §14 (Accessibility — WCAG AA), §15 (Responsive Behaviour)

   A scroll-snap rail of product cards with paged controls and a progress rule.
   Behaviour lives in js/components/carousel.js; the component itself is
   surface-agnostic and may be deployed on any template that lists products.

   Markup contract:
     <div class="dp-carousel" data-carousel>
       <ul class="dp-carousel__track" data-carousel-track>
         <li class="dp-carousel__slide"><article class="product-card">…</article></li>
       </ul>
       <div class="dp-carousel__progress"><span data-carousel-progress></span></div>
     </div>
   Controls carry [data-carousel-prev] / [data-carousel-next] and may sit in the
   section header above the rail — the script resolves them from the enclosing
   <section>.
   ============================================================================= */
.dp-carousel {
  position: relative;
}

.dp-carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0 0 var(--spacing-md);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dp-carousel__track::-webkit-scrollbar {
  display: none;
}

.dp-carousel__slide {
  flex: 0 0 auto;
  width: clamp(11rem, 62vw, 16.5rem);
  scroll-snap-align: start;
}

@media (min-width: 660px) {
  .dp-carousel__slide {
    width: clamp(12rem, 30vw, 17.5rem);
  }
}

@media (min-width: 1024px) {
  .dp-carousel__slide {
    width: 18rem;
  }
}

/* ---- Progress rule — reports position, never decks the rail with dots ---- */
.dp-carousel__progress {
  position: relative;
  height: 2px;
  margin-top: var(--spacing-xs);
  background-color: var(--muted-silver);
  overflow: hidden;
}

.dp-carousel__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background-color: var(--cognac);
  transition: width 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

/* ---- Paged controls — button geometry per DESIGN_BIBLE §8 ---- */
.dp-carousel__nav {
  display: flex;
  gap: var(--spacing-nano);
  flex-shrink: 0;
}

.dp-carousel__btn {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  color: var(--color-content-heading);
  border-radius: 0 0 9px 9px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.dp-carousel__btn:hover {
  background-color: var(--deep-navy);
  border-color: var(--deep-navy);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dp-carousel__btn:active {
  background-color: var(--imperial-plum);
  border-color: var(--imperial-plum);
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dp-carousel__btn:disabled,
.dp-carousel__btn:disabled:hover,
.dp-carousel__btn[aria-disabled="true"],
.dp-carousel__btn[aria-disabled="true"]:hover {
  background-color: var(--muted-silver);
  border-color: var(--muted-silver);
  color: #ffffff;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

@media (max-width: 575.98px) {
  .dp-carousel__btn {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
}