/* CT Transfers — calendar of the booking form (loaded on every site, also when the
   theme overrides the form stylesheet). Uses the form's CSS variables, with fallbacks. */
/* ══ CALENDARIO DEL FORMULARIO (jQuery UI) ═════════════════════
   El calendario es un elemento compartido (#ui-datepicker-div). Cuando
   lo abre un campo de este formulario recibe la clase .ctt-datepicker,
   y estas reglas (más específicas) le dan un aspecto propio que no
   depende del tema ni del CSS del Personalizador de cada web. */
#ui-datepicker-div.ctt-datepicker {
    background: var(--crtt-bg, #fff) !important;
    border: 1px solid var(--crtt-border, #e6dac0) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(28, 18, 32, .14) !important;
    padding: 10px !important;
    z-index: 99999 !important;
}
#ui-datepicker-div.ctt-datepicker .ui-datepicker-header {
    position: relative !important;
    background: color-mix(in srgb, var(--crtt-border, #e6dac0) 35%, var(--crtt-bg, #fff)) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
}
#ui-datepicker-div.ctt-datepicker .ui-datepicker-title,
#ui-datepicker-div.ctt-datepicker th,
#ui-datepicker-div.ctt-datepicker td a,
#ui-datepicker-div.ctt-datepicker td span {
    font-family: var(--crtt-font-body, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif) !important;
    font-variant-numeric: lining-nums tabular-nums;
}
#ui-datepicker-div.ctt-datepicker .ui-datepicker-title { color: var(--crtt-text, #1C1220) !important; background: transparent !important; }
#ui-datepicker-div.ctt-datepicker .ui-datepicker-prev,
#ui-datepicker-div.ctt-datepicker .ui-datepicker-next {
    top: 50% !important;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    color: var(--crtt-accent, #3B1250) !important;
}
#ui-datepicker-div.ctt-datepicker .ui-datepicker-prev { left: 10px !important; }
#ui-datepicker-div.ctt-datepicker .ui-datepicker-next { right: 10px !important; }
#ui-datepicker-div.ctt-datepicker table { width: 100% !important; }
#ui-datepicker-div.ctt-datepicker th {
    color: var(--crtt-accent, #3B1250) !important;
    font-size: .72rem !important;
    text-transform: uppercase !important;
    padding: 6px 0 !important;
}
#ui-datepicker-div.ctt-datepicker td { padding: 2px !important; }
#ui-datepicker-div.ctt-datepicker td a,
#ui-datepicker-div.ctt-datepicker td span {
    text-align: center !important;
    padding: 6px 4px !important;
    border: none !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--crtt-text, #1C1220) !important;
}
#ui-datepicker-div.ctt-datepicker td a:hover {
    background: color-mix(in srgb, var(--crtt-accent, #3B1250) 8%, transparent) !important;
    color: var(--crtt-accent, #3B1250) !important;
}
#ui-datepicker-div.ctt-datepicker .ui-state-active,
#ui-datepicker-div.ctt-datepicker .ui-state-highlight {
    background: var(--crtt-accent, #3B1250) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
#ui-datepicker-div.ctt-datepicker .ui-datepicker-other-month a { color: var(--crtt-text-muted, #6E6577) !important; }

/* ══ EXTRAS (Add options / Services) — componente común a todos los estilos ═════
   · La tabla sigue oculta hasta que el formulario la muestra (al elegir el destino).
   · Filas del mismo ancho que su columna, con el fondo cubriendo toda la fila.
   · Interruptor Yes/No propio: la bolita llega al final al activarlo. */
.crtt-booking-widget table.options_cart:not([style*="display:none"]):not([style*="display: none"]) { display: block !important; max-width: 100% !important; }
.crtt-booking-widget table.options_cart thead,
.crtt-booking-widget table.options_cart thead tr,
.crtt-booking-widget table.options_cart thead th { display: block !important; width: 100% !important; box-sizing: border-box !important; }
.crtt-booking-widget table.options_cart tbody { display: block !important; width: 100% !important; box-sizing: border-box !important; }
@container crtt-widget (min-width: 600px) {
    .crtt-booking-widget table.options_cart tbody { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0 !important; }
    .crtt-booking-widget table.options_cart tr.service_block:nth-child(odd) { border-right: 1px solid var(--crtt-border, #dce4ee) !important; }
}
.crtt-booking-widget table.options_cart tr.service_block,
.crtt-booking-widget .table-striped tbody tr.service_block:nth-of-type(odd) {
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important;
    width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
    padding: 10px 14px !important; margin: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--crtt-border, #dce4ee) !important;
}
.crtt-booking-widget table.options_cart td { display: block !important; padding: 0 !important; border: none !important; }
.crtt-booking-widget table.options_cart td:first-child { flex: 1 1 auto !important; min-width: 0 !important; overflow-wrap: anywhere; }
.crtt-booking-widget table.options_cart td:not(:first-child) { flex: 0 0 auto !important; }

/* Interruptor */
.crtt-booking-widget .switch-light.switch-ios {
    position: relative !important; display: block !important; float: none !important;
    width: 64px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; cursor: pointer;
}
.crtt-booking-widget .switch-light.switch-ios input {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    margin: 0 !important; opacity: 0 !important; z-index: 6 !important; cursor: pointer !important;
}
.crtt-booking-widget .switch-light.switch-ios > span {
    position: absolute !important; inset: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    padding: 0 !important; margin: 0 !important; border-radius: 30px !important;
    background: var(--crtt-input-bg, #f2f6fa) !important; border: 1px solid var(--crtt-input-border, #d5dee8) !important;
    transition: background .2s, border-color .2s !important; box-sizing: border-box !important;
}
.crtt-booking-widget .switch-light.switch-ios > span::before { display: none !important; }
.crtt-booking-widget .switch-light.switch-ios > span span {
    position: absolute !important; top: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important;
    line-height: 28px !important; font-size: 11px !important; font-weight: 700 !important; transition: opacity .2s !important;
}
.crtt-booking-widget .switch-light.switch-ios > span span:first-child { right: 10px !important; left: auto !important; opacity: 1 !important; color: var(--crtt-text-muted, #64748b) !important; }
.crtt-booking-widget .switch-light.switch-ios > span span:last-child { left: 10px !important; right: auto !important; opacity: 0 !important; color: var(--crtt-switch-on-text, #ffffff) !important; }
.crtt-booking-widget .switch-light.switch-ios a {
    position: absolute !important; top: 3px !important; left: 3px !important; right: auto !important;
    width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important;
    border-radius: 50% !important; background: #fff !important; border: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important; transition: left .25s ease !important; z-index: 4 !important;
}
.crtt-booking-widget .switch-light.switch-ios input:checked ~ span { background: var(--crtt-accent, #00c2db) !important; border-color: var(--crtt-accent, #00c2db) !important; box-shadow: none !important; }
.crtt-booking-widget .switch-light.switch-ios input:checked ~ span span:first-child { opacity: 0 !important; }
.crtt-booking-widget .switch-light.switch-ios input:checked ~ span span:last-child { opacity: 1 !important; }
.crtt-booking-widget .switch-light.switch-ios input:checked ~ a { left: calc(100% - 27px) !important; margin-left: 0 !important; }

/* ══ MÓVIL ══════════════════════════════════════════════════════════════
   · iPhone amplía la página al tocar un campo con letra menor de 16 px: los
     campos usan 16 px en el móvil y ya no hay zoom.
   · Calendario y reloj se abren abajo, a todo el ancho de la pantalla. */
@media (max-width: 767px) {
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner.crtt-form-inner input,
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner.crtt-form-inner select,
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner.crtt-form-inner textarea,
    .crtt-booking-widget.crtt-booking-widget .selectize-control .selectize-input,
    .crtt-booking-widget.crtt-booking-widget .selectize-control .selectize-input input,
    .crtt-booking-widget.crtt-booking-widget .selectize-dropdown .option { font-size: 16px !important; }

    #ui-datepicker-div.ctt-datepicker {
        position: fixed !important; top: auto !important; bottom: 12px !important;
        left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important;
        box-shadow: 0 -6px 40px rgba(0, 0, 0, .25) !important; z-index: 2147483000 !important;
    }
    #ui-datepicker-div.ctt-datepicker td a,
    #ui-datepicker-div.ctt-datepicker td span { padding: 11px 4px !important; font-size: 16px !important; }
    #ui-datepicker-div.ctt-datepicker .ui-datepicker-title { font-size: 17px !important; }

    #ctt-time-host > .bootstrap-datetimepicker-widget.dropdown-menu,
    .crtt-booking-widget .bootstrap-datetimepicker-widget.dropdown-menu {
        position: fixed !important; top: auto !important; bottom: 12px !important;
        left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important;
        z-index: 2147483000 !important; box-shadow: 0 -6px 40px rgba(0, 0, 0, .25) !important;
        background: var(--crtt-bg, #fff) !important; border-radius: 14px !important; padding: 12px !important;
        display: block;
    }
    #ctt-time-host > .bootstrap-datetimepicker-widget.dropdown-menu::before,
    #ctt-time-host > .bootstrap-datetimepicker-widget.dropdown-menu::after,
    .crtt-booking-widget .bootstrap-datetimepicker-widget.dropdown-menu::before,
    .crtt-booking-widget .bootstrap-datetimepicker-widget.dropdown-menu::after { display: none !important; }
    #ctt-time-host > .bootstrap-datetimepicker-widget td,
    #ctt-time-host > .bootstrap-datetimepicker-widget td span,
    #ctt-time-host > .bootstrap-datetimepicker-widget td a { font-size: 20px !important; }
    #ctt-time-host > .bootstrap-datetimepicker-widget table { width: 100% !important; }
    #ctt-time-host > .bootstrap-datetimepicker-widget,
    #ctt-time-host > .bootstrap-datetimepicker-widget td,
    #ctt-time-host > .bootstrap-datetimepicker-widget td span,
    #ctt-time-host > .bootstrap-datetimepicker-widget td a { color: var(--crtt-text, #0f1f3d) !important; border: none !important; }
    #ctt-time-host > .bootstrap-datetimepicker-widget .btn-primary,
    #ctt-time-host > .bootstrap-datetimepicker-widget td span.active {
        background: var(--crtt-accent, #00c2db) !important; color: var(--crtt-switch-on-text, #fff) !important;
        border: none !important; border-radius: 8px !important; padding: 8px 12px !important;
    }
    .crtt-booking-widget .bootstrap-datetimepicker-widget td,
    .crtt-booking-widget .bootstrap-datetimepicker-widget td span { font-size: 18px !important; }
}

/* ══ ERRORES ═══════════════════════════════════════════════════════════
   El aviso siempre va debajo de su campo (antes, en el vuelo, salía a la derecha)
   y el campo con el problema se marca en rojo. */
.crtt-booking-widget [id$="flight_no"],
.crtt-booking-widget .flight_no_label,
.crtt-booking-widget [id$="passengers"],
.crtt-booking-widget [id$="pickup_location"],
.crtt-booking-widget [id$="dropoff_location"] { flex-wrap: wrap !important; }
.crtt-booking-widget.crtt-booking-widget div.error_date:not(input):not(select) {
    display: block !important; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
    order: 99 !important; float: none !important; clear: both !important;
    position: static !important; margin: 6px 0 0 !important; padding: 0 !important;
    color: #d93036 !important; font-size: 12.5px !important; font-weight: 600 !important;
    text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.35 !important;
}
.crtt-booking-widget.crtt-booking-widget .ctt-field-error,
.crtt-booking-widget.crtt-booking-widget .ctt-field-error:focus,
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner input.error_date,
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner input.error_date:focus,
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner select.error_date,
.crtt-booking-widget.crtt-booking-widget select.error_date + .selectize-control .selectize-input {
    border-color: #e5484d !important; background-color: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .15) !important;
}

/* ══ PANTALLAS BAJAS (portátiles) ══════════════════════════════════════
   En un portátil (p. ej. 1920×1080 al 150 % = unos 1280×620 útiles) el formulario
   no cabía sin alejar el zoom. En pantallas de poca altura se compacta: menos aire
   entre campos, campos más bajos y la imagen del vehículo más pequeña. */
@media (min-width: 768px) and (max-height: 900px) {
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner { padding-top: 10px !important; padding-bottom: 6px !important; }
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner label { margin-bottom: 4px !important; font-size: 10.5px !important; line-height: 1.3 !important; }
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner .form-group,
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner [id$="_location"],
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner [id$="date"],
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner [id$="passengers"],
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner .crtt-opt-half,
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner .crtt-opts-row { margin-bottom: 8px !important; }
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner input.form-control,
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner select.form-control,
    .crtt-booking-widget.crtt-booking-widget .selectize-control .selectize-input {
        height: 38px !important; min-height: 38px !important; padding-top: 6px !important; padding-bottom: 6px !important; line-height: 24px !important;
    }
    .crtt-booking-widget.crtt-booking-widget [id$="passengers"] .button_inc { height: 36px !important; }
    .crtt-booking-widget.crtt-booking-widget .crtt-tab { padding-top: 9px !important; padding-bottom: 9px !important; }
    .crtt-booking-widget.crtt-booking-widget .vehicle_type_img,
    .crtt-booking-widget.crtt-booking-widget img[id$="vehicle_type_img"] { max-height: 46px !important; width: auto !important; }
    .crtt-booking-widget.crtt-booking-widget .crtt-form-inner form > .row { margin-bottom: 6px !important; gap: 8px !important; }
    .crtt-booking-widget.crtt-booking-widget .transfers_options { gap: 6px !important; margin-bottom: 6px !important; }
    .crtt-booking-widget.crtt-booking-widget .crtt-tabs { padding-top: 6px !important; }
    /* (Plum & Gold no: su barra del total es el talón morado del "ticket" y con margen dejaba ver franjas blancas) */
    .crtt-booking-widget.crtt-booking-widget:not(.crtt-style-plum-gold) .crtt-footer-bar { margin-top: 8px !important; margin-bottom: 8px !important; }
    .crtt-booking-widget.crtt-booking-widget:not(.crtt-style-plum-gold) .crtt-footer-price { padding-top: 8px !important; padding-bottom: 8px !important; }
}
/* Y si aun así la pantalla es baja, el contenido del formulario se reduce un poco
   (como alejar el zoom, pero solo aquí). Se reduce el contenido y no la caja, para
   que el formulario conserve su ancho. */
@media (min-width: 768px) and (max-height: 800px) {
    .crtt-booking-widget:not(.crtt-style-plum-gold) > .crtt-tabs,
    .crtt-booking-widget:not(.crtt-style-plum-gold) > .crtt-tab-content { zoom: .8; }
}
@media (min-width: 768px) and (max-height: 680px) {
    .crtt-booking-widget:not(.crtt-style-plum-gold) > .crtt-tabs,
    .crtt-booking-widget:not(.crtt-style-plum-gold) > .crtt-tab-content { zoom: .72; }
}
/* Portátiles con escalado de Windows al 150% (unos 585 px de alto útil) */
@media (min-width: 768px) and (max-height: 620px) {
    .crtt-booking-widget:not(.crtt-style-plum-gold) > .crtt-tabs,
    .crtt-booking-widget:not(.crtt-style-plum-gold) > .crtt-tab-content { zoom: .66; }
}

/* ══ PASAJEROS: + y − siempre dentro del campo ═════════════════════════
   En columnas estrechas el botón "−" quedaba tapado por el campo de vehículo. */
.crtt-booking-widget.crtt-booking-widget [id$="passengers"] .numbers-row {
    display: flex !important; align-items: stretch !important; position: relative !important;
    width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important;
}
.crtt-booking-widget.crtt-booking-widget [id$="passengers"] .numbers-row input.qty2 {
    flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; position: static !important;
}
.crtt-booking-widget.crtt-booking-widget [id$="passengers"] .numbers-row .button_inc {
    flex: 0 0 34px !important; width: 34px !important; position: static !important; left: auto !important; right: auto !important;
    display: flex !important; align-items: center !important; justify-content: center !important; text-indent: 0 !important; margin: 0 !important;
}
/* Las dos columnas de cada fila (fecha/hora, pasajeros/vehículo) reparten el ancho
   sin invadirse: antes la de pasajeros tapaba el inicio del selector de vehículo. */
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner .row > [class*="col-"],
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner .transfers_options > [id$="passengers"],
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner .transfers_options > [id$="vehicle_type"] { min-width: 0 !important; box-sizing: border-box !important; }
/* Orden de los botones: campo, luego "−" y "+" a la derecha (en el HTML el "+" va primero) */
.crtt-booking-widget.crtt-booking-widget [id$="passengers"] .numbers-row input.qty2 { order: 0 !important; }
.crtt-booking-widget.crtt-booking-widget [id$="passengers"] .numbers-row .button_inc.dec { order: 1 !important; }
.crtt-booking-widget.crtt-booking-widget [id$="passengers"] .numbers-row .button_inc.inc { order: 2 !important; }
.crtt-booking-widget.crtt-booking-widget [id$="passengers"] > .form-group { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; }

/* ══ IDA Y VUELTA EN DOS COLUMNAS ══════════════════════════════════════
   La fecha/hora de regreso va justo debajo de la de recogida (antes, según el
   ancho, aparecía después de pasajeros y vehículo). Solo actúa cuando el estilo
   coloca el formulario en dos columnas (cuadrícula). */
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner > form > [id$="pickup_location"] { grid-column: 1 !important; grid-row: 1 !important; }
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner > form > [id$="dropoff_location"] { grid-column: 1 !important; grid-row: 2 / span 2 !important; }
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner > form > .row:not([id$="drop-off-date"]) { grid-column: 2 !important; grid-row: 1 !important; }
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner > form > [id$="drop-off-date"] { grid-column: 2 !important; grid-row: 2 !important; }
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner > form > .transfers_options { grid-column: 2 !important; grid-row: 3 !important; }
.crtt-booking-widget.crtt-booking-widget .crtt-form-inner > form > [id$="add_extras_services"] { grid-column: 1 / -1 !important; grid-row: 4 !important; }

/* ══ TRADUCTOR DE CHROME ════════════════════════════════════════════════
   Selectize fija el ancho del buscador según el texto guía original
   ("Select Dropoff..."); traducido es más largo y se cortaba ("Seleccione el pu"). */
.crtt-booking-widget .selectize-control.single .selectize-input:not(.has-items) > input {
    width: 100% !important; max-width: 100%; text-overflow: ellipsis;
}