/* ---------- ALPINE GRANITE & PINE THEME ---------- */
.min-stay-alert {
    color: #e74c3c;
    font-weight: 800;
    font-size: 0.8rem;
    margin-bottom: 20px;
}
.error-text {
    color: #ef4444;
}
.control-panel-link {
    color: var(--primary);
    font-weight: bold;
}
:root {
    --primary: #2C3E50;      /* Midnight Blue / Granite */
    --primary-light: #3E5468;
    --secondary: #27AE60;    /* Pine Green */
    --accent: #E67E22;       /* Terracotta / Sunset */
    --dark: #1A252F;         /* Deep Granite */
    --text: #1A1A1A;         /* Darker for contrast */
    --text-muted: #555555;   
    --bg-soft: #F9F9F9;      /* Off-white / Snow */
    --white: #ffffff;
    --border: rgba(44, 62, 80, 0.1);
    --shadow-subtle: 0 4px 20px rgba(0,0,0,0.05);
    --shadow-focus: 0 10px 30px rgba(44,62,80,0.1);
    --radius: 4px;           /* Slightly rounded for modern feel */
    --trans: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background-color: var(--bg-soft);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    color: var(--dark);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ---------- SANDBOX NOTICE ---------- */
/* Shown to visitors when the tenant's payments run in Stripe's test mode, so that
   nobody completes a booking believing they have paid for something that will never
   be charged. Sits above the fixed navbar, which is why it is pushed down to match. */
.sandbox-notice {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 12px, #d97706 12px, #d97706 24px);
    color: #1f1300;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

.sandbox-notice + .navbar {
    top: 0;
}

@media (max-width: 768px) {
    .sandbox-notice {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}

/* ---------- NAVIGATION ---------- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding: 25px 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, transparent 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.75); /* More translucent for better glass effect */
    padding: 12px 0;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--trans);
    z-index: 1100;
}

.logo img {
    height: 50px;
    width: auto;
    display: block;
    transition: var(--trans);
}

.logo span {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-left: 12px;
    white-space: nowrap;
}

.navbar.scrolled .logo img {
    height: 40px;
}

.navbar.scrolled .logo span {
    font-size: 1rem;
    color: var(--primary);
}

.language-selector {
    display: flex;
    gap: 8px;
    background: rgba(0,0,0,0.05);
    padding: 4px;
    border-radius: 30px;
    margin-left: auto;
    margin-right: 30px;
}

.nav-menu .language-selector {
    display: none;
}

.lang-btn {
    /* The language pickers are anchors so they work without JavaScript; these
       declarations used to reset a <button> and left the link underline and
       inherited colour in place. */
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 20px;
    transition: var(--trans);
    opacity: 0.5;
    text-decoration: none;
    color: inherit;
    line-height: 0;
}

.lang-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lang-btn img {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
}

.lang-btn:hover { opacity: 1; background: rgba(255,255,255,0.5); }
.lang-btn.active {
    opacity: 1;
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nav-menu {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}

.nav-menu a {
    text-decoration: none;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: var(--trans);
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: var(--trans);
}

.nav-menu a:hover { color: var(--accent); }
.nav-menu a:hover::after { width: 100%; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1100;
    padding: 10px;
    border-radius: 50%;
    transition: var(--trans);
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: var(--primary);
    transition: var(--trans);
    border-radius: 2px;
}

.nav-menu.active ~ .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-menu.active ~ .hamburger span:nth-child(2) { opacity: 0; }
.nav-menu.active ~ .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- RESPONSIVE NAV ---------- */
@media (max-width: 992px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--white);
        flex-direction: column;
        justify-content: center;
        padding: 80px 40px;
        transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 1000;
    }

    .nav-menu.active { right: 0; }

    .nav-menu a {
        font-size: 1.5rem;
        font-family: 'Playfair Display', serif;
        text-transform: none;
        letter-spacing: 0;
    }

    .hamburger { display: flex; }
    .language-selector { margin-right: 15px; }
}

@media (max-width: 480px) {
    .logo span { display: none; }
    .language-selector { padding: 2px; gap: 4px; }
    .lang-btn { padding: 4px 8px; }
}

/* ---------- HERO ---------- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    background: rgba(18, 22, 18, 0.25); /* Reduced overlay opacity */
    color: var(--white);
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 150px;
    background: linear-gradient(to top, var(--bg-soft), transparent);
    z-index: 3;
}

.hero-content {
    position: relative;
    z-index: 4;
    max-width: 800px;
}

.hero h1 {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 2rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Added shadow for readability on lighter images */
}

.hero p {
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 3.5rem;
    color: var(--accent);
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.cta-button {
    padding: 20px 50px;
    background: var(--white);
    color: var(--primary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: var(--trans);
    border-radius: var(--radius);
}

.cta-button:hover { background: var(--primary); color: var(--white); }

.hero-image {
    position: absolute;
    top: 0; right: 0; width: 100%; height: 100%;
    z-index: 1;
}

.hero-image img {
    width: 100%; height: 100%; object-fit: cover;
    /* no darkening filter — keep the photo luminosity intact */
}

/* ---------- APARTMENTS ---------- */
.apartments { padding: 100px 0; }

.section-title { text-align: center; margin-bottom: 40px; }
.section-title h2 { font-size: 3.5rem; margin-bottom: 1.5rem; color: var(--primary); }
.section-title .line { width: 40px; height: 3px; background: var(--accent); margin: 0 auto; }

.apartments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
}

.apartment-card {
    background: var(--white);
    transition: var(--trans);
    border: 1px solid var(--border);
    padding: 15px;
}

.apartment-image { height: 500px; overflow: hidden; }
.apartment-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--trans); filter: sepia(0.1); }
.apartment-card:hover .apartment-image img { transform: scale(1.05); filter: sepia(0); }

/* ---------- SLIDESHOW ---------- */
.apartment-image {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.slide-item.active {
    opacity: 1;
    z-index: 2;
}

.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slideshow-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 20px;
    z-index: 10;
    opacity: 0;
    transition: var(--trans);
}

.apartment-card:hover .slideshow-nav {
    opacity: 1;
}

.slide-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--trans);
}

.slide-btn:hover {
    background: var(--accent);
}

.slideshow-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--trans);
}

.dot.active {
    background: var(--accent);
    width: 24px;
    border-radius: 4px;
}

.apartment-info { padding: 50px 30px; text-align: center; }
.apartment-info h3 { font-size: 2.2rem; margin-bottom: 1.5rem; color: var(--accent); font-family: 'Playfair Display', serif; }
.apartment-info p { color: var(--text-muted); font-size: 1rem; margin-bottom: 2.5rem; }

.apartment-price { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 15px;
    margin-bottom: 30px;
}

.apartment-price .price { 
    font-size: 2.25rem; 
    font-weight: 700; 
    color: var(--primary); 
}

.apartment-price .unit { 
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: var(--text-muted); 
}

.apartment-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.apartment-actions .btn {
    padding: 12px 20px;
    font-size: 0.7rem;
}

.apartment-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--accent);
    color: #121612; /* Dark text for better contrast on gold/accent */
    padding: 8px 15px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 10;
}

.apartment-features {
    display: flex; justify-content: center; gap: 40px; margin-bottom: 3rem;
    color: var(--primary); font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
}

.apartment-features span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.apartment-features i {
    color: var(--accent);
    font-size: 1.1rem;
}

.book-btn {
    background: var(--primary); color: var(--white); border: 1px solid var(--primary);
    padding: 18px 45px; text-transform: uppercase; letter-spacing: 3px; font-size: 0.7rem; font-weight: 800;
    cursor: pointer; transition: var(--trans);
}

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

/* ---------- BUTTONS ---------- */
.btn {
    padding: 15px 30px;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: var(--trans);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
}

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

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--primary);
}

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

.btn-secondary {
    background: var(--accent);
    color: var(--white);
    border: 1px solid var(--accent);
}

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

/* ---------- AMENITIES ---------- */
.amenities { padding: 120px 0; background: #f0f2f1; }
.amenities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.amenity-card { text-align: center; padding: 60px 30px; background: var(--white); border: 1px solid var(--border); }
.amenity-card i { font-size: 2.5rem; color: var(--accent); margin-bottom: 2rem; }
.amenity-card h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--primary); }

/* ---------- MODALS ---------- */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(13,18,15,0.8); backdrop-filter: blur(8px); }
.modal-content { 
    background: var(--white); 
    margin: 5vh auto; 
    padding: 60px; 
    width: 95%; 
    max-width: 1000px; 
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.close { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    width: 40px;
    height: 40px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem; 
    color: var(--primary);
    cursor: pointer; 
    transition: var(--trans);
    z-index: 10;
}

.close:hover {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
    transform: rotate(90deg);
}

/* ---------- CONTACT ---------- */
.contact { padding: 140px 0; background: var(--white); }

.contact-content { 
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    gap: 80px; 
}

.contact-info { display: flex; flex-direction: column; gap: 40px; }

.contact-item { display: flex; gap: 25px; }
.contact-item i { 
    font-size: 1.5rem; 
    color: var(--accent); 
    margin-top: 5px; 
}

.contact-item h3 { 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    margin-bottom: 10px; 
    color: var(--primary);
}

.contact-item p { color: var(--text); font-size: 1rem; line-height: 1.6; font-weight: 500; }

.contact-form {
    padding: 60px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.contact-form .form-group { margin-bottom: 25px; }

/* Spam trap. Moved far off-screen rather than hidden with display:none, because
   some bots skip hidden fields and this one has to keep looking like a real
   input. Clipped to a 1px box, so it never affects the form's layout. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form button[type="submit"] {
    width: 100%;
    padding: 20px;
    background: var(--primary);
    color: var(--white);
    border: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--trans);
}

.contact-form button[type="submit"]:hover {
    background: var(--accent);
}

.contact-form button[type="submit"]:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

/* ---------- SCROLL REVEAL ---------- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay for multiple cards */
.apartments-grid .apartment-card:nth-child(2) { transition-delay: 0.1s; }
.apartments-grid .apartment-card:nth-child(3) { transition-delay: 0.2s; }
.amenities-grid .amenity-card:nth-child(2) { transition-delay: 0.1s; }
.amenities-grid .amenity-card:nth-child(3) { transition-delay: 0.2s; }

/* ---------- FOOTER ---------- */
.footer {
    padding: 100px 0 50px;
    background: var(--dark);
    color: rgba(255,255,255,0.5);
}

.footer h3 {
    color: var(--white);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 100px;
    margin-bottom: 80px;
}

.footer-section ul {
    list-style: none;
}

.footer-section a {
    color: inherit;
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
    font-size: 0.9rem;
    transition: var(--trans);
}

.footer-section a:hover {
    color: var(--white);
}

.footer-section p {
    font-size: 0.95rem;
    line-height: 1.8;
}

.social-links {
    display: flex;
    gap: 25px;
}

.social-links a {
    color: rgba(255,255,255,0.6);
    font-size: 1.25rem;
    transition: var(--trans);
}

.social-links a:hover {
    color: var(--accent);
    transform: translateY(-3px);
}

.footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .apartments-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); }
    .hero { min-height: auto; padding: 120px 0 80px; }
    .hero p { font-size: 0.9rem; margin-bottom: 2rem; }
    .footer-content { grid-template-columns: 1fr 1fr; gap: 50px; }
}

@media (max-width: 768px) {
    body { overflow-x: hidden; width: 100%; }
    .container { padding: 0 16px; }
    .hamburger { display: flex; z-index: 1100; }
    
    /* Compact hero */
    .hero { 
        min-height: auto; 
        padding: 100px 0 60px; 
        text-align: center;
    }
    .hero h1 { 
        font-size: clamp(2rem, 8vw, 2.8rem); 
        margin-bottom: 0.75rem;
        line-height: 1.1;
    }
    .hero-content { margin: 0 auto; }
    .hero p { 
        font-size: 0.8rem; 
        letter-spacing: 2px;
        margin-bottom: 1.5rem;
    }
    .hero .cta-button {
        padding: 14px 28px;
        font-size: 0.7rem;
        letter-spacing: 2px;
    }
    
    /* Language selector hidden in header, shown in mobile menu */
    .language-selector { 
        display: none; 
    }
    .nav-menu .language-selector {
        display: flex;
        margin-right: 0;
        margin-top: 16px;
        justify-content: center;
    }
    
    .nav-menu { 
        position: fixed; 
        left: -100%; 
        top: 0; 
        height: 100vh;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 1000;
    }
    
    .nav-menu.active { left: 0; }
    
    .hero { text-align: center; }
    .hero h1 { font-size: 2.5rem; }
    .hero-content { margin: 0 auto; }
    
    .section-title h2 { font-size: 2.5rem; }
    .section-title { text-align: center !important; }
    .section-title .line { margin: 0 auto !important; }
    
    .amenities-grid { grid-template-columns: 1fr; }
    .amenity-card { padding: 40px 20px; }
    
    .contact-content { grid-template-columns: 1fr; gap: 60px; }
    .contact-info { text-align: center; align-items: center; }
    .contact-item { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    
    .footer-content { grid-template-columns: 1fr; text-align: center; gap: 60px; }
    .social-links { justify-content: center; }
    
    .apartment-card { padding: 8px; }
    .apartment-image { height: 220px; }
    .apartment-info { padding: 20px 12px; }
    .apartment-info h3 { font-size: 1.4rem; color: var(--accent); margin-bottom: 6px; }
    .apartment-info > p { font-size: 0.82rem; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .apartment-features { gap: 10px; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.8rem; }
    .apartment-price { flex-direction: column; gap: 10px; }
    .apartment-price .price { font-size: 1.4rem; }
    .apartment-actions { 
        flex-direction: column; 
        width: 100%; 
        gap: 8px; 
    }
    .apartment-actions .book-btn, .apartment-actions .btn { 
        width: 100%; 
        justify-content: center; 
        padding: 12px 16px; 
        font-size: 0.75rem;
    }

    .navbar { padding: 20px 0; }
    .logo img { height: 40px; }
    .logo span { font-size: 0.8rem; margin-left: 8px; }
    .language-selector { margin-right: 20px; gap: 10px; }
    
    .slide-modal { 
        padding: 40px 15px 20px; 
        max-width: 100%;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
    .slide-modal .slide-progress { margin-bottom: 25px; }
    .slide-modal .slide h3 { font-size: 1.2rem; margin-bottom: 1.5rem; }
    .slide-modal .form-group { margin-bottom: 15px; }
    .slide-modal .slide-nav { margin-top: 25px; }
    .slide-modal .slide-nav button { padding: 12px 20px; }
    .slide-modal .apartment-choices { gap: 10px; }
    
    .date-guest-grid { grid-template-columns: 1fr; gap: 10px; }
    .choice-content { padding: 10px; gap: 10px; }
    .choice-content img { width: 50px; height: 40px; }
    .choice-info h4 { font-size: 0.8rem; }
    .choice-info span { font-size: 0.7rem; }

    .quick-booking {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
        font-size: 0.7rem;
        gap: 10px;
    }
}
/* ---------- SLIDE MODAL & BOOKING FLOW ---------- */
.slide-modal { max-width: 900px; padding: 60px; border: 1px solid var(--border); }
.slide-progress { height: 4px; background: var(--border); margin-bottom: 40px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); width: 33.33%; transition: var(--trans); }

.slide-form { position: relative; }
.slide { display: none; animation: modalFadeIn 0.4s ease; }
.slide.active { display: block; }

.slide h3 { 
    font-size: 1.8rem; 
    margin-bottom: 2.5rem; 
    color: var(--primary); 
    text-transform: uppercase; 
    letter-spacing: 1px;
    text-align: center;
}
.slide h3:focus,
.slide h3:focus-visible { outline: none; }

.apartment-choices { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; 
}
.choice-card { position: relative; cursor: pointer; border: 1px solid var(--border); transition: var(--trans); border-radius: 8px; overflow: hidden; }
.choice-card input { position: absolute; opacity: 0; }
.choice-content { 
    display: flex; 
    flex-direction: column; 
    gap: 0; 
    background: var(--bg-soft); 
    transition: var(--trans); 
    height: 100%;
}
.choice-card input:checked + .choice-content { background: var(--white); border: 2px solid var(--accent); box-shadow: var(--shadow-subtle); }
.choice-content img { width: 100%; height: 180px; object-fit: cover; }
.choice-info { padding: 20px; text-align: center; }
.choice-info h4 { margin: 0 0 10px 0; font-size: 1rem; text-transform: uppercase; color: var(--primary); }
.choice-info span { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }

.date-guest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.form-group { margin-bottom: 15px; }
.form-group label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 700; 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    color: var(--primary);
}
.form-group input, .form-group select, .form-group textarea, .form-control { 
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid var(--border); 
    background: var(--bg-soft);
    font-size: 0.9rem; 
    font-family: inherit;
    transition: var(--trans);
    border-radius: var(--radius);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .form-control:focus { 
    outline: none; 
    border-color: var(--accent); 
    background: white; 
}

.price-preview { 
    margin-top: 20px;
    padding: 20px; 
    background: var(--primary); 
    color: var(--white); 
    text-align: center; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    font-size: 0.8rem;
    border-radius: var(--radius);
}

/* ---------- LIVE PRICE PREVIEW ----------
 * Classes rather than style="" attributes. A `style-src` nonce authorises <style>
 * elements; it cannot authorise an inline style attribute, so every `style="…"`
 * written into the booking form was being dropped by the browser and the total
 * rendered unstyled at the default size, with a CSP violation logged on every page
 * load. The fix is the class, not 'unsafe-inline' in the policy — that would
 * reopen the XSS the nonce exists to close. */
.price-preview__discount {
    font-size: 0.8rem;
    color: var(--accent);
}

.price-preview__total {
    font-size: 1.2rem;
}

.price-preview__nights {
    font-size: 0.75rem;
    color: #666;
    font-weight: 400;
}

/* ---------- MINI BOOKING CALENDAR ---------- */
.mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #eee;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 350px;
    margin: 0 auto 15px;
}

.mini-day {
    background: var(--white);
    aspect-ratio: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: default;
    color: var(--text);
    transition: var(--trans);
}

.mini-day.header {
    background: var(--bg-soft);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mini-day.other { color: #ccc; }
.mini-day.today { font-weight: 800; color: var(--accent); text-decoration: underline; }
.mini-day.past { background: var(--bg-soft); color: #b8b8b8; cursor: not-allowed; }
.mini-day.pending { color: #b8b8b8; }
.mini-day.occupied { background: #ffebeb; color: #ff6b6b; cursor: not-allowed; }
.mini-day.available:hover { background: var(--accent); color: white; cursor: pointer; }
.mini-day.selected { 
    background: var(--primary); 
    color: white; 
    font-weight: 700;
}
.mini-day.in-range { background: color-mix(in srgb, var(--primary) 12%, white); }

.booking-calendar-status,
.calendar-legend,
.booking-feedback {
    display: none;
}
.booking-calendar-status[hidden] { display: none !important; }

/* Optional: softer color for the middle of the range if we want to differentiate */
.mini-day.selected:not(:first-of-type):not(:last-of-type) {
    /* opacity: 0.9; */
}

.slide-nav { margin-top: 40px; display: flex; justify-content: space-between; gap: 20px; }
.prev-btn, .next-btn, .submit-btn {
    padding: 15px 30px; border: none; font-size: 0.7rem; font-weight: 800; 
    text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: var(--trans);
}
.prev-btn { background: var(--bg-soft); color: var(--primary); border: 1px solid var(--border); }
.next-btn, .submit-btn { background: var(--primary); color: var(--white); margin-left: auto; }
.submit-btn { width: 100%; background: var(--accent); }

.prev-btn:hover { background: var(--border); }
.next-btn:hover { background: var(--primary-light); }
.submit-btn:hover { background: var(--dark); }

/* ---------- QUICK BOOK FLOATING BUTTON ---------- */
.quick-booking {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--accent);
    color: #121612; /* Dark text for contrast */
    padding: 15px 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    z-index: 1000;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: var(--trans);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.quick-booking:hover {
    background: var(--primary);
    transform: translateY(-5px);
}

.quick-booking i {
    font-size: 1.2rem;
}

/* ---------- STATUS MODALS ---------- */
.email-modal, .check-modal, .contact-modal { text-align: center; padding: 40px; }
.email-loading, .email-done, .check-loading, .check-done { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.email-done h4, .check-done h4 { color: var(--primary); text-transform: uppercase; letter-spacing: 1px; }

@keyframes modalFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- CALENDAR ENHANCEMENTS ---------- */
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.calendar-nav button {
    background: var(--primary);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--trans);
}

.calendar-nav button:hover {
    background: var(--accent);
    transform: scale(1.1);
}

.calendar-nav span {
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
}

.min-stay-alert {
    background: #fff5f5;
    color: #e74c3c;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #feb2b2;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 6px rgba(231, 76, 60, 0.1);
}

.min-stay-alert i { font-size: 1.2rem; }

/* ---------- Booking modal: coupon section (migrated from inline styles) ---------- */
#bookingModal .coupon-section { margin-top: 20px; padding: 15px; background: var(--bg-soft); border-radius: 4px; }
#bookingModal .coupon-section .form-group { margin-bottom: 0; }
#bookingModal .coupon-row { display: flex; gap: 10px; }
#bookingModal .coupon-row input { text-transform: uppercase; }
#bookingModal .coupon-row button { white-space: nowrap; padding: 0 15px; }
#bookingModal #couponMessage { font-size: 0.75rem; margin-top: 5px; }
#bookingModal .price-summary { margin-top: 20px; padding: 15px; border-top: 1px solid var(--border); }
#bookingModal .price-preview { font-weight: 700; color: var(--primary); font-size: 1.1rem; text-align: right; background: transparent; padding: 0; margin-top: 0; letter-spacing: normal; text-transform: none; }

/* ---------- SHARED COMPONENT UTILITIES ---------- */
/* Moved verbatim from csp-fix.css, which existed only to host the classes that
   replaced inline styles once the CSP stopped allowing style attributes. These
   are shared by all seven themes, so they belong with the other shared styles
   rather than in a separately loaded file. */
.license-tag { font-size: 0.65rem; color: var(--text-muted); margin-bottom: 10px; font-weight: 600; text-transform: uppercase; }
.min-stay-tag { font-size: 0.65rem; color: #e74c3c; margin-bottom: 10px; font-weight: 800; text-transform: uppercase; }
.apartment-amenities-mini { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; color: var(--accent); font-size: 0.9rem; }
.google-map-iframe { border: 0; }
.check-done-box { display: none; }
.btn-close-modal { margin-top: 20px; }
.quick-booking-luxury { background: var(--accent); border-radius: 0; }

/* ---------- ACCESSIBILITY ---------- */
/* Available to screen readers, absent from the visual layout. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Only one of the seven theme stylesheets defined a focus style, and keyboard
   users navigate modals and forms, so focus was effectively invisible across the
   other six. Declared once, here, where the shared variables live. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The dialog itself receives focus when it has nothing focusable inside; it should
   not draw a ring for that. */
.modal:focus,
.modal:focus-visible {
    outline: none;
}

/* A dialog is modal, so the page behind it must not scroll away underneath. */
body.modal-open {
    overflow: hidden;
}

/* Belt and braces: some browsers still surface inert content in the tab order
   when the attribute is set on an element with a focusable descendant. */
[inert] {
    pointer-events: none;
    user-select: none;
}

/* ---------- REDUCED MOTION ---------- */
/* The hero zooms over ten seconds on hover, sections fade in on scroll and the
   price preview animates, none of it behind a media query. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .showcase-hero:hover img,
    .hero-image:hover img,
    .hero:hover img {
        transform: none !important;
    }

    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- DARK MODE ---------- */
/* The palette is already expressed as custom properties under :root, so a dark
   scheme is a matter of overriding them. The brand colours keep their identity;
   only the surfaces, the text and the two shadows change. */
@media (prefers-color-scheme: dark) {
    /* `!important` is deliberate. This file is inlined at the top of <head> and
       each theme's stylesheet is linked after it, so a theme that redefines a
       surface token in its own :root would win the cascade: miramar redefines
       --white and rustic redefines --text and --border. Overriding a custom
       property with !important is the only way to express "this wins regardless
       of load order" without duplicating the block into all seven themes. */
    :root {
        --text: #F2F2F2 !important;
        --text-muted: #B4B4B4 !important;
        --bg-soft: #14181C !important;
        --white: #1E2429 !important;
        --border: rgba(255, 255, 255, 0.14) !important;
        --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
        --shadow-focus: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
        --dark: #F2F2F2 !important;
    }

    body {
        background-color: var(--bg-soft) !important;
        color: var(--text) !important;
    }

    h1, h2, h3, h4 {
        color: var(--dark) !important;
    }

    /* Surfaces that were hardcoded to white would glare against the dark
       background, so they follow the token instead. */
    .navbar,
    .modal-content,
    .choice-content,
    #bookingModal .coupon-section,
    #bookingModal .price-summary {
        background-color: var(--white) !important;
        color: var(--text) !important;
    }
}

/* ---------------------------------------------------------------------------
   Formulario de huespedes (client-dashboard.js).

   Los tres desplegables de la fecha de nacimiento usaban flex: 1, flex: 1.5 y
   flex: 1.2 escritos en el atributo style, que la CSP descarta, de modo que se
   quedaban con el ancho por defecto de un select en vez de repartirse la fila.
   --------------------------------------------------------------------------- */

.btn-mini { padding: 5px 10px; }
.bd-row { display: flex; gap: 5px; }
.bd-f1 { flex: 1; }
.bd-f12 { flex: 1.2; }
.bd-f15 { flex: 1.5; }

/* Mensaje de exito tras cambiar la contrasena (auth-pages.js). */
.auth-msg-strong { color: var(--primary); font-weight: 700; }

/* ===== Banner de consentimiento de cookies (compacto) ===== */
.cookie-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #1b3022;
    color: #f4f1ea;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    line-height: 1.35;
    max-width: 960px;
    margin: 0 auto;
}

.cookie-banner__text {
    margin: 0;
    flex: 1 1 260px;
    min-width: 0;
}

.cookie-banner__text a {
    color: #d9c7a0;
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.cookie-banner__btn {
    border: 0;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cookie-banner__btn--accept {
    background: #d9c7a0;
    color: #1b3022;
}

.cookie-banner__btn--reject {
    background: transparent;
    color: #f4f1ea;
    border: 1px solid rgba(244, 241, 234, 0.4);
}

.cookie-map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
    cursor: pointer;
}

@media (max-width: 480px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cookie-banner__actions {
        justify-content: center;
    }
}