/* Hamos Parcare — panouri de rezervare: dropdown iconițe, flatpickr, buton CTA. */

/* ---------- Dropdown cu iconițe (tip vehicul) ---------- */
.icon-select.js-enhanced > i,
.icon-select.js-enhanced > select {
  display: none;
}

/* ---------- Listă derulantă pentru ore (30 în 30 min, 24h) ---------- */
.time-select.js-enhanced > i {
  display: none;
}

.time-select-btn {
  display: none;
  width: 100%;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--default-color) 20%, transparent);
  border-radius: 6px;
  background: var(--background-color);
  font-size: 14px;
  color: var(--default-color);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.time-select.js-enhanced .time-select-btn {
  display: flex;
}

.time-select-btn:hover,
.time-select.open .time-select-btn {
  border-color: var(--accent-color);
}

.time-select-btn i {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  color: var(--accent-color);
  font-size: 16px;
  flex-shrink: 0;
}

.time-select-btn .select-placeholder {
  color: color-mix(in srgb, var(--default-color) 50%, transparent);
}

.time-select-list {
  display: none;
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 15%, transparent);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  padding: 8px;
  max-height: 264px;
  overflow-y: auto;
  grid-template-columns: 1fr;
  gap: 2px;
}

.time-select.open .time-select-list {
  display: grid;
}

.time-select-item {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  text-align: left;
  color: var(--default-color);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.time-select-item:hover {
  background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.time-select-item.active {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 600;
}

.icon-select-btn {
  display: none;
  width: 100%;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 8px 24px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--default-color) 20%, transparent);
  border-radius: 6px;
  background: var(--background-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b8834c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px;
  color: var(--default-color);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-select-btn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon-select.js-enhanced .icon-select-btn {
  display: flex;
}

.icon-select-btn:hover,
.icon-select.open .icon-select-btn {
  border-color: var(--accent-color);
}

.icon-select-btn .select-placeholder {
  color: color-mix(in srgb, var(--default-color) 50%, transparent);
}

.icon-select-btn i {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  color: var(--accent-color);
  font-size: 16px;
  flex-shrink: 0;
}

.icon-select-list {
  display: none;
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 15%, transparent);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.icon-select.open .icon-select-list {
  display: block;
}

.icon-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--default-color);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.icon-select-item i {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  font-size: 17px;
  color: var(--accent-color);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.icon-select-item:hover {
  background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.icon-select-item.active {
  background-color: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--heading-color);
  font-weight: 600;
}

/* ---------- flatpickr: aliniere cu stilul câmpurilor + branding ---------- */
.flatpickr-calendar {
  font-family: var(--default-font);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  border: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  display: none;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--heading-color);
}

.flatpickr-weekdays {
  background: transparent;
}

span.flatpickr-weekday {
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
  font-weight: 600;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.flatpickr-day:hover {
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
}

.flatpickr-day.today {
  border-color: var(--accent-color);
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--accent-color);
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--accent-color);
}

/* ---------- Buton principal + CTA telefonic ---------- */
.hero .booking-form .booking-submit {
  margin-top: 16px;
  height: 50px;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 78%, #1d1305));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent-color) 38%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.hero .booking-form .booking-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--accent-color) 48%, transparent);
  filter: brightness(1.05);
}

.hero .booking-form .booking-submit:active {
  transform: translateY(0);
}

/* Un singur rând logic: label + telefon 1 + separator "/" + telefon 2. flex-wrap
   lasă grupul de numere să treacă pe rândul următor dacă nu încape (mobil), fără să
   repete "Rezervă Telefonic:" de două ori ca înainte. Icon+label sunt grupate într-un
   <span> (booking-call-label), iar cele două numere+separator în alt <span>
   (booking-call-numbers) — fiecare grup e UN SINGUR flex item, ca la wrap să nu se
   destrame în bucăți individuale (icon-ul sau un singur număr rămânând izolate),
   ci fiecare grup să treacă întreg pe rândul lui. */
.hero .booking-call-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 6px;
  row-gap: 2px;
  margin-top: 14px;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
}

.hero .booking-call-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.hero .booking-call-numbers {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.hero .booking-call-label i {
  color: var(--accent-color);
}

.hero .booking-call {
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
  text-decoration: none;
}

.hero .booking-call strong {
  color: var(--accent-color);
}

.hero .booking-call:hover strong {
  text-decoration: underline;
}

.hero .booking-call-sep {
  color: color-mix(in srgb, var(--default-color) 40%, transparent);
}

/* ---------- Estimare preț live în panourile de rezervare ---------- */
.price-preview {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 14px 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
  font-size: 14px;
}

.price-preview.is-visible {
  display: flex;
}

.price-preview-loading {
  color: color-mix(in srgb, var(--default-color) 60%, transparent);
}

.price-preview-error {
  color: #b3261e;
}

.price-preview-label {
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
}

.price-preview-total {
  font-weight: 700;
  font-size: 18px;
  color: var(--accent-color);
}

.price-preview-season {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--default-color) 60%, transparent);
  background: color-mix(in srgb, var(--default-color) 8%, transparent);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ============================================================
   Refinări mobil v2 (audit v2 — items 11, 12, 13)
   ============================================================ */
@media (max-width: 768px) {
  /* Item 13: butoanele custom aliniate la înălțimea inputurilor de dată (46px) */
  .time-select-btn,
  .icon-select-btn { height: 46px; }

  /* Item 13: checkbox cu zonă tactilă ≥44px, label clickabil pe toată lățimea */
  .form-check { display: flex; align-items: center; min-height: 44px; padding-left: 0; }
  .form-check .form-check-input { width: 1.4rem; height: 1.4rem; margin: 0 .6rem 0 0; flex-shrink: 0; float: none; }
  .form-check .form-check-label { flex: 1; padding: 10px 0; line-height: 1.35; }

  /* Item 12: ridică textul mic (<12px) la ≥12px pe elementele semnalate */
  .eyebrow-badge, .hero-badge, .alert-eyebrow, .meta-label,
  .badge-pill, .badge-pill.subtle, .meta-tag { font-size: 12px !important; }
  .footer-contact p, .footer-contact a { font-size: 13.5px; }
  .compact-text p { font-size: 13px; }

  /* Item 11: spațiu sub containerele acoperite de FAB (tabel tarife, hartă) */
  .xnk-tablewrap { margin-bottom: 84px; }
  .ratio-4x3 { margin-bottom: 84px; }
}