/* ══════════════════════════════════════════════
   CACTUS AUTO SPA — SHARED MOBILE RESPONSIVE
   Linked from all pages. Overrides inline styles
   via !important where needed.
══════════════════════════════════════════════ */

/* Prevent horizontal scroll on every page */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

* { box-sizing: border-box; }

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ── Eyebrow pills — mobile centering ───────
   inline-flex pills wider than the viewport
   can't be centered by text-align alone; they
   clip to the left edge and overflow right.
   Switch to flex + margin:auto so they always
   center within the screen without overflowing.
──────────────────────────────────────────── */
@media (max-width: 600px) {
  .eyebrow, .sec-eyebrow, .hero-eyebrow, .eyebrow-pill, .mem-eyebrow {
    display: flex !important;
    width: fit-content !important;
    max-width: calc(100vw - 60px) !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Hero padding ────────────────────────────
   Several pages set 6rem or 80px top padding on
   .hero, creating a large gap under the nav on
   mobile. Reduce to match ceramic coating spacing.
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    padding-top: 3rem !important;
  }
}

/* ── Footer ──────────────────────────────────
   Collapse 4-column grid to single column.
   Works even with inline grid styles because
   !important beats inline specificity.
──────────────────────────────────────────── */
@media (max-width: 768px) {
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    padding: 40px 20px !important;
    gap: 32px !important;
  }
  /* Bottom bar — reduce side padding */
  footer > div:last-child {
    padding: 16px 20px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ── Section / general padding ───────────────
   Prevent over-padded sections on small screens
──────────────────────────────────────────── */
@media (max-width: 480px) {
  section {
    overflow-x: hidden;
  }
  /* Reduce large horizontal padding on wrapper divs */
  [style*="padding:56px 52px"],
  [style*="padding: 56px 52px"] {
    padding: 36px 20px !important;
  }
  [style*="padding:48px 52px"],
  [style*="padding: 48px 52px"] {
    padding: 32px 20px !important;
  }
}

/* ── Contact page title ──────────────────────
   Fixed 40px → responsive clamp
──────────────────────────────────────────── */
.page-title {
  font-size: clamp(26px, 5vw, 40px) !important;
}

/* ── Services page — card grid ───────────────
   At 768px collapse from 4→2 cols
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr !important;
  }
}

/* ── Membership page — pricing cols ─────────
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .pcols {
    grid-template-columns: 1fr 1fr !important;
    overflow-x: auto !important;
  }
}
@media (max-width: 560px) {
  .pcols {
    grid-template-columns: 1fr !important;
  }
}

/* ── CTA band — reduce padding on mobile ────
──────────────────────────────────────────── */
@media (max-width: 600px) {
  .cta-band, .section-cta {
    flex-direction: column !important;
    text-align: center !important;
    padding: 36px 20px !important;
    align-items: center !important;
  }
}

/* ── Before/After grid (portfolio) ──────────
──────────────────────────────────────────── */
@media (max-width: 600px) {
  .ba-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

/* ── Hood / neighborhood grid ───────────────
──────────────────────────────────────────── */
@media (max-width: 600px) {
  .hood-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Stat grid ───────────────────────────── */
@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Privacy / Terms content padding ────────
──────────────────────────────────────────── */
@media (max-width: 480px) {
  .content-wrap {
    padding: 2rem 1rem 4rem !important;
  }
}

/* ── Green button hover animation ───────────────────────────
──────────────────────────────────────────────────────────── */
.btn-animated {
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.btn-animated:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(34,197,94,.45), 0 0 0 4px rgba(34,197,94,.15);
}
.btn-animated:active {
  transform: scale(.97);
  box-shadow: none;
}

/* ── Best Value badge — bounce in then glow-float ───────────
──────────────────────────────────────────────────────────── */
@keyframes bestValueBounce {
  0%   { transform: translateY(-20px) scale(.75); opacity: 0; }
  55%  { transform: translateY(4px) scale(1.06); opacity: 1; }
  75%  { transform: translateY(-3px) scale(.97); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes bestValueGlowFloat {
  0%   { box-shadow: 0 0 5px 1px rgba(34,197,94,.25); transform: translateY(0); }
  25%  { box-shadow: 0 0 16px 6px rgba(34,197,94,.65); transform: translateY(-5px); }
  50%  { box-shadow: 0 0 5px 1px rgba(34,197,94,.25); transform: translateY(0); }
  75%  { box-shadow: 0 0 16px 6px rgba(34,197,94,.65); transform: translateY(-5px); }
  100% { box-shadow: 0 0 5px 1px rgba(34,197,94,.25); transform: translateY(0); }
}
.best-value-animated {
  animation: bestValueBounce .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
.best-value-animated.settled {
  animation: bestValueGlowFloat 2.8s ease-in-out infinite;
}

/* ── Interactive Pricing Component — mobile ──────────────────
   Fixes tab cramping, card centering, and one-time detail
   content alignment on small screens.
──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Reduce inner pricing box padding so content has room */
  .ipc-pricing-box {
    padding: 32px 16px !important;
    border-radius: 20px !important;
  }

  /* Tabs: stretch full width so both buttons share space equally */
  .ipc-tabs {
    display: flex !important;
    width: 100% !important;
  }
  .ipc-tab {
    flex: 1 !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  /* One-time detail cards: single column, centered content */
  .ipc-onetime-grid {
    grid-template-columns: 1fr !important;
  }
  .ipc-detail-card {
    padding: 24px 16px !important;
    text-align: center !important;
  }
  /* Keep feature list text left-aligned inside the centered card */
  .ipc-features-list {
    text-align: left !important;
  }

  /* Membership cards: single column */
  .ipc-mem-grid {
    grid-template-columns: 1fr !important;
  }

  /* Vehicle pills: allow text to wrap on very small screens */
  .ipc-vehicle span {
    white-space: normal !important;
    text-align: center !important;
    font-size: 13px !important;
  }

  /* Section headers (Interior Detail / Exterior Wash) — bigger and centered */
  .ipc-mem-section-header {
    font-size: 18px !important;
    font-weight: 800 !important;
    text-align: center !important;
    letter-spacing: 0.12em !important;
    margin-top: 8px !important;
  }

  /* Ensure membership cards and their content are centered */
  .ipc-mem-card {
    text-align: center !important;
  }
  .ipc-mem-badge-slot {
    justify-content: center !important;
  }
  .ipc-mem-plus-divider {
    text-align: center !important;
  }
}