/* =====================================================================
 * SPLASH SCREEN — TheFork-style intro animation
 * ===================================================================== */
#splash-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2c3e50 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transition: opacity 0.4s ease !important;
}
#splash-screen.splash-fade-out { opacity: 0 !important; pointer-events: none; }
.splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.splash-logo-svg {
    width: 124px;
    height: 116px;
    display: block;
    filter: drop-shadow(0 12px 32px rgba(212, 165, 116, 0.35));
}
.splash-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.splash-draw--heart {
    animation: splash-draw 0.95s cubic-bezier(0.65, 0.05, 0.35, 1) 0.05s forwards;
}
.splash-draw--base {
    animation: splash-draw 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0.95s forwards;
}
@keyframes splash-draw {
    to { stroke-dashoffset: 0; }
}

/* Crossfade: strokes (outline being drawn) fade out while fill (the
   exact final logo, matching the PNG) fades in. */
.splash-logo-strokes {
    animation: splash-strokes-out 0.35s ease-out 1.25s forwards;
}
.splash-logo-fill {
    opacity: 0;
    animation: splash-fill-in 0.35s ease-out 1.25s forwards;
}
@keyframes splash-strokes-out {
    to { opacity: 0; }
}
@keyframes splash-fill-in {
    to { opacity: 1; }
}

.splash-brand {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;
    font-size: 1.75rem;
    letter-spacing: 1.5px;
    color: #fff;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    animation: splash-brand-in 0.35s ease-out 1.60s forwards;
    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.splash-brand span { color: #D4A574; }
@keyframes splash-brand-in {
    to { opacity: 1; transform: translateY(0); }
}

/* prefers-reduced-motion: skip the draw, show final logo + brand immediately */
@media (prefers-reduced-motion: reduce) {
    .splash-draw { stroke-dashoffset: 0 !important; animation: none !important; }
    .splash-logo-strokes { opacity: 0 !important; animation: none !important; }
    .splash-logo-fill { opacity: 1 !important; animation: none !important; }
    .splash-brand { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* content-visibility: auto REMOVED — causes iOS scroll jumps and missed taps */

/* =====================================================================
 * Vivi In Due — Phase 5 UI Redesign
 * Loaded AFTER style.css to override visuals while keeping legacy logic.
 * Design language: cleaner, photo-forward, generous whitespace,
 *                  soft shadows, refined typography (TheFork-inspired).
 * ===================================================================== */

:root {
    /* DEPRECATED: queste --rd-* sono lo storico Phase 5. La nuova source
     * of truth è styles/tokens.css con namespace --vid-*. Valori qui sotto
     * volutamente identici per garantire zero pixel-difference durante la
     * migrazione graduale (PR successivi). */

    /* New palette: warmer/refined */
    --rd-ink: #0f172a;
    --rd-ink-soft: #1e293b;
    --rd-muted: #64748b;
    --rd-muted-2: #94a3b8;
    --rd-bg: #faf8f5;
    --rd-surface: #ffffff;
    --rd-surface-2: #f1f5f9;
    --rd-border: rgba(15, 23, 42, 0.08);
    --rd-border-strong: rgba(15, 23, 42, 0.14);
    --rd-gold: #c79a3a;
    --rd-gold-soft: #e8d8a3;
    --rd-coral: #ee6c4d;
    --rd-success: #16a34a;
    --rd-success-soft: #dcfce7;
    --rd-rating: #f59e0b;

    --rd-radius-sm: 10px;
    --rd-radius-md: 16px;
    --rd-radius-lg: 22px;

    --rd-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --rd-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
    --rd-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
    --rd-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

    --rd-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* ============ ANIMATION DESIGN TOKENS (Fase D.4) ============
       Standardizza durations + easings sparsi nel codebase. Coerenza
       fra splash, transitions, modal, hover, micro-interactions. */
    --rd-dur-instant: .12s;    /* tap/press feedback */
    --rd-dur-quick: .18s;      /* hover, tooltip, chip toggle */
    --rd-dur-base: .22s;       /* nav item, color change */
    --rd-dur-standard: .28s;   /* nav indicator, view transition */
    --rd-dur-slow: .45s;       /* modal open, content reveal */
    --rd-ease-out: var(--rd-ease);                                 /* alias del default */
    --rd-ease-in-out: cubic-bezier(0.65, 0.05, 0.35, 1);            /* splash drawing */
    --rd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);            /* pop, bounce micro-interactions */
    --rd-ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);               /* nav indicator drag */
}

body {
    background: var(--rd-bg) !important;
    color: var(--rd-ink) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#main-container { background: transparent; }

/* ============ TOP HEADER (glassmorphism) ============ */
#app-header {
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}
/* Fallback Brave/no-backdrop-filter: opacità maggiore */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #app-header { background: rgba(255, 255, 255, 0.96) !important; }
}

/* Header always visible on home (logo brand + Preferiti pill).
   --header-h è calcolato dinamicamente dal JS; questa override permette
   al .view di partire SOTTO l'header senza overlap. */

/* ============ HOME ============ */
#view-home { padding: 0 16px calc(120px + env(safe-area-inset-bottom, 0px)) 16px; }

.hero-section.hero-luxury {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2c3e50 100%) !important;
    border-radius: var(--rd-radius-lg) !important;
    padding: 24px 24px !important;
    margin: 4px 0 20px 0 !important;
    box-shadow: var(--rd-shadow-md);
    overflow: hidden;
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-logo,
.header-logo-small,
.auth-logo {
    display: block;
    object-fit: contain;
    background-color: transparent;
    /* Suppress the alt-text frame iOS Safari briefly paints before the
       image decodes — empty alt + zero font/line still produced a visible
       placeholder rectangle around the logo on hard refresh. */
    color: transparent;
    font-size: 0;
    line-height: 0;
}
.hero-section.hero-luxury::after {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(199, 154, 58, 0.25) 0%, transparent 70%);
    pointer-events: none;
}
.hero-logo { width: 64px !important; height: 64px !important; margin: 0 0 10px 0 !important; filter: drop-shadow(0 4px 12px rgba(199, 154, 58, 0.35)); }
.hero-brand-name { font-size: 1.75rem !important; font-weight: 900 !important; letter-spacing: 1.5px !important; color: #fff !important; margin: 0 0 6px 0 !important; }

/* Top header: match hero brand style (Inter, weight 900, letter-spacing) */
.header-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.05rem !important;
    letter-spacing: 1.2px !important;
    color: #1a3a6e !important;
    text-transform: uppercase;
}
.header-text-highlight {
    color: #D4A574 !important;
    font-weight: 900 !important;
}
.hero-microcopy {
    font-size: 0.92rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--vid-font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.demo-badge { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; }
.demo-badge:empty { display: none !important; }
.demo-label { color: rgba(255, 255, 255, 0.92) !important; font-weight: 600 !important; }
.demo-status { font-weight: 700 !important; }
.demo-status-active { background: rgba(22, 163, 74, 0.2) !important; color: #4ade80 !important; }
.demo-status-inactive { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }

.home-section-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--rd-ink) !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: -0.3px;
}
.home-section-title--secondary {
    margin-top: 24px !important;
    font-size: 1rem !important;
    color: var(--rd-muted) !important;
}

/* Home featured card — full-bleed, reuses .p-card markup with
   .p-card--hero modifier for taller thumb and prominent layout. */
.home-featured-card {
    margin: 0 0 8px 0;
}
.home-featured-card .p-card--hero .p-thumb {
    height: 220px !important;
}
.home-featured-card .p-card--hero .p-title {
    font-size: 1.2rem !important;
}
.home-featured-card:empty {
    height: 320px;
    border-radius: var(--rd-radius-md);
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-border);
}

.experience-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px;
}
.experience-cards--triple {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

/* On mobile the legacy flex-column layout of #view-home stretched
   .experience-cards to fill the viewport. With the new featured +
   3 categories layout that stretching is harmful — let the page
   scroll naturally. */
@media (hover: none) and (pointer: coarse) and (max-width: 480px) {
    #view-home.view .home-featured-card,
    #view-home.view .experience-cards--triple {
        flex: 0 0 auto !important;
    }
    #view-home.view .experience-cards--triple .exp-card {
        min-height: 100px;
    }
}

.exp-card {
    background: var(--rd-surface) !important;
    border-radius: var(--rd-radius-md) !important;
    padding: 22px 18px !important;
    border: 1px solid var(--rd-border) !important;
    box-shadow: var(--rd-shadow-xs) !important;
    transition: opacity .2s var(--rd-ease), box-shadow .25s var(--rd-ease), border-color .25s !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 130px;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}
.exp-card:hover, .exp-card:active {
    opacity: 0.85;
    box-shadow: var(--rd-shadow-md) !important;
    border-color: var(--rd-border-strong) !important;
}
.exp-card__icon {
    font-size: 1.4rem !important;
    color: var(--rd-gold) !important;
    margin-bottom: 12px !important;
    align-self: center;
}
.exp-card__title { font-size: 1rem !important; font-weight: 800 !important; color: var(--rd-ink) !important; margin: 0 0 4px 0 !important; }
.exp-card__desc { font-size: 0.78rem !important; color: var(--rd-muted) !important; margin: 0 !important; line-height: 1.4; }

.exp-card--primary {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border-color: rgba(199, 154, 58, 0.35) !important;
}
.exp-card--primary .exp-card__icon { color: #92400e !important; }
.exp-card--primary .exp-card__title { color: #78350f !important; }
.exp-card--primary .exp-card__desc { color: #92400e !important; }

.exp-card--action {
    background: linear-gradient(135deg, var(--rd-ink) 0%, var(--rd-ink-soft) 100%) !important;
    border-color: transparent !important;
}
.exp-card--action .exp-card__icon { color: var(--rd-gold) !important; }
.exp-card--action .exp-card__title { color: #fff !important; }
.exp-card--action .exp-card__desc { color: rgba(255, 255, 255, 0.75) !important; }

/* Active ticket banner: more prominent */
#home-active-banner-container .active-banner {
    background: linear-gradient(135deg, var(--rd-success) 0%, #15803d 100%) !important;
    border-radius: var(--rd-radius-md) !important;
    padding: 16px 18px !important;
    box-shadow: 0 12px 30px rgba(22, 163, 74, 0.25) !important;
    margin-top: 8px !important;
    position: relative;
    overflow: hidden;
}
#home-active-banner-container .active-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    pointer-events: none;
}
.pulsing-dot { background: #fff !important; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.25); }

/* ============ EXPLORE / SEARCH ============ */
#view-explore { padding: 16px; }

.search-input {
    height: 50px !important;
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 14px !important;
    padding: 0 18px 0 44px !important;
    font-size: 0.95rem !important;
    box-shadow: var(--rd-shadow-xs) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 18px !important;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.search-input:focus { border-color: var(--rd-ink) !important; box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.06) !important; outline: none !important; }

/* ============ FILTRI ESPLORA — D.0 ============
   Layout row 2-up per i toggle "Aperto Ora" + "Prenotabili". */
.explore-filters-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.explore-filters-row .open-today-toggle {
    flex: 1 1 auto;
    min-width: 0;
}

/* ============ VIEW-MODE FAB (Esplora ↔ Mappa) ============
 * Pill scura flottante centrata sopra la bottom-nav. Pattern Airbnb/
 * Booking: tap → switch tra lista Esplora e vista Mappa. Visibile solo
 * quando body[data-view] è "explore" o "map". */
/* Multi-touch passthrough: durante pinch (≥2 dita), gli overlay floating
   diventano trasparenti agli eventi così le dita passano al canvas mappa.
   Vedi `app.js _multiTouchPassthroughInstalled`. */
body.multi-touch-active .view-mode-fab,
body.multi-touch-active #app-header,
body.multi-touch-active #bottom-nav,
body.multi-touch-active #map-card-preview {
    pointer-events: none !important;
}

.view-mode-fab {
    position: fixed;
    right: 14px;
    bottom: calc(85px + env(safe-area-inset-bottom, 0px));
    z-index: 1900;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(15, 23, 42, 0.94);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.12);
    transition: opacity 0.2s var(--rd-ease), transform 0.25s var(--rd-ease);
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(20px);
}
.view-mode-fab.is-visible {
    display: inline-flex;
    opacity: 1;
    transform: translateY(0);
}
.view-mode-fab:active {
    opacity: 0.85;
}
.view-mode-fab i {
    font-size: 0.95rem;
}

.open-today-toggle {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    margin-top: 8px !important;
    box-shadow: var(--rd-shadow-xs);
    transition: border-color .15s;
    font-size: 0.78rem;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
}
.open-today-toggle-text { font-size: 0.78rem !important; }
.open-today-toggle.active { border-color: var(--rd-success) !important; background: var(--rd-success-soft) !important; }
.open-today-toggle-text { font-weight: 700 !important; color: var(--rd-ink) !important; }

.chips-container {
    display: flex;
    gap: 6px !important;
    overflow-x: auto;
    padding: 8px 2px 4px 2px !important;
    margin: 4px -2px 0 -2px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
}
.chips-container::-webkit-scrollbar { display: none; }

.chip {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    color: var(--rd-ink) !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    flex: 0 0 auto !important;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    box-shadow: var(--rd-shadow-xs);
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.chip:active { opacity: 0.75; }
.chip.active {
    background: var(--rd-ink) !important;
    color: #fff !important;
    border-color: var(--rd-ink) !important;
}
.chip.chip-open-today.active { background: var(--rd-success) !important; border-color: var(--rd-success) !important; }

/* ============ CHIP TOGGLES (Filtri Compatti) ============ */
.chip.chip--toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chip.chip--open-today.active {
    background: var(--rd-success-soft) !important;
    color: var(--rd-success) !important;
    border-color: rgba(22, 163, 74, 0.35) !important;
}
.chip.chip--reservable.active {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border-color: rgba(199, 154, 58, 0.35) !important;
}
.chip-separator {
    width: 1px;
    background: var(--rd-border);
    align-self: stretch;
    margin: 6px 4px;
    flex-shrink: 0;
}

/* Empty-state per home pair-feed: nessuna esperienza aperta vicino */
.home-empty-state {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    padding: 24px 20px;
    text-align: center;
    box-shadow: var(--rd-shadow-xs);
}
.home-empty-state__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rd-ink);
    margin: 0 0 6px 0;
    line-height: 1.35;
}
.home-empty-state__hint {
    font-size: 0.85rem;
    color: var(--rd-muted);
    margin: 0 0 16px 0;
    line-height: 1.4;
}
.home-empty-state__cta {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.home-empty-state__btn {
    appearance: none;
    border: 1px solid var(--rd-border);
    background: #fff;
    color: var(--rd-ink);
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.home-empty-state__btn--primary {
    background: var(--rd-ink);
    color: #fff;
    border-color: var(--rd-ink);
}
.home-empty-state__btn:active {
    opacity: 0.85;
}

/* Badge "Su prenotazione" inline sui card partner (Esplora/Home/Preferiti) */
.p-reservation-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rd-muted);
    margin: 2px 0;
    line-height: 1.2;
}
.p-reservation-badge i {
    font-size: 0.65rem;
    color: var(--rd-gold-text);
}

/* Always single column — readability over density */
#explore-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}
#fav-grid {
    grid-template-columns: 1fr !important;
}

/* ============ PARTNER CARDS ============ */
.p-card {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--rd-shadow-xs) !important;
    transition: box-shadow .25s var(--rd-ease), border-color .25s var(--rd-ease) !important;
    margin: 0 !important;
    touch-action: pan-y;
}
@media (hover: hover) and (pointer: fine) {
    .p-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--rd-shadow-md) !important;
        border-color: var(--rd-border-strong) !important;
    }
}
.p-card:active {
    opacity: 0.85 !important;
    transform: none !important;
    box-shadow: var(--rd-shadow-md) !important;
    border-color: var(--rd-border-strong) !important;
}

.p-card .p-thumb {
    height: 200px !important;
    border-radius: 0 !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
}
.p-card .p-thumb::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}
.p-card .p-cat-badge {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--rd-ink) !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    box-shadow: var(--rd-shadow-xs);
    /* backdrop-filter removed: with 140 cards on Esplora, 140 blur
       operations per scroll frame = CPU-bound jank on iOS. Background
       is rgba 0.95 (basically opaque) so blur was invisible anyway. */
}
.p-fav-star {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: var(--rd-shadow-sm) !important;
    width: 38px !important; height: 38px !important;
    color: #8B8B8B !important;
    transition: color .2s, transform .2s var(--rd-ease-spring) !important;
    cursor: pointer;
}
.p-fav-star.active { color: #D4A574 !important; }
.p-fav-star.active i { filter: drop-shadow(0 1px 3px rgba(212, 165, 116, 0.4)); }
.p-fav-star:active { opacity: 0.65 !important; }
.p-fav-star.pop { animation: fav-pop 0.45s var(--rd-ease-spring) !important; }
@keyframes fav-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.p-card.removing {
    animation: fav-card-out 0.4s ease forwards;
    pointer-events: none;
}
@keyframes fav-card-out {
    to { opacity: 0; transform: scale(0.9); }
}
.btn-fav.active { color: #D4A574 !important; }
.btn-fav.active i { filter: drop-shadow(0 1px 3px rgba(212, 165, 116, 0.4)); }

.p-rating-badge {
    position: absolute;
    bottom: 12px; left: 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rd-ink);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: var(--rd-shadow-xs);
    /* backdrop-filter removed: same reason as .p-cat-badge — 140 cards
       on Esplora × 2 badges per card = 280 blur operations per frame. */
}
.p-rating-badge i { color: var(--rd-rating); font-size: 0.78rem; }
.p-rating-badge .rating-count { color: var(--rd-muted); font-weight: 500; font-size: 0.72rem; }

/* Fase D.1 — "Nuovo" badge per partner aggiunti negli ultimi 14gg.
   Position bottom-right per non collidere con .p-cat-badge (top-left),
   .p-fav-star (top-right), .p-rating-badge (bottom-left). */
.p-new-badge {
    position: absolute;
    bottom: 12px; right: 12px;
    background: linear-gradient(135deg, var(--rd-gold) 0%, var(--rd-coral) 100%);
    color: #fff;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(199, 154, 58, 0.35);
    z-index: 2;
}
.p-new-badge i {
    font-size: 0.7rem;
    color: #fff;
}

/* "Stasera" badge — alternativa mutually-exclusive a "Nuovo".
   Gradient ink → muted per moon/evening vibe. Same position. */
.p-evening-badge {
    position: absolute;
    bottom: 12px; right: 12px;
    background: linear-gradient(135deg, var(--rd-ink) 0%, var(--rd-ink-soft) 100%);
    color: #fff;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
    z-index: 2;
}
.p-evening-badge i {
    font-size: 0.7rem;
    color: var(--rd-gold-soft);
}

.p-card .p-info { padding: 14px 16px 16px !important; }
.p-card .p-title { font-size: 1.05rem !important; font-weight: 800 !important; color: var(--rd-ink) !important; line-height: 1.3 !important; margin-bottom: 6px !important; }
.p-card .p-city {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--rd-ink-soft);
    opacity: 0.78;
    margin: -2px 0 0;
}
.p-card .p-city i {
    font-size: 0.7rem;
    color: var(--rd-gold);
}
.p-card .p-offer {
    font-size: 0.85rem !important;
    color: var(--rd-ink-soft) !important;
    background: var(--rd-surface-2) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    margin-top: 8px !important;
    display: flex; gap: 8px; align-items: center;
    border-left: 3px solid var(--rd-gold) !important;
}
.p-card .p-offer i { color: var(--rd-gold) !important; }

.closed-today-badge {
    background: rgba(15, 23, 42, 0.92) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}
.p-card.closed-today .p-thumb { filter: grayscale(0.6) brightness(0.85); }

/* ============ DETAIL ============ */
#view-detail { background: var(--rd-bg) !important; }
.gallery-scroller { background: var(--rd-surface-2) !important; }
.detail-content-inner {
    background: var(--rd-surface) !important;
    border-radius: var(--rd-radius-lg) var(--rd-radius-lg) 0 0 !important;
    margin-top: -24px !important;
    position: relative;
    z-index: 2;
    /* padding-top 28px: aria extra sotto la curvatura della gallery (margin-top negativo).
       padding-bottom calc: copre lo sticky-footer (~70px) + safe-area iPhone + buffer.
       Fix "caselle tagliate sopra/sotto" (PR caselle). */
    padding: 28px 20px calc(170px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible;
}
.detail-content-inner > * { min-width: 0; }
.detail-header {
    flex-wrap: wrap;
    gap: 12px;
}
.detail-header h2 { font-size: 1.55rem !important; font-weight: 900 !important; color: var(--rd-ink) !important; line-height: 1.15 !important; margin: 8px 0 0 0 !important; }
.detail-cat-badge {
    background: var(--rd-surface-2) !important;
    color: var(--rd-ink) !important;
    border: 1px solid var(--rd-border) !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
}
.detail-reservation-badge {
    background: rgba(238, 108, 77, 0.12) !important;
    color: #b53a18 !important;
    border: 1px solid rgba(238, 108, 77, 0.3);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
}
.detail-reservation-badge.is-recommended {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #92670b !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.btn-fav {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    width: 44px !important; height: 44px !important;
    box-shadow: var(--rd-shadow-xs) !important;
    color: var(--rd-muted-2) !important;
}
.btn-fav.active { color: var(--rd-rating) !important; border-color: var(--rd-rating) !important; }

.offer-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 1px solid rgba(199, 154, 58, 0.25) !important;
    border-radius: var(--rd-radius-md) !important;
    padding: 18px !important;
    margin: 18px 0 !important;
}
.offer-section .offer-header > div:first-child { color: #92400e !important; }
.offer-detail {
    background: rgba(255, 255, 255, 0.55) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-top: 8px !important;
    color: #78350f !important;
    font-size: 0.88rem;
    display: flex; gap: 10px; align-items: center;
}
.offer-detail i { color: #b45309; }

.info-box {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-radius-md) !important;
    padding: 6px !important;
    margin: 18px 0 !important;
    box-shadow: var(--rd-shadow-xs) !important;
}
.info-item {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    transition: background .12s;
    color: var(--rd-ink) !important;
    font-size: 0.92rem !important;
    display: flex; gap: 12px; align-items: center;
    cursor: pointer;
}
.info-item:hover { background: var(--rd-surface-2) !important; }
.info-item i { color: var(--rd-gold) !important; width: 22px; text-align: center; }
.info-item + .info-item { border-top: 1px solid var(--rd-border) !important; }

.warning-box {
    background: rgba(238, 108, 77, 0.1) !important;
    border: 1px solid rgba(238, 108, 77, 0.3) !important;
    color: #b53a18 !important;
    border-radius: var(--rd-radius-md) !important;
    padding: 14px !important;
    font-size: 0.88rem !important;
    display: flex; gap: 12px; align-items: center;
    margin: 16px 0;
}
.closed-today-banner {
    background: var(--rd-surface-2) !important;
    color: var(--rd-muted) !important;
    border-radius: var(--rd-radius-md) !important;
    padding: 14px !important;
    font-size: 0.9rem !important;
    display: flex; gap: 12px; align-items: center;
    margin: 16px 0;
}
.how-to-use-box {
    background: var(--rd-surface-2) !important;
    border-radius: var(--rd-radius-md) !important;
    padding: 16px !important;
    display: flex; gap: 14px; align-items: flex-start;
    margin: 16px 0 0 0 !important;
}
.how-to-use-box i { color: var(--rd-gold); font-size: 1.2rem; margin-top: 2px; }
.how-to-use-box strong { display: block; margin-bottom: 4px; color: var(--rd-ink); }
.how-to-use-box p { margin: 0; color: var(--rd-muted); font-size: 0.85rem; }

/* ============ REVIEWS SECTION (NEW) ============ */
.reviews-section {
    margin: 24px 0 !important;
}
.reviews-section .reviews-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.reviews-section h3 {
    font-size: 1.05rem; font-weight: 800;
    color: var(--rd-ink); margin: 0;
}
.reviews-summary {
    background: linear-gradient(135deg, #fff8e1 0%, #fef3c7 100%);
    border: 1px solid rgba(199, 154, 58, 0.25);
    border-radius: var(--rd-radius-md);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.reviews-summary-score {
    font-size: 2.2rem;
    font-weight: 900;
    color: #78350f;
    line-height: 1;
}
.reviews-summary-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--rd-rating);
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.reviews-summary-meta {
    font-size: 0.8rem;
    color: #92400e;
    font-weight: 600;
}
.reviews-summary-empty {
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    padding: 18px;
    text-align: center;
    color: var(--rd-muted);
    font-size: 0.9rem;
}

.review-item {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--rd-shadow-xs);
}
.review-item-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.review-item-stars {
    color: var(--rd-rating);
    font-size: 0.85rem;
    letter-spacing: 1px;
}
.review-item-author {
    font-weight: 700; color: var(--rd-ink); font-size: 0.85rem;
}
.review-item-date {
    font-size: 0.75rem;
    color: var(--rd-muted);
}
.review-item-comment {
    color: var(--rd-ink-soft);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 4px 0 0 0;
}
.reviews-show-more {
    background: transparent;
    border: 1px solid var(--rd-border);
    color: var(--rd-ink);
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.88rem;
    width: 100%;
    margin-top: 6px;
    cursor: pointer;
    transition: background .15s;
}
.reviews-show-more:hover { background: var(--rd-surface-2); }

/* ============ FAVORITES + PROFILE ============ */
#view-favorites { padding: 20px 16px 100px; }
#view-favorites h3 { font-size: 1.4rem; font-weight: 900; color: var(--rd-ink); margin-top: 8px; }
#fav-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 640px) { #fav-grid { grid-template-columns: repeat(2, 1fr); } }

#view-profile { padding: 20px 16px 100px !important; background: var(--rd-bg) !important; }
.profile-header {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-radius-lg) !important;
    padding: 28px 20px !important;
    box-shadow: var(--rd-shadow-xs) !important;
}
.profile-avatar {
    background: linear-gradient(135deg, var(--rd-gold) 0%, #a17a2c 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(199, 154, 58, 0.35);
}
.profile-name-editable { color: var(--rd-ink) !important; font-weight: 800 !important; }
.profile-email { color: var(--rd-muted) !important; }
.profile-section-heading { color: var(--rd-ink) !important; font-weight: 800 !important; margin-top: 28px !important; }

.sub-cta-card {
    background: linear-gradient(135deg, var(--rd-ink) 0%, var(--rd-ink-soft) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--rd-radius-lg) !important;
    padding: 26px 22px !important;
    box-shadow: var(--rd-shadow-md) !important;
}
.sub-cta-card h4 { color: #fff !important; font-weight: 800 !important; }
.sub-cta-card p { color: rgba(255, 255, 255, 0.8) !important; }
.sub-cta-icon { color: var(--rd-gold) !important; }

.btn-logout {
    background: transparent !important;
    border: 1px solid var(--rd-border) !important;
    color: var(--rd-muted) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-top: 24px !important;
    width: 100%;
    font-weight: 600 !important;
}
.btn-logout:hover { background: var(--rd-surface-2) !important; }

.legal-link {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    color: var(--rd-ink) !important;
    font-weight: 600;
    box-shadow: var(--rd-shadow-xs);
}

/* ============ PROFILE SETTINGS — sezioni stile iOS Settings ============ */
.profile-settings-list {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: 14px;
    overflow: hidden;
    margin: 8px 0 4px;
    box-shadow: var(--rd-shadow-xs);
}
.profile-settings-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    min-height: 52px;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--rd-ink);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid var(--rd-border);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s var(--rd-ease);
}
.profile-settings-list .profile-settings-item:last-child {
    border-bottom: none;
}
.profile-settings-item:active {
    background: var(--rd-surface-2);
    opacity: 0.92;
}
.profile-settings-item__icon {
    width: 22px;
    text-align: center;
    color: var(--rd-gold-text, #8d6b1a);
    font-size: 0.95rem;
    flex: 0 0 22px;
}
.profile-settings-item__label {
    flex: 1 1 auto;
    min-width: 0;
}
.profile-settings-item__chev {
    color: var(--rd-muted-2);
    font-size: 0.78rem;
    flex: 0 0 auto;
}
.profile-settings-item__hint {
    color: var(--rd-muted);
    font-size: 0.78rem;
    font-weight: 500;
    flex: 0 0 auto;
}
.profile-settings-item--toggle {
    cursor: default;
    opacity: 0.85;
}
.profile-settings-item--toggle:active {
    background: transparent;
    opacity: 0.85;
}

.profile-version {
    text-align: center;
    font-size: 0.72rem;
    color: var(--rd-muted-2);
    margin: 28px 0 10px;
    letter-spacing: 0.04em;
}

/* ============ BOTTOM NAV — glassmorphism island ============ */
#bottom-nav {
    background: rgba(255, 253, 249, 0.72) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.10),
        0 2px 8px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
/* Fallback Brave/no-backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #bottom-nav { background: rgba(255, 253, 249, 0.97) !important; }
}
.nav-item {
    color: var(--rd-muted-2) !important;
    font-weight: 600 !important;
    /* Kill tap highlight black flicker */
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    outline: none !important;
    background: transparent !important;
}
.nav-item:active, .nav-item.is-pressing {
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}
.nav-item { color: #8B8B8B !important; font-weight: 500 !important; transition: color 0.22s ease, font-weight 0.22s ease !important; }
.nav-item i { transition: transform 0.22s var(--rd-ease-snappy), color 0.22s ease !important; transform: scale(1) !important; }
.nav-item.active { color: var(--rd-gold-text, #8d6b1a) !important; font-weight: 700 !important; transform: none !important; }
.nav-item.active i { color: #b88a2c !important; transform: scale(1.4) !important; }
.nav-item.nav-preview { color: var(--rd-gold-text, #8d6b1a) !important; font-weight: 700 !important; }
.nav-item.nav-preview i { color: #b88a2c !important; transform: scale(1.4) !important; }

/* TheFork-style magnifying lens */
#nav-indicator {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 64px !important;
    height: 64px !important;
    margin-top: -32px !important;
    background: rgba(255, 253, 249, 0.55) !important;
    border: 1px solid rgba(212, 165, 116, 0.25) !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10), inset 0 0 0 1px rgba(255,255,255,0.45) !important;
    backdrop-filter: saturate(160%) blur(10px) !important;
    -webkit-backdrop-filter: saturate(160%) blur(10px) !important;
    margin-left: 0 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: transform 0.28s var(--rd-ease-snappy) !important;
    z-index: 0 !important;
}
#nav-indicator.is-dragging {
    transition: none !important;
    will-change: transform;
}
.nav-item { z-index: 1 !important; }
.nav-item {
    position: relative !important;
    z-index: 1 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    transition: color 0.2s ease !important;
}
.nav-item i {
    transition: color 0.2s ease, transform 0.2s ease !important;
    display: inline-block !important;
    transform-origin: center !important;
}

/* ============ MODALS ============ */
.modal-overlay { background: rgba(15, 23, 42, 0.55) !important; backdrop-filter: blur(6px); }
.modal-box {
    background: var(--rd-surface) !important;
    border-radius: var(--rd-radius-lg) !important;
    box-shadow: var(--rd-shadow-lg) !important;
    border: none !important;
    padding: 28px 24px !important;
}
.modal-box h3 { color: var(--rd-ink) !important; font-weight: 800 !important; }

.btn-floating {
    border-radius: 14px !important;
    font-weight: 700 !important;
    padding: 14px 18px !important;
    transition: transform .12s var(--rd-ease), box-shadow .15s !important;
}
.btn-floating.btn-primary {
    background: var(--rd-ink) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25) !important;
}
.btn-floating.btn-primary:hover { background: var(--rd-ink-soft) !important; }
.btn-floating.btn-primary:active { opacity: 0.85; }
.btn-floating.cancel {
    background: var(--rd-surface-2) !important;
    color: var(--rd-ink) !important;
    box-shadow: none !important;
}
.btn-floating.btn-disabled {
    background: var(--rd-surface-2) !important;
    color: var(--rd-muted-2) !important;
    box-shadow: none !important;
}

#detail-footer.sticky-footer {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid var(--rd-border) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.06) !important;
    padding: 14px 16px !important;
}

/* ============ ONBOARDING (NEW) ============ */
.onboarding-overlay {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, var(--rd-ink) 0%, var(--rd-ink-soft) 100%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    color: #fff;
    padding: 30px 24px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s ease;
}
.onboarding-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.onboarding-skip {
    position: absolute; top: 18px; right: 20px;
    background: transparent; border: none; color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px;
}
.onboarding-skip:hover { color: #fff; }

.onboarding-track {
    flex: 1;
    display: flex;
    transition: transform 0.5s var(--rd-ease);
    width: 300%;
    margin-top: 30px;
}
.onboarding-slide {
    flex: 0 0 calc(100% / 3);
    width: calc(100% / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
}
.onboarding-icon {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(199, 154, 58, 0.18);
    color: var(--rd-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem;
    margin-bottom: 30px;
    box-shadow: 0 0 0 12px rgba(199, 154, 58, 0.08);
}
.onboarding-title { font-size: 1.6rem; font-weight: 900; margin: 0 0 14px 0; letter-spacing: -0.5px; }
.onboarding-text { font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); max-width: 360px; margin: 0; }

.onboarding-bottom {
    padding: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.onboarding-dots { display: flex; gap: 8px; }
.onboarding-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.3s, background 0.3s;
}
.onboarding-dot.active { background: var(--rd-gold); width: 24px; border-radius: 4px; }

.onboarding-cta {
    background: var(--rd-gold);
    color: var(--rd-ink);
    border: none;
    padding: 14px 38px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(199, 154, 58, 0.4);
    transition: transform .15s var(--rd-ease), background .15s;
}
.onboarding-cta:hover { background: #d4ab4a; }
.onboarding-cta:active { opacity: 0.85; }

/* ============ MAP TWEAKS ============ */
.map-card-preview {
    background: var(--rd-surface) !important;
    border-radius: var(--rd-radius-md) !important;
    box-shadow: var(--rd-shadow-md) !important;
    border: 1px solid var(--rd-border) !important;
}
.map-card-preview-title { color: var(--rd-ink) !important; font-weight: 800 !important; }
.map-card-preview-btn {
    background: var(--rd-ink) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
/* ============ TOAST ============ */
#toast {
    background: var(--rd-ink) !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: var(--rd-shadow-md) !important;
    padding: 12px 18px !important;
}
.toast-action {
    background: var(--rd-gold) !important;
    color: var(--rd-ink) !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
}

/* ============ EMPTY STATES ============ */
/* Unified empty-state component (Fase D.3) — usato da Esplora,
   Preferiti, History, Admin, Carousel home. Sostituisce 5 markup
   duplicati (.explore-empty, inline p, bare div). */
.empty-state {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-radius-md) !important;
    color: var(--rd-muted) !important;
    padding: 40px 24px !important;
    box-shadow: var(--rd-shadow-xs);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.empty-state__icon, .empty-state i {
    color: var(--rd-gold-soft) !important;
    font-size: 2.4rem !important;
    margin-bottom: 4px;
}
.empty-state__text {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rd-ink);
}
.empty-state__hint {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.7;
    line-height: 1.5;
    max-width: 280px;
}

/* ============ AUTH SCREEN — dark bg, white text ============ */
.auth-screen {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #0f1f38 100%) !important;
}
.auth-title { color: #ffffff !important; }
.auth-title-accent { color: var(--rd-gold) !important; }
.auth-tagline { color: rgba(255,255,255,0.65) !important; }
.auth-tabs {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
.auth-tab { color: rgba(255,255,255,0.55) !important; }
.auth-tab.active {
    background: var(--rd-gold) !important;
    color: #1a0a00 !important;
    box-shadow: 0 4px 14px rgba(212,165,65,0.35) !important;
}
.auth-field label { color: rgba(255,255,255,0.8) !important; }
.auth-field input {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
}
.auth-field input::placeholder { color: rgba(255,255,255,0.35) !important; }
.auth-field input:focus {
    background: rgba(255,255,255,0.16) !important;
    border-color: var(--rd-gold) !important;
    box-shadow: 0 0 0 3px rgba(212,165,65,0.2) !important;
}
.auth-legal { color: rgba(255,255,255,0.4) !important; }
.auth-legal a { color: var(--rd-gold) !important; }

/* ============ MAP CATEGORY DROPDOWN ============ */
.map-cat-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--rd-border);
    border-radius: 40px;
    box-shadow: var(--rd-shadow-sm);
    padding: 0 14px 0 12px;
    height: 38px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.map-cat-select-wrap i {
    color: var(--rd-gold);
    font-size: 0.85rem;
    margin-right: 6px;
    pointer-events: none;
}
.map-cat-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rd-ink);
    font-family: inherit;
    outline: none;
    cursor: pointer;
    padding-right: 18px;
    min-width: 100px;
}
.map-cat-chevron {
    position: absolute;
    right: 12px;
    pointer-events: none;
    color: var(--rd-muted-2);
    font-size: 0.7rem;
}
.map-filters-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    flex-wrap: nowrap;
}

/* ============ DETAIL TABS ============ */
.detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--rd-border);
    margin: 0 0 20px 0;
}
.detail-tab {
    flex: 1;
    padding: 12px 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rd-muted-2);
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.detail-tab.active {
    color: var(--rd-gold-text, #8d6b1a);
    border-bottom-color: var(--rd-gold);
}
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }

/* ============ HOME — flow naturale, scroll se serve (es. ticket attivo) ============ */
#view-home.view {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 16px calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 12px !important;
}

/* ============ SKELETON / LOADING ============ */
.skeleton {
    background: linear-gradient(90deg, var(--rd-surface-2) 25%, var(--rd-surface) 50%, var(--rd-surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--rd-radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.skeleton-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    overflow: hidden;
    box-shadow: var(--rd-shadow-xs);
}
.skeleton-card .skeleton-thumb { height: 200px; }
.skeleton-card .skeleton-info { padding: 14px 16px 16px; }
.skeleton-card .skeleton-line { height: 14px; margin-bottom: 8px; }
.skeleton-card .skeleton-line.short { width: 60%; }
.skeleton-card .skeleton-line.offer { height: 36px; margin-top: 8px; border-radius: 8px; }

.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 20px; height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ============ TOAST VARIANTS ============ */
#toast.toast-error { background: var(--rd-coral) !important; }
#toast.toast-success { background: var(--rd-success) !important; }

/* ============ OFFLINE BANNER ============ */
.offline-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
    background: var(--rd-coral); color: #fff;
    text-align: center; padding: 6px 12px;
    font-size: 0.8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.offline-banner[hidden] { display: none; }
.offline-banner:not([hidden]) ~ #app #app-header { top: 30px; }
.offline-banner:not([hidden]) ~ #app #main-container { padding-top: 30px; }

/* ============ EXPLORE EMPTY STATE ============ */
.explore-empty {
    text-align: center; padding: 48px 24px;
    color: var(--rd-muted);
}
.explore-empty i { font-size: 2.2rem; color: var(--rd-muted-2); margin-bottom: 12px; display: block; }
.explore-empty p { margin: 0; font-size: 0.92rem; line-height: 1.5; }

/* ============ SUBSCRIPTION GATE BUTTON ============ */
.btn-subscription-gate {
    background: linear-gradient(135deg, var(--rd-gold) 0%, #a17a2c 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(199, 154, 58, 0.3) !important;
}
.btn-subscription-gate i { margin-right: 6px; }

/* ============ CLOSED PARTNER CARD OVERLAY ============ */
.p-card.closed-today .p-info { opacity: 0.6; }

/* ============ GALLERY SWIPE HINT ============ */
.gallery-scroller[data-multi="true"]::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 50px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12));
    pointer-events: none; transition: opacity 0.3s;
}
.gallery-scroller.scrolled::after { opacity: 0; }

/* ============ HISTORY STATUS BADGES ============ */
.history-row { background: var(--rd-surface); padding: 14px; border-radius: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--rd-shadow-xs); }
.history-row .history-name { font-weight: 700; color: var(--rd-ink); font-size: 0.95rem; margin-bottom: 4px; }
.history-row .history-date { font-size: 0.75rem; color: var(--rd-muted); }
.history-status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 8px; border-radius: 6px; }
.history-status.status-used { color: var(--rd-success); background: var(--rd-success-soft); }
.history-status.status-active { color: var(--rd-gold); background: rgba(199,154,58,0.12); }
.history-status.status-expired { color: var(--rd-muted); background: var(--rd-surface-2); }

/* ============ HOME SEARCH BAR (Fase B.1) ============
   Tap → naviga a Esplora con focus sull'input search.
   Pattern allineato a TheFork/Airbnb/Klook/Resy (5/5 competitor
   hanno search visible nella home come prima CTA). */
.home-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: 999px;
    padding: 13px 18px;
    box-shadow: var(--rd-shadow-xs);
    cursor: pointer;
    margin: 0 0 20px 0;
    transition: border-color .2s var(--rd-ease), box-shadow .2s var(--rd-ease);
    -webkit-tap-highlight-color: transparent;
}
.home-search-bar:hover, .home-search-bar:active {
    border-color: var(--rd-gold-soft);
    box-shadow: var(--rd-shadow-sm);
}
.home-search-bar i {
    color: var(--rd-muted);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.home-search-placeholder {
    color: var(--rd-muted);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ HOME RECENT SECTION (Fase B.2) ============ */
.home-recent-section {
    margin-top: 8px;
}
.home-recent-section[hidden] { display: none; }

/* ============ HOME CAROUSEL ============ */
.home-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 8px;
    scrollbar-width: none;
    /* Fix: stesso lock orizzontale dei chip */
    touch-action: pan-x pan-y;
    flex-wrap: nowrap;
    /* Garantisce altezza minima visibile anche prima del render JS */
    min-height: 200px;
}
.home-carousel::-webkit-scrollbar { display: none; }
.home-carousel-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
    border-radius: var(--rd-radius-md, 14px);
    background: var(--rd-surface, #fff);
    border: 1px solid var(--rd-border, #e8e4df);
    box-shadow: var(--rd-shadow-xs, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
    cursor: pointer;
}
.home-carousel-card:active { opacity: 0.85; }
.home-carousel-thumb {
    height: 110px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.home-carousel-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.home-carousel-info {
    padding: 10px;
}
.home-carousel-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--rd-ink, #0f172a);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-carousel-offer {
    font-size: 0.72rem;
    color: var(--rd-success, #27ae60);
    font-weight: 600;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.home-carousel-offer i { font-size: 0.68rem; }

/* ============ HOME CATEGORY CHIPS ============ */
.home-categories-row {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 16px 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Fix: limita touch scroll a orizzontale (era anche verticale su mobile) */
    touch-action: pan-x pan-y;
    /* Evita che le chip facciano "wrap" verticale: forza una riga sola */
    flex-wrap: nowrap;
}
.home-categories-row::-webkit-scrollbar { display: none; }
.home-cat-chip {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--rd-surface, #fff);
    border: 1px solid var(--rd-border, #e8e4df);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rd-ink, #0f172a);
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--rd-shadow-xs, 0 1px 3px rgba(0,0,0,0.06));
}
.home-cat-chip:active { opacity: 0.75; }
.home-cat-chip i { font-size: 0.8rem; color: var(--rd-gold, #C79A3A); }

/* ============ BUTTON PRESS FEEDBACK ============ */
.btn-floating:active { opacity: 0.85 !important; }
.p-card:active { opacity: 0.85 !important; }
.info-item:active { background: var(--rd-surface-2) !important; }

/* ============ VIEW TRANSITIONS ============ */
.view { opacity: 0; transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.view.active { opacity: 1; pointer-events: auto; }

/* ============ PULL-TO-REFRESH INDICATOR ============ */
.ptr-indicator {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-40px);
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--rd-surface); box-shadow: var(--rd-shadow-md);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; transition: transform 0.25s var(--rd-ease), opacity 0.2s;
    opacity: 0; pointer-events: none;
}
.ptr-indicator.pulling { opacity: 1; transform: translateX(-50%) translateY(8px); }
.ptr-indicator.refreshing { opacity: 1; transform: translateX(-50%) translateY(8px); }
.ptr-indicator i { color: var(--rd-gold); font-size: 1rem; }
.ptr-indicator.refreshing i { animation: btn-spin 0.6s linear infinite; }

/* ============ SAFE AREAS (mobile notches) ============ */
@supports (padding: max(0px)) {
    #bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
    #detail-footer.sticky-footer { padding-bottom: max(14px, env(safe-area-inset-bottom)) !important; }
}

/* ============ A11Y: ridotto movimento ============
 * Rispetta utenti con disturbi vestibolari (WCAG 2.3.3 + SC 2.2.2)
 */
@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;
    }
}

/* ============ A11Y: focus visibile per navigazione tastiera ============
 * Ripristina un anello di focus visibile dove era stato rimosso con
 * outline:none, ma SOLO per utenti che navigano via tastiera
 * (:focus-visible non si attiva su click del mouse).
 * WCAG 2.4.7 (Focus Visible).
 */
:where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--rd-ink, #0f172a) !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}
.search-input:focus-visible,
.nav-item:focus-visible,
.auth-field input:focus-visible,
.auth-submit:focus-visible {
    outline: 2px solid var(--rd-ink, #0f172a) !important;
    outline-offset: 2px !important;
}

/* ============ A11Y: token contrasto gold per testo ============
 * --rd-gold ha contrasto 2.4:1 su cream — non passa WCAG AA.
 * Quando il gold è usato come TESTO, utilizzare --rd-gold-text (~4.8:1).
 * (Il token --rd-gold resta per gradient/icone/background.)
 */
:root {
    --rd-gold-text: #8d6b1a;
}

/* ============ A11Y: touch target minimo 44×44 ============ */
.p-fav-star,
.onboarding-skip {
    min-width: 44px;
    min-height: 44px;
}

/* ============ A11Y: focus visible (Fase D.5) ============
   Outline custom premium per navigazione keyboard/assistive tech.
   Visibile solo via :focus-visible (no flash sui tap touch).
   Gold soft + outline-offset per non sovrapporre i border esistenti. */
.nav-item:focus-visible,
.exp-card:focus-visible,
.p-card:focus-visible,
.home-cat-chip:focus-visible,
.home-search-bar:focus-visible,
.view-mode-fab:focus-visible,
.chip:focus-visible,
.btn-fav:focus-visible,
.btn-floating:focus-visible,
.home-carousel-card:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--rd-gold) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(199, 154, 58, 0.18) !important;
}

/* Input focus già gestito; ma garantisci visibilità */
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--rd-ink) !important;
    outline-offset: 2px !important;
}

/* ============ PERF: scroll fluido nelle view (Bug iOS) ============
 * Base ora usa solo opacity transition senza will-change permanente.
 * Solo durante transition di cambio view promuoviamo a layer GPU.
 */
.view.transitioning {
    will-change: opacity;
}

/* ============ LAYOUT: keep content above the floating bottom-nav ============
 * #bottom-nav floats at `bottom: 20px; height: 70px; padding-bottom: 10px+safe-area`.
 * Its top edge sits ~100px + safe-area-inset-bottom from the bottom of the screen.
 * Without padding-bottom, the last partner card on Esplora is hidden behind the nav.
 * Per la mappa lasciamo bottom: 0 e i controlli flottanti si auto-posizionano sopra
 * la nav: si vede tutto il territorio fino al bordo inferiore.
 */
#view-explore,
#view-favorites,
#view-profile {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Tessera: il bottone Esci è l'ultimo elemento e deve restare cliccabile
 * sopra la #bottom-nav floating (bottom: 20px, height: 70px). */
#view-profile #btn-logout {
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

/* Feedback tap unificato: solo opacity, niente transform (regola CLAUDE.md:
 * scroll-jank su iOS se usiamo scale/translate ripetutamente). */
.btn-floating:active:not(:disabled),
.btn-logout:active:not(:disabled),
.home-shortcut:active,
.home-cat-chip:active,
.legal-link:active,
.home-search-bar:active {
    opacity: 0.85;
    transition: opacity 0.1s ease;
}

/* ============ UX: prevent accidental text selection (PWA feel) ============ */
#app {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#app input,
#app textarea,
#app [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* ============ MODAL: X di chiusura in alto a destra ============ */
.modal-box { position: relative; }
.modal-close-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--rd-muted, #64748b);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.modal-close-x:hover,
.modal-close-x:focus-visible {
    background: rgba(15, 23, 42, 0.06);
    color: var(--rd-ink, #0f172a);
}