/* Phoenix Tyres — Apple-design layer.
   Loaded after styles.css; every rule here overrides or extends the live site. */

:root {
  --radius: 10px;
  --radius-lg: 16px;
  --press: cubic-bezier(.2, 0, 0, 1);
  --glass: rgba(11, 11, 12, .62);
  --glass-edge: rgba(255, 255, 255, .07);
}

/* ---------- Typography: size-specific tracking + leading ---------- */
body { font-size: 1.0625rem; line-height: 1.55; }
h1 { line-height: .96; letter-spacing: -.012em; }
h2 { line-height: 1.02; letter-spacing: -.01em; }
h3 { line-height: 1.12; letter-spacing: 0; }
.lead { font-size: 1.1875rem; line-height: 1.5; }
.card p, .muted { line-height: 1.6; }
.stats span, .form-note, .field > span { letter-spacing: .015em; }

/* ---------- Translucent header, scroll-edge fade instead of a hard line ---------- */
.site-header {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: none;
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
  background: linear-gradient(to bottom, rgba(11, 11, 12, .55), transparent);
  pointer-events: none; opacity: 0; transition: opacity 200ms ease;
}
.site-header.is-scrolled::after { opacity: 1; }

/* ---------- Instant press feedback (on pointer-down, not release) ---------- */
.btn, .card, .wa-float, .contacts .wa-link, .menu-toggle {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); transition: transform 90ms var(--press); }
.btn { transition: background-color 140ms var(--ease), border-color 140ms var(--ease), transform 260ms var(--ease), color 140ms var(--ease); }
.contacts .wa-link:active { transform: scale(.96); }
.contacts .wa-link { transition: transform 200ms var(--ease), border-color 140ms; display: inline-block; }
.wa-float:active { transform: scale(.92); transition-duration: 90ms; }
.menu-toggle:active { transform: scale(.94); }

/* ---------- Cards: material with a lit top edge ---------- */
.card {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #19191c, var(--surface));
  border-color: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .4);
  transition: border-color 200ms var(--ease), transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 106, 0, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 32px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 106, 0, .06);
}
.card:active { transform: scale(.985); transition-duration: 90ms; }
.card-icon { border-radius: 12px; }

/* ---------- Glass stats bar floating over the fire glow ---------- */
.stats {
  background: rgba(22, 22, 24, .5);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.stats li { border-color: rgba(255, 255, 255, .06); }
.stats strong { letter-spacing: -.01em; }

/* ---------- Surfaces ---------- */
.quotes blockquote, .order-form, .map { border-radius: var(--radius-lg); }
.order-form { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
input, select, textarea { border-radius: 10px; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(255, 106, 0, .16); }
input, select, textarea { transition: border-color 140ms var(--ease), background-color 140ms var(--ease), box-shadow 200ms var(--ease); }

/* Inline validation: confirm good tyre-size fields as they're completed */
.size-row input.is-valid { border-color: rgba(111, 211, 138, .55); }

/* ---------- Scroll reveal: materialise (opacity + blur + small rise), JS-only ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.js .reveal.in {
  opacity: 1; transform: none; filter: none;
  transition: opacity 600ms var(--ease), transform 700ms var(--ease), filter 600ms var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ---------- Mobile menu → draggable sheet from under the header ---------- */
.mobile-menu { display: none; }
.menu-scrim {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none;
}
.menu-sheet {
  position: fixed; left: 0; right: 0; top: 68px; z-index: 45;
  display: none; flex-direction: column; gap: 2px;
  padding: 8px var(--gutter) 10px;
  background: rgba(17, 17, 19, .82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(255, 255, 255, .06);
  transform: translateY(-110%);
  touch-action: none;
  will-change: transform;
  user-select: none; -webkit-user-select: none;
}
.menu-sheet a {
  color: var(--text); padding: 14px 6px; font-size: 1.125rem; font-weight: 500;
  border-radius: 10px; transition: background-color 120ms;
}
.menu-sheet a:active { background: rgba(255, 255, 255, .06); }
.menu-sheet .btn { margin-top: 10px; justify-content: center; }
.menu-sheet a.btn-primary { color: #180a00; } /* keep dark text on the bright button */
.menu-sheet .btn:active { background: var(--orange-hover); }
.sheet-grip {
  align-self: center; width: 40px; height: 5px; margin: 12px 0 2px;
  border-radius: 3px; background: rgba(255, 255, 255, .22);
}

@media (max-width: 760px) {
  .menu-sheet { display: flex; }
}

/* ---------- Accessibility: motion, transparency, contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .menu-sheet { background: #0b0b0c; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .stats { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header, .menu-sheet { background: #000; border-bottom: 1px solid var(--silver); }
  .card, .stats, .order-form { border-color: var(--silver); }
}

/* ---------- WhatsApp button in WhatsApp's own green (dark text keeps it readable) ---------- */
.btn-whatsapp { background: #25d366; color: #062b14; }
.btn-whatsapp:hover { background: #2ee27a; color: #062b14; }
.btn-whatsapp:active { background: #1fbe5b; }