/* Fundido elegante entre pantallas de booking */
#st-view-vehicles, #st-view-checkout {
    transition: opacity 0.45s cubic-bezier(.4,.2,.2,1), visibility 0.45s cubic-bezier(.4,.2,.2,1);
    opacity: 1;
    visibility: visible;
}
#st-view-vehicles.st-fadeout, #st-view-checkout.st-fadeout {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#st-view-vehicles.st-fadein, #st-view-checkout.st-fadein {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* VEHICLE SKELETON LOADER */
.st-vehicle-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}
.st-vehicle-skeleton-item {
    display: flex;
    align-items: center;
    background: #f7fafd;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #e0e0e0;
    gap: 24px;
    min-height: 110px;
    box-shadow: 0 2px 8px rgba(9,145,223,0.04);
    animation: st-skeleton-fadein 0.5s;
}
.st-vehicle-skeleton-img {
    width: 120px;
    height: 60px;
    background: linear-gradient(90deg, #e9eef3 25%, #f4f7fa 50%, #e9eef3 75%);
    border-radius: 10px;
    flex-shrink: 0;
    animation: st-skeleton-shimmer 1.2s infinite linear;
}
.st-vehicle-skeleton-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.st-vehicle-skeleton-line {
    height: 16px;
    background: linear-gradient(90deg, #e9eef3 25%, #f4f7fa 50%, #e9eef3 75%);
    border-radius: 6px;
    animation: st-skeleton-shimmer 1.2s infinite linear;
}
.st-vehicle-skeleton-title { width: 60%; height: 18px; }
.st-vehicle-skeleton-desc { width: 40%; height: 14px; }
.st-vehicle-skeleton-price { width: 30%; height: 16px; }

@keyframes st-skeleton-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
@keyframes st-skeleton-fadein {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/**
 * TransCity Booking Styles V3.20.0 (Clean Architecture)
 */

:root {
    --st-blue: #0991df;
    --st-dark: #2d2d2d;
    --st-white: #ffffff;
    --st-gray: #f4f5f7;
    --st-border: #e0e0e0;
    --st-radius: 12px;
}

/* RESET */
#st-booking-wrapper *, #st-process-wrapper * {
    font-family: "City Sans", -apple-system, sans-serif !important;
    box-sizing: border-box !important;
}

/* UTILIDADES */
.st-hidden { display: none; }
.st-mt-20 { margin-top: 20px !important; }
.st-text-center { text-align: center !important; }
.st-text-right { text-align: right !important; }
/* Fade transition for field groups */
.st-fade-group {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(.4,.2,.2,1), transform 0.25s cubic-bezier(.4,.2,.2,1);
    will-change: opacity, transform;
}
.st-fade-group.st-fade-out {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}
.st-fade-group.st-fade-in {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Airport shortcode: hide service type selector (keep radios present for logic) */
#st-booking-wrapper.st-airport-only .st-service-tabs {
    display: none !important;
}
div#st-flight-status * {
    font-size: 13px!important;
}

/* --- HOME WRAPPER --- */
#st-booking-wrapper.st-search-mode { max-width: 600px !important; margin: 40px auto !important; }
.st-initial-box { background: rgba(255,255,255,0.95) !important; padding: 40px !important; border-radius: 20px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important; }
.st-title { text-align: center !important; font-weight: 800 !important; font-size: 2.2rem !important; color: var(--st-dark) !important; margin: 0 0 30px !important; }

/* TABS */
.st-service-tabs, .st-pay-tabs { display: flex !important; background: #f0f2f5 !important; padding: 5px !important; border-radius: 10px !important; margin-bottom: 20px !important; gap: 5px !important; }
.st-tab, .st-ptab { flex: 1 !important; text-align: center !important; padding: 12px !important; font-weight: 700 !important; color: #666 !important; cursor: pointer !important; border-radius: 8px !important; transition: 0.2s !important; border: 1px solid transparent !important; background: transparent !important; }
.st-tab.active, .st-ptab.active { background: var(--st-blue) !important; color: #fff !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; }
.st-tab input, .st-ptab input { display: none !important; }

/* INPUTS */
.st-input-lg, .st-header-input {
    width: 100% !important; padding: 14px 16px !important;
    background: #fff !important; border: 1px solid #ccc !important;
    border-radius: 10px !important; font-size: 16px !important;
    color: #363636 !important; height: auto !important;
    line-height: normal !important; margin-bottom: 0 !important;
    font-family: "City Sans", -apple-system, sans-serif !important;
    font-weight: 600 !important;
}
.st-input-lg:focus, .st-header-input:focus { border-color: var(--st-blue) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(9,145,223,0.1) !important; }
.st-form-group { margin-bottom: 20px !important; }
.st-form-group label { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #555 !important; text-transform: uppercase !important; margin-bottom: 8px !important; }

/* Custom Date & Time Input Styling */
input[type="date"].st-input-lg,
input[type="date"].st-header-input,
input[type="time"].st-input-lg,
input[type="time"].st-header-input {
    position: relative !important;
    padding-right: 50px !important;
    cursor: pointer !important;
    color: #363636 !important;
    font-weight: 600 !important;
    font-family: "City Sans", -apple-system, sans-serif !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Calendar Icon for Date Inputs */
input[type="date"].st-input-lg,
input[type="date"].st-header-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230991df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px 20px !important;
}

/* Clock Icon for Time Inputs */
input[type="time"].st-input-lg,
input[type="time"].st-header-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230991df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px 20px !important;
}

/* Hide default calendar/clock icons */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    position: absolute !important;
    right: 0 !important;
    width: 50px !important;
    height: 100% !important;
    cursor: pointer !important;
}

/* Style calendar dropdown */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
    padding: 0 !important;
    color: #363636 !important;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
    color: #363636 !important;
}

input[type="date"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text {
    color: #666 !important;
    padding: 0 !important;
}

input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
    background-color: transparent !important;
    color: #363636 !important;
    font-weight: 600 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}


/* Firefox fallback for time inputs */
@supports (-moz-appearance: none) {
    input[type="time"].st-time-input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230991df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 20px 20px !important;
        padding-right: 42px !important;
    }
}

/* Style datalist dropdown for time selection */
datalist {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Webkit datalist styling (limited support) */
input[type="time"]::-webkit-list-button {
    background-color: var(--st-blue) !important;
    color: white !important;
}

/* Picker opening animation */
@keyframes st-picker-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.st-picker-opening {
    animation: st-picker-pulse 0.3s ease !important;
}

/* Style the calendar popup (Chrome/Edge) */
::-webkit-calendar-picker-indicator:hover {
    cursor: pointer !important;
    opacity: 0.8 !important;
}

/* Enhanced focus states */
input[type="date"]:focus,
input[type="time"]:focus {
    border-color: var(--st-blue) !important;
    box-shadow: 0 0 0 3px rgba(9,145,223,0.1) !important;
}

/* Placeholder styling for empty date/time */
input[type="date"]:invalid,
input[type="time"]:invalid {
    color: #999 !important;
}

/* Form row alignment fix for date/time */
.st-form-row > .st-form-group input[type="date"],
.st-form-row > .st-form-group input[type="time"] {
    height: 52px !important;
}

/* --- Custom Picker Panel --- */
.st-picker-panel {
    position: absolute !important;
    z-index: 9999 !important;
    background: #fff !important;
    border: 1px solid #e6e9ee !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(9,145,223,0.15) !important;
    padding: 14px !important;
    min-width: 260px !important;
    max-height: 340px !important;
    overflow: auto !important;
    box-sizing: border-box !important;
}
.st-picker-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    font-weight: 800 !important;
    color: var(--st-dark) !important;
}
.st-picker-title { font-size: 15px !important; }
.st-picker-nav {
    background: #f0f4f8 !important; border: 1px solid #d9e2ec !important; color: #0991df !important;
    border-radius: 8px !important; width: 32px !important; height: 32px !important; cursor: pointer !important;
}
.st-picker-nav:hover { background: #e8f3fb !important; }
.st-picker-grid { display: grid !important; gap: 2px !important; box-sizing: border-box !important; }
.st-time-grid { grid-template-columns: repeat(4, minmax(60px, 1fr)) !important; }
.st-date-grid { grid-template-columns: repeat(7, 1fr) !important; }
.st-date-empty { height: 34px !important; }
.st-time-option, .st-date-cell {
    height: 34px !important; padding: 3px 6px !important; border: 1px solid #e6e9ee !important; border-radius: 8px !important;
    background: #f9fbfd !important; color: #2d2d2d !important; font-weight: 600 !important; cursor: pointer !important; text-align: center !important;
    display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important;
}
.st-time-option:hover, .st-date-cell:hover { border-color: var(--st-blue) !important; }
.st-time-option.active, .st-date-cell.active { background: #0991df !important; color: #fff !important; border-color: #0991df !important; }
.st-date-cell.disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

/* Ensure City Sans throughout picker panel */
.st-picker-panel, .st-picker-panel * {
    font-family: "City Sans", -apple-system, sans-serif !important;
}

/* BOTONES */
.st-btn-primary { width: 100% !important; background-color: var(--st-blue) !important; color: #fff !important; padding: 16px !important; font-size: 18px !important; font-weight: 800 !important; border-radius: 10px !important; border: none !important; cursor: pointer !important; text-transform: uppercase !important; text-decoration: none !important; display: block !important; text-align: center !important; }
.st-btn-update { background-color: var(--st-dark) !important; color: #fff !important; border: none !important; padding: 0 25px !important; border-radius: 8px !important; font-weight: 700 !important; cursor: pointer !important; text-transform: uppercase !important; height: 45px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; flex-shrink: 0 !important; margin-top: 24px !important; }
.st-btn-inline { height: 48px !important; padding: 0 20px !important; background: #f0f0f0 !important; border: 1px solid #ccc !important; border-radius: 10px !important; font-weight: 700 !important; color: #555 !important; cursor: pointer !important; margin-left: 10px !important; }

/* Smooth UI transitions */
.st-btn-primary, .st-btn-update, .st-btn-inline, .st-btn-select, .st-cal-btn, .st-btn-home {
    transition: background-color .18s cubic-bezier(.2,.9,.3,1), color .14s ease, transform .12s ease, box-shadow .12s ease;
}
.st-vehicle-item {
    transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s cubic-bezier(.2,.9,.3,1), border-color .12s ease;
}
.st-card, .st-sidebar-card {
    transition: box-shadow .18s ease, transform .12s ease, background-color .12s ease;
}
.st-input-lg, .st-header-input {
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.st-tip-btn { transition: background-color .14s ease, color .14s ease, transform .12s ease; }
.st-price-breakdown, #st-live-total { transition: color .18s ease; }

/* LAYOUT PROCESS */
#st-process-wrapper { max-width: 1200px !important; margin: 40px auto !important; padding: 0 20px !important; }
.st-process-layout { display: flex !important; gap: 40px !important; align-items: flex-start !important; }
.st-process-left { flex: 1.6 !important; }
.st-process-right { flex: 1 !important; position: sticky !important; top: 30px !important; }
.st-success-flow .st-edit-bar-container { display: none !important; }
@media (max-width: 900px) { .st-process-layout { flex-direction: column-reverse !important; } .st-process-right { position: static !important; } }

/* HEADER BAR */
.st-edit-bar-container { background: #fff !important; padding: 20px !important; border-radius: 12px !important; border: 1px solid #eee !important; box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important; margin-bottom: 30px !important; }
.st-edit-bar-inner { display: flex !important; gap: 15px !important; flex-wrap: wrap !important; align-items: center !important; }
.st-edit-group { flex: 1 !important; min-width: 150px !important; }
.st-edit-group.small { flex: 0 0 160px !important; min-width: 160px !important; }
.st-header-input { background: #f9f9f9 !important; border-color: #ddd !important; height: 45px !important; font-size: 16px !important; display: flex !important; align-items: center !important; padding: 12px 14px !important; box-sizing: border-box !important; }
input[type="date"].st-header-input,
input[type="time"].st-header-input {
    padding-right: 50px !important;
}

/* CARDS */
.st-card, .st-sidebar-card { background: #fff !important; padding: 30px !important; border-radius: 16px !important; border: 1px solid #eee !important; box-shadow: 0 5px 20px rgba(0,0,0,0.02) !important; margin-bottom: 20px !important; }
.st-sidebar-card { padding: 0 !important; } /* Mapa full width */

/* VEHICLES */
.st-vehicle-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.st-vehicle-item {
    background: #fff !important;
    border: 1px solid #eee !important;
    padding: 25px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: 0.2s !important;
    opacity: 0;
    transform: translateY(20px);
    animation: st-vehicle-fadein 0.7s cubic-bezier(.4,.2,.2,1) forwards;
}
.st-vehicle-item:hover {
    border-color: var(--st-blue) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(9,145,223,0.1) !important;
}

@keyframes st-vehicle-fadein {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Secuencial: cada fila con delay incremental */
.st-vehicle-item.st-fadein-1 { animation-delay: 0.08s; }
.st-vehicle-item.st-fadein-2 { animation-delay: 0.18s; }
.st-vehicle-item.st-fadein-3 { animation-delay: 0.28s; }
.st-vehicle-item.st-fadein-4 { animation-delay: 0.38s; }
.st-vehicle-item.st-fadein-5 { animation-delay: 0.48s; }
.st-vehicle-item.st-fadein-6 { animation-delay: 0.58s; }
.st-vehicle-item.st-fadein-7 { animation-delay: 0.68s; }
.st-vehicle-item.st-fadein-8 { animation-delay: 0.78s; }
.st-vehicle-item.st-fadein-9 { animation-delay: 0.88s; }
.st-vehicle-item.st-fadein-10 { animation-delay: 0.98s; }
.st-vehicle-info { display: flex !important; gap: 20px !important; align-items: center !important; }
.st-vehicle-info img { width: 140px !important; height: auto !important; }
.st-vehicle-meta { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.st-vehicle-pax { font-size: 0.9rem !important; color: #555 !important; }
.st-vehicle-amenities { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.st-amenity { font-size: 0.75rem !important; color: #444 !important; background: #f4f6f8 !important; border: 1px solid #e6e9ee !important; padding: 2px 8px !important; border-radius: 999px !important; line-height: 1.4 !important; }
.st-v-price { font-size: 24px !important; font-weight: 800 !important; color: var(--st-dark) !important; display: block !important; text-align: right !important; }
.st-btn-select { background-color: var(--st-blue) !important; color: #fff !important; padding: 10px 20px !important; border-radius: 8px !important; font-weight: 700 !important; text-transform: uppercase !important; border: none !important; cursor: pointer !important; }

/* CHECKOUT */
.st-form-row { display: flex !important; gap: 20px !important; margin-bottom: 15px !important; }
.st-form-group { flex: 1 !important; }
.st-input-with-btn { display: flex !important; align-items: center !important; }
.st-phone-wrap { display: flex !important; gap: 8px !important; align-items: center !important; }
.st-flag-icon { width: 20px !important; height: 14px !important; border-radius: 2px !important; object-fit: cover !important; border: 1px solid #ddd !important; display: none; }
.st-country-search { flex: 0 0 110px !important; max-width: 110px !important; padding: 10px 10px !important; font-size: 14px !important; }
.st-country-select { flex: 0 0 80px !important; max-width: 80px !important; padding-left: 6px !important; padding-right: 6px !important; }
.st-phone-wrap #st-c-phone { flex: 1 1 auto !important; min-width: 0 !important; }
.st-country-custom { margin-top: 10px !important; }
.st-flight-input { flex: 0 0 50% !important; max-width: 50% !important; }
.st-section-title, .st-section-subtitle { margin: 0 0 20px !important; font-weight: 800 !important; color: var(--st-dark) !important; }
.st-section-subtitle { margin-top: 30px !important; border-bottom: 1px solid #eee !important; padding-bottom: 10px !important; font-size: 1.1rem !important; }
@media (max-width: 600px) {
    .st-phone-wrap { flex-direction: column !important; }
    .st-country-search, .st-country-select { flex: 1 !important; max-width: 100% !important; }
}

/* EXTRAS */
.st-extra-row { padding: 12px 0 !important; border-bottom: 1px solid #eee !important; }
.st-checkbox-label { display: flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; }
.st-extra-check, #st-terms { width: 20px !important; height: 20px !important; accent-color: var(--st-blue) !important; }

/* TIPS */
.st-tip-options { display: flex !important; gap: 10px !important; margin-bottom: 20px !important; }
.st-tip-btn { flex: 1 !important; padding: 12px !important; border: 1px solid #ddd !important; background: #fff !important; border-radius: 8px !important; font-weight: 700 !important; cursor: pointer !important; text-align: center !important; }
.st-tip-btn.active { background: var(--st-blue) !important; color: #fff !important; border-color: var(--st-blue) !important; }

/* PAYMENT BOXES */
.st-payment-box { padding: 20px !important; background: #f9f9f9 !important; border-radius: 12px !important; border: 1px solid #eee !important; margin-bottom: 20px !important; }
.st-manual-pay { background: #f0f9ff !important; border-color: #bde0fd !important; }
.st-pay-title { margin: 0 0 10px !important; color: var(--st-blue) !important; font-size: 16px !important; font-weight: 700 !important; }
.st-pay-desc { margin: 0 !important; font-size: 14px !important; color: #444 !important; white-space: pre-wrap !important; }

/* SIDEBAR & TOTALS */
.st-map-canvas { width: 100% !important; height: 250px !important; background: #eee !important; }
.st-sidebar-content { padding: 25px !important; }
.st-route-summary { font-size: 15px !important; color: #666 !important; padding-bottom: 15px !important; margin-bottom: 15px !important; border-bottom: 1px solid #eee !important; }
.st-total-box { display: flex !important; justify-content: space-between !important; font-size: 24px !important; font-weight: 900 !important; color: var(--st-blue) !important; margin-top: 15px !important; padding-top: 15px !important; border-top: 2px dashed #eee !important; }
.st-price-breakdown { font-size: 13px !important; color: #888 !important; text-align: right !important; margin-top: 5px !important; }

/* RECEIPT & SUCCESS */
.st-success-card { text-align: center !important; padding: 50px !important; }
.st-icon-success { font-size: 80px !important; color: #27ae60 !important; margin-bottom: 20px !important; line-height: 1 !important; }
.st-success-title { font-size: 2.5rem !important; color: var(--st-blue) !important; margin: 0 !important; }
.st-receipt-wrapper { border: 1px solid #e0e0e0 !important; border-radius: 12px !important; overflow: hidden !important; text-align: left !important; margin: 30px 0 !important; }
.st-receipt-wrapper #st-total-paid-label { font-size: 15px !important; }

/* Requested receipt/button tweaks */
span#st-total-paid-label { font-size: 15px !important; }

.st-btn-home {
    background: #f0f2f5 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    padding: 7px 25px !important;
    border-radius: 0.5em !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: inline-block !important;
    margin-top: 30px !important;
    transition: 0.2s !important;
}

.st-btn-primary:hover {
    background-color: #0991df !important;
    color: white !important;
}

.st-receipt-header {
    background: var(--st-blue) !important;
    color: #fff !important;
    padding: 20px !important;
    text-align: center !important;
    border-radius: 1em !important;
    margin-top: 1em !important;
}
.st-receipt-body { padding: 30px !important; }

/* CALENDAR BUTTONS */
.st-calendar-wrapper { margin-top: 30px !important; padding-top: 20px !important; border-top: 1px solid #eee !important; }
.st-cal-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 24px !important; border-radius: 6px !important; text-decoration: none !important; font-size: 14px !important; font-weight: 700 !important; border: 2px solid transparent !important; transition: all 0.2s !important; margin: 6px 6px !important; background: #fff !important; }
.st-cal-btn:hover { transform: translateY(-2px) !important; }
.st-cal-google { border-color: #0991df !important; color: #0991df !important; }
.st-cal-google:hover { background: #0991df !important; color: #fff !important; }
.st-cal-outlook { border-color: #0078d4 !important; color: #0078d4 !important; }
.st-cal-outlook:hover { background: #0078d4 !important; color: #fff !important; }
.st-cal-apple { border-color: #333 !important; color: #333 !important; }
.st-cal-apple:hover { background: #333 !important; color: #fff !important; }

/* GOOGLE AUTOCOMPLETE */
.pac-container { z-index: 999999 !important; border-radius: 0 0 10px 10px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; border: 1px solid #eee !important; font-family: sans-serif !important; }
.pac-item { padding: 10px 15px !important; font-size: 14px !important; }

/* TERMS MODAL */
.st-terms-trigger { color: var(--st-blue) !important; text-decoration: underline !important; font-weight: 700 !important; cursor: pointer !important; }
#st-terms-modal-overlay { position: fixed !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(0, 0, 0, 0.45) !important; padding: 20px !important; z-index: 9999 !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; }
#st-terms-modal-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.st-terms-modal { width: min(95%, 800px) !important; height: 80vh !important; background: #fff !important; border-radius: 20px !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; opacity: 0; transform: scale(0.98); transition: opacity .3s ease, transform .3s ease; }
#st-terms-modal-overlay.is-open .st-terms-modal { opacity: 1; transform: scale(1); }
.st-terms-content { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; }
.st-terms-content iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; }
.st-terms-close { position: relative !important; align-self: flex-end !important; margin: 10px 12px 0 0 !important; background: transparent !important; border: none !important; font-size: 18px !important; font-weight: 700 !important; cursor: pointer !important; color: #333 !important; }

/* AMENITIES LIST */
.st-amenities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.st-amenities-list li {
    background: #f0f0f0;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
}


/* Mobile responsive tweaks */
@media (max-width: 768px) {
    #st-booking-wrapper.st-search-mode { max-width: 100% !important; margin: 20px 15px !important; }
    .st-initial-box { padding: 25px 15px !important; }
    .st-title { font-size: 1.8rem !important; }
    .st-form-row { flex-direction: column !important; gap: 12px !important; }
    .st-form-group { flex: 1 !important; }
    .st-edit-bar-container { padding: 15px !important; margin-bottom: 20px !important; }
    .st-edit-bar-inner { gap: 10px !important; }
    .st-edit-group { min-width: 100% !important; flex: 1 0 calc(50% - 5px) !important; }
    .st-edit-group.small { flex: 1 0 calc(50% - 5px) !important; }
    .st-header-input { font-size: 15px !important; height: 42px !important; padding: 10px 12px !important; }
    .st-btn-update { padding: 0 20px !important; font-size: 14px !important; }
}

@media (max-width: 600px) {
    #st-booking-wrapper.st-search-mode { margin: 15px 10px !important; }
    .st-initial-box { padding: 20px 12px !important; }
    .st-title { font-size: 1.5rem !important; margin-bottom: 20px !important; }
    .st-tab, .st-ptab { padding: 10px 8px !important; font-size: 13px !important; }
    .st-form-row { flex-direction: column !important; gap: 10px !important; }
    .st-input-lg { font-size: 15px !important; padding: 12px 14px !important; }
    input[type="date"].st-input-lg,
    input[type="time"].st-input-lg {
        font-size: 15px !important;
        padding: 12px 14px !important;
        height: 50px !important;
        padding-right: 50px !important;
    }
    .st-edit-bar-container { padding: 12px 10px !important; margin-bottom: 15px !important; }
    .st-edit-bar-inner { flex-direction: column !important; gap: 8px !important; }
    .st-edit-group { flex: 1 !important; min-width: 100% !important; }
    .st-edit-group.small { flex: 1 !important; min-width: 100% !important; }
    .st-header-input { font-size: 14px !important; height: 40px !important; padding: 8px 10px !important; }
    input[type="date"].st-header-input,
    input[type="time"].st-header-input {
        font-size: 14px !important;
        padding: 8px 10px !important;
        height: 40px !important;
        padding-right: 45px !important;
    }
    .st-btn-update { width: 100% !important; padding: 0 !important; font-size: 13px !important; height: 40px !important; }
    .st-form-group label { font-size: 12px !important; margin-bottom: 6px !important; }
    .st-vehicle-info { flex-direction: column !important; gap: 12px !important; }
    .st-vehicle-info img { width: 100% !important; max-width: 140px !important; }
    .st-v-price { text-align: left !important; }
    .st-btn-select { padding: 8px 16px !important; font-size: 13px !important; }
    .st-phone-wrap { flex-direction: column !important; }
    .st-country-search, .st-country-select { flex: 1 !important; max-width: 100% !important; }
    .st-flight-input { flex: 1 !important; max-width: 100% !important; }
    .st-process-layout { gap: 18px !important; }
    .st-process-left, .st-process-right { width: 100% !important; }
    .st-receipt-wrapper { margin: 16px 0 !important; }
    .st-receipt-body { padding: 16px !important; }
    .st-success-card { padding: 28px !important; }
    .st-total-box { font-size: 20px !important; }
    span#st-total-paid-label { font-size: 14px !important; }
    .st-receipt-wrapper #st-total-paid-label { font-size: 14px !important; }
    .st-btn-home { padding: 8px 18px !important; margin-top: 18px !important; border-radius: 0.4em !important; }
    .st-receipt-header { padding: 14px !important; border-radius: 0.8em !important; margin-top: 0.6em !important; }
    .st-sidebar-content { padding: 16px !important; }
    .st-map-canvas { height: 180px !important; }
    .st-terms-modal { width: 95% !important; height: 78vh !important; }
}

/* Hover oscurecido suave */
.st-btn-primary:hover {
    background-color: #0770b6 !important;
    color: #e0e0e0 !important;
    filter: brightness(0.92);
    transition: background-color 0.22s cubic-bezier(.4,.2,.2,1), color 0.18s, filter 0.22s;
}
.st-btn-select:hover {
    background-color: #0770b6 !important;
    color: #e0e0e0 !important;
    filter: brightness(0.92);
    transition: background-color 0.22s cubic-bezier(.4,.2,.2,1), color 0.18s, filter 0.22s;
}
.st-btn-update:hover {
    background-color: #222 !important;
    color: #e0e0e0 !important;
    filter: brightness(0.92);
    transition: background-color 0.22s cubic-bezier(.4,.2,.2,1), color 0.18s, filter 0.22s;
}