/* V28: vehicle booking uses the exact same mobile card geometry as the homepage. */
@media (max-width: 47.99rem) {
  :root {
    --mobile-edge: clamp(.75rem, 4vw, 1rem);
    --mobile-control-height: 2.875rem;
  }

  html {
    scroll-padding-top: calc(var(--header-height) + .75rem);
  }

  body {
    min-width: 0;
    padding-bottom: 0;
  }

  .container {
    width: calc(100% - (2 * var(--mobile-edge)));
  }

  .site-header {
    height: 4.25rem;
  }

  .site-header__inner {
  }

  .brand {
    gap: .6rem;
  }

  .brand__mark {
    width: 2.5rem;
    height: 2.5rem;
    flex-basis: 2.5rem;
  }

  .brand__name {
    max-width: min(58vw, 13rem);
    font-size: .78rem;
  }

  .public-menu-button {
    width: 3rem;
    height: 3rem;
    display: grid !important;
    flex: 0 0 3rem;
  }

  .rental-hero__content {
    min-height: 18rem;
    padding-block: 2rem;
  }

  .rental-hero__copy h1 {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }

  .booking-section {
    padding: .85rem 0 1.25rem !important;
  }

  .booking-card {
    width: 100%;
    overflow: hidden;
    border-top-width: 3px !important;
    box-shadow: 0 6px 16px rgba(23, 36, 44, .08) !important;
  }

  .booking-card__header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: .75rem !important;
    padding: .9rem !important;
    background: #edf1f3 !important;
  }

  .booking-card__header .eyebrow {
    font-size: .56rem !important;
  }

  .booking-card__header h2 {
    margin-top: .2rem !important;
    font-size: 1.18rem !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
  }

  .booking-card__days {
    align-self: start !important;
    margin-top: .15rem !important;
    white-space: nowrap !important;
    color: var(--color-accent) !important;
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
  }

  .booking-card__form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .booking-card__form > .form-field,
  .booking-card__form > .form-field:nth-of-type(n) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: .72rem .85rem !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: #fff !important;
  }

  .booking-card__form .form-field label {
    margin: 0 !important;
    font-size: .56rem !important;
    line-height: 1.2 !important;
  }

  .booking-card__form input,
  .booking-card__form select {
    display: block !important;
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    block-size: var(--mobile-control-height) !important;
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    margin: 0 !important;
    padding: 0 .75rem !important;
    border: 1px solid #aeb8be !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    color: var(--color-text) !important;
    font-size: 16px !important;
    line-height: normal !important;
    text-align: center !important;
    text-align-last: center !important;
    overflow: hidden !important;
  }

  .booking-card__form input[type="date"],
  .booking-card__form input[type="time"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-min-logical-width: 0 !important;
    min-block-size: var(--mobile-control-height) !important;
  }

  .booking-card__form input[type="date"]::-webkit-date-and-time-value,
  .booking-card__form input[type="time"]::-webkit-date-and-time-value {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .booking-card__form input[type="date"]::-webkit-datetime-edit,
  .booking-card__form input[type="time"]::-webkit-datetime-edit {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .booking-card__form select {
    text-align: center !important;
    text-align-last: center !important;
  }


  .booking-card__submit {
    grid-column: 1 !important;
    width: auto !important;
    min-height: 3rem !important;
    margin: .75rem .85rem .85rem !important;
    padding: .7rem .8rem !important;
    font-size: .68rem !important;
  }

  /* Home and vehicle booking controls share one mobile geometry. */
  .booking-card__form .form-field,
  .availability-form .form-field {
    min-height: 5.55rem !important;
  }

  .booking-card__form input,
  .booking-card__form select,
  .availability-form input,
  .availability-form select {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-variant-numeric: tabular-nums !important;
  }

  .booking-card__form select,
  .availability-form select {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .brand-section {
    padding-block: 2rem !important;
  }

  .brand-section .section-title-row {
    margin-bottom: .55rem !important;
  }

  .brand-section .section-title-row h2 {
    font-size: clamp(1.8rem, 10vw, 2.5rem) !important;
  }

  .brand-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .15rem 1.25rem !important;
    padding: 0 !important;
  }

  .brand-link {
    min-height: 2.75rem !important;
    padding: .25rem 0 !important;
    font-size: 1rem !important;
  }

  .mobile-cta-bar {
    display: none !important;
  }

  .site-footer {
    display: block !important;
  }

  .help-banner {
    padding-bottom: 0 !important;
  }

  .availability-card__header {
    align-items: flex-start;
  }

  .availability-card {
    width: 100%;
    overflow: hidden;
  }

  .availability-card__header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: .75rem !important;
    padding: .9rem !important;
  }

  .availability-card__header h2 {
    margin-top: .2rem !important;
    font-size: 1.18rem !important;
    line-height: 1.1 !important;
  }

  .availability-card__days {
    align-self: start;
    margin-top: .15rem;
    font-size: 1rem;
    color: var(--color-accent);
    white-space: nowrap;
  }

  .availability-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .availability-form > .form-field,
  .availability-form__submit {
    grid-column: 1 !important;
  }

  .availability-form > .form-field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: .72rem .85rem !important;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    background: #fff;
  }

  .availability-form .form-field label {
    display: block;
    margin: 0 0 .4rem !important;
    font-size: .56rem !important;
    line-height: 1.2 !important;
  }

  .availability-form input,
  .availability-form select {
    display: block !important;
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    block-size: var(--mobile-control-height) !important;
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    margin: 0 !important;
    padding: 0 .75rem !important;
    border: 1px solid #aeb8be !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    color: var(--color-text) !important;
    font-size: 16px !important;
    line-height: normal !important;
    text-align: center !important;
    text-align-last: center !important;
    overflow: hidden !important;
  }

  .availability-form input[type="date"],
  .availability-form input[type="time"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-min-logical-width: 0 !important;
    min-block-size: var(--mobile-control-height) !important;
  }

  .availability-form input[type="date"]::-webkit-date-and-time-value,
  .availability-form input[type="time"]::-webkit-date-and-time-value {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .availability-form input[type="date"]::-webkit-datetime-edit,
  .availability-form input[type="time"]::-webkit-datetime-edit {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .availability-form select {
    text-align: center !important;
    text-align-last: center !important;
  }

  .availability-form__submit {
    width: auto !important;
    min-height: 3rem !important;
    margin: .75rem .85rem .85rem !important;
    padding: .7rem .8rem !important;
    font-size: .68rem !important;
  }

  .availability-card > .status-message {
    margin: 0 !important;
    padding: .7rem .85rem .85rem !important;
    text-align: center;
    line-height: 1.45;
  }

  .dialog__panel,
  .reservation-dialog__panel {
    max-height: 92svh;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* V28 exact homepage booking component on /vozidla/. */
@media (max-width: 47.99rem) {
  body[data-page="vehicles"] .vehicles-hero {
    display: none !important;
  }

  body[data-page="vehicles"] .vehicles-booking-section {
    padding: .85rem 0 1.25rem !important;
    background: #eef2f4 !important;
    border-bottom: 1px solid #c8d0d5 !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card {
    width: 100% !important;
    overflow: hidden !important;
    border: 1px solid #9eaab1 !important;
    border-top: 3px solid var(--color-accent) !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(23,36,44,.08) !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card .booking-card__header {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: start !important;
    gap: .75rem !important;
    padding: .9rem !important;
    background: #edf1f3 !important;
    border-bottom: 1px solid var(--color-border) !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card .booking-card__form {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card .booking-card__form > .form-field {
    grid-column: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 5.55rem !important;
    padding: .72rem .85rem !important;
    overflow: hidden !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: #fff !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card .form-field label {
    display: block !important;
    margin: 0 0 .4rem !important;
    font-size: .56rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card input,
  body[data-page="vehicles"] .vehicles-booking-card select {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    block-size: var(--mobile-control-height) !important;
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    margin: 0 !important;
    padding: 0 .75rem !important;
    border: 1px solid #aeb8be !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--color-text) !important;
    font-size: 16px !important;
    line-height: normal !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card input[type="date"],
  body[data-page="vehicles"] .vehicles-booking-card input[type="time"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-min-logical-width: 0 !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card input[type="date"]::-webkit-date-and-time-value,
  body[data-page="vehicles"] .vehicles-booking-card input[type="time"]::-webkit-date-and-time-value {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card input[type="date"]::-webkit-datetime-edit,
  body[data-page="vehicles"] .vehicles-booking-card input[type="time"]::-webkit-datetime-edit {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  body[data-page="vehicles"] .vehicles-brand-field {
    display: none !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card .booking-card__submit {
    grid-column: 1 !important;
    width: auto !important;
    min-height: 3rem !important;
    margin: .75rem .85rem .85rem !important;
    padding: .7rem .8rem !important;
    font-size: .68rem !important;
  }

  body[data-page="vehicles"] .vehicles-booking-card > .status-message {
    margin: 0 !important;
    padding: .7rem .85rem .85rem !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }
}

@media (min-width: 48rem) {
  body[data-page="vehicles"] .vehicles-booking-card .booking-card__form {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  body[data-page="vehicles"] .vehicles-booking-card .booking-card__submit {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  body[data-page="vehicles"] .vehicles-booking-card .booking-card__form {
    grid-template-columns: 1fr 1fr .85fr 1fr 1fr auto;
  }
  body[data-page="vehicles"] .vehicles-booking-card .booking-card__submit {
    grid-column: auto;
    align-self: stretch;
  }
}