/**
 * Booking Page - Custom Styles
 * Modern, Elegant and Fine design following the "My Bookings" aesthetic.
 */

/* 1. Page Main Layout */
.booking-page-main {
    background-color: #f7fafc;
    min-height: 100vh;
}

/* 2. Custom Hero Section */
.booking-hero {
    background-color: #1e375a;
    background-image: linear-gradient(rgba(15, 35, 65, 0.85), rgba(15, 35, 65, 0.85)), url('/img/index/webp-1000X600/conductor1-1000-600.webp');
    background-size: cover;
    background-position: center bottom;
    padding: 160px 0 70px;
    /* Reduced vertical padding */
    text-align: center;
    color: white;
}

.booking-hero h1 {
    font-size: 2.5rem !important;
    /* Fixed size to match my-bookings */
    font-weight: 600 !important;
    /* Less thick */
    margin-bottom: 15px !important;
    color: #d4af37 !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3) !important;
}

.booking-hero p {
    font-size: 1.1rem;
    /* Smaller, cleaner text */
    opacity: 0.9;
    max-width: 900px;
    margin: 0 auto;
    font-weight: 400;
}

/* 3. Form Section Overlaying/Below Hero */
.booking-form-section {
    padding-bottom: 100px;
    margin-top: -60px;
    /* Increased overlap */
    position: relative;
    z-index: 20;
}

/* 4. Form Card Override - Wider and more spacious */
.booking-page-main .hero-form-box {
    background: white !important;
    max-width: 1200px !important;
    /* Increased from 1000px */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 60px !important;
    /* Increased from 50px */
    border-radius: 24px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #edf2f7 !important;
}

.booking-page-main .hero-form-box h2 {
    color: #1e375a !important;
    text-align: center !important;
    font-size: 2.2rem !important;
    margin-bottom: 50px !important;
    font-weight: 700 !important;
}

/* 5. Custom Select Framework Styles (Modern Crystal Style) */
.booking-page-main .vip-custom-select-container {
    margin-bottom: 5px;
}

.booking-page-main .vip-custom-select-trigger {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #2d3748 !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    height: 60px !important;
    min-height: 60px !important;
    display: flex;
    align-items: center;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Smooth interaction */
}

.booking-page-main .vip-custom-select-container.open .vip-custom-select-trigger,
.booking-page-main .vip-custom-select-trigger:focus,
.booking-page-main .vip-custom-select-container:focus-within .vip-custom-select-trigger {
    background: #ffffff !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15) !important;
    outline: none !important;
}

/* Dropdown with Transparency and Glassmorphism */
.booking-page-main .vip-custom-select-dropdown {
    background: rgba(30, 55, 90, 0.95) !important;
    /* Dark blue with transparency */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 15px !important;
    margin-top: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
    max-height: 350px !important;
}

.booking-page-main .vip-custom-select-option {
    padding: 14px 22px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.booking-page-main .vip-custom-select-option:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    color: #fff !important;
}

.booking-page-main .vip-custom-select-option.selected {
    background: rgba(212, 175, 55, 0.3) !important;
    color: #d4af37 !important;
    font-weight: 600;
}

/* 6. Form Elements Generic Styling */
.booking-page-main .quote-form label {
    color: #4a5568 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px;
    margin-bottom: 12px !important;
}

.booking-page-main .quote-form input[type="text"] {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #2d3748 !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    height: 60px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.booking-page-main .quote-form input[type="text"]:focus {
    background: #ffffff !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15) !important;
    outline: none !important;
}

/* Radio Group (Trip Type) - No wrap, more space */
.booking-page-main .radio-group {
    background: #f1f5f9 !important;
    padding: 6px !important;
    border-radius: 14px !important;
    gap: 8px !important;
    height: 60px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

.booking-page-main .radio-group label {
    padding: 0 15px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    /* Prevent "ROUND TRIP" truncation */
    flex: 1;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transition: all 0.2s ease;
}

/* Selected Trip Type - Clear visibility */
.booking-page-main .radio-group input[type="radio"]:checked+label {
    background: #6F4E37 !important;
    /* Coffee Brown */
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(111, 78, 55, 0.3) !important;
}

/* Custom Scrollbar for Dropdowns (Webkit) */
.booking-page-main .vip-custom-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.booking-page-main .vip-custom-select-dropdown::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.booking-page-main .vip-custom-select-dropdown::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.4);
    border-radius: 10px;
}

.booking-page-main .vip-custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.6);
}

/* Firefox Scrollbar Support */
.booking-page-main .vip-custom-select-dropdown {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.4) rgba(255, 255, 255, 0.05);
}

/* Hero Section Refinement */
.booking-hero .container {
    max-width: 1400px;
}

/* CTA Button Override */
.booking-page-main .btn-primary {
    background: #1e375a !important;
    padding: 0 40px !important;
    font-size: 1.25rem !important;
    height: 60px !important;
    min-height: 60px !important;
    margin-top: 31px !important;
    /* Aligns with fields that have labels */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.booking-page-main .btn-primary:hover {
    background: #d4af37 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .booking-page-main .hero-form-box {
        padding: 40px !important;
    }
}

@media (max-width: 768px) {
    .booking-hero {
        padding: 120px 20px 80px;
    }

    .booking-page-main .hero-form-box {
        padding: 30px 20px !important;
        margin: 0 15px !important;
        border-radius: 20px !important;
    }

    .booking-form-section {
        margin-top: -40px;
    }

    .booking-page-main .radio-group {
        flex-direction: row;
        /* Keep horizontal on mobile if possible */
        flex-wrap: wrap;
    }

    .booking-page-main .radio-group label {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }
}

/* 7. Unified Phone Input Group */
.phone-input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
}

.phone-input-group .vip-custom-select-container {
    flex: 0 0 140px !important;
    min-width: 140px !important;
    margin-right: -1px !important;
    z-index: 2;
    margin-bottom: 0 !important;
}

.phone-input-group .vip-custom-select-trigger {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.phone-input-group input[type="tel"] {
    flex: 1 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 60px !important;
    margin-bottom: 0 !important;
}