/* 
   Color Palette & Variables
*/
:root {
    --primary: #0f172a;
    --primary-light: #1e293b;
    --secondary: #0ea5e9;
    --accent: #f97316;
    --accent-hover: #ea580c;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --text-dark: #1e293b;
    --text-body: #475569;
    --text-inverse: #ffffff;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius-md: 0.5rem;
    --radius-lg: 1rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--bg-white);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--primary);
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section-padding {
    padding: 5rem 0;
}

.bg-light {
    background-color: var(--bg-light);
}

.bg-dark {
    background-color: var(--primary);
    color: var(--text-inverse);
}

.text-white {
    color: var(--text-inverse);
}

.text-white h1,
.text-white h2,
.text-white h3 {
    color: var(--text-inverse);
}

.text-center {
    text-align: center;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.max-w-800 {
    max-width: 800px;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--text-inverse);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: var(--primary);
    color: var(--text-inverse);
}

.btn-secondary:hover {
    background-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.sm-btn {
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
}

/* --- Navbar --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.navbar.scrolled {
    padding: 0.5rem 0;
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.98);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.logo img {
    height: 85px;
}

.logo .accent-text {
    color: var(--secondary);
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    font-weight: 500;
    color: var(--primary-light);
}

.nav-links a:not(.btn):hover {
    color: var(--secondary);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    color: var(--primary);
    cursor: pointer;
}

/* Mobile Menu Logic */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    /* not full width to show contrast */
    max-width: 300px;
    /* height: 100%; */
    background: var(--bg-white);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    transition: right 0.3s ease-in-out;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.mobile-menu.active {
    right: 0;
}

.close-btn {
    font-size: 2rem;
    align-self: flex-end;
    cursor: pointer;
    color: var(--primary);
    margin-bottom: 2rem;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav-links a {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--primary);
}

.mobile-nav-links .btn {
    text-align: center;
    color: white;
}

/* --- Hero Section & Splide Overrides --- */
.hero-slider-section {
    position: relative;
    height: 85vh;
    min-height: 500px;
    background: #000;
    /* fall back */
}

/* Remove default margin on splide */
.splide {
    height: 100%;
}

.splide__track {
    height: 100%;
}

.splide__list {
    height: 100%;
}

.hero {
    position: relative;
    height: 100%;
    /* inherit height from splide slide */
    width: 100%;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: var(--text-inverse);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 4rem;
}

.hero-text h1 {
    font-size: 3.5rem;
    color: var(--text-inverse);
    margin-bottom: 1rem;
    max-width: 600px;
}

.highlight {
    color: var(--secondary);
}

.hero-text .subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: 500px;
    color: #cbd5e1;
}

/* Widget positioned freely over the slider on desktop */
.hero-widget-container {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 90%;
    max-width: 1200px;
    padding: 0 1rem;
    pointer-events: none;
    /* Let clicks pass through if layout needs */
}

.booking-widget-mockup {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
    pointer-events: auto;
    /* re-enable clicks */
}

.hero-widget-container .booking-widget-mockup {
    /* override position for the container logic */
    /* On desktop, we want it aligned with hero text or distinct? 
       Actually, previous design had it inline. Let's keep it inline within .hero-text or absolute?
       User asked for simple changes, but moving to slider complicates the widget placement.
       Let's keep the widget OUTSIDE the slider if possible, or inside each slide?
       If inside each slide, it duplicates. 
       Better to have it absolute on top.
       Current CSS .hero-widget-container does that.
       I need to align it better.
    */
    position: relative;
    /* It's inside the absolute container */
    display: table;
    /* shrinks to fit content */
}

.widget-inputs {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.widget-inputs input {
    padding: 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-dark);
}

/* Custom Splide Arrows styling */
.splide__arrow {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.splide__arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 1;
}

.splide__arrow svg {
    fill: white;
    width: 1.2rem;
    height: 1.2rem;
}

/* --- Features Section --- */
.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.divider {
    width: 80px;
    height: 4px;
    background: var(--accent);
    margin: 1rem auto 3rem auto;
    border-radius: 2px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
    border: 1px solid transparent;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(14, 165, 233, 0.1);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(14, 165, 233, 0.1);
    color: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.aa-logo-wrapper {
    background: #ffdb00;
    color: #000;
    font-weight: bold;
    flex-direction: column;
    font-size: 1.2rem;
    position: relative;
}

.aa-logo-wrapper .aa-icon {
    font-size: 1rem;
    margin-bottom: 2px;
}

.aa-logo-wrapper .aa-text {
    font-size: 0.5rem;
    text-transform: uppercase;
    font-weight: 800;
}

.feature-card h3 {
    margin-bottom: 0.8rem;
    font-size: 1.25rem;
}

.feature-card p {
    color: var(--text-body);
}

/* --- Power Combo Section --- */
.power-combo {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    overflow: hidden;
}

.combo-wrapper {
    display: flex;
    align-items: center;
    gap: 4rem;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.combo-image {
    flex: 1;
    height: 100%;
    min-height: 400px;
}

.combo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.combo-content {
    flex: 1;
    padding: 3rem;
}

.tag {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    background: var(--accent);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 50px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.combo-content h2 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.lead {
    font-size: 1.2rem;
    color: var(--secondary);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.benefits-list {
    margin: 2rem 0;
}

.benefits-list li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 500;
}

.benefits-list li i {
    color: var(--secondary);
}

/* --- Fleet Section (Splide adjustments) --- */
#fleet-splide {
    padding: 1rem 0 3rem 0;
    /* space for pagination dots */
}

/* Ensure slides have gaps in splide config, but we can also pad the inner card */
.fleet-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #f1f5f9;
    height: 100%;
    /* Important for slider alignment */
}

.fleet-card.featured {
    border: 2px solid var(--secondary);
    transform: scale(1.02);
    /* Might conflict with slider cropping */
}

/* Disable scale in slider context to avoid cropping issues or handle with padding */
.splide__slide .fleet-card.featured {
    transform: none;
    border: 2px solid var(--secondary);
}

.badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--secondary);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10;
}

.fleet-img {
    height: 220px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fleet-img img {
    max-width: 90%;
    transition: transform 0.3s ease;
}

.fleet-card:hover .fleet-img img {
    transform: scale(1.05);
}

.placeholder-car {
    color: #cbd5e1;
    text-align: center;
}

.placeholder-car i {
    font-size: 4rem;
    display: block;
    margin-bottom: 0.5rem;
}

.fleet-info {
    padding: 1.5rem;
}

.fleet-info h3 {
    margin-bottom: 0.5rem;
}

.fleet-desc {
    color: var(--text-body);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.specs {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
}

.specs li {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.specs li i {
    color: var(--secondary);
}

/* --- Terms Section --- */
.terms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.term-box {
    background: #fff;
    padding: 2.5rem;
    border-top: 4px solid var(--primary);
    box-shadow: var(--shadow-sm);
}

.term-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.term-details {
    margin-top: 1.5rem;
    padding-left: 1rem;
}

.term-details li {
    list-style-type: disc;
    margin-bottom: 0.5rem;
    color: var(--text-body);
}

/* --- Footer --- */
.footer {
    background: var(--primary);
    color: #e2e8f0;
    padding-top: 4rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}


.footer h3 {
    color: white;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.footer p {
    color: #94a3b8;
    margin-bottom: 0.8rem;
}

.footer-col a {
    display: block;
    margin-bottom: 0.8rem;
}

.footer-col i {
    width: 25px;
    color: var(--secondary);
}

.footer-col ul li {
    margin-bottom: 0.8rem;
}

.footer-col ul a:hover {
    color: var(--secondary);
    padding-left: 5px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
    font-size: 0.9rem;
    color: #64748b;
}

/* --- Animations --- */
.animate-up {
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

/* Widget delay */

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .combo-wrapper {
        flex-direction: column;
    }

    .combo-image {
        width: 100%;
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .section-padding {
        padding: 3rem 0;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-text .subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    /* Widget Alignment on Mobile */
    .hero-widget-container {
        bottom: 50px;
        /* Adjust as needed */
        width: 95%;
    }

    .booking-widget-mockup {
        width: 100%;
        padding: 1rem;
    }

    .widget-inputs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .widget-inputs input,
    .widget-inputs button {
        width: 100%;
        padding: 0.7rem;
    }
}

/* --- About Section (New Layout) --- */
.about-grid {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.about-text {
    flex: 1;
}

.about-image {
    flex: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.about-image:hover img {
    transform: scale(1.03);
}

@media (max-width: 900px) {
    .about-grid {
        flex-direction: column;
    }

    .about-image {
        order: -1;
        width: 100%;
        max-height: 400px;
    }

    .logo img {
        height: 45px;
    }
}

/* --- Floating Booking Button --- */
.floating-book-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: linear-gradient(135deg, var(--accent) 0%, #d34e00 100%);
    color: white;
    padding: 1rem 1.8rem;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.4);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 700;
    font-family: var(--font-heading);
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: float 3s ease-in-out infinite;
}

.floating-book-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(249, 115, 22, 0.6);
    background: linear-gradient(135deg, #fb8332 0%, #ea580c 100%);
    color: white;
}

.floating-book-btn .icon {
    background: rgba(255, 255, 255, 0.2);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.floating-book-btn:hover .icon {
    transform: rotate(15deg);
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .floating-book-btn {
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }

    .floating-book-btn .text {
        display: none;
    }

    .floating-book-btn .icon {
        width: auto;
        height: auto;
        background: none;
        font-size: 1.5rem;
    }

    .floating-book-btn {
        width: 60px;
        height: 60px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }
}