/* ═══ VARIABILI COLORE CONDIVISE ═══ */
:root {
    --gm-cobalto: #1B3A5C;
    --gm-cobalto-light: #2E5A8B;
    --gm-terra: #C17F4E;
    --gm-terra-soft: rgba(193,127,78,0.15);
    --gm-white: #fff;
    --gm-calcare: #F5F0EB;
    --gm-calcare-dark: #E8E0D4;
    --gm-gray-bg: #F5F0EB;
    --gm-text: #1B3A5C;
    --gm-text-muted: #6b7280;
    --gm-border: rgba(27,58,92,0.08);
    --gm-shadow: 0 2px 16px rgba(27,58,92,0.08);
    --gm-shadow-hover: 0 8px 32px rgba(27,58,92,0.14);
        /* Categorie — alias dove possibile, esplicito dove unico */
    --cat-all: var(--gm-cobalto-light);
    --cat-dormire: var(--gm-cobalto-light);
    --cat-vedere: var(--gm-terra);
    --cat-fare: #3D6B5A;
    --cat-mangiare: #A05030;
    --cat-utilita: #4A5A7A;
    --cat-favorites: #e74c3c;
        /* Categorie — pagina Tips (set distinto, stesso pattern) */
    --tip-transport: #2e7d8c;
    --tip-money: var(--gm-terra);
    --tip-culture: #e67e22;
    --tip-food: #2d6a4f;
    --tip-safety: #e74c3c;
    --tip-practical: #34446a;
    --gm-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
    
    /* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Barra azioni modale
   ═══════════════════════════════════════════════════════════════ */

.action-bar {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    border: 1px solid var(--gm-border);
    border-radius: 14px;
    background: var(--gm-gray-bg);
    color: var(--gm-text);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.action-btn i {
    font-size: 1.1rem;
    color: var(--gm-cobalto);
    transition: color 0.2s ease;
}
.action-btn:hover {
    background: var(--gm-cobalto);
    color: #fff;
    border-color: var(--gm-cobalto);
}
.action-btn:hover i {
    color: var(--gm-terra);
}
    
    /* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Video embed responsive 16:9
   ═══════════════════════════════════════════════════════════════ */

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #000;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Audio player box
   ═══════════════════════════════════════════════════════════════ */

.audio-player {
    background: var(--gm-gray-bg);
    border: 1px solid var(--gm-border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}
.audio-player label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--gm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 8px;
}
    
    /* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Riga informazione (indirizzo, tel, web, orario)
   ═══════════════════════════════════════════════════════════════ */

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 0.82rem;
    color: var(--gm-text-muted);
}
.info-row i {
    color: var(--gm-text-muted);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.78rem;
    margin-top: 1px;
}
.info-row a {
    color: var(--gm-text-muted);
    text-decoration: none;
}
.info-row a:hover {
    color: var(--gm-cobalto);
    text-decoration: underline;
}
/* Card info raggruppata nel modale */
.info-card {
    background: var(--gm-gray-bg);
    border: 1px solid var(--gm-border);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 16px;
}
.info-card .info-row {
    margin-bottom: 0;
    padding: 6px 0;
    border-bottom: 1px solid rgba(27,58,92,0.06);
}
.info-card .info-row:last-child {
    border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Card con barra laterale colorata
   ═══════════════════════════════════════════════════════════════ */

.accent-card {
    position: relative;
    overflow: hidden;
}
.accent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gm-terra);
}

    /* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Pulsante chiusura circolare
   ═══════════════════════════════════════════════════════════════ */

.btn-close-circle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001;
    background: rgba(0,0,0,0.55);
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    font-size: 1.1rem;
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}


.btn-close-circle:hover { background: rgba(0,0,0,0.75); }
body.rtl .btn-close-circle { right: auto; left: 10px;}

audio {
    width: 100%;
    height: 34px;
}

/* ═══ AVATAR LOGO (header pagine) ═══ */
.stips-avatar {
    width: 86px;
    height: 86px;
    background: var(--gm-white);
    border-radius: 50%;
    margin: 0 auto 14px;
    border: 3px solid var(--gm-terra);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 4px var(--gm-terra-soft), 0 8px 24px rgba(27,58,92,0.3);
}
.stips-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════
   BASE — Font e testo condivisi
   ═══════════════════════════════════════════════════════════════ */

body {
    font-family: var(--gm-font-family);
    color: var(--gm-text);
    background: var(--gm-gray-bg);
    -webkit-font-smoothing: antialiased;
}
body.rtl { direction: rtl; text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Page header
   ═══════════════════════════════════════════════════════════════ */

.page-header {
    padding: 6px;
    background: linear-gradient(160deg, var(--gm-cobalto) 0%, var(--gm-cobalto-light) 60%, #152B45 100%);
    position: sticky;
    top: 0;
    z-index: 40;
    overflow: hidden;
}
.page-header-photo {
    background-image: linear-gradient(180deg, rgba(27,58,92,0.15) 0%, rgba(21,43,69,0.55) 100%),
                       url('https://www.giroper.com/audioguida_digitale/modica_app/splash-modica.jpg');
    background-size: cover;
    background-position: center;
    padding: 34px 16px 90px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 40px;
    background: var(--gm-gray-bg);
    clip-path: ellipse(60% 100% at 50% 100%);
    z-index: 3;
}
.page-header h1,
.page-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: #fff;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.page-header-photo p,
.page-header-photo .subtitle {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    margin: 0;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ═══ BOTTOM NAV (stile nuovo, con auto-hide su scroll) ═══ */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: linear-gradient(160deg, var(--gm-cobalto) 0%, var(--gm-cobalto-light) 100%);
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    height: 64px;
    box-shadow: 0 -6px 24px rgba(5,21,45,0.35);
    overflow-x: auto;
    scrollbar-width: none;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.bottom-nav.hidden {
    transform: translateY(100%);
}
.bottom-nav::-webkit-scrollbar { display: none; }

.bnav-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.65);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    padding: 6px 2px;
    position: relative;
}
.bnav-btn i { font-size: 1.3rem; display: block; transition: transform 0.2s ease; }
.bnav-btn:hover { color: #fff; }
.bnav-btn:hover i { transform: translateY(-2px); }
.bnav-btn.active { color: var(--gm-terra); }
.bnav-btn.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--gm-terra);
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Filtri categoria (pillole su header)
   ═══════════════════════════════════════════════════════════════ */

.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    position: relative;
    z-index: 2;
}
.btn-f {
    flex: 0 0 auto;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    border-radius: 16px;
    padding: 7px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: -0.1px;
    min-width: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-f:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.5); }
.btn-f.active { color: #fff; text-shadow: none; }
.btn-f.active[data-cat="all"]       { background: var(--cat-all);       border-color: var(--cat-all); }
.btn-f.active[data-cat="vedere"]    { background: var(--cat-vedere);    border-color: var(--cat-vedere); }
.btn-f.active[data-cat="fare"]      { background: var(--cat-fare);      border-color: var(--cat-fare); }
.btn-f.active[data-cat="mangiare"]  { background: var(--cat-mangiare);  border-color: var(--cat-mangiare); }
.btn-f.active[data-cat="dormire"]   { background: var(--cat-dormire);   border-color: var(--cat-dormire); }
.btn-f.active[data-cat="utilita"]   { background: var(--cat-utilita);   border-color: var(--cat-utilita); }
.btn-f.active[data-cat="favorites"] { background: var(--cat-favorites); border-color: var(--cat-favorites); }
.btn-f.active[data-filter="all"]       { background: var(--cat-all);        border-color: var(--cat-all); }
.btn-f.active[data-filter="transport"] { background: var(--tip-transport); border-color: var(--tip-transport); }
.btn-f.active[data-filter="money"]     { background: var(--tip-money);     border-color: var(--tip-money); }
.btn-f.active[data-filter="culture"]   { background: var(--tip-culture);   border-color: var(--tip-culture); }
.btn-f.active[data-filter="food"]      { background: var(--tip-food);      border-color: var(--tip-food); }
.btn-f.active[data-filter="safety"]    { background: var(--tip-safety);    border-color: var(--tip-safety); }
.btn-f.active[data-filter="practical"] { background: var(--tip-practical); border-color: var(--tip-practical); }

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.lang-hidden { display: none !important; }

/* ═══ ANIMAZIONI CONDIVISE ═══ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
/* Indicatore di scroll nel modale */
.scroll-indicator {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--gm-text-muted);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}
/* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Modale pannello full-screen
   ═══════════════════════════════════════════════════════════════ */

.modal-panel {
    position: fixed;
    top: 0; bottom: 64px; left: 0; right: 0;
    z-index: 10001; pointer-events: auto;
    display: flex; flex-direction: column;
    border-radius: 0; overflow: hidden;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.35s;
}
.modal-panel.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
}

/* Hero sticky */
.panel-hero-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 260px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}
.panel-hero-wrap .panel-hero {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.panel-hero-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
    pointer-events: none;
}
.panel-hero-badges {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    gap: 8px;
    align-items: center;
}
.panel-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--gm-cobalto-light);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

/* Sponsor badge nel pannello */
.sponsor-badge-panel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F0C040;
    color: #6b4a1a !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 3px rgba(240,192,64,0.22), 0 2px 8px rgba(0,0,0,0.25);
}

/* Body scrollabile */
.modal-panel-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.modal-panel-body .p-4 {
    padding: 22px 18px !important;
}

/* Titolo e descrizione modale */
.modal-panel-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gm-text);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 8px;
    text-align: left;
}
.modal-panel-desc {
    white-space: pre-line;
    line-height: 1.75;
    color: var(--gm-text-muted);
    font-size: 0.88rem;
    margin-top: 8px;
    margin-bottom: 20px;
}

/* Pulsante chiusura modale */
.btn-close-modal {
    position: absolute; top: 10px; right: 10px; z-index: 10202;
    background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.35); border-radius: 50%;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35); cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    color: #fff;
    font-size: 1.1rem;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}
.btn-close-modal:hover { background: rgba(0,0,0,0.75); }
body.rtl .btn-close-modal { right: auto; left: 10px; }

/* Pulsante preferito */
.fav-btn {
    position: absolute; top: 10px; right: 58px; z-index: 10202;
    background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.35); border-radius: 50%;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35); cursor: pointer;
    font-size: 1.1rem; color: #fff; transition: all 0.2s;
    backdrop-filter: blur(4px);
}
.fav-btn.active { color: #e74c3c; }
.fav-btn:active { transform: scale(0.9); }
body.rtl .fav-btn { right: auto; left: 58px; }

/* Quando non c'è la barra distanza, stessa posizione */
.modal-panel.no-distance .fav-btn {
    top: 10px; right: 58px;
}
.modal-panel:not(.no-distance) .fav-btn,
.modal-panel:not(.no-distance) .btn-close-modal {
    top: 52px;
}
body.rtl .modal-panel:not(.no-distance) .fav-btn { right: auto; left: 58px; }
body.rtl .modal-panel:not(.no-distance) .btn-close-modal { right: auto; left: 10px; }

/* Barra distanza */
.panel-distance-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gm-cobalto);
    color: #fff;
    padding: 9px 50px 9px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    min-height: 40px;
}
.panel-distance-bar.hidden { display: none; }
.panel-distance-bar i { font-size: 0.95rem; flex-shrink: 0; }
body.rtl .panel-distance-bar { padding: 9px 16px 9px 50px; }

/* Badge orario */
.orario-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--gm-gray-bg);
    color: var(--gm-text-muted);
    border: 1px solid var(--gm-border);
    padding: 5px 12px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 600;
}
.orario-badge i { font-size: 0.8rem; color: var(--gm-text-muted); }

/* Audio box modale */
.modal-audio-box {
    background: var(--gm-gray-bg) !important;
    border: 1px solid var(--gm-border);
    border-radius: 12px;
    padding: 12px !important;
    margin-bottom: 16px;
    box-shadow: none !important;
}
.modal-audio-box label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--gm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Foto lista POI (thumbnail quadrata)
   ═══════════════════════════════════════════════════════════════ */
:root {
    --thumb: 88px;
}
.spot-img-wrap {
    flex: 0 0 var(--thumb);
    width: var(--thumb);
    position: relative;
    overflow: hidden;
}
.spot-img {
    width: 100%;
    height: 100%;
    min-height: 80px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}
.spot-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 80px;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 1.6rem;
}
@media (min-width: 600px) {
    :root { --thumb: 110px; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI — Foto hero card tour (panoramica)
   ═══════════════════════════════════════════════════════════════ */
.tour-hero {
    height: 240px;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}
.tour-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}