/*
 * Adanacar v4 — VIP rental booking (rental tab of the booking card, kiralama/* steps, tahsis voucher).
 * Builds on rezervasyon.css (same components: .ac-band, .ac-flow, .ac-sum, .ac-veh, .ac-voucher);
 * only the rental differences live here. Tokens: temel.css. Components in @layer custom.
 *  - Şoförlü tab of the booking card (service point + three date / time fields): .ac-kr-when, .ac-kr-nokta
 *  - live day count under the card's dates: .ac-kr-sure
 *  - "how it works" strip on GET kiralama: .ac-kr-nasil
 *  - vehicle cards with real photos (cover, 3:2), photo count, class / area label, detail link
 *  - summary: pricing rule, "Teklif" amount; voucher: vehicle block .ac-kr-arac
 */
@layer custom {
  /* ---------------------------------------------------------- booking card: Şoförlü tab
     service point + İlk gün / Son gün / Başlangıç saati: two columns on phones (the time takes a full
     row), three side by side from 38rem; the day count sits under them. */
  .ac-bk .ac-kr-when { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-bk .ac-kr-when > :last-child { grid-column: 1 / -1; }
  .ac-bk .ac-kr-nokta { margin-bottom: var(--ac-space-3); min-inline-size: 0; }
  @container booking (width >= 38rem) {
    .ac-bk .ac-kr-when { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr); }
    .ac-bk .ac-kr-when > :last-child { grid-column: auto; }
  }
  @container booking (width >= 62rem) {
    .ac-bk .ac-kr-nokta { margin-bottom: 0; }
  }
  .ac-kr-sure {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin: var(--ac-space-3) 0 0;
    padding: 0.6rem 0.85rem; border: 1px solid var(--ac-gold-hairline); border-radius: var(--ac-radius);
    background: var(--ac-gold-soft); color: var(--ac-ink); font-size: 0.875rem;
  }
  .ac-kr-sure[hidden] { display: none; }
  .ac-kr-sure .bi { color: var(--ac-gold-text); }
  .ac-kr-sure b { font-weight: 800; font-variant-numeric: tabular-nums; }
  .ac-kr-sure span { color: var(--ac-ink-2); font-variant-numeric: tabular-nums; }
  .ac-kr-sure small { flex-basis: 100%; color: var(--ac-ink-2); font-size: 0.8125rem; }
  .ac-kr-sure.is-hata { border-color: var(--ac-red); background: var(--ac-red-soft); }
  .ac-kr-sure.is-hata .bi { color: var(--ac-red-strong); }

  /* ---------------------------------------------------------- GET kiralama: how it works */
  .ac-kr-nasil {
    display: grid; gap: var(--ac-space-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin: var(--ac-space-6) 0 0; padding: 0; list-style: none; counter-reset: kr;
  }
  .ac-kr-nasil li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.75rem; align-items: start;
    padding: var(--ac-space-4); border: 1px solid var(--ac-line); border-radius: var(--ac-radius-lg); background: var(--ac-surface-3);
  }
  .ac-kr-nasil .bi {
    grid-row: span 2; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem;
    border-radius: 50%; background: var(--ac-gold-soft); color: var(--ac-gold-text); font-size: 1.15rem;
  }
  .ac-kr-nasil span { color: var(--ac-muted); font-size: 0.8125rem; }

  /* ---------------------------------------------------------- vehicle step */
  .ac-kr-stage { position: relative; overflow: hidden; }
  .ac-kr-vehs .ac-veh__stage img { padding: 0; block-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .ac-kr-foto {
    position: absolute; inset-block-end: 0.5rem; inset-inline-end: 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.5rem; border-radius: 999px; background: rgb(17 17 20 / 0.72); color: #fff; font-size: 0.6875rem; font-weight: 650;
  }
  .ac-kr-etiket {
    margin: 0; color: var(--ac-gold-text); font-size: 0.6875rem; font-weight: 760;
    letter-spacing: var(--ac-tracking-caps); text-transform: uppercase;
  }
  .ac-kr-detay {
    justify-self: start; display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--ac-ink-2); font-size: 0.8125rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px;
  }
  .ac-kr-detay:hover { color: var(--ac-red); }
  .ac-kr-detay .bi { font-size: 0.75rem; }

  /* ---------------------------------------------------------- summary */
  .ac-sum--kiralama .ac-sum__veh img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ac-radius-sm); }
  .ac-kr-kural { padding: 0.5rem 0.65rem; border-radius: var(--ac-radius); background: var(--ac-surface-2); font-size: 0.75rem; }
  .ac-kr-teklif, .ac-sum__total.is-teklif b { color: var(--ac-gold-text); }

  /* ---------------------------------------------------------- vehicle step: itinerary note (driver2) */
  .ac-kr-not {
    display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 var(--ac-space-4); padding: 0.75rem 1rem;
    border-inline-start: 3px solid var(--ac-gold); border-radius: var(--ac-radius); background: var(--ac-surface-2); font-size: 0.875rem; color: var(--ac-ink-2);
  }
  .ac-kr-not .bi { color: var(--ac-gold-text); margin-top: 0.15rem; }
  .ac-kr-not b { color: var(--ac-ink); }

  /* ---------------------------------------------------------- voucher: vehicle */
  .ac-kr-arac {
    display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); align-items: center; gap: var(--ac-space-3);
    margin-block: var(--ac-space-3); padding: var(--ac-space-3); border-radius: var(--ac-radius); background: var(--ac-surface-2);
  }
  .ac-kr-arac img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ac-radius-sm); }
  .ac-kr-arac > div { display: grid; gap: 0.15rem; }
  .ac-kr-arac small { color: var(--ac-gold-text); font-size: 0.6875rem; font-weight: 760; letter-spacing: var(--ac-tracking-caps); text-transform: uppercase; }
  .ac-kr-arac b { font-size: 1.0625rem; font-weight: 800; }
  .ac-kr-arac span { color: var(--ac-muted); font-size: 0.8125rem; }
  .ac-kr-arac a { justify-self: start; color: var(--ac-ink-2); font-size: 0.8125rem; font-weight: 650; }
  .ac-kr-voucher .ac-voucher__pt small { font-variant-numeric: tabular-nums; }

  @media (max-width: 575.98px) {
    .ac-kr-arac { grid-template-columns: 1fr; }
    .ac-kr-arac img { max-inline-size: 16rem; }
  }
}

@media print {
  .ac-kr-voucher .ac-acts, .ac-kr-voucher .ac-flow__links, .ac-kr-voucher .ac-voucher-more { display: none !important; }
  .ac-kr-arac { break-inside: avoid; }
}