:root {
    --header-bg: #0a0a0a;
    --gold-primary: #D4AF37;
    --gold-shiny: #FFD700;
    --text-main: #e5e5e5;
    --default-black: #000;
    --form-bg-color: #1a1a1a; /* default color ofr forms */
    --electric-blue: #003399; /*avatar circle border*/
    --brand-guestin: #ffffff; /*'Guestin' part of logo*/
    --card-bg: #111; /* Background color of all cards */
    --bg-color: #0a0a0a; /* Background color */
    --border-color: #333; /* Card border color*/
    --text-muted: #888; /* Disabled text*/
    --input-bg: #1a1a1a;
    --font-main: "Roboto Condensed",serif;
    /* Colore delle sezioni: Nero con 85% di opacità per vedere il bg sotto */
    --section-bg: rgba(10, 10, 10, 0.85);
    /* Colore Hero: Più trasparente per far vedere meglio la porta all'inizio */
    --hero-bg-color: rgba(10, 10, 10, 0.50);
}

.container { 
    max-width: 1000px; 
    margin: auto; 
    margin-top: 2rem; 
}

/* Public link of the location (https://www.easyguestin.com/locandasulmare/...) */
.location-url { 
    font-family: var(--font-main); 
    color: var(--gold-primary); 
    font-size: 1rem; 
    margin-bottom: 1.5rem; 
    display: block; 
}

h1 { color: var(--gold-shiny); margin-bottom: 2rem; font-size: 2.2rem; }

h2 { color: var(--text-muted); font-weight: 300; margin-top: 0; font-size: 1.3rem; }

p.subtitle { color: var(--text-muted); margin: 0.5rem 0 0 0; }

/* Base Anchor Style */
a {
    color: var(--gold-primary);       /* Standard Dark Gold */
    text-decoration: none; 
    transition: all 0.2s ease;
}

/* Prevent the standard "Visited Purple" color change */
a:visited {
    color: var(--gold-primary);       
}

/* Optional: Slight brightness on hover */
a:hover {
    color: var(--gold-shiny);       
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
}

/* The "Shiny" Click Effect */
a:active {
    color: var(--gold-shiny);     /* Brightest Gold */
    text-shadow: 0 0 8px var(--gold-shiny), 0 0 15px rgba(255, 215, 0, 0.6); /* Glowing Halo */
    transform: scale(0.98); /* Subtle "press" feeling */
}

/* FLASH MESSAGE CONTAINER */
.flash-container {
    position: fixed;
    top: 20px;
    /* 1. Move the left edge to the exact center of the screen */
    left: 50%;
    /* 2. Shift the element back by 50% of its own width */
    transform: translateX(-50%);
    /* 3. IMPORTANT: Remove 'right: 20px' or it will conflict */
    right: auto;
    z-index: 9999; /* Above everything, even modals */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 500px;
    max-width: 90vw;
}

/* BASE NOTIFICATION CARD */
.flash-toast {
    background-color: #121212; /* Deep dark bg */
    color: #e5e5e5;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border-left: 4px solid #444; /* Fallback */
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0; /* Start hidden for animation */
    transform: translateX(20px);
    animation: slideInFade 0.4s forwards;
    position: relative;
    font-size: 1.1rem;
}

/* SUCCESS / INFO (GOLD) */
.flash-gold {
    border-left-color: var(--gold-primary);
    /* Subtle gold tint on background optional */
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.45) 0%, rgba(18,18,18,1) 5%);
}

/* ERROR / DANGER (RED) */
.flash-red {
    border-left-color: #dc3545;
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.75) 0%, rgba(18,18,18,1) 30%);
}

/* CLOSE BUTTON */
.flash-close {
    background: none;
    border: none;
    color: #666;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 10px;
    padding: 0 5px;
}
.flash-close:hover { color: white; }

/* ANIMATIONS */
@keyframes slideInFade {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutSlide {
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

/* Strategy 1: Modern Browsers (The "Magic" Way) 
   Scans any .form-group. If it finds a required input inside, 
   it adds the asterisk to the label automatically. */
.form-group:has(input:required) label::after,
.form-group:has(select:required) label::after,
.form-group:has(textarea:required) label::after {
    content: " *";
    color: #dc3545; /* Red */
    font-weight: bold;
    margin-left: 4px;
}

/* Strategy 2: Fallback / Manual Override
   If you have a complex layout where the auto-detection fails,
   you can add class="required-label" to the label manually. */
.required-label::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
    margin-left: 4px;
}

/* Spinner*/
#loadingOverlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Dark dimming */
    z-index: 10000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(4px); /* Optional: Blur effect behind */
}

/* THE SPINNER */
.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid #333; /* Dark grey track */
    border-top: 5px solid #d4af37; /* Gold moving part */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

/* TEXT BELOW SPINNER */
.loading-text {
    color: #d4af37;
    font-family: sans-serif;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 

/* Character Counter Base Style */
.char-counter {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted, #888); /* Subtle grey */
    margin-top: -10px;
    margin-bottom: 10px;
    font-weight: 100;
    transition: color 0.3s ease;
}

/* Warning color when the user hits the maximum limit */
.char-counter.limit-reached {
    color: #ff4444; /* Error red, or you could use var(--gold-primary) */
    animation: pulse-limit 0.3s ease-in-out;
}

@keyframes pulse-limit {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}