/* Responsive layout and comfortable form controls — September 2026. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
form, fieldset, form > *, .ms-form-field, .ms-callback-field, .tf-field, .ms-field { min-width: 0; }
form input:not([type=radio]):not([type=checkbox]):not([type=hidden]), form select, form textarea {
 box-sizing: border-box; max-width: 100%; min-width: 0; font-size: 16px !important; min-height: 48px !important;
}
form textarea { resize: vertical; min-height: 100px !important; }
form button, form .ms-btn, .tf-submit { min-height: 48px; white-space: normal; overflow-wrap: anywhere; touch-action: manipulation; }
form input[type=date], form input[type=time] { width: 100%; display: block; }
form input::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
form :focus-visible { outline: 2px solid #65adff; outline-offset: 3px; }
form input:focus-visible + span { outline: 2px solid #65adff; outline-offset: 3px; }
form [hidden] { display: none !important; }
.ms-landing-hero-grid { width: min(1440px, calc(100% - 64px)); grid-template-columns: minmax(0, 1fr) minmax(460px, .88fr); gap: clamp(32px, 4vw, 64px); padding-block: 48px; }
.ms-landing-hero-grid > * { min-width: 0; }
.ms-hero-ride-card { width: 100%; max-width: 620px; padding: 28px; justify-self: end; height: auto; max-height: none; scroll-margin-top: 100px; }
.ms-hero-ride-head { flex-wrap: wrap; gap: 12px; }
.ms-hero-ride-head > div > span { font-size: 14px; line-height: 1.5; }
.ms-booking-step { gap: 16px 12px; scroll-margin-top: 110px; }
.ms-hero-ride-form .ms-form-field { gap: 8px; }
.ms-hero-ride-form .ms-form-field label, .ms-trip-selector legend, .ms-extra-options legend, .ms-service-options legend { font-size: 14px; line-height: 1.45; }
.ms-hero-ride-form .ms-form-field input, .ms-hero-ride-form .ms-form-field select { padding-block: 12px; }
.ms-service-options { gap: 8px; }
.ms-service-options span { min-height: 64px; padding: 12px 24px 12px 10px; }
.ms-service-options b { font-size: 13px; line-height: 1.4; }
.ms-service-options small { font-size: 11px; line-height: 1.4; }
.ms-service-options .ms-service-wedding-option span::after { display: none; }
.ms-trip-selector span, .ms-extra-options span { min-height: 46px; font-size: 13px; }
.ms-booking-progress button { min-height: 52px; font-size: 12px; }
.ms-booking-actions { gap: 10px; margin-top: 20px; }
.ms-consent-field { min-height: 44px; align-items: start; font-size: 13px; line-height: 1.6; }
.ms-direct-whatsapp { display: block; padding-block: 14px; font-size: 13px; line-height: 1.5; }
.ms-ride-privacy { font-size: 12px; line-height: 1.5; }
.ms-booking-summary, .ms-callback-ready, .ms-callback-ready pre { overflow-wrap: anywhere; white-space: pre-wrap; min-width: 0; }
.ms-form-grid > *, .tf-fields > * { min-width: 0; }
@media (max-width: 1099px) {
 .ms-landing-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
 .ms-hero-ride-card { max-width: 760px; justify-self: center; }
 .ms-landing-copy { max-width: 760px; }
}
@media (max-width: 700px) {
 .ms-landing-hero-grid { width: calc(100% - 32px); padding-block: 36px; }
 .ms-hero-ride-card { padding: 22px 18px; border-radius: 20px; }
 .ms-service-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .ms-callback-form, .ms-form-grid { grid-template-columns: minmax(0, 1fr); }
 .ms-callback-form > *, .ms-form-grid > * { grid-column: auto; }
 .ms-callback-actions, .ms-landing-actions { flex-wrap: wrap; }
 .ms-callback-actions > *, .ms-landing-actions > * { flex: 1 1 200px; }
 .ms-login-shell, .ms-login-card { min-width: 0; max-width: 100%; }
 .ms-section-head { flex-wrap: wrap; }
 .ms-table-wrap { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 400px) {
 .ms-booking-step, .tf-fields { grid-template-columns: minmax(0, 1fr); }
 .ms-booking-step > *, .tf-fields > * { grid-column: 1 / -1; }
 .ms-trip-selector { grid-template-columns: minmax(0, 1fr); }
 .ms-hero-ride-card { padding: 20px 14px; }
 .ms-booking-actions { flex-wrap: wrap; }
 .ms-booking-actions > * { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .ms-booking-step { animation: none; }
}