/* ============================================

   AMIGA RENT A CAR - Premium Car Rental CSS

   ============================================ */



/* Navbar Phone Numbers */

.nav-phones {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-left: auto;

    margin-right: 30px;

}



.nav-phone-link {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #932c2c;

    text-decoration: none;

    font-size: 13px;

    font-weight: 500;

    padding: 6px 12px;

    border-radius: 20px;

    background: #09c6dbe6;

    transition: all 0.3s ease;

    white-space: nowrap;

}



.nav-phone-link:hover {

    background: #09c6dbe6;

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);

}



.nav-phone-link i {

    font-size: 11px;

}



/* Hide on tablet, show floating button instead */

@media (max-width: 992px) {

    .nav-phones {

        display: none;

    }

}



/* Floating Phone Button for Mobile */

.floating-phone {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 9999;

    display: none;

}



.floating-phone-btn {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: linear-gradient(135deg, #09c6dbe6, #072e68);

    color: #fff;

    border: none;

    font-size: 24px;

    cursor: pointer;

    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.5);

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.floating-phone-btn:hover {

    transform: scale(1.1);

    box-shadow: 0 6px 25px rgba(220, 53, 69, 0.6);

}



.floating-phone-menu {

    position: absolute;

    bottom: 70px;

    right: 0;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 5px 30px rgba(0,0,0,0.2);

    padding: 10px;

    display: none;

    min-width: 180px;

}



.floating-phone-menu.active {

    display: block;

    animation: slideUp 0.3s ease;

}



@keyframes slideUp {

    from { opacity: 0; transform: translateY(10px); }

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

}



.floating-phone-menu a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    color: #333;

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;

    border-radius: 8px;

    transition: all 0.2s ease;

}



.floating-phone-menu a:hover {

    background: #f5f5f5;

    color: #09c6dbe6;

}



.floating-phone-menu a i {

    color: #09c6dbe6;

    font-size: 16px;

}



@media (max-width: 992px) {

    .floating-phone {

        display: block;

    }

}



/* CSS Variables */

:root {

    /* Colors */

    --color-black: #ffffff;

    --color-black-light: #f5f5f5;

    --color-black-lighter: #e8e8e8;

    --color-gold: #09c6dbe6;

    --color-gold-light: #e74c5c;

    --color-gold-dark: #072e68;

    --color-white: #333333;

    --color-white-off: #f5f5f5;

    --color-gray: #666666;

    --color-gray-light: #555555;

    --color-gray-dark: #444444;

    --color-success: #28a745;

    --color-error: #09c6dbe6;

    

    /* Typography */

    --font-primary: 'Poppins', sans-serif;

    --font-secondary: 'Inter', sans-serif;

    

    /* Spacing */

    --spacing-xs: 0.5rem;

    --spacing-sm: 1rem;

    --spacing-md: 1.5rem;

    --spacing-lg: 2rem;

    --spacing-xl: 3rem;

    --spacing-xxl: 5rem;

    

    /* Transitions */

    --transition-fast: 0.2s ease;

    --transition-normal: 0.3s ease;

    --transition-slow: 0.5s ease;

    

    /* Border Radius */

    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 12px;

    --radius-xl: 20px;

    

    /* Shadows */

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);

    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);

    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.2);

    --shadow-gold: 0 4px 20px rgba(220, 53, 69, 0.3);

}



/* ============================================

   DARK MODE

   ============================================ */

body.dark-mode {

    --color-black: #0a0a0a;

    --color-black-light: #1a1a1a;

    --color-black-lighter: #2a2a2a;

    --color-white: #ffffff;

    --color-gray: #888888;

    --color-gray-light: #cccccc;

}



body.dark-mode .features {

    background: var(--color-black-light);

    border-color: var(--color-black-lighter);

}



body.dark-mode .feature-card {

    background: var(--color-black-lighter);

    border-color: var(--color-black-lighter);

}



body.dark-mode .feature-card h3 {

    color: #ffffff;

}



body.dark-mode .feature-card p {

    color: #999;

}



body.dark-mode .vehicle-card {

    background: #1a1a1a;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}



body.dark-mode .vehicle-content h3 {

    color: #ffffff;

}



body.dark-mode .vehicle-category {

    color: #09c6dbe6;

    background: rgba(220, 53, 69, 0.2);

}



body.dark-mode .spec {

    color: #ccc;

}



body.dark-mode .price-amount {

    color: #4dabf7;

}



body.dark-mode .dark-mode-toggle i {

    color: #ffc107;

}



body.dark-mode .dark-mode-toggle i::before {

    content: "\f185";

}



/* Dark Mode Toggle Button */

.dark-mode-toggle {

    background: none;

    border: none;

    cursor: pointer;

    font-size: 1.3rem;

    color: #333;

    padding: 8px;

    border-radius: 50%;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.dark-mode-toggle:hover {

    background: rgba(0,0,0,0.1);

    transform: rotate(15deg);

}



/* ============================================

   FILTER CONTROLS

   ============================================ */

.filter-controls {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 20px;

    flex-wrap: wrap;

}



.filter-controls .filter-btn {

    padding: 10px 25px;

    border: 2px solid #ddd;

    background: #fff;

    color: #333;

    border-radius: 30px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.filter-controls .filter-btn i {

    font-size: 14px;

}



.filter-controls .filter-btn[data-filter="available"] i {

    color: #28a745;

}



.filter-controls .filter-btn[data-filter="reserved"] i {

    color: #ffc107;

}



.filter-controls .filter-btn.active i {

    color: #fff;

}



.filter-controls .filter-btn:hover {

    border-color: #09c6dbe6;

    color: #09c6dbe6;

}



.filter-controls .filter-btn.active {

    background: linear-gradient(135deg, #09c6dbe6, #072e68);

    color: #fff;

    border-color: #09c6dbe6;

}



/* ============================================

   VEHICLE CARD OVERLAY

   ============================================ */

.vehicle-image .vehicle-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.7);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    opacity: 0;

    transition: all 0.3s ease;

    border-radius: 10px;

}



.vehicle-card:hover .vehicle-overlay {

    opacity: 1;

}



.vehicle-overlay .overlay-btn {

    padding: 10px 25px;

    border-radius: 25px;

    font-weight: 600;

    text-transform: uppercase;

    font-size: 0.85rem;

    cursor: pointer;

    transition: all 0.3s ease;

    border: none;

}



.vehicle-overlay .btn-reserve {

    background: linear-gradient(135deg, #09c6dbe6, #072e68);

    color: #fff;

}



.vehicle-overlay .btn-reserve:hover {

    transform: scale(1.05);

    box-shadow: 0 5px 20px rgba(220, 53, 69, 0.4);

}



/* Contact button for reserved vehicles */

.vehicle-overlay .btn-contact {

    background: linear-gradient(135deg, #28a745, #218838);

    font-size: 11px;

    padding: 10px 15px;

}



.vehicle-overlay .btn-contact:hover {

    box-shadow: 0 5px 20px rgba(40, 167, 69, 0.4);

}



.vehicle-btn.btn-contact {

    background: linear-gradient(135deg, #28a745, #218838) !important;

    font-size: 11px;

}



.vehicle-btn.btn-contact:hover {

    background: linear-gradient(135deg, #218838, #1e7e34) !important;

}



.vehicle-overlay .btn-details {

    background: transparent;

    border: 2px solid #fff;

    color: #fff;

}



.vehicle-overlay .btn-details:hover {

    background: #fff;

    color: #333;

}



/* ============================================

   VEHICLE DETAIL MODAL

   ============================================ */

.vehicle-detail-modal {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.vehicle-detail-modal .modal-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.8);

}



.vehicle-detail-modal .modal-content {

    position: relative;

    background: #fff;

    border-radius: 20px;

    max-width: 500px;

    width: 100%;

    max-height: 90vh;

    overflow-y: auto;

    animation: modalSlideIn 0.3s ease;

}



@keyframes modalSlideIn {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.vehicle-detail-modal .modal-close {

    position: absolute;

    top: 15px;

    right: 15px;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: rgba(0,0,0,0.5);

    border: none;

    color: #fff;

    font-size: 1.2rem;

    cursor: pointer;

    z-index: 10;

    transition: all 0.3s ease;

}



.vehicle-detail-modal .modal-close:hover {

    background: #09c6dbe6;

    transform: rotate(90deg);

}



.vehicle-detail-modal .detail-image {

    width: 100%;

    height: 325px;

    overflow: hidden;

    border-radius: 20px 20px 0 0;

}



.vehicle-detail-modal .detail-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.vehicle-detail-modal .detail-image .no-photo {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f0f0f0;

    font-size: 4rem;

    color: #ccc;

}



.vehicle-detail-modal .detail-info {

    padding: 25px;

}



.vehicle-detail-modal .detail-info h2 {

    font-size: 1.8rem;

    color: #333;

    margin-bottom: 5px;

}



.vehicle-detail-modal .detail-category {

    display: inline-block;

    background: rgba(220, 53, 69, 0.1);

    color: #09c6dbe6;
    

    padding: 5px 12px;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 600;

    margin-bottom: 20px;

}



.vehicle-detail-modal .detail-specs {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-bottom: 20px;

}



.vehicle-detail-modal .detail-spec {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #666;

}



.vehicle-detail-modal .detail-spec i {

    color: #09c6dbe6;

    font-size: 1.1rem;

}



.vehicle-detail-modal .detail-price {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px;

    background: #f8f9fa;

    border-radius: 10px;

    margin-bottom: 20px;

}



.vehicle-detail-modal .price-label {

    color: #666;

}



.vehicle-detail-modal .price-value {

    font-size: 1.8rem;

    font-weight: 700;

    color: #007bff;

}



/* ============================================

   RESPONSIVE - FEATURES

   ============================================ */

@media (max-width: 992px) {

    .features-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 576px) {

    .features-grid {

        grid-template-columns: 1fr;

    }

    

    .feature-card {

        padding: var(--spacing-lg);

    }

    

    .filter-controls {

        flex-direction: column;

        align-items: stretch;

    }

    

    .filter-controls .filter-btn {

        width: 100%;

    }

}



/* Reset & Base Styles */

*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family: var(--font-secondary);

    font-weight: 400;

    line-height: 1.6;

    color: var(--color-white);

    background-color: var(--color-black);

    overflow-x: hidden;

}



/* Typography */

h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-primary);

    font-weight: 600;

    line-height: 1.2;

}



h1 { font-size: clamp(2.5rem, 5vw, 4rem); }

h2 { font-size: clamp(2rem, 4vw, 3rem); }

h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }



p {

    color: var(--color-gray-light);

    margin-bottom: var(--spacing-sm);

}



a {

    text-decoration: none;

    color: inherit;

    transition: var(--transition-normal);

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



ul {

    list-style: none;

}



/* Container */

.container {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 var(--spacing-md);

}



/* Gold Accent */

.gold {

    color: var(--color-gold);

}



/* Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--spacing-xs);

    padding: 1rem 2rem;

    font-family: var(--font-secondary);

    font-size: 0.9rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    border: none;

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition: var(--transition-normal);

}



.btn-primary {

    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));

    color: var(--color-black);

}



.btn-primary:hover {

    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));

    transform: translateY(-2px);

    box-shadow: var(--shadow-gold);

}



/* WhatsApp Button */

.btn-whatsapp {

    background: linear-gradient(135deg, #0973b4, #04a391) !important;

    color: #fff !important;

}



.btn-whatsapp:hover {

    background: linear-gradient(135deg, #2EE370, #25D366) !important;

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);

}



.btn-whatsapp i {

    font-size: 1.2em;

}



.btn-outline {

    background: transparent;

    color: var(--color-white);

    border: 2px solid var(--color-gold);

}



.btn-outline:hover {

    background: var(--color-gold);

    color: var(--color-black);

}



.btn-full {

    width: 100%;

}



/* ============================================

   NAVBAR

   ============================================ */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    padding: var(--spacing-md) 0;

    background: transparent;

    transition: var(--transition-normal);

}



.navbar.scrolled {

    background: rgba(10, 10, 10, 0.95);

    backdrop-filter: blur(10px);

    padding: var(--spacing-sm) 0;

    box-shadow: var(--shadow-md);

}



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

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo-text {
    white-space: nowrap;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.logo-img {
    height: 45px;
    width: auto;
    flex-shrink: 0;
}



.logo-text {

    font-family: var(--font-primary);

    font-size: 1.8rem;

    font-weight: 700;

    color: #000000;

    letter-spacing: 2px;

}



.nav-menu {

    display: flex;

    gap: var(--spacing-lg);

}



.nav-link {

    font-size: 0.9rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #ffffff;

    position: relative;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--color-gold);

    transition: var(--transition-normal);

}



.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



.nav-actions {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

}



.phone-link {

    display: flex;

    align-items: center;

    gap: var(--spacing-xs);

    color: var(--color-gold);

    font-weight: 500;

}



.phone-link i {

    font-size: 0.9rem;

}



.hamburger {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 5px;

}



.hamburger span {

    width: 25px;

    height: 2px;

    background: #d4af37;

    transition: var(--transition-normal);

}



/* Mobile Nav Elements */

.nav-close {

    display: none;

}



.nav-logo-mobile {

    display: none;

}



.nav-phone-mobile {

    display: none;

}



@media (max-width: 768px) {

    .nav-close {

        display: block;

        position: absolute;

        top: 25px;

        right: 25px;

        background: none;

        border: none;

        font-size: 0.5rem;

        color: #09c6dbe6;

        cursor: pointer;

        transition: all 0.3s ease;

        z-index: 1002;

    }

    

    .nav-close:hover {

        transform: rotate(90deg);

        color: #072e68;

    }

    

    .nav-logo-mobile {

        display: block !important;

        margin-bottom: 20px;

    }

    

    .nav-logo-mobile .logo-text {

        font-size: 1rem;

        color: #333333;

        display: inline !important;

    }

    

    .nav-logo-mobile .gold {

        color: #09c6dbe6;

    }

    

    .nav-phone-mobile {

        display: block !important;

        margin-top: 30px;

    }

    

    .nav-phone-link {

        display: flex;

        align-items: center;

        gap: 10px;

        padding: 15px 30px;

        background: linear-gradient(135deg, #09c6dbe6, #072e68);

        color: #ffffff !important;

        border-radius: 50px;

        font-weight: 600;

        font-size: 1.1rem;

        transition: all 0.3s ease;

    }

    

    .nav-phone-link:hover {

        transform: scale(1.05);

        box-shadow: 0 10px 30px rgba(220, 53, 69, 0.4);

    }

    

    .nav-link i {

        margin-right: 10px;

        color: #09c6dbe6;

    }

}



/* ============================================

   HERO SECTION

   ============================================ */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: url('../images/golf82.jpg') center/cover no-repeat;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to bottom,

        rgba(0, 0, 0, 0.7) 0%,

        rgba(0, 0, 0, 0.5) 50%,

        rgba(0, 0, 0, 0.9) 100%

    );

}



.hero-content {

    position: relative;

    text-align: center;

    max-width: 900px;

    padding: var(--spacing-xl);

}



.hero-title {

    margin-bottom: var(--spacing-md);

}



.hero-title .subtitle {

    display: block;

    font-family: var(--font-secondary);

    font-size: 1.2rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #d4af37;

    margin-bottom: var(--spacing-sm);

    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);

}



.hero-description {

    font-size: 1.2rem;

    color: var(--color-gray-light);

    margin-bottom: var(--spacing-lg);

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

}



.hero-buttons {

    display: flex;

    gap: var(--spacing-md);

    justify-content: center;

    flex-wrap: wrap;

}



.hero-scroll {

    position: absolute;

    bottom: var(--spacing-lg);

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--spacing-xs);

    color: var(--color-gray);

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    animation: bounce 2s infinite;

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }

    40% { transform: translateX(-50%) translateY(-10px); }

    60% { transform: translateX(-50%) translateY(-5px); }

}



/* Animations */

.animate-fade-in {

    animation: fadeIn 1s ease forwards;

}



.animate-fade-in-delay {

    opacity: 0;

    animation: fadeIn 1s ease 0.3s forwards;

}



.animate-fade-in-delay-2 {

    opacity: 0;

    animation: fadeIn 1s ease 0.6s forwards;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(30px); }

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

}



/* ============================================

   FEATURES SECTION

   ============================================ */

.features {

    padding: var(--spacing-xxl) 0;

    background: #f8f9fa;

    border-top: 1px solid #e8e8e8;

    border-bottom: 1px solid #e8e8e8;

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: var(--spacing-lg);

}



.feature-card {

    text-align: center;

    padding: var(--spacing-xl);

    background: #ffffff;

    border-radius: var(--radius-lg);

    transition: all 0.3s ease;

    border: 1px solid #eee;

}



.feature-card:hover,

.service-box:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 30px rgba(0,0,0,0.12);

    border-color: #09c6dbe6;

}



.feature-icon {

    width: 90px;

    height: 90px;

    margin: 0 auto var(--spacing-md);

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #09c6dbe6, #072e68);

    border-radius: 50%;

    color: #ffffff;

    transition: all 0.3s ease;

}



.feature-icon svg {

    width: 45px;

    height: 45px;

    stroke: #ffffff;

}



.feature-card:hover .feature-icon {

    transform: scale(1.1) rotate(5deg);

    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);

}



.feature-card h3 {

    font-size: 1.3rem;

    margin-bottom: var(--spacing-xs);

    color: #333;

}



.feature-card p {

    font-size: 0.95rem;

    color: #666;

}



/* ============================================

   SECTION HEADERS

   ============================================ */

.section-header {

    text-align: center;

    margin-bottom: var(--spacing-xxl);

}



.section-subtitle {

    display: inline-block;

    font-family: var(--font-secondary);

    font-size: 0.9rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 3px;

    color: var(--color-gold);

    margin-bottom: var(--spacing-sm);

}



.section-subtitle.section-subtitle-large {

    font-size: 2.5rem;

    letter-spacing: 5px;

    font-weight: 700;

}



.section-title {

    margin-bottom: var(--spacing-sm);

}



.section-description {

    font-size: 1.1rem;

    max-width: 600px;

    margin: 0 auto;

}



/* ============================================

   VEHICLES SECTION

   ============================================ */

.vehicles {

    padding: var(--spacing-xxl) 0;

    background: var(--color-black);

}



.filter-buttons {

    display: flex;

    justify-content: center;

    gap: var(--spacing-sm);

    margin-bottom: var(--spacing-xl);

    flex-wrap: wrap;

}



.filter-btn {

    padding: 0.8rem 1.5rem;

    background: transparent;

    border: 1px solid var(--color-gray-dark);

    color: var(--color-gray-light);

    font-family: var(--font-secondary);

    font-size: 0.85rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1px;

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition: var(--transition-normal);

}



.filter-btn:hover,

.filter-btn.active {

    background: var(--color-gold);

    border-color: var(--color-gold);

    color: var(--color-black);

}



/* Advanced Filters */

.advanced-filters {

    margin-bottom: var(--spacing-lg);

}



.toggle-filters-btn {

    background: var(--color-black-light);

    border: 1px solid var(--color-black-lighter);

    color: var(--color-white);

    padding: 0.75rem 1.5rem;

    border-radius: var(--radius-md);

    cursor: pointer;

    font-size: 0.9rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    transition: var(--transition-normal);

    margin-bottom: var(--spacing-sm);

}



.toggle-filters-btn:hover {

    border-color: var(--color-gold);

    color: var(--color-gold);

}



.toggle-filters-btn.active {

    background: var(--color-gold);

    color: var(--color-black);

    border-color: var(--color-gold);

}



.filters-panel {

    background: var(--color-black-light);

    border: 1px solid var(--color-black-lighter);

    border-radius: var(--radius-md);

    padding: var(--spacing-lg);

    display: none;

}



.filters-panel.active {

    display: block;

    animation: slideDown 0.3s ease;

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.filters-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: var(--spacing-sm);

    margin-bottom: var(--spacing-md);

}



@media (max-width: 768px) {

    .filters-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: var(--spacing-xs);

    }

    

    .filters-panel {

        padding: var(--spacing-sm);

    }

    

    .filter-group label {

        font-size: 0.75rem;

    }

    

    .filter-group select {

        padding: 0.5rem;

        font-size: 0.8rem;

    }

    

    .filters-actions {

        flex-direction: column;

        gap: var(--spacing-sm);

    }

    

    .filters-actions .btn {

        width: 100%;

    }

}



@media (max-width: 480px) {

    .filters-grid {

        grid-template-columns: 1fr 1fr;

    }

    

    .filter-group label {

        font-size: 0.7rem;

    }

    

    .filter-group select {

        padding: 0.4rem;

        font-size: 0.75rem;

    }

}



.filter-group label {

    display: block;

    margin-bottom: var(--spacing-xs);

    font-size: 0.85rem;

    color: var(--color-gray);

}



.filter-group label i {

    margin-right: 0.3rem;

    color: var(--color-gold);

}



.filter-group select {

    width: 100%;

    padding: 0.75rem;

    background: var(--color-black);

    border: 1px solid var(--color-black-lighter);

    border-radius: var(--radius-sm);

    color: var(--color-white);

    font-size: 0.9rem;

    cursor: pointer;

    transition: var(--transition-normal);

}



.filter-group select:focus {

    outline: none;

    border-color: var(--color-gold);

}



.filters-actions {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

    padding-top: var(--spacing-md);

    border-top: 1px solid var(--color-black-lighter);

}



.filter-results {

    color: var(--color-gray);

    font-size: 0.9rem;

}



.filter-results span {

    color: var(--color-gold);

    font-weight: 600;

}



.vehicles-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;

    padding: 20px;

    align-items: stretch;

}



/* Professional Vehicles Header */

.vehicles-header {

    text-align: center;

    padding: 40px 20px;

    margin-bottom: 20px;

}



.header-decoration {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-bottom: 20px;

}



.header-decoration .line {

    width: 60px;

    height: 2px;

    background: linear-gradient(90deg, transparent, #09c6dbe6, transparent);

}



.header-decoration i {

    font-size: 24px;

    color: #09c6dbe6;

    animation: carMove 3s ease-in-out infinite;

}



@keyframes carMove {

    0%, 100% { transform: translateX(0); }

    50% { transform: translateX(10px); }

}



.vehicles-title {

    font-size: 2.8rem;

    font-weight: 800;

    color: #222;

    margin-bottom: 10px;

    text-transform: uppercase;

    letter-spacing: 3px;

    background: linear-gradient(135deg, #09c6dbe6, #072e68);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.vehicles-subtitle {

    font-size: 1.1rem;

    color: #666;

    margin-bottom: 30px;

    font-weight: 400;

}



.header-stats {

    display: flex;

    justify-content: center;

    gap: 50px;

    flex-wrap: wrap;

}



.stat-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    padding: 20px 30px;

    background: #fff;

    border-radius: 15px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

}



.stat-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(220, 53, 69, 0.15);

}



.stat-item i {

    font-size: 28px;

    color: #09c6dbe6;

    margin-bottom: 5px;

}



.stat-number {

    font-size: 2rem;

    font-weight: 800;

    color: #222;

}



.stat-label {

    font-size: 0.85rem;

    color: #888;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Dark mode support */

body.dark-mode .vehicles-title {

    background: linear-gradient(135deg, #ff6b6b, #09c6dbe6);

    -webkit-background-clip: text;

    background-clip: text;

}



body.dark-mode .vehicles-subtitle {

    color: #aaa;

}



body.dark-mode .stat-item {

    background: #2a2a2a;

}



body.dark-mode .stat-number {

    color: #fff;

}



/* Responsive */

@media (max-width: 768px) {

    .vehicles-title {

        font-size: 2rem;

        letter-spacing: 2px;

    }

    

    .vehicles-subtitle {

        font-size: 0.85rem;

        padding: 0 10px;

    }

    

    .header-stats {

        gap: 8px;

    }

    

    .stat-item {

        padding: 10px 12px;

        min-width: 85px;

    }

    

    .stat-item i {

        font-size: 18px;

        margin-bottom: 2px;

    }

    

    .stat-number {

        font-size: 1.2rem;

    }

    

    .stat-label {

        font-size: 0.65rem;

        letter-spacing: 0.5px;

    }

}



/* ============================================

   VEHICLE CARDS - NEW PREMIUM DESIGN

   ============================================ */



.vehicle-card {

    position: relative;

    background: #fff;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    padding: 0;

    font-family: 'Poppins', sans-serif;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    cursor: pointer;

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: hidden;

    border: 1px solid rgba(0,0,0,0.05);

}



.vehicle-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}



/* Category Ribbon */

.category-ribbon {

    position: absolute;

    top: 15px;

    left: -5px;

    padding: 6px 15px 6px 10px;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    z-index: 10;

    border-radius: 0 20px 20px 0;

    display: flex;

    align-items: center;

    gap: 6px;

    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);

}



.category-ribbon::before {

    content: '';

    position: absolute;

    left: 0;

    bottom: -5px;

    border-width: 5px;

    border-style: solid;

}



/* Category Colors */

.cat-ekonomike .category-ribbon,

.category-ribbon.cat-ekonomike {

    background: linear-gradient(135deg, #28a745, #20c997);

    color: #fff;

}

.cat-ekonomike .category-ribbon::before { border-color: #1e7e34 transparent transparent #1e7e34; }



.cat-luksoze .category-ribbon,

.category-ribbon.cat-luksoze {

    background: linear-gradient(135deg, #ffd700, #ff8c00);

    color: #333;

}

.cat-luksoze .category-ribbon::before { border-color: #cc9900 transparent transparent #cc9900; }



.cat-suv .category-ribbon,

.category-ribbon.cat-suv {

    background: linear-gradient(135deg, #6f42c1, #9561e2);

    color: #fff;

}

.cat-suv .category-ribbon::before { border-color: #5a32a3 transparent transparent #5a32a3; }



.cat-sport .category-ribbon,

.category-ribbon.cat-sport {

    background: linear-gradient(135deg, #09c6dbe6, #ff6b6b);

    color: #fff;

}

.cat-sport .category-ribbon::before { border-color: #a71d2a transparent transparent #a71d2a; }



.cat-komfort .category-ribbon,

.category-ribbon.cat-komfort {

    background: linear-gradient(135deg, #17a2b8, #20c997);

    color: #fff;

}

.cat-komfort .category-ribbon::before { border-color: #117a8b transparent transparent #117a8b; }



.cat-familjare .category-ribbon,

.category-ribbon.cat-familjare {

    background: linear-gradient(135deg, #6c757d, #868e96);

    color: #fff;

}

.cat-familjare .category-ribbon::before { border-color: #545b62 transparent transparent #545b62; }



.cat-standard .category-ribbon,

.category-ribbon.cat-standard {

    background: linear-gradient(135deg, #007bff, #0056b3);

    color: #fff;

}

.cat-standard .category-ribbon::before { border-color: #0056b3 transparent transparent #0056b3; }



.vehicle-image {

    position: relative;

    height: 320px;

    overflow: hidden;

    margin-bottom: 0;

}



.vehicle-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.vehicle-card:hover .vehicle-image img {

    transform: scale(1.1);

}



/* Image overlay gradient */

.vehicle-image::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 60%;

    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);

    pointer-events: none;

}



/* Status Badge - Ribbon Style like Category */

.vehicle-badge {

    position: absolute;

    top: 15px;

    left: -5px;

    padding: 6px 15px 6px 10px;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    z-index: 10;

    border-radius: 0 20px 20px 0;

    display: flex;

    align-items: center;

    gap: 6px;

    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);

    color: #fff;

}



.vehicle-badge::before {

    content: '';

    position: absolute;

    left: 0;

    bottom: -5px;

    border-width: 5px;

    border-style: solid;

}



.vehicle-badge i {

    font-size: 11px;

}



.vehicle-badge.badge-available {

    background: linear-gradient(135deg, #28a745, #20c997);

}

.vehicle-badge.badge-available::before {

    border-color: #1e7e34 transparent transparent #1e7e34;

}



.vehicle-badge.badge-reserved {

    background: linear-gradient(135deg, #ff9800, #ff5722);

}

.vehicle-badge.badge-reserved::before {

    border-color: #e65100 transparent transparent #e65100;

}



.vehicle-badge.badge-service {

    background: linear-gradient(135deg, #09c6dbe6, #072e68);

}

.vehicle-badge.badge-service::before {

    border-color: #a71d2a transparent transparent #a71d2a;

}



.vehicle-badge.badge-unavailable {

    background: linear-gradient(135deg, #09c6dbe6, #072e68);

}

.vehicle-badge.badge-unavailable::before {

    border-color: #a71d2a transparent transparent #a71d2a;

}



.vehicle-year {

    position: absolute;

    top: 15px;

    right: 15px;

    padding: 6px 12px;

    background: rgba(0, 0, 0, 0.8);

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    border-radius: 20px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 5px;

}



.vehicle-year i {

    font-size: 10px;

    opacity: 0.8;

}



.vehicle-btn:disabled {

    background: var(--color-gray-dark) !important;

    color: var(--color-gray) !important;

    cursor: not-allowed;

    border-color: var(--color-gray-dark) !important;

}



.vehicle-btn:disabled:hover {

    transform: none;

    box-shadow: none;

}



.vehicle-no-photo {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--color-black-lighter), var(--color-black-light));

    color: var(--color-gray);

}



/* Availability Warning */

.availability-warning {

    background: linear-gradient(135deg, #ff6b35, #ff4444);

    color: white;

    padding: 1rem 1.5rem;

    border-radius: var(--radius-md);

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-weight: 500;

    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);

    animation: shake 0.5s ease-in-out;

}



.availability-warning i {

    font-size: 1.25rem;

    animation: pulse 1s infinite;

}



@keyframes shake {

    0%, 100% { transform: translateX(0); }

    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }

    20%, 40%, 60%, 80% { transform: translateX(5px); }

}



@keyframes pulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.5; }

}



.vehicle-no-photo i {

    font-size: 3rem;

    margin-bottom: 0.5rem;

    color: #ccc;

}



.vehicle-no-photo span {

    font-size: 0.85rem;

    color: #999;

}



.vehicle-content {

    padding: 20px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

    background: #fff;

}



.vehicle-title {

    font-size: 1.15rem;

    font-weight: 700;

    margin-bottom: 15px;

    color: #222;

    line-height: 1.3;

    text-align: center;

}



/* Specs Grid - New Design */

.specs-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    margin-bottom: 20px;

    padding: 15px;

    background: #f8f9fa;

    border-radius: 12px;

}



.spec-item {

    display: flex;

    align-items: center;

    gap: 10px;

}



.spec-icon {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

}



.spec-icon i {

    font-size: 14px;

    color: #09c6dbe6;

}



.spec-info {

    display: flex;

    flex-direction: column;

}



.spec-label {

    font-size: 10px;

    color: #888;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.spec-value {

    font-size: 13px;

    font-weight: 600;

    color: #333;

}



/* Vehicle Footer - Price and Button */

.vehicle-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: auto;

    padding-top: 15px;

    border-top: 2px solid #f0f0f0;

    flex-wrap: wrap;

}



.reserved-notice {

    width: 100%;

    color: #555;

    font-size: 0.8rem;

    font-weight: 400;

    padding: 0 0 10px 0;

    margin-bottom: 8px;

    text-align: left;

    border-bottom: 1px solid #eee;

}



.price-box {

    display: flex;

    flex-direction: column;

}



.price-box .price-label {

    font-size: 11px;

    color: #888;

    text-transform: uppercase;

}



.price-box .price-amount {

    font-size: 1.5rem;

    font-weight: 800;

    color: #09c6dbe6;

    line-height: 1.2;

}



/* Old styles for backwards compatibility */

.vehicle-category {

    display: none;

}



.vehicle-content h3 {

    font-size: 1.4rem;

    font-weight: 600;

    margin-bottom: 10px;

    color: #333;

}



.vehicle-specs {

    display: none;

}



.spec {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.85rem;

    color: #666;

}



.spec i {

    color: #09c6dbe6;

    font-size: 0.9rem;

}



.vehicle-pricing {

    display: none;

}

    margin-top: 15px;

}



.price {

    display: flex;

    flex-direction: column;

}



.price-amount {

    font-family: var(--font-primary);

    font-size: 1.3rem;

    font-weight: 700;

    color: #007bff;

}



.price-period {

    font-size: 0.8rem;

    color: #999;

}



.vehicle-btn {

    background: linear-gradient(135deg, #09c6dbe6, #072e68);

    color: white;

    padding: 12px 20px;

    border-radius: 10px;

    text-transform: uppercase;

    font-weight: 700;

    border: none;

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);

}



.vehicle-btn:hover {

    background: linear-gradient(135deg, #e74c5c, #09c6dbe6);

    transform: translateY(-3px);

    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);

}



.vehicle-btn i {

    font-size: 14px;

}



.vehicle-btn.btn-reserve {

    background: linear-gradient(135deg, #09c6dbe6, #072e68);

    color: white;

    border: none;

}



.vehicle-btn.btn-reserve:hover {

    background: linear-gradient(135deg, #e74c5c, #09c6dbe6);

    transform: translateY(-3px);

    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);

}



.vehicle-btn.btn-contact {

    background: linear-gradient(135deg, #25D366, #128C7E) !important;

    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);

}



.vehicle-btn.btn-contact:hover {

    background: linear-gradient(135deg, #128C7E, #075E54) !important;

    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);

}



/* 📱 Responsive për telefon - Vehicle Cards */

@media (max-width: 480px) {

    .vehicle-card {

        padding: 0;

    }

    .vehicle-content {

        padding: 15px;

    }

    .vehicle-title {

        font-size: 1.1rem;

    }

    .specs-grid {

        gap: 8px;

        padding: 12px;

    }

    .spec-icon {

        width: 30px;

        height: 30px;

    }

    .spec-icon i {

        font-size: 12px;

    }

    .spec-label {

        font-size: 9px;

    }

    .spec-value {

        font-size: 11px;

    }

    .price-box .price-amount {

        font-size: 1.3rem;

    }

    .vehicle-btn {

        padding: 10px 15px;

        font-size: 11px;

    }

    .category-ribbon {

        font-size: 10px;

        padding: 5px 12px 5px 8px;

    }

}

        width: 100%;

        padding: 12px;

        font-size: 0.9rem;

    }

}



/* ============================================

   SERVICES SECTION

   ============================================ */

.services {

    padding: var(--spacing-xxl) 0;

    background: var(--color-black-light);

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--spacing-lg);

}



.service-card {

    background: var(--color-black);

    border-radius: var(--radius-lg);

    overflow: hidden;

    transition: var(--transition-normal);

}



.service-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);

}



.service-image {

    position: relative;

    height: 200px;

    overflow: hidden;

}



.service-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition-slow);

}



.service-card:hover .service-image img {

    transform: scale(1.1);

}



.service-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(212, 175, 55, 0.9);

    opacity: 0;

    transition: var(--transition-normal);

}



.service-card:hover .service-overlay {

    opacity: 1;

}



.service-overlay i {

    font-size: 3rem;

    color: var(--color-black);

}



.service-content {

    padding: var(--spacing-lg);

}



.service-content h3 {

    font-size: 1.3rem;

    margin-bottom: var(--spacing-sm);

}



.service-content p {

    font-size: 0.95rem;

    margin-bottom: var(--spacing-md);

}



.service-features {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

}



.service-features li {

    display: flex;

    align-items: center;

    gap: var(--spacing-xs);

    font-size: 0.9rem;

    color: var(--color-gray-light);

}



.service-features i {

    color: var(--color-gold);

    font-size: 0.8rem;

}



/* ============================================

   BOOKING SECTION

   ============================================ */

.booking {

    padding: var(--spacing-xxl) 0;

    background: var(--color-black);

}



.booking-wrapper {

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: var(--spacing-xxl);

    align-items: start;

}



.booking-info {

    position: sticky;

    top: 120px;

}



.booking-info .section-subtitle,

.booking-info .section-title {

    text-align: left;

}



.booking-info p {

    font-size: 1.1rem;

    margin-bottom: var(--spacing-lg);

}



.booking-benefits {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-md);

}



.benefit {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

    font-size: 1rem;

    color: var(--color-white);

}



.benefit i {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-gold);

    color: var(--color-black);

    border-radius: 50%;

}



.booking-form {

    background: var(--color-black-light);

    padding: var(--spacing-xl);

    border-radius: var(--radius-lg);

    border: 1px solid var(--color-black-lighter);

}



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-md);

}



.form-group {

    margin-bottom: var(--spacing-md);

}



.form-group label {

    display: block;

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--color-white);

    margin-bottom: var(--spacing-xs);

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 1rem;

    background: var(--color-black);

    border: 1px solid var(--color-black-lighter);

    border-radius: var(--radius-sm);

    color: var(--color-white);

    font-family: var(--font-secondary);

    font-size: 0.95rem;

    transition: var(--transition-normal);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--color-gold);

}



.form-group input::placeholder,

.form-group textarea::placeholder {

    color: var(--color-gray);

}



.form-group select {

    cursor: pointer;

}



.form-group select option {

    background: var(--color-black);

    color: var(--color-white);

}



/* CAPTCHA Styles */

.captcha-group {

    background: var(--color-black-lighter);

    padding: var(--spacing-md);

    border-radius: var(--radius-md);

}



.captcha-wrapper {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

    margin-bottom: var(--spacing-sm);

    font-size: 1.1rem;

    color: var(--color-white);

}



.captcha-refresh {

    background: none;

    border: none;

    color: var(--color-gray);

    cursor: pointer;

    padding: 0.5rem;

    transition: var(--transition-normal);

}



.captcha-refresh:hover {

    color: var(--color-gold);

    transform: rotate(180deg);

}



.captcha-group label i {

    color: var(--color-gold);

    margin-right: 0.5rem;

}



/* Radio Buttons */

.radio-group {

    display: flex;

    gap: var(--spacing-lg);

}



.radio-label {

    display: flex;

    align-items: center;

    gap: var(--spacing-xs);

    cursor: pointer;

}



.radio-label input {

    display: none;

}



.radio-custom {

    width: 20px;

    height: 20px;

    border: 2px solid var(--color-gray-dark);

    border-radius: 50%;

    position: relative;

    transition: var(--transition-normal);

}



.radio-custom::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 10px;

    height: 10px;

    background: var(--color-gold);

    border-radius: 50%;

    opacity: 0;

    transition: var(--transition-normal);

}



.radio-label input:checked + .radio-custom {

    border-color: var(--color-gold);

}



.radio-label input:checked + .radio-custom::after {

    opacity: 1;

}



.radio-text {

    font-size: 0.95rem;

    color: var(--color-gray-light);

}



.radio-label i {

    color: var(--color-gold);

    font-size: 1rem;

    margin-left: 0.3rem;

}



/* Checkbox */

.checkbox-label {

    display: flex;

    align-items: center;

    gap: var(--spacing-xs);

    cursor: pointer;

}



.checkbox-label input {

    display: none;

}



.checkbox-custom {

    width: 22px;

    height: 22px;

    border: 2px solid var(--color-gray-dark);

    border-radius: var(--radius-sm);

    position: relative;

    transition: var(--transition-normal);

}



.checkbox-custom::after {

    content: '\f00c';

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: var(--color-black);

    font-size: 0.8rem;

    opacity: 0;

    transition: var(--transition-normal);

}



.checkbox-label input:checked + .checkbox-custom {

    background: var(--color-gold);

    border-color: var(--color-gold);

}



.checkbox-label input:checked + .checkbox-custom::after {

    opacity: 1;

}



.delivery-details {

    background: var(--color-black);

    padding: var(--spacing-md);

    border-radius: var(--radius-md);

    margin-bottom: var(--spacing-md);

}



/* Price Calculator */

.price-calculator {

    background: var(--color-black);

    padding: var(--spacing-md);

    border-radius: var(--radius-md);

    margin-bottom: var(--spacing-md);

    border: 1px solid var(--color-gold);

}



.price-calculator h4 {

    font-size: 1rem;

    margin-bottom: var(--spacing-sm);

    color: var(--color-gold);

}



.price-row {

    display: flex;

    justify-content: space-between;

    padding: var(--spacing-xs) 0;

    font-size: 0.95rem;

    color: var(--color-gray-light);

}



.price-row.total {

    border-top: 1px solid var(--color-black-lighter);

    margin-top: var(--spacing-xs);

    padding-top: var(--spacing-sm);

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--color-white);

}



.price-row.total span:last-child {

    color: var(--color-gold);

}



/* ============================================

   AVAILABILITY CALENDAR

   ============================================ */

.availability-section {

    padding: var(--spacing-xxl) 0;

    background: var(--color-black-light);

}



.calendar-container {

    max-width: 800px;

    margin: 0 auto;

    background: var(--color-black);

    border-radius: var(--radius-lg);

    padding: var(--spacing-lg);

    border: 1px solid var(--color-black-lighter);

}



.calendar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: var(--spacing-md);

}



.calendar-header h3 {

    font-size: 1.3rem;

}



.calendar-nav {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: 1px solid var(--color-gray-dark);

    color: var(--color-white);

    border-radius: 50%;

    cursor: pointer;

    transition: var(--transition-normal);

}



.calendar-nav:hover {

    background: var(--color-gold);

    border-color: var(--color-gold);

    color: var(--color-black);

}



.calendar-legend {

    display: flex;

    justify-content: center;

    gap: var(--spacing-lg);

    margin-bottom: var(--spacing-md);

}



.legend-item {

    display: flex;

    align-items: center;

    gap: var(--spacing-xs);

    font-size: 0.85rem;

    color: var(--color-gray-light);

}



.dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

}



.dot.available { background: var(--color-success); }

.dot.booked { background: var(--color-error); }

.dot.limited { background: var(--color-gold); }



.calendar-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 8px;

}



.calendar-day-name {

    text-align: center;

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--color-gold);

    padding: var(--spacing-xs);

}



.calendar-day {

    aspect-ratio: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.9rem;

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition: var(--transition-normal);

}



.calendar-day.empty {

    cursor: default;

}



.calendar-day.available {

    background: rgba(40, 167, 69, 0.2);

    color: var(--color-success);

}



.calendar-day.available:hover {

    background: var(--color-success);

    color: var(--color-white);

}



.calendar-day.booked {

    background: rgba(220, 53, 69, 0.2);

    color: var(--color-error);

    cursor: not-allowed;

}



.calendar-day.limited {

    background: rgba(212, 175, 55, 0.2);

    color: var(--color-gold);

}



.calendar-day.limited:hover {

    background: var(--color-gold);

    color: var(--color-black);

}



.calendar-day.today {

    border: 2px solid var(--color-gold);

}



/* Interactive Calendar Enhancements */

.calendar-day.past {

    background: rgba(100, 100, 100, 0.1);

    color: var(--color-gray);

    cursor: not-allowed;

}



.calendar-day.weekend {

    opacity: 0.9;

}



.calendar-day.selected {

    background: var(--color-gold) !important;

    color: var(--color-black) !important;

    font-weight: 600;

}



.calendar-day.range-start {

    border-radius: var(--radius-sm) 0 0 var(--radius-sm);

}



.calendar-day.range-end {

    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

}



.calendar-day.in-range {

    background: rgba(212, 175, 55, 0.3);

    color: var(--color-gold);

    border-radius: 0;

}



.calendar-day .day-number {

    position: relative;

    z-index: 1;

}



.calendar-day .availability-dot {

    position: absolute;

    bottom: 4px;

    left: 50%;

    transform: translateX(-50%);

    width: 6px;

    height: 6px;

    border-radius: 50%;

}



.availability-dot.limited {

    background: var(--color-gold);

}



.availability-dot.full {

    background: var(--color-error);

}



/* Calendar Tooltip */

.calendar-tooltip {

    position: fixed;

    background: var(--color-black);

    color: var(--color-white);

    padding: 0.5rem 0.8rem;

    border-radius: var(--radius-sm);

    font-size: 0.8rem;

    z-index: 1000;

    pointer-events: none;

    opacity: 0;

    transform: translateY(5px);

    transition: opacity 0.2s, transform 0.2s;

    box-shadow: var(--shadow-lg);

    border: 1px solid var(--color-gold);

    white-space: nowrap;

}



.calendar-tooltip.visible {

    opacity: 1;

    transform: translateY(0);

}



/* Calendar Legend */

.calendar-legend {

    display: flex;

    justify-content: center;

    gap: var(--spacing-lg);

    margin-top: var(--spacing-md);

    flex-wrap: wrap;

}



.legend-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.8rem;

    color: var(--color-gray-light);

}



.legend-color {

    width: 16px;

    height: 16px;

    border-radius: var(--radius-sm);

}



.legend-color.available {

    background: rgba(40, 167, 69, 0.3);

    border: 1px solid var(--color-success);

}



.legend-color.limited {

    background: rgba(212, 175, 55, 0.3);

    border: 1px solid var(--color-gold);

}



.legend-color.booked {

    background: rgba(220, 53, 69, 0.3);

    border: 1px solid var(--color-error);

}



.legend-color.selected {

    background: var(--color-gold);

}



/* Clear Selection Button */

.calendar-actions {

    display: flex;

    justify-content: center;

    margin-top: var(--spacing-md);

}



.btn-clear-selection {

    background: transparent;

    border: 1px solid var(--color-gray);

    color: var(--color-gray-light);

    padding: 0.4rem 1rem;

    border-radius: var(--radius-full);

    font-size: 0.8rem;

    cursor: pointer;

    transition: var(--transition-fast);

}



.btn-clear-selection:hover {

    border-color: var(--color-gold);

    color: var(--color-gold);

}



/* ============================================

   CONTACT SECTION

   ============================================ */

.contact {

    padding: var(--spacing-xxl) 0;

    background: var(--color-black);

}



.contact-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-xxl);

}



.contact-info .section-subtitle,

.contact-info .section-title {

    text-align: left;

}



.contact-info > p {

    font-size: 1.1rem;

    margin-bottom: var(--spacing-xl);

}



.contact-details {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-lg);

    margin-bottom: var(--spacing-xl);

}



.contact-item {

    display: flex;

    gap: var(--spacing-md);

}



.contact-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-gold);

    color: var(--color-black);

    border-radius: 50%;

    flex-shrink: 0;

}



.contact-item h4 {

    font-size: 1rem;

    margin-bottom: 0.3rem;

}



.contact-item p {

    font-size: 0.95rem;

    margin-bottom: 0;

}



.social-links {

    display: flex;

    gap: var(--spacing-sm);

}



.social-link {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-black-light);

    color: var(--color-white);

    border-radius: 50%;

    font-size: 1.1rem;

    transition: var(--transition-normal);

}



.social-link:hover {

    background: var(--color-gold);

    color: var(--color-black);

}



/* Map Container */

.map-container {

    position: relative;

    margin-top: var(--spacing-lg);

    border-radius: var(--radius-md);

    overflow: hidden;

    height: 200px;

}



.google-map {

    width: 100%;

    height: 100%;

    background: var(--color-black-light);

}



.google-map iframe {

    width: 100%;

    height: 100%;

    border: none;

    filter: grayscale(80%) invert(90%);

}



.map-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(10, 10, 10, 0.8);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: var(--spacing-sm);

    cursor: pointer;

    transition: var(--transition-normal);

}



.map-overlay i {

    font-size: 2rem;

    color: var(--color-gold);

}



.map-overlay span {

    color: var(--color-white);

    font-size: 0.9rem;

}



.map-overlay:hover {

    background: rgba(10, 10, 10, 0.6);

}



.map-overlay.hidden {

    display: none;

}



.contact-form {

    background: var(--color-black-light);

    padding: var(--spacing-xl);

    border-radius: var(--radius-lg);

    border: 1px solid var(--color-black-lighter);

}



/* ============================================

   FOOTER

   ============================================ */

.footer {

    background: var(--color-black-light);

    padding: var(--spacing-xxl) 0 var(--spacing-lg);

    border-top: 1px solid var(--color-black-lighter);

}



.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.5fr;

    gap: var(--spacing-xl);

    margin-bottom: var(--spacing-xl);

}



.footer-about .logo {

    margin-bottom: var(--spacing-md);

}



.footer-about .logo-text {

    color: #ffffff;

}



.footer-about p {

    font-size: 0.95rem;

}



.footer-links h4,

.footer-newsletter h4 {

    font-size: 1.1rem;

    margin-bottom: var(--spacing-md);

    color: var(--color-gold);

}



.footer-links ul {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

}



.footer-links a {

    font-size: 0.95rem;

    color: var(--color-gray-light);

    transition: var(--transition-normal);

}



.footer-links a:hover {

    color: var(--color-gold);

}



.footer-newsletter p {

    font-size: 0.95rem;

    margin-bottom: var(--spacing-md);

}



.newsletter-form {

    display: flex;

    gap: var(--spacing-xs);

}



.newsletter-form input {

    flex: 1;

    padding: 0.8rem 1rem;

    background: var(--color-black);

    border: 1px solid var(--color-black-lighter);

    border-radius: var(--radius-sm);

    color: var(--color-white);

    font-family: var(--font-secondary);

}



.newsletter-form input:focus {

    outline: none;

    border-color: var(--color-gold);

}



.newsletter-form button {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-gold);

    border: none;

    border-radius: var(--radius-sm);

    color: var(--color-black);

    cursor: pointer;

    transition: var(--transition-normal);

}



.newsletter-form button:hover {

    background: var(--color-gold-light);

}



.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: var(--spacing-lg);

    border-top: 1px solid var(--color-black-lighter);

}



.footer-bottom p {

    font-size: 0.9rem;

    margin-bottom: 0;

}



.footer-bottom-links {

    display: flex;

    gap: var(--spacing-md);

}



.footer-bottom-links a {

    font-size: 0.9rem;

    color: var(--color-gray);

}



.footer-bottom-links a:hover {

    color: var(--color-gold);

}



/* ============================================

   MODAL

   ============================================ */

.modal {

    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: var(--transition-normal);

}



.modal.active {

    opacity: 1;

    visibility: visible;

}



.modal-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.9);

}



.modal-content {

    position: relative;

    width: 90%;

    max-width: 1000px;

    max-height: 90vh;

    background: var(--color-black-light);

    border-radius: var(--radius-lg);

    overflow: hidden;

    transform: scale(0.9);

    transition: var(--transition-normal);

}



.modal.active .modal-content {

    transform: scale(1);

}



.modal-close {

    position: absolute;

    top: var(--spacing-md);

    right: var(--spacing-md);

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-black);

    border: none;

    border-radius: 50%;

    color: var(--color-white);

    font-size: 1.2rem;

    cursor: pointer;

    z-index: 10;

    transition: var(--transition-normal);

}



.modal-close:hover {

    background: var(--color-gold);

    color: var(--color-black);

}



.modal-body {

    display: grid;

    grid-template-columns: 1fr 1fr;

    max-height: 90vh;

    overflow-y: auto;

}



.modal-image-section {

    display: flex;

    flex-direction: column;

}



.modal-image {

    flex: 1;

    min-height: 350px;

}



.modal-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.modal-gallery {

    display: flex;

    gap: 0.5rem;

    padding: var(--spacing-sm);

    background: var(--color-black);

    overflow-x: auto;

}



.gallery-thumb {

    width: 70px;

    height: 50px;

    flex-shrink: 0;

    border-radius: var(--radius-sm);

    overflow: hidden;

    cursor: pointer;

    opacity: 0.6;

    transition: var(--transition-normal);

    border: 2px solid transparent;

}



.gallery-thumb:hover {

    opacity: 0.9;

}



.gallery-thumb.active {

    opacity: 1;

    border-color: var(--color-gold);

}



.gallery-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.modal-info {

    padding: var(--spacing-xl);

    overflow-y: auto;

}



.modal-category {

    display: inline-block;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--color-gold);

    margin-bottom: var(--spacing-sm);

}



.modal-info h2 {

    font-size: 2rem;

    margin-bottom: var(--spacing-md);

}



.modal-description {

    font-size: 1rem;

    margin-bottom: var(--spacing-lg);

}



.modal-specs {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--spacing-sm);

    margin-bottom: var(--spacing-lg);

}



.modal-spec {

    display: flex;

    align-items: center;

    gap: var(--spacing-xs);

    font-size: 0.9rem;

    color: var(--color-gray-light);

}



.modal-spec i {

    color: var(--color-gold);

    width: 20px;

}



.modal-pricing {

    display: flex;

    gap: var(--spacing-md);

    margin-bottom: var(--spacing-lg);

    padding: var(--spacing-md);

    background: var(--color-black);

    border-radius: var(--radius-md);

}



.price-option {

    flex: 1;

    text-align: center;

}



.price-label {

    display: block;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--color-gray);

    margin-bottom: var(--spacing-xs);

}



.price-value {

    display: block;

    font-family: var(--font-primary);

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--color-gold);

}



.price-option .price-period {

    font-size: 0.8rem;

    color: var(--color-gray);

}



.modal-features {

    display: flex;

    flex-wrap: wrap;

    gap: var(--spacing-xs);

    margin-bottom: var(--spacing-lg);

}



.modal-feature {

    display: inline-flex;

    align-items: center;

    gap: 0.3rem;

    padding: 0.4rem 0.8rem;

    background: var(--color-black);

    border-radius: var(--radius-sm);

    font-size: 0.8rem;

    color: var(--color-gray-light);

}



.modal-feature i {

    color: var(--color-gold);

}



.modal-actions {

    display: flex;

    gap: var(--spacing-md);

}



.modal-actions .btn {

    flex: 1;

}



/* Success Modal */

.modal-small {

    max-width: 400px;

}



.success-content {

    text-align: center;

    padding: var(--spacing-xxl);

}



.success-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto var(--spacing-md);

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(40, 167, 69, 0.2);

    border-radius: 50%;

}



.success-icon i {

    font-size: 2.5rem;

    color: var(--color-success);

}



.success-content h3 {

    font-size: 1.8rem;

    margin-bottom: var(--spacing-sm);

}



.success-content p {

    margin-bottom: var(--spacing-lg);

}



/* ============================================

   RESPONSIVE DESIGN

   ============================================ */

@media (max-width: 1200px) {

    .vehicles-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 992px) {

    .features-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .services-grid {

        grid-template-columns: 1fr;

        max-width: 500px;

        margin: 0 auto;

    }

    

    .booking-wrapper {

        grid-template-columns: 1fr;

    }

    

    .booking-info {

        position: static;

        text-align: center;

    }

    

    .booking-info .section-subtitle,

    .booking-info .section-title {

        text-align: center;

    }

    

    .booking-benefits {

        flex-direction: row;

        justify-content: center;

        flex-wrap: wrap;

    }

    

    .contact-wrapper {

        grid-template-columns: 1fr;

    }

    

    .contact-info {

        text-align: center;

    }

    

    .contact-info .section-subtitle,

    .contact-info .section-title {

        text-align: center;

    }

    

    .contact-details {

        max-width: 400px;

        margin: 0 auto var(--spacing-xl);

    }

    

    .contact-item {

        text-align: left;

    }

    

    .social-links {

        justify-content: center;

    }

    

    .modal-body {

        grid-template-columns: 1fr;

    }

    

    .modal-image {

        height: 250px;

        min-height: auto;

    }

}



@media (max-width: 768px) {

    .nav-menu {

        position: fixed;

        top: 0;

        right: -100%;

        width: 100%;

        height: 100vh;

        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: var(--spacing-xl);

        transition: var(--transition-normal);

        z-index: 1000;

        box-shadow: -5px 0 30px rgba(0,0,0,0.1);

    }

    

    .nav-menu.active {

        right: 0;

    }

    

    .nav-menu::before {

        content: '';

        position: absolute;

        top: 30px;

        left: 50%;

        transform: translateX(-50%);

        font-size: 1.5rem;

        color: #1493b3;

        font-weight: 700;

        font-family: var(--font-primary);

    }

    

    .nav-link {

        font-size: 1.5rem;

        font-weight: 600;

        color: #333333;

        background: transparent;

        padding: 15px 40px;

        border-radius: 10px;

        transition: all 0.3s ease;

        position: relative;

    }

    

    .nav-link::before {

        content: '';

        position: absolute;

        left: 0;

        top: 50%;

        transform: translateY(-50%);

        width: 4px;

        height: 0;

        background: linear-gradient(to bottom, #09c6dbe6, #09c6dbe6);

        border-radius: 2px;

        transition: height 0.3s ease;

    }

    

    .nav-link:hover {

        color: #09c6dbe6;

        background: rgba(220, 53, 69, 0.05);

    }

    

    .nav-link:hover::before {

        height: 70%;

    }

    

    .hamburger {

        display: flex;

        z-index: 1001;

        position: relative;

    }

    

    .hamburger span {

        background: #09c6dbe6;

        transition: all 0.3s ease;

    }

    

    .hamburger.active {

        display: none;

    }

    

    .hero-title {

        font-size: 2.5rem;

    }

    

    .hero-title .subtitle {

        font-size: 0.85rem;

        letter-spacing: 1px;

        white-space: nowrap;

    }

    

    .features-grid {

        grid-template-columns: 1fr;

    }

    

    .vehicles-grid {

        grid-template-columns: 1fr;

    }

    

    .form-row {

        grid-template-columns: 1fr;

    }

    

    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

    

    .footer-about .logo {

        justify-content: center;

    }

    

    .footer-links ul {

        align-items: center;

    }

    

    .newsletter-form {

        max-width: 300px;

        margin: 0 auto;

    }

    

    .footer-bottom {

        flex-direction: column;

        gap: var(--spacing-sm);

        text-align: center;

    }

}



@media (max-width: 480px) {

    .hero-buttons {

        flex-direction: column;

        width: 100%;

    }

    

    .hero-buttons .btn {

        width: 100%;

    }

    

    .filter-buttons {

        flex-direction: column;

        align-items: center;

    }

    

    .filter-btn {

        width: 100%;

        max-width: 200px;

    }

    

    .radio-group {

        flex-direction: column;

        gap: var(--spacing-sm);

    }

    

    .calendar-legend {

        flex-direction: column;

        align-items: center;

    }

    

    .modal-actions {

        flex-direction: column;

    }

    

    .benefit {

        flex-direction: column;

        text-align: center;

    }

}



/* ============================================

   LOADING ANIMATION

   ============================================ */

.loading {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: var(--spacing-xxl);

}



.loading-spinner {

    width: 50px;

    height: 50px;

    border: 3px solid var(--color-black-lighter);

    border-top-color: var(--color-gold);

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    to { transform: rotate(360deg); }

}



/* ============================================

   SCROLL REVEAL ANIMATIONS

   ============================================ */

.reveal {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.reveal.active {

    opacity: 1;

    transform: translateY(0);

}



/* Vehicle cards should always be visible when displayed */

.vehicle-card.reveal {

    opacity: 1;

    transform: translateY(0);

}



/* ============================================

   PRINT STYLES

   ============================================ */

@media print {

    /* Hide non-essential elements */

    .navbar,

    .hero,

    .hamburger,

    .modal-overlay,

    .modal-close,

    .btn,

    .social-links,

    .footer,

    .map-container,

    .filter-buttons,

    .advanced-filters,

    .no-print {

        display: none !important;

    }

    

    /* Reset colors for print */

    body {

        background: white !important;

        color: black !important;

        font-size: 12pt;

    }

    

    /* Ensure content is visible */

    .modal {

        position: static !important;

        display: block !important;

    }

    

    .modal-content {

        box-shadow: none !important;

        border: 1px solid #ddd !important;

        border-radius: 0 !important;

        max-width: 100% !important;

        max-height: none !important;

    }

    

    .modal-body {

        display: block !important;

        max-height: none !important;

    }

    

    /* Print-friendly styling */

    h1, h2, h3, h4, h5, h6 {

        color: black !important;

        page-break-after: avoid;

    }

    

    p, li {

        color: #333 !important;

    }

    

    a {

        text-decoration: none;

        color: black !important;

    }

    

    /* Page breaks */

    .page-break {

        page-break-before: always;

    }

    

    /* Invoice print styles */

    .invoice-print {

        padding: 20px;

    }

    

    .invoice-header {

        border-bottom: 2px solid #d4af37;

        margin-bottom: 20px;

        padding-bottom: 10px;

    }

    

    .invoice-table {

        width: 100%;

        border-collapse: collapse;

    }

    

    .invoice-table th,

    .invoice-table td {

        padding: 8px;

        border-bottom: 1px solid #ddd;

        text-align: left;

    }

    

    .invoice-table th {

        background: #f5f5f5;

    }

    

    .invoice-total {

        font-size: 18pt;

        font-weight: bold;

        border-top: 2px solid #d4af37;

        padding-top: 10px;

    }

}



/* ===== MODERN REDESIGN OVERRIDES - LOGJIKA NUK PREKET ===== */

:root{
  --radius-lg:24px;
  --radius-md:16px;
}

body{
  background:#f4f7fb;
}

.navbar.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
}

.vehicle-card{
  border:none !important;
  border-radius:24px !important;
  overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,.08) !important;
}

.vehicle-card:hover{
  transform:translateY(-10px) !important;
}

.vehicle-image{
  height:260px !important;
}

.vehicle-content{
  background:linear-gradient(180deg,#fff,#f8fbff) !important;
}

.specs-grid{
  background:#fff !important;
  border:1px solid #eef2f7;
}

.spec-icon{
  border-radius:12px !important;
}

.vehicle-btn{
  border-radius:14px !important;
}

.vehicles-header{
  background:linear-gradient(135deg,#ffffff,#f3f8ff);
  border-radius:30px;
  margin-bottom:40px;
  box-shadow:0 8px 30px rgba(0,0,0,.06);
}

.stat-item{
  border-radius:20px !important;
}

.booking-wrapper{
  background:#fff;
  border-radius:30px;
  padding:30px;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.booking-form input,
.booking-form select{
  border-radius:14px !important;
  border:1px solid #dde5ef !important;
  background:#f8fbff;
}

.footer{
  background:#111827 !important;
}

.hero{
  position:relative;
}

.hero-overlay{
  background:linear-gradient(135deg,rgba(0,0,0,.75),rgba(4,47,139,.55)) !important;
}

.hero-buttons .btn{
  border-radius:50px;
}

@media(max-width:768px){
  .vehicles-header{
    border-radius:20px;
    padding:20px 15px;
  }

  .booking-wrapper{
    padding:20px;
  }

  .vehicle-image{
    height:220px !important;
  }
}