/* css/style.css */

/* Add this universal box-sizing rule at the very top of your file */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Add your chosen Google Font @import here, e.g.: */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&display=swap');

main {
   /* margin-top: 68px; /* Adjust this value to match your header's actual height */
}

/* Universal Styles & Body */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-y: auto;
}

body {
    font-family: 'Caprasimo', sans-serif;
    background-color: #292929;
    color: #e4e2dd;
}

/* Header Styles */
#main-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    /* --- CRITICAL FIX: Change 'transparent' to 'rgba(41, 41, 41, 0)' --- */
    background-color: rgba(41, 41, 41, 0); /* Start transparent, using the same base color as scrolled */
    transition: background-color 0.2s ease-in-out; /* Smooth transition for background */
    box-shadow: none; /* No shadow initially */
}

#main-header.scrolled {
    background-color: #292929; /* Your desired solid background color (opaque) */
}

#main-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    position: relative;
}

.logo img {
    width: 300px;
    height: 38px;
    display: block;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));
}

/* Main Navigation Styles */
.main-nav {
    display: flex;
    align-items: center;
}

.main-nav .menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));
}

.main-nav .menu-list li a {
    color: #e4e2dd;
    text-decoration: none;
    font-size: 1em;
    text-transform: lowercase;
    transition: color 0.3s ease;
}

.main-nav .menu-list li a:hover {
    color: #c9c7c2;
}

/* Menu Toggle (Hamburger Icon) */
.menu-toggle {
    cursor: pointer;
    padding: 10px;
    display: none;
    margin-left: 20px;
    position: relative;
    z-index: 1001;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: #e4e2dd;
    margin: 5px 0;
    transition: 0.4s;
}

/* When mobile menu is active/open (hamburger to X) */
.menu-toggle.open .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.menu-toggle.open .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Hero Carousel - UPDATED TO FILL SCREEN HEIGHT ON DESKTOP */
.artist-carousel {
    position: relative; /* Keep this */
    overflow: hidden;

    /* Desktop Styles: Full width, fills screen height (now includes behind header) */
    width: 100vw;
    height: 100vh; /* Set to 100vh to ensure it covers the entire viewport */
    top: 0; /* Align to the very top of the viewport */
    left: 0;
    /* You might want to add a z-index here, but lower than the header, e.g., 999 */
    z-index: 1; /* Ensure it's below the header (which is 1000) */
}

.carousel-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Will now be 100% of 100vh */
    display: flex;
    flex-direction: row;
    transition: transform 1s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    min-height: 100%; /* Will now be 100% of 100vh */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative; /* Crucial for absolute positioning of contents */
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Artist Name Styles - Adjusted for full screen height */
.artist-name {
    position: absolute;
    bottom: 40px;
    left: 50px;
    color: #e4e2dd;
    /* font-size: 3.5em; Removed to manage size of elements inside */
    z-index: 50;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    pointer-events: none; /* Allows clicks to pass through to carousel items initially */
    white-space: nowrap;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
    align-items: flex-start; /* Align items to the left (start) */
    gap: 10px; /* Space between the name, subtitle, and button */
}

.artist-name::before {
    content: attr(data-artist-name);
    /* NEW: Use clamp() for fluid font size */
    /* This will scale between 2rem (32px) and 4.5rem (72px),
       using 4vw (4% of viewport width) as the preferred fluid size. */
    font-size: clamp(2rem, 4vw, 4.5rem);
    text-transform: lowercase;
}

/* Style for the new subtitle */
.artist-subtitle {
    /* NEW: Use clamp() for fluid font size */
    /* This will scale between 1rem (16px) and 1.5rem (24px),
       using 1.5vw (1.5% of viewport width) as the preferred fluid size. */
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    color: #e4e2dd;
    margin: 0;
    pointer-events: auto;
}

/* Style for the new button */
.carousel-button {
    /* NEW: Use clamp() for fluid font size */
    /* This will scale between 0.9rem (14.4px) and 1.2rem (19.2px),
       using 1vw (1% of viewport width) as the preferred fluid size. */
    font-size: clamp(0.9rem, 1vw, 1.2rem);
    pointer-events: auto;
    background-color: #e4e2dd;
    color: #292929;
    padding: 12px 25px; /* Keep padding for now, but could also be made fluid */
    text-decoration: none;
    border-radius: 5px;
    text-transform: lowercase;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none;
    cursor: pointer;
}

.carousel-button:hover {
    background-color: #c9c7c2;
    color: #1a1a1a;
}




/* Responsive Design - Mobile First Approach */
@media (max-width: 767px) {
    .main-nav .menu-list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(41, 41, 41, 0.95);
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    .main-nav .menu-list.open {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    .main-nav .menu-list li {
        margin: 15px 0;
    }

    .main-nav .menu-list li a {
        font-size: 1.8em;
    }

    .menu-toggle {
        display: block;
    }

    #main-header .header-content {
        padding: 15px 20px;
    }

    /* Mobile Carousel Styles: Set to 16:9 aspect ratio */
    .artist-carousel {
        width: 100vw;
        padding-top: 56.25%; /* (9 / 16) * 100% = 56.25% for 16:9 aspect ratio */
        height: 0; /* Important: set height to 0 when using padding-top for aspect ratio */
        position: relative; /* Ensure position for absolutely positioned children */
        overflow: hidden; /* Ensure content outside this aspect ratio box is clipped */
    }

    .carousel-inner {
        position: absolute; /* Occupy the space defined by padding-top */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Will fill the space of the aspect-ratio parent */
        display: flex;
        flex-direction: row;
        transition: transform 1s ease-in-out;
    }

    .carousel-item {
        min-width: 100%;
        min-height: 100%; /* Ensure item fills the inner carousel */
        flex-shrink: 0;
        display: flex; /* Make it a flex container */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden; /* Crucial to prevent content from overflowing this item */
    }

    .carousel-item img {
        /*
           CRITICAL FIX FOR IMAGE SIZE:
           We're using object-fit: contain to ensure the whole image is visible.
           If the image is still too large, it means a more specific rule is overriding these.
           Ensure no 'position: absolute' or fixed dimensions are on the image itself.
        */
        width: 100%; /* Image should always try to be 100% of its parent's width */
        height: 100%; /* Image should always try to be 100% of its parent's height */
        max-width: 100%; /* Safeguard: never exceed parent width */
        max-height: 100%; /* Safeguard: never exceed parent height */

        object-fit: contain; /* Scales down to fit, showing entire image (might have bars) */
        object-position: center; /* Centers the image within the container */
        display: block; /* Ensures proper block rendering */

        /* Remove any previous position/transform properties that might cause overflow */
        position: static; /* Ensure no absolute/fixed positioning on the image */
        top: auto;
        left: auto;
        bottom: auto;
        right: auto;
        transform: none; /* Reset any transforms that might move/scale it incorrectly */
    }

    /* Mobile Artist Name Styles - CRITICAL CHANGES HERE */
    .artist-name {
        bottom: 20px; /* Adjusted bottom spacing for mobile */
        left: 20px; /* Adjusted left spacing for mobile */
        right: 20px; /* NEW: Add right constraint to prevent overflow */
        max-width: calc(100% - 40px); /* NEW: Limit width, accounting for left/right padding */
        white-space: normal; /* CRITICAL: Allow text to wrap for mobile */
        text-align: left; /* Ensure text aligns to the left within its new constrained width */
        z-index: 50;
        gap: 8px; /* Slightly less gap on mobile */
        /* Ensure font sizes are explicitly set or overridden here for mobile */
        /* Removed opacity and transition from here, as they are global on .artist-name */
        /* It's okay that display:flex, flex-direction: column, align-items: flex-start are global */
    }
    
}

@media (min-width: 768px) {
    .main-nav .menu-list {
        display: flex !important;
        position: static;
        background-color: transparent;
        height: auto;
        width: auto;
        opacity: 1;
        visibility: visible;
        flex-direction: row;
    }

    .menu-toggle {
        display: none;
    }

    #main-header .header-content {
        padding: 15px 50px;
    }
}

/* Artists Section Styles */
.content-section {
    padding: 80px 30px; /* Top/bottom padding, side padding */
    text-align: center;
    background-color: #292929; /* A slightly different dark background */
}

.section-title h2 {
    font-size: 3.5em; /* Large heading, similar to carousel text */
    text-transform: lowercase;
    margin-bottom: 60px;
    color: #e4e2dd;
}

.artists-grid {
    display: grid;
    /* Updated gap to 3px */
    gap: 3px; /* Space between each square */
    /* Forces exactly 4 columns on desktop */
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px; /* Max width for the grid to prevent it from getting too wide */
    margin: 0 auto; /* Center the grid */
}

.artist-card {
    /* Removed card-specific styling */
    /* background-color: #1a1a1a; */
    /* border-radius: 8px; */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); */
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */

    overflow: hidden; /* Keep this to clip content outside the square */
    position: relative; /* Keep this if you want the overlay/content to be positioned relative to the card */
}

/* Remove the hover effect for the main card container */
.artist-card:hover {
    /* transform: translateY(-10px); */
    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); */
}

.artist-card img {
    position: absolute; /* Position relative to .artist-card-inner */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the square without distortion */
    display: block;
    transition: transform 0.3s ease; /* Keep for the subtle zoom on hover */
}

.artist-grid-name {
    position: absolute; /* Position relative to .artist-card-inner */
    bottom: 10px; /* Distance from bottom */
    left: 10px; /* Distance from left */
    color: #e4e2dd; /* Text color */
    font-size: 1.5em; /* Adjust font size as needed */
    text-transform: lowercase;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* For readability over images */
    z-index: 2; /* Ensures it's above the image but potentially below the overlay */
    pointer-events: none; /* Allows clicks to pass through to the overlay/card */
    margin: 0; /* Remove default h3 margin */
}

/* Responsive adjustments for artists section */
@media (max-width: 991px) { /* Adjust breakpoint for tablets/smaller desktops */
    .artists-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */
        gap: 3px; /* Keep gap consistent */
    }
}

@media (max-width: 767px) {
    .content-section {
        padding: 60px 20px;
    }

    .section-title h2 {
        font-size: 2.5em;
        margin-bottom: 40px;
    }

    .artists-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 3px; /* Keep gap consistent */
    }

    .artist-grid-name {
        font-size: 1.2em; /* Smaller font for mobile */
        bottom: 8px; /* Adjust spacing */
        left: 8px; /* Adjust spacing */
    }

}

@media (max-width: 480px) { /* For very small mobile screens */
    .artists-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
        gap: 3px; /* Keep gap consistent */
    }
}

/* Artist Card Overlay & Hover Effects */
.artist-card {
    position: relative; /* Make the artist-card a positioning context for its children */
    overflow: hidden; /* Ensure anything outside the card is clipped */
}

.artist-card-inner {
    position: relative; /* Essential for absolute positioning of children */
    width: 100%; /* Take full width of parent .artist-card */
    aspect-ratio: 1 / 1; /* Makes the element a perfect square */
    overflow: hidden; /* Ensure anything overflowing the square is clipped */

    /* Removed flex properties as it's no longer a flex container for image/text */
    /* display: flex; */
    /* flex-direction: column; */
    /* height: 100%; */
}

.artist-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease; /* Smooth scale effect for image */
}

.artist-grid-name {
    position: absolute; /* Position relative to .artist-card-inner */
    bottom: 10px; /* Distance from bottom */
    left: 10px; /* Distance from left */
    color: #e4e2dd; /* Text color */
    font-size: 1.5em; /* Adjust font size as needed */
    text-transform: lowercase;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* For readability over images */
    z-index: 2; /* Ensures it's above the image but potentially below the overlay */
    pointer-events: none; /* Allows clicks to pass through to the overlay/card */
    margin: 0; /* Remove default h3 margin */
}


.artist-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* pointer-events: none;  Keep this line as it was */
    padding: 20px;
    box-sizing: border-box;
    z-index: 3; /* Ensure overlay is above the name */
}

.artist-card:hover .artist-overlay {
    opacity: 1;
    pointer-events: all; /* Important: Make overlay clickable on hover */
}

.overlay-top-content {
    width: 100%; /* Take full width of parent (with padding considered) */
    display: flex;
    justify-content: space-between; /* Pushes items to far ends */
    align-items: center; /* Vertically center items within this row */
    padding: 0; /* No extra padding here, handled by .artist-overlay */
    box-sizing: border-box;
    /* This element itself starts with opacity 0 and transitions */
    opacity: 0;
    transition: opacity 0.3s ease 0.1s; /* Slight delay to show after overlay */
}

.artist-card:hover .overlay-top-content {
    opacity: 1;
}

/* "View Website" Link */
.view-website-link {
    color: #e4e2dd;
    text-decoration: none;
    font-size: 0.8em; /* Adjusted font size for "visit website" */
    text-transform: lowercase;
    z-index: 2; /* Keep z-index if other elements might overlap */
}

.artist-card:hover .view-website-link {
    opacity: 1; /* Show on hover */
}

.view-website-link:hover {
    color: #c9c7c2;
}


/* Social Icons within Overlay */
.social-icons-overlay {
    display: flex;
    gap: 3px; /* Very small gap between icons */
    z-index: 2; /* Keep z-index if other elements might overlap */
}

.artist-card:hover .social-icons-overlay {
    opacity: 1; /* Show on hover */
}

.social-icons-overlay a {
    color: #e4e2dd;
    font-size: 0.8em; /* Really small font size for icons - ensure this matches the desired size */
    transition: color 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.social-icons-overlay a:hover {
    color: #c9c7c2;
}

/* Ensure existing .artist-card styles don't conflict,
    especially `box-shadow` and `transform` on hover,
    they should apply to the card container.
    The image specific hover effect should be on the `img` itself.
*/


/* Adjust media queries for artist-card details if needed */
@media (max-width: 767px) {
    .view-website-link {
        font-size: 0.8em; /* Adjust for smaller screens */
    }
    .social-icons-overlay {
        gap: 3px;
        top: 15px;
        right: 15px;
    }
    .social-icons-overlay a {
        font-size: 0.7em;
        width: 18px;
        height: 18px;
    }
}

/* Footer Styles */
footer {
    background-color: #1a1a1a; /* Darker background for the footer */
    color: #e4e2dd;
    padding: 30px 20px;
    font-size: 0.9em;
    text-align: center;
}

#footer-content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-left h6 {
    margin: 0;
    font-weight: normal; /* Removes default bold for h6 */
    font-size: 1em; /* Ensures consistency with other text */
}

.footer-left h6 a {
    color: #e4e2dd;
    text-decoration: none;
    margin-right: 20px; /* Space between links */
    transition: color 0.3s ease;
    text-transform: lowercase; /* Matches your site's style */
}

.footer-left h6 a:last-child {
    margin-right: 0; /* No margin on the last link */
}

.footer-left h6 a:hover {
    color: #c9c7c2;
}

.footer-right ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 50px; /* Space between social icons */
}

.footer-right ul li a {
    color: #e4e2dd;
    font-size: 1.5em; /* Adjust size of icons */
    transition: color 0.3s ease;
}

.footer-right ul li a:hover {
    color: #c9c7c2;
}

/* Responsive adjustments for Footer */
@media (max-width: 767px) {
    #footer-content-wrapper {
        flex-direction: column; /* Stack items vertically on mobile */
        gap: 20px; /* Space between stacked sections */
    }

    .footer-left,
    .footer-right {
        width: 100%; /* Take full width */
        text-align: center;
    }

    .footer-left h6 a {
        display: block; /* Stack links vertically */
        margin: 10px 0; /* Adjust spacing for stacked links */
    }

    .footer-right ul {
        justify-content: center; /* Center social icons */
        gap: 15px; /* Slightly less gap on smaller screens */
    }
}

/* Cookie Consent Pop-up Styling */
.cookie-consent-popup {
    /* Positioning for Close to Bottom & Horizontal Centering */
    position: fixed;
    bottom: 20px; /* Adjust this value to control distance from the bottom */
    left: 50%;
    transform: translateX(-50%); /* Only horizontal centering */

    /* Box Model & Appearance */
    background-color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow for a floating effect */
    border-radius: 0; /* NO rounded corners */
    padding: 20px 30px; /* Adjusted padding: top/bottom 20px, left/right 30px */
    box-sizing: border-box; /* Include padding in the element's total width and height */

    /* Dimensions - WIDER BOX */
    width: 95%; /* Make it wider on most screens */
    max-width: 900px; /* Significantly wider for larger screens */
    max-height: 90vh; /* Max height relative to viewport height */
    overflow-y: auto; /* Enable scrolling if content exceeds max-height */

    /* Hiding/Showing with transition for opacity/visibility */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, bottom 0.4s ease-in-out;
    z-index: 1000;
    
    font-family: Arial, sans-serif;
}

.cookie-consent-popup.show {
    opacity: 1;
    visibility: visible;
    bottom: 20px; /* Ensure it moves to this position when 'show' class is added */
}

.cookie-consent-content {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    transition: height 0.3s ease-in-out;
    display: flex; /* Use flexbox for content layout */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Space out message and buttons */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 15px; /* Gap between message and buttons/links */
}

/* Initial Cookie View */
.cookie-view {
    display: none;
    text-align: left;
    width: 100%; /* Ensure views take full width when active */
}

.cookie-view.active {
    display: block;
}

.cookie-message {
    font-size: 13px; /* REALLY SMALL FONT SIZE */
    font-family: Arial, sans-serif;
    line-height: 1.4; /* Adjusted line height for readability */
    margin-bottom: 0; /* Remove bottom margin as flexbox handles spacing */
    color: #333;
    flex-grow: 1; /* Allow message to take up available space */
    max-width: calc(100% - 200px); /* Adjust max-width to leave space for buttons, will be overridden by media queries */
}

.cookie-links {
    margin-bottom: 0; /* Remove bottom margin */
    white-space: nowrap; /* Keep links inline if possible */
    text-align: center;
}

.cookie-links .privacy-policy-link {
    color: #000; /* Standard link color */
    text-decoration: none;
    font-size: 12px; /* Smaller font size for links */
    text-align: center;
}

.cookie-links .privacy-policy-link:hover {
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    justify-content: flex-end; /* Align buttons to the RIGHT */
    gap: 10px; /* Space between buttons */
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.cookie-button {
    background-color: black;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.cookie-button:hover {
    background-color: #333;
}

.cookie-button-centered {
    display: block; /* Make it a block element */
    margin: 20px auto; /* Center horizontally and add some top/bottom margin */
    width: fit-content; /* Allow it to take only the necessary width */
    max-width: 100%; /* Ensure it doesn't overflow on small screens */
}

/* Detailed Cookie View */
.murnane-music-logo {
    text-align: center;
    margin-bottom: 20px;
}

.murnane-music-logo img {
    max-width: 150px; /* Adjust logo size */
    height: auto;
}

.detailed-cookie-text {
    font-size: 12px; /* VERY SMALL FONT SIZE */
    line-height: 1.5;
    margin-bottom: 10px; /* Slightly reduced margin */
    color: #555;
}

.detailed-cookie-text .text-link {
    color: #000;
    text-decoration: none;
}

.detailed-cookie-text .text-link-default {
    text-decoration: none;
}

.detailed-cookie-text .text-link:hover {
    text-decoration: underline;
}

.cookie-checkboxes {
    display: flex;
    flex-direction: row; /* Changed from column to row */
    flex-wrap: wrap; /* Allow checkboxes to wrap to the next line on smaller screens */
    align-items: center; /* Vertically align items in the row */
    justify-content: center; /* Center checkboxes horizontally within their container */
    gap: 20px; /* Space between checkbox items */
    margin: 15px 0; /* Keep existing margin */
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 0; /* Remove individual item bottom margin as gap handles spacing */
    cursor: pointer;
    font-size: 13px;
}

/* Custom Checkbox Styling */
.checkbox-item input[type="checkbox"] {
    /* Hide the default checkbox */
    -webkit-appearance: none; /* For Safari/Chrome */
    -moz-appearance: none;    /* For Firefox */
    appearance: none;         /* Standard property */
    border: 1px solid #ccc; /* Give it a subtle border if you want */
    width: 18px;            /* Size of your custom square */
    height: 18px;
    border-radius: 3px;     /* Slightly rounded corners, adjust if needed */
    margin-right: 8px;      /* Keep existing margin */
    cursor: pointer;
    position: relative;     /* Needed for positioning the checkmark pseudo-element */
    display: inline-block; /* Ensure it behaves like a block for sizing */
    vertical-align: middle; /* Align with text */
    flex-shrink: 0; /* Prevent shrinking in flex container */
}

/* Style the custom background when unchecked */
.checkbox-item input[type="checkbox"] {
    background-color: white; /* Default background for unchecked */
    border-color: #555; /* Darker border for the checkbox box */
}

/* Style the custom background when checked */
.checkbox-item input[type="checkbox"]:checked {
    background-color: black; /* Black background when checked */
    border-color: black; /* Make border black too when checked */
}

/* Create the custom checkmark */
.checkbox-item input[type="checkbox"]:checked::before {
    content: '\2713'; /* Unicode character for a checkmark (✓) */
    font-size: 14px; /* Size of the checkmark */
    color: white;    /* White checkmark color */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the checkmark */
    line-height: 1; /* Adjust line-height to prevent extra spacing */
}

/* Special styling for disabled essential checkbox */
.checkbox-item.essential input[type="checkbox"] {
    background-color: #eee; /* Lighter background for disabled */
    border-color: #bbb;
    cursor: not-allowed;
}

.checkbox-item.essential input[type="checkbox"]:checked::before {
    color: #999; /* Greyer checkmark for disabled checked */
}

.checkbox-item.essential {
    cursor: not-allowed;
}

.checkbox-item.essential label {
    color: #888;
}

.checkbox-item.essential:hover {
    cursor: not-allowed;
}

.checkbox-item.essential input[type="checkbox"][disabled] {
    cursor: inherit;
}

.detailed-links {
    margin-top: 15px; /* Adjusted margin */
    text-align: center;
}

.detailed-links .text-link {
    color: #000;
    text-decoration: none;
    margin: 0 8px; /* Reduced margin */
    font-size: 12px; /* Smaller font size for detailed links */
}

.detailed-links .text-link:hover {
    text-decoration: underline;
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 768px) {
    .cookie-consent-popup {
        width: 98%; /* Even wider on smaller tablets */
        padding: 15px 20px; /* Adjusted padding */
        bottom: 15px; /* Adjust distance for tablets */
    }

    .cookie-consent-content {
        flex-direction: column; /* Stack message, links, and buttons vertically */
        align-items: flex-start; /* Align all items to the left when stacked */
        gap: 10px;
    }

    .cookie-message {
        width: 100%; /* Take full width when stacked */
        max-width: 100%; /* Override previous max-width */
        margin-bottom: 0; /* Ensure no extra margin */
        font-size: 12px; /* Slightly smaller for tablets */
    }

    .cookie-links {
        width: 100%; /* Take full width when stacked */
        text-align: left; /* Align links to left */
    }

    .cookie-buttons {
        width: 100%; /* Take full width */
        justify-content: flex-end; /* Still align buttons to the right within their full width */
        gap: 8px;
    }

    .cookie-button {
        flex-grow: 1; /* Allow buttons to grow to fill space if needed */
        font-size: 13px; /* Slightly smaller button text */
        padding: 10px 12px;
    }

    .checkbox-item,
    .detailed-cookie-text {
        font-size: 11px; /* Even smaller for detailed text/checkboxes on mobile */
    }
    .detailed-links .text-link {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .cookie-consent-popup {
        width: 98%; /* Nearly full width on very small screens */
        max-width: 98%; /* Override max-width for small screens */
        padding: 10px 15px; /* Further reduce padding */
        bottom: 10px; /* Adjust distance for mobile */
    }

    .cookie-message {
        font-size: 11px; /* Smallest font for mobile */
        line-height: 1.3;
    }

    .cookie-buttons {
        flex-direction: column; /* Force stack buttons vertically on small phones */
        gap: 8px;
    }

    .cookie-button {
        width: 100%; /* Make buttons full width */
        font-size: 12px;
        padding: 10px 10px;
    }
    .checkbox-item,
    .detailed-cookie-text {
        font-size: 10px; /* Smallest font for detailed text/checkboxes on smallest screens */
    }
    .detailed-links .text-link {
        font-size: 10px;
    }
}