/* ============================================================
   MAMA TAVA · 3D STACKED-SHADOW BUTTON EFFECT
   ------------------------------------------------------------
   Translation of the requested React/Tailwind component into
   pure CSS for our static site. Applied universally to all
   site CTAs and action buttons EXCEPT footer pills.

   Effect on hover:
     - The button lifts up & to the left (-8px, -8px)
     - A 3-layer staircase shadow is revealed on the bottom-right
       in navy → mid-blue → teal, matching the brand palette
     - Smooth cubic-bezier easing (350ms)
   ============================================================ */

:root {
  --btn3d-shadow-1: #344262;   /* Mama Tava navy — closest layer */
  --btn3d-shadow-2: #5a7088;   /* mid blue-gray */
  --btn3d-shadow-3: #83C1C6;   /* Caribbean teal — outermost layer */
  --btn3d-lift-x:   -8px;
  --btn3d-lift-y:   -8px;
  --btn3d-ease:     cubic-bezier(.22, 1, .36, 1);
  --btn3d-duration: 0.36s;
}

/* ── Base targets — all non-footer interactive buttons ───── */
.btn,
.selector-btn,
.fvi-cta,
.shell-card__cta {
  position: relative;
  z-index: 1;
  /* Override existing transitions so transform & box-shadow ease together */
  transition:
    transform   var(--btn3d-duration) var(--btn3d-ease),
    box-shadow  var(--btn3d-duration) var(--btn3d-ease),
    background  0.28s ease,
    color       0.28s ease,
    border-color 0.28s ease !important;
  will-change: transform, box-shadow;
}

/* ── The 3D hover state ─────────────────────────────────── */
.btn:hover,
.selector-btn:hover,
.fvi-cta:hover,
.shell-card__cta:hover {
  transform: translate(var(--btn3d-lift-x), var(--btn3d-lift-y)) !important;
  box-shadow:
    4px  4px  0 0 var(--btn3d-shadow-1),
    8px  8px  0 0 var(--btn3d-shadow-2),
    12px 12px 0 0 var(--btn3d-shadow-3) !important;
}

/* Active / pressed — collapse the shadow */
.btn:active,
.selector-btn:active,
.fvi-cta:active,
.shell-card__cta:active {
  transform: translate(-2px, -2px) !important;
  box-shadow:
    2px 2px 0 0 var(--btn3d-shadow-1),
    4px 4px 0 0 var(--btn3d-shadow-2),
    6px 6px 0 0 var(--btn3d-shadow-3) !important;
  transition-duration: 0.12s !important;
}

/* ── Per-variant shadow palettes ────────────────────────── */

/* Primary navy buttons → teal-progression shadows pop on light bg */
.btn--primary:hover {
  --btn3d-shadow-1: #FF8C42;   /* Caribbean orange */
  --btn3d-shadow-2: #d97132;
  --btn3d-shadow-3: #83C1C6;
}

/* WhatsApp (teal) → navy → orange shadows for warm contrast */
.btn--whatsapp:hover {
  --btn3d-shadow-1: #344262;
  --btn3d-shadow-2: #FF8C42;
  --btn3d-shadow-3: #ffb380;
}

/* Outline buttons (often on dark hero) → keep teal-led palette */
.btn--outline:hover,
.btn--outline-aqua:hover {
  --btn3d-shadow-1: #83C1C6;
  --btn3d-shadow-2: #5a7088;
  --btn3d-shadow-3: #344262;
}

/* Dark variant → bright teal reveal */
.btn--dark:hover {
  --btn3d-shadow-1: #FF8C42;
  --btn3d-shadow-2: #5a7088;
  --btn3d-shadow-3: #83C1C6;
}

/* Ghost buttons (soft) → subtle navy stack */
.btn--ghost:hover {
  --btn3d-shadow-1: #344262;
  --btn3d-shadow-2: #5a7088;
  --btn3d-shadow-3: #83C1C6;
}

/* Fleet vehicle CTA (teal) → navy + orange stack */
.fvi-cta:hover {
  --btn3d-shadow-1: #344262;
  --btn3d-shadow-2: #4a5d7d;
  --btn3d-shadow-3: #FF8C42;
}

/* Use-case shell CTAs (orange-themed) → orange depth */
.shell-card__cta:hover {
  --btn3d-shadow-1: #FF8C42;
  --btn3d-shadow-2: #ffae73;
  --btn3d-shadow-3: #ffd1ad;
}

/* Fleet "find my vehicle" button — uses orange when active */
.selector-btn:hover {
  --btn3d-shadow-1: #344262;
  --btn3d-shadow-2: #5a7088;
  --btn3d-shadow-3: #83C1C6;
}
.selector-btn.has-filters:hover {
  --btn3d-shadow-1: #344262;
  --btn3d-shadow-2: #4a5d7d;
  --btn3d-shadow-3: #83C1C6;
  /* Override the existing has-filters:hover translateY */
  transform: translate(var(--btn3d-lift-x), var(--btn3d-lift-y)) !important;
}

/* ── Explicit footer exclusion (defensive) ──────────────── */
.footer-pill,
.magnetic-btn,
.cinematic-footer .btn,
.cinematic-footer-wrapper .btn {
  /* Footer keeps its own treatment — no 3D effect, no overrides */
}
.footer-pill:hover,
.magnetic-btn:hover {
  /* Re-baseline: no box-shadow stack from above (specificity safety) */
  box-shadow: none;
}

/* ── Skip the effect on tiny icon buttons & toggles ─────── */
.fleet-nav-btn,
.nav__toggle,
.float-wa,
.btn--icon {
  /* Untouched */
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .selector-btn:hover,
  .fvi-cta:hover,
  .shell-card__cta:hover {
    transform: none !important;
    box-shadow:
      3px 3px 0 0 var(--btn3d-shadow-1),
      6px 6px 0 0 var(--btn3d-shadow-2),
      9px 9px 0 0 var(--btn3d-shadow-3) !important;
  }
}

/* ── Responsive — soften lift on small screens for tap UX ─ */
@media (max-width: 640px) {
  :root {
    --btn3d-lift-x: -5px;
    --btn3d-lift-y: -5px;
  }
  .btn:hover,
  .selector-btn:hover,
  .fvi-cta:hover,
  .shell-card__cta:hover {
    box-shadow:
      3px 3px 0 0 var(--btn3d-shadow-1),
      6px 6px 0 0 var(--btn3d-shadow-2),
      9px 9px 0 0 var(--btn3d-shadow-3) !important;
  }
}