/* public/css/app.css */
:root {
    --primary: #00bcd4;       /* Travel Cyan Accent */
    --primary-dark: #008ba3;
    --dark-bg: #111827;       /* Clean Dark Hero Section */
    --light-bg: #f9fafb;      /* Content Section background */
    --text-main: #1f2937;
    --text-muted: #4b5563;
    --white: #ffffff;
    --radius: 8px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--light-bg);
    color: var(--text-main);
    line-height: 1.6;
}

/* --- Navigation Header --- */
.site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.nav-links {
    display: flex;
    gap: 25px;
    list-style: none;
}
.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.2s;
}
.nav-links a:hover { color: var(--primary); }
.btn-book {
    background: var(--primary);
    color: var(--white) !important;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: bold;
}

/* --- Hero & Booking Container --- */
.hero-section {
    background: linear-gradient(135deg, rgba(17,24,39,0.9), rgba(17,24,39,0.7)), url('/images/tz-banner.jpg') no-repeat center center/cover;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.hero-title {
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* --- The Repositioned Search Card --- */
.search-card {
    background: var(--white);
    width: 100%;
    max-width: 1100px;
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
}
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.input-field {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.input-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.input-field input, .input-field select {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 15px;
    outline: none;
    background: var(--light-bg);
}
.input-field input:focus {
    border-color: var(--primary);
}
.btn-search {
    background: var(--primary);
    color: var(--white);
    border: none;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s;
}
.btn-search:hover { background: var(--primary-dark); }

/* --- About Company Split Section --- */



/* Update/Replace these exact structural styles inside public/css/app.css */

/* --- 1. Widescreen Symmetrical Grid Shift Wrapper --- */



/* ==========================================================================
   🏛️ BTA WIDESCREEN SYMMETRIC OVERLAPPING BOUNDS ALIGNMENT
   ========================================================================== */

/* 1. Master Section Container */
.about-section {
    width: 90% !important; /* Locks width symmetrically with your global website profile */
    max-width: 1600px !important; /* Sits flush under your main global ceiling limits */
    margin: 120px auto !important; /* Balanced uniform vertical row cushions */
    padding: 0 !important; /* Drops external padding to prevent grid expansion */
    display: grid !important;
    grid-template-columns: 46fr 54fr !important; /* Perfectly balanced asymmetrical column partition split */
    align-items: center !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important; /* Allows the right card to slide left without expanding the grid width */
}

/* 2. Left Panoramic Image Frame */
.about-image {
    width: 100% !important;
    height: 520px !important; /* Fixed vertical stature matches your global aspect ratios */
    border-radius: 16px !important; 
    overflow: hidden !important;
    z-index: 1 !important; 
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.12) !important;
    box-sizing: border-box !important;
}

.about-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. Right Overlapping Card Panel (Clipping & Width Fix) */
.about-content {
    text-align: left !important;
    /* 🔥 THE WIDESCREEN CORRECTIONS: 
       By dropping 'width: 100%' and 'margin-left: -5%', we use a negative transform X-axis translation instead.
       This pulls the card over the photo layer without changing the container's calculated layout bounds, 
       completely preventing right-side page cutoff errors! */
    transform: translateX(-60px) !important; 
    width: calc(100% + 60px) !important; /* Seamlessly re-claims the horizontal canvas space safely */
    margin: 0 !important; /* Drops any loose margin rules that blow past viewport tracks */
    
    z-index: 5 !important; 
    background: #ffffff !important;
    padding: 56px 48px !important; 
    border-radius: 14px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 35px 70px -15px rgba(15, 23, 42, 0.15) !important;
    box-sizing: border-box !important;
}

/* High-Legibility Widescreen Typography Standards */
.about-content h2 {
    font-size: 2.3rem !important; 
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.7px !important;
}

.about-content p {
    font-size: 15px !important; 
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 24px !important;
}

/* Fixed Width Button Frame Wrapper */
.about-content .btn-premium-search {
    display: inline-block !important;
    width: auto !important; /* Keeps the button from stretching into a long horizontal block line */
    background: #0f172a !important; 
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 36px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
    transition: all 0.2s ease !important;
}

.about-content .btn-premium-search:hover {
    background: #00bcd4 !important; 
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.35) !important;
    transform: translateY(-1px) translateX(-60px) !important; /* Coordinates the transform hover offset accurately */
}

/* ==========================================================================
   📱 ADAPTIVE MOBILE & TABLET LAYOUT SAFARDS
   ========================================================================== */
@media (max-width: 1150px) {
    .about-section {
        width: 100% !important;
        grid-template-columns: 1fr !important; /* Drops back to a single stacked layout column row on smaller resolutions */
        padding: 0 20px !important;
        margin: 60px auto !important;
    }
    
    .about-image {
        height: 360px !important;
    }
    
    .about-content {
        transform: none !important; /* Resets transform translation entirely on handheld responsive fields */
        width: 100% !important;
        margin: 0 !important;
        padding: 40px 24px !important;
    }
}



/* Update/Replace these exact button style rules inside public/css/app.css */

.about-content .btn-premium-search {
    display: inline-flex !important; /* 🔥 THE FIX: Shifts element container layout model into an inline flexbox track */
    align-items: center !important;  /* Perfectly aligns typography vertically on its central axis line */
    justify-content: center !important; /* Centers text horizontally */
    
    /* 🔥 THE CURE FOR TEXT CLIPPING: 
       We completely drop 'height' or 'line-height: 1' constraints.
       Using explicit top and bottom padding values allows the button container 
       to scale dynamically around your text strings, preventing any clipping errors! */
    height: auto !important;
    padding: 14px 36px !important; 
    line-height: 1.4 !important; 
    
    width: auto !important; 
    background: #0f172a !important; /* Solid obsidian corporate theme background color */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important; /* Prevents text letters from dividing into multiple messy lines */
}

.about-content .btn-premium-search:hover {
    background: #00bcd4 !important; /* Glow travel cyan accent color on hover focus triggers */
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.35) !important;
    
    /* 🔥 THE FIX: Coordinates the transform hover offset to lift the button 
       without resetting your column alignment constraints! */
    transform: translateY(-2px) !important; 
}





/* Add/Append these sections into public/css/app.css */

/* Horizontal radio selector row */
.trip-type-row {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
    text-align: left;
}
.trip-type-row label {
    font-size: 14px;
    font-weight: 600;
    color: var(--white); /* Fits cleanly over your dark hero mask */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Updated 6-column flexible layout grid */
.booking-form-grid-advanced {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1.5fr 1.5fr 1.5fr;
    gap: 15px;
    align-items: flex-end;
}

/* Hidden visual utility rule */
.hidden-element {
    display: none !important;
}

/* Table and Mobile breakpoint handling */
@media (max-width: 1024px) {
    .booking-form-grid-advanced {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .booking-form-grid-advanced {
        grid-template-columns: 1fr;
    }
}



/* Append directly into public/css/app.css */

/* Suggestions Dropdown Card Wrapper */
.autocomplete-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px); /* Sits exactly below the text input */
    left: 0;
    width: 100%;
    max-height: 250px;
    background: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    z-index: 999; /* Keeps panel floating completely above all form items */
}

/* Individual list item lines */
.autocomplete-suggestion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

.autocomplete-suggestion-item:last-child {
    border-bottom: none;
}

.autocomplete-suggestion-item:hover {
    background-color: #f3f4f6;
}

/* Typography styles for details inside suggestion dropdown */
.suggestion-city-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.suggestion-airport-code {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    background: #e0f7fa;
    padding: 2px 6px;
    border-radius: 4px;
}


/* Append directly into public/css/app.css */

/* --- Container Frame --- */
.results-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* --- Quick Selection Filter Header Tabs --- */
.filter-tabs-wrapper {
    display: flex;
    background: var(--white);
    border-radius: var(--radius);
    padding: 6px;
    box-shadow: var(--shadow);
    margin-bottom: 25px;
    gap: 10px;
}
.filter-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
}
.filter-tab.active-tab {
    background: var(--primary);
    color: var(--white);
}
.tab-subtitle {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 2px;
}

/* --- Flight Results Core Cards --- */
.flight-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    border-left: 4px solid transparent;
}
.flight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.flight-card.premium-tier-highlight {
    border-left-color: var(--primary); /* Highlights exclusive/cheapest deals */
}

/* --- Inner Layout Parts --- */
.airline-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 180px;
}
.airline-logo-box {
    width: 48px;
    height: 48px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
}
.route-timeline {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 2;
    justify-content: center;
}
.time-node {
    text-align: center;
}
.time-stamp {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark-bg);
}
.airport-iata {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}
.duration-connector {
    text-align: center;
    position: relative;
    min-width: 140px;
}
.duration-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.line-graphic {
    height: 2px;
    background: #d1d5db;
    width: 100%;
    position: relative;
}
.line-graphic::after {
    content: '✈';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    padding: 0 6px;
    color: var(--primary);
    font-size: 14px;
}
.stop-count-indicator {
    font-size: 11px;
    font-weight: bold;
    color: #10b981; /* Green for Non-stop */
    margin-top: 4px;
}

/* --- Pricing Box Column --- */
.price-action-box {
    text-align: right;
    min-width: 160px;
    border-left: 1px dashed #e5e7eb;
    padding-left: 20px;
}
.ticket-currency-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dark-bg);
}
.amenities-labels-row {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 4px;
    margin-bottom: 12px;
}
.badge-label {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.badge-baggage { background: #e0f2fe; color: #0369a1; }
.badge-refundable { background: #d1fae5; color: #065f46; }

.btn-select-flight {
    background: var(--dark-bg);
    color: var(--white);
    border: none;
    padding: 10px 24px;
    font-weight: bold;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s ease;
    width: 100%;
}
.btn-select-flight:hover {
    background: var(--primary);
}

/* --- Breakdown rules on Tablet & Mobile viewport limits --- */
@media (max-width: 820px) {
    .flight-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .route-timeline {
        margin: 20px 0;
    }
    .price-action-box {
        border-left: none;
        border-top: 1px dashed #e5e7eb;
        padding-left: 0;
        padding-top: 15px;
        text-align: center;
    }
    .amenities-labels-row {
        justify-content: center;
    }
    .filter-tabs-wrapper {
        flex-direction: column;
    }
}


/* Append directly into public/css/app.css */

/* Custom Wrapper to position the relative drop panel */
.passenger-picker-container {
    position: relative;
    width: 100%;
}

/* The clickable box displaying current selector totals */
.passenger-trigger-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    background: var(--light-bg);
    cursor: pointer;
    font-size: 15px;
    color: var(--text-main);
    user-select: none;
}
.passenger-trigger-box::after {
    content: '▼';
    font-size: 10px;
    color: #9ca3af;
    transition: transform 0.2s ease;
}
.passenger-trigger-box.panel-open::after {
    transform: rotate(180deg);
}

/* Floating panel card containing row controls */
.passenger-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 280px;
    background: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    z-index: 1000; /* Floating above standard layout inputs */
}

/* Individual counter alignment rows */
.passenger-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.passenger-control-row:last-child {
    border-bottom: none;
}

.passenger-row-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

/* Plus and Minus structural grouping handles */
.counter-interface-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.btn-counter {
    width: 28px;
    height: 28px;
    background: #002d62; /* Corporate navy tone from reference image */
    color: var(--white);
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.btn-counter:hover {
    background: var(--primary);
}
.btn-counter:disabled {
    background: #d1d5db;
    cursor: not-allowed;
}

.counter-value-display {
    font-size: 15px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    color: var(--text-main);
}


/* ==========================================================================
   BTA PREMIUM FLIGHT TERMINAL CARD DESIGN
   ========================================================================== */



/* Luxury toggle switches for route subtypes */
.route-selector-row {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}
.luxury-toggle-label {
    position: relative;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    padding: 8px 16px;
    border-radius: 30px;
    background: #f3f4f6;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.luxury-toggle-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.luxury-toggle-label:has(input:checked) {
    background: #00bcd4; /* Brand primary tone */
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
}

/* Master unified execution input grid */


/* Interlocking input blocks layout rule */

.premium-input-block:hover {
    border-color: #00bcd4;
    background: #fdfefe;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.premium-input-block:focus-within {
    border-color: #00bcd4;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.15);
}

/* Premium Floating Typography Anchors */
.premium-input-block label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 2px;
    pointer-events: none;
}
.premium-input-block input, 
.premium-input-block .custom-dropdown-trigger {
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    background: transparent;
    width: 100%;
    padding: 2px 0 0 0;
}
.premium-input-block input::placeholder {
    color: #cbd5e1;
    font-weight: 500;
}

/* Integrated Airport Swap Circle Trigger Button */
.airport-swap-circle {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.2s;
    font-size: 14px;
    color: #00bcd4;
}
.airport-swap-circle:hover {
    transform: translateY(-50%) rotate(180deg);
    border-color: #00bcd4;
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.2);
}

/* Premium Search Submission Button */
.action-row-premium {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.btn-premium-search {
    background: linear-gradient(135deg, #00bcd4, #00acc1);
    color: #ffffff;
    border: none;
    padding: 16px 48px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
}
.btn-premium-search:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.4);
    filter: brightness(1.05);
}

/* Responsive breakdowns for tablet and mobile viewing boundaries */
@media (max-width: 1024px) {
    .booking-grid-premium {
        grid-template-columns: 1fr 1fr;
    }
    .airport-swap-circle {
        display: none; /* Hide interlocking swap mechanics on broken vertical layouts */
    }
}
@media (max-width: 640px) {
    .booking-grid-premium {
        grid-template-columns: 1fr;
    }
    .premium-booking-card {
        padding: 20px;
    }
}
/* Append directly into public/css/app.css */

/* Reusable Calendar Floating Popover Board Container */
.bta-reusable-calendar {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 310px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    padding: 16px;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* Visibility toggling helper states */
.bta-reusable-calendar.picker-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bta-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.bta-cal-month-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    text-transform: capitalize;
}
.bta-cal-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bta-cal-btn:hover {
    border-color: #00bcd4;
    color: #00bcd4;
}

.bta-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.bta-cal-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* Grid Cell Token Element Nodes */
.bta-date-cell {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}
.bta-date-cell:hover:not(.bta-cell-disabled) {
    background: rgba(0, 188, 212, 0.08);
    color: #00bcd4;
}
.bta-date-cell.bta-cell-selected {
    background: linear-gradient(135deg, #00bcd4, #00acc1) !important;
    color: #ffffff !important;
}
.bta-date-cell.bta-cell-disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    background: transparent;
}
.bta-date-cell.bta-cell-empty {
    cursor: default;
    background: transparent;
}



/* public/css/app.css */
:root {
    --primary: #00bcd4;
    --primary-dark: #00acc1;
    --dark-bg: #1e293b;
    --light-bg: #f8fafc;
    --white: #ffffff;
    --text-main: #334155;
    --text-muted: #94a3b8;
    --radius-lg: 16px;
    --radius-md: 8px;
    --shadow-premium: 0 20px 50px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.02);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Master Booking Card Wrapper Container */
.premium-booking-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-premium);
    width: 100%;
    max-width: 1200px;
    border: 1px solid rgba(229, 231, 235, 0.7);
    margin: 40px auto;
}

/* Route Radio Toggle Selectors */
.route-selector-row {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}
.luxury-toggle-label {
    position: relative;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    padding: 8px 20px;
    border-radius: 30px;
    background: #f1f5f9;
    transition: all 0.2s ease;
    user-select: none;
}
.luxury-toggle-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.luxury-toggle-label:has(input:checked) {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
}

/* Master Form 5-Column Grid */
.booking-grid-premium {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.5fr 1fr;
    gap: 12px;
    background: var(--light-bg);
    padding: 10px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    align-items: center;
}

/* Single Form Input Box Slots */
.premium-input-block {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    cursor: pointer;
    height: 64px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.premium-input-block:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.premium-input-block label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 2px;
    pointer-events: none;
}

.premium-input-block input, 
.premium-input-block .custom-dropdown-trigger {
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    background: transparent;
    width: 100%;
}

/* 1-Click Route Swapper Button Module */
.airport-swap-circle {
    width: 30px;
    height: 30px;
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.2s;
    font-size: 14px;
    color: var(--primary);
}
.airport-swap-circle:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.2);
}

/* --- REUSABLE DATE PICKER MODAL POPOVER PANEL --- */
.bta-reusable-calendar {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 310px;
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    padding: 16px;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
.bta-reusable-calendar.picker-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bta-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bta-cal-month-title { font-size: 14px; font-weight: 700; color: var(--dark-bg); text-transform: capitalize; }
.bta-cal-btn { background: transparent; border: 1px solid #e2e8f0; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; color: var(--text-main); }
.bta-cal-btn:hover { border-color: var(--primary); color: var(--primary); }
.bta-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; }
.bta-cal-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bta-date-cell { height: 34px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--text-main); border-radius: 6px; cursor: pointer; user-select: none; transition: all 0.15s ease; }
.bta-date-cell:hover:not(.bta-cell-disabled) { background: rgba(0, 188, 212, 0.08); color: var(--primary); }
.bta-date-cell.bta-cell-selected { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color: var(--white) !important; }
.bta-date-cell.bta-cell-disabled { color: #cbd5e1; cursor: not-allowed; background: transparent; }
.bta-date-cell.bta-cell-empty { cursor: default; background: transparent; }

/* --- CUSTOM PASSENGER MODAL POPOVER PANEL --- */
.passenger-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    padding: 16px;
    z-index: 2000;
}
.passenger-control-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.passenger-control-row:last-of-type { border-bottom: none; }
.passenger-row-label { font-size: 14px; font-weight: 600; color: var(--text-main); }
.counter-interface-group { display: flex; align-items: center; gap: 12px; }
.btn-counter { width: 28px; height: 28px; background: #002d62; color: var(--white); border: none; border-radius: 4px; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-counter:disabled { background: #cbd5e1; cursor: not-allowed; }
.counter-value-display { font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; }
.hidden-element { display: none !important; }

/* Search Submit Action Button */
.action-row-premium { margin-top: 20px; display: flex; justify-content: flex-end; }
.btn-premium-search { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: var(--white); border: none; padding: 16px 48px; font-size: 15px; font-weight: 700; border-radius: 8px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 188, 212, 0.3); text-transform: uppercase; }
.btn-premium-search:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 188, 212, 0.4); }

/* Layout Breakdown rules on smaller screens */
@media (max-width: 1024px) {
    .booking-grid-premium { grid-template-columns: repeat(2, 1fr); }
    .airport-swap-circle { display: none; }
}
@media (max-width: 640px) {
    .booking-grid-premium { grid-template-columns: 1fr; }
}
/* ==========================================================================
   NATIVE BROWSER CALENDAR STRIPPER & LAYOUT OVERRIDES
   ========================================================================== */

/* 1. Force webkit engine browsers (Chrome, Edge, Safari) to drop default icon elements */
.premium-input-block input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
    cursor: pointer;
    z-index: 5; /* Expands to make the whole card box area clickable */
}

/* 2. Hide inner default structural webkit input text configurations */
.premium-input-block input[type="date"]::-webkit-datetime-edit {
    display: none !important;
}

/* 3. Re-align and position your clear text placeholders */
.premium-input-block .custom-date-label-layer {
    font-size: 15px;
    font-weight: 700;
    color: #cbd5e1; /* The exact clean grey placeholder shade from your design */
    margin-top: 4px;
    pointer-events: none;
    z-index: 1;
}

.premium-input-block .custom-date-label-layer.date-selected-state {
    color: #1e293b !important; /* Swaps to deep premium dark charcoal once a choice is locked */
}
/* Update these exact classes in your public/css/app.css file */

.premium-input-block {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Perfectly centers your text layers vertically */
    position: relative;
    cursor: pointer;
    height: 68px; /* Strict matching baseline height across all slots */
    box-sizing: border-box;
    transition: all 0.2s ease;
    overflow: visible; /* Prevents text elements or labels from getting clipped */
}

/* ⚠️ CRUCIAL FIX: Force the browser's hidden native input container to lay flat */
.premium-input-block input[type="date"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Fully transparent so only your clean text layers show */
    margin: 0;
    padding: 0;
    cursor: pointer;
    z-index: 5; /* Spans over the whole box area to handle clicks */
    background: transparent;
    -webkit-appearance: none; /* Strips mobile browser display frameworks */
    appearance: none;
}

/* Erase native calendar icons across Google Chrome, Microsoft Edge, and Safari */
.premium-input-block input[type="date"]::-webkit-calendar-picker-indicator,
.premium-input-block input[type="date"]::-webkit-inner-spin-button,
.premium-input-block input[type="date"]::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none;
}

/* Style our custom display text container elements cleanly underneath labels */
.premium-input-block .custom-date-label-layer {
    font-size: 15px;
    font-weight: 700;
    color: #cbd5e1; /* The crisp grey placeholder value shade from your design */
    margin-top: 4px;
    pointer-events: none;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.premium-input-block {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Perfectly centers elements vertically */
    position: relative;
    cursor: pointer;
    height: 68px; /* Enforces equal vertical size lines */
    box-sizing: border-box;
    transition: all 0.2s ease;
    overflow: visible; /* Allows calendar popup boards to escape the box boundaries */
}
/* Update these explicit rules inside public/css/app.css */

.premium-input-block {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Forces content nodes to scale from the absolute top down */
    align-items: flex-start;
    position: relative;
    cursor: pointer;
    height: 68px; /* Fixed cross-browser container layout grid height */
    box-sizing: border-box;
    transition: all 0.2s ease;
    overflow: visible;
}

/* Enforce uniform label alignment rules */
.premium-input-block label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 2px;
    display: block;
    line-height: 1.2;
    pointer-events: none;
}

/* ⚠️ CRUCIAL RESETS: Strip native styles from input boxes causing misalignments */
.premium-input-block input[type="text"] {
    border: none !important;
    outline: none !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    background: transparent !important;
    width: 100%;
    padding: 0 !important; /* Strips implicit browser input gutters */
    margin: 0 !important;
    height: 24px; /* Explicit functional field height */
    line-height: 24px; /* Perfectly centers placeholder typing text text strings */
    box-sizing: border-box;
}

/* Align text placeholders across calendar blocks */
.premium-input-block .custom-date-label-layer,
.premium-input-block .custom-dropdown-trigger {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin-top: 0;
    height: 24px;
    line-height: 24px; /* Perfectly matches layout tracking settings from inputs */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    user-select: none;
}

.premium-input-block .custom-date-label-layer span:first-child {
    font-weight: 700;
    color: #cbd5e1; /* Re-applies clean grey to custom text templates */
}

.premium-input-block .custom-date-label-layer.date-selected-state span:first-child {
    color: var(--text-main) !important;
}

/* Ensure direction swapper stays in the center */
.airport-swap-circle {
    width: 28px;
    height: 28px;
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.2s;
    font-size: 13px;
    color: var(--primary);
}
/* Inside public/css/app.css */
.premium-input-block input[type="text"] {
    border: none !important;
    outline: none !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    background: transparent !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    height: 24px;       /* Match custom date text layer line heights precisely */
    line-height: 24px;
}
/* Append or update these exact parameters inside public/css/app.css */

/* Re-calibrate the master grid to give your final combined text block breathing room */
.booking-grid-premium {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 1.4fr 1.4fr; /* Balanced proportions */
    gap: 12px;
    background: var(--light-bg);
    padding: 10px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    align-items: center;
}

/* Ensure the layout block trigger matches font constraints perfectly */
.premium-input-block .custom-dropdown-trigger {
    border: none;
    outline: none;
    font-size: 14px; /* Scaled down slightly to guarantee fitment */
    font-weight: 700;
    color: var(--text-main);
    background: transparent;
    width: 100%;
    height: 24px;
    line-height: 24px;
    margin-top: 2px;
    white-space: nowrap; /* 🔥 STOPS TEXT FROM BINDING INTO MULTIPLE LINES */
    overflow: hidden;
    text-overflow: ellipsis; /* Gracefully truncates extreme passenger summaries */
    display: block;
    user-select: none;
}

/* Fix floating panel position coordinates */
.passenger-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0; /* Aligns flush with the outer right edge of the card */
    left: auto;
    width: 320px; /* Slightly widened to prevent counting items from cutting off */
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 2100; /* Floats over your surrounding page layers safely */
    box-sizing: border-box;
}
input::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
/* public/css/app.css */

/* Re-adjust custom date wrapper layers to line up flush */
.premium-input-block .custom-date-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 24px;
    margin-top: 2px;
    box-sizing: border-box;
}

/* Style the text inputs to mimic placeholder text labels */
.premium-input-block input.clean-date-input {
    border: none !important;
    outline: none !important;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    background: transparent !important;
    width: calc(100% - 24px);
    padding: 0 !important;
    margin: 0 !important;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
}

/* Style the text placeholder state specifically */
.premium-input-block input.clean-date-input::placeholder {
    color: #cbd5e1; /* Clean grey from your design */
    opacity: 1;
}

/* Style the SVG vector element containers */
.bta-vector-calendar-icon {
    width: 16px;
    height: 16px;
    color: #94a3b8; /* Neutral grey vector tone */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Allows clicks to pass through straight to input fields */
    user-select: none;
    flex-shrink: 0;
}
/* Add/verify these exact properties in your public/css/app.css file */

.premium-input-block .custom-date-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 24px;
    box-sizing: border-box;
}

/* Style your date fields so they lay flat, remove grey backgrounds, and sit centered */
.premium-input-block input.clean-date-input {
    border: none !important;
    outline: none !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    background: transparent !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
}

.premium-input-block input.clean-date-input::placeholder {
    color: #cbd5e1;
    opacity: 1;
}
/* Append directly into public/css/app.css */

/* Unified Section Dividers */
.form-section-heading {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 24px;
    margin-bottom: 12px;
    text-align: left;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 6px;
    width: 100%;
}

/* Secondary Multi-Column Row Layout System */
.passenger-details-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 neat equal slots across desktop screen spaces */
    gap: 12px;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Mobile & Tablet structural stacking overrides */
@media (max-width: 820px) {
    .passenger-details-grid-premium {
        grid-template-columns: 1fr; /* Stacks inputs neatly into 1 block vertical column on mobile screens */
    }
}
  

/* Update these explicit rules inside public/css/app.css */

/* 1. Base Structure configuration (Wide screens / Full Desktop) */
.booking-grid-premium {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1.3fr; /* Dedicated slot proportions */
    gap: 12px;
    background: var(--light-bg);
    padding: 10px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    align-items: center;
    box-sizing: border-box;
    width: 100%; /* Constraints it completely within the card wall */
}

/* ==========================================================================
   📱 AUTOMATIC DYNAMIC BREAKPOINTS FOR MEDIUM SCREENS & LAPTOPS
   ========================================================================== */

/* ⚠️ THE COMPACT LAPTOP OVERRIDE FIX: Breaks layout into 2 crisp stacked lines */
@media (max-width: 1240px) {
    .booking-grid-premium {
        grid-template-columns: 1fr 1fr; /* Rearranges layout into 2 wide balanced blocks */
        gap: 14px;
        padding: 14px;
    }
    
    /* Forces the Travellers field to span full width cleanly on line 3 */
    .booking-grid-premium > .premium-input-block:last-child {
        grid-column: span 2; 
    }
    
    /* Drops typography values slightly to guarantee data fitment */
    .premium-input-block input.clean-date-input,
    .premium-input-block .custom-dropdown-trigger {
        font-size: 14px !important;
    }
    
    /* Hides intermediate absolute intersection swapper circles to prevent clashes */
    .airport-swap-circle {
        display: none !important;
    }
}

/* Smartphone Stacking Rule Override */
@media (max-width: 680px) {
    .booking-grid-premium {
        grid-template-columns: 1fr; /* Collapses completely down into 1 vertical column line */
        gap: 12px;
    }
    
    .booking-grid-premium > .premium-input-block:last-child {
        grid-column: span 1; 
    }
    
    .premium-booking-card {
        padding: 24px 16px; /* Restores tight padding on mobile phones */
    }
}

/* Append directly into public/css/app.css */

/* High-tactility red warning border highlight */
.premium-input-block.border-error-state {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

/* Inline typography style node text positioning */


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

/* Update/Replace these exact structural error definitions in public/css/app.css */

/* ⚠️ FORCES FIELDS TO ACT AS AN ISOLATED COORD SPACE FOR FLOATING TEXT ITEMS */
.premium-input-block {
    position: relative !important;
    margin-bottom: 24px !important; /* ⚠️ CRUCIAL: Creates a structural safety gap below boxes for text hints */
}

/* Red error state container rules wrapper */
.premium-input-block.border-error-state {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* 🚀 FIX: The Absolute Floating Error Label System */
.input-error-text-span {
    position: absolute !important;
    bottom: -22px; /* Shifts text cleanly right beneath the bottom boundary wall border */
    left: 4px;
    color: #ef4444;
    font-size: 11px;
    font-weight: 700;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    text-align: left;
    white-space: nowrap; /* Stops long error strings from breaking into 2 rows */
    z-index: 100; /* Floats over surrounding card shadows */
    animation: slideInError 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInError {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Inside public/css/app.css */
.premium-input-block {
    position: relative !important;
    margin-bottom: 24px !important; /* Creates an invisible safety cushion row beneath input blocks for floating text hints */
}
.input-error-text-span {
    position: absolute !important;
    bottom: -22px; /* Pulls text cleanly directly underneath your border lines */
    left: 4px;
    color: #ef4444;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap; /* Prevents text messages from wrapping into 2 messy rows */
    z-index: 100;
}
/* Add/Append these exact modifications to public/css/app.css */

/* Target the specific date subgrid wrapper row container */
#dates-grid-wrapper {
    position: relative !important;
}

/* 🚀 THE FIX: Target errors ONLY nested inside the compact date picker block components */
#departure-picker-block .input-error-text-span,
#return-picker-block .input-error-text-span {
    position: absolute !important;
    bottom: -32px; /* Pulls text down a bit more to handle potential 2-line wraps */
    left: 0;
    width: 100%; /* Constraints text cleanly to the boundaries of the single box */
    white-space: normal !important; /* 🔥 STOPS TEXT FROM RUNNING OUT SIDEWAYS */
    line-height: 1.2;
    font-size: 10px; /* Scaled down slightly to guarantee clean fitment */
}

/* Ensure the date selector inputs maintain an organic cushion distance underneath */
#departure-picker-block,
#return-picker-block {
    margin-bottom: 24px !important;
}
/* Update/Replace these exact row grid parameters inside public/css/app.css */

.booking-grid-premium {
    display: grid;
    /* 🚀 THE FIX: Dynamically distributes extra empty space on the right evenly across all inputs */
    grid-template-columns: 1.5fr 1.5fr 2fr 1.5fr; 
    gap: 12px;
    background: var(--light-bg);
    padding: 10px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    align-items: center;
    box-sizing: border-box;
    width: 100%; /* Forces the grid container to expand to the full width of the parent card */
}

/* Ensure individual inner data slots scale naturally inside the fresh layout boundaries */
.premium-input-block {
    position: relative !important;
    width: 100% !important; /* Forces each input box card to fill out its matching grid area */
    box-sizing: border-box;
}

/* ==========================================================================
   📱 RESPONSIVE ADAPTIVE BREAKPOINTS FOR MID-SIZED VIEPORTS
   ========================================================================== */
@media (max-width: 1240px) {
    .booking-grid-premium {
        grid-template-columns: 1fr 1fr; /* Rearranges layout columns symmetrically on smaller viewports */
        gap: 14px;
        padding: 14px;
    }
}
@media (max-width: 680px) {
    .booking-grid-premium {
        grid-template-columns: 1fr; /* Fluid single-column stack layout on compact screens */
    }
}



/* Append directly into public/css/app.css */

/* Reusable Floating Autocomplete Dropdown Card Wrapper */
.bta-autocomplete-panel {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 240px !important;
    background: var(--white) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    overflow-y: auto !important;
    z-index: 2500 !important; /* Floats completely on top of all date and passenger grids */
    box-sizing: border-box !important;
}

/* Individual Interactive List Rows */
.bta-autocomplete-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background 0.15s ease !important;
}
.bta-autocomplete-row:last-child {
    border-bottom: none !important;
}
.bta-autocomplete-row:hover {
    background-color: #f8fafc !important;
}

/* Internal Typography Styling Elements */
.bta-airport-meta-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.bta-airport-iata-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    background: #e0f7fa !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}
/* Append directly into public/css/app.css */

/* --- Full Screen Blur Loading Backdrop Wrapper --- */
.bta-loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.75); /* Dark slate semi-transparent mask */
    backdrop-filter: blur(8px); /* Modern glassmorphism blur effect */
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999; /* Higher than any dropdown panel, modal, or nav menu */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Visibility toggling helper rule */
.bta-loading-overlay.overlay-active {
    opacity: 1;
    visibility: visible;
}

/* --- Floating Geometric Airplane Vector Tracker Ring --- */
.bta-loader-circle-track {
    position: relative;
    width: 100px;
    height: 100px;
    border: 3px dashed rgba(0, 188, 212, 0.2); /* Muted primary ring path track */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotateTrack 4s linear infinite;
}

/* The airplane graphic floating on the ring edge */
.bta-loader-circle-track::after {
    content: '✈';
    position: absolute;
    top: -10px;
    font-size: 24px;
    color: var(--primary); /* Cyan travel accent */
    transform: rotate(90px);
    text-shadow: 0 0 12px rgba(0, 188, 212, 0.6);
}

/* --- Typography Status Messages Styles --- */
.bta-loading-title {
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    margin-top: 30px;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.bta-loading-subtitle {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Keyframe Loop Animations --- */
@keyframes rotateTrack {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Update or add these exact layout rules inside public/css/app.css */

/* Master Structural Stage Wrapper holding everything together */


/* --- THE BACKGROUND SLIDER ELEMENT --- */
.bta-slideshow-track-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Locked behind the floating forms cards layer */
}

.bta-slide-image-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* Managed dynamically by your slide animation loops */
    transition: opacity 1s ease-in-out; /* Smooth cross-fade transition layout */
}

.bta-slide-image-frame.slide-active-state {
    opacity: 1;
}

/* Dark transparent overlay overlay to make white heading text labels pop out */
/* Update/Replace this exact selector block inside your public/css/app.css file */

/* Dark transparent gradient mask to ensure your field labels are easy to read */
.bta-slideshow-track-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 🔥 THE CLARITY FIX: 
       We dropped the opacity from a heavy 0.65 down to a translucent, cinematic 0.25 max threshold!
       The gradient passes from a slightly deeper dark slate shade at the top (under your navbar links) 
       to a clear transparency at the bottom, making your vacation images look incredibly sharp and crisp. */
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.12) 60%, rgba(15, 23, 42, 0.05) 100%) !important;
    z-index: 2; /* Sits perfectly over photos but completely behind your terminal text cards */
    pointer-events: none;
}


/* --- THE FLOATING DASHBOARD ELEMENT --- */


/* Enhance your existing main booking card styling block parameters */


/* Tablet & Mobile responsive adaptive stacking overrides */
@media (max-width: 1024px) {
    .hero-slider-stage-wrapper {
        min-height: auto; /* Drops strict heights to fit stacked mobile forms cards columns */
    }
    .bta-floating-foreground-content {
        padding: 40px 16px;
    }
}

/* Append directly into your public/css/app.css file */

/* Master Structural Stage Wrapper holding everything together */
.hero-slider-stage-wrapper {
    position: relative;
    width: 100%;
    min-height: 520px; /* Matches your welcome section minimum height */
    overflow: hidden;
    background: #0f172a; 
}

/* --- THE BACKGROUND SLIDER ELEMENT --- */
.bta-slideshow-track-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Locked securely behind the floating booking card */
}

/* Dark transparent gradient mask to ensure your field labels are easy to read */
.bta-slideshow-track-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.45));
    z-index: 2; /* Sits over photos but completely behind your terminal text cards */
}

.bta-slide-image-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* Managed dynamically by your slide animation loops */
    transition: opacity 1.2s ease-in-out; /* Smooth 1.2 second cinematic cross-fade transition */
}

.bta-slide-image-frame.slide-active-state {
    opacity: 1;
}

/* --- THE FLOATING FOREGROUND ELEMENT --- */




/* ==========================================================================
   ✨ HIGH-CONTRAST VERTICAL ASYMMETRICAL SPLIT TERMINAL
   ========================================================================== */

/* The Foreground Layer: Shifts into an asymmetrical row container */
.bta-floating-foreground-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 24px;
    display: flex;
    flex-direction: row; /* Aligns contents side-by-side */
    justify-content: flex-start; /* Aligns your form strictly to the left side */
    align-items: center;
    min-height: 650px; /* Fixed height giving the background slider breathing room */
    box-sizing: border-box;
}

/* 🚀 THE FIXED CARD: Consolidated into a sleek vertical sidebar */
.premium-booking-card {
    /* Mapped to your exact teal-to-green vertical gradient format */
    background: linear-gradient(180deg, #3a8da8 0%, #4da79b 50%, #6ec287 100%) !important;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.45) !important;
    width: 100%;
    max-width: 440px; /* Restricts the card width to expose the background slider */
    margin: 0; /* Drops central auto margins */
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px);
    box-sizing: border-box;
}

/* Re-compile your high-density input layout grids for vertical stacking */


/* Ensure individual data blocks share full width layout lines inside the sidebar card */
.booking-grid-premium > div,
.passenger-details-grid-premium > div {
    grid-column: span 1 !important;
    width: 100% !important;
}

/* Adjust your double-calendar dates container sub-row to split evenly */
.booking-grid-premium > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Keeps departure and return side-by-side */
    gap: 8px !important;
    height: auto !important;
}

/* Tightly pack form labels and section dividers for vertical space optimization */
.form-section-heading {
    color: #ffffff !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25) !important;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 16px;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

/* Fix input typing colors against colorful gradient card background */




/* Direction swapper overrides for vertical block streams */
.airport-swap-circle {
    display: none !important; /* Suppress swapper on vertical streams to keep input layouts clean */
}

/* Clean, Solid Action Submit Button */
.action-row-premium {
    margin-top: 16px;
}
.btn-premium-search {
    width: 100%; /* Spans full sidebar block width */
    background: #ffffff !important;
    color: #3a8da8 !important;
    font-weight: 800;
    padding: 14px;
    font-size: 14px;
}

/* ==========================================================================
   📱 MOBILE STACKING ADAPTATIONS
   ========================================================================== */
@media (max-width: 1024px) {
    .bta-floating-foreground-content {
        flex-direction: column;
        align-items: center;
        padding: 40px 16px;
    }
    .premium-booking-card {
        max-width: 100%; /* Scale back to full width on compact touch screens */
    }
}

/* Update these exact classes in your public/css/app.css file */

/* --- THE FLOATING FOREGROUND STAGE CONTAINER --- */
.bta-floating-foreground-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 24px;
    display: flex;
    flex-direction: row; 
    justify-content: flex-start; /* Keeps the terminal docked cleanly to the left side */
    align-items: center;
    box-sizing: border-box;
}

/* 🚀 THE FIXED COMPACT SIDEBAR CARD */
.premium-booking-card {
    background: linear-gradient(180deg, #3a8da8 0%, #4da79b 50%, #6ec287 100%) !important;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.45) !important;
    width: 100%;
    max-width: 520px; /* Widened slightly from 440px to comfortably hold side-by-side inputs */
    margin: 0; 
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px);
    box-sizing: border-box;
}

/* 🔥 THE CURE: Convert vertical rows into structured 2-column internal grids */
.booking-grid-premium,
.passenger-details-grid-premium {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Forces side-by-side dual pairs */
    gap: 10px 12px !important; /* Strict tight gutters to optimize vertical spacing */
    background: transparent !important; 
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Spanning Layout Rule Parameters: Forces wide inputs to cross the full row width alone */
.booking-grid-premium > div:nth-child(1), /* Leaving From input block container slot */
.booking-grid-premium > div:nth-child(2), /* Going To input block container slot */
.booking-grid-premium > div:nth-child(4), /* Travellers Class block trigger slot */
.passenger-details-grid-premium > div:nth-child(1), /* Passenger Full Name slot line */
.passenger-details-grid-premium > div:nth-child(5), /* Baggage allowance visual anchor */
.passenger-details-grid-premium > div:nth-child(6) { /* Invoicing dynamic confirmation token */
    grid-column: span 2 !important; /* Takes full width of the card row */
    width: 100% !important;
}

/* Multi-column targets that sit side-by-side cleanly in half-widths */
.booking-grid-premium > div[style*="grid-template-columns"], /* Date picker dual boxes wrapper */
.passenger-details-grid-premium > div:nth-child(2), /* Contact telephone phone number */
.passenger-details-grid-premium > div:nth-child(3), /* Email Notification field */
.passenger-details-grid-premium > div:nth-child(4) { /* Passport Nationality input */
    grid-column: span 1 !important; /* Splits the row exactly in half */
}

/* Compact layout date picker subgrid internal container wrapper */
.booking-grid-premium > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* Maximize vertical screen real estate with compact input dimensions */
.premium-input-block {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    height: 56px !important; /* Compact container profile */
    padding: 6px 14px !important;
    margin-bottom: 0 !important; /* Drops space bloating layout rules */
}
.premium-input-block label {
    font-size: 9.5px !important;
    margin-bottom: 0 !important;
}
.premium-input-block input[type="text"],
.premium-input-block input[type="email"],
.premium-input-block input[type="tel"],
.premium-input-block .custom-dropdown-trigger {
    font-size: 13.5px !important;
    height: 22px !important;
    line-height: 22px !important;
}

/* Section Headings padding optimizations */



/* Absolute Floating Errors layout tweaks for compact half-width slots */
.premium-input-block .input-error-text-span {
    bottom: -18px !important;
    font-size: 9.5px !important;
}


/* Append directly to the bottom of public/css/app.css */

/* 🚀 THE CURE: Forces the inner double-date block container to span across both grid columns */
#dates-grid-wrapper {
    grid-column: span 2 !important; /* Spans full width of the sidebar layout */
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Keeps the inputs sitting side-by-side */
    gap: 12px !important; /* Matches your form's standard grid gutter width */
    box-sizing: border-box !important;
}

/* Ensure the sub-date input cards scale smoothly inside the corrected grid row */
#departure-picker-block,
#return-picker-block {
    width: 100% !important;
    grid-column: span 1 !important; /* Each input card fills exactly half of the row space */
}
/* Update/Replace these exact classes in your public/css/app.css file */

/* --- Dynamic Linked Double-Calendar Date Target Blocks Fix --- */
#dates-grid-wrapper {
    grid-column: span 2 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

/* --- High Contrast Translucent Form Input Boxes --- */
.premium-input-block {
    background: rgba(255, 255, 255, 0.94) !important; /* Pure crisp white with micro-opacity allows total legibility */
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    border-radius: var(--radius-md);
    padding: 6px 14px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    cursor: pointer;
    height: 58px; /* Strict matching compact baseline height */
    box-sizing: border-box;
    transition: all 0.2s ease;
    overflow: visible;
}

/* Interactive Focus/Hover state tweaks: Adds a high-contrast glowing shadow */
.premium-input-block:hover,
.premium-input-block:focus-within {
    background: #ffffff !important;
    border-color: #00bcd4 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 
                0 0 0 3px rgba(0, 188, 212, 0.25) !important;
}

/* --- HIGH LEGIBILITY TYPOGRAPHY FORCED OVERRIDES --- */

/* Micro-labels sitting on top of fields */
.premium-input-block label {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #475569 !important; /* Deep charcoal slate replaces your low-contrast faint text */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px !important;
    line-height: 1.2;
    pointer-events: none;
}

/* Typing text input content fields values */
.premium-input-block input[type="text"],
.premium-input-block input[type="email"],
.premium-input-block input[type="tel"],
.premium-input-block .clean-date-input,
.premium-input-block .custom-dropdown-trigger {
    color: #0f172a !important; /* Solid obsidian midnight dark tint ensures instant readability */
    font-size: 14px !important;
    font-weight: 700 !important;
    height: 22px !important;
    line-height: 22px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100%;
}

/* Input placeholder text overrides */
.premium-input-block input::placeholder {
    color: #94a3b8 !important; /* Clean neutral grey placeholder value */
    font-weight: 500;
}

/* The custom inline vector calendar graphics alignments */
.bta-vector-calendar-icon svg {
    color: #475569 !important; /* Matches icon vectors cleanly into deep slate text styles */
}

/* Static read-only confirmation rows highlights adjustment */
.premium-input-block:has(div[style*="color: #10b981"]),
.premium-input-block:has(div[style*="color: #64748b"]) {
    background: rgba(255, 255, 255, 0.85) !important;
}
/* ==========================================================================
   ✨ COMPACT RESILIENT SIDEBAR GRID RE-CALIBRATION
   ========================================================================== */

/* Inner Rows Containers Setup */
.booking-grid-premium,
.passenger-details-grid-premium {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 12px !important; /* Controlled gutters maintain alignment bounds */
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Outer layout slots container box adjustments */
.premium-input-block {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: var(--radius-md);
    padding: 8px 12px !important; /* Strict internal padding balances structural expansion */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Safely balances space between label and input */
    align-items: flex-start !important;
    position: relative !important;
    height: auto !important; /* 🔥 THE CURE: Drops static heights so elements flex organically */
    min-height: 58px !important; /* Establishes a uniform horizontal baseline line */
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Micro-labels sitting on top of inputs */
.premium-input-block label {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
    width: 100% !important;
    white-space: normal !important; /* Allows multi-line wrap safety rules */
    pointer-events: none;
}

/* 🔥 THE CURE FOR HALF-WIDTH LABELS: Scales down fonts on dual paired elements to stop text wrapping bugs */
.passenger-details-grid-premium > div:nth-child(2) label, /* Contact Number label */
.passenger-details-grid-premium > div:nth-child(3) label, /* Email Address label */
#departure-picker-block label,                             /* Departure Date label */
#return-picker-block label {                               /* Return Date label */
    font-size: 8.5px !important; /* Scaled down perfectly to guarantee single-line fitment */
    letter-spacing: 0.3px;
}

/* Typing input text controls layout properties overrides */
.premium-input-block input[type="text"],
.premium-input-block input[type="email"],
.premium-input-block input[type="tel"],
.premium-input-block .clean-date-input,
.premium-input-block .custom-dropdown-trigger {
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    height: 20px !important;
    line-height: 20px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Style input placeholder text layer */
.premium-input-block input::placeholder {
    color: #94a3b8 !important;
    font-weight: 500;
}

/* Fix static read-only text clipping alignment boundaries */
.premium-input-block div[style*="font-size"] {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Compact layout button adjustments */
.action-row-premium {
    margin-top: 14px !important;
}
.btn-premium-search {
    width: 100% !important;
    background: #ffffff !important;
    color: #3a8da8 !important;
    font-weight: 800 !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    height: 42px !important; /* Keeps action bar tight and clear of card margins */
    line-height: 42px !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.1) !important;
}


/* Update these exact classes in your public/css/app.css file */

/* --- The Master Sidebar Card: Compact Layout Profile --- */
.premium-booking-card {
    background: linear-gradient(180deg, #3a8da8 0%, #4da79b 50%, #6ec287 100%) !important;
    border-radius: 16px;
    padding: 16px 20px !important; /* 🔥 REDUCED PADDING: Saves massive vertical screen real estate */
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.4) !important;
    width: 100%;
    max-width: 480px; /* Enforces clean proportions */
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px);
    box-sizing: border-box !important;
}

/* --- Internal Forms Grid: Tight Vertical Spacing --- */
.booking-grid-premium,
.passenger-details-grid-premium {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 10px !important; /* 🔥 TIGHTER GUTTERS: Compresses fields cleanly together */
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Compact Form Fields --- */
.premium-input-block {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 6px;
    padding: 4px 10px !important; /* Tighter inner margins */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    position: relative !important;
    height: auto !important;
    min-height: 48px !important; /* 🔥 LOWER HEIGHT: Drops from 58px to save vertical space */
    box-sizing: border-box !important;
}

/* Section Header Typography Labels */
.form-section-heading {
    color: #ffffff !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25) !important;
    font-size: 10px !important; /* Tiny, clean headers */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px !important; /* Reduced vertical distance cushions */
    margin-bottom: 6px !important;
    padding-bottom: 2px;
    text-align: left;
    width: 100%;
}

/* Micro-labels inside fields */
.premium-input-block label {
    font-size: 8.5px !important; /* Crisp small fonts prevent text wrapping overflows */
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
}

/* Content input values and placeholders alignment */
.premium-input-block input[type="text"],
.premium-input-block input[type="email"],
.premium-input-block input[type="tel"],
.premium-input-block .clean-date-input,
.premium-input-block .custom-dropdown-trigger {
    color: #0f172a !important;
    font-size: 12.5px !important; /* Slightly smaller typography fits perfectly */
    font-weight: 700 !important;
    height: 18px !important;
    line-height: 18px !important;
}

/* Static confirmation badge data metrics */
.premium-input-block div[style*="font-size"] {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* --- Clean Submission Button Block --- */
.action-row-premium {
    margin-top: 12px !important; /* Tighter top spacing */
    width: 100%;
}
.btn-premium-search {
    width: 100% !important;
    background: #ffffff !important;
    color: #3a8da8 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    height: 40px !important; /* Fixed compact profile */
    line-height: 40px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer;
}
/* ==========================================================================
   ⚡ ENTERPRISE-GRADE MULTI-DIMENSION RESPONSIVE Breakpoint MATRIX
   ========================================================================== */

/* 1. Base Framework Setup: For large, tall desktop monitors */
.bta-floating-foreground-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 24px;
    display: flex;
    flex-direction: row; 
    justify-content: flex-start; /* Default left-docket sidebar */
    align-items: center;
    box-sizing: border-box;
}

.premium-booking-card {
    background: linear-gradient(180deg, #3a8da8 0%, #4da79b 50%, #6ec287 100%) !important;
    border-radius: 16px;
    padding: 16px 20px !important;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.4) !important;
    width: 100%;
    max-width: 460px; /* Locked sidebar width */
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px);
    box-sizing: border-box !important;
}

/* ==========================================================================
   🚨 CRUCIAL FIX A: VERTICAL HEIGHT MEDIA BREAKPOINT FOR SHORT LAPTOPS
   ========================================================================== */
@media (max-height: 850px) and (min-width: 1025px) {
    /* If the browser screen is short (e.g. 13-inch Macbook/Laptops), allow internal scrolling */
    .premium-booking-card {
        max-height: calc(100vh - 120px) !important; /* Locks height to fit viewport bounds precisely */
        overflow-y: auto !important; /* Injects a clean internal scrollbar inside the card */
        padding-right: 12px !important;
    }
    
    /* Optimize custom scrollbar style so it blends perfectly into your colorful gradient */
    .premium-booking-card::-webkit-scrollbar {
        width: 5px;
    }
    .premium-booking-card::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }
    .premium-booking-card::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4);
        border-radius: 10px;
    }
}

/* ==========================================================================
   🚨 CRUCIAL FIX B: ASPECT-RATIO BREAKPOINT FOR SQUARE / SQUARE-ISH MONITORS
   ========================================================================== */
@media (max-aspect-ratio: 4/3), (max-width: 1150px) {
    /* If the viewport width scales in or feels compressed, convert sidebar to a central grid row layout */
    .bta-floating-foreground-content {
        flex-direction: column !important; /* Drops side-by-side row mechanics */
        justify-content: center !important;
        align-items: center !important;
        padding: 40px 20px !important;
    }
    
    .premium-booking-card {
        max-width: 960px !important; /* Expands to a comfortable, standard grid width card */
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    /* Re-arrange fields into a wide, 3-column matrix grid to use horizontal screen real estate */
    .booking-grid-premium,
    .passenger-details-grid-premium {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 fields side-by-side */
        gap: 12px 14px !important;
    }
    
    /* Reset custom span alignments for full-width horizontal grid distribution */
    .booking-grid-premium > div:nth-child(1),
    .booking-grid-premium > div:nth-child(2),
    .booking-grid-premium > div:nth-child(4),
    .passenger-details-grid-premium > div:nth-child(1),
    .passenger-details-grid-premium > div:nth-child(5),
    .passenger-details-grid-premium > div:nth-child(6) {
        grid-column: span 1 !important; /* Resets to regular 1-slot size */
        width: 100% !important;
    }
    
    /* Give destination text element a double span to balance structural grids */
    .booking-grid-premium > div:nth-child(2) {
        grid-column: span 1 !important;
    }
    
    /* Expands double-date row across two column lines horizontally */
    .booking-grid-premium > div[style*="grid-template-columns"] {
        grid-column: span 1 !important;
    }
    
    .btn-premium-search {
        max-width: 280px !important;
        float: right;
    }
}

/* ==========================================================================
   📱 MOBILE SMARTPHONE BREAKPOINT OVERRIDES
   ========================================================================== */
@media (max-width: 680px) {
    .booking-grid-premium,
    .passenger-details-grid-premium {
        grid-template-columns: 1fr !important; /* Safe vertical 1-field linear cascade stack */
        gap: 10px !important;
    }
    
    .premium-booking-card {
        padding: 16px !important;
    }
}
/* Check or update these settings in public/css/app.css */

/* Increases text-shadow on your white titles so they don't wash out on light sliders */
.bta-floating-foreground-content h1 {
    color: #ffffff !important;
    text-shadow: 0 4px 16px rgba(15, 23, 42, 0.65) !important; /* Enhanced shadow depth drops */
}



/* Ensure the white glassmorphic input fields maintain crisp definitions over clean photos */
.premium-booking-card {
    background: linear-gradient(180deg, #3a8da8 0%, #4da79b 50%, #6ec287 100%) !important;
    box-shadow: 0 35px 80px rgba(15, 23, 42, 0.5) !important; /* Deeper box shadows lift card out */
}
#bta-dynamic-hero-title,
#bta-dynamic-hero-subtitle {
    transition: opacity 0.2s ease-in-out !important;
}


/* ==========================================================================
   💎 CLASSSIC MODERN GLASSMORPHIC NAVBAR (COMPLETELY ISOLATED SCOPE)
   ========================================================================== */

/* 1. Master Header Navigation Row Base */


/* 2. Unified Content Bound Alignment Track */
.bta-nav-container-limit {
    max-width: 1300px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* Brand Identity Typography Styling */
.bta-nav-brand-logo-anchor {
    font-size: 20px;
    font-weight: 900;
    color: #ffffff !important;
    text-decoration: none !important;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

/* 3. Horizontal Link Navigation Link Track Items */
.bta-nav-links-menu-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bta-nav-item-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: color 0.2s ease;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.bta-nav-item-link:hover,
.bta-nav-item-link.nav-active-link {
    color: #ffffff !important;
    border-color: #00bcd4; /* Accent color matching your gradient highlights */
}

/* Multi-Tenant Account Log Button Box Override */
.bta-nav-btn-account-cta {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.bta-nav-btn-account-cta:hover {
    background: #ffffff !important;
    color: #3a8da8 !important; /* Dominant gradient teal accent */
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

/* 4. Compact Responsive Mobile Hamburger Button Component Trigger */
.bta-nav-hamburger-trigger {
    display: none; /* Hidden on large monitors */
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10005;
}
.bta-nav-hamburger-trigger span {
    width: 100%;
    height: 2.5px;
    background-color: #ffffff;
    border-radius: 4px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
}

/* ==========================================================================
   📱 ADAPTIVE MOBILE MENU BREAKPOINTS
   ========================================================================== */
@media (max-width: 920px) {
    .bta-nav-hamburger-trigger {
        display: flex; /* Expose menu button on touch viewports */
    }

    /* Transform flat row list items into an absolute sliding vertical panel sheet overlay */
    .bta-nav-links-menu-list {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden off-screen right baseline */
        width: 280px;
        height: 100vh;
        background: rgba(15, 23, 42, 0.96); /* High density backup slate mask */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 90px 32px 40px 32px;
        gap: 24px;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10000;
        box-sizing: border-box;
    }

    /* Slide menu layout onto viewport track */
    .bta-nav-links-menu-list.mobile-menu-active-state {
        right: 0;
    }

    .bta-nav-links-menu-list li {
        width: 100%;
    }
    .bta-nav-item-link {
        font-size: 16px;
        display: block;
        width: 100%;
    }
    .bta-nav-btn-account-cta {
        display: inline-block;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- Hamburger Animation Morphing Transformations --- */
    .bta-nav-hamburger-trigger.open-toggle-active span:nth-child(1) {
        transform: rotate(45deg) translateY(-1px);
    }
    .bta-nav-hamburger-trigger.open-toggle-active span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }
    .bta-nav-hamburger-trigger.open-toggle-active span:nth-child(3) {
        transform: rotate(-45deg) translateY(1px);
    }
}
/* Append directly to the bottom of public/css/app.css */

/* --- THE FIX: Robust Text Billboard Real Real Estate Layout --- */

/* Ensure headings utilize responsive, clear layout tracking lines */
#bta-dynamic-hero-title {
    color: #ffffff !important;
    font-size: 3.2rem !important; /* Clean cinematic scale */
    font-weight: 900 !important;
    line-height: 1.15 !important; /* 🔥 THE FIX: Creates clear spatial tracking between word wraps */
    margin: 0 0 16px 0 !important;
    letter-spacing: -1px !important;
    text-transform: uppercase !important;
    text-shadow: 0 4px 20px rgba(15, 23, 42, 0.8) !important;
}

#bta-dynamic-hero-subtitle {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-shadow: 0 2px 12px rgba(15, 23, 42, 0.8) !important;
}
/* Update/Replace these exact structural styles inside public/css/app.css */

.bta-master-navbar-header {
    position: sticky !important;
    top: 14px; /* 🔥 FLOATING RE-CALIBRATION: Pulls header away from the absolute top of the screen */
    width: calc(100% - 40px); /* Creates structural padding gaps on the left and right */
    max-width: 1240px; /* Constraints header alignment perfectly with your form limits */
    margin: 0 auto !important; /* Centers capsule symmetrically over horizontal viewport lines */
    
    /* Enhanced High-Gloss Frosted Glass Theme System */
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    
    /* Fine Glowing Highlight Borders & Spatial Depth Footprint Shadows */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important; /* Smooth capsule layout track arches */
    height: 60px; /* Reduced from 70px to optimize vertical header weight spacing */
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15),
                0 1px 3px rgba(15, 23, 42, 0.1) !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Center Content Bounds Alignment Track */
.bta-nav-container-limit {
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* Text Navigation Links List Gutters Adjustments */
.bta-nav-links-menu-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px; /* Balanced spacing links layout tracks */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Base style metrics for dynamic link rows texts */
.bta-nav-item-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13.5px; /* Clean compact micro-typography */
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.bta-nav-item-link:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Active current selection indicator highlight lines */
.bta-nav-item-link.nav-active-link {
    color: #00bcd4 !important; /* Vibrant travel cyan matching text accents */
    border-color: #00bcd4 !important;
}

/* The CTA Account Trigger Button Layout Optimization */
.bta-nav-btn-account-cta {
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bta-nav-btn-account-cta:hover {
    background: #ffffff !important;
    color: #3a8da8 !important; /* Dominant corporate gradient accent color */
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-0.5px);
}

/* ==========================================================================
   📱 ADAPTIVE MOBILE MENU CAPSULE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 920px) {
    .bta-master-navbar-header {
        top: 10px;
        width: calc(100% - 20px);
        height: 54px;
    }
    
    .bta-nav-links-menu-list {
        background: rgba(20, 30, 48, 0.98) !important; /* Darker slate for high mobile screen contrast isolation */
    }
}
/* Update/Replace these exact structural styles inside public/css/app.css */

/* Master Structural Stage Wrapper holding everything together */
.hero-slider-stage-wrapper {
    position: relative;
    width: 100%;
    min-height: 600px; /* Enhanced height gives your texts vertical breathing room */
    overflow: hidden;
    background: #0f172a; 
}

/* 🚀 THE FIXED ROW FOREGROUND: Splits the layout into two equal content panels */
.bta-floating-foreground-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 24px;
    display: grid !important; /* Converts container to an absolute 2-column grid system */
    grid-template-columns: 460px 1fr !important; /* Column 1 fits your form sidebar precisely */
    gap: 40px;
    align-items: center;
    min-height: 580px;
    box-sizing: border-box;
}

/* 🚀 THE BILLBOARD FIXED ALIGNMENTS */
.bta-hero-text-billboard {
    grid-column: span 1 !important; /* Constrains text strictly inside column 2 area space */
    width: 100% !important;
    max-width: 580px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* 🔥 THE VERTICAL CHANNELS OVERLAP FIX: Shifts text up slightly to clear image promotions below */
    padding-bottom: 80px !important; 
    box-sizing: border-box !important;
}

/* --- HIGH LEGIBILITY NAVIGATION TEXT COLORS FIX --- */

/* Fixes the text visibility link issue on active pages, hover states, and focus triggers */
.bta-nav-item-link {
    color: rgba(255, 255, 255, 0.85) !important; /* Solid light grey stands out over blue slots */
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

/* 🔥 THE CONTRAST HOVER FIX: Changes text color to solid cyan instead of hiding it */
.bta-nav-item-link:hover {
    color: #00bcd4 !important; 
    text-shadow: 0 0 12px rgba(0, 188, 212, 0.4) !important;
}

.bta-nav-item-link.nav-active-link {
    color: #00bcd4 !important; /* Locks active page text color cleanly into your primary theme */
    border-color: #00bcd4 !important;
}

/* Mobile responsive adaptive stacking overrides */
@media (max-width: 1024px) {
    .bta-floating-foreground-content {
        grid-template-columns: 1fr !important; /* Stacks form above text vertically on phones */
        gap: 20px;
    }
    .bta-hero-text-billboard {
        padding-bottom: 0 !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
}
/* ==========================================================================
   ✨ 1. COMMERCIAL REGIONAL PACKAGES & VALUE GRID
   ========================================================================== */
   .bta-commercial-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.bta-section-title-wrapper {
    text-align: left;
    margin-bottom: 35px;
    border-left: 4px solid var(--primary);
    padding-left: 16px;
}

.bta-section-title-wrapper h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--dark-bg);
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.bta-section-title-wrapper p {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 4px;
}

/* 3-Column Elite Promotional Cards Grid */
.bta-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.bta-destination-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease;
}

.bta-destination-card:hover {
    transform: translateY(-4px);
}

.bta-card-image-slot {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.bta-price-tag-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: var(--primary);
    color: var(--white);
    padding: 6px 14px;
    font-weight: 800;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.3);
}

.bta-card-body-details {
    padding: 20px;
    text-align: left;
}

.bta-card-body-details h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-bg);
}

.bta-card-body-details p {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

/* ==========================================================================
   ✨ 2. WHY CHOOSE BTA INFO INFRASTRUCTURE STRIP
   ========================================================================== */


/* Update/Replace these exact feature strip styles inside public/css/app.css */

/* --- The Main Section Banner Track --- */








/* Update/Replace these exact feature strip styles inside public/css/app.css */

/* --- 🔥 THE FIX: Drops the dark background strip for a flat, crisp white background track --- */
.bta-value-banner-strip {
    width: 100% !important;
    background: #ffffff !important; 
    padding: 60px 0 !important; /* Balanced vertical breathing cushion */
    box-sizing: border-box !important;
    margin: 80px 0 !important;
}

/* --- Global Widescreen Symmetrical Grid Limit Track --- */
.bta-value-strip-inner {
    width: 90% !important; /* Locks width symmetrically with your global website profile */
    max-width: 1600px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 neat equal feature tracks */
    gap: 32px !important; /* Broad cushions allow the cards to breathe */
    box-sizing: border-box !important;
}

/* --- 🔥 THE SNAPSHOT FIX: Light, clean minimalist square blocks matching your reference photo --- */
.bta-value-feature-node {
    background: #ffffff !important;
    border-radius: 12px !important; /* Smooth corner tracking curves */
    border: 1px solid #f1f5f9 !important; /* Light, soft border frame */
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03) !important; /* Muted corporate drop shadow footprint */
    
    /* Center text and vectors cleanly inside the box container */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Forces a perfect uniform square profile aspect ratio layout */
    aspect-ratio: 1 / 1 !important; 
    padding: 32px !important;
    box-sizing: border-box !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s ease, 
                border-color 0.25s ease !important;
}

/* Tactile interactive hover state rules */
.bta-value-feature-node:hover {
    transform: translateY(-4px) !important;
    border-color: #00bcd4 !important; /* Soft glow to travel cyan signature tone on focus */
    box-shadow: 0 20px 40px rgba(0, 188, 212, 0.08) !important;
}

/* --- Centered Vector/Emoji Icon Layout --- */
.bta-feature-vector-icon {
    font-size: 44px !important; /* Clean bold weight matching reference line-art layouts */
    margin-bottom: 24px !important; /* Generates standard vertical breathing cushion space above text labels */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- 🔥 THE SNAPSHOT FIX: High Contrast Ocean Blue Text Elements --- */
.bta-value-feature-node h5 {
    color: #0369a1 !important; /* Clean ocean blue text replaces white to match reference photo exactly */
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: capitalize; /* Smooth, natural capitalized text string headers */
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    width: 100%;
}

.bta-value-feature-node p {
    color: #475569 !important; /* Deep charcoal slate gray secondary description font copy */
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    text-align: center !important;
    max-width: 280px; /* Constrains line length for fast scanning */
    
    /* Mutes/hides text overflow so cards stay strictly square even if descriptions are long */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ==========================================================================
   📱 FEATURE TILES ADAPTIVE MOBILE BREAKPOINTS
   ========================================================================== */
@media (max-width: 990px) {
    .bta-value-strip-inner {
        grid-template-columns: 1fr !important; /* Stacks feature blocks cleanly into 1 vertical column line */
        gap: 24px !important;
    }
    
    .bta-value-feature-node {
        aspect-ratio: auto !important; /* Drops strict squares on mobile to let varying text expand safely */
        padding: 40px 24px !important;
    }
}


/* ==========================================================================
   📱 ADAPTIVE FEATURE STRIP MOBILE Breakpoints
   ========================================================================== */

    





/* Update/Replace these exact structural grid rules in your public/css/app.css file */

/* --- Master Section Layout Wrapper --- */
.bta-services-section-wrapper {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}

/* --- Responsive Services Grid Control Matrix --- */
.bta-services-matrix-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Standard presentation layout row on large monitors */
    gap: 24px !important; /* Balanced gap spacing allows elements to breathe */
    width: 100% !important;
    box-sizing: border-box !important;
}

.bta-service-matrix-card {
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
    display: flex;
    flex-direction: column;
    height: 100%; /* Forces cards to stay identical in height even if text blocks vary */
    border: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bta-service-matrix-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1) !important;
}

/* Aspect-ratio calculated image top frame */
.bta-service-matrix-image {
    width: 100% !important;
    height: 180px !important; /* Streamlined compact image zone line */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
}

/* Descriptive Text Panel Card Body Areas */
.bta-service-matrix-body {
    padding: 20px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.bta-service-matrix-body h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Deep charcoal obsidian titles */
    margin-bottom: 8px !important;
}

.bta-service-matrix-body p {
    font-size: 13px !important;
    color: #475569 !important; /* High contrast dark gray slate typography */
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ==========================================================================
   🚨 BREAKPOINT A: MID-RANGE VIEWPORTS (TABLETS / IPADS / LAPTOPS)
   ========================================================================== */
@media (max-width: 1120px) {
    .bta-services-matrix-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 🔥 THE FIX: Drops smoothly into a clean 2x2 grid */
        gap: 20px !important;
    }
    
    .bta-service-matrix-image {
        height: 160px !important; /* Slightly scales images down on mid-size screens */
    }
}

/* ==========================================================================
   📱 BREAKPOINT B: ULTRA-COMPACT MOBILE SMARTPHONES
   ========================================================================== */
@media (max-width: 640px) {
    .bta-services-section-wrapper {
        margin: 40px auto;
        padding: 0 16px; /* Tightens screen margin fields on small devices */
    }

    .bta-services-matrix-grid {
        grid-template-columns: 1fr !important; /* 🔥 THE FIX: Collapses into a single vertical column */
        gap: 16px !important;
    }

    .bta-service-matrix-image {
        height: 180px !important; /* Restores comfortable visual height parameters for mobile phones */
    }
    
    .bta-service-matrix-body {
        padding: 16px !important; /* Saves real estate inside small screen viewports */
    }

    .bta-section-title-wrapper h3 {
        font-size: 20px !important; /* Scales title fonts down to prevent character clipping */
    }
}



/* ==========================================================================
   📰 BTA TRAVEL LOGISTICS LATEST BLOG CHANNELS STYLES
   ========================================================================== */
   .bta-blog-section-wrapper {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}

/* 3-Column Uniform Balanced Presentation Grid */
.bta-blog-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bta-blog-post-card {
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bta-blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08) !important;
}

/* Photo panel frame with absolute meta badge tags */
.bta-blog-image-slot {
    width: 100% !important;
    height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.bta-blog-date-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(4px);
    color: #ffffff !important;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Typography contents padding settings */
.bta-blog-body-details {
    padding: 24px 20px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.bta-blog-category-tag {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--primary, #00bcd4) !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px !important;
}

.bta-blog-body-details h4 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
}

.bta-blog-body-details p {
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

/* Premium micro-arrow link anchor line */
.bta-blog-read-more-link {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    margin-top: auto !important; /* Locks link to bottom of cards */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.bta-blog-read-more-link:hover {
    color: var(--primary, #00bcd4) !important;
}

/* ==========================================================================
   📱 BLOG CHANNELS MOBILE BREAKPOINTS
   ========================================================================== */
@media (max-width: 960px) {
    .bta-blog-posts-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Drops to a clean 2-column matrix on iPads */
        gap: 20px !important;
    }
}

@media (max-width: 640px) {
    .bta-blog-section-wrapper {
        margin: 50px auto;
        padding: 0 16px;
    }
    
    .bta-blog-posts-grid {
        grid-template-columns: 1fr !important; /* Flat 1-column stack layout tracking on mobile devices */
        gap: 16px !important;
    }
    
    .bta-blog-body-details {
        padding: 16px !important;
    }
}
/* ==========================================================================
   👁️ PREMIUM TYPOGRAPHY MATRIX (FONT SIZES & LINE HEIGHTS RE-CALIBRATION)
   ========================================================================== */

/* --- 1. Master Hero Banner Sections --- */
#bta-dynamic-hero-title {
    font-size: 2.8rem !important; /* Optimized down from 3.2rem to fit standard laptop monitors perfectly */
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
}

#bta-dynamic-hero-subtitle {
    font-size: 1.25rem !important; /* Muted subtitle text line */
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

/* --- 2. Glassmorphic Booking Form Sidebar --- */
.premium-booking-card .form-section-heading {
    font-size: 12px !important; /* Clean, clear uppercase section headers */
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
}

.premium-booking-card .premium-input-block label {
    font-size: 10px !important; /* Balanced micro-labels sit cleanly on top of typing fields */
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.premium-booking-card .premium-input-block input,
.premium-booking-card .premium-input-block .custom-dropdown-trigger,
.premium-booking-card .premium-input-block .clean-date-input {
    font-size: 14.5px !important; /* Slightly increased for crisp readability when choosing locations */
    font-weight: 600 !important;
}

.premium-booking-card .btn-premium-search {
    font-size: 14px !important; /* Strong, clear call-to-action typography font */
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* --- 3. Commercial Services & Blog News Grids --- */
.bta-section-title-wrapper h3 {
    font-size: 26px !important; /* Bold, prominent section title text */
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

.bta-section-title-wrapper p {
    font-size: 14.5px !important;
    font-weight: 500 !important;
}

.bta-service-matrix-body h4,
.bta-blog-body-details h4 {
    font-size: 18px !important; /* Crisp, scannable card title headers */
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.bta-service-matrix-body p,
.bta-blog-body-details p {
    font-size: 14px !important; /* Standard, comfortable body font reading line */
    line-height: 1.6 !important;
}

.bta-blog-read-more-link {
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   📱 ADAPTIVE MOBILE TYPOGRAPHY BREAKPOINTS
   ========================================================================== */
@media (max-width: 768px) {
    #bta-dynamic-hero-title {
        font-size: 2rem !important; /* Scales down smoothly on mobile phones to prevent layout clipping */
    }
    
    #bta-dynamic-hero-subtitle {
        font-size: 1.1rem !important;
    }

    .bta-section-title-wrapper h3 {
        font-size: 21px !important; /* Compact section titles on mobile touch viewports */
    }

    .bta-service-matrix-body h4,
    .bta-blog-body-details h4 {
        font-size: 17px !important;
    }

    .bta-service-matrix-body p,
    .bta-blog-body-details p {
        font-size: 13.5px !important; /* Slightly more compact body copy saves space on phones */
    }
}



/* ==========================================================================
   💎 BTA GLOBAL PORTAL FOOTER (COMPLETELY ISOLATED SCOPE)
   ========================================================================== */
   .bta-global-portal-footer {
    width: 100% !important;
    background: #0f172a !important; /* Deep midnight obsidian background layer */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 70px 20px 30px 20px !important;
    color: #94a3b8 !important; /* Smooth gray micro-typography */
    box-sizing: border-box !important;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.bta-footer-container-limit {
    max-width: 1200px;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 2fr repeat(3, 1fr) !important; /* Brand profile column + 3 directory lists */
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* --- Brand Identity Column Block --- */
.bta-footer-brand-column {
    text-align: left;
}

.bta-footer-brand-logo {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin-bottom: 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bta-footer-brand-column p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #94a3b8 !important;
    max-width: 280px;
}

/* --- Links Directory Columns --- */
.bta-footer-links-column {
    text-align: left;
}

.bta-footer-links-column h5 {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 20px !important;
}

.bta-footer-links-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bta-footer-links-list li {
    margin-bottom: 12px !important;
}

.bta-footer-anchor-link {
    font-size: 13.5px !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.bta-footer-anchor-link:hover {
    color: #00bcd4 !important; /* Brand cyan travel highlight accent */
}

/* --- Bottom Copyright Regulatory Bar --- */
.bta-footer-bottom-bar {
    max-width: 1200px;
    margin: 50px auto 0 auto !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.bta-footer-bottom-bar p {
    font-size: 12.5px !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* ==========================================================================
   📱 ADAPTIVE MOBILE FOOTER BREAKPOINTS
   ========================================================================== */
@media (max-width: 960px) {
    .bta-footer-container-limit {
        grid-template-columns: repeat(2, 1fr) !important; /* Refactors into a clean 2x2 column block on tablets */
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .bta-global-portal-footer {
        padding: 50px 16px 24px 16px !important;
    }

    .bta-footer-container-limit {
        grid-template-columns: 1fr !important; /* Flat single-column layout on phones */
        gap: 25px;
    }

    .bta-footer-links-column h5 {
        margin-bottom: 12px !important;
    }

    .bta-footer-bottom-bar {
        flex-direction: column !important; /* Stacks text and links vertically on phones */
        gap: 12px;
        text-align: center;
        margin-top: 35px !important;
    }
}


/* Append these rules to the bottom of public/css/app.css */

/* 🔥 THE TEXT CLAMP CURE: Restricts description copies to exactly 3 layout lines */
.bta-service-matrix-body p {
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
    
    /* Cross-browser multi-line truncation clamp */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Change this number to 2 or 4 to adjust text constraints */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Premium scannable action links anchor layout */
.bta-service-more-action-link {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #00bcd4 !important; /* Brand cyan travel highlight accent */
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto !important; /* 🔥 THE DEPT FIX: Pushes link straight down to align nicely on the same line across all cards */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.bta-service-more-action-link:hover {
    color: #0f172a !important; /* Swaps to deep obsidian slate on focus hover states */
}
/* Append directly to the bottom of public/css/app.css */

/* --- 1. The Blog Grid Track Container --- */
.bta-blog-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Uniform 3-column layout row */
    gap: 24px !important; /* Strict spatial breathing cushion between cards */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- 2. Balanced Card Box System --- */
.bta-blog-post-card {
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    
    /* 🔥 THE FIX: Converts the card into a vertical flexbox column track */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Forces all sibling cards in the row to stretch identically */
    overflow: hidden;
    box-sizing: border-box !important;
    transition: transform 0.2s ease;
}

.bta-blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

/* Aspect-ratio fixed top image space */
.bta-blog-image-slot {
    width: 100% !important;
    height: 180px !important; /* Locks all top images to an identical row height */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
}

/* --- 3. Card Body Text Adjustments --- */
.bta-blog-body-details {
    padding: 20px !important;
    text-align: left !important;
    
    /* 🔥 THE FIX: Fills out the remaining height space of the card box container */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important; 
    box-sizing: border-box !important;
}

.bta-blog-category-tag {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #00bcd4 !important; /* Brand primary cyan highlight */
    text-transform: uppercase;
    margin-bottom: 6px !important;
}

.bta-blog-body-details h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
}

/* Clamps multi-line paragraphs cleanly so descriptions match in size */
.bta-blog-body-details p {
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    
    /* Cross-browser multi-line truncation clamp */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Limits text description fields to exactly 3 lines */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* --- 4. The Pin-To-Bottom Link Anchor --- */
.bta-blog-read-more-link {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    
    /* 🔥 THE FIX: Pushes the action link straight down to align nicely on the same line across all cards */
    margin-top: auto !important; 
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bta-blog-read-more-link:hover {
    color: #00bcd4 !important;
}


/* Append directly below your blog styles inside public/css/app.css */

@media (max-width: 960px) {
    .bta-blog-posts-grid {
        /* Arranges layout cleanly into a 2-column matrix row on tablet screens */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 640px) {
    .bta-blog-posts-grid {
        /* Collapses completely into a single vertical stack column line on smartphones */
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .bta-blog-image-slot {
        height: 190px !important; /* Gives image space a bit more weight on phone viewports */
    }
}


/* Append directly to the bottom of public/css/app.css */

/* --- 1. Master Section Symmetrical Grid Split --- */




/* Append directly to the absolute bottom of public/css/app.css */

/* --- Enhanced High-Contrast Travel Price Badges --- */
.bta-price-tag-badge {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    background: linear-gradient(135deg, #00bcd4, #00acc1) !important; /* Premium Cyan-to-Teal Gradient */
    color: #ffffff !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 20px !important; /* Smooth capsule layout track arches */
    box-shadow: 0 4px 14px rgba(0, 188, 212, 0.4) !important;
    letter-spacing: 0.5px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}




/* Update/Append these exact structural styles inside public/css/app.css */

/* ==========================================================================
   🏛️ GLOBAL WIDESCREEN CONTAINER ALIGNMENT ENGIME (80%+ VIEWPORT GRID)
   ========================================================================== */

/* 1. THE FLOATING HERO STAGE CONTAINER: Opens up your landing form and billboard layout */
.bta-floating-foreground-content {
    position: relative !important;
    z-index: 5;
    width: 90% !important; /* Forces hero content tracking to match broad profile fields */
    max-width: 1600px !important; /* Locks structural ceiling symmetrically */
    margin: 0 auto !important;
    padding: 30px 24px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center;
    box-sizing: border-box;
}

/* 2. POPULAR ROUTES OUT OF TANZANIA: Expands your promotional 3-column cards */
.bta-commercial-section {
    width: 90% !important;
    max-width: 1600px !important;
    margin: 120px auto !important; /* Generates beautiful premium vertical separation rows */
    padding: 0 20px !important;
    box-sizing: border-box;
}

.bta-packages-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Maintains strict 3-column rows */
    gap: 32px !important; /* Widened gutters give your card parameters room to breathe */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. OUR CORE TRAVEL SERVICES: Spreads your 4-column matrix out cleanly sideways */
.bta-services-section-wrapper {
    width: 90% !important;
    max-width: 1600px !important;
    margin: 120px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box;
}

.bta-services-matrix-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Uniform 4-column presentation layout */
    gap: 28px !important; /* Extends gap tracking parameters symmetrically */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. LATEST BLOG POSTS GRID: Scales your news article posts to the global baseline */
.bta-blog-section-wrapper {
    width: 90% !important;
    max-width: 1600px !important;
    margin: 120px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box;
}

.bta-blog-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 5. THE GLOBAL CAPABLE NAVBAR FOOTPRINT: Matches header tracking smoothly */
.bta-master-navbar-header {
    width: 90% !important;
    max-width: 1600px !important;
}

/* ==========================================================================
   📸 FLUID ASPECT-RATIO CARD HEIGHT ADJUSTMENTS
   ========================================================================== */
/* Because widths have expanded, we increase card image heights slightly 
   so the travel cards maintain correct cinematic aspect ratios without stretching */
.bta-card-image-slot {
    height: 240px !important; /* Increased from 200px */
}

.bta-service-matrix-image {
    height: 200px !important; /* Increased from 180px */
}

.bta-blog-image-slot {
    height: 210px !important; /* Increased from 180px */
}


/* Update/Replace these exact structural styles inside public/css/app.css */

/* --- 1. Symmetrical Stage Widescreen Stretch Wrapper --- */
.about-section {
    width: 90% !important; /* Matches your new global website layout width perfectly */
    max-width: 1600px !important; /* Sits flush under your new global ceiling limits */
    margin: 120px auto !important; /* Balanced uniform vertical row cushions */
    padding: 0 20px !important; 
    display: grid !important;
    /* 🔥 THE WIDESCREEN RESET: Shifts layout into an elegant 48% vs 52% ratio partition split */
    grid-template-columns: 48fr 52fr !important; 
    gap: 0 !important; 
    align-items: center !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* --- 2. Left Column: Panoramic Image Frame Block --- */
.about-image {
    width: 100% !important;
    height: 520px !important; /* Fixed vertical stature matches your global aspect ratios */
    border-radius: 16px !important; 
    overflow: hidden !important;
    z-index: 1 !important; 
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.12) !important;
}

.about-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* --- 3. Right Column: Recalibrated Widescreen Card Overlap --- */
.about-content {
    text-align: left !important;
    /* 🔥 THE WIDESCREEN RESET: Reduced left pull from -120px down to a comfortable -5% percentage offset.
          This expands the text column horizontally across wide viewports instead of squishing it inside the center! */
    margin-left: -5% !important; 
    margin-right: 0 !important;
    z-index: 5 !important; 
    background: #ffffff !important;
    
    /* Premium interior padding balance handles your description blocks beautifully */
    padding: 56px 48px !important; 
    border-radius: 14px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 35px 70px -15px rgba(15, 23, 42, 0.15) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Widescreen calibrated font sizes matrix alignment */
.about-content h2 {
    font-size: 2.4rem !important; /* Strong corporate header presentation sizing */
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.7px !important;
}

.about-content p {
    font-size: 15px !important; /* Comfortable scannability weight prevents text lines from feeling cramped */
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 18px !important;
}

/* Clean, crisp left-aligned button anchor framework */
.about-content .btn-premium-search {
    align-self: flex-start !important;
    display: inline-block !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 36px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
    transition: all 0.2s ease !important;
}

.about-content .btn-premium-search:hover {
    background: #00bcd4 !important; /* Glow travel cyan accent on hover focus triggers */
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.35) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   📱 ADAPTIVE MOBILE & TABLET LAYOUT RE-CALIBRATION
   ========================================================================== */
@media (max-width: 1150px) {
    .about-section {
        width: 100% !important;
        grid-template-columns: 1fr !important; /* Smoothly drops back to 1 vertical stack on smaller monitor resolutions */
        padding: 0 20px !important;
        margin: 60px auto !important;
    }
    
    .about-image {
        height: 360px !important;
    }
    
    .about-content {
        margin-left: 0 !important; /* Erases side overlaps completely to prevent mobile device layout breakage */
        padding: 40px 24px !important;
    }
}

/* Update/Replace this exact block inside your public/css/app.css file */

.bta-value-feature-node {
    background: #ffffff !important;
    border-radius: 12px !important; 
    border: 1px solid #f1f5f9 !important; 
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03) !important; 
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 🔥 THE WIDESCREEN RATIO CURE: 
       By shifting from 1/1 (perfect square) to 1.3/1 (widescreen horizontal box), 
       the cards expand horizontally, which widens the text container lane organically! */
    aspect-ratio: 1.3 / 1 !important; 
    padding: 32px 24px !important; /* Balanced side paddings */
    box-sizing: border-box !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s ease, 
                border-color 0.25s ease !important;
}

.bta-value-feature-node:hover {
    transform: translateY(-4px) !important;
    border-color: #00bcd4 !important; 
    box-shadow: 0 20px 40px rgba(0, 188, 212, 0.08) !important;
}

.bta-feature-vector-icon {
    font-size: 44px !important; 
    margin-bottom: 20px !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.bta-value-feature-node h5 {
    color: #0369a1 !important; 
    font-size: 16px !important; /* Slightly increased for bold presence */
    font-weight: 700 !important;
    text-transform: capitalize; 
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    width: 100%;
}

.bta-value-feature-node p {
    color: #475569 !important; 
    font-size: 13.5px !important; /* Increased slightly for comfortable scanning */
    line-height: 1.6 !important; /* Enhanced line height prevents clipping and squishing */
    margin: 0 !important;
    font-weight: 500 !important;
    text-align: center !important;
    
    /* 🔥 THE WIDESCREEN RATIO CURE: 
       Increases the maximum available row text limit width from 280px up to 380px.
       This lets the paragraph spread out naturally across the card body! */
    max-width: 380px !important; 
    width: 100% !important;
    
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* Locate and update this exact block inside your public/css/app.css file */

.bta-master-navbar-header {
    position: sticky !important;
    top: 14px;
    width: 90% !important; /* Fits perfectly with your global widescreen profile */
    max-width: 1600px !important;
    margin: 0 auto !important;
    
    /* 🔥 THE VALUE CHANGE: Replaces semi-opaque gray with a rich corporate midnight navy tone */
    background: #002d62 !important; 
    
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--bta-radius-sm) !important;
    height: 60px;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2) !important;
    transition: all 0.3s ease;
}


/* Update/Replace this exact selector block inside your public/css/app.css file */

.bta-master-navbar-header {
    position: sticky !important;
    top: 0 !important; /* 🔥 THE GAP FIX: Shifts the layout container flat against the top ceiling line */
    left: 0 !important;
    
    /* 🔥 THE WIDESCREEN EDGE FIX: 
       By changing from 90% wide with capsule margins to a full width 100%, 
       the corporate blue banner bar stretches seamlessly from edge to edge! */
    width: 100% !important; 
    max-width: 100% !important; /* Overrides any previous widescreen max caps safely */
    margin: 0 !important; /* Erases side capsule margin offsets entirely */
    border-radius: 0 !important; /* Drops rounded corners so the solid block pins flat */
    
    background: #002d62 !important; /* Maintains your gorgeous corporate navy background color */
    border: none !important; /* Drops external outlines for a clean edge interface */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Injects a clean subtle bottom boundary hairline */
    height: 60px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15) !important; /* Clean drop shadow footprint */
    transition: all 0.3s ease;
}

/* ⚠️ ADJUST CORE TEXT CONTAINER TO RETAIN INSIDE WIDESCREEN ALIGNMENTS:
   This ensures that while the navy bar stretches 100% to the screen walls, your 
   actual links and brand logo stay neatly contained inside your site's global width boundaries! */
.bta-nav-container-limit {
    width: 90% !important; /* Forces your internal text links axis line to match your global grid */
    max-width: 1600px !important; /* Align tightly underneath popular routes and sections baseline grids */
    margin: 0 auto !important; /* Symmetrically centers the link elements inside the wide navbar bar container */
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}


/* Append directly to the bottom of public/css/app.css */

/* --- 🏛️ GRAPHIC BRAND LOGO NAVBAR SCALE ENGINE --- */

.bta-nav-brand-logo-anchor {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important; /* Locks onto the central height alignment of the bar container */
    padding: 4px 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

.bta-navbar-brand-img {
    /* 🔥 THE HEIGHT LIMITATION: 
       By locking the height strictly to 44px (inside a 60px navbar), the wide logo remains compact, 
       maintains its perfect original aspect ratio proportions, and never clips or stretches! */
    height: 44px !important; 
    width: auto !important; /* Let the width adjust organically based on your image dimensions */
    display: block !important;
    object-fit: contain !important; /* Protects graphic alignment parameters defensively */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); /* Injects a clean subtle shadow */
}

/* Optional adjustment: if your navbar needs slightly more vertical breathing room to hold this specific image style,
   you can increase your main navbar header track height dynamically from 60px to 68px like this: */
.bta-master-navbar-header {
    height: 68px !important;
}




/* Inside public/css/app.css, find your @layer bta_terminal block and replace the mobile query section: */

@layer bta_terminal {

    /* ... Keep all your top desktop positioning rules unchanged ... */


    /* ==========================================================================
       🚨 MEDIUM VIEWPAND BREAKPOINT: TABLETS & IPADS (max-width: 1024px)
       ========================================================================== */
    @media (max-width: 1024px) {
        .bta-floating-foreground-content {
            grid-template-columns: 1fr !important; /* Drops side billboard, centers form card */
            padding: 40px 20px !important;
            gap: 24px;
        }

        .premium-booking-card {
            max-width: 640px !important; /* Broadens container space on mid-size monitors */
            margin: 0 auto !important;
            padding: 24px !important;
        }

        /* 🔥 THE FLEXIBLE REARRANGE: Arranges input blocks into clean, pairs */
        .booking-grid-premium,
        .passenger-details-grid-premium {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px 14px !important;
        }

        /* Forces critical destination inputs to change position and expand to full lines */
        .booking-grid-premium > div:nth-child(1), /* Leaving From */
        .booking-grid-premium > div:nth-child(2), /* Going To */
        .booking-grid-premium > div:nth-child(4), /* Travellers Field */
        .passenger-details-grid-premium > div:nth-child(1) { /* Full Name */
            grid-column: span 2 !important;
            width: 100% !important;
        }

        /* Keeps departure and return date boxes perfectly side-by-side */
        #dates-grid-wrapper {
            grid-column: span 2 !important;
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 12px !important;
        }
        
        .bta-hero-text-billboard {
            text-align: center !important;
            order: -1 !important; /* Moves welcome headline text completely above the card */
            padding-bottom: 20px !important;
        }
    }

    /* ==========================================================================
       📱 ULTRA-COMPACT MOBILE BREAKPOINT: SMARTPHONES (max-width: 580px)
       ========================================================================== */
    @media (max-width: 580px) {
        .bta-floating-foreground-content {
            padding: 20px 14px !important;
        }

        .premium-booking-card {
            max-width: 100% !important;
            padding: 16px 14px !important;
            border-radius: 12px !important;
        }

        /* 🔥 THE VERTICAL CASCADE CURE: Drops side-by-side layout completely on tight touch viewports */
        .booking-grid-premium,
        .passenger-details-grid-premium,
        #dates-grid-wrapper {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
            width: 100% !important;
        }

        /* Overrides desktop parameters, forcing every box element onto its own row line */
        .booking-grid-premium > div,
        .passenger-details-grid-premium > div,
        .booking-grid-premium > div:nth-child(1),
        .booking-grid-premium > div:nth-child(2),
        .booking-grid-premium > div:nth-child(4) {
            grid-column: span 1 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Compact sizing parameters optimized for finger selections */
        .premium-input-block {
            width: 100% !important;
            min-height: 54px !important;
            height: auto !important;
            padding: 6px 12px !important;
        }

        .premium-input-block label {
            font-size: 9px !important;
            margin-bottom: 2px !important;
        }

        .premium-input-block input[type="text"],
        .premium-input-block .custom-dropdown-trigger,
        .premium-input-block .clean-date-input {
            font-size: 13.5px !important;
            height: 22px !important;
            line-height: 22px !important;
        }
        
        .bta-section-title-wrapper h3 {
            font-size: 19px !important; /* Scales down outer headings on small screen viewports */
        }
    }
}


/* ==========================================================================
   📱 DYNAMIC CARD GRIDS BREAKPOINT MATRIX (FOR PACKAGES & SERVICES)
   ========================================================================== */

/* --- GLOBAL HARD HARDENING FOR ROW HEIGHT ALIGNMENT --- */
/* Forces all cards to act as vertical flex containers so they match heights naturally */
.bta-destination-card,
.bta-service-matrix-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Stretches sibling cards to match the tallest in the row */
}

.bta-card-body-details,
.bta-service-matrix-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important; /* Pushes action items or text baselines flush to the bottom */
}

/* ==========================================================================
   🚨 BREAKPOINT A: MID-RANGE VIEWPORTS (TABLETS / IPADS / COMPACT LAPTOPS)
   ========================================================================== */
@media (max-width: 1120px) {
    /* 1. Popular Routes Section: Drop from 3 columns down to a balanced 2-column matrix */
    .bta-packages-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    /* 2. Core Travel Services Section: Drop from 4 columns down to a clean 2x2 grid */
    .bta-services-matrix-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .bta-card-image-slot {
        height: 200px !important; /* Streamlines visual image heights on medium screens */
    }

    .bta-service-matrix-image {
        height: 180px !important;
    }
}

/* ==========================================================================
   📱 BREAKPOINT B: ULTRA-COMPACT SMARTPHONES (TOUCH DEVICES)
   ========================================================================== */
@media (max-width: 640px) {
    /* Tighten section content container side paddings for small screen edges */
    .bta-commercial-section,
    .bta-services-section-wrapper {
        width: 100% !important;
        padding: 0 16px !important;
        margin: 50px auto !important; /* Drops excessive space gaps */
    }

    .bta-section-title-wrapper {
        margin-bottom: 24px !important;
        padding-left: 12px !important;
    }

    .bta-section-title-wrapper h3 {
        font-size: 20px !important; /* Prevents long section titles from wrapping awkwardly */
    }

    /* 3. 🔥 THE MOBILE CURE: Overrides all fractional grids, collapsing 
          both sections into an organic, clean single-column vertical stack */
    .bta-packages-grid,
    .bta-services-matrix-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* 4. Restore rich presentation aspect-ratios for compact phone viewports */
    .bta-card-image-slot {
        height: 220px !important;
    }

    .bta-service-matrix-image {
        height: 190px !important;
    }

    .bta-card-body-details,
    .bta-service-matrix-body {
        padding: 16px !important; /* Saves precious interior wall real estate */
    }

    .bta-card-body-details h4,
    .bta-service-matrix-body h4 {
        font-size: 15px !important; /* Highly scannable micro-headers for mobile phones */
        margin-bottom: 4px !important;
    }

    .bta-card-body-details p,
    .bta-service-matrix-body p {
        font-size: 13px !important; /* Light text weight prevents line squeezing */
        line-height: 1.45 !important;
    }
}

/* ==========================================================================
   📰 DYNAMIC RESPONSIVE BREAKPOINT MATRIX FOR LATEST TRAVEL INSIGHTS
   ========================================================================== */

/* --- GLOBAL HEGHT LINE STRETCH ALIGNMENT --- */
.bta-blog-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Fixed widescreen default layout */
    gap: 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bta-blog-post-card {
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    
    /* 🔥 THE HEIGHT MATCHING FIX: Converts card into a full vertical flex container */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Stretches sibling cards in the row to match identically */
    overflow: hidden;
    box-sizing: border-box !important;
}

.bta-blog-image-slot {
    width: 100% !important;
    height: 200px !important; /* Fixed presentation height for lookups */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.bta-blog-body-details {
    padding: 24px 20px !important;
    text-align: left !important;
    
    /* 🔥 THE INTERIOR FILL FIX: Fills up card bounds naturally */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important; 
    box-sizing: border-box !important;
}

.bta-blog-body-details h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

/* 🔥 THE SQUEEZING FIX: Restricts paragraph copy lines to stop narrow stretching */
.bta-blog-body-details p {
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    
    /* Cross-browser multi-line truncation clamp */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Cuts text nicely at 3 lines with an ellipsis */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.bta-blog-read-more-link {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    
    /* 🔥 THE BUTTON ALIGNMENT FIX: Pushes link straight down to the card floor line */
    margin-top: auto !important; 
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   🚨 BREAKPOINT A: TABLETS & IPADS (max-width: 1120px)
   ========================================================================== */
@media (max-width: 1120px) {
    .bta-blog-posts-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Drops cleanly to a symmetric 2x2 grid matrix */
        gap: 20px !important;
    }
}

/* ==========================================================================
   📱 BREAKPOINT B: ULTRA-COMPACT MOBILE SMARTPHONES (max-width: 640px)
   ========================================================================== */
@media (max-width: 640px) {
    .bta-blog-section-wrapper {
        width: 100% !important;
        padding: 0 16px !important;
        margin: 50px auto !important;
    }

    .bta-blog-posts-grid {
        grid-template-columns: 1fr !important; /* 🔥 THE MOBILE CURE: Collapses cards into a single stacked column line */
        gap: 16px !important;
    }

    .bta-blog-image-slot {
        height: 220px !important; /* Enhances image presence on handheld touch screen fields */
    }

    .bta-blog-body-details {
        padding: 16px !important;
    }
}






/* ==========================================================================
   🏛️ BTA STANDALONE CORPORATE ABOUT PAGE DESIGN INFRASTRUCTURE
   ========================================================================== */

/* --- 1. Cinematic Header Banner Section --- */
.bta-about-hero-banner {
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 100px 0 !important;
    text-align: center;
    box-sizing: border-box !important;
}

.bta-about-hero-inner {
    width: 90% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

.bta-about-breadcrumb-tag {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #00bcd4 !important; /* Signature travel cyan highlight accent */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 12px !important;
}

.bta-about-hero-inner h2 {
    color: #ffffff !important;
    font-size: 2.8rem !important;
    font-weight: 900 !important;
    margin: 0 0 10px 0 !important;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.bta-about-hero-inner p {
    color: #cbd5e1 !important;
    font-size: 16px !important;
    font-weight: 500;
    margin: 0 !important;
}

/* --- 2. Main Symmetrical Widescreen Content Split Container --- */
.bta-about-split-matrix-layout {
    width: 90% !important; /* 🔥 Symmetrically locks onto your global 80%+ widescreen grid width */
    max-width: 1600px !important; 
    margin: 80px auto !important;
    display: grid !important;
    grid-template-columns: 45fr 55fr !important; /* 45% image space vs 55% rich content area */
    gap: 60px !important; /* Wide, premium breathing cushion between columns */
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

/* Left Media Frame Graphic Block */
.bta-about-visual-media-block {
    width: 100% !important;
    height: 480px !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06) !important;
}

.bta-about-visual-media-block img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Right Rich Content Card Area Block */
.bta-about-rich-text-card {
    text-align: left !important;
    box-sizing: border-box !important;
}

.bta-about-rich-text-card h3 {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #0f172a !important; /* Deep obsidian projects layout authority */
    line-height: 1.25 !important;
    margin: 0 0 24px 0 !important;
    letter-spacing: -0.5px;
}

/* --- 3. Full-Width Data Extraction Formatting Support Rules --- */
/* 🔥 THE FIX: Drops all restrictive text line clamps completely on your standalone about page 
      so your database descriptions and native tables can render at full length safely! */
.bta-about-unescaped-db-body-html,
.bta-about-unescaped-db-body-html p {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: #475569 !important; /* Clean slate-gray paragraph text copy */
    margin-bottom: 18px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* Native data table layout formatting rules inside the about subpage track */
.bta-about-unescaped-db-body-html table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.bta-about-unescaped-db-body-html th {
    background: #f8fafc !important;
    color: #0369a1 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 14px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-transform: uppercase;
}

.bta-about-unescaped-db-body-html td {
    font-size: 14px !important;
    color: #475569 !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.bta-about-unescaped-db-body-html tr:nth-child(even) {
    background: #f8fafc !important;
}

/* --- 4. Return Home CTA Anchor Button Profile --- */
.bta-about-return-home-btn {
    display: inline-flex !important;
    align-items: center !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 32px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
    transition: all 0.2s ease !important;
}

.bta-about-return-home-btn:hover {
    background: #00bcd4 !important; /* Changes to cyan travel highlight on hover focus */
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.35) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   📱 STANDALONE PAGE ADAPTIVE MOBILE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    .bta-about-split-matrix-layout {
        grid-template-columns: 1fr !important; /* Collapses neatly into a 1-column stacked row layout on tablets */
        gap: 40px !important;
        margin: 50px auto !important;
    }

    .bta-about-visual-media-block {
        height: 340px !important;
    }
}


/* Append directly to the absolute bottom of public/css/app.css */

/* ==========================================================================
   🧱 CORE ABOUT PAGE EXPANSION DESIGN STYLES MATRIX
   ========================================================================== */

/* --- Common Section Titles Styling --- */
.bta-about-section-title {
    text-align: center !important;
    margin-bottom: 45px !important;
}

.bta-about-section-title h3 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 8px !important;
}

.bta-about-section-title p {
    font-size: 14.5px !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* --- 1. Pillars Layout Grid Infrastructure --- */
.bta-about-pillars-wrapper {
    width: 90% !important; /* Locks width symmetrically with your global profile */
    max-width: 1600px !important;
    margin: 120px auto !important;
    box-sizing: border-box !important;
}

.bta-about-pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 balanced columns */
    gap: 28px !important;
}

.bta-pillar-tile-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 36px 24px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box !important;
}

.bta-pillar-tile-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
}

.bta-pillar-vector-icon {
    font-size: 36px !important;
    margin-bottom: 16px !important;
    line-height: 1;
}

.bta-pillar-tile-card h5 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0369a1 !important; /* High contrast ocean blue matches theme */
    margin-bottom: 10px !important;
}

.bta-pillar-tile-card p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* --- 2. Interactive FAQs Accordion System --- */
.bta-about-faqs-wrapper {
    width: 90% !important;
    max-width: 1000px !important; /* Constrains line bounds for comfortable central reading spans */
    margin: 120px auto !important;
    box-sizing: border-box !important;
}

.bta-faq-accordion-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.bta-faq-accordion-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease;
}

.bta-faq-accordion-trigger {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 18px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    text-align: left !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    outline: none !important;
}

.bta-faq-accordion-icon {
    font-size: 18px !important;
    font-weight: bold;
    color: #00bcd4;
    transition: transform 0.2s ease;
}

.bta-faq-accordion-content {
    max-height: 0 !important; /* Collapsed state container tracking */
    overflow: hidden !important;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.bta-faq-accordion-content p {
    padding: 0 24px 20px 24px !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* --- Active Toggle Class Triggers via Micro JS Actions --- */
.bta-faq-accordion-item.bta-faq-open-active {
    border-color: #00bcd4 !important; /* Highlight border line on expand */
}

.bta-faq-accordion-item.bta-faq-open-active .bta-faq-accordion-icon {
    transform: rotate(45deg) !important; /* Converts plus into a close icon asset */
}

.bta-faq-accordion-item.bta-faq-open-active .bta-faq-accordion-content {
    max-height: 200px !important; /* Expand threshold boundaries safely */
}

/* ==========================================================================
   📱 EXPANDED SECTIONS MOBILE BREAKPOINTS SAFARDS
   ========================================================================== */
@media (max-width: 960px) {
    .bta-about-pillars-grid {
        grid-template-columns: 1fr !important; /* Collapses neatly into single column lines on tablets */
        gap: 16px !important;
    }
}

/* Append directly to the absolute bottom of public/css/app.css */

/* ==========================================================================
   📊 ABOUT PAGE BRAND TRUST EXPANSION SYSTEM STYLES MATRIX
   ========================================================================== */

/* --- 1. Corporate Statistics Strip Banner --- */
.bta-about-stats-strip-banner {
    width: 100% !important;
    background: #0f172a !important; /* Deep slate obsidian matches your system accents */
    padding: 60px 0 !important;
    margin: 100px 0 !important;
    box-sizing: border-box !important;
}

.bta-about-stats-inner-matrix {
    width: 90% !important; /* Symmetrically locks onto your global 80%+ widescreen grid width */
    max-width: 1600px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 uniform numeric fields */
    gap: 30px;
    box-sizing: border-box;
}

.bta-stat-metric-node {
    text-align: center !important;
}

.bta-stat-metric-node h4 {
    color: #00bcd4 !important; /* Signature travel cyan accent text color pops instantly */
    font-size: 34px !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.5px;
}

.bta-stat-metric-node p {
    color: #94a3b8 !important; /* High contrast gray slate line */
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 !important;
}

/* --- 2. Airline Partners Marquee Track --- */
.bta-about-partners-wrapper {
    width: 90% !important;
    max-width: 1600px !important;
    margin: 120px auto !important;
    box-sizing: border-box !important;
}



.bta-carrier-logo-card {
    background: #ffffff !important;
    border: 1px dashed #cbd5e1 !important; /* Elegant dashed layout track mimics ticket borders */
    border-radius: 8px !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    box-sizing: border-box !important;
    user-select: none;
    transition: all 0.2s ease;
}

.bta-carrier-logo-card:hover {
    border-color: #00bcd4 !important;
    background: #f8fafc !important;
    color: #0369a1 !important;
}

.bta-carrier-avatar-wing {
    font-size: 22px !important;
    line-height: 1;
}

/* ==========================================================================
   📱 TRUST SECTIONS MOBILE Breakpoints SAFARDS
   ========================================================================== */
@media (max-width: 960px) {
    .bta-about-stats-inner-matrix {
        grid-template-columns: repeat(2, 1fr) !important; /* Drops to a clean 2x2 grid on tablets */
        gap: 35px 20px;
    }
    
    .bta-partners-logos-marquee-track {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 520px) {
    .bta-about-stats-inner-matrix,
    .bta-partners-logos-marquee-track {
        grid-template-columns: 1fr !important; /* Collapses neatly into single column lines on smartphones */
        gap: 24px !important;
    }
}


/* Append directly to the absolute bottom of public/css/app.css */

/* ==========================================================================
   👥 BTA GLOBAL PORTAL EXECUTIVE TEAM INFRASTRUCTURE STYLES
   ========================================================================== */
   .bta-about-team-wrapper {
    width: 90% !important; /* Symmetrically locks onto your global widescreen grid width */
    max-width: 1600px !important;
    margin: 120px auto !important;
    box-sizing: border-box !important;
}

/* 3-Column True Symmetrical Profile Row Track */
.bta-about-team-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Locks all 3 executives side-by-side */
    gap: 32px !important; /* Wide, clean breathing space between cards */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Minimalist Profile Card Container */
.bta-team-profile-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    padding: 32px 24px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important; /* Forces cards to stay identical in height */
    box-sizing: border-box !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bta-team-profile-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.06) !important;
}

/* Fixed Circle Avatar Photo Frame */




/* Text Context Details */
.bta-team-profile-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100%;
}

.bta-team-profile-body h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Deep obsidian titles */
    margin: 0 0 4px 0 !important;
}

.bta-team-profile-body span {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #00bcd4 !important; /* Signature travel cyan role label */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px !important;
    display: block;
}

.bta-team-profile-body p {
    font-size: 13.5px !important;
    color: #475569 !important; /* High contrast dark gray slate paragraph text copy */
    line-height: 1.6 !important;
    margin: 0 !important;
    
    /* Clamps description text to 3 lines cleanly to protect layout row grids */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden;
}

/* ==========================================================================
   📱 EXECUTIVE TEAM ADAPTIVE MOBILE BREAKPOINTS
   ========================================================================== */
@media (max-width: 990px) {
    .bta-about-team-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Drops cleanly to 2 columns on tablets */
        gap: 24px !important;
    }
}

@media (max-width: 640px) {
    .bta-about-team-grid {
        grid-template-columns: 1fr !important; /* Collapses completely into a single vertical stack on smartphones */
        gap: 16px !important;
    }
    .bta-team-profile-card {
        padding: 24px 16px !important;
    }
}


/* Append directly to the bottom of public/css/app.css */

/* --- 🏛️ TEAM DEPARTMENTS MATRIX CONTROLLER TRACKS --- */
.bta-team-filter-tab-bar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 40px !important;
    flex-wrap: wrap !important; /* Gracefully breaks into a second line on smartphone devices */
}

.bta-tab-btn {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    padding: 10px 24px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 30px !important; /* Curved pill-box container paths */
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
}

.bta-tab-btn:hover,
.bta-tab-btn.active-tab-state {
    background: #002d62 !important; /* Highlights to corporate navy slate gray */
    color: #ffffff !important;
    border-color: #002d62 !important;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.15) !important;
}

/* --- THE MULTI-LINE CARD REARRANGE CURE --- */
.bta-about-team-grid {
    display: grid !important;
    /* 🔥 THE WIDESCREEN FIX: Locks items into a neat, 4-column row layout instead of 3.
       This handles large staff rosters beautifully by forming a neat 4x5 block layout matrix. */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Smooth hidden/visible filter animation transitions */
.bta-team-profile-card {
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.2s ease !important;
    opacity: 1;
    display: flex !important;
}

.bta-team-profile-card.card-filtered-out-hidden {
    display: none !important; /* Drops excluded elements cleanly from view coordinates */
    opacity: 0 !important;
    transform: scale(0.95);
}


/* Update/Replace these exact selector blocks inside your public/css/app.css file */

/* --- 🏛️ HIGH-VISIBILITY STAFF AVATAR CIRCLING ENGINE --- */
.bta-team-avatar-frame {
    width: 140px !important;  /* Slightly increased frame width gives the photo more visual presence */
    height: 140px !important; /* Locks structural aspect ratio matching perfectly */
    border-radius: 50% !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    
    /* 🔥 THE VISIBILITY FIX: 
       By replacing the plain grey border with a thick, high-contrast travel cyan ring 
       and a white border gap, the photo instantly separates cleanly from your white card walls! */
    border: 3px solid #00bcd4 !important; 
    outline: 4px solid #ffffff !important; /* Pure white interior separation cushion line */
    outline-offset: -7px !important;       /* Insets the white outline cleanly inside the cyan band */
    
    /* 🛡️ DEFENSIVE ACCENT BACKDROP: 
       Fills out the empty canvas space with a premium neutral tone if an image loads slowly */
    background-color: #f8fafc !important; 
    
    /* Dual-layer deep micro drop shadow anchors portrait lighting cleanly */
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 
                0 8px 16px -6px rgba(0, 188, 212, 0.2) !important;
                
    flex-shrink: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Crisp image canvas rendering boundaries */
.bta-team-avatar-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Centers and crops your employee portrait files proportionately */
    transition: transform 0.3s ease !important;
}

/* Interactive zoom hover feedback interaction tracking */
.bta-team-profile-card:hover .bta-team-avatar-frame {
    transform: scale(1.04) !important; /* Card hover gently expands the outer frame ring */
    border-color: #002d62 !important;  /* Shifts softly to corporate navy on focus selection */
}

.bta-team-profile-card:hover .bta-team-avatar-frame img {
    transform: scale(1.06) !important; /* Micro-zoom inside the portrait window container */
}


@media (max-width: 1200px) {
    .bta-about-team-grid { grid-template-columns: repeat(3, 1fr) !important; } /* Sits as a 3-column row on small monitors */
}
@media (max-width: 900px) {
    .bta-about-team-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Drops to pairs on tablets */
}
@media (max-width: 580px) {
    .bta-about-team-grid { grid-template-columns: 1fr !important; } /* Flat single cascade track stack on phones */
}

/* Replace this exact selector block inside your public/css/app.css asset file */

/* --- 🏛️ EXECUTIVE-SCALE PORTRAIT CIRCLE FRAME --- */
.bta-team-avatar-frame {
    /* 🔥 THE SCALE FIX: Broadens circle bounds from 140px up to a premium 170px size profile */
    width: 170px !important;  
    height: 170px !important; 
    border-radius: 50% !important;
    overflow: hidden !important;
    margin-bottom: 26px !important; /* Increased spacing cushion matches the new card weights */
    
    /* 🔥 DEEPER HIGH-CONTRAST CONTOURING: 
       We thickened the outer signature travel cyan ring to 4px and expanded 
       the internal offset to capture more light, making your photos look highly professional. */
    border: 4px solid #00bcd4 !important; 
    outline: 5px solid #ffffff !important; /* Thick pure white interior separation ring */
    outline-offset: -9px !important;       /* Cleanly insets the spacing cushion inside the cyan ring */
    
    background-color: #f8fafc !important; 
    
    /* Dual-layer deep micro drop shadow anchors portrait lighting cleanly */
    box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.15), 
                0 10px 20px -6px rgba(0, 188, 212, 0.25) !important;
                
    flex-shrink: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Crisp image canvas rendering boundaries */
.bta-team-avatar-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Centers and crops your employee portrait files proportionately */
    transition: transform 0.3s ease !important;
}

/* Dynamic Interactive Hover Zoom Tracks */
.bta-team-profile-card:hover .bta-team-avatar-frame {
    transform: scale(1.05) !important; /* Card hover gently expands the outer frame ring */
    border-color: #002d62 !important;  /* Shifts softly to corporate navy on focus selection */
}

.bta-team-profile-card:hover .bta-team-avatar-frame img {
    transform: scale(1.08) !important; /* Clean micro-zoom tracking pop inside the photo frame */
}
/* ==========================================================================
   🎠 PREMIUM MULTI-CARD AIRLINE PARTNERS CAROUSEL INFRASTRUCTURE
   ========================================================================== */
   .bta-about-partners-wrapper {
    width: 90% !important; /* Fits symmetrically within your global widescreen profile */
    max-width: 1600px !important;
    margin: 100px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box;
    position: relative;
}

/* Master viewport stage shell that clips overflowing inline nodes */
.bta-carousel-viewport-shell {
    width: 100% !important;
    overflow: hidden !important;
    position: relative;
    padding: 10px 0 !important;
}

/* 🔥 THE CAROUSEL RIBBON TRACK: Arranges all 50 items into a single row */
.bta-partners-logos-marquee-track {
    display: flex !important;
    flex-direction: row !important;
    width: max-content !important; /* Prevents wrapping cards onto new lines */
    gap: 20px !important;
    box-sizing: border-box !important;
    
    /* Hardware accelerated sliding transition curves */
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
}

/* Unified, streamlined partner carrier card profile block */
.bta-carrier-logo-card {
    flex-shrink: 0 !important; /* 🔥 CRUCIAL: Blocks the browser from squeezing card widths */
    
    /* Dynamic width calculation formula: 
       Fits exactly 5 cards side-by-side inside the 100% container parent width, 
       minus the gap spacings, ensuring perfect widescreen alignment! */
    width: calc((100vw * 0.9 - 40px - 80px) / 5) !important;
    max-width: 290px !important; /* Absolute ceiling limit cap */
    height: 76px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02) !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease;
}

.bta-carrier-logo-card:hover {
    border-color: #00bcd4 !important; /* Glows travel cyan on hover */
    color: #0369a1 !important;
    box-shadow: 0 10px 25px rgba(0, 188, 212, 0.06) !important;
    transform: translateY(-2px);
}

/* --- NAVIGATION BUTTON CONTROL LAYOUT NODES --- */
.bta-carousel-nav-trigger-btn {
    position: absolute !important;
    top: calc(50% + 20px) !important;
    transform: translateY(-50%) !important;
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: bold;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.2s ease;
    outline: none !important;
}

.bta-carousel-nav-trigger-btn:hover {
    background: #002d62 !important; /* Corporate navy focus highlight */
    color: #ffffff !important;
    border-color: #002d62 !important;
    box-shadow: 0 6px 16px rgba(0, 45, 98, 0.2) !important;
}

.bta-carousel-nav-trigger-btn.prev-slide-btn { left: -10px !important; }
.bta-carousel-nav-trigger-btn.next-slide-btn { right: -10px !important; }

/* ==========================================================================
   📱 CAROUSEL RESPONSIVE MOBILE VIEWPORTS BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    /* Fits 3 cards at a time on small laptops or iPads */
    .bta-carrier-logo-card {
        width: calc((100vw * 0.9 - 40px - 40px) / 3) !important;
    }
}

@media (max-width: 600px) {
    /* Drops to exactly 2 cards side-by-side on mobile smartphones to fit small screens */
    .bta-carrier-logo-card {
        width: calc((100vw - 32px - 20px) / 2) !important;
    }
    .bta-carousel-nav-trigger-btn { display: none !important; } /* Uses fluid touch finger swiping instead */
    .bta-carousel-viewport-shell { overflow-x: auto !important; } /* Native momentum scroll backup */
}
/* Append or verify these precise styling indicators inside public/css/app.css */

.bta-nav-item-link {
    color: #cbd5e1 !important; /* Premium soft gray limits screen glare */
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 14.5px !important;
    padding: 8px 0 !important;
    position: relative !important;
    transition: color 0.15s ease !important;
}

.bta-nav-item-link:hover {
    color: #00bcd4 !important; /* Glows travel cyan accent on mouse focus hover */
}

/* 🔥 THE ACTIVE INDICATOR OVERRIDE:
   Locks the current page link text to high-contrast white and projects 
   a sharp travel cyan underline badge directly matching your portal look */
.bta-nav-item-link.nav-active-link {
    color: #ffffff !important; /* Active text switches to solid white text */
}

.bta-nav-item-link.nav-active-link::after {
    content: "" !important;
    position: absolute !important;
    bottom: -4px !important; left: 0 !important;
    width: 100% !important; /* Spans the full length of the menu text characters */
    height: 3px !important; /* Micro indicator bar weight */
    background: #00bcd4 !important; /* Travel Cyan highlight color */
    border-radius: 4px !important;
}

/* ==========================================================================
   🍔 BTA MOBILE-ONLY HAMBURGER FLYOUT MENU ALIGNMENT PATCH
   ========================================================================== */

/* 🔥 TRIGGERS ONLY ON VIEWPORTS UNDER 992PX (MOBILE & TABLET VIEWPORTS) */
@media (max-width: 992px) {
    
    /* Target the container element that wraps around your mobile text links */
    .mobile-nav-container,
    .mobile-menu-links,
    nav[class*="mobile"],
    div[class*="menu-inner"],
    ul[class*="nav"] {
        /* 🔥 THE STACK ENGINE: Restructure links vertically instead of horizontally */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Left-aligns navigation items */
        justify-content: flex-start !important;
        
        /* 🔥 Pushes navigation options away from the bottom and up into the center zone */
        padding-top: 80px !important; 
        padding-left: 32px !important;
        padding-right: 32px !important;
        gap: 24px !important; /* Creates a clean, tap-friendly vertical gap between link titles */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Target the link tags themselves inside the drawer */
    .mobile-nav-container a,
    .mobile-menu-links a,
    nav[class*="mobile"] a,
    div[class*="menu-inner"] a {
        display: block !important;
        width: 100% !important;
        color: #ffffff !important; /* Crisp contrast font coloring matching the dark canvas sheet */
        font-size: 18px !important; /* Premium prominent mobile typographic scale reading weight */
        font-weight: 700 !important;
        text-decoration: none !important;
        padding: 8px 0 !important; /* Extends hidden touch targeting sizes across display boundaries */
        text-align: left !important;
        margin: 0 !important; /* Clears destructive desktop tracking overrides */
    }

    /* Fixes active state cyan lines if present on elements */
    .mobile-nav-container a::after,
    div[class*="menu-inner"] a::after {
        display: none !important; /* Hides horizontal desk accent bars that break the stack layout */
    }

    /* Hover style helper to make the mobile touch action feel active */
    .mobile-nav-container a:hover,
    div[class*="menu-inner"] a:hover {
        color: #00bcd4 !important; /* BTA signature travel cyan highlight accent transformation */
    }
}
/* ==========================================================================
   🚨 MOBILE DRAWER OVERLAY ELEVATION PATCH (PLACE AT VERY BOTTOM)
   ========================================================================== */

   @media (max-width: 992px) {
    
    /* Target the primary slide-out drawer wrapper element */
    .mobile-nav-wrapper,
    div[class*="mobile-menu"],
    div[class*="nav-drawer"],
    div[class*="sidebar-menu"] {
        /* 🔥 THE FULL-SCREEN FIX: Lifts menu out of the page flow entirely */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important; /* or right: 0; depending on which side your drawer slides from */
        width: 100vw !important; /* Forces the drawer to fill the entire mobile width profile */
        height: 100vh !important; /* Enforces absolute full vertical display containment */
        
        /* 🔥 THE STACKING FORCE: Pushes the navigation menu over body text graphics */
        z-index: 99999 !important; 
        
        /* Deep signature dark slate blue to match your BTA corporate identity palette */
        background: #0f172a !important; 
        display: block !important;
        box-sizing: border-box !important;
        overflow-y: auto !important; /* Allows long menu arrays to scroll cleanly inside itself */
    }

    /* Target the menu list container inside the drawer to ensure it has enough vertical space */
    .mobile-nav-container,
    div[class*="menu-inner"] {
        padding-top: 100px !important; /* Lowers your text links below your top close button icon */
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
    }
}

/* ==========================================================================
   📊 BTA INJECTED FEATURES MATRIX INTEGRATION
   ========================================================================== */

/* Target the actual container block where valueTarget points (e.g., #valueTarget or .valueTarget) */
#valueTarget,
.valueTarget,
div[id*="valueTarget"] {
    width: 100% !important;
    background: #f8fafc !important; /* Subtle off-white contrast zone backdrop */
    padding: 80px 0 !important; /* Forces uniform breathing room cushions */
    border-top: 1px solid #edf2f7 !important;
    border-bottom: 1px solid #edf2f7 !important;
    box-sizing: border-box !important;
}

/* --- Dynamic Editorial Centered Header --- */
.bta-value-section-header {
    text-align: center !important;
    margin-bottom: 50px !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.bta-value-sub-tag {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #00bcd4 !important; /* Signature BTA Travel Cyan */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 10px !important;
}

.bta-value-section-header h3 {
    color: #0f172a !important; /* Corporate deep slate */
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
}

.bta-value-section-header p {
    color: #64748b !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* --- Unified Symmetric Cards Grid System --- */
.bta-value-features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Standard uniform three column grid */
    gap: 32px !important;
    width: 90% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* --- High-Legibility Card Component Customization --- */
.bta-value-feature-node {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 40px 30px !important;
    border: 1px solid #e2e8f0 !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.01) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    box-sizing: border-box !important;
}

.bta-value-feature-node:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04) !important;
}

.bta-feature-vector-icon {
    font-size: 32px !important;
    margin-bottom: 16px !important;
}

.bta-value-feature-node h5 {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
}

.bta-value-feature-node p {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* --- 📱 Small Screens Mobile Breakout System --- */
@media (max-width: 992px) {
    .bta-value-features-grid {
        grid-template-columns: 1fr !important; /* Stacks layout elements cleanly */
        gap: 24px !important;
    }
    .bta-value-section-header h3 {
        font-size: 1.8rem !important;
    }
}
/* ==========================================================================
   📊 BTA INJECTED FEATURES LAYOUT CORRECTION MATRIX
   ========================================================================== */

/* Target the wrapper that holds the header and the cards grid */
#valueTarget,
.valueTarget,
div[id*="valueTarget"] {
    display: flex !important;
    flex-direction: column !important; /* 🔥 FORCE STACKING: Forces header on top, cards on bottom */
    width: 100% !important;
    background: #ffffff !important; 
    padding: 80px 0 !important;
    box-sizing: border-box !important;
}

/* --- Centered Section Header Structure --- */
.bta-value-section-header {
    text-align: center !important; /* Centers headings completely across the screen width bounds */
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto 50px auto !important; /* 50px bottom spacing pushes the cards grid row down cleanly */
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* --- 🔥 THE SYMMETRIC GRID FIX: Forces cards to take up full layout width --- */
.bta-value-features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Clean three-column matrix balance layout */
    gap: 30px !important; /* Generous horizontal and vertical breathing room between cards */
    width: 90% !important;
    max-width: 1200px !important; /* Perfect standard widescreen container constraints */
    margin: 0 auto !important; /* Centers the 3-card block on the page */
    box-sizing: border-box !important;
}

/* --- High-Legibility Card Adjustments --- */
.bta-value-feature-node {
    background: #ffffff !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 12px !important;
    padding: 40px 24px !important; /* Premium inner padding space cushion */
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02) !important;
    box-sizing: border-box !important;
    width: 100% !important; /* Allows each card to fill 100% of its designated grid slot width */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Make sure text fields stretch correctly inside your cards */
.bta-value-feature-node h5 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 12px 0 !important;
    white-space: normal !important; /* Prevents text from being cut off or forced into one line */
}

.bta-value-feature-node p {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* --- 📱 Small Screens Mobile Breakout System --- */
@media (max-width: 768px) {
    .bta-value-features-grid {
        grid-template-columns: 1fr !important; /* Stacks all three cards into a clean vertical row on mobile */
        gap: 20px !important;
    }
}


/* 📥 Shrink the main input blocks dramatically */
.premium-booking-card .premium-input-block {
    padding: 4px 10px !important;    /* Tightly reduces inside top/bottom spacing */
    min-height: unset !important;    /* Erases any large artificial tracking heights */
    margin-bottom: 0 !important;      /* Hands spacing control fully over to the grid layout gap */
}

/* 🏷️ Reduce header text label scale */
.premium-booking-card .premium-input-block label {
    font-size: 9px !important;       /* Micro micro clean metadata styling headers */
    margin-bottom: 0px !important;    /* Pulls actual typing field tightly closer up */
    line-height: 1.2 !important;
}

/* ✍️ Make the typing inputs and placeholders highly compact */
.premium-booking-card .premium-input-block input {
    font-size: 13px !important;      /* Drops font down slightly for tight layout fit */
    padding: 1px 0 2px 0 !important; /* Minimal baseline padding footprint cushion */
    height: 20px !important;         /* Hard-caps field track heights perfectly */
    line-height: 20px !important;
}

/* 👥 Adjust the custom dropdown trigger container */
.premium-booking-card .custom-dropdown-trigger {
    font-size: 13px !important;
    padding: 1px 0 2px 0 !important;
    min-height: unset !important;
    height: 20px !important;
    line-height: 20px !important;
}

/* ⇄ Tweak your absolute route swapper icon node */
#trigger-swap {
    width: 22px !important;          /* Scales down swap circle boundary */
    height: 22px !important;
    line-height: 20px !important;
    font-size: 12px !important;
    right: 12px !important;          /* Perfectly recalibrates tracking alignment */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* 📅 Tighten custom calendar inline icon wrappers */
.premium-booking-card .bta-vector-calendar-icon {
    width: 14px !important;          /* Keeps inline SVGs small and unobtrusive */
    height: 14px !important;
}
/* 🌊 Transparent Gradient for the Booking Container Base */
.premium-booking-card {
    /* Uses 15% opacity (0.15) for both the top cyan and bottom green tones */
    background: linear-gradient(180deg, rgba(31, 163, 179, 0.15) 0%, rgba(107, 193, 156, 0.15) 100%) !important;
    
    /* Optional: Smooth out background blurring behind the form if overlaying an image */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* Clean light transparent outline border to define the shape */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 🏷️ Ensure Headings Stay Crisp and Readable on Transparent Backgrounds */
.premium-booking-card .form-section-heading {
    color: #ffffff !important; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}






/* Update or append these exact target selectors to the bottom of public/css/app.css */

/* Target the auto-generated wrapper layer from Laravel's links engine */
.bta-editorial-pagination-wrapper nav {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Hardens semantic structures inside the layout framework */
.bta-editorial-pagination-wrapper svg {
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    vertical-align: middle;
}

.bta-editorial-pagination-wrapper .flex.justify-between,
.bta-editorial-pagination-wrapper div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Soft grey navigation numbers match your premium theme styles */
.bta-editorial-pagination-wrapper span,
.bta-editorial-pagination-wrapper a {
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.bta-editorial-pagination-wrapper a:hover {
    border-color: #00bcd4 !important;
    color: #00bcd4 !important;
}

/* Matches active selected page circle highlight rules perfectly */
.bta-editorial-pagination-wrapper span[aria-current="page"],
.bta-editorial-pagination-wrapper .bg-blue-600 {
    background: #002d62 !important; /* Corporate Midnight Navy */
    color: #ffffff !important;
    border-color: #002d62 !important;
    box-shadow: 0 4px 10px rgba(0, 45, 98, 0.15) !important;
}


/* Replace your old pagination rules with this precise architecture inside public/css/app.css */

/* --- 📊 UNIFIED CENTERED PAGINATION RE-RESTYLER --- */
.bta-editorial-pagination-wrapper {
    width: 90% !important;
    max-width: 1600px !important;
    margin: 60px auto 100px auto !important;
    display: flex !important;
    justify-content: center !important; /* Centers the navigation links on the screen */
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Target Laravel's auto-generated standard list menu rows */
.bta-editorial-pagination-wrapper ul.pagination {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important; /* Balanced breathing space cushion between button nodes */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Individual list item nodes protection */
.bta-editorial-pagination-wrapper ul.pagination li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Master Pagination Button Element Properties */
.bta-editorial-pagination-wrapper ul.pagination li a,
.bta-editorial-pagination-wrapper ul.pagination li span {
    padding: 10px 16px !important; /* Balanced box boundaries create a clean block */
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important; /* Slate gray typography copy */
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

/* Hover mouse pointer interaction effects */
.bta-editorial-pagination-wrapper ul.pagination li a:hover {
    border-color: #00bcd4 !important;
    color: #00bcd4 !important; /* Glows travel cyan on hover */
    background: #f8fafc !important;
}

/* 🔥 THE ACTIVE ITEM CURE: High-contrast corporate navy selection indicator */
.bta-editorial-pagination-wrapper ul.pagination li.active span,
.bta-editorial-pagination-wrapper ul.pagination li.active .page-link {
    background: #002d62 !important; /* Corporate Midnight Navy */
    color: #ffffff !important;
    border-color: #002d62 !important;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.18) !important;
}

/* Disabled arrow navigation properties (e.g. initial page previous state controls) */
.bta-editorial-pagination-wrapper ul.pagination li.disabled span,
.bta-editorial-pagination-wrapper ul.pagination li.disabled .page-link {
    opacity: 0.5 !important;
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

/* Completely drops any un-styled loose metadata text labels generated by the engine */
.bta-editorial-pagination-wrapper .hidden,
.bta-editorial-pagination-wrapper p.text-sm {
    display: none !important;
}
/* ==========================================================================
   📊 BTA MOBILE-RESPONSIVE ADAPTIVE PAGINATION INFRASTRUCTURE
   ========================================================================== */

/* 1. Master Center Container Grid Balancing Tracks */
.bta-editorial-pagination-wrapper {
    width: 90% !important;
    max-width: 1600px !important;
    margin: 50px auto 80px auto !important;
    display: flex !important;
    justify-content: center !important; /* Centers the navigation links on the screen */
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Base horizontal distribution row track controls */
.bta-editorial-pagination-wrapper ul.pagination {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Prominent breathing cushions between text nodes */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important; /* 🔥 CRUCIAL: Blocks text blocks from ever collapsing down vertically */
}

/* Individual list item nodes protection criteria layout rules */
.bta-editorial-pagination-wrapper ul.pagination li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Master Button Sizing Element Properties Matrix */
.bta-editorial-pagination-wrapper ul.pagination li a,
.bta-editorial-pagination-wrapper ul.pagination li span {
    padding: 10px 16px !important; /* Symmetrical box boundaries create high-tactility hit zones */
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important; /* Slate gray typography copy */
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important; /* Blocks raw text wraps */
    transition: all 0.15s ease;
}

/* Hover mouse pointer effects matrix tracking */
.bta-editorial-pagination-wrapper ul.pagination li a:hover {
    border-color: #00bcd4 !important;
    color: #00bcd4 !important; /* Glows travel cyan on hover focus selection */
    background: #f8fafc !important;
}

/* Active index element item selection color highlights */
.bta-editorial-pagination-wrapper ul.pagination li.active span,
.bta-editorial-pagination-wrapper ul.pagination li.active .page-link {
    background: #002d62 !important; /* Corporate Midnight Navy matches your system accents */
    color: #ffffff !important;
    border-color: #002d62 !important;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.15) !important;
}

/* Disabled item state restriction profiles tracking */
.bta-editorial-pagination-wrapper ul.pagination li.disabled span,
.bta-editorial-pagination-wrapper ul.pagination li.disabled .page-link {
    opacity: 0.5 !important;
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   📱 ADAPTIVE SMARTPHONE MOBILE VIEWPORT FILTER ENGINE
   ========================================================================== */
@media (max-width: 600px) {
    /* 🔥 THE MOBILE CURE: 
       Hides the long sequence of numerical box layers on narrow screens, 
       preventing layout row breaking or horizontal overflowing. */
    .bta-editorial-pagination-wrapper ul.pagination li:not(.prev):not(.next):not(:first-child):not(:last-child) {
        display: none !important; 
    }
    
    /* Auto-expands the 'Previous' and 'Next' button actions into a clean, uniform touch bar */
    .bta-editorial-pagination-wrapper ul.pagination {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important; /* Pins buttons to opposite sides of the viewport */
        gap: 0 !important;
    }
    
    .bta-editorial-pagination-wrapper ul.pagination li {
        flex: 1 !important; /* Stretches nodes evenly across layout boundaries */
        max-width: 48%;
    }
    
    .bta-editorial-pagination-wrapper ul.pagination li a,
    .bta-editorial-pagination-wrapper ul.pagination li span {
        width: 100% !important;
        text-align: center;
        padding: 12px 14px !important; /* Height tracking optimization enhances touch controls */
    }
}

.bta-blog-read-more-link {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Premium high contrast obsidian anchor link */
    text-decoration: none !important;
    
    /* 🔥 THE BUTTON ALIGNMENT FIX: Pushes link straight down to the card floor line */
    margin-top: auto !important; 
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease !important;
}
.bta-blog-read-more-link:hover {
    color: #00bcd4 !important; /* Glows travel cyan on hover focus trigger triggers */
}
/* 5. THE DYNAMIC READ MORE CALL-TO-ACTION LINK */
.bta-blog-read-more-link {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* High contrast premium obsidian anchor link typography */
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* 🔥 THE BASELINE EMBED FIX: Locks the button securely straight onto the floor line of your rows */
    margin-top: auto !important; 
    padding-top: 12px !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease !important;
}
.bta-blog-read-more-link:hover {
    color: #00bcd4 !important; /* Glows travel cyan accent on mouse focus hover states */
}

/* --- 5. THE ACTION LAYOUT ACTION BUTTON ALIGNMENT --- */
.bta-blog-read-more-link {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* High contrast premium obsidian anchor links */
    text-decoration: none !important;
    
    /* 🔥 Pushes the action links straight down to stay permanently locked on the exact same row baseline */
    margin-top: auto !important; 
    padding-top: 12px !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease !important;
}

.bta-blog-read-more-link:hover {
    color: #00bcd4 !important; /* Glows travel cyan accent color on hover focus triggers */
}



/* 1. Truncates long paragraphs cleanly with an ellipsis (...) */
.bta-blog-text-content p {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 🛑 Forces text to cut off after exactly 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 2. Forces all cards in the row to be the exact same height */
.bta-blog-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 3. Pushes the "Read Full Post" links to lock perfectly at the bottom */
.bta-blog-body-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}