/* ==========================================================================
   GetSeat Transfer & Tours — Frontend & Driver Portal Stylesheet
   Brand Colors: Aegean Electric Cobalt #0066FF, Obsidian Black #0A0D12
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Δυναμική κληρονόμηση γενικών χρωμάτων από το WoodMart */
    --gs-primary: var(--wd-primary-color, #0066FF);
    --gs-primary-hover: var(--wd-primary-color-hover, #0052cc);

    /* Δυναμική κληρονόμηση κουμπιών από το WoodMart Button Settings (Default & Accent buttons) */
    --gs-btn-bg: var(--btn-accented-bgcolor, var(--btn-default-bgcolor, #0A0D12));
    --gs-btn-bg-hover: var(--btn-accented-bgcolor-hover, var(--btn-default-bgcolor-hover, #121721));
    --gs-btn-color: var(--btn-accented-color, var(--btn-default-color, #ffffff));
    --gs-btn-color-hover: var(--btn-accented-color-hover, var(--wd-primary-color, #0066FF));
    --gs-btn-radius: var(--btn-accented-brd-radius, var(--btn-default-brd-radius, 6px));
    --gs-btn-font: var(--wd-entities-title-font, 'Montserrat', sans-serif);
    --gs-btn-font-weight: 700;
    --gs-btn-transform: none;
    --gs-btn-letter-spacing: 0.3px;

    --gs-dark: var(--wd-entities-title-color, #0A0D12);
    --gs-dark-surface: #121721;
    --gs-slate: #4B5563;
    --gs-slate-light: #94A3B8;
    --gs-border: #E5E7EB;
    --gs-bg-light: #F8FAFC;
    --gs-success: #10B981;
    --gs-warning: #F59E0B;
    --gs-danger: #EF4444;
    --gs-font-title: var(--wd-entities-title-font, 'Montserrat', sans-serif);
    --gs-font-body: var(--wd-text-font, 'Inter', sans-serif);
    --gs-radius: 16px;
    --gs-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   UNIFIED BUTTON DESIGN SYSTEM (WoodMart Inherited)
   ========================================================================== */
.gs-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gs-btn-bg, #0A0D12) !important;
    color: var(--gs-btn-color, #ffffff) !important;
    border: none !important;
    border-radius: var(--gs-btn-radius, 6px) !important;
    font-family: var(--gs-btn-font, var(--gs-font-title, 'Montserrat', sans-serif)) !important;
    font-size: 14.5px !important;
    font-weight: var(--gs-btn-font-weight, 700) !important;
    text-transform: var(--gs-btn-transform, none) !important;
    letter-spacing: var(--gs-btn-letter-spacing, 0.3px) !important;
    padding: 14px 26px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
}

.gs-btn-primary:hover {
    background: var(--gs-btn-bg-hover, #121721) !important;
    color: var(--gs-btn-color-hover, #0066FF) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

.gs-btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.gs-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #F1F5F9 !important;
    color: #334155 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--gs-btn-radius, 10px) !important;
    font-family: var(--gs-btn-font, var(--gs-font-title, 'Montserrat', sans-serif)) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 13px 22px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.gs-btn-secondary:hover {
    background: #E2E8F0 !important;
    color: #0F172A !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   WIZARD CONTAINER & PROGRESS BAR
   ========================================================================== */

.getseat-booking-wrapper,
.getseat-driver-portal-wrapper {
    font-family: var(--gs-font-body);
    color: #1F2937;
    max-width: 1140px;
    margin: 30px auto;
    background: #ffffff;
    border-radius: var(--gs-radius);
    box-shadow: var(--gs-shadow);
    border: 1px solid var(--gs-border);
    overflow: visible !important;
    position: relative;
    z-index: 20;
}

.gs-wizard-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0A0D12;
    padding: 18px 30px;
    border-bottom: 2px solid var(--gs-primary);
    border-top-left-radius: var(--gs-radius, 16px);
    border-top-right-radius: var(--gs-radius, 16px);
}

.gs-progress-step {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.25s ease;
}

.gs-progress-step.active {
    opacity: 1;
}

.gs-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1F2937;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gs-font-title);
    font-size: 13px;
    font-weight: 800;
    border: 2px solid #374151;
    transition: all 0.25s;
}

.gs-progress-step.active .gs-step-circle {
    background: var(--gs-primary);
    color: #ffffff;
    border-color: #BFDBFE;
    box-shadow: 0 0 12px rgba(0, 102, 255, 0.6);
}

.gs-step-info {
    display: flex;
    flex-direction: column;
}

.gs-step-num {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--gs-primary);
    text-transform: uppercase;
}

.gs-step-text {
    font-family: var(--gs-font-title);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.gs-progress-line {
    flex: 1;
    height: 2px;
    background: #374151;
    margin: 0 16px;
    transition: all 0.25s;
}

.gs-progress-line.active {
    background: var(--gs-primary);
}

/* WIZARD PAGES */
.gs-wizard-page {
    display: none;
    animation: fadeIn 0.3s ease;
}

.gs-wizard-page.active {
    display: block;
}

.gs-step-body {
    padding: 24px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tab Header (in Step 1) */
.gs-tabs-header {
    display: flex;
    background: #F1F5F9;
    border-bottom: 2px solid var(--gs-border);
}

.gs-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 16px 20px;
    font-family: var(--gs-font-title);
    font-size: 15px;
    font-weight: 700;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s ease;
}

.gs-tab-btn:hover {
    color: #111827;
    background: rgba(0, 0, 0, 0.03);
}

.gs-tab-btn.active {
    color: var(--gs-primary);
    background: #ffffff;
    border-bottom: 3px solid var(--gs-primary);
}

.gs-tab-content {
    display: none;
}

.gs-tab-content.active {
    display: block;
    animation: fadeIn 0.25s ease;
}

/* Selected Route Pill on Step 2 */
.gs-selected-route-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #EFF6FF;
    border: 1.5px solid #BFDBFE;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.gs-srp-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gs-srp-icon { font-size: 20px; }
.gs-srp-text { font-size: 14px; color: #1E40AF; }

.gs-btn-change-route {
    background: #ffffff;
    border: 1px solid #BFDBFE;
    color: var(--gs-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.gs-btn-change-route:hover {
    background: var(--gs-primary);
    color: #ffffff;
}

/* Form Styles */
.gs-form {
    padding: 0;
}

.gs-section-title {
    font-family: var(--gs-font-title);
    font-size: 16px;
    font-weight: 800;
    color: var(--gs-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gs-section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--gs-primary);
    border-radius: 2px;
}

.gs-grid {
    display: grid;
    gap: 16px;
}

.gs-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gs-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gs-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

#getseat-step1-search {
    margin: 20px auto 25px;
    padding: 0 10px 30px;
    position: relative;
    z-index: 50;
}

.gs-field-group {
    display: flex;
    flex-direction: column;
}

.gs-field-group label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.gs-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.gs-input-icon-wrap .gs-icon {
    position: absolute;
    left: 12px;
    font-size: 16px;
    pointer-events: none;
}

.gs-form input[type="text"],
.gs-form input[type="email"],
.gs-form input[type="tel"],
.gs-form input[type="date"],
.gs-form input[type="time"],
.gs-form textarea,
.gs-select-quick {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--gs-border);
    border-radius: 8px;
    font-family: var(--gs-font-body);
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    transition: all 0.2s;
    box-sizing: border-box;
}

.gs-input-icon-wrap input {
    padding-left: 38px !important;
}

.gs-form input:focus,
.gs-form textarea:focus,
.gs-select-quick:focus {
    outline: none;
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

.gs-hint {
    font-size: 11px;
    color: #6B7280;
    margin-top: 4px;
}

/* Quick Routes bar */
.gs-quick-routes {
    background: #EFF6FF;
    border: 1px dashed #BFDBFE;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.gs-quick-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #1E40AF;
    margin-bottom: 6px;
}

.gs-select-quick {
    background: #ffffff;
    font-weight: 500;
}

/* Tours Explorer Section */
.gs-tour-section-intro {
    margin: 15px 0 20px;
    text-align: center;
}

.gs-tour-section-title {
    font-family: var(--gs-font-title);
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.gs-tour-section-sub {
    font-size: 13.5px;
    color: #6B7280;
    margin: 0 auto;
    max-width: 680px;
    line-height: 1.5;
}

/* Tours Grid */
.gs-tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.gs-tour-card {
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    padding: 0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.gs-tour-card:hover {
    border-color: #93C5FD;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(1, 111, 248, 0.12);
}

.gs-tour-card.selected {
    border-color: var(--gs-primary);
    background: #F8FAFC;
    box-shadow: 0 8px 24px rgba(1, 111, 248, 0.16);
}

/* Tour Card Cover Photo */
.gs-tour-card-img-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #0f172a;
}

.gs-tour-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-tour-card:hover .gs-tour-card-img {
    transform: scale(1.06);
}

.gs-tour-card-img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}

.gs-tour-card-img-wrap .gs-tour-card-badge-wrap {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    margin-bottom: 0;
}

.gs-tour-card-img-wrap .gs-tour-duration {
    font-size: 11px;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(6px);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.gs-tour-time-pill {
    font-size: 11px;
    background: rgba(2, 132, 199, 0.88);
    backdrop-filter: blur(6px);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

input.gs-time-locked {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    cursor: default !important;
    user-select: none;
}

.gs-tour-selected-pill {
    display: none;
    font-size: 11px;
    font-weight: 800;
    background: var(--gs-primary);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(1, 111, 248, 0.4);
}

.gs-tour-card.selected .gs-tour-selected-pill {
    display: inline-block;
}

.gs-tour-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.gs-tour-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.gs-tour-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: #111827;
    line-height: 1.35;
}

.gs-tour-price {
    font-family: var(--gs-font-title);
    font-weight: 800;
    color: var(--gs-primary);
    font-size: 15px;
}

.gs-tour-desc {
    font-size: 12.5px;
    color: #4B5563;
    line-height: 1.5;
    margin: 0 0 12px;
    flex-grow: 1;
}

.gs-tour-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    font-size: 11.5px;
    color: #065F46;
    background: #F0FDF4;
    border-radius: 10px;
    padding: 10px 12px;
}

.gs-tour-highlights li {
    margin-bottom: 4px;
    line-height: 1.35;
}

.gs-tour-highlights li:last-child {
    margin-bottom: 0;
}

.gs-tour-card-footer {
    margin-top: auto;
    padding-top: 8px;
}

.gs-btn-select-tour {
    width: 100%;
    padding: 11px 16px;
    background: var(--gs-btn-bg, #0A0D12);
    color: var(--gs-btn-color, #ffffff);
    border: none;
    border-radius: var(--gs-btn-radius, 6px);
    font-family: var(--gs-btn-font, var(--gs-font-title));
    font-size: 13.5px;
    font-weight: var(--gs-btn-font-weight, 700);
    text-transform: var(--gs-btn-transform, none);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.gs-tour-card:hover .gs-btn-select-tour,
.gs-tour-card.selected .gs-btn-select-tour {
    background: var(--gs-btn-bg-hover, #121721);
    color: var(--gs-btn-color-hover, #0066FF);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Dedicated Step 2 Tour Schedule Box */
.gs-step2-tour-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.gs-step2-tour-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.gs-step2-tour-badge-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-step2-tour-icon {
    font-size: 26px;
}

.gs-step2-tour-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: #64748b;
    display: block;
}

.gs-step2-tour-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.gs-step2-tour-duration {
    background: #f0fdf4;
    color: #166534;
    font-weight: 700;
    font-size: 12.5px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
}

.gs-step2-tour-fields-grid {
    display: grid;
    grid-template-columns: 1.8fr 1.1fr 1fr 1fr;
    gap: 12px;
    align-items: flex-end;
}

.gs-step2-tour-fields-grid .gs-field-group {
    margin-bottom: 0;
}

.gs-step2-tour-fields-grid label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.gs-step2-tour-fields-grid input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: #1e293b;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.gs-step2-tour-fields-grid input:focus {
    border-color: var(--gs-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}

@media (max-width: 860px) {
    .gs-step2-tour-fields-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .gs-step2-tour-fields-grid {
        grid-template-columns: 1fr;
    }
}

/* Tour Step 1 Proceed Action Bar */
.gs-tour-proceed-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 24px;
    margin-top: 22px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.gs-tour-proceed-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gs-tour-proceed-lbl {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    font-weight: 700;
}

.gs-tour-proceed-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.gs-tour-proceed-btn {
    background: var(--gs-btn-bg, #0A0D12);
    color: var(--gs-btn-color, #ffffff);
    border: none;
    border-radius: var(--gs-btn-radius, 6px);
    padding: 14px 28px;
    font-family: var(--gs-btn-font, var(--gs-font-title));
    font-size: 14.5px;
    font-weight: var(--gs-btn-font-weight, 700);
    text-transform: var(--gs-btn-transform, none);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.gs-tour-proceed-btn:hover,
.gs-tf-sidebar-continue-btn:hover {
    background: var(--gs-btn-bg-hover, #121721) !important;
    color: var(--gs-btn-color-hover, #0066FF) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

@media (max-width: 640px) {
    .gs-tour-proceed-bar {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
        text-align: center;
    }
    .gs-tour-proceed-btn {
        justify-content: center;
    }
}

/* Dedicated Tour Booking Bar */
.gs-bl-col-tour-info {
    flex: 2.2;
    background: #F8FAFC;
    border-radius: 12px;
    padding: 8px 12px;
}

.gs-tour-active-display {
    font-size: 13.5px;
    font-weight: 800;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.gs-select-tour-bl {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    outline: none;
    padding: 2px 0;
    cursor: pointer;
}

/* ==========================================================================
   TRANSFEERO-STYLE LUXURY STEP 2 LAYOUT
   ========================================================================== */

.gs-step2-transfeero-wrap,
.gs-step3-transfeero-wrap,
.gs-step4-transfeero-wrap {
    padding: 24px;
    background: #FAFAFA;
}

.gs-tf-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    align-items: start;
}

.gs-tf-main-col {
    display: flex;
    flex-direction: column;
}

.gs-tf-top-notice {
    font-size: 13px;
    font-weight: 700;
    color: #4B5563;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* VEHICLE CARDS */
.gs-tf-vehicle-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gs-tf-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 18px;
    padding: 20px 24px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.gs-tf-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.gs-tf-card.selected {
    border-color: #F59E0B; /* Golden highlight like Transfeero */
    background: #FFFDF9;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15);
}

/* Disabled / Ineligible Vehicle Card (Capacity Exceeded) */
.gs-tf-card.gs-card-disabled {
    opacity: 0.50 !important;
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    cursor: not-allowed !important;
    filter: grayscale(45%) !important;
    box-shadow: none !important;
    transform: none !important;
}

.gs-tf-card.gs-card-disabled:hover {
    border-color: #EF4444 !important;
    background: #FEF2F2 !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.08) !important;
    transform: none !important;
}

.gs-tf-card.gs-card-disabled .gs-tf-current-price {
    color: #94A3B8 !important;
}

.gs-tf-card-capacity-notice {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #FEE2E2;
    color: #B91C1C;
    border: 1px solid #FCA5A5;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 6px;
    width: fit-content;
}

/* Subtle shake animation when user taps a disabled vehicle */
@keyframes gsCardShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.gs-tf-card.gs-card-shake {
    animation: gsCardShake 0.4s ease-in-out !important;
    border-color: #EF4444 !important;
}

/* Floating capacity toast notification */
.gs-vehicle-capacity-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #0F172A;
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid #334155;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    z-index: 9999999;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-vehicle-capacity-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.gs-vehicle-capacity-toast .gs-toast-icon {
    font-size: 16px;
}

.gs-tf-card-img-wrap {
    width: 170px;
    flex-shrink: 0;
    padding-right: 18px;
}

.gs-tf-car-img {
    width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12));
    transition: transform 0.25s ease;
}

.gs-tf-card:hover .gs-tf-car-img {
    transform: scale(1.04);
}

.gs-tf-card-details {
    flex: 1;
    min-width: 180px;
}

.gs-tf-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.gs-tf-card-title {
    font-family: var(--gs-font-title);
    font-size: 18px;
    font-weight: 800;
    color: var(--gs-dark);
    margin: 0;
}

.gs-tf-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    padding: 2.5px 8px;
    border-radius: 4px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1.25;
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.badge-green, .badge-best-value {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-red, .badge-popular {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.badge-blue, .badge-vip {
    background: rgba(0, 102, 255, 0.12);
    color: #0066FF;
    border: 1px solid rgba(0, 102, 255, 0.35);
}

.badge-gold, .badge-luxury {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-purple {
    background: rgba(139, 92, 246, 0.12);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.35);
}

.badge-teal {
    background: rgba(13, 148, 136, 0.12);
    color: #0D9488;
    border: 1px solid rgba(13, 148, 136, 0.35);
}

.badge-orange {
    background: rgba(249, 115, 22, 0.12);
    color: #EA580C;
    border: 1px solid rgba(249, 115, 22, 0.35);
}

.badge-dark {
    background: rgba(30, 41, 59, 0.12);
    color: #1E293B;
    border: 1px solid rgba(30, 41, 59, 0.35);
}

.gs-tf-specs-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    margin-bottom: 6px;
}

.gs-spec-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #374151;
    font-weight: 600;
    font-size: 13px;
}

.gs-spec-svg {
    display: inline-block;
    flex-shrink: 0;
    color: #4B5563;
    transition: color 0.15s ease;
}

.gs-tf-card:hover .gs-spec-svg,
.gs-tf-card.selected .gs-spec-svg {
    color: #111827;
}

.gs-tf-models-text {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
    line-height: 1.4;
}

.gs-tf-card-price-col {
    text-align: right;
    min-width: 140px;
    flex-shrink: 0;
    padding-left: 16px;
    border-left: 1px solid #F3F4F6;
}

.gs-tf-old-price-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.gs-tf-old-price {
    font-size: 12px;
    color: #9CA3AF;
    text-decoration: line-through;
}

.gs-tf-discount-tag {
    background: #DEF7EC;
    color: #03543F;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}

.gs-tf-current-price {
    font-family: var(--gs-font-title);
    font-size: 24px;
    font-weight: 800;
    color: var(--gs-dark);
    margin: 2px 0;
}

.gs-tf-price-label {
    font-size: 11px;
    color: #6B7280;
    display: block;
    margin-bottom: 10px;
}

.gs-tf-select-radio-btn {
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #374151;
    font-family: var(--gs-font-title);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.gs-tf-card.selected .gs-tf-select-radio-btn {
    background: var(--gs-dark);
    border-color: var(--gs-dark);
    color: #ffffff;
}

/* ROUND TRIP PROMO BANNER */
.gs-tf-roundtrip-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1.5px dashed #CBD5E1;
    border-radius: 14px;
    padding: 16px 20px;
    margin: 20px 0 10px;
}

.gs-tf-rt-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gs-tf-rt-icon {
    font-size: 22px;
    color: var(--gs-primary);
}

.gs-tf-rt-left strong {
    font-size: 14px;
    color: #111827;
    display: block;
    margin-bottom: 2px;
}

.gs-tf-rt-left p {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
}

.gs-tf-rt-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid #D97706;
    background: #ffffff;
    color: #D97706;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.gs-tf-rt-add-btn:hover {
    background: #D97706;
    color: #ffffff;
}

/* BOTTOM STICKY BAR */
.gs-tf-bottom-choice-bar {
    position: sticky;
    bottom: 20px;
    background: #ffffff;
    border: 1.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 12px 35px rgba(0,0,0,0.14);
    z-index: 40;
    margin-top: 24px;
}

.gs-tf-choice-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-tf-choice-icon { font-size: 24px; }
.gs-tf-choice-lbl { font-size: 12px; color: #6B7280; display: block; }
.gs-tf-choice-name { font-family: var(--gs-font-title); font-size: 15px; color: var(--gs-dark); }

.gs-tf-choice-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-tf-btn-continue {
    background: var(--gs-btn-bg, #0A0D12);
    color: var(--gs-btn-color, #ffffff);
    border: none;
    padding: 14px 32px;
    font-family: var(--gs-btn-font, var(--gs-font-title));
    font-size: 14.5px;
    font-weight: var(--gs-btn-font-weight, 700);
    text-transform: var(--gs-btn-transform, none);
    letter-spacing: var(--gs-btn-letter-spacing, 0.3px);
    border-radius: var(--gs-btn-radius, 6px);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.gs-tf-btn-continue:hover {
    background: var(--gs-btn-bg-hover, #121721);
    color: var(--gs-btn-color-hover, #0066FF);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   RIGHT COLUMN: SIDEBAR SUMMARY CARD
   ========================================================================== */

.gs-tf-sidebar-col {
    position: sticky;
    top: 30px;
}

.gs-tf-summary-card {
    background: #ffffff;
    border: 1.5px solid #E5E7EB;
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.05);
}

.gs-tf-sc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.gs-tf-sc-title {
    font-family: var(--gs-font-title);
    font-size: 18px;
    font-weight: 800;
    color: var(--gs-dark);
    margin: 0;
}

.gs-tf-btn-edit-top {
    background: transparent;
    border: none;
    color: var(--gs-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.gs-tf-sc-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.gs-tf-sc-badge {
    background: #F3F4F6;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    color: #374151;
}

.gs-tf-sc-pax {
    font-size: 12px;
    font-weight: 600;
    color: #4B5563;
}

.gs-tf-sc-outward-date {
    font-size: 12px;
    color: #6B7280;
    margin-bottom: 16px;
}

/* Route Visual Timeline */
.gs-tf-timeline {
    border-top: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
    padding: 16px 0;
    margin-bottom: 18px;
}

.gs-tf-tl-stop {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.gs-tf-tl-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-top: 5px;
    flex-shrink: 0;
}

.dot-black { background: #111827; }
.dot-accent { background: #F59E0B; }

.gs-tf-tl-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
}

.gs-tf-tl-place {
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    word-break: break-word;
}

.gs-tf-tl-sub {
    font-size: 11.5px;
    color: #64748B;
    line-height: 1.3;
}

.gs-tf-tl-sub:empty {
    display: none !important;
}

.gs-tf-tl-time {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 1px;
}

.gs-tf-tl-duration-badge {
    margin: 10px 0 10px 22px;
    padding: 4px 10px;
    background: #F8FAFC;
    border-left: 2px solid var(--gs-primary);
    font-size: 11px;
    color: #4B5563;
    font-weight: 600;
    border-radius: 0 4px 4px 0;
}

/* Price Block */
.gs-tf-price-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 16px;
    border-bottom: 1px solid #F3F4F6;
    margin-bottom: 16px;
}

.gs-tf-pb-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.gs-tf-pb-amount {
    font-family: var(--gs-font-title);
    font-size: 26px;
    font-weight: 800;
    color: var(--gs-dark);
}

/* Trust Badges List */
.gs-tf-trust-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.gs-tf-trust-pill {
    font-size: 12px;
    color: #4B5563;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gs-tf-trust-pill span {
    color: #10B981;
    font-weight: bold;
}

.gs-tf-payment-icons {
    background: #F8FAFC;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
    color: #6B7280;
    line-height: 1.5;
}

.gs-tf-payment-icons strong {
    display: block;
    color: #111827;
    margin-top: 2px;
}

/* Responsive Stacking for Step 2 */
@media (max-width: 960px) {
    .gs-tf-grid {
        grid-template-columns: 1fr;
    }
    .gs-tf-sidebar-col {
        position: static;
        order: 2;
    }
    .gs-tf-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .gs-tf-card-img-wrap {
        width: 100%;
        padding: 0;
    }
    .gs-tf-card-price-col {
        width: 100%;
        border-left: none;
        border-top: 1px solid #F3F4F6;
        padding: 12px 0 0;
        text-align: center;
    }
    .gs-tf-old-price-wrap {
        justify-content: center;
    }
    .gs-tf-specs-row {
        justify-content: center;
    }
    .gs-tf-card-header {
        justify-content: center;
    }
}

.gs-vehicle-card {
    border: 2px solid var(--gs-border);
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.25s;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.gs-vehicle-card:hover {
    border-color: #93C5FD;
}

.gs-vehicle-card.selected {
    border-color: var(--gs-primary);
    background: #F0F7FF;
    box-shadow: 0 6px 18px rgba(0, 102, 255, 0.15);
}

.gs-vehicle-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 12px;
}

.gs-vehicle-badge.badge-premium {
    background: var(--gs-primary);
}

.gs-vehicle-icon {
    font-size: 44px;
    margin: 6px 0 4px;
}

.gs-vehicle-name {
    font-family: var(--gs-font-title);
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #111827;
}

.gs-vehicle-desc {
    font-size: 12px;
    color: #6B7280;
    margin: 0 0 12px;
}

.gs-vehicle-specs {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    color: #4B5563;
    background: #ffffff;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 14px;
}

.gs-vehicle-price {
    font-family: var(--gs-font-title);
    font-size: 22px;
    font-weight: 800;
    color: var(--gs-primary);
    margin-bottom: 12px;
}

.gs-card-select-btn {
    background: #F3F4F6;
    border: 1px solid var(--gs-border);
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: auto;
    transition: all 0.2s;
}

.gs-vehicle-card.selected .gs-card-select-btn {
    background: var(--gs-primary);
    border-color: var(--gs-primary);
    color: #ffffff;
}

/* Counters */
.gs-pax-luggage-row {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.gs-counter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gs-counter-group label {
    font-size: 13px;
    font-weight: 600;
}

.gs-counter {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--gs-border);
    border-radius: 8px;
    overflow: hidden;
}

.gs-counter button {
    background: #F3F4F6;
    border: none;
    padding: 6px 14px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    z-index: 5;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
}

.gs-counter button:hover { background: #E5E7EB; }
.gs-counter button:active { background: #D1D5DB; }

.gs-counter input {
    width: 44px;
    text-align: center;
    border: none !important;
    font-weight: 700;
    font-size: 15px;
    padding: 6px 0 !important;
    background: transparent;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.gs-counter input::-webkit-outer-spin-button,
.gs-counter input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* --- PASSENGER CAPACITY EXCEEDED ALERT --- */
.gs-counter.gs-counter-exceeded {
    border-color: #EF4444 !important;
    background: #FEF2F2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
    transition: all 0.25s ease;
}

.gs-counter.gs-counter-exceeded input {
    color: #DC2626 !important;
}

.gs-capacity-alert {
    background: #FFFBEB;
    border: 1.5px solid #F59E0B;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 14px 0 18px 0;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
    animation: gsAlertSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    width: 100%;
    box-sizing: border-box;
}

.gs-cap-alert-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.gs-cap-alert-icon-wrap {
    width: 36px;
    height: 36px;
    background: #FEF3C7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.gs-cap-alert-icon {
    font-size: 18px;
    line-height: 1;
}

.gs-cap-alert-content {
    flex: 1;
}

.gs-cap-alert-title {
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    font-size: 14.5px;
    font-weight: 800;
    color: #92400E;
    margin: 0 0 4px 0;
    line-height: 1.25;
}

.gs-cap-alert-msg {
    font-family: var(--gs-font-body, 'Inter', sans-serif);
    font-size: 13px;
    color: #78350F;
    line-height: 1.45;
    margin: 0;
}

.gs-cap-alert-msg strong {
    color: #B45309;
    font-weight: 700;
}

.gs-cap-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(245, 158, 11, 0.35);
}

.gs-btn-cap-upgrade {
    background: var(--gs-primary, #0066FF);
    color: var(--gs-btn-color, #FFFFFF) !important;
    font-family: var(--gs-btn-font, var(--gs-font-title, 'Montserrat', sans-serif));
    font-size: 13px;
    font-weight: var(--gs-btn-font-weight, 700);
    text-transform: var(--gs-btn-transform, none);
    padding: 10px 18px;
    border-radius: var(--gs-btn-radius, 10px);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
    transition: all 0.2s ease;
    text-decoration: none;
}

.gs-btn-cap-upgrade:hover {
    background: var(--gs-primary-hover, #0052cc);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.35);
}

.gs-btn-cap-change {
    background: #FFFFFF;
    color: #374151 !important;
    font-family: var(--gs-btn-font, var(--gs-font-title, 'Montserrat', sans-serif));
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--gs-btn-radius, 10px);
    border: 1.5px solid #D1D5DB;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.gs-btn-cap-change:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
    color: #111827 !important;
}

.gs-btn-cap-icon {
    font-size: 14px;
    line-height: 1;
}

.gs-shake {
    animation: gsShake 0.4s ease-in-out;
}

@keyframes gsShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes gsAlertSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .gs-cap-alert-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .gs-btn-cap-upgrade,
    .gs-btn-cap-change {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

.gs-extras-row {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #F9FAFB;
    border-radius: 8px;
}

.gs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.gs-counter-extra {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

/* Payment Methods */
.gs-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.gs-payment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--gs-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.gs-payment-option:hover {
    border-color: #CBD5E1;
}

.gs-payment-option.selected {
    border-color: var(--gs-primary);
    background: #F0F7FF;
}

.gs-payment-option input {
    margin-top: 3px;
}

.gs-pay-info {
    flex: 1;
    min-width: 0;
}

.gs-pay-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.gs-pay-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #111827;
}

.gs-pay-sub {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
}

/* Viva Official Badge & Smart Checkout Strip */
.gs-viva-methods-badge {
    height: 32px;
    width: auto;
    max-width: 175px;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    background: #FFFFFF;
    padding: 3px 6px;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.gs-viva-methods-badge:hover {
    transform: translateY(-1px);
}

.gs-viva-trust-box {
    margin: 14px 0 18px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.gs-viva-trust-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #F1F5F9;
}

.gs-viva-trust-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gs-viva-official-logo-img {
    height: 30px;
    width: auto;
    display: block;
    object-fit: contain;
}

.gs-viva-trust-gateway {
    font-size: 11px;
    font-weight: 800;
    color: #0050FF;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gs-viva-trust-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.gs-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #047857;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.gs-trust-pill svg {
    flex-shrink: 0;
}

.gs-viva-trust-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #64748B;
}

/* WIZARD NAVIGATION BAR */
.gs-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--gs-border);
}

/* --- UNIFIED STEP NAVIGATION BARS & BUTTONS --- */
.gs-step-nav-bar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid #E2E8F0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.gs-step-nav-actions,
.gs-tf-choice-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 16 !important;
}

/* Base Navigation Button (Common styling for both Prev & Next/Confirm) */
.gs-btn-prev,
.gs-btn-next,
.gs-submit-btn,
.gs-tf-btn-continue,
#gs-back-to-step-1-btn,
#gs-back-to-step-2-btn,
#gs-back-to-step-3-btn,
#gs-go-to-step-3,
#gs-go-to-step-4,
#gs_submit_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    font-family: var(--gs-btn-font, var(--gs-font-title, 'Montserrat', sans-serif)) !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    text-transform: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Secondary Button: Previous */
.gs-btn-prev,
#gs-back-to-step-1-btn,
#gs-back-to-step-2-btn,
#gs-back-to-step-3-btn {
    background: #F1F5F9 !important;
    color: #334155 !important;
    border: 1.5px solid #CBD5E1 !important;
    padding: 0 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.gs-btn-prev:hover,
#gs-back-to-step-1-btn:hover,
#gs-back-to-step-2-btn:hover,
#gs-back-to-step-3-btn:hover {
    background: #E2E8F0 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Primary Button: Next / Confirm */
.gs-btn-next,
.gs-submit-btn,
.gs-tf-btn-continue,
#gs-go-to-step-3,
#gs-go-to-step-4,
#gs_submit_btn {
    background: var(--gs-btn-bg, #0A0D12) !important;
    color: var(--gs-btn-color, #FFFFFF) !important;
    border: 1.5px solid transparent !important;
    padding: 0 26px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.gs-btn-next:hover,
.gs-submit-btn:hover,
.gs-tf-btn-continue:hover,
#gs-go-to-step-3:hover,
#gs-go-to-step-4:hover,
#gs_submit_btn:hover {
    background: var(--gs-btn-bg-hover, #1E293B) !important;
    color: var(--gs-btn-color-hover, #FFFFFF) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

/* Summary Bar */
.gs-summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    margin-top: 20px;
    border-top: 1px solid var(--gs-border);
}

.gs-summary-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6B7280;
    letter-spacing: 0.5px;
}

.gs-summary-amount {
    font-family: var(--gs-font-title);
    font-size: 28px;
    font-weight: 800;
    color: var(--gs-primary);
}

.gs-summary-deposit-note {
    font-size: 12px;
    color: #059669;
    font-weight: 600;
}

.gs-total-cost-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.gs-payment-split-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.gs-split-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.gs-split-pill .gs-split-tag {
    font-size: 11.5px;
    opacity: 0.85;
}

.gs-split-pill strong {
    font-weight: 700;
}

.gs-split-now {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}

.gs-split-now.gs-split-highlight {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #BFDBFE;
}

.gs-split-driver {
    background: #F8FAFC;
    color: #475569;
    border: 1px solid #E2E8F0;
}

.gs-split-driver.gs-split-highlight {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.gs-split-subtext {
    font-size: 11.5px;
    color: #64748B;
    margin-top: 5px;
    font-weight: 500;
}

/* ==========================================================================
   BLACKLANE-STYLE LUXURY HORIZONTAL SEARCH BAR
   ========================================================================== */

.gs-blacklane-search-container {
    font-family: var(--gs-font-body);
    max-width: 1140px;
    margin: 30px auto;
    position: relative;
    z-index: 20 !important;
    overflow: visible !important;
}

.gs-blacklane-search-container.gs-has-open-dropdown,
.gs-blacklane-search-container:focus-within {
    z-index: 30 !important;
}

/* 1. Top Capsule Floating Tabs */
.gs-bl-capsule-tabs {
    display: inline-flex;
    background: #ffffff;
    border-radius: 50px;
    padding: 4px;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #E5E7EB;
}

.gs-bl-tab {
    background: transparent;
    border: none;
    border-radius: 50px;
    padding: 10px 22px;
    font-family: var(--gs-font-title);
    font-size: 13px;
    font-weight: 700;
    color: #4B5563;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.gs-bl-tab:hover {
    color: #111827;
}

.gs-bl-tab.active {
    background: #0A0D12;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gs-bl-tab-icon {
    font-size: 15px;
}

/* 2. Main Horizontal White Bar */
.gs-bl-search-bar {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 8px 10px 8px 18px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid #E5E7EB;
    transition: box-shadow 0.25s ease;
    position: relative;
    z-index: 20 !important;
    overflow: visible !important;
}

.gs-bl-search-bar:focus-within {
    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.12);
    border-color: #BFDBFE;
    z-index: 25 !important;
}

/* Column Styles */
.gs-bl-col {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    position: relative;
}

.gs-bl-col-from { flex: 2.2; }
.gs-bl-col-to { flex: 2.2; }
.gs-bl-col-datetime { flex: 2; }
.gs-bl-col-return { flex: 1.3; }
.gs-bl-col-pax { flex: 1.1; }
.gs-bl-col-btn { flex-shrink: 0; }

.gs-bl-col-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-bl-icon-img {
    width: 18px;
    height: 24px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.gs-bl-icon-svg {
    width: 20px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

.gs-bl-col-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.gs-bl-label {
    font-size: 11px;
    font-weight: 600;
    color: #9CA3AF;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}

.gs-bl-col-content input,
.gs-bl-col-content select {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--gs-font-body);
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    width: 100%;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gs-bl-col-content input::placeholder,
.gs-bl-col-content input::-webkit-input-placeholder {
    color: #9CA3AF !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Hide native browser calendar/time indicator arrows completely */
input::-webkit-calendar-picker-indicator,
input::-webkit-inner-spin-button,
input::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
}

/* Vertical Dividers */
.gs-bl-divider {
    width: 1px;
    height: 38px;
    background: #E5E7EB;
    flex-shrink: 0;
}

/* Quick Route Dropdown Icon in From */
.gs-bl-quick-dropdown select {
    border: none;
    background: #F3F4F6;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 11px;
    color: #4B5563;
    font-weight: 600;
    cursor: pointer;
    max-width: 110px;
}

/* Inline Date & Time Inputs */
.gs-bl-inputs-inline {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gs-bl-inputs-inline input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--gs-font-body);
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    padding: 0 !important;
    cursor: pointer;
}

.gs-bl-dot {
    color: #9CA3AF;
    font-weight: bold;
}

/* Return Column */
.gs-bl-col-return {
    flex: 1.3;
    transition: flex 0.2s ease;
}

.gs-bl-col-return.active-return {
    flex: 2 !important;
}

.gs-bl-col-return:not(.active-return) {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.gs-bl-col-return:not(.active-return):hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.gs-bl-col-return:not(.active-return) .gs-bl-return-btn {
    width: 100%;
    height: 100%;
    min-height: 38px;
}

.gs-bl-return-btn {
    background: transparent;
    border: none;
    color: #6B7280;
    font-family: var(--gs-font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.gs-bl-return-btn:hover {
    color: #111827;
    background: transparent;
}

.gs-bl-plus-icon {
    font-size: 16px;
    color: #9CA3AF;
}

.gs-bl-return-active-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.gs-bl-return-clear-btn {
    background: transparent;
    border: none;
    color: #9CA3AF;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.gs-bl-return-clear-btn:hover {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.12);
}

.gs-bl-return-inputs {
    display: flex;
    gap: 4px;
}

.gs-bl-return-inputs input {
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
}

/* Passengers Counter */
.gs-bl-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.gs-bl-cnt-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #D1D5DB;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.gs-bl-cnt-btn:hover {
    border-color: #111827;
    color: #111827;
    background: #F9FAFB;
}

.gs-bl-cnt-val {
    font-family: var(--gs-font-title);
    font-size: 14px;
    font-weight: 700;
    min-width: 14px;
    text-align: center;
}

/* Submit Button */
.gs-bl-submit-btn {
    background: var(--gs-btn-bg, #0A0D12) !important;
    color: var(--gs-btn-color, #ffffff) !important;
    border: none !important;
    border-radius: var(--gs-btn-radius, 6px) !important;
    padding: 16px 28px !important;
    font-family: var(--gs-btn-font, var(--gs-font-title)) !important;
    font-size: 14.5px !important;
    font-weight: var(--gs-btn-font-weight, 700) !important;
    text-transform: var(--gs-btn-transform, none) !important;
    letter-spacing: var(--gs-btn-letter-spacing, 0.3px) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.gs-bl-submit-btn:hover {
    background: var(--gs-btn-bg-hover, #121721) !important;
    color: var(--gs-btn-color-hover, #0066FF) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

.gs-bl-arrow {
    font-size: 16px;
    transition: transform 0.2s;
}

.gs-bl-submit-btn:hover .gs-bl-arrow {
    transform: translateX(3px);
}

/* Bottom Trust Micro-Bar */
.gs-bl-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    text-align: center;
    line-height: 1.4;
}

.gs-bl-trust-bar span {
    display: inline-flex;
    align-items: center;
}

.gs-bl-trust-bar .gs-trust-sep {
    opacity: 0.5;
    font-size: 10px;
}

/* ==========================================================================
   FLATPICKR LUXURY CUSTOM STYLING (Blacklane / GetSeat Aesthetics)
   ========================================================================== */

.flatpickr-calendar {
    font-family: var(--gs-font-body, 'Inter', sans-serif) !important;
    background: #ffffff !important;
    width: 326px !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 20px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.22), 0 0 1px rgba(15, 23, 42, 0.15) !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    z-index: 999999 !important;
    overflow: visible !important;
    touch-action: manipulation !important;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none !important;
}

/* Header Month & Year Banner */
.flatpickr-months {
    position: relative !important;
    background: #0A0D12 !important;
    background: linear-gradient(135deg, #0A0D12 0%, #161F30 100%) !important;
    border-radius: 14px !important;
    padding: 8px 46px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
}

.flatpickr-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    overflow: visible !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.flatpickr-current-month {
    position: static !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif) !important;
    font-weight: 700 !important;
    height: 32px !important;
    line-height: 32px !important;
    margin: 0 !important;
    outline: none !important;
    padding: 0 8px !important;
    position: relative !important;
    vertical-align: middle !important;
    transition: all 0.15s ease !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #0066FF !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months option {
    background-color: #0A0D12 !important;
    color: #ffffff !important;
    padding: 6px !important;
}

/* Year Input Box with Visible, Sleek Stepper Arrows */
.flatpickr-current-month .numInputWrapper {
    width: 74px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding-right: 20px !important;
    transition: all 0.15s ease !important;
}

.flatpickr-current-month .numInputWrapper:hover,
.flatpickr-current-month .numInputWrapper:focus-within {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: #0066FF !important;
}

.flatpickr-current-month .numInputWrapper input.cur-year {
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: block !important;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    height: 100% !important;
    line-height: 30px !important;
    margin: 0 !important;
    outline: none !important;
    padding: 0 4px !important;
    text-align: center !important;
    width: 100% !important;
    vertical-align: middle !important;
}

/* Stepper Arrows for Year (Up & Down) */
.flatpickr-current-month .numInputWrapper span {
    position: absolute !important;
    right: 0 !important;
    width: 20px !important;
    height: 50% !important;
    line-height: 50% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.85 !important;
    transition: all 0.15s ease !important;
}

.flatpickr-current-month .numInputWrapper span:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp {
    top: 0 !important;
    border-top-right-radius: 7px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown {
    bottom: 0 !important;
    border-bottom-right-radius: 7px !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp::after {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-bottom: 4px solid #ffffff !important;
    border-left: 3.5px solid transparent !important;
    border-right: 3.5px solid transparent !important;
    margin: 0 auto !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 4px solid #ffffff !important;
    border-left: 3.5px solid transparent !important;
    border-right: 3.5px solid transparent !important;
    margin: 0 auto !important;
}

/* Previous & Next Month Navigation Buttons */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    z-index: 10 !important;
}

.flatpickr-months .flatpickr-prev-month {
    left: 8px !important;
}

.flatpickr-months .flatpickr-next-month {
    right: 8px !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    vertical-align: middle !important;
}

/* Weekday Labels */
.flatpickr-innerContainer {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.flatpickr-rContainer {
    width: 100% !important;
    box-sizing: border-box !important;
}

.flatpickr-weekdays {
    width: 100% !important;
    display: flex !important;
    margin-bottom: 8px !important;
    padding: 0 0 6px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.flatpickr-weekdaycontainer {
    width: 100% !important;
    display: flex !important;
    flex: 1 1 100% !important;
}

span.flatpickr-weekday {
    flex: 0 0 14.2857143% !important;
    width: 14.2857143% !important;
    max-width: 14.2857143% !important;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Day Container & Day Cells */
.flatpickr-days {
    width: 100% !important;
    box-sizing: border-box !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.flatpickr-day {
    flex: 0 0 14.2857143% !important;
    width: 14.2857143% !important;
    max-width: 14.2857143% !important;
    height: 38px !important;
    line-height: 34px !important;
    border-radius: 10px !important;
    font-family: var(--gs-font-body, 'Inter', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 2px 0 !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
    border: 1.5px solid transparent !important;
    cursor: pointer !important;
}

.flatpickr-day:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #E2E8F0 !important;
    transform: scale(1.05) !important;
}

.flatpickr-day.today {
    border-color: #0066FF !important;
    color: #0066FF !important;
    background: #EFF6FF !important;
    font-weight: 700 !important;
}

.flatpickr-day.today:hover {
    background: #DBEAFE !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #0066FF !important;
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    border-color: #0066FF !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.4) !important;
    transform: scale(1.05) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #CBD5E1 !important;
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.35 !important;
    border-color: transparent !important;
    transform: none !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #CBD5E1 !important;
    opacity: 0.4 !important;
}

/* 5-Week Calendar Optimization: Hide 6th week padding days */
.dayContainer:has(.flatpickr-day:nth-child(36).nextMonthDay) .flatpickr-day:nth-child(n+36),
.dayContainer.gs-hide-week6 .flatpickr-day:nth-child(n+36),
.flatpickr-day.nextMonthDay:nth-child(n+36) {
    display: none !important;
}

/* Time Picker inside Flatpickr */
.flatpickr-time {
    border-top: 1px solid #E2E8F0 !important;
    margin-top: 10px !important;
    padding: 10px 14px !important;
    background: #F8FAFC !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

.flatpickr-time::before {
    content: "🕒";
    font-size: 16px;
    margin-right: 4px;
    opacity: 0.85;
}

.flatpickr-time .numInputWrapper {
    flex: 0 0 auto !important;
    width: 58px !important;
    height: 40px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}

.flatpickr-time .numInputWrapper:hover,
.flatpickr-time .numInputWrapper:focus-within {
    border-color: #0066FF !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15) !important;
}

.flatpickr-time input.numInput,
.flatpickr-current-month input.cur-year {
    width: 100% !important;
    height: 100% !important;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    color: #0F172A !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 20px 0 6px !important;
    box-sizing: border-box !important;
    outline: none !important;
    pointer-events: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.flatpickr-time .flatpickr-time-separator {
    font-family: var(--gs-font-title, 'Montserrat', sans-serif) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    color: #0066FF !important;
    padding: 0 2px !important;
    line-height: 1 !important;
    user-select: none !important;
}

/* Stepper Arrows for Hours & Minutes */
.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown,
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    width: 22px !important;
    height: 50% !important;
    padding: 0 !important;
    opacity: 0.75 !important;
    right: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: all 0.1s ease !important;
    pointer-events: auto !important;
}

.flatpickr-time .numInputWrapper span.arrowUp:hover,
.flatpickr-time .numInputWrapper span.arrowDown:hover {
    opacity: 1 !important;
    background: rgba(0, 102, 255, 0.12) !important;
    color: #0066FF !important;
}

.flatpickr-time .numInputWrapper span.arrowUp::after {
    border-bottom-color: #0F172A !important;
}

.flatpickr-time .numInputWrapper span.arrowDown::after {
    border-top-color: #0F172A !important;
}

/* Time-Only Popups (No Calendar) */
.flatpickr-calendar.hasTime.noCalendar {
    width: auto !important;
    min-width: 190px !important;
    padding: 10px !important;
}

.flatpickr-calendar.hasTime.noCalendar .flatpickr-time {
    border-top: none !important;
    margin-top: 0 !important;
    padding: 8px 12px !important;
}

/* Flatpickr Footer Confirm Button ("✓ Επιλογή") */
.gs-flatpickr-footer {
    width: 100% !important;
    padding-top: 10px !important;
    margin-top: 10px !important;
    border-top: 1px solid #E2E8F0 !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.gs-flatpickr-confirm-btn {
    width: 100% !important;
    height: 40px !important;
    background: #0A0D12 !important;
    background: linear-gradient(135deg, #0A0D12 0%, #161F30 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(10, 13, 18, 0.2) !important;
    transition: all 0.2s ease !important;
    -webkit-appearance: none !important;
    outline: none !important;
}

.gs-flatpickr-confirm-btn:hover,
.gs-flatpickr-confirm-btn:active {
    background: #0066FF !important;
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   FLATPICKR MOBILE SCREEN CENTERING (Fixed Modal on Mobile, Dropdown on Desktop)
   ========================================================================== */
body.gs-fp-open {
    overflow: hidden !important;
}

@keyframes gsFpCenterIn {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 768px) {
    .flatpickr-calendar {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: min(330px, calc(100vw - 28px)) !important;
        max-height: calc(100vh - 30px) !important;
        overflow-y: auto !important;
        z-index: 999999 !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 0 100vmax rgba(10, 13, 18, 0.6) !important;
    }

    .flatpickr-calendar.open,
    .flatpickr-calendar.animate.open {
        animation: gsFpCenterIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    .flatpickr-calendar::before,
    .flatpickr-calendar::after {
        display: none !important;
    }
}

/* Responsive adjustment on narrow mobile screens */
@media (max-width: 480px) {
    .flatpickr-calendar {
        width: min(308px, calc(100vw - 24px)) !important;
        padding: 12px 10px !important;
    }
    .flatpickr-day {
        flex: 0 0 14.2857143% !important;
        width: 14.2857143% !important;
        max-width: 14.2857143% !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }
}

/* Input Display Styling */
.gs-bl-flatpickr-input,
.gs-flatpickr-date,
.gs-flatpickr-time {
    cursor: pointer !important;
}

.gs-bl-col-datetime .flatpickr-input,
.gs-bl-col-return .flatpickr-input,
.gs-bl-return-active-wrap .flatpickr-input,
.gs-bl-col-content input,
.gs-bl-col-content input.flatpickr-input,
.gs-bl-col-content .form-control,
.gs-bl-col-content input.form-control {
    font-family: var(--gs-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    cursor: pointer !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.gs-bl-col-datetime .flatpickr-input::placeholder,
.gs-bl-col-return .flatpickr-input::placeholder,
.gs-bl-return-active-wrap .flatpickr-input::placeholder,
.gs-bl-col-content input::placeholder {
    color: #9CA3AF !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Responsive Stacking for Tablets & Mobile */
@media (max-width: 991px) {
    .gs-bl-search-bar {
        flex-wrap: wrap;
        border-radius: 16px;
        padding: 14px;
        gap: 12px;
    }
    .gs-bl-divider { display: none; }
    .gs-bl-col {
        flex: 1 1 45%;
        background: #F9FAFB;
        border-radius: 10px;
        padding: 10px 14px;
        border: 1px solid #E5E7EB;
    }
    .gs-bl-col-btn {
        flex: 1 1 100%;
    }
    .gs-bl-submit-btn {
        width: 100%;
        justify-content: center;
        border-radius: 10px;
    }
}

@media (max-width: 600px) {
    .gs-bl-col {
        flex: 1 1 100%;
    }
    .gs-bl-trust-bar {
        flex-direction: column;
        gap: 6px;
    }
    .gs-bl-trust-bar span:nth-child(even) { display: none; }
}

/* Modal */
.gs-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 13, 18, 0.7);
    backdrop-filter: blur(4px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.gs-modal.open {
    display: flex;
    animation: fadeIn 0.25s ease;
}

.gs-modal-content {
    background: #ffffff;
    max-width: 480px;
    width: 100%;
    border-radius: 16px;
    padding: 35px 28px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.gs-modal-icon { font-size: 48px; margin-bottom: 12px; }

.gs-modal-title {
    font-family: var(--gs-font-title);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: #0F172A;
    margin: 0 0 10px;
}

.gs-booking-code-box {
    background: #EFF6FF;
    border: 2px dashed var(--gs-primary);
    color: var(--gs-primary);
    font-family: var(--gs-font-title);
    font-size: 22px;
    font-weight: 800;
    padding: 12px;
    border-radius: 8px;
    margin: 16px 0;
    letter-spacing: 1px;
}

.gs-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.gs-btn-voucher {
    background: var(--gs-primary);
    color: #ffffff !important;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    transition: background 0.2s;
}

.gs-btn-voucher:hover { background: var(--gs-primary-hover); }

.gs-btn-close {
    background: #F3F4F6;
    color: #4B5563;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* ==========================================================================
   DRIVER PORTAL STYLES (Mobile-First)
   ========================================================================== */

/* Auto-clean Theme Header, Menu, Page Title and Footer on Driver Portal (Standalone Mode) */
body:has(.getseat-driver-portal-wrapper) header,
body:has(.getseat-driver-portal-wrapper) header.whb-header,
body:has(.getseat-driver-portal-wrapper) .whb-header,
body:has(.getseat-driver-portal-wrapper) .whb-sticky-header,
body:has(.getseat-driver-portal-wrapper) .whb-clone,
body:has(.getseat-driver-portal-wrapper) .whb-main-header,
body:has(.getseat-driver-portal-wrapper) .whb-top-bar,
body:has(.getseat-driver-portal-wrapper) .whb-general-header,
body:has(.getseat-driver-portal-wrapper) .whb-header-bottom,
body:has(.getseat-driver-portal-wrapper) .woodmart-header,
body:has(.getseat-driver-portal-wrapper) .site-header,
body:has(.getseat-driver-portal-wrapper) #masthead,
body:has(.getseat-driver-portal-wrapper) .elementor-location-header,
body:has(.getseat-driver-portal-wrapper) .woodmart-toolbar,
body:has(.getseat-driver-portal-wrapper) .woodmart-sticky-toolbar,
body:has(.getseat-driver-portal-wrapper) .mobile-nav,
body.gs-driver-portal-active header,
body.gs-driver-portal-active header.whb-header,
body.gs-driver-portal-active .whb-header,
body.gs-driver-portal-active .whb-sticky-header,
body.gs-driver-portal-active .whb-clone,
body.gs-driver-portal-active .whb-main-header,
body.gs-driver-portal-active .whb-top-bar,
body.gs-driver-portal-active .whb-general-header,
body.gs-driver-portal-active .whb-header-bottom,
body.gs-driver-portal-active .woodmart-header,
body.gs-driver-portal-active .site-header,
body.gs-driver-portal-active #masthead,
body.gs-driver-portal-active .elementor-location-header,
body.gs-driver-portal-active .woodmart-toolbar,
body.gs-driver-portal-active .woodmart-sticky-toolbar,
body.gs-driver-portal-active .mobile-nav {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body:has(.getseat-driver-portal-wrapper) .page-title,
body:has(.getseat-driver-portal-wrapper) .page-heading,
body:has(.getseat-driver-portal-wrapper) .woodmart-page-title,
body:has(.getseat-driver-portal-wrapper) .page-title-default,
body:has(.getseat-driver-portal-wrapper) .title-size-default,
body:has(.getseat-driver-portal-wrapper) .title-design-default,
body:has(.getseat-driver-portal-wrapper) .entry-header,
body:has(.getseat-driver-portal-wrapper) .page-header,
body:has(.getseat-driver-portal-wrapper) h1.entry-title,
body:has(.getseat-driver-portal-wrapper) .woodmart-breadcrumbs,
body.gs-driver-portal-active .page-title,
body.gs-driver-portal-active .page-heading,
body.gs-driver-portal-active .woodmart-page-title,
body.gs-driver-portal-active .page-title-default,
body.gs-driver-portal-active .title-size-default,
body.gs-driver-portal-active .title-design-default,
body.gs-driver-portal-active .entry-header,
body.gs-driver-portal-active .page-header,
body.gs-driver-portal-active h1.entry-title,
body.gs-driver-portal-active .woodmart-breadcrumbs {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body:has(.getseat-driver-portal-wrapper) footer,
body:has(.getseat-driver-portal-wrapper) footer.footer-container,
body:has(.getseat-driver-portal-wrapper) .footer-container,
body:has(.getseat-driver-portal-wrapper) .woodmart-footer,
body:has(.getseat-driver-portal-wrapper) .site-footer,
body:has(.getseat-driver-portal-wrapper) #colophon,
body:has(.getseat-driver-portal-wrapper) .footer-sidebar,
body:has(.getseat-driver-portal-wrapper) .copyrights-wrapper,
body:has(.getseat-driver-portal-wrapper) .elementor-location-footer,
body.gs-driver-portal-active footer,
body.gs-driver-portal-active footer.footer-container,
body.gs-driver-portal-active .footer-container,
body.gs-driver-portal-active .woodmart-footer,
body.gs-driver-portal-active .site-footer,
body.gs-driver-portal-active #colophon,
body.gs-driver-portal-active .footer-sidebar,
body.gs-driver-portal-active .copyrights-wrapper,
body.gs-driver-portal-active .elementor-location-footer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body:has(.getseat-driver-portal-wrapper),
body.gs-driver-portal-active {
    background: #0F172A !important;
}

body:has(.getseat-driver-portal-wrapper) .main-page-wrapper,
body.gs-driver-portal-active .main-page-wrapper,
body:has(.getseat-driver-portal-wrapper) .site-content,
body.gs-driver-portal-active .site-content {
    padding-top: 15px !important;
    padding-bottom: 25px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

body:has(.getseat-driver-portal-wrapper) .container,
body.gs-driver-portal-active .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.getseat-driver-portal-wrapper {
    font-family: var(--gs-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: #1F2937;
    max-width: 920px;
    margin: 24px auto;
    background: #F8FAFC;
    border-radius: 18px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #E2E8F0;
    overflow: hidden;
}

/* DRIVER LOGIN SCREEN */
.gs-driver-login-box {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
    background: linear-gradient(180deg, #F8FAFC 0%, #EDF2F7 100%);
}

.gs-portal-login-card {
    background: #ffffff;
    max-width: 420px;
    width: 100%;
    padding: 36px 30px;
    border-radius: 18px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    border: 1px solid #E2E8F0;
}

.gs-portal-brand {
    text-align: center;
    margin-bottom: 24px;
}

.gs-brand-icon {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #ffffff;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}

.gs-portal-brand h2 {
    margin: 0;
    font-family: var(--gs-font-title, sans-serif);
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
}

.gs-brand-sub {
    margin: 4px 0 0;
    font-size: 11px;
    font-weight: 800;
    color: var(--gs-primary, #0066FF);
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.gs-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.gs-input-with-icon svg {
    position: absolute;
    left: 14px;
    color: #94A3B8;
    pointer-events: none;
}

.gs-input-with-icon input {
    width: 100%;
    padding: 12px 14px 12px 42px !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #F8FAFC !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.gs-input-with-icon input:focus {
    border-color: var(--gs-primary, #0066FF) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15) !important;
    outline: none !important;
}

.gs-portal-login-btn {
    width: 100%;
    margin-top: 18px;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #ffffff !important;
    border: none;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.gs-portal-login-btn:hover {
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
}

.gs-portal-login-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #64748B;
    line-height: 1.4;
}

.gs-portal-login-footer svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #94A3B8;
}

/* PORTAL HEADER (AUTHENTICATED) - MODERN & MINIMAL LIGHT */
.gs-portal-header-premium {
    background: #FFFFFF;
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E2E8F0;
    flex-wrap: wrap;
    gap: 16px;
}

.gs-driver-profile-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gs-driver-avatar-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #EFF6FF;
    color: var(--gs-primary, #0066FF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    border: 1.5px solid #BFDBFE;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.12);
    flex-shrink: 0;
}

.gs-online-indicator {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    background: #10B981;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(16, 185, 129, 0.3);
}

.gs-driver-meta-text {
    color: #0F172A;
}

.gs-driver-greeting {
    font-size: 11px;
    text-transform: uppercase;
    color: #64748B;
    letter-spacing: 0.8px;
    font-weight: 700;
}

.gs-driver-name {
    margin: 2px 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    font-family: var(--gs-font-title, sans-serif);
    line-height: 1.2;
}

.gs-driver-vehicle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gs-v-model {
    font-size: 12.5px;
    color: #475569;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gs-v-plate {
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    color: #0F172A;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.6px;
}

.gs-header-actions-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.gs-header-date-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 4px 12px;
}

.gs-header-buttons-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gs-btn-header-refresh {
    background: #F8FAFC;
    color: #334155 !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #CBD5E1;
    transition: all 0.2s;
}

.gs-btn-header-refresh:hover {
    background: #F1F5F9;
    color: var(--gs-primary, #0066FF) !important;
    border-color: #94A3B8;
}

.gs-btn-header-logout {
    background: #FEF2F2;
    color: #DC2626 !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #FEE2E2;
    transition: all 0.2s;
}

.gs-btn-header-logout:hover {
    background: #DC2626;
    color: #ffffff !important;
    border-color: #DC2626;
}

/* SEGMENTED NAVIGATION TABS - SLEEK & LIGHT */
.gs-driver-tabs-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: #F8FAFC;
    padding: 6px 8px;
    gap: 6px;
    border-bottom: 1px solid #E2E8F0;
}

.gs-dtab-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    color: #64748B;
}

.gs-dtab-btn:hover {
    background: #FFFFFF;
    color: #0F172A;
    border-color: #E2E8F0;
}

.gs-dtab-btn.active {
    background: #FFFFFF;
    color: var(--gs-primary, #0066FF);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-color: #E2E8F0;
    font-weight: 800;
}

.gs-dtab-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #1E293B;
}

.gs-dtab-btn.active {
    background: #ffffff;
    color: var(--gs-primary, #0066FF);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    font-weight: 800;
}

.gs-tab-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
}

.gs-tab-count {
    background: #CBD5E1;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 18px;
    text-align: center;
}

.gs-tab-count.has-rides {
    background: var(--gs-primary, #0066FF);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.35);
}

.gs-tab-pending-badge.has-pending {
    background: #DC2626 !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.5) !important;
    animation: gsPulseBadge 2s infinite ease-in-out;
}

@keyframes gsPulseBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@media (max-width: 640px) {
    .gs-driver-tabs-container {
        display: flex;
        flex-wrap: wrap;
        padding: 4px;
        gap: 4px;
    }
    .gs-dtab-btn {
        flex: 1 1 calc(33.333% - 4px);
        min-width: 85px;
        padding: 8px 4px;
        flex-direction: column;
        gap: 4px;
        justify-content: center;
        text-align: center;
    }
    .gs-tab-title-wrap {
        font-size: 11px;
        gap: 3px;
        justify-content: center;
    }
    .gs-tab-title-wrap svg {
        width: 14px;
        height: 14px;
    }
    .gs-tab-count {
        font-size: 10px;
        padding: 1px 6px;
    }
}

/* TAB PANELS & LISTS */
.gs-portal-content-body {
    padding: 20px 22px;
}

.gs-dtab-content {
    display: none;
}

.gs-dtab-content.active {
    display: block;
    animation: gsFadeIn 0.25s ease-out;
}

@keyframes gsFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.gs-rides-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* DAY GROUP & DAY DIVIDERS */
.gs-day-group {
    margin-bottom: 24px;
}

.gs-day-group:last-child {
    margin-bottom: 0;
}

.gs-day-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-left: 4.5px solid #0066FF;
    border-radius: 12px;
    padding: 11px 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.gs-day-divider.is-today {
    border-left-color: #10B981;
    background: linear-gradient(90deg, #F0FDF4 0%, #FFFFFF 65%);
    border-color: #A7F3D0;
}

.gs-day-divider.is-tomorrow {
    border-left-color: #0284C7;
    background: linear-gradient(90deg, #F0F9FF 0%, #FFFFFF 65%);
    border-color: #BAE6FD;
}

.gs-day-divider-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.gs-day-divider-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #EFF6FF;
    color: #0284C7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-day-divider.is-today .gs-day-divider-icon {
    background: #DCFCE7;
    color: #16A34A;
}

.gs-day-divider.is-tomorrow .gs-day-divider-icon {
    background: #E0F2FE;
    color: #0284C7;
}

.gs-day-date-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gs-day-date-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gs-day-badge {
    font-size: 10px;
    font-weight: 900;
    padding: 2.5px 7px;
    border-radius: 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
}

.gs-day-badge.today {
    background: #10B981;
    color: #FFFFFF;
}

.gs-day-badge.tomorrow {
    background: #0284C7;
    color: #FFFFFF;
}

.gs-day-date-text {
    font-size: 14px;
    font-weight: 800;
    color: #0F172A;
}

.gs-day-count-badge {
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.gs-day-divider.is-today .gs-day-count-badge {
    background: #DCFCE7;
    border-color: #86EFAC;
    color: #15803D;
}

.gs-day-divider.is-tomorrow .gs-day-count-badge {
    background: #E0F2FE;
    border-color: #7DD3FC;
    color: #0369A1;
}

.gs-rides-day-list {
    margin-bottom: 20px;
}

/* EMPTY STATES */
.gs-empty-state-card {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px dashed #CBD5E1;
}

.gs-empty-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.gs-empty-state-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: #1E293B;
}

.gs-empty-state-card p {
    margin: 0;
    font-size: 13px;
    color: #64748B;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ==========================================================================
   ULTRA-DETAILED DRIVER RIDE CARD
   ========================================================================== */

.gs-driver-ride-card {
    background: #ffffff;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.gs-driver-ride-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: #CBD5E1;
}

.gs-driver-ride-card.card-pending-action {
    border-color: #F59E0B;
    background: #FFFDF9;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.12);
}

/* CARD TOP: TIME & STATUS */
.gs-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-wrap: wrap;
    gap: 10px;
}

.gs-time-badge-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-time-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gs-primary, #0066FF);
}

.gs-ride-time {
    font-family: var(--gs-font-title, sans-serif);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.gs-date-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
}

.gs-badge-today {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 2px;
}

.gs-card-top-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.gs-leg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.gs-leg-badge.leg-outward {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}

.gs-leg-badge.leg-return {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

.gs-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.gs-status-tag.status-accepted {
    background: #DEF7EC;
    color: #03543F;
    border: 1px solid #BCF0DA;
}

.gs-status-tag.status-assigned {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.gs-status-tag.status-completed {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
}

.gs-status-tag.status-declined {
    background: #FDE8E8;
    color: #9B1C1C;
    border: 1px solid #FBD5D5;
}

.gs-code-tag {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    background: #F1F5F9;
    padding: 3px 8px;
    border-radius: 6px;
}

/* PENDING ACTION BANNER */
.gs-pending-action-bar {
    background: #FFFBEB;
    border: 1.5px solid #F59E0B;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.gs-pending-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #92400E;
}

.gs-pending-text strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.gs-pending-text span {
    font-size: 12px;
    color: #B45309;
}

.gs-action-btns {
    display: flex;
    gap: 8px;
}

.gs-btn-sm-accept {
    background: #10B981;
    color: #ffffff !important;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    transition: all 0.2s;
}

.gs-btn-sm-accept:hover {
    background: #059669;
    transform: translateY(-1px);
}

.gs-btn-sm-decline {
    background: #EF4444;
    color: #ffffff !important;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.gs-btn-sm-decline:hover {
    background: #DC2626;
    transform: translateY(-1px);
}

/* VISUAL TIMELINE ROUTE */
.gs-ride-route-timeline {
    position: relative;
    padding-left: 20px;
    margin-bottom: 16px;
}

.gs-timeline-line {
    position: absolute;
    left: 6px;
    top: 14px;
    bottom: 22px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #94A3B8 0, #94A3B8 4px, transparent 4px, transparent 8px);
}

.gs-timeline-node {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.gs-timeline-node:last-child {
    margin-bottom: 0;
}

.gs-node-dot {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    box-sizing: border-box;
}

.gs-node-dot.dot-green {
    border: 3.5px solid #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.gs-node-dot.dot-red {
    border: 3.5px solid #EF4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.gs-node-content {
    flex: 1;
}

.gs-node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.gs-node-title {
    font-size: 10px;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.gs-mini-gps-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #0066FF;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    padding: 2px 7px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.2s;
}

.gs-mini-gps-btn:hover {
    background: #0066FF;
    color: #ffffff;
}

.gs-node-address {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.35;
}

/* FLIGHT CALLOUT */
.gs-flight-callout {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.gs-flight-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gs-flight-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #FEF3C7;
    color: #D97706;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-flight-label {
    font-size: 10px;
    font-weight: 800;
    color: #B45309;
    letter-spacing: 0.5px;
    display: block;
}

.gs-flight-number {
    font-size: 15px;
    font-weight: 800;
    color: #92400E;
}

.gs-flight-check-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    padding: 5px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.gs-flight-check-btn:hover {
    background: #F59E0B;
    color: #ffffff;
}

/* SPECS GRID */
.gs-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.gs-spec-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748B;
}

.gs-spec-card svg {
    flex-shrink: 0;
    color: #64748B;
}

.gs-spec-title {
    font-size: 9px;
    font-weight: 800;
    color: #94A3B8;
    text-transform: uppercase;
    display: block;
    line-height: 1;
    margin-bottom: 2px;
}

.gs-spec-val {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    display: block;
    line-height: 1;
}

/* CHILD SEATS ALERT */
.gs-child-seats-alert {
    background: #FEF2F2;
    border: 1.5px solid #FECACA;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #991B1B;
}

.gs-child-seats-icon {
    flex-shrink: 0;
    color: #DC2626;
}

.gs-child-seats-content strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.gs-child-seats-content span {
    font-size: 13px;
    font-weight: 700;
}

/* CUSTOMER NOTES */
.gs-driver-notes-box {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.gs-notes-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    color: #166534;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.gs-notes-body {
    font-size: 13px;
    font-weight: 500;
    font-style: italic;
    color: #14532D;
    line-height: 1.4;
}

/* CUSTOMER CONTACT CARD */
.gs-customer-contact-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.gs-customer-info-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gs-cust-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #0F172A;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}

.gs-cust-name {
    font-size: 14px;
    font-weight: 800;
    color: #0F172A;
    display: block;
    line-height: 1.2;
}

.gs-cust-phone-label {
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
}

.gs-contact-actions-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gs-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.gs-contact-btn.btn-call {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}

.gs-contact-btn.btn-call:hover {
    background: #1D4ED8;
    color: #ffffff;
}

.gs-contact-btn.btn-whatsapp {
    background: #DCFCE7;
    color: #15803D;
    border: 1px solid #86EFAC;
}

.gs-contact-btn.btn-whatsapp:hover {
    background: #15803D;
    color: #ffffff;
}

.gs-contact-btn.btn-email {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
}

.gs-contact-btn.btn-email:hover {
    background: #475569;
    color: #ffffff;
}

/* PAYMENT & COLLECTION BOX */
.gs-payment-collection-box {
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.gs-payment-collection-box.box-paid {
    background: #ECFDF5;
    border: 1.5px solid #10B981;
}

.gs-payment-collection-box.box-cash {
    background: #FFFBEB;
    border: 1.5px solid #F59E0B;
}

.gs-pay-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-pay-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.box-paid .gs-pay-icon {
    background: #D1FAE5;
    color: #059669;
}

.box-cash .gs-pay-icon {
    background: #FEF3C7;
    color: #D97706;
}

.gs-pay-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
}

.box-paid .gs-pay-label { color: #047857; }
.box-cash .gs-pay-label { color: #B45309; }

.gs-pay-status-desc {
    font-size: 12px;
    font-weight: 600;
}

.box-paid .gs-pay-status-desc { color: #065F46; }
.box-cash .gs-pay-status-desc { color: #92400E; }

.gs-pay-amount-due {
    font-size: 22px;
    font-weight: 800;
    color: #B45309;
    font-family: var(--gs-font-title, sans-serif);
}

.gs-pay-badge-paid {
    background: #10B981;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

/* FOOTER ACTIONS */
.gs-card-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gs-btn-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    min-height: 44px;
    box-sizing: border-box;
}

.gs-btn-card-action.btn-maps {
    background: #F1F5F9;
    color: #1E293B !important;
    border: 1.5px solid #CBD5E1;
}

.gs-btn-card-action.btn-maps:hover {
    background: #E2E8F0;
    border-color: #94A3B8;
}

.gs-btn-card-action.btn-voucher {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #ffffff !important;
    border: 1.5px solid #0F172A;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.gs-btn-card-action.btn-voucher:hover {
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}

/* RESPONSIVE ADAPTATIONS */
@media (max-width: 640px) {
    .gs-portal-header-premium {
        padding: 16px;
    }
    
    .gs-driver-profile-info {
        width: 100%;
    }

    .gs-header-actions-group {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .gs-portal-content-body {
        padding: 14px;
    }

    .gs-driver-ride-card {
        padding: 16px;
    }

    .gs-specs-grid {
        grid-template-columns: 1fr;
    }

    .gs-customer-contact-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .gs-contact-actions-bar {
        width: 100%;
        justify-content: space-between;
    }

    .gs-contact-btn {
        flex: 1;
        justify-content: center;
    }

    .gs-card-footer-actions {
        grid-template-columns: 1fr;
    }

    .gs-dtab-btn {
        padding: 10px 6px;
        flex-direction: column;
        gap: 4px;
    }

    .gs-tab-title-wrap {
        font-size: 11px;
    }
}

/* ==========================================================================
   DRIVER PROFILE & FLEET EDITING
   ========================================================================== */
.gs-profile-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #E2E8F0;
    max-width: 800px;
    margin: 0 auto;
}

.gs-profile-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gs-form-section {
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 24px;
}

.gs-form-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.gs-form-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.gs-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EFF6FF;
    color: var(--gs-primary, #0066FF);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-section-title {
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 2px 0;
    letter-spacing: -0.2px;
}

.gs-section-desc {
    font-size: 12.5px;
    color: #64748B;
    margin: 0;
    line-height: 1.4;
}

.gs-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gs-form-field {
    display: flex;
    flex-direction: column;
}

.gs-form-field label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.gs-form-field label .gs-req {
    color: #DC2626;
    font-weight: 800;
}

.gs-form-field input {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #0F172A !important;
    background: #F8FAFC !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
}

.gs-form-field input:focus {
    border-color: var(--gs-primary, #0066FF) !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12) !important;
}

.gs-field-hint {
    font-size: 11.5px;
    color: #64748B;
    margin-top: 5px;
    line-height: 1.35;
}

/* VEHICLES REPEATER */
.gs-portal-vehicles-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
}

.gs-portal-vehicle-row {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s;
}

.gs-portal-vehicle-row:hover {
    border-color: #CBD5E1;
}

.gs-pv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.gs-pv-number {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gs-primary, #0066FF);
    background: #EFF6FF;
    padding: 3px 10px;
    border-radius: 20px;
}

.gs-btn-remove-veh {
    background: transparent;
    border: 1px solid #FECACA;
    color: #DC2626;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.gs-btn-remove-veh:hover {
    background: #FEE2E2;
}

.gs-pv-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: 12px;
}

.gs-pv-fields-grid input,
.gs-pv-fields-grid select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    font-size: 13.5px;
    color: #0F172A;
    background: #ffffff;
    box-sizing: border-box;
    transition: all 0.2s;
}

.gs-pv-fields-grid input:focus,
.gs-pv-fields-grid select:focus {
    border-color: var(--gs-primary, #0066FF);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}

.gs-pv-driver-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #E2E8F0;
}

@media (max-width: 640px) {
    .gs-pv-driver-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.gs-btn-add-veh {
    background: #F1F5F9;
    border: 1.5px dashed #94A3B8;
    color: #334155;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    width: 100%;
}

.gs-btn-add-veh:hover {
    background: #E2E8F0;
    border-color: var(--gs-primary, #0066FF);
    color: var(--gs-primary, #0066FF);
}

/* SUBMIT BUTTON */
.gs-form-submit-wrap {
    margin-top: 10px;
}

.gs-btn-save-profile {
    background: linear-gradient(135deg, #0066FF 0%, #0044CC 100%);
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35);
    transition: all 0.2s ease;
    width: 100%;
}

.gs-btn-save-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.45);
}

@media (max-width: 640px) {
    .gs-profile-card {
        padding: 16px;
    }
    .gs-form-grid-2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .gs-pv-fields-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Responsive adjustments */
@media (max-width: 860px) {
    .gs-qs-fields-grid {
        grid-template-columns: 1fr 1fr;
    }
    .gs-qs-submit-btn {
        grid-column: span 2;
        justify-content: center;
    }
}

/* ==========================================================================
   PROGRESS STEPPER MOBILE ADAPTATION
   On mobile/tablet (<= 768px), show step title ONLY for the currently active step.
   Desktop (> 768px) keeps all step titles visible.
   ========================================================================== */
@media (max-width: 768px) {
    .gs-wizard-progress {
        padding: 12px 14px;
        gap: 2px;
        overflow-x: hidden;
    }
    .gs-progress-step {
        gap: 6px;
        flex-shrink: 0;
    }
    /* Hide step info text by default on mobile */
    .gs-step-info {
        display: none !important;
    }
    /* Reveal title ONLY for the current active step */
    .gs-progress-step.current .gs-step-info {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        margin-left: 2px;
        animation: gsStepFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .gs-progress-step.current .gs-step-num {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.8px;
        color: var(--gs-primary, #0066FF);
        line-height: 1;
        margin-bottom: 2px;
    }
    .gs-progress-step.current .gs-step-text {
        font-family: var(--gs-font-title, 'Montserrat', sans-serif);
        font-size: 11.5px;
        font-weight: 700;
        color: #ffffff;
        white-space: nowrap;
        line-height: 1.15;
    }
    .gs-step-circle {
        width: 28px;
        height: 28px;
        font-size: 12px;
        flex-shrink: 0;
    }
    .gs-progress-step.current .gs-step-circle {
        width: 30px;
        height: 30px;
        font-size: 13px;
        border-color: #BFDBFE;
        box-shadow: 0 0 10px rgba(0, 102, 255, 0.7);
    }
    .gs-progress-line {
        margin: 0 6px;
        min-width: 8px;
        height: 2px;
    }
}

@media (max-width: 380px) {
    .gs-wizard-progress {
        padding: 10px 8px;
        gap: 2px;
    }
    .gs-progress-line {
        margin: 0 3px;
        min-width: 6px;
    }
    .gs-step-circle {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .gs-progress-step.current .gs-step-circle {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .gs-progress-step.current .gs-step-text {
        font-size: 10.5px;
    }
}

@keyframes gsStepFadeIn {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 640px) {
    .gs-summary-bar {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
        text-align: center;
    }
    .gs-step-nav-bar {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .gs-step-nav-actions,
    .gs-tf-choice-actions,
    .gs-wizard-nav-step3,
    .gs-wizard-nav-final {
        width: 100% !important;
    }
    .gs-vehicle-cards { grid-template-columns: 1fr; }
    .gs-card-actions { grid-template-columns: 1fr; }
    .gs-pax-luggage-row { flex-direction: column; gap: 12px; }
    .gs-qs-fields-grid { grid-template-columns: 1fr; }
    .gs-qs-submit-btn { grid-column: span 1; }
}

@media (max-width: 520px) {
    .gs-tf-bottom-choice-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        text-align: center !important;
        padding: 16px 14px !important;
    }
    .gs-tf-choice-info {
        justify-content: center !important;
    }
    .gs-step-nav-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding-top: 16px !important;
    }
    .gs-step-nav-actions,
    .gs-tf-choice-actions,
    .gs-wizard-nav-step3,
    .gs-wizard-nav-final {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    .gs-btn-prev,
    .gs-btn-next,
    .gs-submit-btn,
    .gs-tf-btn-continue,
    #gs-back-to-step-1-btn,
    #gs-back-to-step-2-btn,
    #gs-back-to-step-3-btn,
    #gs-go-to-step-3,
    #gs-go-to-step-4,
    #gs_submit_btn {
        width: 100% !important;
        min-width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   TRANSFEERO STYLE STEP 2: 2-COLUMN VEHICLES & STICKY BOOKING SUMMARY
   All accents, active borders, and highlights inherit from the theme!
   ========================================================================== */

.gs-step2-transfeero-wrap {
    padding: 24px 28px !important;
}

.gs-tf-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
    align-items: start;
}

/* --- LEFT COLUMN: TOUR SHOWCASE HERO IMAGE (STEP 2) --- */
.gs-tf-tour-hero-wrap {
    position: relative;
    height: 250px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    background: #0F172A;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.gs-tour-hero-img-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.gs-tour-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.92);
    transition: transform 0.6s ease;
}

.gs-tf-tour-hero-wrap:hover .gs-tour-hero-img {
    transform: scale(1.03);
}

.gs-tour-hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.4) 40%, rgba(15, 23, 42, 0.92) 100%);
    pointer-events: none;
}

.gs-tour-hero-content {
    position: absolute;
    bottom: 16px;
    left: 18px;
    right: 18px;
    z-index: 2;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gs-tour-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #FFFFFF;
    width: fit-content;
}

.gs-tour-hero-title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    font-family: var(--gs-font-title, sans-serif);
}

.gs-tour-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.gs-tour-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3px 9px;
    border-radius: 16px;
    font-size: 11.5px;
    font-weight: 600;
    color: #F1F5F9;
}

/* --- LEFT COLUMN: ROUTE MAP --- */
.gs-tf-map-wrap {
    position: relative;
    height: 250px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    background: #F1F5F9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.gs-tf-map-canvas {
    width: 100%;
    height: 100%;
    z-index: 1;
}

#gs-tf-map-canvas .leaflet-tile-pane {
    filter: grayscale(100%) contrast(92%) brightness(104%);
}

/* Custom Leaflet Map Markers (Pickup Pin & Dropoff Checkered Flag) */
.gs-map-custom-marker {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.gs-marker-pin,
.gs-marker-flag {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom center;
}

.gs-marker-pin:hover,
.gs-marker-flag:hover {
    transform: scale(1.18);
    cursor: pointer;
}

.gs-tf-map-badge {
    position: absolute;
    z-index: 999;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
}

.gs-tf-map-badge.badge-pickup {
    top: 14px;
    left: 14px;
    max-width: 320px;
}

.gs-tf-map-badge.badge-dropoff {
    bottom: 14px;
    right: 14px;
    max-width: 320px;
}

.gs-tf-mb-info {
    display: flex;
    flex-direction: column;
}

.gs-tf-mb-label {
    font-size: 10px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-bottom: 3px;
}

.gs-tf-mb-name {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.gs-tf-mb-icon {
    font-size: 13px;
}

.gs-tf-mb-time {
    font-size: 11px;
    font-weight: 800;
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.gs-tf-mb-time.time-dark {
    background: #111827;
    color: #FFFFFF;
}

.gs-tf-mb-time.time-accent {
    background: var(--gs-primary);
    color: #FFFFFF;
}

/* Centered Notice under map */
.gs-tf-top-notice {
    text-align: center;
    padding: 12px 0 16px 0;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
}

/* Return Drawer */
.gs-tf-return-drawer {
    background: #F8FAFC;
    border: 1.5px solid var(--gs-primary);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.gs-tf-rd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--gs-dark);
}

.gs-tf-rd-close {
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #6B7280;
}

/* --- TRANSFEERO VEHICLE CARDS --- */
.gs-tf-vehicle-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gs-tf-card {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 20px;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    user-select: none;
}

.gs-tf-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.gs-tf-card.selected {
    border: 2px solid var(--gs-primary) !important;
    box-shadow: 0 0 0 1px var(--gs-primary), 0 8px 20px rgba(0, 0, 0, 0.06);
    background: #FFFFFF;
}

.gs-tf-card-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 95px;
}

.gs-tf-car-img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.gs-tf-card:hover .gs-tf-car-img,
.gs-tf-card.selected .gs-tf-car-img {
    transform: scale(1.03);
}

.gs-tf-card-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gs-tf-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gs-tf-card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--gs-dark);
    margin: 0;
    font-family: var(--gs-font-title);
    line-height: 1.2;
}

.gs-tf-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    padding: 2.5px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.25;
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.gs-tf-specs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
}

.gs-spec-tip {
    font-size: 12px;
    cursor: help;
    opacity: 0.7;
}

.gs-tf-models-text {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
    line-height: 1.4;
}

/* Price column (Right side of card) */
.gs-tf-card-price-col {
    text-align: right;
    min-width: 125px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.gs-tf-old-price-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-bottom: 2px;
}

.gs-tf-old-price {
    font-size: 12px;
    color: #9CA3AF;
    text-decoration: line-through;
    font-weight: 500;
}

.gs-tf-discount-tag {
    background: #DCFCE7;
    color: #15803D;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
}

.gs-tf-current-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--gs-dark);
    line-height: 1.1;
    font-family: var(--gs-font-title);
}

.gs-tf-price-label {
    font-size: 11px;
    color: #9CA3AF;
    margin-top: 2px;
}

/* --- PROMO ROUNDTRIP BANNER --- */
.gs-tf-roundtrip-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 6px 0;
}

.gs-tf-rt-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gs-tf-rt-icon {
    font-size: 20px;
    color: #111827;
    font-weight: 700;
}

.gs-tf-rt-left strong {
    display: block;
    font-size: 14px;
    color: #111827;
    margin-bottom: 2px;
}

.gs-tf-rt-left p {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
}

.gs-tf-rt-add-btn {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--gs-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--gs-primary);
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.gs-tf-rt-add-btn:hover {
    background: var(--gs-primary);
    color: #FFFFFF;
}

/* --- BOTTOM STICKY CHOICE BAR --- */
.gs-tf-bottom-choice-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 15;
}

.gs-tf-choice-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gs-tf-choice-lbl {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

.gs-tf-choice-name {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
}

.gs-tf-choice-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 16 !important;
}

.gs-tf-choice-actions .gs-btn-prev,
.gs-tf-choice-actions #gs-back-to-step-1-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 17 !important;
}

.gs-tf-btn-continue {
    background: var(--gs-btn-bg, #0A0D12) !important;
    color: var(--gs-btn-color, #FFFFFF) !important;
    border: 1.5px solid transparent !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 26px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 17 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-family: var(--gs-btn-font, var(--gs-font-title, 'Montserrat', sans-serif)) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.gs-tf-btn-continue:hover {
    background: var(--gs-btn-bg-hover, #1E293B) !important;
    color: var(--gs-btn-color-hover, #FFFFFF) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

/* --- RIGHT COLUMN: STICKY "YOUR BOOKING" SIDEBAR --- */
.gs-tf-sidebar-col {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gs-tf-summary-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.gs-tf-sc-header {
    margin-bottom: 12px;
}

.gs-tf-sc-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--gs-dark);
    margin: 0;
    font-family: var(--gs-font-title);
}

.gs-tf-sc-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.gs-tf-sc-badge,
.gs-tf-sc-pax {
    background: #F3F4F6;
    color: #374151;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.gs-tf-sc-outward-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #4B5563;
    padding-bottom: 12px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 14px;
}

.gs-tf-btn-edit-top {
    background: transparent;
    border: none;
    color: #4B5563;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.gs-tf-btn-edit-top:hover {
    color: var(--gs-primary);
}

/* Route Timeline in Sidebar */
.gs-tf-timeline {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.gs-tf-tl-stop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.gs-tf-tl-icon-stop {
    width: 22px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-tl-pin-img {
    width: 18px;
    height: 24px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.gs-tl-flag-svg {
    width: 20px;
    height: 22px;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.gs-tf-tl-sq-dot {
    font-size: 12px;
    line-height: 1.2;
}

.gs-tf-tl-sq-dot.dot-black {
    color: #111827;
}

.gs-tf-tl-sq-dot.dot-accent {
    color: var(--gs-primary);
}

.gs-tf-tl-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    padding: 0 6px;
}

.gs-tf-tl-place {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.35;
    word-break: break-word;
}

.gs-tf-tl-sub {
    font-size: 11.5px;
    color: #64748B;
    line-height: 1.3;
    margin-top: 1px;
}

.gs-tf-tl-sub:empty {
    display: none !important;
}

.gs-tf-tl-extra {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    width: 100%;
}

.gs-tf-tl-extra:empty {
    display: none !important;
}

.gs-tf-tl-extra-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    padding: 3px 8px;
    border-radius: 6px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1E293B;
    max-width: 100%;
    word-break: break-word;
}

.gs-tf-tl-extra-badge svg {
    flex-shrink: 0;
}

.gs-tf-tl-extra-badge.badge-address {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #15803D;
}

.gs-tf-tl-extra-badge.badge-flight {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1D4ED8;
}

.gs-tf-tl-extra-badge.badge-ferry {
    background: #F5F3FF;
    border-color: #DDD6FE;
    color: #6D28D9;
}

.gs-tf-tl-time {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 1px;
}

.gs-tf-tl-connecting-line {
    margin-left: 10px;
    padding: 10px 0 10px 18px;
    border-left: 2px dashed #CBD5E1;
}

.gs-tf-tl-pill-info {
    display: inline-block;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #64748B;
}

.gs-tf-sidebar-add-return-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    border: 1.5px dashed #CBD5E1;
    border-radius: 10px;
    background: #F8FAFC;
    padding: 12px 14px;
    cursor: pointer;
    text-align: center;
    margin-bottom: 18px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-decoration: none;
}

.gs-tf-sidebar-add-return-btn:hover {
    border-color: #0066FF;
    background: #EFF6FF;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.12);
    transform: translateY(-1px);
}

.gs-tf-sidebar-add-return-btn:active {
    transform: translateY(0);
}

.gs-tf-sar-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    font-weight: 800;
    font-size: 13.5px;
    color: #0F172A;
    letter-spacing: 0.5px;
}

.gs-tf-sar-icon {
    font-size: 14px;
    color: #0066FF;
}

.gs-tf-sar-discount-tag {
    background: #DCFCE7;
    color: #15803D;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    line-height: 1.2;
    letter-spacing: 0;
}

.gs-tf-sar-motto {
    font-family: var(--gs-font-body, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    letter-spacing: 0.1px;
    line-height: 1.3;
}

.gs-tf-sidebar-add-return-btn:hover .gs-tf-sar-motto {
    color: #047857;
}

/* Trust Benefits & Payment Logos Card (Transfeero style) */
.gs-tf-trust-wrap {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.gs-tf-trust-card {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: none;
}

.gs-tf-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.gs-tf-ti-icon {
    font-size: 18px;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 1px;
}

.gs-tf-ti-content {
    flex: 1;
}

.gs-tf-ti-title {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gs-primary, #0066FF);
    line-height: 1.3;
    margin-bottom: 2px;
}

.gs-tf-ti-desc {
    font-size: 11.5px;
    color: #6B7280;
    line-height: 1.45;
    margin: 0;
}

.gs-tf-trust-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.gs-tf-trust-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.pill-green-outline {
    border: 1px solid #16A34A;
    color: #16A34A;
    border-radius: 20px;
    padding: 3px 10px;
    width: fit-content;
    background: #F0FDF4;
    font-size: 11px;
}

/* Payment logos */
.gs-tf-payment-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
    text-align: center;
}

.gs-tf-payment-icons-strip {
    height: 27px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: inline-block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gs-tf-payment-icons-strip:hover {
    transform: scale(1.02);
}

/* Responsive for Transfeero Grid - Exact Mobile / Tablet Order */
@media (max-width: 992px) {
    .gs-tf-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .gs-tf-sidebar-col {
        display: contents;
    }
    .gs-tf-main-col {
        display: contents;
    }

    /* 1) Your Booking card with Add return */
    .gs-tf-summary-card {
        order: 1;
        margin-bottom: 18px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 2) Route Map preview (or tour hero & pickup schedule) */
    .gs-tf-tour-hero-wrap,
    .gs-step2-tour-box,
    .gs-tf-map-wrap {
        order: 2;
        margin-bottom: 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .gs-tf-top-notice {
        order: 3;
        margin-bottom: 12px;
        text-align: center;
    }

    .gs-tf-return-drawer {
        order: 3;
        margin-bottom: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 3) Vehicles cards list */
    .gs-tf-vehicle-list {
        order: 4;
        width: 100%;
        box-sizing: border-box;
    }

    /* 4) Bottom choice bar (Your choice + Edit route & Continue) */
    .gs-tf-bottom-choice-bar {
        order: 5;
        margin-top: 18px;
        margin-bottom: 18px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 5) 100% Private Transfers trust benefits & Payment logos */
    .gs-tf-trust-wrap {
        order: 6;
        margin-top: 0;
        margin-bottom: 20px;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    .gs-step2-transfeero-wrap {
        padding: 16px 14px !important;
    }
    .gs-tf-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 12px;
    }
    .gs-tf-card-price-col {
        align-items: center;
        text-align: center;
    }
    .gs-tf-card-header {
        justify-content: center;
    }
    .gs-tf-specs-row {
        justify-content: center;
    }
    .gs-tf-bottom-choice-bar {
        flex-direction: column !important;
        gap: 14px !important;
        text-align: center !important;
    }
    .gs-tf-choice-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
        justify-content: center !important;
    }
    .gs-tf-choice-actions .gs-btn-prev,
    .gs-tf-choice-actions .gs-btn-next,
    .gs-tf-btn-continue {
        width: 100% !important;
        min-width: 100% !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   LIVE AUTOCOMPLETE DROPDOWN STYLES
   ========================================================================== */
.gs-autocomplete-wrapper {
    position: relative !important;
    overflow: visible !important;
}

.gs-autocomplete-wrapper.gs-ac-open,
.gs-autocomplete-wrapper:focus-within {
    z-index: 50 !important;
}

.gs-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 300px;
    max-width: min(380px, 92vw);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.08);
    z-index: 100 !important;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    display: none;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

#bl-dropoff-autocomplete-list,
#gs-dropoff-autocomplete-list {
    left: auto;
    right: 0;
}

.gs-autocomplete-dropdown::-webkit-scrollbar {
    width: 4px;
}
.gs-autocomplete-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.gs-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}

@media (max-width: 640px) {
    .gs-autocomplete-dropdown {
        min-width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        max-height: 270px;
    }
}

.gs-ac-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3.5px 8px;
    cursor: pointer;
    font-size: 11px;
    color: #1e293b;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.12s ease;
    text-align: left;
    min-height: 24px;
}

.gs-ac-item:last-child {
    border-bottom: none;
}

.gs-ac-item:hover,
.gs-ac-item.active {
    background: #f1f5f9;
    color: var(--gs-primary, #0066FF);
}

.gs-ac-icon {
    font-size: 12.5px;
    flex-shrink: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
}

.gs-ac-text {
    font-weight: 600;
    font-size: 11px;
    color: #0f172a;
    flex-grow: 1;
    white-space: normal;
    line-height: 1.2;
    word-break: break-word;
}

.gs-ac-section-header {
    padding: 2.5px 8px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    border-top: 1px solid #f1f5f9;
    user-select: none;
    text-align: left;
    line-height: 13px;
}

.gs-ac-section-header:first-child {
    border-top: none;
}

.gs-ac-text-col {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
}

.gs-ac-subtext {
    font-size: 9.5px;
    color: #64748b;
    font-weight: 400;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

.gs-ac-loading {
    padding: 11px 14px;
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fafafa;
    border-top: 1px solid #f1f5f9;
}

.gs-ac-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid #cbd5e1;
    border-top-color: #0066FF;
    border-radius: 50%;
    animation: gsAcSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes gsAcSpin {
    to { transform: rotate(360deg); }
}

.gs-ac-empty {
    padding: 12px 14px;
    font-size: 12px;
    color: #64748b;
    font-style: italic;
    line-height: 1.4;
    text-align: left;
}

/* SMART LOCATION AUTOCOMPLETE ENHANCEMENTS */
.gs-ac-pill-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px 6px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}
.gs-ac-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    border-radius: 5px;
    padding: 2px 5px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 2.5px;
    flex-shrink: 0;
    outline: none;
    box-shadow: none;
}
.gs-ac-pill:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #0f172a;
}
.gs-ac-pill.active {
    background: #0066FF !important;
    border-color: #0066FF !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 102, 255, 0.25) !important;
}
.gs-ac-pill .gs-ac-pill-count {
    font-size: 8px !important;
    font-weight: 700 !important;
    background: rgba(0, 0, 0, 0.07);
    padding: 0px 3px;
    border-radius: 4px;
    line-height: 10px;
}
.gs-ac-pill.active .gs-ac-pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.gs-ac-badge {
    display: inline-block;
    font-size: 7.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    padding: 1px 3.5px;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 10px;
    margin-left: 4px;
    vertical-align: middle;
}
.gs-ac-badge-popular {
    background: #ffedd5;
    color: #c2410c;
}
.gs-ac-badge-airport {
    background: #e0f2fe;
    color: #0369a1;
}
.gs-ac-badge-port {
    background: #e0e7ff;
    color: #4338ca;
}
.gs-ac-badge-ski {
    background: #e0f2fe;
    color: #0284c7;
}
.gs-ac-badge-center,
.gs-ac-badge-city {
    background: #fdf4ff;
    color: #a21caf;
}
.gs-ac-badge-area {
    background: #f1f5f9;
    color: #475569;
}
.gs-ac-badge-beach {
    background: #fffbeb;
    color: #b45309;
}
.gs-ac-badge-hotel,
.gs-ac-badge-poi {
    background: #fef3c7;
    color: #92400e;
}
.gs-ac-match {
    background: #fef08a;
    color: #854d0e;
    font-weight: 700;
    border-radius: 2px;
    padding: 0 1px;
}

/* SMART CONTEXTUAL LOCATION CARDS (STEP 3) */
.gs-smart-detail-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: border-color 0.2s ease;
}

.gs-smart-detail-card:focus-within {
    border-color: #93c5fd;
}

.gs-smart-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.gs-smart-detail-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-smart-detail-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke: currentColor;
    fill: none;
    transition: transform 0.2s ease;
}

.gs-smart-detail-card:hover .gs-smart-detail-icon {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.gs-smart-detail-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.gs-smart-detail-sub {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0;
}

.gs-type-fields-group {
    transition: opacity 0.2s ease;
}

/* STEP 4: FINAL REVIEW CARD */
.gs-review-card {
    background: #0f172a;
    color: #ffffff;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}

.gs-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.gs-review-service-badge {
    background: var(--gs-primary);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gs-review-title {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.gs-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.gs-review-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gs-review-label {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 600;
}

.gs-review-val {
    font-size: 14px;
    color: #f8fafc;
    font-weight: 700;
}

/* Phone Flag & Country Code Selector (Clean Modern Group) */
.gs-phone-input-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    overflow: hidden !important;
    height: 48px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.gs-phone-input-group:focus-within {
    border-color: var(--gs-primary) !important;
    box-shadow: 0 0 0 3px rgba(1, 111, 248, 0.14) !important;
}

.gs-phone-flag-box {
    position: relative !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    flex: 0 0 92px !important;
    height: 100% !important;
    background: #f8fafc !important;
    border-right: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.gs-phone-flag-box select#gs_phone_country_code {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.gs-phone-input-group input[type="tel"]#gs_customer_phone {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    outline: none !important;
    height: 100% !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    background: transparent !important;
    color: #1e293b !important;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.gs-phone-input-group input[type="tel"]#gs_customer_phone:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================================
   INVOICE BOX & PROMO CODE STYLING
   ======================================================== */
.gs-invoice-box {
    transition: all 0.25s ease;
}
.gs-invoice-box:hover {
    border-color: #CBD5E1 !important;
}
.gs-invoice-box input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.gs-invoice-box input[type="text"]:focus {
    border-color: #0066FF;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}

.gs-btn-coupon:hover {
    background: #1e293b !important;
}
.gs-btn-coupon:active {
    transform: scale(0.98);
}
.gs-remove-coupon-btn:hover {
    color: #b91c1c !important;
    transform: scale(1.15);
}
#gs-coupon-feedback.success {
    color: #16A34A !important;
}
#gs-coupon-feedback.error {
    color: #DC2626 !important;
}

/* ========================================================
   UNSERVICEABLE ROUTE NOTICE BANNER (OUTSIDE BASE ZONES)
   ======================================================== */
.gs-unserviceable-route-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #FFF1F2;
    border: 1.5px solid #FCA5A5;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 14px 0 16px;
    color: #991B1B;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.08);
    animation: gsShake 0.4s ease-in-out;
}
.gs-unserviceable-route-banner .gs-urb-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.gs-unserviceable-route-banner .gs-urb-content {
    flex: 1;
}
.gs-unserviceable-route-banner .gs-urb-title {
    font-size: 15px;
    font-weight: 700;
    color: #B91C1C;
    margin-bottom: 4px;
}
.gs-unserviceable-route-banner .gs-urb-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: #7F1D1D;
    font-weight: 500;
}
.gs-unserviceable-route-banner .gs-urb-email-text {
    font-weight: 700;
    color: #B91C1C;
    text-decoration: underline;
}
.gs-unserviceable-route-banner .gs-urb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 16px;
    background: #DC2626;
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 7px;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.gs-unserviceable-route-banner .gs-urb-link:hover {
    background: #B91C1C;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.35);
}

/* ==========================================================================
   AEO ROYAL BLUE CALLOUT BOX (rgb(0, 71, 186))
   ========================================================================== */
.aeo-royal-box,
div.vc_message_box.aeo-royal-box,
div.wpb_alert.aeo-royal-box,
.wpb_alert.aeo-royal-box {
    border: 1.5px solid rgb(0, 71, 186) !important;
    background-color: rgba(0, 71, 186, 0.04) !important;
    background-image: none !important;
    border-radius: 8px !important;
}

.aeo-royal-box .vc_message_box-icon,
.aeo-royal-box i,
.aeo-royal-box svg {
    color: rgb(0, 71, 186) !important;
}

.aeo-royal-box p,
.aeo-royal-box {
    color: #1e293b !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* ==========================================================================
   CUSTOMER MANAGE & LOOKUP BOOKING PORTAL (EXECUTIVE LUXURY STYLES)
   ========================================================================== */
.getseat-manage-wrapper {
    font-family: var(--gs-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: #0F172A;
    max-width: 1140px;
    margin: 24px auto 50px;
    padding: 0 16px;
    box-sizing: border-box;
}

/* 1. Lookup Card View */
.gs-manage-lookup-card {
    max-width: 540px;
    margin: 40px auto;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.10), 0 0 1px rgba(15, 23, 42, 0.08);
    padding: 38px 34px;
    text-align: center;
    box-sizing: border-box;
}

.gs-manage-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.12);
}

.gs-manage-lookup-header h2 {
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    font-size: 24px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}

.gs-manage-lookup-header p {
    font-size: 14px;
    color: #64748B;
    line-height: 1.55;
    margin: 0 0 24px;
}

.gs-manage-form {
    text-align: left;
}

.gs-manage-field-group {
    margin-bottom: 20px;
}

.gs-manage-field-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 6px;
}

.gs-manage-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.gs-manage-input-icon {
    position: absolute;
    left: 14px;
    font-size: 15px;
    color: #94A3B8;
    pointer-events: none;
    font-weight: 700;
}

.gs-manage-input-wrap input {
    width: 100% !important;
    padding: 12px 14px 12px 42px !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    color: #0F172A !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.gs-manage-input-wrap input:focus {
    border-color: #0066FF !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15) !important;
}

.gs-manage-field-hint {
    display: block;
    font-size: 11.5px;
    color: #94A3B8;
    margin-top: 5px;
}

.gs-manage-btn-primary {
    width: 100%;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #FFFFFF;
    border: none;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
    margin-top: 10px;
}

.gs-manage-btn-primary:hover {
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35);
}

.gs-manage-lookup-footer {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #F1F5F9;
    font-size: 13px;
    color: #64748B;
}

.gs-manage-link {
    color: #0066FF;
    text-decoration: none;
    font-weight: 600;
}
.gs-manage-link:hover {
    text-decoration: underline;
}

/* Alerts */
.gs-manage-alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13.5px;
    line-height: 1.45;
}

.gs-manage-alert-danger {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.gs-manage-alert-cancelled {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FEF2F2;
    border: 1.5px solid #FECACA;
    border-radius: 14px;
    color: #991B1B;
    margin-bottom: 22px;
    padding: 18px 22px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.06);
}

.gs-manage-alert-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.gs-manage-alert-text strong {
    display: block;
    font-size: 15.5px;
    margin-bottom: 3px;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

/* 2. Top Bar & Executive Badges */
.gs-manage-dashboard {
    width: 100%;
}

.gs-manage-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 12px 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.gs-manage-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 9px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    transition: all 0.15s ease;
}

.gs-manage-back-btn:hover {
    background: #F1F5F9;
    color: #0F172A;
    border-color: #CBD5E1;
}

.gs-manage-header-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gs-manage-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1E293B;
    background: #F8FAFC;
    border: 1px solid #CBD5E1;
    padding: 6px 13px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gs-manage-code-pill:hover {
    background: #EFF6FF;
    border-color: #93C5FD;
    color: #1E40AF;
}
.gs-manage-code-pill.copied {
    background: #DCFCE7;
    border-color: #86EFAC;
    color: #166534;
}
.gs-ref-prefix {
    color: #64748B;
    font-size: 12px;
}
.gs-ref-num {
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    font-weight: 800;
    letter-spacing: 0.3px;
}
.gs-copy-icon {
    font-size: 12px;
    opacity: 0.7;
}

.gs-manage-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-status-bullet {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
    box-shadow: 0 0 5px currentColor;
}

.gs-manage-status-pill.status-green { background: #DEF7EC; color: #03543F; border: 1px solid #BCF0DA; }
.gs-manage-status-pill.status-blue  { background: #EFF6FF; color: #1E40AF; border: 1px solid #DBEAFE; }
.gs-manage-status-pill.status-amber { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.gs-manage-status-pill.status-red   { background: #FDE8E8; color: #9B1C1C; border: 1px solid #FBD5D5; }
.gs-manage-status-pill.status-gray  { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }

.gs-manage-edit-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #0369A1;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 5px 11px;
    border-radius: 8px;
}

/* 3. Grid Layout */
.gs-manage-grid {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 960px) {
    .gs-manage-grid {
        grid-template-columns: 1fr;
    }
}

/* 4. Cards & Tickets */
.gs-manage-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    margin-bottom: 24px;
    overflow: hidden;
}

.gs-manage-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 22px;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    border-bottom: 1px solid #E2E8F0;
}

.gs-manage-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-leg-icon-pill {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gs-leg-icon-pill.outward {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #0066FF;
}
.gs-leg-icon-pill.return {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #059669;
}
.gs-leg-icon-pill.passenger {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #0F172A;
}

.gs-manage-card-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    letter-spacing: -0.2px;
}

.gs-leg-sub {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-top: 1px;
}

.gs-manage-date-badge {
    font-size: 12.5px;
    font-weight: 700;
    color: #0284C7;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 5px 12px;
    border-radius: 9px;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-manage-card-body {
    padding: 22px 24px;
}

/* 5. Route Boarding Pass Visualization with Pin Logo & Finish Flag */
.gs-manage-route-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    margin-bottom: 12px;
}

.gs-manage-route-point {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.gs-route-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.gs-tl-pin-img {
    width: 18px;
    height: auto;
    display: block;
}

.gs-tl-flag-svg {
    display: block;
}

.gs-manage-point-info {
    display: flex;
    flex-direction: column;
}

.gs-manage-point-label {
    font-size: 10.5px;
    color: #64748B;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.6px;
    margin-bottom: 2px;
}

.gs-manage-point-name {
    font-size: 14px;
    color: #0F172A;
    font-weight: 800;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    line-height: 1.35;
}

.gs-manage-route-connector {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0 8px;
}

.gs-connector-line {
    width: 32px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #CBD5E1, #CBD5E1 4px, transparent 4px, transparent 8px);
}

.gs-connector-badge {
    font-size: 15px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.gs-route-hub-notice {
    font-size: 12px;
    color: #64748B;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 20px;
    line-height: 1.45;
}

/* 6. Form Groups & Field Inputs */
.gs-edit-sections-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gs-edit-group {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color 0.15s ease;
}
.gs-edit-group:focus-within {
    border-color: #93C5FD;
}

.gs-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #E2E8F0;
}
.gs-group-icon {
    font-size: 15px;
}
.gs-group-header strong {
    font-size: 13px;
    font-weight: 800;
    color: #1E293B;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    letter-spacing: -0.1px;
}

.gs-manage-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 16px;
}

.gs-manage-field.full-width {
    grid-column: span 2;
}

@media (max-width: 640px) {
    .gs-manage-fields-grid {
        grid-template-columns: 1fr;
    }
    .gs-manage-field.full-width {
        grid-column: span 1;
    }
    .gs-manage-route-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .gs-manage-route-connector {
        padding: 4px 0;
    }
}

.gs-manage-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.gs-field-input-box {
    position: relative;
    display: flex;
    align-items: center;
}

.gs-input-prefix-icon {
    position: absolute;
    left: 12px;
    font-size: 15px;
    color: #94A3B8;
    pointer-events: none;
    z-index: 2;
}

.gs-field-input-box input,
.gs-field-input-box select,
.gs-field-input-box textarea {
    width: 100% !important;
    padding: 10px 12px 10px 38px !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all 0.15s ease !important;
}

.gs-field-input-box.textarea-box textarea {
    padding: 10px 12px !important;
    min-height: 80px !important;
}

.gs-field-input-box input::placeholder,
.gs-field-input-box textarea::placeholder,
.gs-manage-container input::placeholder,
.gs-manage-container textarea::placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
    opacity: 0.65 !important;
}

.gs-field-input-box input::-webkit-input-placeholder,
.gs-field-input-box textarea::-webkit-input-placeholder,
.gs-manage-container input::-webkit-input-placeholder,
.gs-manage-container textarea::-webkit-input-placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
    opacity: 0.65 !important;
}

.gs-field-input-box input::-moz-placeholder,
.gs-field-input-box textarea::-moz-placeholder,
.gs-manage-container input::-moz-placeholder,
.gs-manage-container textarea::-moz-placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
    opacity: 0.65 !important;
}

.gs-field-input-box input:-ms-input-placeholder,
.gs-field-input-box textarea:-ms-input-placeholder,
.gs-manage-container input:-ms-input-placeholder,
.gs-manage-container textarea:-ms-input-placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
    opacity: 0.65 !important;
}

.gs-field-input-box input:focus,
.gs-field-input-box select:focus,
.gs-field-input-box textarea:focus {
    border-color: #0066FF !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.14) !important;
}

.gs-field-input-box.is-readonly input,
.gs-field-input-box input[disabled],
.gs-field-input-box textarea[disabled] {
    background: #F8FAFC !important;
    color: #64748B !important;
    border-color: #E2E8F0 !important;
    cursor: not-allowed !important;
}

/* Interactive cursor for Flatpickr date & time inputs (overrides readonly) */
.gs-field-input-box input.gs-manage-flatpickr-date,
.gs-field-input-box input.gs-manage-flatpickr-time,
.gs-manage-container input.flatpickr-input {
    cursor: pointer !important;
    background: #FFFFFF !important;
    color: #0F172A !important;
}

.gs-field-input-box input.gs-manage-flatpickr-date:hover,
.gs-field-input-box input.gs-manage-flatpickr-time:hover,
.gs-manage-container input.flatpickr-input:hover {
    border-color: #0066FF !important;
}

.gs-field-input-box input.gs-manage-flatpickr-date[disabled],
.gs-field-input-box input.gs-manage-flatpickr-time[disabled],
.gs-manage-container input.flatpickr-input[disabled] {
    cursor: not-allowed !important;
    background: #F8FAFC !important;
    color: #64748B !important;
    border-color: #E2E8F0 !important;
}

.gs-lock-indicator {
    position: absolute;
    right: 12px;
    font-size: 13px;
    color: #94A3B8;
    pointer-events: none;
}

.gs-field-hint {
    display: block;
    font-size: 11px;
    color: #94A3B8;
    margin-top: 4px;
}

/* 7. Edit Action Toolbar & Sticky Save */
.gs-manage-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 20px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.gs-action-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gs-manage-btn-save {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #FFFFFF;
    border: 1px solid #334155;
    padding: 12px 24px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-manage-btn-save:hover {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
    border-color: #0066FF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 102, 255, 0.35);
}

.gs-manage-btn-save.loading {
    opacity: 0.7;
    pointer-events: none;
}

.gs-manage-status-msg {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
}
.gs-manage-status-msg.success { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.gs-manage-status-msg.danger  { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

.gs-action-hint {
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
}

/* 8. Sidebar Cards */
.gs-manage-side-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    padding: 22px;
    margin-bottom: 22px;
}

.gs-manage-side-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #0F172A;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Voucher Card (Luxury Midnight Navy) */
.gs-manage-voucher-card {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #FFFFFF;
    border: 1px solid #334155;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.25);
}

.gs-manage-voucher-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.gs-manage-voucher-icon {
    font-size: 26px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-manage-voucher-head h4 {
    margin: 0;
    color: #FFFFFF;
    font-size: 15.5px;
    font-weight: 800;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-voucher-sub {
    font-size: 10px;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.gs-manage-voucher-card p {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.5;
    margin: 0 0 18px;
}

.gs-manage-btn-voucher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
    color: #FFFFFF !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    padding: 12px 18px;
    border-radius: 10px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35);
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-manage-btn-voucher:hover {
    background: linear-gradient(135deg, #0052CC 0%, #003D99 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.45);
}

/* Financial Summary Card */
.gs-fin-header,
.gs-cancel-header,
.gs-support-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F5F9;
}
.gs-fin-icon,
.gs-cancel-icon,
.gs-support-icon {
    font-size: 18px;
}

.gs-manage-fin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 7px 0;
    color: #64748B;
}

.gs-fin-lbl {
    font-weight: 600;
}

.gs-fin-val {
    color: #0F172A;
    font-weight: 800;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-manage-fin-green {
    color: #10B981;
    font-weight: 800;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-manage-fin-total {
    border-top: 1.5px solid #F1F5F9;
    margin-top: 8px;
    padding-top: 12px;
    font-size: 14.5px;
    color: #0F172A;
}

.gs-fin-total-lbl {
    font-weight: 700;
}

.gs-manage-fin-due {
    color: #0066FF;
    font-size: 20px;
    font-weight: 900;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-manage-fin-meta {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #E2E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
}

.gs-fin-meta-item small {
    display: block;
    color: #94A3B8;
    font-size: 10.5px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.gs-meta-bold {
    font-weight: 700;
    color: #1E293B;
}

.gs-manage-badge-pay {
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.4px;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}
.gs-manage-badge-pay.paid { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.gs-manage-badge-pay.unpaid { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }

/* Cancellation Policy Card */
.gs-manage-policy-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 16px;
}

.gs-manage-policy-box.status-eligible {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
}

.gs-manage-policy-box.status-locked {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
}

.gs-manage-policy-box.status-cancelled {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.gs-manage-policy-info strong {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 3px;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-manage-btn-cancel-trigger {
    width: 100%;
    background: #FFFFFF;
    color: #DC2626;
    border: 1.5px solid #FCA5A5;
    padding: 11px 18px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-manage-btn-cancel-trigger:hover {
    background: #FEF2F2;
    border-color: #EF4444;
}

.gs-manage-urgent-support {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gs-manage-btn-support-call {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0F172A;
    color: #FFFFFF !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 10px;
    border-radius: 8px;
}

.gs-manage-btn-support-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F5F9;
    color: #334155 !important;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px;
    border-radius: 8px;
}

/* 24/7 VIP Customer Support */
.gs-support-desc {
    font-size: 13px;
    color: #64748B;
    line-height: 1.45;
    margin: 0 0 14px;
}

.gs-support-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gs-btn-support-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    color: #FFFFFF !important;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 800;
    padding: 11px 16px;
    border-radius: 9px;
    transition: background 0.15s ease;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
    box-shadow: 0 3px 10px rgba(37, 211, 102, 0.25);
}
.gs-btn-support-wa:hover {
    background: #1EBE5D;
}

.gs-btn-support-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #F8FAFC;
    color: #0F172A !important;
    border: 1px solid #CBD5E1;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 9px;
    transition: all 0.15s ease;
}
.gs-btn-support-phone:hover {
    background: #F1F5F9;
    border-color: #94A3B8;
}

/* 9. Cancellation Modal */
.gs-manage-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.gs-manage-modal-box {
    background: #FFFFFF;
    border-radius: 18px;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 28px 30px;
    box-sizing: border-box;
    animation: gsManageModalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gsManageModalIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

.gs-manage-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
}

.gs-manage-modal-alert-icon {
    font-size: 28px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-manage-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-modal-sub {
    font-size: 10.5px;
    font-weight: 800;
    color: #DC2626;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.gs-manage-modal-close {
    position: absolute;
    right: 0;
    top: -2px;
    background: none;
    border: none;
    font-size: 26px;
    color: #94A3B8;
    cursor: pointer;
    line-height: 1;
}

.gs-manage-modal-body p {
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 16px;
}

.gs-manage-select {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    color: #0F172A !important;
    background: #FFFFFF !important;
    outline: none !important;
}

.gs-manage-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #F1F5F9;
}

.gs-manage-btn-secondary {
    background: #F1F5F9;
    color: #334155;
    border: none;
    padding: 11px 20px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.gs-manage-btn-danger {
    background: #DC2626;
    color: #FFFFFF;
    border: none;
    padding: 11px 22px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: var(--gs-font-title, 'Montserrat', sans-serif);
}

.gs-manage-btn-danger:hover {
    background: #B91C1C;
}

/* 10. 2FA OTP Verification */
.gs-otp-container {
    text-align: center;
    padding: 10px 0 20px;
}

.gs-otp-badge {
    width: 64px;
    height: 64px;
    line-height: 64px;
    background: #EFF6FF;
    border: 2px solid #BFDBFE;
    color: #0066FF;
    font-size: 30px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.12);
}

.gs-otp-digit-wrap {
    display: flex;
    justify-content: center;
    margin: 22px 0 16px;
}

.gs-otp-digit-input {
    width: 100%;
    max-width: 260px;
    height: 62px;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 12px;
    text-align: center;
    padding-left: 20px;
    color: #0066FF;
    background: #F8FAFC;
    border: 2px solid #CBD5E1;
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.gs-otp-digit-input:focus {
    border-color: #0066FF;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);
}

.gs-otp-meta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.gs-manage-link-btn {
    background: none;
    border: none;
    color: #0066FF;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.gs-manage-link-btn:hover {
    color: #004ecc;
}

.gs-manage-link-btn:disabled {
    color: #94A3B8;
    cursor: not-allowed;
    text-decoration: none;
}

.gs-otp-back-wrap {
    margin-top: 8px;
}

/* Child Seats & Passenger/Luggage Counters in Manage Booking */
.gs-manage-pax-lug-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
}
@media (max-width: 640px) {
    .gs-manage-pax-lug-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
.gs-manage-seats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
    width: 100%;
}
@media (max-width: 640px) {
    .gs-manage-seats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
.gs-manage-seat-card {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.gs-manage-seat-card.has-selected {
    background: #F0FDF4;
    border-color: #86EFAC;
}
.gs-seat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.gs-seat-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 2px;
}
.gs-seat-card-sub {
    font-size: 11.5px;
    color: #64748B;
    display: block;
}
.gs-seat-card-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.gs-seat-counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1.5px solid #CBD5E1;
    background: #FFFFFF;
    color: #0F172A;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
    line-height: 1;
}
.gs-seat-counter-btn:hover:not(:disabled) {
    background: #0066FF;
    border-color: #0066FF;
    color: #FFFFFF;
}
.gs-seat-counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.gs-seat-counter-val {
    width: 48px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #0F172A;
    border: 1.5px solid #CBD5E1;
    border-radius: 7px;
    padding: 5px 0;
    background: #FFFFFF;
}
.gs-seat-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: #DCFCE7;
    color: #166534;
}

/* ==========================================================================
   GLOBAL SUBTLE / FAINT PLACEHOLDERS (ALL PUBLIC FORMS & WIDGETS)
   ========================================================================== */
input::placeholder,
textarea::placeholder,
.getseat-booking-container input::placeholder,
.getseat-booking-container textarea::placeholder,
.gs-unified-panel input::placeholder,
.gs-unified-panel textarea::placeholder,
.gs-manage-container input::placeholder,
.gs-manage-container textarea::placeholder,
.gs-sbb-container input::placeholder,
.gs-sbb-container textarea::placeholder,
#getseat-quick-search input::placeholder,
#getseat-quick-search textarea::placeholder,
.gs-portal-card input::placeholder,
.gs-portal-card textarea::placeholder,
input.gs-autocomplete-input::placeholder,
input.flatpickr-input::placeholder,
input.gs-bl-flatpickr-input::placeholder,
.gs-bl-col-content input::placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    opacity: 0.65 !important;
    -webkit-text-fill-color: #94A3B8 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.getseat-booking-container input::-webkit-input-placeholder,
.getseat-booking-container textarea::-webkit-input-placeholder,
.gs-unified-panel input::-webkit-input-placeholder,
.gs-unified-panel textarea::-webkit-input-placeholder,
.gs-manage-container input::-webkit-input-placeholder,
.gs-manage-container textarea::-webkit-input-placeholder,
.gs-sbb-container input::-webkit-input-placeholder,
.gs-sbb-container textarea::-webkit-input-placeholder,
#getseat-quick-search input::-webkit-input-placeholder,
#getseat-quick-search textarea::-webkit-input-placeholder,
.gs-portal-card input::-webkit-input-placeholder,
.gs-portal-card textarea::-webkit-input-placeholder,
input.gs-autocomplete-input::-webkit-input-placeholder,
input.flatpickr-input::-webkit-input-placeholder,
input.gs-bl-flatpickr-input::-webkit-input-placeholder,
.gs-bl-col-content input::-webkit-input-placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    opacity: 0.65 !important;
    -webkit-text-fill-color: #94A3B8 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder,
.getseat-booking-container input::-moz-placeholder,
.getseat-booking-container textarea::-moz-placeholder,
.gs-unified-panel input::-moz-placeholder,
.gs-unified-panel textarea::-moz-placeholder,
.gs-manage-container input::-moz-placeholder,
.gs-manage-container textarea::-moz-placeholder,
.gs-sbb-container input::-moz-placeholder,
.gs-sbb-container textarea::-moz-placeholder,
#getseat-quick-search input::-moz-placeholder,
#getseat-quick-search textarea::-moz-placeholder,
.gs-portal-card input::-moz-placeholder,
.gs-portal-card textarea::-moz-placeholder,
input.gs-autocomplete-input::-moz-placeholder,
input.flatpickr-input::-moz-placeholder,
input.gs-bl-flatpickr-input::-moz-placeholder,
.gs-bl-col-content input::-moz-placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    opacity: 0.65 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* ==========================================================================
   GetSeat Route Highlights Strip (Responsive 4-col desktop, 2x2 mobile)
   ========================================================================== */
.getseat-route-highlights {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 15px 0 25px 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .getseat-route-highlights {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin: 10px 0 20px 0 !important;
    }
}

@media (max-width: 340px) {
    .getseat-route-highlights {
        grid-template-columns: 1fr !important;
    }
}

.route-highlight-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.route-highlight-card .highlight-icon {
    font-size: 18px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    background: #f1f5f9 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.route-highlight-card.highlight-card-pricing .highlight-icon {
    background: #ecfdf5 !important;
}

.route-highlight-card .highlight-content {
    min-width: 0 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
}

.route-highlight-card .highlight-label {
    font-size: 10.5px !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    display: block !important;
    white-space: nowrap !important;
}

.route-highlight-card .highlight-value {
    font-size: 13.5px !important;
    color: #0f172a !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.route-highlight-card.highlight-card-pricing .highlight-label {
    color: #059669 !important;
}

.route-highlight-card.highlight-card-pricing .highlight-value {
    color: #047857 !important;
}

.route-highlight-card .highlight-sub {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.route-highlight-card.highlight-card-pricing .highlight-sub {
    color: #10b981 !important;
}

/* ========================================================
   DRIVER PORTAL - FINANCIALS & EARNINGS DASHBOARD
   ======================================================== */
.gs-fin-dashboard {
    width: 100%;
}

/* KPI CARDS GRID */
.gs-fin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.gs-fin-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gs-fin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #CBD5E1;
}

.gs-fin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.gs-fin-card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gs-fin-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gs-fin-card-value {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.15;
    color: #0F172A;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.gs-fin-card-sub {
    font-size: 12px;
    color: #64748B;
    font-weight: 500;
    line-height: 1.35;
}

/* HIGHLIGHT CARD: RECEIVABLES / TO COLLECT - MINIMAL & CLEAN */
.gs-fin-card-receivables {
    background: #FFFFFF;
    border: 2px solid #10B981;
    color: #0F172A;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.1);
}

.gs-fin-card-receivables .gs-fin-card-title {
    color: #065F46;
}

.gs-fin-card-receivables .gs-fin-card-value {
    color: #059669;
}

.gs-fin-card-receivables .gs-fin-card-sub {
    color: #64748B;
}

.gs-fin-card-receivables .gs-fin-card-icon {
    background: #ECFDF5;
    color: #059669;
}

.gs-fin-card-net .gs-fin-card-value {
    color: #0066FF;
}

.gs-fin-card-net .gs-fin-card-icon {
    background: #EFF6FF;
    color: #0066FF;
}

.gs-fin-card-gross .gs-fin-card-icon {
    background: #F8FAFC;
    color: #475569;
}

.gs-fin-card-rides .gs-fin-card-icon {
    background: #F5F3FF;
    color: #7C3AED;
}

/* CASH VS ONLINE SETTLEMENT BANNER */
.gs-fin-settlement-banner {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.gs-fin-settlement-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-fin-settlement-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #0066FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-fin-settlement-text strong {
    color: #0F172A;
    font-size: 14px;
    display: block;
    margin-bottom: 2px;
}

.gs-fin-settlement-text span {
    color: #64748B;
    font-size: 12.5px;
}

.gs-fin-settlement-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gs-fin-pill {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: #334155;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gs-fin-pill.is-highlight {
    background: #ECFDF5;
    border-color: #A7F3D0;
    color: #065F46;
}

/* TOOLBAR & FILTERS */
.gs-fin-toolbar {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px 14px 0 0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid #E2E8F0;
}

.gs-fin-filters-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gs-fin-select {
    background: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.gs-fin-select:focus {
    border-color: #0066FF;
    background: #FFFFFF;
}

.gs-fin-search-input {
    background: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #1E293B;
    outline: none;
    min-width: 200px;
}

.gs-fin-search-input:focus {
    border-color: #0066FF;
    background: #FFFFFF;
}

/* LEDGER TABLE */
.gs-fin-table-wrapper {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-top: none;
    border-radius: 0 0 14px 14px;
    overflow-x: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.gs-fin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13.5px;
}

.gs-fin-table th {
    background: #F8FAFC;
    padding: 14px 16px;
    font-size: 11.5px;
    font-weight: 800;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1.5px solid #E2E8F0;
    white-space: nowrap;
}

.gs-fin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    color: #1E293B;
    vertical-align: middle;
}

.gs-fin-table tr:hover td {
    background: #F8FAFC;
}

.gs-fin-table tr:last-child td {
    border-bottom: none;
}

/* TABLE CELLS & BADGES */
.gs-fin-code-pill {
    background: #F1F5F9;
    color: #0F172A;
    font-weight: 800;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    display: inline-block;
}

.gs-fin-datetime {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.gs-fin-datetime small {
    display: block;
    font-size: 11.5px;
    color: #64748B;
    font-weight: normal;
}

.gs-fin-route-cell {
    max-width: 220px;
    line-height: 1.35;
}

.gs-fin-route-from {
    font-weight: 700;
    color: #0F172A;
    font-size: 13px;
}

.gs-fin-route-to {
    color: #475569;
    font-size: 12px;
}

.gs-fin-veh-tag {
    font-weight: 800;
    font-size: 11.5px;
    background: #0F172A;
    color: #FFFFFF;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.8px;
    display: inline-block;
    margin-right: 4px;
}

.gs-fin-amount-gross {
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
}

.gs-fin-amount-comm {
    font-size: 12px;
    color: #DC2626;
    font-weight: 600;
}

.gs-fin-amount-net {
    font-size: 15px;
    font-weight: 900;
    color: #0066FF;
}

/* SETTLEMENT BADGES */
.gs-fin-badge-receivable {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.gs-fin-badge-cash {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FDE68A;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.gs-fin-action-btn {
    background: #0F172A;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
    white-space: nowrap;
}

.gs-fin-action-btn:hover {
    background: #1E293B;
    color: #FFFFFF;
}

/* RESPONSIVE DESIGN */
@media (max-width: 860px) {
    .gs-fin-kpi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .gs-fin-card {
        padding: 16px 18px;
    }
    .gs-fin-card-value {
        font-size: 24px;
    }
    .gs-fin-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .gs-fin-filters-group {
        flex-direction: column;
        align-items: stretch;
    }
    .gs-fin-select, .gs-fin-search-input {
        width: 100%;
        min-width: unset;
    }
    .gs-fin-settlement-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}