/* Caratoa Transfers System — style "Light Navy" (white card, navy accents). */
/* =============================================================
   TRANSFERS BOOKING WIDGET — Light Theme Redesign 2026
   Reemplaza: transfers-form-redesign__34_.css
   ============================================================= */

/* ── VARIABLES: de dark (#1a2535) a light (#FFFFFF) ───────── */
:root {
    --crtt-bg:           #FFFFFF;          /* antes: #1a2535 oscuro */
    --crtt-bg-inner:     #FFFFFF;          /* antes: #1e2d42 oscuro */
    --crtt-border:       #E8EBF4;          /* antes: #2a3d55 oscuro */
    --crtt-accent:       #1B2B6B;          /* antes: #00d4e0 cyan   */
    --crtt-accent-dark:  #2D3F8C;          /* antes: #00b8c4        */
    --crtt-text:         #1A1A2E;          /* antes: #ffffff        */
    --crtt-text-muted:   #6B7280;          /* antes: #8a9bbf        */
    --crtt-label-color:  #1B2B6B;          /* antes: #f0c040 amarillo */
    --crtt-input-bg:     #F5F6FA;          /* antes: #243447 oscuro */
    --crtt-input-border: #E8EBF4;          /* antes: #2e4260 oscuro */
    --crtt-btn-bg:       #1B2B6B;          /* antes: #00d4e0 cyan   */
    --crtt-btn-text:     #FFFFFF;          /* antes: #0a1520 oscuro */
    --crtt-radius:       10px;
    --crtt-radius-sm:    5px;
}

/* ══ WIDGET ══════════════════════════════════════════════════ */
.crtt-booking-widget {
    background: var(--crtt-bg);
    border-radius: var(--crtt-radius);
    color: var(--crtt-text);
    width: 100%;
    max-width: 460px !important;   /* era 680px / 100% — demasiado grande */
    box-shadow: 0 20px 60px rgba(27, 43, 107, .18);
    overflow: visible; /* FIX: permite que datepicker/timepicker no queden recortados */
    box-sizing: border-box;
    container-type: inline-size;
    container-name: crtt-widget;
}

/* ══ TABS ════════════════════════════════════════════════════ */
.crtt-tabs {
    display: flex;
    border-bottom: 1px solid var(--crtt-border);
    padding: 0;
    gap: 0;
    overflow: hidden; /* FIX: clip esquinas superiores del widget */
    border-radius: var(--crtt-radius) var(--crtt-radius) 0 0;
}

.crtt-tab {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    padding: .7rem;
    border: none;
    background: none;
    color: var(--crtt-text-muted);
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;   /* underline style */
    margin-bottom: -1px;
    transition: all .2s;
}

.crtt-tab:hover {
    color: var(--crtt-accent);
    background: none;
}

/* Tab activo: underline navy en lugar de fondo cyan */
.crtt-tab--active {
    background: none !important;
    color: var(--crtt-accent) !important;
    border-bottom-color: var(--crtt-accent) !important;
}

.crtt-tab-content         { display: none; }
.crtt-tab-content--active { display: block; }

/* ══ FORM INNER ═══════════════════════════════════════════════ */
.crtt-booking-widget .crtt-form-inner {
    background: var(--crtt-bg-inner) !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;   /* reducido de 20px para formulario más compacto */
    color: var(--crtt-text) !important;
    box-sizing: border-box !important;
}

/* ══ LABELS ════════════════════════════════════════════════════ */
.crtt-booking-widget .crtt-form-inner label {
    color: var(--crtt-label-color) !important;
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    margin-bottom: .35rem !important;
    display: block !important;
}

/* Reset labels dentro de switches (no aplica el estilo de campo) */
.crtt-booking-widget .switch-light label,
.crtt-booking-widget .switch-light label * {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    margin-bottom: 0 !important;
}

/* ══ FORM GROUPS ══════════════════════════════════════════════ */
.crtt-booking-widget .crtt-form-inner .form-group {
    margin-bottom: 8px !important;
}

/* ══ INPUTS ════════════════════════════════════════════════════ */
.crtt-booking-widget .crtt-form-inner input[type="text"],
.crtt-booking-widget .crtt-form-inner input.form-control {
    background: var(--crtt-input-bg) !important;
    border: 1px solid var(--crtt-input-border) !important;
    border-radius: var(--crtt-radius-sm) !important;
    color: var(--crtt-text) !important;
    padding: 7px 10px !important;   /* reducido de 9px 12px */
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-size: 1rem !important;
    height: auto !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: border-color .2s !important;
}

.crtt-booking-widget .crtt-form-inner input[type="text"]:focus,
.crtt-booking-widget .crtt-form-inner input.form-control:focus {
    border-color: var(--crtt-accent) !important;
    outline: none !important;
    box-shadow: none !important;
}

.crtt-booking-widget .crtt-form-inner input::placeholder {
    color: var(--crtt-text-muted) !important;
}

/* ══ SELECTS ══════════════════════════════════════════════════ */
.crtt-booking-widget .crtt-form-inner select {
    background: var(--crtt-input-bg) !important;
    border: 1px solid var(--crtt-input-border) !important;
    border-radius: var(--crtt-radius-sm) !important;
    color: var(--crtt-text) !important;
    padding: 7px 10px !important;   /* reducido de 9px 12px */
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-size: 1rem !important;
    height: auto !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color .2s !important;
}

.crtt-booking-widget .crtt-form-inner select:focus {
    border-color: var(--crtt-accent) !important;
    outline: none !important;
}

.crtt-booking-widget .crtt-form-inner select option {
    background: var(--crtt-bg-inner);
    color: var(--crtt-text);
}

/* ══ SELECTIZE ═════════════════════════════════════════════════ */
.crtt-booking-widget .selectize-control { width: 100% !important; }

.crtt-booking-widget .selectize-control.single .selectize-input,
.crtt-booking-widget .selectize-input {
    background: var(--crtt-input-bg) !important;
    border: 1px solid var(--crtt-input-border) !important;
    border-radius: var(--crtt-radius-sm) !important;
    color: var(--crtt-text) !important;
    padding: 9px 12px !important;
    box-shadow: none !important;
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-size: 1rem !important;
    min-height: unset !important;
    line-height: 1.4 !important;
}

.crtt-booking-widget .selectize-input input {
    color: var(--crtt-text) !important;
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
}

.crtt-booking-widget .selectize-input input::placeholder {
    color: var(--crtt-text-muted) !important;
}

.crtt-booking-widget .selectize-input.focus {
    border-color: var(--crtt-accent) !important;
    box-shadow: none !important;
}

.crtt-booking-widget .selectize-dropdown {
    background: var(--crtt-bg) !important;
    border: 1px solid var(--crtt-border) !important;
    border-radius: var(--crtt-radius-sm) !important;
    color: var(--crtt-text) !important;
    box-shadow: 0 8px 24px rgba(27,43,107,.12) !important;
    z-index: 99999 !important;
}

.crtt-booking-widget .selectize-dropdown .option {
    color: var(--crtt-text) !important;
    padding: 9px 12px !important;
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-size: 1rem !important;
}

.crtt-booking-widget .selectize-dropdown .option:hover,
.crtt-booking-widget .selectize-dropdown .active {
    background: var(--navy-muted, rgba(27,43,107,.07)) !important;
    color: var(--crtt-accent) !important;
}

/* ══ DATE + TIME ROW ═════════════════════════════════════════════ */
.crtt-booking-widget .crtt-form-inner > form > .row:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex !important;
    gap: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

.crtt-booking-widget .crtt-form-inner > form > .row:not([style*="display:none"]):not([style*="display: none"]) > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 1 1 130px !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
}

.crtt-booking-widget [id$="drop-off-date"][style*="display: block"],
.crtt-booking-widget [id$="drop-off-date"][style*="display:block"] {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

.crtt-booking-widget [id$="drop-off-date"][style*="display: block"] > [class*="col-"],
.crtt-booking-widget [id$="drop-off-date"][style*="display:block"] > [class*="col-"] {
    flex: 1 1 130px !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
}

/* ══ TRANSFERS OPTIONS — 50/50 grid ══════════════════════════ */
.crtt-booking-widget .transfers_options {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.crtt-booking-widget .crtt-opts-row {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-end !important;
}

.crtt-booking-widget .crtt-opt-half {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.crtt-booking-widget .crtt-opt-half[style*="display:none"],
.crtt-booking-widget .crtt-opt-half[style*="display: none"] {
    display: none !important;
}

.crtt-booking-widget .crtt-opt-half label { margin-bottom: 0 !important; }
.crtt-booking-widget .crtt-opt-half .numbers-row,
.crtt-booking-widget .crtt-opt-half select { width: 100% !important; }

/* Vehicle image + travel type row */
.crtt-booking-widget .crtt-opts-row--img-travel { align-items: center !important; gap: 16px !important; }
.crtt-booking-widget .vehicle_type_img { flex-shrink: 0 !important; max-width: 110px !important; }
.crtt-booking-widget .vehicle_type_img img {
    max-height: 65px !important;
    max-width: 110px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Travel type checkboxes */
.crtt-booking-widget [id$="travel_type"] {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
}

.crtt-booking-widget [id$="travel_type"] > label.check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--crtt-text-muted) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.crtt-booking-widget [id$="travel_type"] > label.check:has(input:checked) {
    color: var(--crtt-accent) !important;
}

.crtt-booking-widget [id$="travel_type"] input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: var(--crtt-accent);
    position: static !important;
    opacity: 1 !important;
    margin: 0 !important;
}

/* ══ PASSENGER COUNTER ══════════════════════════════════════════ */
.crtt-booking-widget [id$="passengers"] .numbers-row {
    display: flex !important;
    align-items: stretch !important;
    position: static !important;
    width: 100% !important;
    height: 38px !important;
    overflow: hidden !important;
    background: var(--crtt-input-bg) !important;
    border: 1px solid var(--crtt-input-border) !important;
    border-radius: var(--crtt-radius-sm) !important;
}

.crtt-booking-widget [id$="passengers"] .numbers-row input.qty2 {
    position: static !important;
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important; /* FIX: sin esto el campo no encoge y los botones + / - quedan ocultos */
    height: 100% !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    left: auto !important;
    border: none !important;
    background: transparent !important;
    color: var(--crtt-text) !important;
    box-shadow: none !important;
    text-indent: 0 !important;
}

.crtt-booking-widget [id$="passengers"] .button_inc {
    position: static !important;
    width: 34px !important;
    height: 100% !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--crtt-accent) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.crtt-booking-widget [id$="passengers"] .dec {
    border-right: 1px solid var(--crtt-input-border) !important;
}

.crtt-booking-widget [id$="passengers"] .inc {
    border-left: 1px solid var(--crtt-input-border) !important;
}

.crtt-booking-widget [id$="passengers"] .button_inc:hover {
    background: var(--navy-muted, rgba(27,43,107,.07)) !important;
}

/* ══ FLIGHT NUMBERS — 50/50 ════════════════════════════════════ */
.crtt-booking-widget [id$="flight_no"][style*="display: block"],
.crtt-booking-widget [id$="flight_no"][style*="display:block"] {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-end !important;
}

.crtt-booking-widget .flight_no_label {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-weight: 700 !important;
    color: var(--crtt-label-color) !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    margin-bottom: 0 !important;
}

.crtt-booking-widget .flight_no_label:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.crtt-booking-widget .flight_no_label input {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
}

/* ══ ADD OPTIONS / SERVICES TABLE ══════════════════════ */
.crtt-booking-widget table.options_cart {
    width: 100% !important;
    border: 1px solid var(--crtt-border) !important;
    border-radius: var(--crtt-radius-sm) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 14px !important;
    background: transparent !important;
    color: var(--crtt-text) !important;
    /* FIX CRÍTICO: overflow:visible — el switch-light usa position:absolute
       internamente y overflow:hidden lo recorta */
    overflow: visible !important;
    table-layout: fixed !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* El borde redondeado lo damos al thead y al último tr, no a la tabla */
.crtt-booking-widget table.options_cart thead th {
    background: var(--navy-muted, rgba(27,43,107,.07)) !important;
    color: var(--crtt-accent) !important;
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-size: 1rem !important;
    letter-spacing: .12em !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--crtt-border) !important;
    text-transform: uppercase !important;
    border-radius: var(--crtt-radius-sm) var(--crtt-radius-sm) 0 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* tbody: bloque normal — cada fila ocupa el 100% */
.crtt-booking-widget table.options_cart tbody {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* IMPORTANTE: el PHP pone style="display:block" en el tr.
   Usamos !important para sobreescribir ese inline style */
.crtt-booking-widget table.options_cart tr.service_block {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 15px !important;
    border-bottom: 1px solid var(--crtt-border) !important;
    transition: background 0.2s !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    /* FIX: el switch tiene elements absolutos — overflow visible */
    overflow: visible !important;
}

.crtt-booking-widget table.options_cart tr.service_block:last-child {
    border-bottom: none !important;
}

.crtt-booking-widget table.options_cart tr.service_block:hover {
    background: var(--navy-muted, rgba(27,43,107,.04)) !important;
}

.crtt-booking-widget .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(0, 0, 0, .02) !important;
}

.crtt-booking-widget table.options_cart td {
    border: none !important;
    padding: 0 !important;
    vertical-align: middle !important;
    color: var(--crtt-text) !important;
    overflow: visible !important;
}

/* ZONA 1: Nombre + precio — crece y empuja las otras zonas a sus anchos fijos */
.crtt-booking-widget table.options_cart td:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-size: .95rem !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}

.crtt-booking-widget table.options_cart td:first-child strong {
    color: var(--crtt-accent) !important;
    margin-left: 4px !important;
    white-space: nowrap !important;
}

/* ZONA 2: Counter +/- — ancho fijo 90px, no se comprime jamas */
.crtt-booking-widget table.options_cart td:nth-child(2) {
    flex: 0 0 90px !important;
    width: 90px !important;
    min-width: 90px !important;
    overflow: visible !important;
}

/* ZONA 3: Toggle Yes/No — ancho fijo 76px para el switch de 70px */
.crtt-booking-widget table.options_cart td:last-child {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    padding-left: 6px !important;
    overflow: visible !important;
}

/* ── Stepper qty: FLEX (reemplaza position:absolute) ────────── */
.crtt-booking-widget table.options_cart .numbers-row {
    position: static !important;
    width: 90px !important;
    height: 32px !important;
    overflow: hidden !important;
    background: var(--crtt-input-bg) !important;
    border: 1px solid var(--crtt-input-border) !important;
    border-radius: var(--crtt-radius-sm) !important;
    display: flex !important;
    align-items: stretch !important;
    flex-shrink: 0 !important;
}

.crtt-booking-widget table.options_cart .numbers-row input.qty2 {
    position: static !important;
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    text-align: center !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--crtt-text) !important;
    box-shadow: none !important;
    text-indent: 0 !important;
}

.crtt-booking-widget table.options_cart .button_inc {
    position: static !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: var(--crtt-accent) !important;
    font-size: 15px !important;
    text-indent: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 2 !important;
    transition: background 0.15s !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation !important;
}

.crtt-booking-widget table.options_cart .dec {
    border-right: 1px solid var(--crtt-input-border) !important;
    border-radius: var(--crtt-radius-sm) 0 0 var(--crtt-radius-sm) !important;
}

.crtt-booking-widget table.options_cart .inc {
    border-left: 1px solid var(--crtt-input-border) !important;
    border-radius: 0 var(--crtt-radius-sm) var(--crtt-radius-sm) 0 !important;
}

.crtt-booking-widget table.options_cart .button_inc:hover {
    background: var(--navy-muted, rgba(27,43,107,.07)) !important;
}

.crtt-booking-widget .hide-row {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ══ iOS TOGGLE SWITCH ══════════════════════════════════════════ */
.crtt-booking-widget .switch-light {
    display: block; height: 30px; position: relative;
    padding: 0; margin: 0; width: 70px;
}

.crtt-booking-widget .switch-light * { box-sizing: border-box; }
.crtt-booking-widget .switch-light a { display: block; transition: all 0.3s ease-out; outline: none; }
.crtt-booking-widget .switch-light label,
.crtt-booking-widget .switch-light > span { line-height: 30px; vertical-align: middle; height: 30px; cursor: pointer; }
.crtt-booking-widget .switch-light label   { position: relative; z-index: 3; display: block; width: 100%; }
.crtt-booking-widget .switch-light input   { position: absolute; opacity: 0; z-index: 5; }
.crtt-booking-widget .switch-light input:checked ~ a { right: 0%; }
.crtt-booking-widget .switch-light > span  { position: absolute; left: -100px; width: 100%; margin: 0; padding-right: 100px; text-align: left; }
.crtt-booking-widget .switch-light > span span { position: absolute; top: 0; left: 0; z-index: 5; display: block; width: 50%; margin-left: 100px; text-align: center; }
.crtt-booking-widget .switch-light > span span:last-child { left: 50%; }
.crtt-booking-widget .switch-light a { position: absolute; right: 50%; top: 0; z-index: 4; display: block; width: 50%; height: 100%; padding: 0; }
.crtt-booking-widget .switch-ios.switch-light a { left: 0; width: 30px; background: white; border: 1px solid lightgrey; border-radius: 100%; transition: all 0.3s ease-out; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.crtt-booking-widget .switch-ios.switch-light > span span { width: 100%; left: 0; opacity: 0; color: var(--crtt-text-muted); font-size: .72rem; text-transform: none; }
.crtt-booking-widget .switch-ios.switch-light > span span:first-of-type { opacity: 1; padding-left: 30px; }
.crtt-booking-widget .switch-ios.switch-light > span span:last-of-type  { padding-right: 30px; }
.crtt-booking-widget .switch-ios.switch-light > span:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 100px; top: 0; border-radius: 30px; transition: all 0.5s ease-out; background: var(--crtt-input-bg); border: 1px solid var(--crtt-input-border); }
.crtt-booking-widget .switch-ios.switch-light input:checked ~ a { left: 100%; margin-left: -30px; }
.crtt-booking-widget .switch-ios.switch-light input:checked ~ span:before { border-color: var(--crtt-accent); box-shadow: inset 0 0 0 30px var(--crtt-accent); }
.crtt-booking-widget .switch-ios.switch-light input:checked ~ span span:first-of-type { opacity: 0; }
.crtt-booking-widget .switch-ios.switch-light input:checked ~ span span:last-of-type  { opacity: 1; color: white; }

/* ══ PRICE + BOOK NOW FOOTER BAR ════════════════════════════════ */
.crtt-booking-widget .table.table_summary {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.crtt-booking-widget .crtt-footer-bar {
    display: flex !important;
    align-items: stretch !important;
    background: var(--gray-light, #F5F6FA) !important;
    border-top: 1px solid var(--crtt-border) !important;
    min-height: 54px !important;
    margin: 10px !important;
    border-radius: var(--crtt-radius-sm) !important;
    overflow: hidden !important;
}

.crtt-booking-widget .crtt-footer-price {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    flex: 1 !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.crtt-booking-widget .crtt-footer-label {
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    color: var(--crtt-text-muted) !important;
    font-weight: 600 !important;
    display: block !important;
    line-height: 1 !important;
}

/* Precio: antes amarillo #f0c040, ahora navy */
.crtt-booking-widget .crtt-footer-amount {
    font-family: var(--crtt-font-display, 'Cormorant Garamond'), serif !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--crtt-accent) !important;
    line-height: 1.1 !important;
    display: block !important;
    white-space: nowrap !important;
}

/* Botón Book Now — antes cyan, ahora navy */
.crtt-booking-widget a.book-now-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    min-width: 120px !important;
    width: auto !important;
    background: var(--crtt-btn-bg) !important;
    background-image: none !important;
    color: var(--crtt-btn-text) !important;
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    padding: 0 28px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.crtt-booking-widget a.book-now-btn:hover {
    background: var(--crtt-accent-dark) !important;
    color: white !important;
}

/* total-cost hidden — JS compat only */
.crtt-booking-widget .total-cost {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ══ ERRORS ═════════════════════════════════════════════════════ */
.crtt-booking-widget .error_date:not(input):not(select) {
    color: #dc2626 !important;
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif !important;
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    float: none !important;
    display: block !important;
}

.crtt-booking-widget input.error_date,
.crtt-booking-widget select.error_date {
    border-color: #dc2626 !important;
}

/* ══ EXPERIENCES TAB PLACEHOLDER ════════════════════════════════ */
.crtt-experiences-placeholder {
    background: var(--gray-light, #F5F6FA);
    padding: 50px 20px;
    text-align: center;
    color: var(--crtt-text-muted);
    font-family: var(--crtt-font-body, 'Outfit'), sans-serif;
}

/* ══ DATEPICKER (jQuery UI) — LIGHT ════════════════════════════ */
.ui-datepicker {
    background: #FFFFFF !important;
    border: 1px solid #E8EBF4 !important;
    color: var(--crtt-text) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 30px rgba(27,43,107,.12) !important;
    z-index: 99999 !important;
}

.ui-datepicker .ui-datepicker-header {
    background: #F5F6FA !important;
    border: none !important;
    color: var(--crtt-text) !important;
    border-radius: 8px 8px 0 0 !important;
}

.ui-datepicker .ui-datepicker-title { color: var(--crtt-text) !important; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    color: var(--crtt-accent) !important;
}

.ui-datepicker td a, .ui-datepicker td span {
    color: var(--crtt-text) !important;
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    text-align: center;
    border-radius: 4px !important;
}

.ui-datepicker td a:hover {
    background: rgba(27,43,107,.07) !important;
    color: var(--crtt-accent) !important;
}

.ui-datepicker .ui-state-active {
    background: var(--crtt-accent) !important;
    color: white !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}

.ui-datepicker .ui-datepicker-other-month a { color: #6B7280 !important; }

/* ══ BOOTSTRAP DATEPICKER — LIGHT ════════════════════════════════ */
.datepicker {
    background: #FFFFFF !important;
    border: 1px solid #E8EBF4 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 30px rgba(27,43,107,.12) !important;
    z-index: 99999 !important;
    color: var(--crtt-text) !important;
    padding: 8px !important;
}

.datepicker table tr th,
.datepicker table tr td { color: var(--crtt-text) !important; }

.datepicker thead tr:first-child th,
.datepicker thead tr:first-child { background: #F5F6FA !important; border-radius: 6px !important; }

.datepicker .datepicker-switch {
    color: var(--crtt-text) !important;
    background: #F5F6FA !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.datepicker .datepicker-switch:hover {
    background: var(--crtt-accent) !important;
    color: white !important;
}

.datepicker .prev, .datepicker .next {
    color: var(--crtt-text) !important;
    background: #F5F6FA !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.datepicker .prev:hover, .datepicker .next:hover {
    background: var(--crtt-accent) !important;
    color: white !important;
}

.datepicker .dow, .datepicker thead tr:nth-child(2) th {
    color: var(--crtt-accent) !important;
    background: transparent !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.datepicker table tr td.day {
    color: var(--crtt-text) !important;
    background: transparent !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background: rgba(27,43,107,.07) !important;
    color: var(--crtt-accent) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background: var(--crtt-accent) !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
}

.datepicker table tr td.old,
.datepicker table tr td.new { color: #6B7280 !important; }

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: #D1D5DB !important;
    background: transparent !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: rgba(27,43,107,.07) !important;
    color: var(--crtt-accent) !important;
    border: 1px solid rgba(27,43,107,.2) !important;
    border-radius: 4px !important;
}

/* ══ BOOTSTRAP DATETIMEPICKER — LIGHT ═══════════════════════════ */
.crtt-booking-widget .bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget {
    background: #FFFFFF !important;
    border: 1px solid #E8EBF4 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 30px rgba(27,43,107,.12) !important;
    z-index: 99999 !important;
}

.crtt-booking-widget .bootstrap-datetimepicker-widget td,
.crtt-booking-widget .bootstrap-datetimepicker-widget th,
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th { color: var(--crtt-text) !important; }

.crtt-booking-widget .bootstrap-datetimepicker-widget td.active,
.crtt-booking-widget .bootstrap-datetimepicker-widget td.active:hover,
.bootstrap-datetimepicker-widget td.active,
.bootstrap-datetimepicker-widget td.active:hover {
    background: var(--crtt-accent) !important;
    color: white !important;
    border-radius: 4px !important;
}

.bootstrap-datetimepicker-widget table th { color: var(--crtt-accent) !important; }

.bootstrap-datetimepicker-widget .picker-switch,
.bootstrap-datetimepicker-widget .prev,
.bootstrap-datetimepicker-widget .next { color: var(--crtt-text) !important; }

/* ══ LAYOUT 2 COLUMNAS (container query ≥ 900px) ═══════════════ */
@container crtt-widget (min-width: 900px) {

    .crtt-booking-widget .crtt-form-inner { padding: 18px 20px 14px !important; }

    .crtt-booking-widget .crtt-form-inner > form {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 20px !important;
        row-gap: 0 !important;
        align-items: start !important;
    }

    .crtt-booking-widget .crtt-form-inner > form > [id$="pickup_location"]     { grid-column: 1; grid-row: 1; margin-bottom: 12px !important; }
    .crtt-booking-widget .crtt-form-inner > form > [id$="dropoff_location"]    { grid-column: 1; grid-row: 2; margin-bottom: 12px !important; }
    .crtt-booking-widget .crtt-form-inner > form > .row:nth-of-type(1)         { grid-column: 2; grid-row: 1; margin-bottom: 12px !important; }
    .crtt-booking-widget .crtt-form-inner > form > .transfers_options          { grid-column: 2; grid-row: 2; margin-bottom: 0 !important; }
    .crtt-booking-widget .crtt-form-inner > form > [id$="drop-off-date"]       { grid-column: 2; grid-row: 3; margin-bottom: 8px !important; }
    .crtt-booking-widget .crtt-form-inner > form > [id$="add_extras_services"] { grid-column: 1 / -1; grid-row: 4; }

    .crtt-booking-widget .crtt-footer-bar { margin: 0 !important; border-radius: 0 0 var(--crtt-radius) var(--crtt-radius) !important; }

    .crtt-booking-widget .transfers_options [id$="flight_no"] { width: 100% !important; }
    .crtt-booking-widget .transfers_options [id$="flight_no"] .flight_no_label { flex: 1 1 0 !important; }

    .crtt-booking-widget table.options_cart thead          { display: block !important; width: 100% !important; }
    .crtt-booking-widget table.options_cart thead tr       { display: block !important; width: 100% !important; }
    /* FIX: tbody en grid 2 cols en desktop — las filas siguen siendo flex */
    .crtt-booking-widget table.options_cart tbody          { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; width: 100% !important; }
    .crtt-booking-widget table.options_cart tr.service_block { display: flex !important; min-width: 0 !important; }
}

/* ══ FALLBACK (sin container queries) ══════════════════════════ */
@supports not (container-type: inline-size) {
    @media (min-width: 960px) {
        .crtt-booking-widget { max-width: 100% !important; }
        .crtt-booking-widget .crtt-form-inner > form { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 20px !important; row-gap: 0 !important; align-items: start !important; }
        .crtt-booking-widget .crtt-form-inner > form > [id$="pickup_location"]     { grid-column: 1; grid-row: 1; margin-bottom: 12px !important; }
        .crtt-booking-widget .crtt-form-inner > form > [id$="dropoff_location"]    { grid-column: 1; grid-row: 2; margin-bottom: 12px !important; }
        .crtt-booking-widget .crtt-form-inner > form > .row:nth-of-type(1)         { grid-column: 2; grid-row: 1; margin-bottom: 12px !important; }
        .crtt-booking-widget .crtt-form-inner > form > .transfers_options          { grid-column: 2; grid-row: 2; margin-bottom: 0 !important; }
        .crtt-booking-widget .crtt-form-inner > form > [id$="drop-off-date"]       { grid-column: 2; grid-row: 3; margin-bottom: 8px !important; }
        .crtt-booking-widget .crtt-form-inner > form > [id$="add_extras_services"] { grid-column: 1 / -1; grid-row: 4; }
        .crtt-booking-widget .crtt-footer-bar { margin: 0 !important; border-radius: 0 0 var(--crtt-radius) var(--crtt-radius) !important; }
        .crtt-booking-widget .transfers_options [id$="flight_no"] { width: 100% !important; }
        .crtt-booking-widget .transfers_options [id$="flight_no"] .flight_no_label { flex: 1 1 0 !important; }
        .crtt-booking-widget table.options_cart thead { display: block !important; width: 100% !important; }
        .crtt-booking-widget table.options_cart thead tr { display: block !important; width: 100% !important; }
        .crtt-booking-widget table.options_cart tbody { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; width: 100% !important; }
        .crtt-booking-widget table.options_cart tr.service_block { display: flex !important; min-width: 0 !important; }
    }
}

/* ══ MOBILE ═════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .crtt-booking-widget { border-radius: var(--crtt-radius) !important; width: 100% !important; }
    .crtt-booking-widget .crtt-form-inner { padding: 14px !important; }

    .crtt-booking-widget .crtt-form-inner > form > .row:not([style*="display:none"]):not([style*="display: none"]) { flex-direction: column !important; gap: 8px !important; }
    .crtt-booking-widget .crtt-form-inner > form > .row:not([style*="display:none"]):not([style*="display: none"]) > [class*="col-"] { flex: 1 1 100% !important; width: 100% !important; }

    .crtt-booking-widget [id$="drop-off-date"][style*="display: block"],
    .crtt-booking-widget [id$="drop-off-date"][style*="display:block"] { flex-direction: column !important; gap: 8px !important; }
    .crtt-booking-widget [id$="drop-off-date"][style*="display: block"] > [class*="col-"],
    .crtt-booking-widget [id$="drop-off-date"][style*="display:block"] > [class*="col-"] { flex: 1 1 100% !important; width: 100% !important; }

    .crtt-booking-widget .crtt-opts-row { flex-direction: column !important; gap: 10px !important; }
    .crtt-booking-widget .crtt-opt-half { flex: 1 1 100% !important; width: 100% !important; }
    .crtt-booking-widget .crtt-opts-row--img-travel { flex-direction: row !important; gap: 12px !important; }

    .crtt-booking-widget [id$="flight_no"][style*="display: block"],
    .crtt-booking-widget [id$="flight_no"][style*="display:block"] { flex-direction: column !important; gap: 10px !important; }
    .crtt-booking-widget .flight_no_label { width: 100% !important; flex: 1 1 100% !important; }

    .crtt-booking-widget .crtt-footer-price { padding: 10px 14px !important; }
    .crtt-booking-widget .crtt-footer-amount { font-size: 1.4rem !important; }
    .crtt-booking-widget a.book-now-btn { min-width: 110px !important; font-size: .68rem !important; padding: 0 14px !important; letter-spacing: .06em !important; }
    .datepicker { max-width: calc(100vw - 32px) !important; }

    /* FIX MOBILE — tabla de servicios: padding reducido para que quepan los 3 elementos */
    .crtt-booking-widget table.options_cart tr.service_block {
        padding: 10px 10px !important;
        gap: 8px !important;
    }

    /* FIX MOBILE — nombre del servicio: puede hacer wrap */
    .crtt-booking-widget table.options_cart td:first-child {
        font-size: .88rem !important;
    }

    /* FIX MOBILE — counter: tamaño ligeramente más compacto */
    .crtt-booking-widget table.options_cart td:nth-child(2) {
        flex: 0 0 84px !important;
        width: 84px !important;
        min-width: 84px !important;
    }

    .crtt-booking-widget table.options_cart .numbers-row {
        width: 84px !important;
    }

    /* FIX MOBILE — toggle: área de toque mínima + separación del counter */
    .crtt-booking-widget table.options_cart td:last-child {
        flex: 0 0 74px !important;
        width: 74px !important;
        min-width: 74px !important;
        padding-left: 4px !important;
    }

    /* FIX MOBILE — toggle: área táctil ampliada para evitar clics accidentales */
    .crtt-booking-widget .switch-light {
        width: 70px !important;
        /* Aumentar el área de toque del label para que no compita con el counter */
        touch-action: manipulation !important;
    }

    .crtt-booking-widget .switch-light label {
        /* Área mínima recomendada por iOS/Android: 44×44px */
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
}

@media (max-width: 420px) {
    .crtt-tab { font-size: .68rem !important; padding: .75rem .4rem !important; }
}

/* ══ MOBILE — fuerza layout vertical ═══════════════════════════ */
@container crtt-widget (max-width: 599px) {
    .crtt-booking-widget .crtt-form-inner > form { display: block !important; }
    .crtt-booking-widget table.options_cart tbody { display: block !important; }
}