/**
 * Custom CSS for VYNLII website
 */

/* ==========================================================================
   1. CSS Custom Properties (Variables)
   ========================================================================== */
:root {
    --color-primary: #0F172A;
    --color-primary-hover: #1E293B;
    --color-secondary: #EF4444;
    --color-secondary-hover: #DC2626;
    --color-light-gray: #F8FAFC;
    --color-light-gray-hover: #f3f4f6; /* For .close-modal:hover */
    --color-medium-gray: #bbb;
    --color-border-gray: #94A3B8;
    --color-text-gray: #64748B;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-black-rgb: 0, 0, 0; /* For rgba() usage */
    --color-focus-shadow: rgba(239, 68, 68, 0.2); /* From secondary color */
}

/* ==========================================================================
   2. Global Styles
   ========================================================================== */
/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   3. Layout Styles
   ========================================================================== */

/* Header navigation styling - Note: This is within a media query, consider if it's purely layout or component */
/* Moved to Responsive section for now if it's mainly a responsive override */

/* Custom styling for the hero section */
#hero-section {
    position: relative;
    background-position: center;
    background-size: cover;
}

/* Parallax effect for hero section (Utility-like, but related to hero) */
.parallax { /* Consider if this should be #hero-section.parallax or similar if only for hero */
    background-attachment: fixed;
}

/* Custom styling for the newsletter section */
.newsletter-section {
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/newsletter-bg.jpg') center center/cover no-repeat;
    opacity: 0.1;
    z-index: -1;
}

/* Custom styling for the footer */
footer a:hover {
    padding-left: 5px;
    transition: padding 0.3s ease;
}

/* Make the marketplace section smaller */
.marketplace-section { /* This seems like a specific section styling */
    transform: scale(0.9);
    transform-origin: center top;
}


/* ==========================================================================
   4. Component Styles
   ========================================================================== */

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    border: 2px solid var(--color-primary);
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Cards (Product & Feature) */
/* General hover for cards that might use this effect */
.product-card:hover, /* Assuming .product-card is a class applied to product card items */
.feature-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.feature-card i {
    transition: transform 0.3s ease;
}

.feature-card:hover i {
    transform: scale(1.2);
}

/* Product card specific styling using more semantic classes */
/* Note: HTML should be updated to use .product-card-item, .product-card-content, .product-card-description */
.product-card-item { /* Replaces #product-grid > div */
    height: 100%;
    display: flex;
    flex-direction: column;
    /* If .product-card class is added to these items, the hover effect above will apply */
}

/* .product-image is assumed to be a class directly on the image container within .product-card-item */
.product-card-item .product-image {
    flex-shrink: 0;
}

.product-card-content { /* Replaces #product-grid > div > div.p-6 */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* If this element had the Tailwind 'p-6' class, those styles would still apply from Tailwind. */
    /* This custom CSS block is for structural overrides or additions. */
}

.product-card-description { /* Replaces #product-grid > div > div.p-6 > p */
    flex-grow: 1;
    margin-bottom: 1rem;
}

/* .marketplace-button is assumed to be a class on the button within .product-card-item or .product-card-content */
.product-card-item .marketplace-button {
    margin-top: auto;
}

/* Forms & Form Elements */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px var(--color-focus-shadow);
}

/* Custom decal form */
.custom-decal-form label {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.file-upload-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.file-upload-btn {
    border: 2px dashed var(--color-border-gray);
    color: var(--color-text-gray);
    background-color: var(--color-white);
    padding: 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.file-upload-input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Modals (Lightbox & Marketplace Modal) */
/* Product gallery lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-black-rgb), 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Consider a z-index variable */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    /* max-width: 90%; Tailwind max-w-[80vw] in JS is used */
    /* max-height: 90%; Tailwind max-h-[80vh] in JS is used */
    width: 100%; /* Allow it to fill parent before being constrained by max-width/max-height */
    height: 100%; /* Ensure lightbox content takes available height, constrained by max-h */
    /* background-color: blue !important; /* Diagnostic REMOVED */
}

.lightbox-close { /* This is specific to the JS-created lightbox */
    position: absolute;
    top: -40px; /* Consider variables for spacing */
    right: -40px;
    font-size: 30px;
    color: var(--color-white);
    cursor: pointer;
}
/* Lightbox Navigation Arrows */
.lightbox-nav {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--color-white);
    border: none;
    font-size: 1.8rem; /* Slightly adjusted */
    height: 44px; /* Explicit height */
    width: 44px;  /* Explicit width for a more button-like feel */
    appearance: none; /* Remove default system styling */
    box-sizing: border-box; /* Consistent box model */
    display: inline-flex; /* Use flexbox for robust centering of the icon */
    line-height: 1; /* Tight line-height for character box */
    align-items: center;  /* Flex vertical centering */
    justify-content: center; /* Flex horizontal centering */
    top: 50%; /* Revert to standard 50% */
    transform: translateY(-50%); /* Standard centering transform */
    padding: 0; /* Ensure no default padding */
    cursor: pointer;
    z-index: 10000 !important; /* Ensure arrows are above the image */
    transition: background-color 0.3s ease;
    border-radius: 0.25rem;
    /* transform: translateZ(0); REMOVED */
}

.lightbox-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-arrow-char {
    display: block;
    transform: translateY(-2px); /* Adjust this value to fine-tune vertical position */
}

.lightbox-prev {
    left: 20px; /* Increased offset */
        z-index: 10000 !important; /* Ensure arrows are above the image */
}

.lightbox-next {
    right: 20px; /* Increased offset */
        z-index: 10000 !important; /* Ensure arrows are above the image, consistent with prev */
}

.lightbox-image-container {
    overflow: hidden;
    z-index: 1; /* Places this entire layer below arrows (10000) and close button (10001) */
    /* background-color: red !important; /* Diagnostic REMOVED */
}

/* Ensure image does not cause overflow issues with fixed arrows */
.lightbox-image {
    z-index: 1; /* Relative to its parent (lightboxImageContainer), good practice. */
}

/* Adjustments for the close button if needed, though Tailwind classes are mostly handling it */
.lightbox-close-btn {
    z-index: 10001; /* Ensure close button is above arrows if they overlap */
}

/* Responsive adjustments for lightbox arrows on smaller screens */
@media (max-width: 768px) {
    .lightbox-nav {
        font-size: 1.3rem;
        height: 36px;
        width: 36px;
        appearance: none; /* Remove default system styling on mobile */
        box-sizing: border-box; /* Consistent box model on mobile */
        /* Flex properties from above will apply, ensure height is set for mobile */
        line-height: 1; /* Tight line-height for mobile */
        /* transform will be inherited and include the -1px nudge, adjust if needed for mobile specifically */
        /* top: 50%; and transform: translateY(-50%); are already inherited or set */
        /* No need to repeat display:inline-flex, align-items, justify-content if not changing */
        top: 50%; /* Revert to standard 50% on mobile */
        transform: translateY(-50%); /* Standard centering transform on mobile */
        padding: 0; /* Ensure no default padding on mobile */
    }

    .lightbox-prev {
        left: 10px; /* Increased offset for mobile */
    }

    .lightbox-next {
        right: 10px; /* Increased offset for mobile */
    }
    
    /* Adjust close button position on mobile as it was previously done */
    /* The JS now adds 'lightbox-close-btn' which can be used if the old '.lightbox-close' is not specific enough */
    .lightbox-close-btn { /* Or use .lightbox-close if that's still the primary selector for styling */
        top: 10px; /* Closer to the image on mobile */
        right: 10px;
        margin-top: 0; /* Reset Tailwind's negative margin */
        margin-right: 0; /* Reset Tailwind's negative margin */
        background-color: rgba(0,0,0,0.3); /* Add a slight background for visibility against bright images */
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1; /* Ensure X is centered */
    }
}

/* Marketplace modal */
.marketplace-modal:not(.hidden) { /* Relies on JS to remove .hidden */
    animation: fadeIn 0.3s ease-out; /* Uses @keyframes fadeIn */
}

.marketplace-modal > div { /* Modal content container */
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

/* General modal close button styling (if applicable to both, or make specific) */
.close-modal { /* This class is used in HTML for marketplace modal */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.close-modal:hover {
    background-color: var(--color-light-gray-hover);
}


/* Sliders & Carousels (Testimonial & Portfolio Gallery) */
/* Custom styling for testimonial carousel */
.testimonial-slide {
    opacity: 0.5; /* Consider if this should be part of an 'inactive' state if active is 1 */
    transition: opacity 0.3s ease;
}

.testimonial-slide.active {
    opacity: 1;
}

.testimonial-dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: var(--color-medium-gray);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.testimonial-dot.active {
    background-color: var(--color-secondary);
}

/* Portfolio grid layout styling (also a gallery/slider) */
.portfolio-gallery {
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Matched lightbox transition */
}

.portfolio-gallery.active {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.portfolio-image img { /* General portfolio image */
    object-fit: cover;
    width: 100%;
}

/* Specific portfolio category image heights */
.portfolio-gallery[data-category="exterior"] .portfolio-image img {
    height: 150px;
}

.portfolio-gallery[data-category="interior"] .portfolio-image img {
    height: 300px;
}

.portfolio-gallery[data-category="custom"] .portfolio-image img {
    height: 300px;
}


/* Product Details Page Specifics */
.product-gallery-thumbnail {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.product-gallery-thumbnail.active {
    border-color: var(--color-secondary);
}

/* FAQ Accordion */
.faq-toggle {
    cursor: pointer;
}

.faq-toggle i {
    transition: transform 0.3s ease;
}

.faq-toggle.active i {
    transform: rotate(45deg);
}

/* Product Filters */
.filter-badge {
    display: inline-block;
    background-color: var(--color-light-gray);
    color: var(--color-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

.filter-badge i {
    margin-left: 0.5rem;
    cursor: pointer;
}

/* Product Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: var(--color-light-gray);
    color: var(--color-primary);
    font-weight: 500;
    transition: all 0.3s ease;
}

.pagination-item:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.pagination-item.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Marketplace Link Styling */
.marketplace-link {
    transition: transform 0.2s ease;
}

.marketplace-link:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   5. Animations
   ========================================================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   6. Responsive Styles
   ========================================================================== */
/* Header navigation styling (Primarily a layout change for header) */
@media (min-width: 768px) {
    header nav {
        flex: 1;
    }
    
    header .container > div { /* This is quite generic, ensure it's intended */
        width: 100%;
    }

    /* Portfolio grid items fill available space on larger screens */
    .portfolio-gallery .grid { /* Ensure .grid is the correct class from HTML */
        grid-auto-rows: minmax(8rem, auto);
    }
}

@media (max-width: 768px) {
    /* Product Gallery on Product Details Page */
    .product-gallery-main {
        height: 300px;
    }
    
    .product-gallery-thumbnails {
        flex-wrap: wrap;
    }
    
    .product-gallery-thumbnail {
        width: calc(25% - 0.5rem);
        margin-bottom: 0.5rem;
    }
    
    /* Lightbox close button adjustment */
    .lightbox-close {
        top: -30px;
        right: -10px;
    }
}

@media (max-width: 640px) {
    /* Product Filters */
    .filter-container { /* Assuming this class exists in HTML for filter groups */
        flex-direction: column;
    }
    
    .filter-item { /* Assuming this class exists for individual filter dropdowns/inputs */
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Pagination item size */
    .pagination-item {
        width: 35px;
        height: 35px;
    }
}
/* Override portfolio lightbox arrow and close button stacking to ensure they appear above the image */
#portfolio-lightbox-prev,
#portfolio-lightbox-next,
#portfolio-lightbox-close {
    z-index: 10002 !important;
}