/* Shared phone sizing, loaded after customer page styles and shared layouts. */
@media (max-width: 767px), (max-width: 991px) and (max-height: 450px) {
  body.customer-ui {
    --customer-heading: clamp(26px, 7vw, 30px);
    --customer-subheading: 22px;
    --customer-copy: 13px;
    --customer-small: 12px;
    --customer-card-padding: 16px;
    --customer-field-font: 13px;
    --customer-field-height: 40px;
    --customer-button-font: 11px;
    --customer-button-height: 36px;
    font-size: var(--customer-copy);
    line-height: 1.6;
  }

  /* Keep the smaller login headings and SweetAlert dialogs independent. */
  body.customer-ui :is(main, section, .page-heading):not(.auth-form-panel) h1 {
    font-size: var(--customer-heading);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  body.customer-ui :is(main, section):not(.auth-form-panel) h2 {
    font-size: var(--customer-subheading);
    line-height: 1.25;
  }
  body.customer-ui :is(main, section):not(.auth-form-panel) h3,
  body.customer-ui .van-card-heading h3 a,
  body.customer-ui .search-result-content h3 a {
    font-size: 18px;
    line-height: 1.3;
  }
  body.customer-ui :is(.hero_booking-card, .vehicle-booking-widget .widget_heading,
    .profile-section-heading, .payment-card-heading) :is(h2, h3, h5) {
    font-size: 18px;
    line-height: 1.3;
  }
  body.customer-ui :is(.privacy-section-heading, .terms-section-heading,
    .privacy-section-copy, .terms-section-copy) :is(h1, h2, h3, h4, h5, h6) {
    font-size: 15px;
    line-height: 21px;
  }
  body.customer-ui :is(.profile-header-copy, .search-hero-copy > p,
    .search-results-overview p, .search-list-heading > p, .payment-hero-copy > p,
    .success-hero-copy > p, .privacy-hero-copy > p, .terms-hero-copy > p,
    .privacy-policy-card p, .privacy-policy-card li, .terms-policy-card p, .terms-policy-card li,
    .privacy-sidebar > p, .terms-sidebar > p, .terms-cta-panel p,
    .customer-notifications-page-heading p, .section-padding > p, .failed-box p,
    .sorting-count p) {
    font-size: 13px;
    line-height: 1.6;
  }
  body.customer-ui.homepage .homepage-hero .banner_content > p:not(.banner_kicker) {
    font-size: 13px;
    line-height: 1.6;
  }
  body.customer-ui :is(.hero_booking-card > p, .profile-form-card-heading p,
    .profile-section-heading p, .vehicle-booking-intro, .payment-form-heading > p,
    .profile-contact-note, .payment-field-note) {
    font-size: 12px;
    line-height: 1.5;
  }
  body.customer-ui :is(.footer-top li, .footer-top a, .footer-bottom p) {
    font-size: 12px;
    line-height: 1.6;
  }

  /* Page-specific mobile rules previously forced some fields back to 16px.
     This is the shared text size for editable customer controls. */
  body.customer-ui :is(input, select, textarea):not([type="hidden"],
    [type="checkbox"], [type="radio"], [type="file"], [type="range"],
    [type="submit"], [type="button"], [type="reset"]) {
    font-size: var(--customer-field-font) !important;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
  body.customer-ui :is(.form-control, .van-filter-control, .search-filter-control,
    .booking-cancel-select, .booking-refund-input),
  body.customer-ui :is(.profile-input, .vehicle-booking-form) .form-control,
  body.customer-ui.listing-page-modern .van-filter-control,
  body.customer-ui.listing-page-modern .van-price-fields .van-filter-control,
  body.customer-ui.vehicle-detail-modern .vehicle-booking-form .form-control,
  body.customer-ui .payment-input-wrap input,
  body.customer-ui .profile-verification-modal .profile-verification-code-form input,
  body.customer-ui #forgotpassword .form-control {
    height: var(--customer-field-height);
    min-height: var(--customer-field-height);
    line-height: 20px;
    padding: 8px 10px;
  }
  body.customer-ui :is(.profile-input, .vehicle-booking-form) textarea.form-control,
  body.customer-ui.vehicle-detail-modern .vehicle-booking-form textarea.form-control,
  body.customer-ui textarea.form-control,
  body.customer-ui .payment-input-wrap textarea,
  body.customer-ui .booking-cancel-details {
    height: 80px;
    min-height: 80px;
    line-height: 20px;
    padding: 8px 10px;
    resize: vertical;
  }
  body.customer-ui select[multiple] {
    height: auto;
    min-height: 80px;
  }
  body.customer-ui :is(select.form-control, select.van-filter-control,
    select.search-filter-control, .booking-cancel-select),
  body.customer-ui.vehicle-detail-modern .vehicle-booking-form select.form-control {
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    padding-right: 30px;
  }

  /* Borderless controls sit inside the 40px search and contact outlines. */
  body.customer-ui.customer-responsive :is(.hero_search_input, .faq-search-wrap, .contact-input-wrap) {
    min-height: var(--customer-field-height);
    padding-left: 10px;
    padding-right: 10px;
  }
  body.customer-ui :is(.hero_search_input, .faq-search-wrap, .contact-input-wrap) input {
    height: 38px;
    min-height: 0;
    line-height: 20px;
    padding: 0;
  }
  body.customer-ui :is(.hero_search_input, .faq-search-wrap, .contact-input-wrap) > .fa {
    font-size: 12px;
    margin-right: 8px;
  }
  body.customer-ui .contact-input-wrap textarea {
    height: 80px;
    min-height: 80px;
    line-height: 20px;
    padding: 8px 0;
  }
  body.customer-ui .contact-message-wrap > .fa {
    margin-top: 12px;
  }
  body.customer-ui .search-primary-input {
    min-height: var(--customer-field-height);
    padding: 6px;
  }
  body.customer-ui .search-primary-input input {
    height: 38px;
    min-height: 0;
    padding: 6px 8px;
  }
  body.customer-ui .search-price-input {
    height: var(--customer-field-height);
    min-height: var(--customer-field-height);
  }
  body.customer-ui .search-price-input .search-filter-control {
    height: 38px;
    min-height: 0;
  }

  /* Preserve room for profile icons, verification controls, and calendars. */
  body.customer-ui .profile-input .form-control,
  body.customer-ui .profile-input textarea.form-control,
  body.customer-ui .payment-input-wrap input,
  body.customer-ui .payment-input-wrap textarea {
    padding-left: 36px;
  }
  body.customer-ui .profile-input > i {
    font-size: 12px;
    left: 12px;
    line-height: 40px;
  }
  body.customer-ui .payment-input-wrap > i {
    font-size: 12px;
    left: 12px;
  }
  body.customer-ui.vehicle-detail-modern .vehicle-booking-form .vehicle-date-input {
    padding-right: 40px;
  }
  body.customer-ui .vehicle-date-toggle {
    height: 32px;
    width: 32px;
    right: 4px;
  }

  body.customer-ui form label,
  body.customer-ui .profile-form-group .control-label,
  body.customer-ui :is(.booking-cancel-field, .booking-refund-field) > label {
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 5px;
  }
  body.customer-ui :is(.contact-field, .profile-form-group) {
    margin-bottom: 12px;
  }
  body.customer-ui :is(.vehicle-booking-fields, .payment-field-grid, .profile-field-grid) {
    gap: 10px;
  }
  /* Size action buttons together; allow long labels to wrap without clipping. */
  body.customer-ui :is(.btn, .booking-button, .booking-dashboard-action,
    .van-filter-submit, .van-card-cta, .van-primary-button,
    .contact-form-submit, .contact-hero-card-link, .vehicle-booking-submit,
    .vehicle-price-link, .vehicle-similar-cta, .profile-save-button,
    .profile-secondary-button, .profile-verification-modal .profile-verification-send,
    .profile-verification-modal .profile-verification-confirm,
    .payment-submit-button, .payment-secondary-button, .success-button,
    .search-filter-submit, .search-result-button, .search-secondary-button,
    .search-primary-input button, .auth-submit, .about-primary-button,
    .about-secondary-button, .faq-primary-button, .faq-secondary-button,
    .terms-primary-button, .terms-secondary-button, .privacy-secondary-button,
    .booking-cancel-stay, .booking-cancel-submit, .customer-notifications-mark-all),
  body.customer-ui #forgotpassword .btn,
  body.customer-ui #signupform .signup-step-actions .btn,
  body.customer-ui.homepage main .btn {
    border-radius: 8px;
    font-size: var(--customer-button-font);
    gap: 6px;
    height: auto;
    min-height: var(--customer-button-height);
    line-height: 18px;
    padding: 8px 12px;
    white-space: normal;
  }
  body.customer-ui :is(a, button):is(.btn, [class*="-button"], [class*="-submit"],
    .contact-hero-card-link) > i,
  body.customer-ui.homepage main .btn .fa,
  body.customer-ui #signupform .signup-step-actions .btn i {
    font-size: 11px;
  }
  body.customer-ui :is(.banner_actions, .homepage-cta-actions, .about-hero-actions,
    .about-cta-actions, .faq-cta-actions, .terms-cta-actions, .booking-card-actions,
    .booking-cancel-actions, .success-actions, .profile-form-actions) {
    gap: 8px;
  }
  body.customer-ui :is(.van-sort-button, .auth-modal .close) {
    height: 36px;
    min-height: 36px;
    width: 36px;
  }
  body.customer-ui .auth-modal .close {
    font-size: 18px;
    top: 8px;
  }
  body.customer-ui #signupform .signup-modal-header .close,
  body.customer-ui #forgotpassword .modal-header .close {
    flex-basis: 36px;
    font-size: 18px;
    height: 36px;
    line-height: 36px;
    width: 36px;
  }
  body.customer-ui #navigation_bar.customer-navbar .profile-login-link {
    gap: 5px;
    min-height: 36px;
    padding: 8px 10px;
    line-height: 16px;
  }
  body.customer-ui #navigation_bar.customer-navbar .navbar-toggle {
    flex-basis: 36px;
    height: 36px;
    min-height: 36px;
    min-width: 36px;
    padding: 8px;
    width: 36px;
  }
  body.customer-ui #navigation_bar.customer-navbar .navbar-toggle .icon-bar {
    width: 18px;
  }
  body.customer-ui.payment-page .payment-help-strip {
    align-items: flex-start;
    flex-direction: column;
  }
  body.customer-ui.payment-page .payment-help-strip a {
    margin-left: 0;
    padding-left: 0;
    width: auto;
  }
  /* Keep the booking summary in the same flat strip as the other pages. */
  body.customer-ui.booking-page-modern .booking-stats-grid {
    gap: 0;
    padding: 0;
  }
  body.customer-ui.booking-page-modern .booking-stat-card {
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }
  body.customer-ui.booking-page-modern .booking-stat-card > div {
    min-width: 0;
  }
  body.customer-ui.booking-page-modern .booking-stat-card strong {
    font-size: 13px;
    line-height: 18px;
  }
  body.customer-ui.booking-page-modern .booking-stat-card .booking-stat-label {
    font-size: 10px;
    letter-spacing: normal;
    line-height: 17px;
    margin-top: 2px;
  }
  /* Keep cancellation controls within the phone's visible viewport. */
  #bookingCancelModal {
    padding: 8px;
  }
  #bookingCancelModal .booking-cancel-dialog {
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    max-width: 420px;
    overflow: hidden;
  }
  #bookingCancelModal .booking-cancel-dialog-head {
    border-radius: 13px 13px 0 0;
    display: grid;
    flex-shrink: 0;
    gap: 2px 8px;
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    padding: 12px;
  }
  #bookingCancelModal .booking-cancel-dialog-icon {
    align-self: center;
    border-radius: 8px;
    font-size: 14px;
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 28px;
    margin: 0;
    width: 28px;
  }
  #bookingCancelModal .booking-cancel-dialog-kicker {
    font-size: 8px;
    grid-column: 2;
    letter-spacing: .1em;
    line-height: 12px;
    margin: 0;
  }
  #bookingCancelModal .booking-cancel-dialog-head h2 {
    font-size: 18px;
    grid-column: 2;
    line-height: 22px;
    margin: 0;
  }
  #bookingCancelModal .booking-cancel-dialog-head p {
    font-size: 11px;
    grid-column: 1 / -1;
    line-height: 15px;
    margin-top: 4px;
    max-width: none;
  }
  #bookingCancelModal .booking-cancel-dialog-close {
    height: 32px;
    right: 10px;
    top: 10px;
    width: 32px;
  }
  #bookingCancelModal .booking-cancel-dialog-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
  }
  #bookingCancelModal .booking-cancel-trip {
    border-radius: 10px;
    display: grid;
    gap: 4px 8px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 8px;
  }
  #bookingCancelModal .booking-cancel-trip-icon {
    border-radius: 8px;
    font-size: 13px;
    grid-row: 1 / span 2;
    height: 28px;
    width: 28px;
  }
  #bookingCancelModal .booking-cancel-trip-copy {
    grid-column: 2;
  }
  #bookingCancelModal .booking-cancel-trip-copy span,
  #bookingCancelModal .booking-cancel-trip-copy em,
  #bookingCancelModal .booking-cancel-trip-total span {
    font-size: 8px;
    line-height: 12px;
  }
  #bookingCancelModal .booking-cancel-trip-copy strong {
    font-size: 13px;
    line-height: 17px;
  }
  #bookingCancelModal .booking-cancel-trip-copy small {
    font-size: 9px;
    line-height: 12px;
  }
  #bookingCancelModal .booking-cancel-trip-total {
    align-items: baseline;
    border: 0;
    display: flex;
    gap: 6px;
    grid-column: 2;
    margin: 0;
    min-width: 0;
    padding: 0;
    text-align: left;
  }
  #bookingCancelModal .booking-cancel-trip-total strong {
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    overflow-wrap: anywhere;
  }
  #bookingCancelModal .booking-cancel-alert {
    font-size: 10px;
    gap: 6px;
    line-height: 14px;
    margin: 8px 0;
    padding: 7px 8px;
  }
  #bookingCancelModal .booking-cancel-field {
    margin-bottom: 8px;
  }
  #bookingCancelModal .booking-cancel-field > label {
    font-size: 10px;
    line-height: 14px;
    margin-bottom: 4px;
  }
  #bookingCancelModal .booking-cancel-select,
  #bookingCancelModal .booking-cancel-details {
    font-size: 12px !important;
    padding: 6px 8px;
  }
  #bookingCancelModal .booking-cancel-select {
    height: 36px;
    min-height: 36px;
    padding-right: 30px;
  }
  #bookingCancelModal .booking-cancel-details {
    font-size: 11px !important;
    height: 52px;
    line-height: 16px;
    min-height: 52px;
  }
  #bookingCancelModal .booking-cancel-counter {
    font-size: 8px;
    gap: 6px;
    line-height: 12px;
    margin-top: 2px;
  }
  #bookingCancelModal .booking-cancel-ack {
    gap: 7px;
    margin: 0 0 8px;
    padding: 6px 8px;
  }
  #bookingCancelModal .booking-cancel-ack label,
  #bookingCancelModal .booking-cancel-ack label strong {
    font-size: 10px;
    line-height: 14px;
  }
  #bookingCancelModal .booking-cancel-ack label span {
    font-size: 9px;
    line-height: 12px;
  }
  #bookingCancelModal .booking-cancel-actions {
    background: #fff;
    bottom: 0;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 6px;
    position: sticky;
    z-index: 1;
  }
  #bookingCancelModal .booking-cancel-actions button {
    font-size: 10px;
    gap: 4px;
    line-height: 14px;
    min-height: 36px;
    min-width: 0;
    padding: 6px;
  }
  #bookingCancelModal .booking-cancel-actions button i {
    font-size: 10px;
    margin: 0;
  }
  body.customer-ui .faq-question {
    gap: 8px;
    min-height: 52px;
    padding: 12px 14px;
  }
  body.customer-ui .faq-question .faq-question-text {
    font-size: 12px;
    line-height: 18px;
  }
  body.customer-ui.vehicle-detail-modern .vehicle-info-tabs .nav-tabs > li > a {
    font-size: 11px;
    line-height: 18px;
    min-height: 36px;
    padding: 8px 10px;
    white-space: normal;
  }

  /* Reservation cards keep a compact itinerary and price strip on phones. */
  body.customer-ui.booking-page-modern .booking-card[data-reservation-card] {
    border-radius: 14px;
  }
  body.customer-ui.booking-page-modern .reservation-header {
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  body.customer-ui.booking-page-modern .reservation-reference {
    gap: 9px;
  }
  body.customer-ui.booking-page-modern .reservation-reference-icon {
    border-radius: 9px;
    flex-basis: 34px;
    font-size: 17px;
    height: 34px;
  }
  body.customer-ui.booking-page-modern .reservation-reference strong {
    font-size: 14px;
    line-height: 20px;
  }
  body.customer-ui.booking-page-modern .reservation-eyebrow {
    font-size: 9px;
    line-height: 14px;
  }
  body.customer-ui.booking-page-modern [data-reservation-card] .booking-badges {
    gap: 6px;
    justify-content: flex-start;
  }
  body.customer-ui.booking-page-modern [data-reservation-card] :is(.booking-status, .booking-payment) {
    font-size: 9px;
    line-height: 15px;
    padding: 4px 8px;
  }
  body.customer-ui.booking-page-modern .reservation-body {
    grid-template-columns: minmax(0, 1fr);
  }
  body.customer-ui.booking-page-modern .reservation-trip {
    padding: 16px;
  }
  body.customer-ui.booking-page-modern .reservation-vehicle {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }
  body.customer-ui.booking-page-modern .reservation-vehicle-image {
    border-radius: 9px;
    flex-basis: auto;
    height: auto;
    width: 100%;
  }
  body.customer-ui.booking-page-modern .reservation-vehicle-copy h3 {
    font-size: 18px;
    line-height: 23px;
    margin-bottom: 5px;
  }
  body.customer-ui.booking-page-modern .reservation-brand {
    font-size: 9px;
    line-height: 14px;
    margin-bottom: 2px;
  }
  body.customer-ui.booking-page-modern .reservation-itinerary {
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }
  body.customer-ui.booking-page-modern .reservation-stop {
    padding-left: 20px;
  }
  body.customer-ui.booking-page-modern .reservation-stop + .reservation-stop::before {
    left: -7px;
  }
  body.customer-ui.booking-page-modern .reservation-stop > strong {
    font-size: 14px;
    line-height: 20px;
    margin: 4px 0;
  }
  body.customer-ui.booking-page-modern .reservation-stop-label {
    font-size: 9px;
    gap: 5px;
    line-height: 15px;
  }
  body.customer-ui.booking-page-modern .reservation-stop-label > span {
    left: -20px;
    top: 3.5px;
  }
  body.customer-ui.booking-page-modern .reservation-location {
    font-size: 10px;
    line-height: 16px;
  }
  body.customer-ui.booking-page-modern .reservation-meta {
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
  }
  body.customer-ui.booking-page-modern .reservation-meta strong {
    font-size: 11px;
    line-height: 17px;
  }
  body.customer-ui.booking-page-modern .reservation-meta > div {
    gap: 7px;
  }
  body.customer-ui.booking-page-modern .reservation-summary {
    align-items: center;
    border: 1px solid #dfe9e1;
    display: grid;
    gap: 6px 14px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0 16px 16px;
    padding: 14px 16px;
  }
  body.customer-ui.booking-page-modern .reservation-summary-heading {
    font-size: 9px;
    grid-column: 1;
    line-height: 16px;
  }
  body.customer-ui.booking-page-modern .reservation-breakdown {
    gap: 3px;
    grid-column: 1;
    margin: 0;
  }
  body.customer-ui.booking-page-modern .reservation-breakdown > div {
    gap: 3px 8px;
    justify-content: flex-start;
  }
  body.customer-ui.booking-page-modern .reservation-breakdown :is(dt, dd) {
    font-size: 10px;
    line-height: 16px;
  }
  body.customer-ui.booking-page-modern .reservation-total {
    border: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0;
    text-align: right;
  }
  body.customer-ui.booking-page-modern .reservation-total > span {
    font-size: 10px;
    line-height: 16px;
  }
  body.customer-ui.booking-page-modern .reservation-total > strong {
    font-size: 28px;
    line-height: 34px;
    margin-top: 2px;
  }
  body.customer-ui.booking-page-modern .reservation-notes {
    gap: 10px;
    padding: 16px;
  }
  body.customer-ui.booking-page-modern [data-reservation-card] .reservation-notes :is(.booking-note, .booking-cancelled-note, .booking-cancellation-request-note) {
    font-size: 10px;
    line-height: 16px;
    margin: 0;
    padding: 8px 10px;
  }
  body.customer-ui.booking-page-modern .reservation-footer {
    gap: 10px;
    padding: 12px 16px;
  }
  body.customer-ui.booking-page-modern .reservation-booked {
    font-size: 9px;
    line-height: 16px;
  }
  body.customer-ui.booking-page-modern .booking-card .reservation-actions {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  body.customer-ui.booking-page-modern .booking-card .reservation-actions > :is(a, button, form) {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  body.customer-ui.booking-page-modern .booking-card .reservation-actions .booking-button {
    font-size: var(--customer-button-font);
    line-height: 18px;
    min-height: var(--customer-button-height);
    padding: 8px 12px;
    white-space: normal;
  }
  body.customer-ui.booking-page-modern .reservation-actions form .booking-button {
    width: 100%;
  }
  body.customer-ui.booking-page-modern .reservation-actions .booking-action-note {
    flex: 1 1 100%;
    font-size: 10px;
    line-height: 16px;
    overflow-wrap: anywhere;
  }
}