html { overflow-x: clip; }
.booking-card, .booking-card *, .booking-dialog { box-sizing: border-box; }
#booking-home { width: 100%; max-width: 460px; min-width: 0; justify-self: end; }
.booking-card { margin: 0; padding: 22px; width: 100%; background: #fff; color: #0e2037; border: 1px solid #dfe5eb; border-radius: 16px; box-shadow: 0 18px 50px #07182a26; scroll-margin-top: 110px; font-family: Inter, Arial, sans-serif; }
.booking-card h2 { margin: 0 0 3px; color: #0e2037; font: 750 22px/1.25 Inter, Arial, sans-serif; letter-spacing: -.5px; }
.booking-card .booking-subtitle { margin: 0 0 17px; font-size: 13px; color: #738397; line-height: 1.5; }
.booking-trips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: 0 0 17px; padding: 4px; background: #f5f7fa; border: 0; border-radius: 9px; }
.booking-trips label { position: relative; cursor: pointer; min-width: 0; }
.booking-trips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.booking-trips span { display: block; text-align: center; padding: 9px 2px; border-radius: 6px; font-size: 12px; font-weight: 650; color: #718196; white-space: nowrap; }
.booking-trips input:checked + span { color: white; background: #0d2038; box-shadow: 0 2px 5px #0d203833; }
.booking-trips input:focus-visible + span { outline: 2px solid #dc9e00; outline-offset: 2px; }
.booking-field { min-width: 0; margin-bottom: 12px; }
.booking-field > label { display: block; margin: 0 0 5px; color: #24364b; font-size: 12px; line-height: 1.4; font-weight: 600; }
.booking-field > label span { color: #e04860; }
.booking-field input, .booking-field select { display: block; width: 100%; min-width: 0; max-width: 100%; height: 40px; margin: 0; padding: 8px 10px; border: 1px solid #e2e8ef; border-radius: 7px; background: #fff; color: #27384a; font: 400 13px/1.4 Inter, Arial, sans-serif; color-scheme: light; }
.booking-field input::placeholder { color: #8a929c; opacity: 1; }
.booking-field input:focus, .booking-field select:focus { outline: 2px solid #fbc21a; outline-offset: 1px; }
.booking-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.booking-icon-input { position: relative; }
.booking-icon-input i { position: absolute; left: 12px; top: 14px; font-size: 12px; color: #8290a1; pointer-events: none; }
.booking-icon-input input { padding-left: 32px; }
.booking-phone { display: flex; border: 1px solid #e2e8ef; border-radius: 7px; overflow: hidden; }
.booking-phone > span { display: flex; align-items: center; padding: 0 8px; background: #f6f8fb; border-right: 1px solid #e2e8ef; color: #718196; font-size: 12px; }
.booking-phone input { border: 0; border-radius: 0; height: 38px; padding: 8px; }
.booking-phone:focus-within { outline: 2px solid #fbc21a; outline-offset: 1px; }
.booking-phone input:focus { outline: none; }
.booking-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 11px 8px; border: 0; border-radius: 8px; background: #ffc414; box-shadow: 0 5px 12px #ffc41433; color: #142139; font: 700 14px/1.4 Inter, Arial, sans-serif; cursor: pointer; }
.booking-submit:hover { background: #f4b600; }
.booking-submit:disabled { opacity: .65; cursor: wait; }
.booking-card .booking-note { margin: 10px 0 0; color: #74869a; text-align: center; font-size: 10px; line-height: 1.5; }
.booking-note i { color: #49b777; margin-right: 3px; }
.booking-card .booking-status { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #24364b; }
.booking-card .booking-status[data-error] { color: #ba263b; }
.booking-whatsapp { display: block; margin-top: 10px; color: #16733d; font-size: 13px; font-weight: 700; text-decoration: underline; }
.booking-card [hidden] { display: none; }
.booking-sr-only, .booking-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.booking-dialog { position: fixed; inset: 0; width: min(460px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 24px 80px #0006; overscroll-behavior: contain; }
.booking-dialog::backdrop { background: #081a30b8; backdrop-filter: blur(4px); }
.booking-dialog .booking-card { border: 0; box-shadow: none; padding-top: 27px; }
.booking-dialog .booking-card h2 { padding-right: 24px; }
.booking-close { position: absolute; z-index: 1; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f4f8; color: #24364b; font: 24px/1 Arial, sans-serif; cursor: pointer; }
.booking-close:focus-visible, .booking-submit:focus-visible { outline: 2px solid #987000; outline-offset: 2px; }
@media (max-width: 1024px) { #booking-home { justify-self: center; } }
@media (max-width: 400px) { .booking-card { padding: 18px 14px; } .booking-field input, .booking-field select { font-size: 12px; } .booking-trips span { font-size: 11px; } .booking-phone > span { padding: 0 5px; font-size: 11px; } .booking-phone input { padding: 8px 5px; font-size: 11px; } }
