/* ============================================================
   Golden Suite Apartments — Matera
   style.css — Stili condivisi tra tutte le pagine
   ============================================================ */

:root {
    --oro: #D4AF37;
    --oro-scuro: #B8941F;
    --lavanda: #967BB6;
    --lavanda-scuro: #7A5FA0;
    --lavanda-chiaro: #f0ecf7;
    --lavanda-medio: #d9cff0;
    --avorio: #FAF8F3;
    --avorio-scuro: #F2EDE3;
    --bianco: #FFFFFF;
    --nero: #1C1A17;
    --grigio: #6B6660;
}

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

body, html {
    height: 100%;
    font-family: 'Jost', sans-serif;
    background-color: var(--avorio);
    color: var(--nero);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; }

/* ===== HEADER ===== */
header {
    position: fixed; top: 0; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 5%;
    background: rgba(250, 248, 243, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(150, 123, 182, 0.18);
    transition: padding 0.3s, box-shadow 0.3s;
}

.header-left { display: flex; align-items: center; gap: 18px; }

.logo {
    font-family: 'Cormorant Garamond', serif;
    color: var(--nero); font-size: 1.05rem; font-weight: 400;
    letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
    white-space: nowrap; line-height: 1; text-decoration: none;
}
.logo .logo-gold { color: var(--oro); }
.logo .logo-violet { color: var(--lavanda); }

.logo-divider { width: 1px; height: 24px; background: rgba(150,123,182,0.35); }

/* ===== LANG SELECTOR ===== */
.lang-wrapper { position: relative; display: inline-block; }
.lang-current {
    font-size: 1.3rem; cursor: pointer; display: flex; align-items: center;
    gap: 4px; padding: 4px 8px; border-radius: 4px; transition: background 0.2s;
}
.lang-current::after { content: '▾'; font-size: 0.6rem; color: var(--lavanda); transition: transform 0.3s; font-family: sans-serif; }
.lang-wrapper.open .lang-current::after { transform: rotate(180deg); }
.lang-dropdown {
    position: absolute; top: 110%; left: 0; background: white;
    border: 1px solid var(--lavanda-chiaro); border-radius: 8px;
    box-shadow: 0 15px 40px rgba(150,123,182,0.15); display: none;
    flex-direction: column; min-width: 50px; z-index: 1100; overflow: hidden;
}
.lang-wrapper.open .lang-dropdown { display: flex; }
.lang-option {
    padding: 10px 15px; font-size: 1.3rem; cursor: pointer;
    transition: background 0.2s; filter: grayscale(100%); opacity: 0.5; text-align: center;
}
.lang-option:hover { background: var(--lavanda-chiaro); filter: grayscale(0%); opacity: 1; }
.lang-option.active { filter: grayscale(0%); opacity: 1; background: var(--lavanda-chiaro); }

/* ===== NAV ===== */
nav ul { display: flex; list-style: none; gap: 28px; align-items: center; }
nav a {
    text-decoration: none; color: var(--grigio); font-size: 0.65rem;
    text-transform: uppercase; letter-spacing: 2px; transition: color 0.3s;
    position: relative; padding-bottom: 4px; font-weight: 400;
}
nav a:hover { color: var(--lavanda); }
nav a.active-link { color: var(--lavanda); font-weight: 500; }
nav a.active-link::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 1px; background: var(--lavanda);
}

.btn-prenota {
    background: var(--oro); color: white !important;
    padding: 10px 20px; border-radius: 2px; font-weight: 500;
    font-size: 0.62rem !important; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none; cursor: pointer; border: none;
    transition: background 0.3s, transform 0.2s; display: inline-block;
}
.btn-prenota:hover { background: var(--oro-scuro); transform: translateY(-1px); }
.btn-prenota.active-link {
    background: var(--lavanda) !important; color: white !important;
}
.btn-prenota.active-link::after { display: none; }

/* ===== MAIN LAYOUT ===== */
main {
    padding-top: 80px;
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center;
    padding-bottom: 60px;
}

/* ===== SECTION HEADER (shared) ===== */
.section-header {
    text-align: center; margin-bottom: 48px;
    animation: fadeUp 0.7s ease both;
    width: 100%;
}
.section-header .eyebrow {
    font-size: 0.58rem; letter-spacing: 4px; text-transform: uppercase;
    color: var(--lavanda); margin-bottom: 12px; display: block;
    font-family: 'Jost', sans-serif;
}
.section-header h2 {
    font-size: 3rem; font-weight: 300; font-style: italic; color: var(--nero);
}
.section-header .title-accent { color: var(--oro); }

/* ===== SLIDER SHARED ===== */
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
    color: white; border: 1px solid rgba(255,255,255,0.3);
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 20; transition: all 0.3s; font-size: 1.1rem;
    border-radius: 50%;
}
.slider-arrow:hover { background: rgba(150,123,182,0.85); border-color: transparent; }
.arrow-left { left: 16px; } .arrow-right { right: 16px; }

.slider-dots {
    position: absolute; bottom: 16px; right: 16px;
    display: flex; gap: 6px; z-index: 20;
}
.dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.5); transition: all 0.3s; cursor: pointer;
}
.dot.active { background: var(--lavanda); transform: scale(1.3); }

/* ===== LIGHTBOX ===== */
#lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(28,26,23,0.97); z-index: 9999; display: none;
    justify-content: center; align-items: center; touch-action: none;
}
#lightbox img { max-width: 90%; max-height: 80vh; object-fit: contain; border-radius: 2px; }
.lb-close {
    position: absolute; top: 24px; right: 28px; color: white;
    font-size: 2.5rem; cursor: pointer; z-index: 10000; padding: 8px;
    opacity: 0.7; transition: opacity 0.2s;
}
.lb-close:hover { opacity: 1; }
.lb-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: none; color: white; border: none; font-size: 3rem;
    cursor: pointer; padding: 30px; z-index: 10000; transition: 0.3s; opacity: 0.6;
}
.lb-arrow:hover { opacity: 1; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }

/* ===== FOOTER BAR ===== */
.footer-bar {
    position: fixed; bottom: 0; width: 100%;
    background: var(--nero); color: rgba(255,255,255,0.7);
    padding: 14px 5%; display: flex;
    justify-content: center; align-items: center; gap: 48px;
    font-size: 0.58rem; z-index: 500; letter-spacing: 2px; text-transform: uppercase;
    border-top: 2px solid var(--lavanda);
}
.footer-bar span { display: flex; align-items: center; gap: 6px; }
.btn-booking {
    display: inline-flex; align-items: center; gap: 8px;
    background: #003580; color: white; text-decoration: none;
    padding: 7px 16px; border-radius: 3px; font-size: 0.58rem; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
    transition: background 0.2s; border: 1px solid rgba(255,255,255,0.15);
}
.btn-booking:hover { background: #00254d; }

/* ===== FORM FEEDBACK BANNER ===== */
.form-banner {
    display: none; padding: 14px 18px; border-radius: 6px;
    font-size: 0.82rem; font-weight: 500; margin-bottom: 18px; text-align: center;
}
.form-banner.success { background: #edf7ed; color: #2e6b30; border: 1px solid #a8d5aa; display: block; }
.form-banner.error   { background: #fdecea; color: #c62828; border: 1px solid #ef9a9a; display: block; }

/* ===== MOBILE FIXED BANNER ===== */
#mobile-form-banner {
    display: none;
    position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 480px;
    padding: 14px 18px; border-radius: 8px; font-size: 0.82rem; font-weight: 500;
    text-align: center; z-index: 2000; pointer-events: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    animation: slideUpBanner 0.35s ease;
}
#mobile-form-banner.success { background: #edf7ed; color: #2e6b30; border: 1px solid #a8d5aa; }
#mobile-form-banner.error   { background: #fdecea; color: #c62828; border: 1px solid #ef9a9a; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUpBanner {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 900px) {
    header { padding: 14px 4%; }
}

@media (max-width: 768px) {
    header { flex-wrap: wrap; padding: 12px 4%; gap: 10px; }
    .header-left { width: 100%; justify-content: space-between; }
    nav { width: 100%; }
    nav ul { gap: 8px; justify-content: space-between; }
    nav a { font-size: 0.55rem; letter-spacing: 1px; }
    .btn-prenota { padding: 8px 12px; font-size: 0.55rem !important; }
    main { padding-top: 140px; }
    .footer-bar { flex-direction: column; gap: 4px; padding: 8px 10px; font-size: 0.5rem; }
    .footer-bar .btn-booking { display: none; }
    .lb-arrow { display: none; }
    .section-header h2 { font-size: 2.2rem; }
}