@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Open+Sans:wght@400;600;700&display=swap');

/* Basic Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow-x: hidden; /* Added to prevent horizontal scroll/blank space */
}

body {
    min-height: 100vh;
    display: block; /* Remove flexbox to prevent stretching */
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}

.container {
    width: 100%; /* Changed from 90% to take full available width */
    /* max-width: 1200px; Removed to allow full width */
    padding-left: 3vw; /* Responsive padding, e.g., 3% of viewport width */
    padding-right: 3vw; /* Responsive padding */
    margin: 0 auto; /* Kept for potential inner centering, harmless for container itself */
    transition: all 0.3s ease-in-out;
    /* box-sizing: border-box; is globally set, so padding is handled correctly */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Header */
header {
    height: 70px;
    min-height: 70px;
    background-color: #fff;
    padding: 10px 0 10px 0; /* Increase bottom padding for more separation */
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

header .logo img {
    height: 54px; /* Reduce logo height to fit header */
    max-width: 180px; /* Prevent logo from overflowing horizontally */
    margin-bottom: 10px;
}

header nav ul {
    display: flex;
    align-items: center;
}

header nav ul li {
    margin-left: 20px;
}

header nav ul li a {
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif; /* Menu font */
    font-weight: 700; /* Bold for menu */
    font-size: 0.9em;
    color: #333;
    padding: 5px 10px;
}

/* Active/hover state ONLY for main nav links (not language flags) */
header nav ul li a:not(.lang-es):not(.lang-en).active,
header nav ul li a:not(.lang-es):not(.lang-en):hover,
header nav ul li.nav-item-with-submenu:hover > a:not(.lang-es):not(.lang-en) {
    color: #fff;
    background-color: #000;
}

header nav ul li.nav-item-with-submenu {
    position: relative; 
}

.submenu {
    display: none;
    position: absolute;
    top: 100%; 
    left: 0; 
    background-color: #000;
    padding: 10px 0;
    z-index: 1001; 
    min-width: 250px; 
    border-top: 1px solid #333; 
}

.submenu a,
.nosotros-submenu a, /* Explicitly target links in nosotros submenu */
.promociones-submenu a, /* Explicitly target links in promociones submenu */
.flyout-menu a { /* Explicitly target links in flyout menu */
    color: #fff; /* Ensure base color is white */
    display: block;
    padding: 8px 20px; 
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif; /* Submenu font */
    font-weight: 300 !important; /* Ensure font weight is applied */
    font-size: 0.85em;
    white-space: nowrap;
}

.submenu a:hover,
.nosotros-submenu a:hover, /* Explicit hover for nosotros submenu links */
.promociones-submenu a:hover, /* Explicit hover for promociones submenu links */
.flyout-menu a:hover { /* Explicit hover for flyout menu links */
    color: #b08d57 !important; /* Force gold color on hover */
    background-color: #222 !important; /* Force background color on hover */
    text-decoration: none !important; /* Ensure no underline */
}

header nav ul li.nav-item-with-submenu:hover > .submenu,
header nav ul li.nav-item-with-submenu > a:focus + .submenu { 
    display: block;
}

header nav ul li.nav-item-with-submenu .submenu:hover {
    display: block;
}

header nav ul li.nav-item-with-submenu.submenu-active > .submenu {
    display: block;
}

header nav .language-selector img {
    height: 20px;
    width: auto;
    margin-left: 5px;
}

header nav .language-selector .flag-icon {
    font-size: 1.2em; /* Adjust size as needed */
    margin-left: 8px;
    vertical-align: middle;
}

header nav .language-selector a.active .flag-icon {
    /* Add any specific style for active flag, e.g. border, if needed */
    /* For now, active state is on the <a> tag via .active class from JS */
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Hero Section (Home) */
.hero {
    margin-top: 0.5em; /* Add a bit of space between header and hero image */
    height: calc(100vh - 70px); /* Fill the rest of the viewport below the header */
    min-height: 500px; /* Optional: for small screens */
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    position: relative;
    overflow: hidden;
}

.hero-image {
    background-image: url('../images/projects/azure/Calle_Campoamor_Ext_01.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* width: 100%; Removed, covered by absolute positioning */
    /* height: 100%; Removed, covered by absolute positioning */
    position: absolute; /* Changed */
    top: 0; left: 0; right: 0; bottom: 0; /* Changed */
    z-index: 0; /* Added: To be behind text and its own overlay */
    min-height: 500px;
    /* display: flex; Removed */
}

.hero-image::before { /* Overlay is on hero-image */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: 1; /* Overlay on top of image, below text */
}

.hero-text {
    position: relative; /* Ensure it respects parent flex alignment */ 
    z-index: 2; /* On top of hero-image and its overlay */
    padding: 140px 40px 60px 40px; 
}

.hero-text h1 {
    color: #fff;
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400; 
    font-size: 3.5em; 
    max-width: 600px; /* Adjust max-width for right alignment */
    margin: 0 0 0 auto; /* Align block to right, remove auto left margin */
    line-height: 1.25; 
    text-align: right; /* Ensure text itself is right-aligned */
    text-shadow: 0px 1px 6px rgba(0,0,0,0.5); 
}

/* Page Sections (for Nosotros, Promociones, Contacto) */
.page-section {
    padding: 40px 0;
}

.page-section .section-eyebrow {
    font-size: 1.2em;
    color: #b08d57; /* Gold-ish color */
    text-transform: uppercase;
    margin-bottom: 10px;
    font-family: 'Open Sans', sans-serif; /* Eyebrow font */
    font-weight: 700; /* Bold for eyebrow */
}

.page-section h2 {
    text-align: left;
    margin-bottom: 10px; /* Adjusted margin for subtitle */
    font-family: 'Open Sans', sans-serif; /* General section title font */
    font-weight: 700; /* Bold for general section titles */
    font-size: 1.8em;
    color: #333;
    text-transform: uppercase;
}

/* Nosotros Section specific styles */
#nosotros .nosotros-layout {
    display: flex;
    gap: 40px; /* Gap between titles column and details column */
    align-items: stretch; /* Changed from flex-start to stretch */
}

#nosotros .nosotros-titles-column {
    flex: 0 0 35%; /* Adjust width as needed */
    padding-right: 20px; /* Space between titles and the right content block */
    display: flex; /* Added */
    flex-direction: column; /* Added */
    justify-content: center; /* Added to vertically center content */
}

#nosotros .nosotros-titles-column h2 { /* This is for "Creamos exclusividad..." */
    font-size: 2em; 
    color: #000;
    line-height: 1.2;
    font-family: 'Montserrat', sans-serif; /* Specifically Montserrat */
    font-weight: 200; /* ExtraLight weight */
    margin-top: 10px; 
    text-transform: none;
}

#nosotros .nosotros-details-column {
    flex: 1; /* Takes remaining space */
    position: relative; /* For overlay and text positioning */
    background-image: url('../images/OFICINA JILUMA.jpeg');
    background-size: cover;
    background-position: center;
    padding: 60px 40px; /* Increased top/bottom padding, can be adjusted */
    min-height: 450px; /* Adjust as needed, might need to be taller for more text padding */
    display: flex; 
    align-items: flex-start; /* Align text block to the top */
    justify-content: flex-start; /* Align text block to the left */
}

#nosotros .nosotros-details-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65); /* Semi-transparent black overlay */
    z-index: 1;
}

#nosotros .nosotros-description {
    /* flex: 0 0 50%; */ 
    position: relative; 
    z-index: 2;
    color: #fff; 
    max-width: 80%; /* Slightly increased max-width, adjust as needed */
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}

#nosotros .nosotros-description p {
    margin-bottom: 1.5em; 
    line-height: 1.7;
    font-family: 'Montserrat', sans-serif; /* Specifically Montserrat */
    font-weight: 200; /* ExtraLight weight */
    font-size: 1.2em; 
}

/* Footer - New Structure */
footer {
    background-color: #101010; /* Darker black as per image */
    color: #a0a0a0; /* Light grey for text */
    padding: 30px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85em; /* Slightly smaller base font for footer */
}

.footer-tier {
    padding: 20px 0 30px 0;
    text-align: center;
    border-bottom: 1px solid #686767; /* Subtle separator for tiers */
}

.footer-tier-no-border {
    padding: 20px 0;
    text-align: center;
    border-bottom: 0; /* Subtle separator for tiers */
}

.footer-tier:last-child {
    border-bottom: none;
}

.footer-tier-brand p {
    font-size: 1.6em;
    font-weight: 700;
    color: #b08d57; /* Gold-ish color */
    text-transform: uppercase;
    margin: 0;
}

.footer-tier-main-content {
    display: flex;
    flex-direction: column; /* Stack nav/social and contacts row */
    align-items: center; /* Center children horizontally */
    gap: 20px; /* Gap between the two main rows */
}

/* Style for the new row containing email and phone/whatsapp */
.footer-contact-row {
    display: flex;
    justify-content: space-between; /* Distribute space between email and phone columns */
    align-items: flex-start;
    width: 100%; /* Take full width */
    gap: 20px; /* Gap between email and phone columns */
}

.footer-content-column {
    flex: 1; 
    min-width: auto; /* Adjust as it might not need 200px anymore for all cases */
    text-align: left; 
    position: relative; 
}

/* Remove vertical rules as layout has changed */
.footer-content-column:not(:last-child)::after {
    display: none; 
}

.footer-col-center-nav-social {
    width: 100%; /* Ensure nav/social takes full width in its row */
    text-align: center;
}

.footer-col-contact-details .email-block {
    display: flex;
    flex-direction: row; /* Icon and text group side-by-side */
    align-items: center; /* Vertically center icon with text group */
    gap: 15px; /* Space between icon and text group, adjust as needed */
}

.footer-col-contact-details .email-block .footer-icon {
    width: 50px; /* Adjust size as needed */
    height: 50px;
    margin-bottom: 0; /* Remove original margin, alignment handled by flex */
    flex-shrink: 0; /* Prevent icon from shrinking if space is tight */
}

/* New class for the div wrapping the email spans */
.email-texts {
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    font-weight: 300;
}

/* Adjusting selector for email spans if they are now inside .email-texts */
.footer-col-contact-details .email-block .email-texts span {
    display: block;
    margin-bottom: 5px; /* Space between email addresses */
    font-size: 1em; /* Corrected to be 0.9em of body default (0.9/0.85) */
    font-weight: 300; 
    text-transform: uppercase; 
    color: #c0c0c0; 
}

.footer-col-contact-details .email-block .email-texts span:last-child {
    margin-bottom: 0; /* No margin below the last email address */
}

.footer-nav-links {
    display: flex; /* Ensure flex for centering and pseudo-elements */
    align-items: center; /* Vertically align lines and text */
    justify-content: center; /* Center the whole group */
    margin-bottom: 15px; /* Adjusted margin */
}

.footer-nav-links::before,
.footer-nav-links::after {
    content: '';
    flex: 1; /* Changed from width: 100% */
    height: 1px;
    background-color: #686767; /* Color for the line */
}

.footer-nav-links::before {
    margin-right: 15px; /* Space between left line and links */
}

.footer-nav-links::after {
    margin-left: 15px; /* Space between links and right line */
}

.footer-nav-links ul {
    display: flex; /* Lay out li items horizontally */
    justify-content: center; /* Center the LIs */
    list-style: none;
    padding: 0;
    flex-wrap: nowrap; /* Ensure LIs do not wrap */
}

.footer-nav-links ul li {
    margin: 0 10px;
}

.footer-nav-links ul li a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 1.059em; /* Corrected to be 0.9em of body default (0.9/0.85) */
    font-weight: 700; 
    text-transform: uppercase; 
    transition: color 0.2s ease;
    white-space: nowrap; /* Prevent text like "About us" from breaking */
}
.footer-nav-links ul li a:hover {
    color: #b08d57; /* Changed from #fff to gold */
}

.footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.footer-social-icons .social-icon {
    width: 50px;
    height: 50px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.footer-social-icons .social-icon:hover {
    opacity: 1;
}

.footer-col-phone-whatsapp {
    text-align: right;
    display: flex; /* Added */
    flex-direction: row; /* Added */
    align-items: center; /* Added for vertical alignment */
    justify-content: flex-end; /* Keep items to the right */
    gap: 15px; /* Added space between phone and WhatsApp icon */
}

.footer-col-phone-whatsapp .phone-block,
.footer-col-phone-whatsapp .whatsapp-block {
    display: flex;
    align-items: center;
    /* justify-content: flex-end; /* No longer needed here, parent handles overall right alignment */
}

.footer-col-phone-whatsapp .phone-block {
    margin-bottom: 0; /* Removed margin-bottom */
    margin-right: 40px;
}

.footer-col-phone-whatsapp .footer-icon { /* This class was not used here but might be in other contexts */
    width: 22px; /* Adjusted size for phone icon */
    height: 22px;
    margin-right: 10px;
}

.footer-col-phone-whatsapp .phone-block span { 
    color: #c0c0c0; 
    font-size: 1em; /* Corrected to be 0.9em of body default (0.9/0.85) */
    font-weight: 300; 
    text-transform: uppercase; 
}

.footer-col-phone-whatsapp .social-icon {
    width: 50px;
    height: 50px;
}

.footer-tier-policy .policy-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
}

.footer-tier-policy .policy-links-list li a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.9em; /* Corrected to be 0.9em of body default (0.9/0.85) */
    font-weight: 500; 
    text-transform: uppercase; 
    transition: color 0.2s ease;
}
.footer-tier-policy .policy-links-list li a:hover {
    color: #b08d57; /* Changed from #fff to gold */
}

.footer-tier-copyright p {
    color: #777; /* Dimmer color for copyright */
    font-size: 0.9em;
    margin: 0;
}

/* Icon Color Adjustments */
.footer-col-contact-details .footer-icon,
.footer-col-phone-whatsapp .footer-icon,
.footer-social-icons .social-icon {
    filter: brightness(0) invert(1); /* Make icons white */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 15px; /* Consistent mobile padding */
        padding-right: 15px;
    }

    /* Header Mobile Adjustments */
    header .container {
        flex-wrap: wrap; /* Allow items to wrap if needed, though toggle should prevent it */
        position: relative; /* For positioning the mobile menu */
    }

    .menu-toggle {
        display: block; /* Show hamburger icon */
        position: absolute; /* Position it relative to header .container */
        top: 50%;
        right: 15px; /* Align to the right padding of .container */
        transform: translateY(-50%);
        z-index: 1002; /* Above nav items */
    }

    header nav {
        width: 100%; /* Make nav take full width for mobile dropdown */
        order: 3; /* Ensure it appears below logo if flex-wrap occurs (though should be hidden) */
    }

    header nav > ul { /* Target direct ul child of nav */
        display: none; /* Hide nav list by default */
        flex-direction: column;
        width: 100%;
        position: absolute; /* Position for dropdown behavior */
        top: 100%; /* Position below the header */
        left: 0;
        background-color: #fff; /* Background for mobile menu */
        border-top: 1px solid #eee;
        padding: 10px 0;
        z-index: 1001; /* Below toggle if active, but above page content */
    }

    header nav > ul.nav-active { /* Class to be toggled by JS */
        display: flex;
    }

    header nav ul li {
        margin-left: 0; /* Remove left margin */
        width: 100%; /* Make list items full width */
        text-align: left; /* Align text to left */
    }

    header nav ul li a {
        padding: 12px 20px; /* Increase padding for better tap targets */
        display: block; /* Make links full width */
        border-bottom: 1px solid #f0f0f0; /* Separator for links */
    }
    header nav ul li:last-child a {
        border-bottom: none;
    }

    header nav ul li a:not(.lang-es):not(.lang-en).active,
    header nav ul li a:not(.lang-es):not(.lang-en):hover {
        /* Keep existing active/hover, but ensure it works well with block display */
        color: #fff;
        background-color: #000;
    }
    
    .submenu { /* Adjust submenu for mobile */
        position: static; /* No longer absolute dropdown */
        background-color: #333; /* Darker background for mobile submenu sections */
        border-top: none;
        /* padding-left: 20px; /* Indent submenu items - Old, replaced by padding on <a> */
        padding: 0; /* Remove padding from ul, apply to a */
        display: none; /* Keep hidden by default, JS will handle showing */
    }

    .submenu a {
        /* Override general mobile link styles for submenu items */
        color: #fff !important; /* Ensure white text, !important if needed due to specificity */
        background-color: transparent !important; /* Ensure no other background from general mobile nav link styles */
        padding: 10px 20px 10px 35px; /* Indent further than main items (e.g., main items 20px, sub 35px) */
        font-size: 0.9em; /* Slightly smaller than main mobile nav items */
        font-weight: normal; /* Normal weight for submenu items, main items are bold */
        text-transform: uppercase; /* Match other nav items */
        display: block; /* Ensure it takes full width for tap target */ 
        border-bottom: 1px solid #444; /* Separator within submenu items */
    }

    .submenu li:last-child a {
        border-bottom: none; /* No border on the last item of a submenu */
    }

    .submenu a:hover {
        background-color: #555 !important; /* Hover state for mobile submenu items */
        text-decoration: none; /* Remove underline if any */
    }

    header nav ul li.nav-item-with-submenu.submenu-active > .submenu {
        display: block !important; /* Ensure it's visible if active, added !important */
    }
     header nav ul li.nav-item-with-submenu:hover > .submenu {
        display: none !important; /* Force hide on hover for mobile */
    }
    header nav ul li.nav-item-with-submenu.submenu-active:hover > .submenu { /* Ensure active submenu stays displayed on hover */
        display: block;
    }


    header nav .language-selector {
        display: flex; /* Arrange flags side-by-side */
        justify-content: flex-start;
        padding: 10px 20px;
        border-top: 1px solid #f0f0f0; /* Separator */
    }
    header nav .language-selector .flag-icon {
        margin-left: 0;
        margin-right: 15px; /* Space between flags */
    }


    /* Hero Section Mobile */
    .hero {
        /* flex: 1; already set globally, should work */
         align-items: center; /* Center text vertically */
         justify-content: center; /* Center text horizontally */
         min-height: 500px;
    }
    .hero-text {
        margin-top: 40px; /* Added top margin for mobile */
        padding: 20px; 
        text-align: center; 
    }

    .hero-text h1 {
        font-size: 2em; /* Adjusted font size */
        max-width: 100%;   /* Use available width */
        text-align: center; /* Ensure text itself is centered */
        margin: 0 auto;
    }

    /* General Page Section Mobile */
    .page-section h2 {
        font-size: 1.5em; /* Reduce section title size */
    }
    
    /* Nosotros Section Mobile */
    #nosotros .nosotros-layout {
        flex-direction: column; /* Stack columns */
        gap: 20px; /* Reduce gap */
    }
    #nosotros .nosotros-titles-column,
    #nosotros .nosotros-details-column {
        flex-basis: auto; /* Reset flex-basis */
        width: 100%;    /* Full width */
        padding-right: 0; /* Remove padding from titles column */
    }
    #nosotros .nosotros-titles-column h2 {
        font-size: 2em; /* Adjust title size */
    }
    #nosotros .nosotros-details-column {
        min-height: 300px; /* Adjust min-height */
        padding: 30px 20px; /* Adjust padding */
    }
    #nosotros .nosotros-description p {
        font-size: 0.9em; /* Adjust paragraph font size */
    }

    /* Promociones Section Mobile */
    .promociones-grid {
        grid-template-columns: 1fr; /* Single column grid */
        gap: 20px;
    }
    .card-content h3 {
        font-size: 1.3em;
    }
    .card-tags .tag {
        font-size: 0.8em !important;
        padding: 4px 7px !important;
    }

    /* Contacto Section Mobile */
    .contacto-layout {
        flex-direction: column; /* Stack columns */
        gap: 150px;
    }
    .contacto-form-column,
    .contacto-image-column {
        flex-basis: auto; /* Reset flex-basis */
        width: 100%;    /* Full width */
    }
    .contacto-section h2 { /* Already covered by .page-section h2, but can be specific */
        font-size: 1.6em;
        text-align: center; /* Center "CONTACTENOS" */
    }
    .contacto-image-column {
        order: -1; /* Show image above form on mobile if desired, or remove if too much space */
        max-height: 200px; /* Limit illustration height */
        margin-top: 40px; /* Added top margin to the column */
        margin-bottom: 40px; /* Added bottom margin to the column */
    }
    .contacto-image-column img {
        max-width: 100%;
        height: auto;
        border-radius: 8px; /* Optional: if you want rounded corners */
        display: block; /* To allow margin auto to center if needed, and for proper margin application */
        /* margin-top: 40px; Removed */
        /* margin-bottom: 40px; Removed */
    }


    /* Footer Mobile - already has some stacking rules, verify */
    .footer-tier-main-content {
        flex-direction: column;
        align-items: center;
    }
    .footer-content-column {
        min-width: 100%;
        text-align: center;
    }
    .footer-content-column:not(:last-child)::after { /* Vertical rules */
        display: none;
    }
    .footer-col-contact-details .email-block,
    .footer-col-phone-whatsapp .phone-block,
    .footer-col-phone-whatsapp .whatsapp-block {
        justify-content: center; /* Center icon and text within their blocks */
    }
    .footer-nav-links::before, /* Decorative lines in footer nav */
    .footer-nav-links::after {
        width: 100%; /* Shorter lines on mobile */
    }
    .footer-tier-policy .policy-links-list {
        flex-direction: column; /* Stack policy links */
        gap: 10px;
    }

    /* Ensure submenu hover is disabled on mobile, click/tap should be used via JS */
    header nav ul li.nav-item-with-submenu:hover > .submenu {
        display: none !important; /* Force hide on hover for mobile */
    }
     header nav ul li.nav-item-with-submenu.submenu-active > .submenu {
        display: block !important; /* Ensure it's visible if active, added !important */
    }

    .promotion-detail-page {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%; /* Ensure it doesn't exceed screen width on mobile */
    }

    .footer-contact-row {
        flex-direction: column; 
        align-items: center; 
        gap: 20px; /* Add some gap between stacked items */
    }

    .footer-col-contact-details { /* Email column */
        order: 1; /* First item */
        width: 100%; /* Ensure it takes full width if not already */
    }
    .footer-col-contact-details .email-block{
        justify-content: center; /* Center icon and text within their blocks */
    }

    .footer-social-mobile { /* New mobile social icons */
        display: flex !important; /* Show on mobile */
        justify-content: center;
        gap: 30px; 
        margin-top: 10px; 
        width: 100%;
        order: 2; /* Second item */
    }

    .footer-social-mobile .social-icon {
        width: 40px; 
        height: 40px;
    }
    
    .footer-social-icons { /* Desktop social icons (IG, FB in their own div) */
        display: none !important; /* Hide on mobile */
    }

    .footer-col-phone-whatsapp { /* Phone number column wrapper */
        order: 3; /* Third item */
        width: 100%; /* Ensure it takes full width */
    }

    .footer-col-phone-whatsapp .whatsapp-block { /* Original WhatsApp icon block next to phone */
        display: none !important; /* Hide, as WhatsApp is now in .footer-social-mobile */
    }

    .footer-col-phone-whatsapp .phone-block {
        display: flex; 
        justify-content: center; 
        width: 100%; 
        margin-right: 0; 
    }
    
    .footer-col-phone-whatsapp .phone-block::before {
        display: none; 
    }

    .email-texts {
        margin-left: 0; /* Remove left margin for mobile */
        /* font-weight: 300; is fine */
    }

    .footer-nav-links ul {
        flex-direction: column; /* Stack nav items vertically */
        align-items: center; /* Center-align the stacked nav items */
        gap: 10px; /* Add some space between stacked items */
    }

    .footer-nav-links::before,
    .footer-nav-links::after {
        display: none; /* Hide decorative lines on mobile when nav is stacked */
    }

    .contacto-form-column .btn.btn-primary { /* Target submit button in contact form */
        width: 100%; /* Make button full width on mobile */
    }

    /* Mobile: Auto-expand flyouts for "Promociones" when its main menu item is active */
    header nav ul li.nav-item-promociones.submenu-active .submenu-item-with-flyout > .flyout-menu {
        display: block !important; /* Show the flyout, !important to override other display rules if necessary */
        position: static; /* Ensure it flows in the mobile menu, inherited from .submenu */
        background-color: #383838; /* Slightly different background for visual nesting */
        padding-left: 0; /* Reset padding on the container, apply to links instead */
        width: 100%;
        box-sizing: border-box;
        border-top: none; /* Remove any top border inherited from general .submenu */
    }

    header nav ul li.nav-item-promociones.submenu-active .submenu-item-with-flyout > .flyout-menu a {
        /* Styles for links within these auto-expanded flyouts */
        padding-left: 50px !important; /* Further indent (e.g., main mobile a:20px, 1st sub a:35px) */
        font-size: 0.8em !important; /* Make them smaller */
        font-weight: normal; /* Override bold if inherited */
        background-color: transparent !important; /* Ensure no conflicting background */
        color: #e0e0e0 !important; /* Lighter text color for distinction */
        border-bottom: 1px solid #484848 !important; /* Separator */
    }

    header nav ul li.nav-item-promociones.submenu-active .submenu-item-with-flyout > .flyout-menu a:last-child {
        border-bottom: none !important;
    }

    /* Ensure that on mobile, direct hover over an item with a flyout doesn't trigger the flyout, as tap controls this. */
    /* This rule targets any flyout on mobile when its direct parent is hovered. */
    .submenu-item-with-flyout:hover > .flyout-menu {
         display: none !important;
    }

    .detail-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 40px;
    }
    .btn.btn-detail {
        width: 100%;
        max-width: 320px;
        text-align: center;
        margin: 0 auto;
        display: block;
    }
}

/* Promociones Section */
#promociones .section-title-hidden {
    /* If the main H2 "PROMOCIONES" from page-section is used visually, this class can hide it if a different title structure is used inside the section */
    /* For now, assume the .page-section h2 is the visible title */
     border-bottom: 1px solid #eee; /* Add a separator line under the main title */
     padding-bottom: 20px;
     margin-bottom: 30px;
}

.promociones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Responsive grid */
    gap: 30px;
}

/* Specific styling for the grid in #promociones-anteriores to feature a single card prominently */
#promociones-anteriores .promociones-grid {
    display: flex; /* Switch to flex for positioning */
    justify-content: flex-start; /* Align the card to the left */
    gap: 0; /* Reset gap, as flex gap behaves differently */
    padding-top: 20px; /* Add some spacing if needed */
    padding-bottom: 20px;
}

#promociones-anteriores .promociones-grid .promotion-card {
    width: 100%; /* Take full width up to max-width or flex-basis */
    
    flex-basis: 50%; /* Aim for roughly half the container width, adjust as needed */
    margin-right: 30px; /* Add a margin to simulate the gap if it were a two-column layout */
    /* If you want it to be exactly half minus gap, it gets more complex with calc() and container queries */
    /* For simplicity, flex-basis and max-width should give good control */
    flex-shrink: 0; /* Prevent shrinking */
    /* Other .promotion-card styles like border, shadow will still apply */
}

.promotion-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promotion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.card-image-container {
    position: relative;
    overflow: hidden; /* Ensures tags don't break out weirdly if absolutely positioned */
}

.card-image-container img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10; /* Maintain aspect ratio for images */
    object-fit: cover;
    display: block;
}

.card-image-container.card-map img {
    aspect-ratio: auto;
    margin-top: 0;
}

.card-tags {
    position: absolute;
    top: 10px; /* Add separation from the top */
    left: 0; /* Flush with left edge */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Add separation between tags */
    /* padding: 5px; /* Optional: Add some padding around the tags if needed */
}

.card-tags .tag {
    /* background-color: rgba(0,0,0,0.75); /* Default, will be overridden by specific tags */
    /* color: #fff; /* Default, will be overridden */
    padding: 8px 15px; /* Adjusted padding for better appearance */
    border-radius: 0; /* Remove border-radius for sharp edges */
    font-size: 1em; /* Adjusted font size */
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
}

.card-tags .tag-location {
    background-color: #000000; /* Black background */
    color: #ffffff; /* Black text */
}

.card-tags .tag-status {
    background-color: #b08d57; /* Gold background */
    color: #ffffff; /* Black text */
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    color: #b08d57; /* Gold-ish color for title */
    margin-bottom: 0; /* Removed bottom margin */
}

.card-content a h3,
.card-content a:hover h3 {
    color: #b08d57; /* Ensure gold color is maintained for linked H3 */
    text-decoration: none; /* Ensure no underline on H3 within a link */
    /* Font properties are inherited from h3, so no need to repeat */
    margin-bottom: 10px;
}

.card-content .address {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start; /* Align icon and text nicely */
}

.address-detail {
    display: flex;
    align-items: flex-start;   /* Align icon to the top */
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 0 auto 15px auto;
    gap: 8px;
}

.address-detail .address-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    margin-top: 2px;
}

.address-detail a {
    color: #333;
    text-decoration: none;
}

.address-detail a:hover {
    color: #b08d57;
    text-decoration: underline;
}

.card-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 0px;
    border-top: 1px solid #eee;
    min-height: 61px;
}

.icon-item {
    display: flex;
    align-items: center;
    font-size: 0.85em;
    color: #555;
}

.icon-item img {
    width: 36px; /* Increased from 20px by 30% */
    height: 36px; /* Increased from 20px by 30% */
    margin-right: 8px;
}

/* Align Azure video icon to the right within card-icons */
.promotion-card .card-icons .icon-item:has(a.azure-video-trigger) {
    margin-left: auto;
}

/* Contacto Section */
.contacto-section {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
}

.contacto-section h2 {
    color: #b08d57; /* Gold-ish color for "CONTACTENOS" title */
    text-align: left; /* Align to left as per image */
    margin-bottom: 30px;
    /* font-family and weight inherited from .page-section h2 */
}

.contacto-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 40px;
}

.contacto-form-column {
    flex: 1;
    min-width: 300px; /* Minimum width before wrapping */
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #ccc; /* Lighter white for labels */
}

.form-group label .required {
    color: #b08d57; /* Gold-ish for asterisk */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: #1a1a1a; /* Dark background for inputs */
    border: 1px solid #333; /* Subtle border */
    color: #fff;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group-checkbox input[type="checkbox"] {
    width: auto;
    margin-right: 5px; /* Keep some space from label even if gap is small */
    accent-color: #b08d57; /* Style the checkbox color */
}

.form-group-checkbox label {
    margin-bottom: 0; /* Reset bottom margin for checkbox label */
    font-size: 0.85em;
    color: #bbb; /* Slightly different color for privacy text */
}

.form-group-checkbox label a {
    color: #b08d57; /* Gold-ish for the link */
    text-decoration: underline;
}

.btn.btn-primary {
    background-color: #b08d57; /* Gold-ish button */
    color: #000; /* Black text on button */
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn.btn-primary:hover {
    background-color: #c8a470; /* Lighter gold on hover */
}

.contacto-image-column {
    flex: 1;
    min-width: 300px; /* Minimum width before wrapping */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px; /* Added top margin to the column */
    margin-bottom: 40px; /* Added bottom margin to the column */
}

.contacto-image-column img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: if you want rounded corners */
    display: block; /* To allow margin auto to center if needed, and for proper margin application */
    /* margin-top: 40px; Removed */
    /* margin-bottom: 40px; Removed */
}

/* Footer */
footer {
    #promociones .section-title-hidden {
        /* No specific mobile changes here unless needed */
    }

    .promociones-grid {
        /* Grid will naturally stack to one column if minmax(320px, 1fr) is used */
    }

    .card-content h3 {
        font-size: 1.4em; /* Slightly smaller title on mobile */
    }
}

/* Make main content area grow to push footer down */
main {
    display: block; /* Remove flexbox to prevent stretching */
}

/* Media Query for 4K / Very Large Screens */
@media (min-width: 1921px) {
    body {
        font-size: 116.67%; /* Approx +2pt increase from a 12pt base (16px * 14/12) */
    }

    .promotion-detail-page {
        /* max-width: 1800px; REMOVED to align with .container behavior */
    }

    .hero-text h1 {
        max-width: 950px; /* Original: 600px */
        font-size: 4.5em; 
    }

    #nosotros .nosotros-description {
        max-width: 700px; /* Original: 550px */
    }

    .footer-nav-links::before,
    .footer-nav-links::after {
        width: 100%; /* Original: 100px */
    }
}

/* Google Maps Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent black overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* Ensure it's on top of everything */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 80vw; /* Changed from 90% to 80% of viewport width */
    max-width: 90vw; /* Adjusted max-width relative to viewport */
    height: 80vh; /* Changed from 80% to 80% of viewport height */
    max-height: 90vh; /* Adjusted max-height relative to viewport */
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex; /* Use flexbox to manage internal layout */
    flex-direction: column; /* Stack close button and map container */
}

.modal-close {
    position: absolute;
    top: -2px;
    right: 5px;
    background: none;
    border: none;
    font-size: 2.5em; /* Make close button larger */
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.modal-close:hover {
    color: #000;
}

.map-container {
    flex-grow: 1; /* Allow map container to fill available space */
    width: 100%;
    height: 100%; /* Take full height of its flex parent space */
    overflow: hidden; /* Just in case iframe tries to overflow */
    margin-top: 30px; /* Space for close button */
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Promotion Detail Page Styles */
.promotion-detail-page {
    padding-top: 40px; 
    padding-bottom: 40px; 
    padding-left: 3vw; /* Consistent with .container */
    padding-right: 3vw;/* Consistent with .container */
    width: 100%;       /* Consistent with .container */
    box-sizing: border-box;
}

.detail-main-layout {
    /*display: flex; */
    flex-direction: row;
    gap: 40px;
    padding: 0  0 40px 0;
}

.detail-image-column {
    flex: 1;
    position: relative;
    min-width: 0; /* Prevent flex item from overflowing */
    aspect-ratio: 1920 / 1080; /* Para mantener relación 16:9 */
    overflow: hidden; /* Para contener las imágenes adecuadamente */
    width: 100%; /* Asegurar que tome el ancho disponible en el flex container */
}

.detail-info-column {
    flex: 1;
    padding: 20px;
    min-width: 0; /* Prevent flex item from overflowing */
}

.detail-image-column img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Muestra imagen completa, mantiene proporción, bandas si es necesario */
    display: block; /* o inline-block; block con margin:auto o flex en el padre funciona */
}

/* Slider Styles */
.slider-container {
    width: 100%;
    height: 100%; /* Para llenar la altura del detail-image-column */
    overflow: hidden;
    position: relative;
    border: 0;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* El ancho es manejado por los slides individuales y el transform */
    height: 100%; /* Para llenar la altura del slider-container */
}

.slide {
    width: 100%;
    min-width: 100%; /* Asegura que cada slide ocupe el ancho completo del track visible */
    max-width: 100%;
    height: 100%; /* Para llenar la altura del slider-track */
    box-sizing: border-box;
    overflow: hidden;
    /* background-color: #ffffff; */ /* Opcional: si se quieren bandas blancas. Si no, será transparente. */
    display: flex; /* Para centrar la imagen */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    flex-shrink: 0; /* Evitar que los slides se encojan */
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Muestra imagen completa, mantiene proporción, bandas si es necesario */
    display: block; /* o inline-block; block con margin:auto o flex en el padre funciona */
}

.slide-img-contain {
    object-fit: contain !important; /* Use !important to ensure override if needed */
}

.slider-button {
    position: absolute;
    bottom: 47%; /* Adjust as needed */
    background-color: rgba(0, 0, 0, 0.6); /* Dark semi-transparent background */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5em; /* Size of the chevron */
    line-height: 1;
    z-index: 10; /* Above slides, below tags if tags need to be clickable over buttons */
    transition: background-color 0.3s ease;
}

.slider-button:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.slider-prev {
    left: 20px; /* Position next to the .slider-next button */
    /* If you want it on the left: left: 20px; */
}

.slider-next {
    right: 20px;
}

/* Ensure card-tags are still visible and correctly positioned over the slider */
.detail-image-column .card-tags {
    position: absolute; /* Already absolute, re-confirming context */
    top: 10px; 
    left: 0; 
    z-index: 15; /* Ensure tags are above slider buttons if they overlap */
    width: auto; 
}

.project-logo-detail {
    margin-bottom: 15px;
    text-align: center; /* Center the logo image */
    margin-top: 30px; /* Added more top distance */
}

.project-logo-detail img {
    max-width: 280px; /* Reduced max-width for better visual centering */
    height: auto;
    display: block;
    margin-left: auto; /* For centering block image */
    margin-right: auto; /* For centering block image */
}

.project-subtitle-detail {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6em;
    color: #333;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center; /* Center the subtitle */
}

.detail-separator {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 20px 0 10px 0;
}

.caracteristicas-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.3em;
    color: #555;
    margin-bottom: 30px;
    text-align: center;
}

.caracteristicas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Explicitly 3 columns */
    gap: 25px;
    margin-bottom: 50px;
}

.caracteristica-item {
    text-align: center;
    display: flex; /* Added for better internal alignment */
    flex-direction: column; /* Stack icon and text */
    align-items: center; /* Center icon and text */
    justify-content: flex-start; /* Align to top */
}

.caracteristica-item img {
    width: 56px; /* Match promo card icon size or adjust as needed */
    height: 56px;
    margin-bottom: 8px;
}

.caracteristica-item span {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    color: #333;
    display: block;
}

.detail-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Explicitly 3 columns */
    gap: 25px;
    margin-top: 40px; /* Added some space above buttons */
}

.btn.btn-detail {
    background-color: #000;
    color: #fff;
    padding: 12px 25px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9em;
    border: 2px solid #000;
    border-radius: 0; /* Sharp edges */
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn.btn-detail:hover {
    background-color: #333;
}

.btn.btn-detail.btn-live {
    /* Potentially different style for "OBRA EN VIVO" if needed */
    /* background-color: #b08d57; */
    /* color: #000; */
    /* border-color: #b08d57; */
}

/* Mobile adjustments for detail page */
@media (max-width: 768px) {
    .address-detail{
        display: block;
        align-items: center;
        }

    .detail-info-column .address-icon {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 10px;
    }

    .detail-main-layout {
        flex-direction: column;
        gap: 20px;
    }
    .detail-image-column,
    .detail-info-column {
        width: 100%;
        height: auto;
    }
    .slide {
        width: 100%;
        height: 100%; /* Para llenar el slider-track */
        display: flex; /* Para centrar la imagen */
        align-items: center;
        justify-content: center;
    }

    .slide img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain; /* Asegurar que sea contain */
        display: block;
    }
    .slider-prev {
        left: auto !important;
        right: 70px !important; /* Position next to the .slider-next button */
        /* If you want it on the left: left: 20px; */
    }
    .slider-button, .slider-prev, .slider-next {
        position: absolute;
        bottom: 5px;
    }
    .project-logo-detail img {
        max-width: 150px; /* Further reduce for mobile if needed */
    }
    .project-subtitle-detail {
        font-size: 1.3em;
    }
    .caracteristicas-grid {
        grid-template-columns: repeat(2, 1fr); /* Explicitly 2 columns on mobile */
        gap: 20px;
    }
    .detail-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 40px;
    }
    .btn.btn-detail {
        width: 100%;
        max-width: 320px;
        text-align: center;
        margin: 0 auto;
        display: block;
    }

    #promociones-anteriores .promociones-grid .promotion-card {
        flex-basis: 100%; /* Aim for roughly half the container width, adjust as needed */
    }

    .slider-button {
        font-size: 0.8em !important;
    }
}

.footer-social-mobile {
    display: none; /* Hidden by default, outside media query */
}

/* Styles for the new flyout submenu */
.submenu-item-with-flyout {
    position: relative; /* Needed for absolute positioning of the flyout */
}

.flyout-trigger {
    /* Inherits styles from .submenu a, which is good */
    /* If specific styling is needed for the trigger, add it here */
}

.flyout-menu {
    /* display: none; is handled by .submenu class initially */
    /* position: absolute; is handled by .submenu class */
    top: -10px; /* Adjust to align text of first item with trigger text, compensating for .submenu padding */
    left: 100%; /* Position to the right of the trigger */
    /* background-color: #000; is handled by .submenu */
    /* padding: 10px 0; is handled by .submenu */
    /* z-index: 1001; is handled by .submenu */
    /* min-width: 250px; is handled by .submenu */
    /* border-top: 1px solid #333; is handled by .submenu */
    margin-left: 1px; /* Small gap between trigger and flyout */
}

.submenu-item-with-flyout:hover > .flyout-menu {
    display: block;
}

/* Remove redundant/potentially conflicting .flyout-menu a and .flyout-menu a:hover rules
   as .flyout-menu also has the .submenu class, so styles from .submenu a should apply. */

header nav .language-selector img {
    height: 20px;
    width: auto;
    margin-left: 5px;
}

header nav .language-selector .flag-icon {
    font-size: 1.2em; /* Adjust size as needed */
    margin-left: 8px;
    vertical-align: middle;
}

header nav .language-selector a.active .flag-icon {
    /* Add any specific style for active flag, e.g. border, if needed */
    /* For now, active state is on the <a> tag via .active class from JS */
}

/* Cookie Consent Banner Styles */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #222; /* Dark background */
    color: #f1f1f1; /* Light text */
    padding: 15px 0;
    z-index: 2000; /* Ensure it's above other content but below modals if necessary */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.cookie-consent-banner .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.cookie-consent-banner p {
    margin: 0 0 10px 0; /* Margin for spacing, esp. on mobile */
    flex-grow: 1;
    font-size: 0.9em;
}

.cookie-consent-banner p a {
    color: #b08d57; /* Gold link color */
    text-decoration: underline;
}

.cookie-consent-banner p a:hover {
    text-decoration: none;
}

.cookie-consent-buttons {
    display: flex;
    gap: 10px;
}

.cookie-consent-buttons button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

#acceptCookieConsent {
    background-color: #b08d57; /* Gold */
    color: #000;
}

#acceptCookieConsent:hover {
    background-color: #c8a470; /* Lighter gold */
}

#declineCookieConsent {
    background-color: #555; /* Grey */
    color: #fff;
}

#declineCookieConsent:hover {
    background-color: #777;
}

/* Mobile adjustments for cookie banner */
@media (max-width: 768px) {
    .cookie-consent-banner .container {
        flex-direction: column;
        text-align: center;
    }
    .cookie-consent-banner p {
        margin-bottom: 15px;
    }
    .cookie-consent-buttons {
        width: 100%;
        justify-content: center;
    }
    .cookie-consent-buttons button {
        flex-grow: 1; /* Make buttons take equal width */
    }
}

.detail-info-column .address-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%; /* Ensure container takes full width */
    text-align: center; /* Center the text content */
    margin: 0 auto; /* Center the container itself */
}

.detail-info-column .address {
    margin: 0;
    text-align: center; /* Center the text */
}

.detail-info-column .address a {
    display: inline-flex; /* Keep icon and text aligned */
    align-items: center;
    color: #333;
    text-decoration: none;
}

.detail-info-column .address a:hover {
    color: #b08d57;
    text-decoration: underline;
}


.address-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

.detail-info-column .address-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Map Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.map-modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    width: 90%;
    max-width: 800px;
    height: 80vh;
}

#map-modal-content {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.close {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    z-index: 1;
}

.close:hover {
    color: #b08d57;
}