/* Client layouts: preserve readable content and controls at phone widths. */
@media (max-width: 767.98px) {
    main .row > *, main .card, main .card-body { min-width: 0; }
    main h1, main h2, main p, main li, main a, main td { overflow-wrap: anywhere; }
    main input.form-control, main textarea.form-control, main select.form-select { font-size: 16px; max-width: 100%; }
    main .btn, .navbar-toggler { min-height: 44px; }
    .client-bookings-table { display: block; border: 0; background: transparent !important; }
    .client-bookings-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .client-bookings-table tbody { display: grid; gap: 20px; }
    .client-bookings-table tbody tr { display: block; border: 1px solid #ccd4c7; border-radius: 12px; overflow: hidden; background: #fff; }
    .client-bookings-table tbody td { display: block; width: 100%; min-width: 0 !important; padding: 14px 16px; border: 0; border-bottom: 1px solid #e5e8df; }
    .client-bookings-table tbody td:last-child { border-bottom: 0; }
    .client-bookings-table tbody td:not([colspan])::before { display: block; font-weight: 700; font-size: .8rem; color: #657168; margin-bottom: 8px; }
    .client-bookings-table td:nth-child(1)::before { content: 'Car'; }
    .client-bookings-table td:nth-child(2)::before { content: 'Rental dates'; }
    .client-bookings-table td:nth-child(3)::before { content: 'Pickup / Dropoff'; }
    .client-bookings-table td:nth-child(4)::before { content: 'Rental summary'; }
    .client-bookings-table td:nth-child(5)::before { content: 'Status & fines'; }
    .client-bookings-table td:nth-child(6)::before { content: 'Extend rental'; }
    .client-bookings-table .btn { width: 100%; }
    .client-bookings-table .border { overflow-wrap: anywhere; }
    .pagination { flex-wrap: wrap; gap: 4px; }
    .footer form .form-control { min-width: 0; flex-basis: 180px; }
    .whatsapp-float { width: 48px !important; height: 48px !important; right: 12px !important; bottom: 12px !important; }
}