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

:root {
    --zim-blue: #000000;
    --zim-dark: #0d0d0d;
    --zim-silver: #8892b0;
    --zim-light: #fcfafa;
    --zim-accent: #040791;
    --font-sans: 'Montserrat', sans-serif;
    --font-heading: 'Oswald', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-sans); background-color: var(--zim-blue); color: var(--zim-light); overflow-x: hidden; scroll-behavior: smooth; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); text-transform: uppercase; }
a { text-decoration: none; color: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.text-accent { color: var(--zim-accent); }
.text-silver { color: var(--zim-silver); }
.mb-4 { margin-bottom: 1rem; }
.mt-8 { margin-top: 2rem; }
.glow { text-shadow: 0 0 15px rgba(0, 0, 0, 0.6); }

header { position: fixed; width: 100%; top: 0; z-index: 1000; background: rgba(10, 25, 47, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(136, 146, 176, 0.2); }
.nav-container { display: flex; justify-content: space-between; align-items: center; height: 80px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.logo img { height: 50px; }
.nav-links { display: flex; gap: 25px; align-items: center; }
.nav-links a { font-weight: 600; transition: color 0.3s; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--zim-accent); }

.dropdown { position: relative; }
.dropdown-menu { position: absolute; top: 100%; left: 0; width: 320px; background: white; color: var(--zim-blue); border-radius: 8px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu img { width: 100%; height: 140px; object-fit: cover; }
.dropdown-content { padding: 15px; }
.dropdown-content h4 { margin-bottom: 5px; }
.dropdown-content p { font-size: 0.85rem; color: #555; }

.cart-btn { background: var(--zim-accent); color: white; padding: 10px 20px; border-radius: 4px; border: none; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
.cart-btn:hover { background: #1e40af; }
.cart-count { background: #ef4444; color: white; border-radius: 50%; padding: 2px 8px; font-size: 0.8rem; }
.cart-drawer { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: white; color: var(--zim-blue); z-index: 2000; transition: right 0.3s ease; display: flex; flex-direction: column; box-shadow: -5px 0 15px rgba(0,0,0,0.5); }
.cart-drawer.open { right: 0; }
.cart-header { display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid #ddd; background: #f4f4f4; }
.cart-items { flex: 1; overflow-y: auto; padding: 20px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px; }
.cart-footer { padding: 20px; border-top: 1px solid #ddd; background: #f9f9f9; }
.checkout-btn { width: 100%; background: var(--zim-blue); color: white; padding: 15px; border: none; font-weight: bold; cursor: pointer; transition: 0.3s; }
.checkout-btn:hover { background: #002266; }
.remove-btn { background: none; border: none; color: red; cursor: pointer; font-size: 0.8rem; text-decoration: underline; }

.parallax-section { position: relative; height: 60vh; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center; border-top: 2px solid var(--zim-accent); border-bottom: 2px solid var(--zim-accent); }
.parallax-overlay { position: absolute; inset: 0; background: rgba(2, 12, 27, 0.7); }
.parallax-content { position: relative; z-index: 10; max-width: 800px; padding: 20px; }

.hero { height: 100vh; background: url('https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?auto=format&fit=crop&q=80&w=1920') center/cover; display: flex; align-items: center; position: relative; }
.hero-overlay { position: absolute; inset: 0; background: rgba(10, 25, 47, 0.8); }
.hero-content { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; }
.hero h1 { font-size: 4rem; line-height: 1.1; margin-bottom: 20px; }
.hero p { font-size: 1.2rem; color: var(--zim-silver); margin-bottom: 30px; max-width: 600px; }
.btn { padding: 15px 30px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.3s; display: inline-block; text-align: center; }
.btn-primary { background: var(--zim-accent); color: white; border: none; }
.btn-primary:hover { background: #1e40af; box-shadow: 0 0 15px rgba(37, 99, 235, 0.5); }
.btn-outline { background: transparent; color: white; border: 2px solid white; margin-left: 15px; }
.btn-outline:hover { background: white; color: var(--zim-blue); }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 60px 0; }
.service-card { background: white; color: var(--zim-blue); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform 0.3s; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2); }
.service-card img { width: 100%; height: 200px; object-fit: cover; }
.service-info { padding: 20px; text-align: center; }
.service-info h3 { margin-bottom: 10px; font-size: 1.5rem; }
.service-info p { color: #555; font-size: 0.9rem; margin-bottom: 15px; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; padding: 40px 0; }
.product-card { background: white; color: var(--zim-blue); border-radius: 8px; overflow: hidden; transition: 0.3s; display: flex; flex-direction: column; }
.product-card:hover { box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3); }
.product-card img { width: 100%; height: 220px; object-fit: contain; padding: 20px; background: #fff; }
.product-info { padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; border-top: 1px solid #eee; }
.product-price { font-size: 1.2rem; font-weight: bold; color: var(--zim-accent); margin-bottom: 15px; }

/* Fallback Animation - No JS required to show content */
.reveal { animation: fadeInUp 0.8s cubic-bezier(0.5, 0, 0, 1) forwards; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
.cart-count.bounce { animation: bounce 0.5s ease; }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.cart-item { animation: slideInRight 0.3s ease forwards; }

.brand-wrapper { position: relative; display: flex; justify-content: center; }
.brand-card { background: white; color: var(--zim-blue); padding: 30px; text-align: center; border-radius: 8px; width: 200px; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.brand-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.brand-logo { width: 80px; height: 80px; object-fit: contain; margin-bottom: 15px; }
.suv-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background: white; padding: 15px; border-radius: 8px; box-shadow: 0 15px 30px rgba(0,0,0,0.5); display: flex; gap: 15px; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 100; width: max-content; }
.brand-wrapper:hover .suv-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.suv-item { text-align: center; width: 140px; }
.suv-item img { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; margin-bottom: 5px; border: 2px solid transparent; transition: border 0.3s; }
.suv-item:hover img { border: 2px solid var(--zim-accent); }
.suv-item span { font-size: 0.8rem; font-weight: bold; color: var(--zim-blue); display: block; }

footer { background: var(--zim-dark); padding: 60px 0 20px; border-top: 4px solid var(--zim-accent); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 40px; }
.footer-bottom { text-align: center; border-top: 1px solid #333; padding-top: 20px; color: var(--zim-silver); font-size: 0.9rem; }

.map-container iframe { width: 100%; height: 100%; min-height: 400px; border-radius: 8px; border: none; }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px; }
.vision-mission-card { background: var(--zim-dark); padding: 30px; border-radius: 8px; border-left: 4px solid var(--zim-accent); transition: transform 0.3s, box-shadow 0.3s; }
.vision-mission-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 40px 0; }
.value-item { background: white; color: var(--zim-blue); padding: 30px 20px; border-radius: 8px; text-align: center; font-weight: 600; transition: 0.3s; }
.value-item:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.value-item span { display: block; font-size: 2rem; color: var(--zim-accent); margin-bottom: 10px; font-family: var(--font-heading); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; padding: 40px 0; }
.team-member { background: var(--zim-dark); border-radius: 8px; overflow: hidden; text-align: center; border: 1px solid rgba(136, 146, 176, 0.2); transition: 0.3s; }
.team-member:hover { border-color: var(--zim-accent); transform: translateY(-10px); }
.team-member img { width: 100%; height: 300px; object-fit: cover; object-position: top; background: #fff; }
.team-info { padding: 20px; }
.team-info h4 { color: var(--zim-accent); margin-bottom: 5px; font-size: 1.3rem; }
.why-strip { display: flex; justify-content: space-around; flex-wrap: wrap; background: var(--zim-dark); padding: 20px; border-bottom: 2px solid var(--zim-accent); margin-top: 80px; }
.why-item { color: var(--zim-light); font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 10px; margin: 10px; }
.why-item span { color: var(--zim-accent); font-size: 1.5rem; }
.pledge-box { background: linear-gradient(135deg, var(--zim-dark), #112240); border: 1px solid var(--zim-accent); border-radius: 8px; padding: 40px; text-align: center; margin: 40px auto; max-width: 900px; box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15); }
.category-pills { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 30px; }
.category-pill { background: transparent; border: 1px solid var(--zim-silver); color: var(--zim-silver); padding: 8px 20px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; transition: 0.3s; }
.category-pill:hover, .category-pill.active { background: var(--zim-accent); border-color: var(--zim-accent); color: white; }
.footprint-section { background: var(--zim-dark); padding: 60px 20px; border-radius: 8px; border: 1px solid rgba(136, 146, 176, 0.2); text-align: center; margin-bottom: 80px; }
.footprint-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.target-city { background: white; color: var(--zim-blue); padding: 10px 20px; border-radius: 4px; font-weight: bold; font-family: var(--font-heading); }

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero h1 { font-size: 2.5rem; }
    .cart-drawer { width: 100%; right: -100%; }
    .about-grid { grid-template-columns: 1fr; }
    .btn-outline { margin-left: 0; margin-top: 15px; }
    .why-strip { flex-direction: column; align-items: center; }
}/* Mobile Menu Icon (Hidden on Desktop) */
.mobile-menu-btn {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    color: var(--zim-light);
    cursor: pointer;
}

@media (max-width: 768px) {
    /* Hide normal menu on mobile */
    .nav-links { 
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--zim-dark);
        padding: 20px;
        border-bottom: 2px solid var(--zim-accent);
        z-index: 1005;
        gap: 15px; /* Adds space between links */
    }
    
    /* FORCE the menu to show when active */
    .nav-links.active {
        display: flex !important;
    }

    /* Show the hamburger button */
    .mobile-menu-btn {
        display: block; 
    }

    /* Fix the Mega-Menus so they stack nicely on mobile */
    .dropdown { width: 100%; text-align: center; }
    .dropdown-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none; /* Hidden by default */
        margin-top: 10px;
    }
    
    /* Tapping the dropdown toggles it */
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .hero h1 { font-size: 2.5rem; }
    .cart-drawer { width: 100%; right: -100%; }
    .about-grid { grid-template-columns: 1fr; }
    .btn-outline { margin-left: 0; margin-top: 15px; }
    .why-strip { flex-direction: column; align-items: center; }
}
/* --- NEW ADDITIONS FOR SPLASH, SEARCH, WHATSAPP & FIXES --- */

/* Splash Screen */
#splash-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: url('images/splash-bg.jpg') center/cover; /* Change image if you want */
    display: flex; align-items: center; justify-content: center;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}
#splash-screen::before {
    content: ''; position: absolute; inset: 0; background: rgba(0,0,0, 0.85); /* Uses your dark theme */
}
#splash-screen.hidden {
    opacity: 0; visibility: hidden;
}
.splash-content { position: relative; z-index: 10; text-align: center; }

/* Search Bar */
.search-bar { width: 100%; max-width: 500px; margin: 0 auto 30px auto; display: block; padding: 15px 20px; border-radius: 30px; border: 1px solid var(--zim-silver); background: var(--zim-dark); color: var(--zim-light); font-size: 1rem; outline: none; transition: 0.3s; }
.search-bar:focus { border-color: var(--zim-accent); box-shadow: 0 0 10px rgba(4, 7, 145, 0.3); }

/* Floating WhatsApp Widget */
.whatsapp-float {
    position: fixed; bottom: 30px; right: 30px; z-index: 1000;
    background: #25D366; color: white; padding: 12px 24px;
    border-radius: 50px; font-weight: bold; font-size: 1rem;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
}
.whatsapp-float:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(37, 211, 102, 0.6); }
.whatsapp-float svg { width: 24px; height: 24px; fill: currentColor; }

/* Garage Z-Index Fix (Stops Land Rover hiding Nissan) */
.brand-wrapper { position: relative; display: flex; justify-content: center; }
.brand-wrapper:hover { z-index: 100; } 
.suv-dropdown { z-index: 101; }

/* --- MOBILE MENU FIX --- */
@media (max-width: 768px) {
    /* 1. Hide the links by default on mobile */
    .nav-links {
        display: none !important; /* Forces the links to hide */
        flex-direction: column;
        position: absolute;
        top: 80px; /* Drops down right below the header */
        left: 0;
        width: 100%;
        background: var(--zim-dark);
        padding: 20px;
        border-bottom: 2px solid var(--zim-accent);
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
        z-index: 1005;
        gap: 0; /* Remove desktop gap */
    }

    /* 2. Show them when the button is clicked */
    .nav-links.active {
        display: flex !important;
    }

    /* 3. Style the links to look like a clean mobile list */
    .nav-links a {
        width: 100%;
        padding: 15px 0;
        text-align: center;
        border-bottom: 1px solid rgba(136, 146, 176, 0.2);
    }

    /* 4. Fix the dropdowns inside the mobile menu */
    .nav-links .dropdown {
        width: 100%;
        text-align: center;
    }

    .nav-links .dropdown-menu {
        position: static;
        width: 100%;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 10px 0;
        display: block; 
        opacity: 1;
        visibility: visible;
    }
    
    /* Hide the images in the dropdown for a cleaner mobile look */
    .nav-links .dropdown-menu img, 
    .nav-links .dropdown-content p {
        display: none; 
    }
    
    .nav-links .dropdown-content h4 {
        color: var(--zim-accent);
        font-size: 1rem;
        margin-top: 10px;
    }

    /* 5. Show the hamburger button */
    .mobile-menu-btn {
        display: block !important;
        font-size: 2.5rem; /* Made it slightly bigger for touch */
        background: none;
        border: none;
        color: var(--zim-light);
        cursor: pointer;
        z-index: 1010;
    }

    /* Adjust the logo so it doesn't squish */
    .logo img { height: 40px; }
    
    /* Hide the cart text, just show the number */
    .cart-btn { padding: 10px 15px; font-size: 0.9rem; }
}
/* --- ACCESSORIES PAGE STYLES --- */
.accessory-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--zim-silver);
}

.accessory-category {
    margin-bottom: 60px;
}

.accessory-category-title {
    font-size: 2rem;
    color: var(--zim-accent);
    border-bottom: 2px solid var(--zim-accent);
    padding-bottom: 10px;
    margin-bottom: 30px;
    display: inline-block;
}

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

.accessory-item img {
    width: 100%;
    height: 250px;
    object-fit: contain; /* Fits the whole image inside the box */
    background-color: #ffffff; /* Adds a white background for product photos */
    padding: 10px; /* Gives the image some breathing room */
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s, border-color 0.3s;
}

.accessory-item:hover img {
    transform: scale(1.02);
    border-color: var(--zim-accent);
}

.accessory-item h4 {
    font-size: 1.4rem;
    color: var(--zim-light);
    margin-bottom: 10px;
}

.accessory-item p {
    font-size: 0.95rem;
    color: var(--zim-silver);
    line-height: 1.6;
}

/* Mobile adjustment */
@media (max-width: 768px) {
    .accessory-grid { grid-template-columns: 1fr; gap: 30px; }
    .accessory-category-title { font-size: 1.5rem; }
}
/* --- BLOG & COMMUNITY PAGE --- */
.blog-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding-top: 120px; padding-bottom: 80px; }
@media (max-width: 992px) { .blog-layout { grid-template-columns: 1fr; } }

/* Anchor Buttons */
.anchor-menu { display: flex; gap: 15px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.anchor-btn { background: var(--zim-dark); color: var(--zim-light); padding: 10px 20px; border-radius: 30px; border: 1px solid var(--zim-accent); text-decoration: none; transition: 0.3s; }
.anchor-btn:hover { background: var(--zim-accent); color: white; }

/* Social Wall */
.social-wall { background: var(--zim-dark); padding: 20px; border-radius: 8px; margin-bottom: 30px; border: 1px solid rgba(255,255,255,0.1); }
.social-wall h3 { color: var(--zim-accent); margin-bottom: 15px; font-size: 1.2rem; }
.social-post { background: var(--zim-blue); padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 3px solid #1DA1F2; }
.social-post.insta { border-left-color: #E1306C; }
.social-post.fb { border-left-color: #4267B2; }
.social-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: bold; color: white; font-size: 0.9rem; }
.social-header img { width: 30px; height: 30px; border-radius: 50%; }
.social-post p { font-size: 0.9rem; color: var(--zim-silver); }
.social-img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; margin-top: 10px; }

/* Polls */
.poll-box { background: var(--zim-dark); padding: 20px; border-radius: 8px; border: 1px solid var(--zim-accent); margin-bottom: 30px; }
.poll-box h3 { color: white; font-size: 1.2rem; margin-bottom: 15px; }
.poll-option { display: block; width: 100%; background: var(--zim-blue); color: white; padding: 12px; margin-bottom: 10px; border: 1px solid var(--zim-silver); border-radius: 4px; cursor: pointer; text-align: left; transition: 0.3s; }
.poll-option:hover { border-color: var(--zim-accent); background: #1a202c; }
.poll-results { font-size: 0.9rem; color: var(--zim-silver); display: none; margin-top: 10px; }
.poll-bar { height: 8px; background: var(--zim-accent); border-radius: 4px; margin-top: 5px; transition: width 1s ease; }

/* Blog Cards */
.blog-card { background: white; color: var(--zim-blue); border-radius: 8px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); display: flex; flex-direction: column; }
.blog-card img { width: 100%; height: 250px; object-fit: cover; }
.blog-content { padding: 25px; }
.blog-tag { background: var(--zim-accent); color: white; padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; display: inline-block; margin-bottom: 10px; }
.blog-content h2 { margin-bottom: 15px; font-size: 1.8rem; }
.blog-content p { color: #555; line-height: 1.6; margin-bottom: 20px; }

/* Comments Section */
.comments-section { background: var(--zim-dark); padding: 30px; border-radius: 8px; margin-top: 40px; }
.comments-section h3 { color: white; margin-bottom: 20px; font-size: 1.5rem; }
.comment-form { display: flex; gap: 10px; margin-bottom: 30px; }
.comment-form input { flex: 1; padding: 12px; border-radius: 4px; border: 1px solid var(--zim-silver); background: var(--zim-blue); color: white; outline: none; }
.comment-form button { padding: 12px 20px; background: var(--zim-accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.comment { display: flex; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--zim-accent); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; }
.comment-content h4 { color: white; margin-bottom: 5px; font-size: 1rem; }
.comment-content p { color: var(--zim-silver); font-size: 0.95rem; }

/* Gallery Grid */
.gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* Forces 2 columns side-by-side */
    gap: 20px; 
    padding: 20px 0; 
}

.gallery-grid img { 
    width: 100%; 
    height: 250px; 
    object-fit: cover; /* Crops to fill the box beautifully */
    border-radius: 8px; 
    transition: 0.3s; 
    cursor: pointer; 
    border: 2px solid transparent; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.gallery-grid img:hover { 
    transform: scale(1.02); 
    border-color: var(--zim-accent); 
}

/* On mobile phones, stack them in a single column */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}
.gallery-grid img:hover { 
    transform: scale(1.05); 
    border-color: var(--zim-accent); 
}/* --- RIG BUILDER MODAL --- */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Dark background */
    backdrop-filter: blur(5px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: white;
    color: var(--zim-blue);
    width: 100%;
    max-width: 700px;
    border-radius: 12px;
    padding: 40px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #888;
    transition: color 0.3s;
}
.close-modal:hover { color: var(--zim-blue); }

.modal-content h2 {
    font-size: 2.2rem;
    margin-bottom: 5px;
    color: var(--zim-blue);
    text-align: center;
}

.modal-content p.subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

/* Form Styles */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 8px; color: var(--zim-blue); font-size: 0.9rem; }
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--zim-blue);
    background: #f9f9f9;
    transition: border 0.3s;
}
.form-control:focus { outline: none; border-color: var(--zim-accent); background: white; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Accessory Checkboxes (Styled as Cards) */
.accessory-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
}

.accessory-checkbox {
    border: 2px solid #eee;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    background: #f9f9f9;
    font-weight: 600;
    font-size: 0.9rem;
}

.accessory-checkbox:hover {
    border-color: var(--zim-accent);
    background: white;
}

.accessory-checkbox input[type="checkbox"] {
    accent-color: var(--zim-accent);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.accessory-checkbox.selected {
    border-color: var(--zim-accent);
    background: rgba(4, 7, 145, 0.05);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: var(--zim-accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn:hover { background: #1e40af; }

@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; }
    .accessory-options { grid-template-columns: 1fr; }
    .modal-content { padding: 30px 20px; }
}