/* =============================================================
   Pinterest Design System — Skin
   Source: skins/pinterest/DESIGN.md (getdesign.md/pinterest)

   Three layers:
     1. --pin-*    : raw Pinterest color scale + typography roles
     2. semantic   : button/card/chip tokens following the spec
     3. --color-*, --font, --radius*, --shadow-*  : project token
                     overrides so the existing style.css inherits
                     the Pinterest aesthetic without per-rule edits.

   Load AFTER style.css for the overrides to win.
   Pin Sans is proprietary — Inter is the documented substitute
   (matches Pin Sans within ~3% at body sizes per DESIGN.md).
   ============================================================= */

:root {
  /* ── Brand & accent ─────────────────────────────────────── */
  --pin-red:                 #e60023;
  --pin-red-pressed:         #cc001f;

  /* ── Surface & neutral chrome ───────────────────────────── */
  --pin-canvas:              #ffffff;
  --pin-surface-soft:        #fbfbf9;
  --pin-surface-card:        #f6f6f3;
  --pin-secondary-bg:        #e5e5e0;
  --pin-secondary-pressed:   #c8c8c1;
  --pin-surface-dark:        #262622;
  --pin-hairline:            #dadad3;
  --pin-hairline-soft:       #e5e5e0;

  /* ── Text ─────────────────────────────────────────────── */
  --pin-ink:                 #000000;
  --pin-ink-soft:            #211922;
  --pin-body:                #33332e;
  --pin-charcoal:            #262622;
  --pin-mute:                #62625b;
  --pin-ash:                 #91918c;
  --pin-stone:               #c8c8c1;
  --pin-on-dark:             #ffffff;

  /* ── Semantic ──────────────────────────────────────────── */
  --pin-success-deep:        #103c25;
  --pin-success-pale:        #c7f0da;
  --pin-error:               #9e0a0a;
  --pin-error-deep:          #cc001f;
  --pin-focus-outer:         #435ee5;

  /* ── Radius scale (Pinterest uses three values: md / lg / pill) */
  --pin-radius-md: 10px;
  --pin-radius-lg: 20px;
  --pin-radius-full:         9999px;

  /* ─────────────────────────────────────────────────────────
     PROJECT VARIABLE OVERRIDES
     The existing style.css uses these tokens; remap to Pinterest.
     ───────────────────────────────────────────────────────── */
  --color-primary:    var(--pin-red);
  --color-primary-dk: var(--pin-red-pressed);
  --color-secondary:  var(--pin-red);          /* Pinterest is single-accent */
  --color-bg:         var(--pin-canvas);
  --color-bg-alt:     var(--pin-surface-card);
  --color-bg-dark:    var(--pin-surface-dark);
  --color-text:       var(--pin-body);
  --color-muted:      var(--pin-mute);
  --color-border:     var(--pin-hairline);
  --color-success:    var(--pin-success-deep);
  --color-white:      var(--pin-canvas);

  /* Pinterest's three-radius vocabulary (no in-between sizes) */
  --radius:           var(--pin-radius-md);    /* 16px — buttons, cards, inputs */
  --radius-lg:        var(--pin-radius-lg);    /* 32px — large cards, modals */
  --radius-xl:        var(--pin-radius-full);  /* pill — chips, search bar */

  /* Pinterest is shadow-averse (only modal layer carries one) */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.18);
  --font: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────
   Global Pinterest adjustments
   ───────────────────────────────────────────────────────────── */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font);
  color: var(--pin-body);
  background: var(--pin-canvas);
}

/* Tighter display-tier letter-spacing (Pin Sans signature) */
h1 { font-weight: 700; letter-spacing: -1.2px; line-height: 1.1; color: var(--pin-ink); }
h2 { font-weight: 700; letter-spacing: -1.0px; line-height: 1.2; color: var(--pin-ink); }
h3 { font-weight: 600; letter-spacing: -0.4px; line-height: 1.25; color: var(--pin-ink); }
h4 { font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--pin-ink); }
h5, h6 { font-weight: 600; letter-spacing: 0; color: var(--pin-ink); }

/* Inline links — Pinterest's near-black warm tint, no underline by default */
a {
  color: var(--pin-ink-soft);
  text-decoration: none;
  font-weight: 600;
}
a:hover { text-decoration: underline; }

/* Primary CTA — Pinterest Red rounded pill-ish (16px) */
.btn,
[class*="button"]:not(.lang-switcher__toggle):not(.site-header__toggle),
[class*="-btn"],
.cta,
input[type="submit"],
button[type="submit"]:not(.booking-form__submit) {
  border-radius: var(--pin-radius-md) !important;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0;
  transition: background-color var(--transition), color var(--transition);
}

.btn--primary,
.btn-primary,
.cta--primary {
  background: var(--pin-red) !important;
  color: var(--pin-on-dark) !important;
  border: none !important;
  border-radius: var(--pin-radius-md) !important;
  padding: 12px 24px;
  font-weight: 700;
}
.btn--primary:hover,
.btn-primary:hover,
.cta--primary:hover {
  background: var(--pin-red-pressed) !important;
  text-decoration: none !important;
}

.btn--secondary,
.btn-secondary,
.cta--secondary {
  background: var(--pin-secondary-bg) !important;
  color: var(--pin-ink) !important;
  border: none !important;
  border-radius: var(--pin-radius-md) !important;
  padding: 12px 24px;
  font-weight: 700;
}
.btn--secondary:hover,
.btn-secondary:hover,
.cta--secondary:hover {
  background: var(--pin-secondary-pressed) !important;
  text-decoration: none !important;
}

/* Booking form submit — keep the prominent red */
.booking-form__submit {
  background: var(--pin-red) !important;
  color: var(--pin-on-dark) !important;
  border-radius: var(--pin-radius-md) !important;
  font-weight: 700;
  letter-spacing: 0;
}
.booking-form__submit:hover { background: var(--pin-red-pressed) !important; }

/* Cards / panels — flat, 16px radius, no shadow (the photo IS the card) */
.card,
.panel,
[class*="card"]:not(.car-card__amount):not(.car-card__per):not(.car-card__cta),
[class*="-card"],
.tile,
.faq__item,
.review,
.feature {
  /* border-radius: var(--pin-radius-md) !important; */
  box-shadow: none !important;
  /* background: var(--pin-canvas); */
}

/* "Big" cards bump to 32px (modals, large pin-like cards) */
.modal,
.modal-card,
[class*="modal"],
.feature--large,
.card--large {
  border-radius: var(--pin-radius-lg) !important;
}

/* Pin-like image cards: full-bleed image, 16px corners, no internal padding */
.no-detail-card picture,
.vehicle-card picture,
.car-card__image-wrap picture,
.steps__list picture,
[class*="card"] > picture:first-child {
  border-radius: var(--pin-radius-md);
  overflow: hidden;
  display: block;
}

/* Inputs — 16px radius, canvas fill, ash border, focus = double ring */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
  background-color: var(--pin-canvas);
  color: var(--pin-ink);
  /* border: 1px solid var(--pin-ash); */
  border-radius: var(--pin-radius-md);
  padding: 11px 15px;
  font-family: var(--font);
  font-size: 16px;
  /* transition: border-color var(--transition), box-shadow var(--transition); */
}
textarea { min-height: 96px; padding: 12px 15px; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--pin-ink);
  /* box-shadow: 0 0 0 4px var(--pin-focus-outer), 0 0 0 2px var(--pin-canvas) inset; */
}

input::placeholder,
textarea::placeholder { color: var(--pin-ash); }

/* Booking form field controls — match Pinterest pill-rounded inputs without breaking layout */
.booking-form__control select,
.booking-form__control input {border-radius: var(--pin-radius-md);}

/* Focus ring — 2px outer blue (Pinterest signature) */
*:focus-visible {
  outline: 2px solid var(--pin-focus-outer);
  outline-offset: 2px;
}

/* Header / nav — clean white, hairline divider, no shadow */
.site-header {
  background: var(--pin-canvas) !important;
  border-bottom: 1px solid var(--pin-hairline) !important;
  box-shadow: none !important;
}
.site-nav__link {
  color: var(--pin-ink) !important;
  font-weight: 600;
}
.site-nav__link:hover { color: var(--pin-ink-soft) !important; text-decoration: underline; }

/* Alternating section bands — cream surface for the "soft" rows */
section:nth-of-type(even),
.section--alt,
.section-alt,
.bg--alt {
  background: var(--pin-surface-card);
}

/* Tags / pills / chips — fully rounded, cream background */
.tag, .pill, .badge, .chip,
.car-card__feature-list li,
.no-detail-card__meta {
  background: var(--pin-surface-card) !important;
  color: var(--pin-ink) !important;
  border-radius: var(--pin-radius-full) !important;
  padding: 6px 12px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Filter pills (.filter-pill, .car-filter etc.) — pill-shaped, ink-on-cream */
.filter-pill,
[class*="filter__pill"],
[class*="filter-btn"],
[role="tab"] {
  background: var(--pin-surface-card) !important;
  color: var(--pin-ink) !important;
  border-radius: var(--pin-radius-full) !important;
  padding: 8px 16px !important;
  font-weight: 700;
  border: none !important;
}
.filter-pill.is-active,
.filter-pill[aria-selected="true"],
[role="tab"][aria-selected="true"] {
  background: var(--pin-ink) !important;
  color: var(--pin-on-dark) !important;
}

/* Footer — clean white, hairline top, mute text */
.site-footer {
  /* background: var(--pin-canvas) !important; */
  /* border-top: 1px solid var(--pin-hairline) !important; */
  color: var(--pin-mute) !important;
}
.site-footer a { color: var(--pin-mute); font-weight: 400; }
.site-footer a:hover { color: var(--pin-ink); }

/* Hero — soft cream background, large display-xl headline */
.hero {
  /* background: var(--pin-surface-soft); */
}
.hero h1 {
  font-size: clamp(36px, 6vw, 50px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.1;
  /* color: var(--pin-ink); */
}

/* Language switcher — pill toggle */
.lang-switcher__toggle {
  border-radius: var(--pin-radius-full) !important;
  background: var(--pin-surface-card);
  color: var(--pin-ink);
  font-weight: 700;
}
.lang-switcher__menu {
  border-radius: var(--pin-radius-md);
  background: var(--pin-canvas);
  border: 1px solid var(--pin-hairline);
}

/* Tables — clean hairline rows */
table { border-collapse: collapse; }
th, td {
  border-bottom: 1px solid var(--pin-hairline);
  padding: 12px 14px;
  text-align: left;
}
th {
  background: var(--pin-surface-card);
  font-weight: 700;
  color: var(--pin-ink);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}