/* Goshen Auto - Main Theme (Inspired by "Goshen Auto .jpg")
   With integrated Hamburger Menu, new Theme Switcher, Glassmorphism Navbar & Green Accents
*/

/* 1. CSS Variables 
-------------------------------------------------- */
:root {
    /* Primary Brand Colors (Goshen Auto .jpg theme) */
    --brand-primary: #4A55A2; /* Main blue/purple */
    --brand-primary-darker: #3A4280;
    --brand-primary-rgb: 74, 85, 162;

    /* Accent & Secondary Colors */
    --brand-secondary: #7895CB; /* Lighter blue */
    --brand-secondary-darker: #5F7FAF;
    --brand-accent-green: #7AC142; 
    --brand-accent-green-darker: #66A838;
    --brand-light-accent: #F0F3F9; 
    --brand-bg-alt: #F8F9FA;     

    --brand-dark: #1A202C;        
    --brand-text-secondary: #4A5568; 
    --brand-text-light: #FFFFFF;   /* PURE WHITE for text on dark backgrounds */
    --brand-light-gray: #A0AEC0;   

    --brand-white: #FFFFFF;
    --brand-white-rgb: 255, 255, 255;
    --brand-black: #000000;
    --brand-black-rgb: 0, 0, 0;
    --brand-border-color: #E2E8F0;
    --brand-dark-accent: #3A4280;  

    --font-primary: 'Inter', sans-serif;
    --font-base-size: 16px;

    --transition-base: all 0.3s ease-in-out;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Dark Mode Variables */
    --dm-brand-primary: #7895CB;
    --dm-brand-primary-darker: #95ADDC;
    --dm-brand-primary-rgb: 120, 149, 203;
    --dm-brand-secondary: #A0AEC0;
    --dm-brand-secondary-darker: #CBD5E0;
    --dm-brand-accent-green: #8AE04B; 
    --dm-brand-accent-green-darker: #78C240;
    --dm-brand-light-accent: #1F2937; 
    --dm-brand-bg-alt: #2D3748;      
    --dm-brand-dark: #F0F3F9;            /* Light text for headings in dark mode (near white) */
    --dm-brand-text-secondary: #CBD5E0;  /* Default paragraph text in dark mode */
    /* --dm-brand-text-light is intentionally NOT remapped from --brand-text-light if it means pure white */
    --dm-brand-light-gray: #A0AEC0;
    --dm-brand-white: #171923; /* Base dark component background (very dark gray) */
    --dm-brand-white-rgb: 23, 25, 35; 
    --dm-brand-border-color: #4A5568;
    --dm-brand-dark-accent: #7895CB;

    --nav-dropdown-bg-light: rgba(var(--brand-white-rgb), 0.9);
    --nav-dropdown-bg-dark: rgba(var(--dm-brand-white-rgb), 0.85);
    --nav-dropdown-shadow: var(--shadow-lg);

    --switcher-bg-light: var(--brand-white);
    --switcher-bg-dark: var(--dm-brand-white);
    --switcher-icon-color-light: var(--brand-primary);
    --switcher-icon-color-dark: var(--dm-brand-primary);
    --switcher-border-color-light: var(--brand-border-color);
    --switcher-border-color-dark: var(--dm-brand-border-color);
    --switcher-shadow: var(--shadow-md);
    --switcher-shadow-hover: var(--shadow-lg);

    --testimonial-item-width: 280px;
    --testimonial-gap: 20px;

    --gallery-item-width: 250px; /* Adjusted for gallery items */
    --gallery-gap: 20px;

    /* Workshop Header Video Size */
    --video-header-height-desktop: 100vh; /* Full viewport height */
    --video-background-max-width-desktop: 80%; /* 80% width on large screens */
    --video-background-max-width-mobile: 70%; /* 70% width on smaller screens */
}

html.dark-mode {
    --brand-primary: var(--dm-brand-primary);
    --brand-primary-darker: var(--dm-brand-primary-darker);
    --brand-primary-rgb: var(--dm-brand-primary-rgb);
    --brand-secondary: var(--dm-brand-secondary);
    --dm-brand-secondary-darker: var(--dm-brand-secondary-darker);
    --brand-accent-green: var(--dm-brand-accent-green);
    --brand-accent-green-darker: var(--dm-brand-accent-green-darker);
    --brand-light-accent: var(--dm-brand-light-accent);
    --brand-bg-alt: var(--dm-brand-bg-alt);
    --brand-dark: var(--dm-brand-dark);
    --brand-text-secondary: var(--dm-brand-text-secondary);
    /* --dm-brand-text-light is intentionally NOT remapped from --brand-text-light if it means pure white */
    --brand-light-gray: var(--dm-brand-light-gray);
    --brand-white: var(--dm-brand-white);
    --brand-white-rgb: var(--dm-brand-white-rgb);
    --brand-border-color: var(--dm-brand-border-color);
    --dm-brand-dark-accent: var(--dm-brand-dark-accent);
}

/* 2. Global Styles & Resets */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-base-size); scroll-behavior: smooth; }
body {
    font-family: var(--font-primary);
    line-height: 1.65;
    background-color: var(--brand-white);
    color: var(--brand-text-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}
html.dark-mode body {
    background-color: var(--dm-brand-light-accent); 
    color: var(--dm-brand-text-secondary);
}


/* 3. Typography */
h1, h2, h3, h4, h5, h6 { color: var(--brand-dark); font-weight: 700; line-height: 1.3; margin-bottom: 1rem; }
h1 { font-size: clamp(2.5rem, 5vw, 3.2rem); line-height: 1.2; }
h2.section-title { font-size: clamp(2rem, 4vw, 2.5rem); text-align: center; margin-bottom: 1rem; }
h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); }
p { margin-bottom: 1.25rem; font-size: 1rem; }
a { color: var(--brand-primary); text-decoration: none; transition: var(--transition-base); }
a:hover { color: var(--brand-primary-darker); }
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-accent-green { color: var(--brand-accent-green) !important; }

/* 4. Layout & Buttons */
.btn {
    display: inline-block; font-weight: 600; text-align: center; vertical-align: middle;
    cursor: pointer; border: 2px solid transparent; padding: 0.875rem 2rem;
    font-size: 1rem; border-radius: 0.5rem; transition: var(--transition-base);
    box-shadow: var(--shadow-sm); text-transform: capitalize;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.4), var(--shadow-md); }
.btn-primary {
    background-color: var(--brand-primary); color: var(--brand-text-light); border-color: var(--brand-primary);
}
.btn-primary:hover { background-color: var(--brand-primary-darker); color: var(--brand-text-light); border-color: var(--brand-primary-darker); }
.btn-secondary {
    background-color: var(--brand-white); color: var(--brand-primary); border-color: var(--brand-accent-green);
}
.btn-secondary:hover { background-color: var(--brand-primary); color: var(--brand-text-light); }
html.dark-mode .btn-secondary {
    background-color: transparent; color: var(--brand-primary); border-color: var(--brand-accent-green);
}
html.dark-mode .btn-secondary:hover { background-color: var(--brand-primary); color: var(--dm-brand-text-light); }

/* Custom button for Review Form - maintains the gradient look */
.btn-gradient-green {
    background-image: linear-gradient(to right, #4CAF50 0%, #689F38 100%);
    color: white;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
    border: none;
    cursor: pointer;
    outline: none;
}
.btn-gradient-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(76, 175, 80, 0.6);
}
.btn-gradient-green:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(76, 175, 80, 0.2);
}


/* Small button variant for contact page */
.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}


/* === 5. Header & Navigation (Glassmorphism Restored) === */
.header-sticky {
    background-color: rgba(var(--brand-white-rgb), 0.65); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(var(--brand-black-rgb), 0.08);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
html.dark-mode .header-sticky {
    background-color: rgba(var(--dm-brand-white-rgb), 0.55); 
    border-bottom: 1px solid rgba(var(--brand-white-rgb), 0.1);
}

.header-main { display: flex; align-items: center; justify-content: space-between; position: relative; height: 100%; }
.logo-link { font-size: 1.8rem; font-weight: 700; color: var(--brand-primary); transition: color 0.3s ease; font-family: var(--font-primary); }
.logo-link:hover { color: var(--brand-primary-darker); }

.nav-toggler {
    height: 34px; width: 40px; border: none; background-color: transparent;
    display: none; cursor: pointer; z-index: 1001; margin-left: auto; padding: 0;
}
.nav-toggler span {
    display: block; height: 2px; width: 24px;
    background-color: var(--brand-dark); margin: auto; position: relative; transition: background-color 0.3s ease;
}
html.dark-mode .nav-toggler span { background-color: var(--dm-brand-dark); } 
.nav-toggler.active span { background-color: transparent !important; }
.nav-toggler span::before, .nav-toggler span::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 100%;
    background-color: var(--brand-dark);
    transition: top 0.2s ease 0.2s, transform 0.2s ease, background-color 0.3s ease;
}
html.dark-mode .nav-toggler span::before, html.dark-mode .nav-toggler span::after { background-color: var(--dm-brand-dark); }
.nav-toggler span::before { top: -7px; }
.nav-toggler span::after { top: 7px; }
.nav-toggler.active span::before { top: 0; transform: rotate(45deg); transition-delay: 0s, 0.2s; }
.nav-toggler.active span::after { top: 0; transform: rotate(-45deg); transition-delay: 0s, 0.2s; }

nav.nav { display: flex; align-items: center; }
nav.nav ul { list-style: none; display: flex; margin: 0; padding: 0; }
nav.nav li { margin-left: 25px; }
nav.nav a.nav-link {
    font-family: var(--font-primary); color: var(--brand-text-secondary);
    font-weight: 500; transition: color 0.3s ease;
    display: block; padding: 10px 0; position: relative; font-size: 1rem;
}
/* Nav link text color in dark mode */
html.dark-mode nav.nav a.nav-link {
    color: var(--brand-text-light); /* PURE WHITE (#FFFFFF) */
}

nav.nav a.nav-link::before {
    content: ''; height: 2px; width: 0; position: absolute;
    left: 0; bottom: 5px; background-color: var(--brand-primary);
    transition: width 0.3s ease;
}
/* Hover and Active states will use the current theme's --brand-primary */
nav.nav a.nav-link:hover, 
nav.nav a.nav-link.active-link { 
    color: var(--brand-primary); 
}
nav.nav a.nav-link:hover::before, 
nav.nav a.nav-link.active-link::before { 
    width: 100%; 
}


@media (max-width: 767px) {
    .nav-toggler { display: block; }
    nav.nav {
        position: absolute; top: calc(100% + 1px); right: 0;
        width: calc(100% - 30px); max-width: 300px;
        background-color: var(--nav-dropdown-bg-light); 
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border-radius: 0 0 10px 10px;
        box-shadow: 0 8px 25px rgba(var(--brand-black-rgb), 0.1);
        border: 1px solid rgba(var(--brand-black-rgb), 0.05);
        border-top: none;
        overflow: hidden; visibility: hidden; opacity: 0;
        transform: translateY(-15px) scale(0.98);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
        z-index: 999;
    }
    html.dark-mode nav.nav {
        background-color: var(--nav-dropdown-bg-dark);
        box-shadow: 0 8px 25px rgba(var(--brand-black-rgb), 0.3);
        border: 1px solid rgba(var(--brand-white-rgb), 0.1);
        border-top: none;
    }
    nav.nav.active { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }
    nav.nav ul { flex-direction: column; width: 100%; }
    nav.nav li {
        margin-left: 0; text-align: left; border-bottom: 1px solid var(--brand-border-color);
        opacity: 0; /* Start hidden for animation */
        transform: translateX(-20px); /* Start off-screen for animation */
        transition: opacity 0.4s ease, transform 0.4s ease; /* Apply transition here */
        transition-delay: calc(0.05s * var(--item-index, 0));
    }
    html.dark-mode nav.nav li { border-bottom-color: var(--dm-brand-border-color); }
    nav.nav.active li { 
        opacity: 1; /* Make visible when active */
        transform: translateX(0); /* Bring into view when active */
    }
    nav.nav li:last-child { border-bottom: none; }
    nav.nav a.nav-link { 
        padding: 15px 25px; 
        width: 100%; 
        /* Ensure text is visible in mobile menu */
        color: var(--brand-dark); /* Default text color for light theme dropdown */
    }
    html.dark-mode nav.nav a.nav-link {
        color: var(--dm-brand-dark); /* Text color for dark theme dropdown */
    }
    nav.nav a.nav-link.active-link, nav.nav a.nav-link:hover {
        background-color: rgba(var(--brand-primary-rgb), 0.07); 
        color: var(--brand-primary);
    }
    html.dark-mode nav.nav a.nav-link.active-link, html.dark-mode nav.nav a.nav-link:hover {
        background-color: rgba(var(--dm-brand-primary-rgb), 0.1);
        color: var(--dm-brand-primary); /* Ensure highlight color is visible in dark mode */
    }
}

/* 6. Hero Section */
.hero-section { background-color: var(--brand-light-accent); color: var(--brand-dark); padding-top: 5rem; padding-bottom: 5rem;}
.hero-section .hero-text h1 .hero-highlight-original { color: var(--brand-accent-green); }
.hero-section .hero-text p { color: var(--brand-text-secondary); font-size: 1.125rem; }
.hero-section .hero-image-container img { max-width: 100%; height: auto; border-radius: 0.75rem; box-shadow: var(--shadow-xl); }

/* Specific style for Contact page hero section if needed */
.contact-hero-section {
    padding-top: 80px; /* Adjust as needed */
    padding-bottom: 40px; /* Adjust as needed */
}


/* 7. General Section Styling */
.content-section { padding: 60px 0; }
@media (min-width: 768px) { .content-section { padding: 80px 0; } }
.section-subtitle {
    font-size: 1.125rem; color: var(--brand-text-secondary); max-width: 650px;
    margin-left: auto; margin-right: auto; margin-bottom: 3.5rem; text-align: center; line-height: 1.7;
}
.bg-brand-white { background-color: var(--brand-white); }
.bg-brand-bg-alt { background-color: var(--brand-bg-alt); }

/* 8. Specific Sections */
#about .about-content ul li div { color: var(--brand-text-secondary); }
#about .about-content ul li strong { color: var(--brand-dark); margin-bottom: 0.25rem; display: block; }
#about .about-content ul li svg { color: var(--brand-accent-green); width: 1.5em; height: 1.5em; }
#about .about-image-container img { border-radius: 1rem; box-shadow: var(--shadow-lg); }


.service-item {
    background-color: var(--brand-white); border: 1px solid var(--brand-border-color);
    transition: var(--transition-base); box-shadow: var(--shadow-md); border-radius: 1rem;
    padding: 2rem;
}
.service-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.service-item .card-icon-wrapper svg { color: var(--brand-primary); }
.service-item h3 { color: var(--brand-dark); font-size: 1.375rem; margin-top: 0.5rem;}
.service-item p { color: var(--brand-text-secondary); font-size: 0.9375rem; }

.feature-item {
    background-color: var(--brand-white); border: 1px solid var(--brand-border-color);
    transition: var(--transition-base); box-shadow: var(--shadow-sm); border-radius: 0.75rem;
    padding: 1.5rem;
}
.feature-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.feature-item .feature-icon { color: var(--brand-accent-green); }
.feature-item h3 { color: var(--brand-dark); font-size: 1.125rem; }
.feature-item p { color: var(--brand-text-secondary); font-size: 0.9rem; }

.process-step {
    background-color: var(--brand-white); border: 1px solid var(--brand-border-color);
    transition: var(--transition-base); box-shadow: var(--shadow-sm); border-radius: 0.75rem;
    padding: 1.5rem;
}
.process-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.process-step .step-number { color: var(--brand-accent-green); font-size: 2rem; }
.process-step h3 { color: var(--brand-dark); font-size: 1.25rem; }
.process-step p { color: var(--brand-text-secondary); font-size: 0.9rem; }
.process-section .about-image-placeholder img { border-radius: 8px; box-shadow: var(--shadow-lg); border: none; }

/* Testimonial Carousel */
.testimonials-section { position: relative; background-color: var(--brand-bg-alt); }
html.dark-mode .testimonials-section { background-color: var(--dm-brand-bg-alt); }
.testimonial-carousel-wrapper {
    width: 100%; overflow: hidden; margin-top: 2em; cursor: grab; user-select: none; 
    -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none;
}
.testimonial-carousel-wrapper.is-grabbing { cursor: grabbing; }
.testimonial-carousel-track {
    display: flex; position: relative; 
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    will-change: transform;
    padding-bottom: 20px; /* Add some padding at the bottom for better visual separation */
}
.testimonial-item {
    background-color: var(--brand-white); padding: 20px; border-radius: 8px;
    text-align: center; flex-shrink: 0;
    width: var(--testimonial-item-width); margin-right: var(--testimonial-gap);
    box-shadow: var(--shadow-md); min-height: auto; 
    display: flex; flex-direction: column; justify-content: space-between;
    touch-action: pan-y;
}
.testimonial-item:last-child { margin-right: 0; }
html.dark-mode .testimonial-item { background-color: var(--dm-brand-white); box-shadow: 0 5px 15px rgba(var(--brand-black-rgb),0.2);}
.testimonial-item p {
    font-style: italic; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1em; 
    color: var(--brand-text-secondary); flex-grow: 1;
}
.testimonial-author {
    font-weight: 600; 
    color: var(--brand-secondary); 
    font-size: 0.8rem; 
    margin-top: 1em; 
    display: flex; /* Use flexbox to arrange name, date, and stars */
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center horizontally */
}

/* Styles for the displayed stars within testimonials */
.testimonial-author .review-stars {
    color: #FFD700; /* Gold color for stars */
    font-size: 1.1rem; /* Slightly larger stars for emphasis */
    margin-top: 5px; /* Space between date and stars */
    line-height: 1; /* Ensure stars don't add extra line height */
}

/* Style for the date in testimonials */
.testimonial-author .review-date {
    color: var(--brand-text-secondary); /* Use a subtle color for the date */
    font-size: 0.75rem; /* Smaller font size for the date */
    margin-top: 2px; /* Small space below the name */
}


#reviews-container-fallback .testimonial-item { margin-bottom: 1.5rem; display: inline-block; width: var(--testimonial-item-width); }

/* Gallery Section Styles - Now a Carousel */
.gallery-section {
    background-color: var(--brand-white);
}
html.dark-mode .gallery-section {
    background-color: var(--dm-brand-white); /* Adjust for dark mode */
}

.gallery-carousel-wrapper {
    width: 100%; 
    overflow: hidden; 
    margin-top: 2em; 
    cursor: grab; 
    user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    -moz-user-select: none;
}
.gallery-carousel-wrapper.is-grabbing { cursor: grabbing; }

.gallery-carousel-track {
    display: flex; 
    position: relative; 
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    will-change: transform;
    padding-left: 1.5rem; /* Match container padding for start */
    padding-right: 1.5rem; /* Match container padding for end */
    padding-bottom: 20px; /* Add some padding at the bottom */
}

/* Adjust padding for smaller screens if needed */
@media (min-width: 640px) { /* sm breakpoint */
    .gallery-carousel-track {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .gallery-carousel-track {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}


.gallery-item {
    background-color: var(--brand-white); /* Background for the card */
    flex-shrink: 0;
    width: var(--gallery-item-width); /* Defined in variables */
    height: 200px; /* Consistent height for all items */
    margin-right: var(--gallery-gap); /* Defined in variables */
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    display: flex; /* To center content if needed */
    align-items: center;
    justify-content: center;
    position: relative; /* Needed for play button overlay */
}
html.dark-mode .gallery-item {
    background-color: var(--dm-brand-bg-alt); /* Slightly lighter than dark body for item background */
    border: 1px solid var(--dm-brand-border-color);
    box-shadow: 0 5px 15px rgba(var(--brand-black-rgb),0.2);
}

.gallery-item:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: var(--shadow-xl);
}

.gallery-item img, .gallery-item video { /* Apply to both images and videos */
    width: 100%;
    height: 100%; /* Fill the item height */
    object-fit: cover; /* Ensures content covers the area without distortion */
    display: block;
    transition: transform 0.3s ease;
    border-radius: 0.75rem; /* Inherit border-radius from parent */
}

.gallery-item img:hover, .gallery-item video:hover { /* Apply to both images and videos */
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Play button overlay for video items */
.gallery-item.video-item .play-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1; /* Always visible */
    transition: background-color 0.3s ease;
    border-radius: 0.75rem; /* Match item border-radius */
}

.gallery-item.video-item .play-button-overlay:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.gallery-item.video-item .play-button-overlay i {
    font-size: 3rem; /* Large play icon */
    color: var(--brand-text-light); /* White color */
    opacity: 0.9;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.gallery-item.video-item .play-button-overlay:hover i {
    transform: scale(1.1);
    opacity: 1;
}

/* Gallery Modal for Fullscreen Image/Video */
.gallery-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(var(--brand-black-rgb), 0.9); /* Black w/ opacity */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fadeIn 0.3s;
    display: flex; /* Use flex for centering content */
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Stack image/video and caption */
}

/* Modal Content (Image/Video) Container */
#modalContentContainer {
    max-width: 90%;
    max-height: 90%;
    display: flex; /* To center the media element */
    align-items: center;
    justify-content: center;
}

#modalContentContainer img, #modalContentContainer video {
    max-width: 100%;
    max-height: 100%;
    width: auto; /* Allow natural aspect ratio */
    height: auto; /* Allow natural aspect ratio */
    object-fit: contain; /* Ensures content covers the area without distortion */
    animation: zoomIn 0.3s;
    display: block; /* Remove extra space below inline elements */
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Caption of Modal Image/Video */
#caption {
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: var(--brand-light-gray);
    padding: 10px 0;
    margin-top: 10px; /* Space between media and caption */
    font-size: 1.1rem;
}

/* Close Button */
.close-gallery-modal {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--brand-white);
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-gallery-modal:hover,
.close-gallery-modal:focus {
    color: var(--brand-primary);
    text-decoration: none;
    cursor: pointer;
}

/* Responsive adjustments for gallery carousels */
@media (max-width: 767px) { /* Tablets and smaller */
    .gallery-item {
        width: 180px; 
        height: 135px; /* Maintain 4:3 aspect ratio */
    }
    .gallery-carousel-track {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
@media (max-width: 480px) { /* Smaller mobile screens */
    .gallery-item {
        width: 140px; 
        height: 105px; /* Maintain 4:3 aspect ratio */
        margin-right: 15px; /* Reduce gap */
    }
    .gallery-carousel-track {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .gallery-item.video-item .play-button-overlay i {
        font-size: 2rem; /* Smaller play icon */
    }
}


/* CTA Section */
.cta-section { text-align: center; }
.cta-section h2.section-title { font-size: clamp(2rem, 4vw, 2.8rem); }
.cta-section p.section-subtitle { font-size: 1.1rem; max-width: 600px; margin: 0 auto 2.5em; }
.cta-section .btn-primary { padding: 16px 40px; font-size: 1.1rem; }

/* 9. Footer */
.footer-section { background-color: var(--brand-dark); color: var(--brand-light-gray); }
.footer-section h3, .footer-section h4 { color: var(--brand-white); font-size: 1.25rem; }
.footer-section p, .footer-section li, .footer-section a { font-size: 0.9rem; }
.footer-section a { color: var(--brand-light-gray); }
.footer-section a:hover { color: var(--brand-primary); }
.footer-section .border-t { border-color: rgba(var(--brand-white-rgb), 0.15); }
html.dark-mode .footer-section { background-color: var(--dm-brand-white); color: var(--brand-light-gray); }
html.dark-mode .footer-section h3, html.dark-mode .footer-section h4 { color: var(--dm-brand-dark); }
html.dark-mode .footer-section a:hover { color: var(--dm-brand-primary); }
html.dark-mode .footer-section .border-t { border-color: rgba(var(--dm-brand-dark-rgb), 0.2); }

/* 10. Modal */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(var(--brand-dark-rgb, 26, 32, 44), 0.75);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    z-index: 2000; padding: 20px;
}
.modal-content {
    background-color: var(--brand-white); color: var(--brand-text-secondary);
    padding: 30px 35px; border-radius: 12px; box-shadow: var(--shadow-xl);
    border: 1px solid var(--brand-border-color); width: 90%; max-width: 500px;
    position: relative; animation: fadeInModal 0.4s ease-out;
}
@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-25px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-content .close-button {
    position: absolute; top: 15px; right: 20px; font-size: 1.8rem; font-weight: bold;
    line-height: 1; color: var(--brand-text-secondary); background: none;
    border: none; cursor: pointer; transition: color 0.3s ease;
}
.modal-content .close-button:hover { color: var(--brand-dark); }
#modalMessageText { text-align: center; font-size: 1.1rem; }
#modalMessageText.text-brand-primary { color: var(--brand-primary) !important; }
#modalMessageText.text-red-600 { color: #e53e3e !important; }

/* 11. Theme Switcher Button */
.theme-switcher {
    position: fixed; bottom: 25px; right: 25px;
    width: 50px; height: 50px; border-radius: 50%;
    background-color: var(--switcher-bg-light);
    color: var(--switcher-icon-color-light);
    border: 1px solid var(--switcher-border-color-light);
    box-shadow: var(--switcher-shadow);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 1001;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    overflow: hidden; font-size: 1.5rem;
}
html.dark-mode .theme-switcher {
    background-color: var(--switcher-bg-dark);
    color: var(--switcher-icon-color-dark);
    border: 1px solid var(--switcher-border-color-dark);
    box-shadow: var(--switcher-shadow-dark);
}
.theme-switcher:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: var(--switcher-shadow-hover);
}
.theme-switcher .icon-moon,
.theme-switcher .icon-sun {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.theme-switcher .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); } 
.theme-switcher .icon-sun { opacity: 0; transform: scale(0) rotate(-90deg); } 
html.dark-mode .theme-switcher .icon-moon { opacity: 0; transform: scale(0) rotate(-90deg); }
html.dark-mode .theme-switcher .icon-sun { opacity: 1; transform: scale(1) rotate(0deg); }

/* 12. Animations */
.animate-image-rtl {
    opacity: 0; transform: translateX(100px);
    transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animate-image-rtl.is-visible { opacity: 1; transform: translateX(0); }
.animate-on-scroll {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.about-text.slide-in-left,
.about-image-placeholder.slide-in-right {
    opacity: 0; transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.about-text.slide-in-left { transform: translateX(-50px); }
.about-image-placeholder.slide-in-right { transform: translateX(50px); }
.about-text.slide-in-left.is-visible,
.about-image-placeholder.slide-in-right.is-visible {
    opacity: 1; transform: translateX(0);
}
.about-section .section-intro-text.is-visible .section-headline,
.about-section .section-intro-text.is-visible .section-subheadline.about-intro-p {
    opacity: 1; transform: translateY(0);
}
.about-section .section-intro-text .section-headline,
.about-section .section-intro-text .section-subheadline.about-intro-p {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
}

/* Contact Page Specific Styles */
.contact-details-section .contact-card {
    background-color: var(--brand-white);
    border: 1px solid var(--brand-border-color);
    transition: var(--transition-base);
}
html.dark-mode .contact-details-section .contact-card {
    background-color: var(--dm-brand-bg-alt);
    border-color: var(--dm-brand-border-color);
}
.contact-details-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-details-section .map-container {
    height: 300px;
    width: 100%;
}
.contact-details-section .map-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}

.contact-details-section ul.space-y-4 li > div {
    display: flex;
    align-items: flex-start; /* Align icon and text at the top */
}

/* Workshop Page Specific Styles */
.hero-video-section {
    position: relative;
    width: 100%;
    height: var(--video-header-height-desktop); /* Use variable for full height */
    overflow: hidden;
    background-color: black; /* Fallback background */
    transition: background-color 0.5s ease-out;
    display: flex; /* Use flex to center video vertically */
    align-items: center; /* Center video vertically */
    justify-content: center; /* Center video horizontally */
}
.hero-video-section.scrolled .video-background {
    opacity: 0;
}

.video-background {
    /* Remove absolute positioning and transforms here, let flex handle centering */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    min-width: 100%;
    min-height: 100%;
    width: var(--video-background-max-width-desktop); /* Max width for desktop */
    height: auto;
    z-index: 0;
    /* -ms-transform: translateX(-50%) translateY(-50%); */
    /* -moz-transform: translateX(-50%) translateY(-50%); */
    /* -webkit-transform: translateX(-50%) translateY(-50%); */
    /* transform: translateX(-50%) translateY(-50%); */
    object-fit: cover; /* Ensures video fills, cropping if necessary */
    transition: opacity 1s ease-out; /* Smooth fade-out */
}

.video-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    transition: opacity 1s ease-out; /* Match video fade */
}
.hero-video-section.scrolled .video-overlay {
    opacity: 0; /* Fade out overlay too */
}


.video-content {
    position: absolute;
    inset: 0; /* Cover the whole section */
    z-index: 1; /* Above video and overlay */
    display: flex;
    flex-direction: column; /* Stack text elements vertically */
    align-items: center; /* Center horizontally */
    justify-content: flex-start; /* Align content to the top */
    padding-top: 8rem; /* Space from the top, pushing content down */
    text-align: center; /* Ensure text remains centered */
}

/* Content sections that fade in */
.workshop-content-sections {
    opacity: 0;
    transform: translateY(50px); /* Start slightly below */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.workshop-content-sections.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Adjust gallery item height for video items to be consistent */
.videos-gallery-section .gallery-item {
    height: 200px; /* Same height as image gallery items */
}
.videos-gallery-section .gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 767px) { /* Tablets and smaller */
    .contact-details-section .map-container {
        height: 250px;
    }
    .contact-details-section .btn-small {
        margin-left: 0 !important; /* Override ml-4 for mobile */
    }
    /* Adjusted gallery item size for smaller tablets/larger phones */
    .gallery-item {
        width: 180px; 
        height: 135px; /* Maintain 4:3 aspect ratio */
    }
    .gallery-carousel-track {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* Reduce padding on video content for smaller screens */
    .video-content {
        padding-top: 6rem; /* Less top padding for smaller screens */
    }

    /* Video header adjustments for smaller screens */
    .hero-video-section {
        height: 70vh; /* Adjust height for smaller screens */
    }
    .video-background {
        width: var(--video-background-max-width-mobile); /* 70% width on smaller screens */
    }
}
@media (max-width: 480px) { /* Smaller mobile screens */
    .contact-details-section .map-container {
        height: 200px;
    }
    /* Further adjusted gallery item size for small mobile screens */
    .gallery-item {
        width: 140px; 
        height: 105px; /* Maintain 4:3 aspect ratio */
        margin-right: 15px; /* Reduce gap */
    }
    .gallery-carousel-track {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .gallery-item.video-item .play-button-overlay i {
        font-size: 2rem; /* Smaller play icon */
    }
    /* Further reduce padding on video content for very small screens */
    .video-content {
        padding-top: 5rem; /* Minimal top padding */
    }
}

/* --- Review Form Specific Styles (Copied from previous immersive) --- */

.review-form-section {
    padding: 20px;
    border: 1px solid var(--brand-border-color); /* Use existing border color variable */
    border-radius: 10px;
    background-color: var(--brand-white); /* Use existing brand white variable */
}
html.dark-mode .review-form-section {
    background-color: var(--dm-brand-white); /* Dark mode background */
    border-color: var(--dm-brand-border-color);
}

/* Input fields within the review form */
.review-form-section input[type="text"],
.review-form-section textarea {
    background-color: var(--brand-white); /* Ensure white background in light mode */
    color: var(--brand-dark); /* Dark text for inputs */
    border: 1px solid var(--brand-border-color);
}
html.dark-mode .review-form-section input[type="text"],
html.dark-mode .review-form-section textarea {
    background-color: var(--dm-brand-bg-alt); /* Darker background for inputs in dark mode */
    color: var(--dm-brand-dark); /* Light text for inputs in dark mode */
    border-color: var(--dm-brand-border-color);
}
.review-form-section input:focus,
.review-form-section textarea:focus {
    border-color: var(--brand-accent-green); /* Green accent on focus */
    box-shadow: 0 0 0 2px rgba(var(--brand-accent-green-rgb), 0.2); /* Soft green ring */
}


/* Star rating container: Using RTL direction to visually reverse the order of HTML elements (5 down to 1)
   so they appear LTR (1 to 5) while allowing CSS sibling selectors to work for LTR fill. */
.star-rating {
    /* Removed display: flex to ensure it behaves as a block element */
    /* Removed justify-content: flex-start */
    direction: rtl; /* Crucial for visual LTR ordering with reversed HTML input order */
    unicode-bidi: isolate; /* Ensures text direction handling */
    text-align: left; /* Align children (stars) to the left within this container */
    padding-top: 5px; /* Add some padding above the stars if needed */
}

/* Hide the actual radio buttons */
.star-rating > input[type="radio"] {
    display: none;
}

/* Styles for individual star labels */
.star-rating > label {
    font-size: 24px;
    color: #ccc; /* Default color for empty stars */
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.2s ease-in-out;
    direction: ltr; /* Ensures the star character itself is not flipped */
    display: inline-block; /* Allows side-by-side placement within RTL container */
}

/* Fill stars from left to right when hovered or checked */
/* Selects the hovered label and all labels that come after it in the DOM (which are visually to its left) */
.star-rating > label:hover,
.star-rating > label:hover ~ label {
    color: #ffc107; /* Gold color for hovered stars */
}

/* Selects the checked radio button's label and all labels that come after it in the DOM (which are visually to its left) */
.star-rating > input[type="radio"]:checked ~ label,
.star-rating > input[type="radio"]:checked ~ label ~ label {
    color: #ffc107; /* Gold color for checked stars */
}

/* Reset hover effect for stars *after* a checked star if moving hover to their right (visual LTR) */
/* This ensures that if a lower rating is checked, hovering a higher star correctly colors only up to the hovered star */
.star-rating > label:hover ~ input[type="radio"]:checked ~ label {
    color: #ccc;
}


/* Loading Overlay and Message Box Styles - adjusted to fit existing modals */
/* The .modal, .modal-content, .close-button are already defined in your CSS.
   I've ensured the JS functions utilize these existing elements.
   The loading overlay is new, so its styling is here. */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--brand-white-rgb), 0.8); /* Semi-transparent white */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2002; /* Higher than other modals */
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.3s ease;
}
html.dark-mode .loading-overlay {
    background: rgba(var(--dm-brand-white-rgb), 0.8); /* Semi-transparent dark in dark mode */
}
.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}
.loading-overlay .animate-spin {
    border-color: var(--brand-primary); /* Use brand primary color for spinner */
    border-top-color: transparent;
}
html.dark-mode .loading-overlay .animate-spin {
    border-color: var(--dm-brand-primary); /* Dark mode spinner color */
    border-top-color: transparent;
}