/* BEST CAR RENT — общие стили темы (site/public/css/site.css) */

/* The native `hidden` attribute loses to any Tailwind display utility
   (flex, grid, contents…) on the same element: both have equal CSS
   specificity ([hidden] and .flex are each a single simple selector),
   and Tailwind's Play CDN stylesheet is injected after the browser's own
   [hidden]{display:none} UA rule, so the later rule wins the cascade and
   the element stays visible despite `el.hidden = true`. Bit the catalog
   date/class filters (cards use `.flex`) and the date-search hint before
   landing this one global fix instead of workarounds per element. */
[hidden] {
  display: none !important;
}

html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}

/* Metallic gold gradient block (teaser cards) */
.gold-gradient-bg {
  background: linear-gradient(135deg, #CFAB59 0%, #BA9140 50%, #9E7930 100%);
}

/* Soft ambient glow behind hero content */
.editorial-hero-glow {
  background: radial-gradient(circle at 65% 50%, rgba(201, 162, 79, 0.08) 0%, transparent 60%);
}

/* Car photo: muted colour by default, full colour + slight zoom on hover.
   !important because the Tailwind Play CDN injects its own utility filter
   classes (brightness-95, contrast-105, etc.) on the same <img> tags, and
   its stylesheet can land after this one in the cascade — without this,
   those utilities silently win and the effect never shows. */
img.car-card-img {
  filter: grayscale(70%) saturate(0.5) brightness(0.92) !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease !important;
}
.car-card:hover img.car-card-img,
.car-tile:hover img.car-card-img {
  transform: scale(1.035);
  filter: grayscale(0%) saturate(1) brightness(1.03) !important;
}

/* Native date/time inputs on a DARK background (hero search bar): dark
   color-scheme so the calendar-picker icon and popup match our theme
   (Chrome/Edge; Safari/Firefox fall back to their own picker, text stays
   readable either way). Inputs on light cards (booking panel) keep the
   browser default (light) so the icon stays visible on white. */
.date-field-dark input[type="date"],
.date-field-dark input[type="time"],
.date-field-dark input[type="datetime-local"] {
  color-scheme: dark;
}

/* Contact row — icon + label + value, reused in the footer contacts block */
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-row .contact-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 79, 0.12);
  color: #C9A24F;
  font-size: 15px;
}
.contact-row .contact-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A8884;
  margin-bottom: 2px;
}
.contact-row .contact-value {
  font-size: 14px;
  font-weight: 600;
  color: #F7F5F0;
}

/* Gallery active thumbnail (car detail page) */
.gallery-active {
  border-color: #C9A24F !important;
  outline: 2px solid #C9A24F;
  opacity: 1 !important;
}

/* Booking modal open/close transition (shared id: #bookingModal) */
#bookingModal {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#bookingModal.modal-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#bookingModal.modal-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Toast notification (shared id: #toastNotification) */
#toastNotification {
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  opacity: 0;
}
#toastNotification.toast-active {
  transform: translateY(0);
  opacity: 1;
}

/* Mobile menu slide-down */
#mobileMenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#mobileMenu.menu-open {
  max-height: 480px;
}

/* Real booking form (cars-booking, car detail page) — plain inputs styled
   to match the dark/gold theme, since these come straight from the cars
   module's own field names, not hand-authored markup. */
.cars-booking-form {
  display: grid;
  gap: 12px;
}
.cars-booking-form label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A8A6A0;
  margin-bottom: 4px;
}
.cars-booking-form input,
.cars-booking-form textarea {
  width: 100%;
  background: #1C1C1C;
  border: 1px solid #33312B;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  color: #fff;
}
.cars-booking-form input:focus,
.cars-booking-form textarea:focus {
  border-color: #C9A24F;
  outline: none;
}
.cars-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
.cars-booking-submit {
  width: 100%;
  padding: 13px;
  margin-top: 4px;
  background: #C9A24F;
  color: #131313;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.cars-booking-submit:hover {
  background: #DCB560;
}
#cars-booking-result {
  margin-top: 10px;
  font-size: 12px;
  color: #D8D6D0;
}

/* Flatpickr calendar (booking form dates) — brand accent on top of the
   library's own dark.min.css theme, which already matches our palette
   closely enough that only the selection/hover colors need overriding. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #C9A24F;
  border-color: #C9A24F;
  color: #131313;
}
.flatpickr-day:hover {
  background: rgba(201, 162, 79, 0.25);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(255, 255, 255, 0.2);
  text-decoration: line-through;
}
.flatpickr-months .flatpickr-month,
span.flatpickr-weekday {
  color: #C9A24F;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent;
}

/* Client-side catalog filters (cars/index.html list view) */
.cars-filter-select {
  background: #1B1B1B;
  border: 1px solid #2F2C26;
  color: #D8D6D0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
}