/* ============================================================
   GuestOS UI 2026 — strato grafico condiviso
   ------------------------------------------------------------
   Si carica per ULTIMO nell'<head> di ogni pagina, così vince
   sugli stili scritti dentro le pagine senza doverle riscrivere
   una per una. Le pagine erano nate in tre famiglie diverse
   (gradiente rosa-ciano, giochi scuri, admin viola): qui le si
   porta tutte sullo stesso fondo notte con i colori del brand.

   Il tema e i colori di ogni struttura li applica config.js
   (hotels.theme, primary_color, secondary_color): imposta
   data-theme su <html> e ridefinisce --g-accent / --g-accent-2.
   Tutto qui sotto dipende da quelle variabili, non da colori fissi.
   ============================================================ */

:root {
    --g-bg: #0b0820;
    --g-bg-2: #120e2e;
    --g-surface: rgba(255, 255, 255, 0.06);
    --g-surface-2: rgba(255, 255, 255, 0.1);
    --g-line: rgba(255, 255, 255, 0.12);
    --g-line-strong: rgba(255, 255, 255, 0.22);
    --g-text: #f6f4ff;
    --g-muted: rgba(246, 244, 255, 0.66);
    --g-accent: #ff2d95;
    --g-accent-2: #8b5cf6;
    --g-accent-3: #22d3ee;
    --g-sec: #00d4ff;
    --g-ok: #34d399;
    --g-warn: #fbbf24;
    --g-grad: linear-gradient(135deg, var(--g-accent) 0%, var(--g-accent-2) 55%, var(--g-accent-3) 100%);
    --g-radius: 20px;
    --g-radius-sm: 14px;
    --g-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --g-display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
    --g-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Variabili storiche delle pagine, rimappate sul nuovo sistema */
    --primary-gradient: var(--g-grad);
    --primary-color: var(--g-accent);
    --secondary-color: var(--g-accent-3);
    --accent-color: var(--g-accent);
    --glass-bg: var(--g-surface);
    --glass-border: var(--g-line);
    --text-shadow: none;
    --bubble-gradient: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), color-mix(in srgb, var(--g-accent-2) 12%, transparent));
    --bg-primary: var(--g-bg);
    --bg-secondary: var(--g-bg-2);
    --accent-primary: var(--g-accent);
    --accent-secondary: var(--g-accent-2);
}

/* ---------- Fondo e tipografia ---------- */

html {
    background: var(--g-bg);
}

body {
    font-family: var(--g-font) !important;
    color: var(--g-text);
    background:
        radial-gradient(70% 45% at 0% 0%, color-mix(in srgb, var(--g-accent) 22%, transparent), transparent 70%),
        radial-gradient(60% 45% at 100% 8%, color-mix(in srgb, var(--g-accent-2) 26%, transparent), transparent 70%),
        radial-gradient(70% 50% at 50% 105%, color-mix(in srgb, var(--g-accent-3) 14%, transparent), transparent 70%),
        var(--g-bg) !important;
    background-attachment: fixed !important;
    letter-spacing: -0.005em;
    font-feature-settings: 'ss01', 'cv11';
    text-rendering: optimizeLegibility;
}

/* Le ombre sotto il testo erano il segno più "vecchio" dell'interfaccia */
body * {
    text-shadow: none !important;
}

h1, h2, h3,
.header h1, .header-title, .page-title, .section-title, .hero-title,
.card-title, .modal-title, .welcome-text, .title, .game-title {
    font-family: var(--g-display) !important;
    letter-spacing: -0.02em;
}

input, select, textarea, button {
    font-family: var(--g-font) !important;
}

::selection {
    background: color-mix(in srgb, var(--g-accent) 35%, transparent);
}

/* Le bolle animate sullo sfondo restano, ma discrete */
.bubbles-bg .bubble {
    opacity: 0.18 !important;
    box-shadow: none !important;
    filter: blur(1px);
}

/* ---------- Barra in alto e pulsante indietro ---------- */

.header {
    background: rgba(11, 8, 32, 0.72) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--g-line) !important;
    box-shadow: none !important;
}

.back-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: var(--g-surface) !important;
    border: 1px solid var(--g-line) !important;
    color: var(--g-text) !important;
    box-shadow: none !important;
    transition: background 0.2s var(--g-ease), transform 0.2s var(--g-ease) !important;
}

.back-btn:active {
    transform: scale(0.94);
}

/* ---------- Superfici: card in vetro più sobrie ---------- */

.card-3d, .glass-card, .section-card, .info-card, .hours-card,
.menu-item, .tour-card, .treatment-card, .offer-card, .event-card,
.activity-card, .reward-card, .game-card, .stat-card, .booking-card,
.form-container, .modal-content, .card {
    border-radius: var(--g-radius) !important;
    border: 1px solid var(--g-line) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.6) !important;
}

/* I pop-up restano chiari, come fogli sopra l'app: i loro testi sono scuri */
.modal-content {
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ---------- Campi dei moduli ---------- */

.form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], input[type="password"], select, textarea {
    border-radius: var(--g-radius-sm);
}

/* ---------- Pulsanti principali ---------- */

.book-btn, .btn-primary, .submit-btn, .cta-button, .cta-btn, .primary-btn {
    background: var(--g-grad) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--g-accent) 70%, transparent) !important;
}

/* ---------- Focus visibile per chi naviga da tastiera ---------- */

:focus-visible {
    outline: 2px solid var(--g-accent-3);
    outline-offset: 2px;
}

/* ---------- Icone Lucide: tratto più sottile ---------- */

svg.lucide {
    stroke-width: 1.75;
}

/* Icone al posto delle emoji: seguono la dimensione del testo che le contiene */
.g-ico {
    width: 1em;
    height: 1em;
    vertical-align: -0.14em;
    stroke-width: 2;
    flex-shrink: 0;
}

/* ---------- Copertine delle sezioni ----------
   Prima erano SVG segnaposto con scritto "Spa & Relax" in Arial.
   Finché la struttura non carica le sue foto, meglio una copertina
   astratta nei colori del brand che un segnaposto che sembra rotto. */

.hero-image {
    background:
        radial-gradient(80% 90% at 12% 18%, color-mix(in srgb, var(--g-accent) 60%, transparent), transparent 60%),
        radial-gradient(70% 80% at 92% 25%, color-mix(in srgb, var(--g-accent-2) 65%, transparent), transparent 60%),
        radial-gradient(90% 90% at 60% 115%, color-mix(in srgb, var(--g-accent-3) 50%, transparent), transparent 60%),
        #1a1440 !important;
}

/* ---------- Card promozionali ----------
   Erano bianche su fondo rosa: sul fondo notte diventano card scure con
   il bagliore del brand, e i testi grigi scuri passano a chiari. */

.special-offer {
    background:
        radial-gradient(100% 80% at 0% 0%, color-mix(in srgb, var(--g-accent) 28%, transparent), transparent 60%),
        radial-gradient(100% 80% at 100% 100%, color-mix(in srgb, var(--g-accent-3) 18%, transparent), transparent 60%),
        #18133d !important;
    border: 1px solid var(--g-line-strong) !important;
    box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--g-accent) 70%, transparent) !important;
    color: var(--g-text);
}

.special-offer .offer-title {
    color: var(--g-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.special-offer .offer-description,
.special-offer p {
    color: var(--g-muted) !important;
}

.special-offer .offer-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: inline-grid !important;
    place-items: center;
    font-size: 30px !important;
    background: var(--g-grad);
    color: #fff;
    filter: none !important;
}

.special-offer .offer-icon .g-ico {
    margin: 0;
}

/* ---------- Foto della struttura ----------
   Le carica la direzione dalla console (hotel_photos). Con una foto la
   copertina astratta lascia il posto alla foto, con un velo per i testi. */

.has-photo {
    position: relative;
}

.has-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.g-photo-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 0 18px;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.g-photo-strip::-webkit-scrollbar {
    display: none;
}

.g-photo-strip[hidden] {
    display: none;
}

.g-photo-strip img {
    flex: 0 0 82%;
    max-width: 420px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--g-radius);
    border: 1px solid var(--g-line);
    scroll-snap-align: start;
}

.g-hotel-logo {
    height: 36px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    margin-bottom: 6px;
    display: block;
}

.g-hotel-logo[hidden] {
    display: none;
}

/* ---------- Componenti nuovi (home, hero) ---------- */

.g-hero-art {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(80% 90% at 15% 20%, color-mix(in srgb, var(--g-accent) 55%, transparent), transparent 60%),
        radial-gradient(70% 80% at 90% 30%, color-mix(in srgb, var(--g-accent-2) 60%, transparent), transparent 60%),
        radial-gradient(90% 90% at 60% 110%, color-mix(in srgb, var(--g-accent-3) 45%, transparent), transparent 60%),
        #1a1440 !important;
}

.g-hero-art .g-hero-icon {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
}

.g-hero-art .g-hero-icon svg {
    width: 30px;
    height: 30px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Tema LUXURY
   ------------------------------------------------------------
   Sobrio: fondo quasi nero con una sola luce calda, tratto
   sottile, angoli più stretti, titoli con grazie. Il tema
   Giocoso (il predefinito) resta quello sopra.
   ============================================================ */

html[data-theme="luxury"] {
    --g-bg: #0d0d10;
    --g-bg-2: #15151a;
    --g-surface: rgba(255, 255, 255, 0.04);
    --g-surface-2: rgba(255, 255, 255, 0.07);
    --g-line: rgba(255, 255, 255, 0.1);
    --g-line-strong: rgba(255, 255, 255, 0.2);
    --g-text: #f4efe6;
    --g-muted: rgba(244, 239, 230, 0.62);
    --g-accent: #c9a24a;
    --g-accent-2: #8a6a2b;
    --g-accent-3: #e7d8b1;
    --g-sec: #8a6a2b;
    --g-radius: 10px;
    --g-radius-sm: 8px;
    --g-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
}

html[data-theme="luxury"] body {
    background:
        radial-gradient(80% 50% at 50% -10%, color-mix(in srgb, var(--g-accent) 16%, transparent), transparent 70%),
        var(--g-bg) !important;
    letter-spacing: 0.005em;
}

html[data-theme="luxury"] h1, html[data-theme="luxury"] h2, html[data-theme="luxury"] h3,
html[data-theme="luxury"] .header h1, html[data-theme="luxury"] .header-title,
html[data-theme="luxury"] .page-title, html[data-theme="luxury"] .section-title,
html[data-theme="luxury"] .hero-title, html[data-theme="luxury"] .card-title,
html[data-theme="luxury"] .welcome-text, html[data-theme="luxury"] .title {
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

html[data-theme="luxury"] .header {
    background: rgba(13, 13, 16, 0.8) !important;
}

html[data-theme="luxury"] .back-btn {
    border-radius: 8px !important;
}

html[data-theme="luxury"] .book-btn, html[data-theme="luxury"] .btn-primary,
html[data-theme="luxury"] .submit-btn, html[data-theme="luxury"] .cta-button,
html[data-theme="luxury"] .cta-btn,
html[data-theme="luxury"] .primary-btn {
    color: #14110a !important;
    text-transform: uppercase;
    letter-spacing: 0.08em !important;
    font-size: 0.85em;
    box-shadow: none !important;
}

html[data-theme="luxury"] .card-3d, html[data-theme="luxury"] .glass-card,
html[data-theme="luxury"] .section-card, html[data-theme="luxury"] .info-card,
html[data-theme="luxury"] .menu-item, html[data-theme="luxury"] .tour-card,
html[data-theme="luxury"] .treatment-card, html[data-theme="luxury"] .offer-card,
html[data-theme="luxury"] .activity-card, html[data-theme="luxury"] .reward-card,
html[data-theme="luxury"] .booking-card, html[data-theme="luxury"] .card {
    box-shadow: none !important;
    border-color: var(--g-line) !important;
}

html[data-theme="luxury"] .bubbles-bg {
    display: none !important;
}

html[data-theme="luxury"] .special-offer,
html[data-theme="luxury"] .g-hero-art,
html[data-theme="luxury"] .hero-image {
    background:
        radial-gradient(90% 90% at 20% 0%, color-mix(in srgb, var(--g-accent) 35%, transparent), transparent 65%),
        #17161b !important;
}

/* Testi per struttura assenti: l'elemento sparisce anche se la pagina gli dà un display */
[data-content-text][hidden] {
    display: none !important;
}

/* Selettore di lingua (i18n.js lo riempie) */
.g-lang {
    appearance: none;
    -webkit-appearance: none;
    background: var(--g-surface);
    color: var(--g-text);
    border: 1px solid var(--g-line);
    border-radius: 999px;
    padding: 8px 12px;
    font: 500 13px var(--g-font);
    max-width: 120px;
}

/* Orari con punti doppi (slot ancora vuoti) */
.tb-chip.g-double::after { content: ' ×2'; font-size: 11px; color: var(--g-accent); font-weight: 800; }