/* KRAVE CAR responsive polish — phase 4
   Loaded after the existing brand and layout styles to resolve tablet
   compression and improve keyboard/touch accessibility without changing
   the established desktop visual identity. */

/* Avoid flex/grid children forcing horizontal page overflow. */
.booking-layout,
.booking-main,
.booking-aside,
.booking-form,
.contact-card,
.car-card,
.car-info,
.car-specs {
  min-width: 0;
}

/* Visible keyboard focus, including controls that previously relied only on
   subtle browser defaults. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(190, 145, 69, .72);
  outline-offset: 3px;
}

/* Tablet: give the booking form the full available width rather than
   squeezing it beside a narrow sticky contact panel. */
@media (max-width: 820px) {
  .booking-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch;
    gap: 18px;
  }

  .booking-aside {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .booking-aside .aside-note {
    margin-top: 0;
  }

  .booking-form {
    padding: clamp(20px, 3vw, 30px);
  }
}

/* Small screens: keep all booking controls comfortably tappable and prevent
   long customer-entered values from stretching the viewport. */
@media (max-width: 680px) {
  .booking-layout {
    gap: 14px;
  }

  .booking-aside {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .booking-form,
  .booking-aside .aside-card,
  .booking-aside .aside-note {
    width: 100%;
    padding: 18px;
  }

  .booking-form h2 {
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .booking-form .field input,
  .booking-form .field select,
  .booking-form .field textarea {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  .booking-return-notice {
    gap: 9px;
    padding: 12px;
    overflow-wrap: anywhere;
  }

  .booking-return-notice small,
  .form-note,
  .aside-card p,
  .aside-note p {
    overflow-wrap: anywhere;
  }

  .booking-form .btn-submit,
  .booking-aside .btn-block {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}