/* --- DriveAruba theme additions for October CMS (loaded after styles.css) --- */

/* Hero: the main title text was removed; pull the yellow accent line up to that
   position by dropping its 6px top margin. The bottom spacing (h1 margin-bottom)
   is left untouched, so the gap to the paragraph below stays exactly as before. */
.hero-accent { margin-top: 0; }

/* Terms & Conditions acceptance checkbox */
.terms-consent { display: flex; align-items: flex-start; gap: .6rem; margin: .25rem 0 .75rem; font-size: .85rem; line-height: 1.45; cursor: pointer; }
.terms-consent input[type="checkbox"] { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: #0a7d8c; cursor: pointer; }
.terms-consent a { text-decoration: underline; }
.terms-consent-error { color: #c0392b; font-size: .8rem; margin: -.4rem 0 .6rem; }

/* Contact page: on-page email response form */
.contact-form { margin-top: 28px; display: grid; gap: 12px; max-width: 460px; }
.contact-info-grid .contact-form { margin-top: 5mm; margin-bottom: 5mm; max-width: none; }
.contact-form h2 { font-size: 24px; margin-bottom: 2px; }
.contact-form-intro { color: #55636b; font-size: .9rem; margin: 0 0 4px; }
.contact-form label { display: grid; gap: 4px; font-weight: 600; font-size: .82rem; }
.contact-form input, .contact-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #cdd5da; border-radius: 8px; background: #fff; width: 100%; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid #0a7d8c; outline-offset: 1px; border-color: #0a7d8c; }
.contact-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form button { justify-self: start; margin-top: 4px; }
.contact-form-status { margin-top: 6px; font-size: .9rem; }
.contact-form-status.is-success { color: #0a7d3d; }
.contact-form-status.is-error { color: #c0392b; }
.phone-hours { font-size: .8rem; font-weight: 400; color: #55636b; text-transform: none; letter-spacing: 0; margin-left: 8px; white-space: nowrap; }
/* Responsive form placement: left column on desktop, inside the card on narrow screens */
.contact-form-mobile { display: none; }
@media (max-width: 980px) { .contact-form-desktop { display: none; } .contact-form-mobile { display: grid; } }
/* Centre the 'Smart Rentals' line under the brand name (not the tagline) */
.brand-name-group { display: block; width: fit-content; }
.brand small:not(.brand-tagline) { text-align: center; }
/* Real-time availability pill states */
.availability-pill.availability-available { background: #e6f5ec; color: #0a7d3d; }
.availability-pill.availability-limited { background: #fdf1de; color: #b5641a; }
.availability-pill.availability-last { background: #fdeaea; color: #c0392b; }
.availability-pill.availability-unavailable { background: #eef1f1; color: #6b7777; }

/* =====================================================================
   Booking progress — a clearer horizontal timeline
   (overrides the plain step buttons in styles.css, which stays locked)
   ===================================================================== */
.booking-timeline {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 0;
  max-width: 680px;
  margin: 24px 0;
}
.booking-timeline li {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-height: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
/* connector line running behind the dots */
.booking-timeline li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--line);
  z-index: 0;
}
.booking-timeline li:first-child::before { display: none; }
/* neutralise the .booking-steps span button styling from styles.css */
.booking-timeline span {
  display: inline-grid;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.booking-timeline .bs-dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  place-items: center;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.booking-timeline .bs-label {
  color: var(--muted);
  font-weight: 700;
}
/* completed + current states fill the dot and the line up to it */
.booking-timeline li.is-done .bs-dot,
.booking-timeline li.is-active .bs-dot {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.booking-timeline li.is-done::before,
.booking-timeline li.is-active::before {
  background: var(--teal);
}
.booking-timeline li.is-done .bs-label {
  color: var(--ink, #16323a);
}
.booking-timeline li.is-active .bs-label {
  color: #fff;
}
@media (max-width: 640px) {
  .booking-timeline { grid-template-columns: none; }
  .booking-timeline .bs-label { font-size: 12px; }
}

/* Contact form anti-spam field */
.contact-captcha .captcha-q { font-weight: 700; }
.contact-captcha input[type="number"] { max-width: 120px; }

/* Keuzeverplichting bij de twee verzekeringsopties (05-08-2026).
   Alleen op de boekingsstrook; `[hidden]` wint van `display` doordat de regel
   erna staat, anders blijft de zin staan zodra JavaScript hem verbergt. */
.insurance-choice-hint {
    margin: 6px 0 14px;
    padding: 8px 12px;
    border-left: 3px solid #b5641a;
    background: #fdf6ee;
    color: #6b4a20;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 4px;
}
.insurance-choice-hint[hidden] { display: none; }