/*
Theme Name: Million Beach
Theme URI: https://example.com/million-beach
Author: Enrico
Author URI: https://example.com
Description: Trova la tua spiaggia perfetta ovunque nel mondo. Ricerca per località, geolocalizzazione ed esplorazione libera della mappa; schede spiaggia con tipologia, servizi, accesso, foto, meteo e stato del mare in tempo reale. Dati OpenStreetMap, Open-Meteo e Wikimedia Commons. Include custom post type "spiaggia" e account demo per provare le recensioni.
Version: 0.24.0
Requires at least: 6.0
Tested up to: 7.0.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: million-beach
Tags: travel, one-column, custom-menu
*/
/* ================= DESIGN TOKENS ================= */
:root{
--abisso:#07253A; /* profondità oceano — sfondi scuri */
--oceano:#0B4F6C; /* blu mare medio */
--laguna:#12B5A5; /* accento primario — acqua tropicale */
--laguna-scura:#0A7C6F; /* accento leggibile su bianco */
--laguna-chiara:#8CEADF; /* acqua bassa */
--tramonto:#FF6F59; /* accento caldo — tramonto */
--sole:#FFC145; /* oro solare */
--sabbia:#F9EFDD; /* superficie calda */
--schiuma:#FDFBF6; /* fondo pagina */
--inchiostro:#12303F; /* testo */
--grigio:#5E7482;
--card:#ffffff; /* superfici delle card */
--card-rgb:255,255,255; /* v0.12.1 — stessi componenti di --card, in RGB:
serve per usare rgba() nel gradiente sopra la
foto di sfondo delle card */
--linea:#F1EADB; /* separatori sottili */
--campo-bordo:#E4DCCB; /* bordi dei campi */
--r-lg:26px; --r-md:18px; --r-sm:12px;
--ombra:0 14px 40px -14px rgba(7,37,58,.25);
--font-display:'Unbounded',sans-serif;
--font-body:'Albert Sans',sans-serif;
--font-data:'Space Grotesk',monospace;
}
/* ================= TEMA SCURO (v0.8) =================
attivato dalla classe .dark su (automatica dalle
impostazioni di sistema, o forzata dal toggle nel footer) */
html.dark{
--schiuma:#0B1E2D;
--sabbia:#152C3E;
--inchiostro:#EAF3F5;
--grigio:#9FB4C0;
--card:#123047;
--card-rgb:18,48,71; /* v0.12.1 — stessi componenti di --card qui sopra */
--linea:#1E3A50;
--campo-bordo:#28465C;
--laguna-scura:#5AD6C6;
}
html.dark .tag.ok{background:#0E3B34;color:#7FE3D6}
html.dark .tag.pay{background:#46231A;color:#FFB39F}
html.dark .tag.warn{background:#42351A;color:#FFD98A}
html.dark .tag.star{background:linear-gradient(120deg,#4A3A12,#5A4716);color:#FFD98A}
html.dark .net-banner{background:#332B12;border-color:#8A6D1F}
html.dark .road-card{border-color:#3A5A74}
html.dark .osm-note a{color:var(--laguna-chiara)}
html.dark .map-hint{background:rgba(11,30,45,.92)}
html.dark .svc-map-head button:hover{background:#1E3A50}
html.dark .beach-card,html.dark .info-box,html.dark .suggest-drop{box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--inchiostro);background:var(--schiuma);line-height:1.6;overflow-x:clip}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}
:focus-visible{outline:3px solid var(--tramonto);outline-offset:2px;border-radius:6px}
/* ================= NAV ================= */
/* WP:TEMPLATE → header.php */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:1000;width:min(1120px,calc(100% - 28px));
display:flex;align-items:center;justify-content:space-between;padding:10px 18px;
background:rgba(7,37,58,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#fff}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand-sun{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE29A,var(--sole) 55%,var(--tramonto));
box-shadow:0 0 18px rgba(255,193,69,.8);animation:sunPulse 4s ease-in-out infinite}
/* logo Million Beach (v0.9) — variante "dark" con anello schiuma,
pensata per la barra e il footer che restano scuri in entrambi i temi */
.brand-logo{width:38px;height:38px;border-radius:50%;object-fit:contain;flex-shrink:0;
filter:drop-shadow(0 0 10px rgba(253,251,246,.28));transition:transform .3s}
.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.06)}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.04em}
.brand-name em{font-style:normal;color:var(--laguna-chiara)}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.88rem;font-weight:500;padding:8px 14px;border-radius:999px;transition:background .25s}
.nav-links a:hover{background:rgba(255,255,255,.12)}
.btn-auth{background:linear-gradient(120deg,var(--sole),var(--tramonto));color:var(--abisso);font-weight:700;font-size:.85rem;
padding:9px 18px;border-radius:999px;transition:transform .25s,box-shadow .25s}
.btn-auth:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(255,111,89,.6)}
.btn-auth.logged{background:linear-gradient(120deg,var(--laguna),#0aa393);color:#fff}
@media(max-width:640px){.nav-links a:not(.keep){display:none}}
/* ================= BANNER AVVISO RETE ================= */
.net-banner{display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:5000;
width:min(560px,calc(100% - 28px));background:#FFF3D6;border:2px solid var(--sole);border-radius:var(--r-md);
padding:14px 44px 14px 18px;font-size:.88rem;box-shadow:var(--ombra)}
.net-banner.on{display:block;animation:slideUp .4s ease}
.net-banner button{position:absolute;top:8px;right:10px;font-size:1rem;color:var(--grigio)}
/* ================= HERO / LINEA D'ACQUA ================= */
/* WP:TEMPLATE → front-page.php (sezione hero) */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
padding:120px 20px 150px;text-align:center;color:#fff;overflow-x:hidden;overflow-y:visible;
background:linear-gradient(172deg,#FFE3A9 0%,#FFB37A 24%,#FF8E6B 40%,#3BC8BC 62%,#0B4F6C 84%,#07253A 100%)}
.hero-sun{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:190px;height:190px;border-radius:50%;
background:radial-gradient(circle at 40% 35%,#FFF3CE,#FFD170 45%,#FF9A62 78%,rgba(255,140,90,0));
filter:blur(1px);animation:sunFloat 9s ease-in-out infinite;pointer-events:none}
@keyframes sunFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(16px)}}
@keyframes sunPulse{0%,100%{box-shadow:0 0 14px rgba(255,193,69,.7)}50%{box-shadow:0 0 26px rgba(255,193,69,1)}}
.hero-inner{position:relative;z-index:7;width:100%;max-width:1140px;min-width:0}
.hero-eyebrow{font-family:var(--font-data);text-transform:uppercase;letter-spacing:.35em;font-size:.75rem;color:rgba(255,255,255,.9);
display:inline-block;padding:6px 16px;border:1px solid rgba(255,255,255,.35);border-radius:999px;margin-bottom:22px;
background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.hero h1{max-width:820px;margin-left:auto;margin-right:auto;font-family:var(--font-display);font-weight:900;font-size:clamp(2.1rem,6vw,4.2rem);line-height:1.08;
text-shadow:0 4px 30px rgba(7,37,58,.35)}
.hero h1 .grad{background:linear-gradient(95deg,#FFF3CE,var(--laguna-chiara));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{margin:18px auto 34px;max-width:560px;font-size:clamp(1rem,2vw,1.15rem);color:rgba(255,255,255,.92)}
/* barra di ricerca sulla linea d'acqua — elemento firma */
.searchbar{position:relative;z-index:80;display:flex;gap:8px;align-items:center;width:100%;max-width:1140px;min-width:0;margin:0 auto;padding:8px;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);border-radius:999px;
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 50px -12px rgba(7,37,58,.5)}
.search-field{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.searchbar input{flex:1;min-width:0;background:transparent;border:none;color:#fff;font-size:1.05rem;padding:12px 18px}
.searchbar input::placeholder{color:rgba(255,255,255,.75)}
.searchbar input:focus{outline:none}
/* tendina suggerimenti di ricerca (v0.4) */
.suggest-drop{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;
background:var(--card);border-radius:18px;box-shadow:0 22px 55px -14px rgba(7,37,58,.5);overflow:hidden;text-align:left}
.suggest-drop.on{display:block;animation:dropIn .18s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.suggest-item{display:flex;align-items:center;gap:10px;width:100%;padding:13px 18px;font-size:.95rem;
color:var(--inchiostro);text-align:left;border-bottom:1px solid var(--linea);transition:background .15s;cursor:pointer}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover{background:var(--sabbia)}
.suggest-item .kind{margin-left:auto;font-family:var(--font-data);font-size:.66rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--grigio);white-space:nowrap}
.suggest-sep{padding:8px 18px 4px;font-family:var(--font-data);font-size:.64rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--laguna-scura);background:var(--card)}
.search-clear{width:34px;height:34px;border-radius:50%;flex-shrink:0;font-size:.9rem;color:#fff;
background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:background .2s}
.search-clear:hover{background:rgba(255,255,255,.38)}
/* etichette ricerca e filtri globali (v0.5) */
.search-help{margin-top:12px;font-size:.82rem;color:rgba(255,255,255,.8)}
/* v0.11.60 — riquadro unico di ricerca (prima due box separati: "Ricerca
per località" e "Cerca per spiaggia"), con due tab per passare dall'una
all'altra: una sola visibile, un solo pulsante "Cerca". Stesso componente
.searchbar di sempre, nessuno stile duplicato per campo/pulsante. */
.search-card{width:100%;max-width:1140px;margin:0 auto;padding:16px 18px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md)}
.search-tabs{display:flex;gap:6px;margin-bottom:14px}
.search-tab{flex:1;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
background:transparent;color:#fff;font-family:var(--font-body);font-size:.85rem;font-weight:600;
cursor:pointer;transition:background .2s,color .2s}
.search-tab:hover{background:rgba(255,255,255,.14)}
.search-tab.active{background:var(--card);color:var(--inchiostro);border-color:transparent}
.search-pane .search-help{margin-top:8px}
.beach-search-warn{margin-top:8px;padding:8px 14px;border-radius:var(--r-sm);
background:rgba(255,193,69,.16);color:var(--sole);font-size:.84rem}
/* v0.11.60 — barra continenti/nazioni ridotta a un solo pulsante a tendina
("Ovunque ▾"), sostituisce le 6 tab per continente. Primo livello: elenco
continenti; secondo: griglia nazioni del continente scelto, con freccia
"‹" per tornare indietro senza perdere la selezione fatta. */
.cont-nav{position:relative;z-index:90;width:100%;max-width:1140px;min-width:0;margin:0 auto 10px;
text-align:center}
.cont-trigger{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:#fff;
font-family:var(--font-body);font-size:.88rem;font-weight:600;cursor:pointer;white-space:nowrap;
backdrop-filter:blur(10px);transition:background .2s}
.cont-trigger:hover{background:rgba(255,255,255,.26)}
.cont-trigger.open{background:var(--card);color:var(--inchiostro);border-color:transparent}
.cont-trigger-icon{font-size:.95em}
.cont-caret{display:inline-block;font-size:.7rem;transition:transform .2s}
.cont-trigger.open .cont-caret{transform:rotate(180deg)}
/* v0.11.62 — la tendina è larga quanto .cont-nav (stessa larghezza,
stesso max-width:1140px, di .search-card sotto): niente più un valore
fisso in px, si adatta come il box di ricerca a qualunque schermo. */
.cont-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:5;
width:100%;background:var(--card);border-radius:var(--r-sm);padding:14px;
box-shadow:0 22px 48px -16px rgba(7,37,58,.5);animation:dropIn .18s ease;text-align:left}
.cont-panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px}
.cont-opt{padding:8px 12px;border-radius:8px;background:transparent;color:var(--inchiostro);
font-family:var(--font-body);font-size:.86rem;text-align:left;cursor:pointer;transition:background .15s}
.cont-opt:hover{background:var(--sabbia)}
.cont-opt.sel{background:rgba(59,200,188,.22);color:var(--laguna-scura);font-weight:700}
.cont-opt.all{font-weight:700;color:var(--laguna-scura)}
.cont-list-reset{width:100%;margin-top:8px;border-top:1px solid var(--linea);border-radius:0;padding-top:10px}
/* v0.11.61 — in tema scuro, --card è quasi identico a --sabbia: la tendina
e la tab attiva risultavano più scuri dello sfondo intorno. --oceano è
già in palette ed è un blu più leggibile in quel contesto. */
html.dark .cont-panel,html.dark .cont-trigger.open,html.dark .search-tab.active{background:var(--oceano)}
html.dark .cont-opt:hover{background:rgba(255,255,255,.1)}
@media(max-width:900px){
.cont-panel-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}
@media(max-width:640px){
.cont-panel-grid{grid-template-columns:repeat(2,1fr)}
.search-tab{font-size:.8rem;padding:8px 10px}
}
.btn-geo-inline{width:46px;height:46px;border-radius:50%;flex-shrink:0;font-size:1.15rem;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;
display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s}
.btn-geo-inline:hover{background:rgba(255,255,255,.3);transform:scale(1.05)}
.tools-label{display:block;width:100%;font-family:var(--font-data);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--grigio);margin-bottom:2px;text-align:left} /* v0.11.4 — in linea con i contenuti sopra e sotto */
/* nome nell'alfabeto originale, sotto quello latino (v0.5) */
.name-orig{display:block;font-size:.85rem;color:var(--grigio);line-height:1.4}
.detail-hero .name-orig{color:var(--laguna-chiara);opacity:.9;font-size:.9rem;margin-top:2px}
/* servizi cliccabili + elenco puntuale (v0.5) */
.tag-btn{cursor:pointer;border:none}
.tag-btn:hover{filter:brightness(.94)}
.svc-list{list-style:none;margin-top:10px;background:var(--card);border-radius:var(--r-sm);padding:12px 16px;
box-shadow:0 4px 16px -8px rgba(7,37,58,.15);font-size:.9rem}
.svc-list li{padding:5px 0;border-bottom:1px solid var(--linea)}
.svc-list li:last-child{border-bottom:none}
.svc-item{width:100%;text-align:left;font-size:.9rem;padding:4px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--inchiostro)}
.svc-item .go{margin-left:auto;color:var(--laguna-scura);font-weight:700;font-size:.78rem;white-space:nowrap}
.svc-item:hover .go{text-decoration:underline}
.mb-marker.svc{background:linear-gradient(140deg,var(--laguna),var(--oceano))}
a.tag{text-decoration:none;cursor:pointer}
a.tag:hover{filter:brightness(.94)}
/* mini-mappa dei servizi dentro la scheda (v0.7) */
.svc-map-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 8px;
font-weight:700;font-size:.9rem;color:var(--inchiostro)}
.svc-map-head button{font-size:.78rem;font-weight:700;color:var(--laguna-scura);padding:6px 12px;
border-radius:999px;background:var(--sabbia);transition:background .2s}
.svc-map-head button:hover{background:#F1E4CB}
#svcMap{height:280px;border-radius:14px;border:3px solid var(--card);box-shadow:0 8px 24px -10px rgba(7,37,58,.3);
background:#CBE9E4;z-index:1}
.ig-link{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;
background:rgba(255,255,255,.12);color:#fff;transition:background .25s,transform .25s}
.ig-link:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}
/* v0.11 — "Aspetto: Chiaro/Scuro": cliccabile solo la parola finale */
.theme-toggle{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);
font-weight:600;font-size:.85rem}
.theme-cta{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25);color:#fff;font-family:var(--font-body);
font-weight:700;font-size:.85rem;cursor:pointer;transition:background .25s}
.theme-cta:hover{background:rgba(255,255,255,.24)}
.sub-h{font-family:var(--font-data);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--grigio);margin-bottom:8px}
/* sotto-schede "Zone della spiaggia" (v0.5) */
.zone-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.zone-tab{padding:8px 16px;border-radius:999px;font-weight:700;font-size:.85rem;background:var(--card);color:var(--grigio);
box-shadow:0 3px 10px -5px rgba(7,37,58,.2);transition:background .2s,color .2s}
.zone-tab.on{background:var(--abisso);color:#fff}
/* lightbox fotografie (v0.5) */
.lightbox{position:fixed;inset:0;z-index:6000;background:rgba(7,37,58,.94);display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
/* v0.11.57 — sostituita la singola con una pista a scorrimento
nativo (scroll-snap): stesso effetto della vista anteprima delle app
nell'App Store — si intravedono parzialmente la foto precedente e
quella successiva, si trascina liberamente e la foto più vicina si
aggancia al centro da sola. Niente più logica di swipe scritta a mano:
il browser gestisce trascinamento, inerzia e aggancio meglio di
qualunque simulazione via JavaScript. */
/* v0.11.59 — foto più vicine tra loro: meno spazio vuoto ai lati (padding
ridotto) e meno margine tra una diapositiva e l'altra (gap ridotto). La
larghezza non è più fissata a un tetto stretto (1100px): su schermi
larghi la foto centrale può crescere di più, lasciando comunque intravedere
le vicine ai lati, ma senza il grande vuoto di prima. */
.lb-track{display:flex;width:100%;height:100%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;align-items:center;scrollbar-width:none;padding:0 4vw;cursor:grab;user-select:none}
.lb-track.dragging-mouse{cursor:grabbing;scroll-snap-type:none} /* niente aggancio mentre si trascina col mouse: segue libero */
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 min(1500px,80vw);scroll-snap-align:center;display:flex;align-items:center;justify-content:center;height:100%}
.lb-slide img{max-width:100%;max-height:74vh;max-height:74dvh;border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
-webkit-user-drag:none} /* niente "trascinamento fantasma" nativo dell'immagine */
.lb-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.2rem;z-index:2}
.lb-close:hover{background:rgba(255,255,255,.3)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.6rem;line-height:1;z-index:2}
.lb-nav:hover{background:rgba(255,255,255,.32)}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-caption{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);max-width:min(860px,92vw);text-align:center;
color:rgba(255,255,255,.9);font-size:.82rem;background:rgba(7,37,58,.72);padding:10px 18px;border-radius:14px}
.lb-caption a{color:var(--laguna-chiara)}
.btn-search{display:flex;align-items:center;gap:8px;background:linear-gradient(120deg,var(--laguna),#0aa393);color:#fff;
font-weight:700;font-size:1rem;padding:13px 26px;border-radius:999px;white-space:nowrap;transition:transform .25s,box-shadow .25s}
.btn-search:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 26px -8px rgba(18,181,165,.8)}
.btn-geo{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:11px 22px;border-radius:999px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);color:#fff;font-weight:600;font-size:.95rem;
backdrop-filter:blur(10px);transition:background .25s,transform .25s}
.btn-geo:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}
.suggest{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.suggest span{font-size:.8rem;color:rgba(255,255,255,.75);align-self:center;font-family:var(--font-data);letter-spacing:.08em}
.chip{padding:7px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:.85rem;
background:rgba(255,255,255,.1);transition:background .25s,transform .25s}
.chip:hover{background:rgba(255,255,255,.25);transform:translateY(-2px)}
/* onde animate */
.waves{position:absolute;bottom:-2px;left:0;width:100%;height:150px;z-index:4;pointer-events:none}
.wave{position:absolute;bottom:0;left:0;width:200%;height:100%;background-repeat:repeat-x;background-position:bottom;background-size:50% 100%}
.wave-1{animation:waveMove 16s linear infinite;opacity:.55}
.wave-2{animation:waveMove 11s linear infinite reverse;opacity:.75;height:80%}
.wave-3{animation:waveMove 7s linear infinite;height:60%}
@keyframes waveMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scroll-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:6;color:rgba(255,255,255,.85);
font-size:1.4rem;animation:bob 2.2s ease-in-out infinite;text-decoration:none}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
/* ================= SEZIONE RISULTATI ================= */
/* WP:TEMPLATE → archive-spiaggia.php */
.results{max-width:1180px;margin:0 auto;padding:64px 20px 40px}
.results-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:10px}
.results-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,3vw,1.7rem)}
.results-head h2 small{display:block;font-family:var(--font-data);font-weight:400;font-size:.8rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--laguna-scura);margin-bottom:6px}
.status-line{font-size:.85rem;color:var(--grigio);margin-bottom:16px;min-height:1.3em}
.status-line.busy::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:50%;
border:2px solid var(--laguna-chiara);border-top-color:var(--laguna);animation:spin 1s linear infinite;vertical-align:-1px}
.results-tools{display:flex;gap:10px;flex-wrap:wrap}
.tool-input{padding:10px 16px;border:2px solid var(--campo-bordo);border-radius:999px;background:var(--card);color:var(--inchiostro);font-size:.9rem;min-width:200px}
/* v0.11.14 — pulsante "^": risale alla sezione precedente della pagina */
.back-up{position:fixed;right:16px;bottom:18px;z-index:2500;width:46px;height:46px;border-radius:50%;
background:var(--laguna-scura);color:#fff;border:none;font-size:1.35rem;line-height:1;font-weight:700;
box-shadow:0 8px 20px rgba(7,37,58,.35);cursor:pointer;display:none;align-items:center;justify-content:center;
padding:0;transition:transform .2s}
.back-up-glyph{display:block;transform:translateY(2px)} /* v0.11.16 — centratura ottica del glifo ^ */
.back-up.on{display:flex}
.back-up:hover{transform:translateY(-2px)}
html.dark .back-up{background:var(--laguna-chiara);color:var(--abisso)}
/* v0.18.0 — banner "stavi guardando X" per chi arriva da un link esterno
e chiude la scheda. Fisso in basso, sopra il resto ma sotto la scheda
stessa (z-index inferiore a .detail-overlay, così non la copre mai). */
.deeplink-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:2400;
max-width:min(520px,92vw);background:var(--abisso);color:#fff;border-radius:999px;
padding:10px 10px 10px 18px;display:none;align-items:center;gap:10px;
box-shadow:0 10px 28px -8px rgba(7,37,58,.5);font-size:.85rem}
/* v0.19.1 — FIX: la regola sopra imponeva display:flex in modo
incondizionato, che vinceva sull'attributo HTML "hidden" (stessa
specificità CSS, ma le regole del foglio di stile hanno la meglio su
quelle native del browser) — il banner restava sempre visibile, anche
al primo caricamento senza alcun link diretto. Ora si mostra SOLO con
questa classe dedicata, aggiunta via JS solo quando serve davvero. */
.deeplink-banner.shown{display:flex}
.deeplink-banner span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deeplink-reopen{background:var(--laguna);color:#07253A;border:none;border-radius:999px;
padding:8px 16px;font-weight:700;font-size:.82rem;cursor:pointer;white-space:nowrap}
.deeplink-x{background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:50%;
width:26px;height:26px;flex-shrink:0;cursor:pointer;font-size:.8rem}
@media (max-width:640px){.deeplink-banner{bottom:12px;padding:8px 8px 8px 14px}}
/* v0.11.13 — su mobile gli input sotto i 16px fanno "zoomare" iOS al focus:
16px reali eliminano lo scatto senza vietare lo zoom manuale all'utente */
@media (max-width:820px){
.tool-input,.tool-select,.searchbar input{font-size:16px}
}
.tool-select{padding:10px 16px;border:2px solid var(--campo-bordo);border-radius:999px;background:var(--card);color:var(--inchiostro);font-size:.9rem;font-family:var(--font-body)}
.results-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
@media(max-width:900px){.results-grid{grid-template-columns:1fr}}
.map-wrap{position:sticky;top:90px;z-index:1}
@media(max-width:900px){.map-wrap{position:sticky;top:72px;z-index:5;background:var(--schiuma);border-radius:0 0 18px 18px;box-shadow:0 10px 24px rgba(7,37,58,.18)}} /* v0.11.14 — mappa sticky su mobile: i risultati scorrono sotto senza perderla di vista (resta "positioned", quindi il fix v0.6 del suggerimento regge) */
/* v0.11.58 — il border-radius arrotonda solo l'ASPETTO del riquadro, non
ne cambia la forma rettangolare: negli angoli "tagliati via" dall'
arrotondamento non c'è davvero nulla di dipinto, e quel che scorre
esattamente lì sotto si vedeva (segnalato: card dei risultati visibili
negli angoli in basso). Un pannello pieno, rettangolare (non
arrotondato), dello stesso colore, dietro alla mappa vera, riempie
quegli angoli senza toccare l'aspetto arrotondato che si vede da sopra. */
.map-backer{display:none}
@media(max-width:900px){
.map-backer{display:block;position:absolute;inset:0;background:var(--schiuma);z-index:0}
#map{position:relative;z-index:1}
.area-btn, .map-hint{z-index:1} /* già position:absolute altrove: qui basta lo z-index */
}
#map{height:520px;border-radius:var(--r-lg);box-shadow:var(--ombra);border:4px solid var(--card);background:#CBE9E4}
@media(max-width:900px){#map{height:min(340px,40vh)}} /* v0.11.14 — più compatta da sticky */
.map-fallback{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--grigio);padding:30px}
/* pulsante "cerca in quest'area" — esplorazione libera */
.area-btn{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:800;display:none;
background:var(--abisso);color:#fff;font-weight:700;font-size:.88rem;padding:10px 20px;border-radius:999px;
box-shadow:0 8px 24px -6px rgba(7,37,58,.6);transition:transform .2s,background .2s;white-space:nowrap}
.area-btn:hover{background:var(--oceano);transform:translateX(-50%) translateY(-2px)}
.area-btn.on{display:block;animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.map-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;
background:rgba(255,255,255,.92);color:var(--grigio);font-size:.75rem;padding:6px 14px;border-radius:999px;
box-shadow:0 4px 14px -4px rgba(7,37,58,.3);white-space:nowrap;pointer-events:none}
/* -------- Lista risultati (ridisegnata v0.3 per leggibilità) -------- */
/* v0.11.59 — l'altezza desktop non è più affidata al CSS (due tentativi
con align-items:stretch + min-height:0 non hanno dato il risultato
corretto, verificabile solo dal vivo e non da qui): ora è impostata da
JavaScript (syncResultsListHeight), che misura l'altezza reale della
mappa e la applica qui esplicitamente. Su mobile non si applica (le
regole sotto per max-width:900px azzerano tutto: max-height:none,
overflow:visible). */
.beach-list{display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding:4px 8px 20px 2px}
.beach-list::-webkit-scrollbar{width:8px}
.beach-list::-webkit-scrollbar-thumb{background:var(--laguna-chiara);border-radius:99px}
.beach-list > *{flex-shrink:0} /* fix v0.4: senza, il contenitore flex comprimeva le card sovrapponendole */
/* v0.12.1 — sfondo fotografico molto tenue: la stessa foto sfocata usata
nell'intestazione della scheda (v. .detail-hero più sotto), qui dietro
un gradiente che parte opaco a sinistra (dove sta il testo, per non
comprometterne la leggibilità) e lascia intravedere la foto verso
destra. Il gradiente usa i colori --card del tema (chiaro/scuro),
quindi la card resta coerente in entrambi i temi senza duplicare le
regole sotto per il tema scuro. */
.beach-card{background:
linear-gradient(90deg,var(--card) 42%,rgba(var(--card-rgb),.62) 72%,rgba(var(--card-rgb),.22) 100%),
url('assets/img/bg-hero-blur.jpg') center 55%/cover no-repeat;
border-radius:var(--r-md);padding:16px 18px;box-shadow:0 6px 22px -10px rgba(7,37,58,.18);
border-left:6px solid var(--laguna);cursor:pointer;transition:transform .25s,box-shadow .25s;
display:flex;flex-direction:column;gap:6px;text-align:left;flex-shrink:0}
.beach-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -12px rgba(7,37,58,.3)}
/* v0.16.0 — sfondo fotografico specifico per tipo di superficie: prima
tutte le card usavano la stessa foto (sabbia), anche per spiagge di
rocce o ciottoli. Il bordo colorato a sinistra esisteva già per
superficie; qui si aggiunge solo la foto di sfondo corrispondente,
con lo stesso trattamento (ritaglio basso, sfocatura leggera,
dissolvenza sinistra→destra) già scelto per la sabbia — tre round di
confronto dal vivo su un'anteprima con dati finti, poi la scelta tra
ciottoli tondeggianti e pietre spigolose per il gruppo "sassi"
(spigolose: più distinguibili dalla superficie "mista"). */
.beach-card.surface-sabbia{border-left-color:var(--sole)}
.beach-card.surface-sassi{border-left-color:var(--grigio);
background-image:linear-gradient(90deg,var(--card) 42%,rgba(var(--card-rgb),.62) 72%,rgba(var(--card-rgb),.22) 100%),
url('assets/img/bg-sassi.jpg')}
.beach-card.surface-rocce{border-left-color:var(--oceano);
background-image:linear-gradient(90deg,var(--card) 42%,rgba(var(--card-rgb),.62) 72%,rgba(var(--card-rgb),.22) 100%),
url('assets/img/bg-rocce.jpg')}
.beach-card.surface-mista{border-left-color:var(--tramonto);
background-image:linear-gradient(90deg,var(--card) 42%,rgba(var(--card-rgb),.62) 72%,rgba(var(--card-rgb),.22) 100%),
url('assets/img/bg-mista.jpg')}
/* v0.17.0 — sfondo dedicato per superficie NON CENSITA (nessun dato,
diverso concettualmente da "mista": lì il dato c'è e dice che è
mista). Classe aggiuntiva, non sostituisce surface-mista: non tocca la
classificazione esistente né i filtri, cambia solo la foto quando
presente insieme a surface-mista. */
.beach-card.surface-mista.unknown-surface{
background-image:linear-gradient(90deg,var(--card) 42%,rgba(var(--card-rgb),.62) 72%,rgba(var(--card-rgb),.22) 100%),
url('assets/img/bg-sconosciuta.jpg')}
.beach-card h3{font-family:var(--font-body);font-weight:700;font-size:1.1rem;line-height:1.35;color:var(--inchiostro);
overflow-wrap:anywhere}
.beach-card .dist{font-family:var(--font-data);font-size:.78rem;font-weight:500;color:var(--laguna-scura);
letter-spacing:.06em;text-transform:uppercase}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tag{font-size:.8rem;font-weight:600;line-height:1.4;padding:4px 11px;border-radius:999px;background:var(--sabbia);color:var(--inchiostro)}
.tag.ok{background:#DDF6F0;color:#075E54}
.tag.pay{background:#FFE9DC;color:#B03A20}
.tag.warn{background:#FFF3D6;color:#7A5500}
.tag.star{background:linear-gradient(120deg,#FFF3CE,#FFE29A);color:#7A5500}
.empty-state,.loading-state{background:var(--card);border:2px dashed var(--campo-bordo);border-radius:var(--r-md);padding:36px 24px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
text-align:center;color:var(--inchiostro);font-size:.95rem;line-height:1.6}
.empty-state strong,.loading-state strong{color:var(--inchiostro)}
.loading-state .spin{width:38px;height:38px;margin:0 auto 6px;border-radius:50%;
border:4px solid var(--laguna-chiara);border-top-color:var(--laguna);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ================= PANNELLO DETTAGLIO ================= */
/* WP:TEMPLATE → single-spiaggia.php */
.detail-overlay{position:fixed;inset:0;background:rgba(7,37,58,.55);backdrop-filter:blur(6px);z-index:4000;
display:none;align-items:flex-end;justify-content:center}
.detail-overlay.open{display:flex}
/* fix v0.4: con la scheda aperta blocco lo scorrimento della pagina
e nascondo la barra di navigazione (su mobile restava sopra ai livelli) */
/* v0.11.54 — position:fixed, non solo overflow:hidden: vedi commento nel JS
(lockBodyScroll). "top" viene impostato via JS con lo scroll negativo. */
body.modal-open{position:fixed;width:100%;overflow:hidden}
body.modal-open .nav{opacity:0;pointer-events:none;transition:opacity .2s}
.detail-panel{background:var(--schiuma);width:min(880px,100%);max-height:92vh;max-height:92dvh;overflow-y:auto;
-webkit-overflow-scrolling:touch;border-radius:28px 28px 0 0;animation:slideUp .45s cubic-bezier(.2,.9,.3,1)}
/* v0.11.51 — durante il trascinamento niente transizione (deve seguire il
dito senza ritardo); al rilascio, se torna al suo posto, una piccola
transizione la fa "scattare" indietro in modo morbido. */
.detail-panel.dragging{transition:none}
.detail-panel.snap-back{transition:transform .25s cubic-bezier(.2,.9,.3,1)}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
/* v0.12.1 — stessa foto sfocata delle card (v. .beach-card più sopra), qui
sotto un gradiente diagonale che riusa gli stessi due colori del
gradiente originale (--oceano, --abisso): opaco sul lato sinistro/alto
dove sta il titolo, più trasparente verso destra per lasciare
intravedere la foto. */
.detail-hero{background:
linear-gradient(100deg,rgba(7,37,58,.88) 30%,rgba(11,79,108,.55) 65%,rgba(11,79,108,.18) 100%),
url('assets/img/bg-hero-blur.jpg') center 40%/cover no-repeat;
color:#fff;padding:30px 30px 24px;
border-radius:28px 28px 0 0;position:relative;overflow:hidden}
/* v0.16.0 — stesse tre varianti di sfondo delle card, qui applicate
all'intestazione della scheda (dal vivo e nelle pagine statiche): prima
ogni spiaggia mostrava sempre la foto di sabbia, anche se di rocce. */
.detail-hero.surface-sassi{background:
linear-gradient(100deg,rgba(7,37,58,.88) 30%,rgba(11,79,108,.55) 65%,rgba(11,79,108,.18) 100%),
url('assets/img/bg-sassi.jpg') center 40%/cover no-repeat}
.detail-hero.surface-rocce{background:
linear-gradient(100deg,rgba(7,37,58,.88) 30%,rgba(11,79,108,.55) 65%,rgba(11,79,108,.18) 100%),
url('assets/img/bg-rocce.jpg') center 40%/cover no-repeat}
.detail-hero.surface-mista{background:
linear-gradient(100deg,rgba(7,37,58,.88) 30%,rgba(11,79,108,.55) 65%,rgba(11,79,108,.18) 100%),
url('assets/img/bg-mista.jpg') center 40%/cover no-repeat}
.detail-hero.surface-mista.unknown-surface{background:
linear-gradient(100deg,rgba(7,37,58,.88) 30%,rgba(11,79,108,.55) 65%,rgba(11,79,108,.18) 100%),
url('assets/img/bg-sconosciuta.jpg') center 40%/cover no-repeat}
.detail-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle,rgba(255,193,69,.35),transparent 70%)}
.detail-hero h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,3vw,1.7rem);max-width:85%}
.detail-hero .coords{font-family:var(--font-data);font-size:.78rem;color:var(--laguna-chiara);letter-spacing:.12em;margin-top:6px}
.btn-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);
color:#fff;font-size:1.1rem;line-height:1;transition:background .2s;z-index:2}
.btn-close:hover{background:rgba(255,255,255,.3)}
.detail-body{padding:26px 30px 40px;display:flex;flex-direction:column;gap:26px}
@media(max-width:640px){.detail-body{padding:20px 16px 36px}.detail-hero{padding:24px 18px 20px}}
.d-section h4{font-family:var(--font-data);text-transform:uppercase;letter-spacing:.22em;font-size:.75rem;
color:var(--tramonto);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.d-section h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#EAD9C0,transparent)}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.info-box{background:var(--card);border-radius:var(--r-sm);padding:14px 16px;box-shadow:0 4px 16px -8px rgba(7,37,58,.15)}
.info-box .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grigio);font-family:var(--font-data)}
.info-box .val{font-weight:700;font-size:1.02rem;margin-top:2px}
.info-box .note{font-size:.78rem;color:var(--grigio);margin-top:2px}
/* v0.11.10 — link nelle cardine (es. sito dello stabilimento): leggibili in entrambi i temi */
.info-box .val a{color:var(--laguna-scura);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
html.dark .info-box .val a{color:var(--laguna-chiara)}
/* v0.11.12 — spunta "verificata" nelle schede del database Million Beach */
.mb-verified{color:var(--laguna-scura);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.9em;white-space:nowrap}
html.dark .mb-verified{color:var(--laguna-chiara)}
.photo-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.photo-strip a{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;display:block;background:linear-gradient(140deg,var(--laguna-chiara),var(--oceano))}
.photo-strip img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.photo-strip a:hover img{transform:scale(1.07)}
.meteo-live{background:linear-gradient(135deg,#0B4F6C,#07253A);color:#fff;border-radius:var(--r-md);padding:20px;
display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
.meteo-live .m-item .lbl{font-family:var(--font-data);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laguna-chiara)}
.meteo-live .m-item .val{font-size:1.25rem;font-weight:700;font-family:var(--font-data)}
.meteo-live .m-item .note{font-size:.75rem;color:rgba(255,255,255,.75)}
.season-band{background:var(--sabbia);border-radius:var(--r-sm);padding:14px 18px;font-size:.92rem}
.osm-note{font-size:.75rem;color:var(--grigio)}
.osm-note a{color:var(--oceano)}
/* -------- Recensioni demo (utente registrato) -------- */
.review-item{background:var(--card);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:10px;box-shadow:0 4px 16px -8px rgba(7,37,58,.12)}
.review-item .who{font-weight:700;font-size:.9rem}
.review-item .stars{color:var(--sole);letter-spacing:2px}
.review-item p{font-size:.9rem;margin-top:4px}
.review-form{background:var(--card);border:2px solid var(--laguna-chiara);border-radius:var(--r-md);padding:18px;margin-top:12px}
.review-form h5{font-family:var(--font-data);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--laguna-scura);margin-bottom:10px}
.review-form select,.review-form textarea{width:100%;padding:10px 14px;border:2px solid var(--campo-bordo);border-radius:var(--r-sm);font-size:.9rem;margin-bottom:10px;background:var(--card);color:var(--inchiostro)}
.review-form textarea{min-height:80px;resize:vertical}
.review-form .btn-search{padding:10px 20px;font-size:.9rem}
/* v2.23.0 — "leggi tutto" delle recensioni, pulsante voto, link posizione
servizio: nuovi elementi, stesso linguaggio visivo già in uso altrove
(colori/raggi delle variabili esistenti, nessuna nuova palette). */
.rev-toggle{display:inline-block;margin-top:4px;font-size:.82rem;font-weight:600;color:var(--laguna-scura)}
.vote-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vote-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;font-weight:600;font-size:.78rem;
border:1px solid var(--campo-bordo);background:transparent;color:var(--laguna-scura);cursor:pointer;text-decoration:none}
.vote-btn.on{background:var(--laguna-chiara,#DDF6F0);border-color:var(--laguna-scura);color:var(--laguna-scura)}
.vote-btn.disabled{opacity:.55;cursor:default;border-style:dashed}
.vote-count{font-size:.78rem;color:var(--grigio)}
.cbSvcPin{text-decoration:none}
/* ================= ROADMAP COMMUNITY ================= */
/* WP:TEMPLATE → front-page.php (sezione community) */
.community{background:linear-gradient(180deg,var(--schiuma),var(--sabbia));padding:70px 20px 90px;margin-top:30px}
.community-inner{max-width:1080px;margin:0 auto;text-align:center}
.community h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.1rem);margin-bottom:8px}
.community p.lead{color:var(--grigio);max-width:560px;margin:0 auto 36px}
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;text-align:left}
.road-card{background:var(--card);border:2px dashed #E2C99F;border-radius:var(--r-md);padding:24px;position:relative;transition:transform .3s}
.road-card:hover{transform:translateY(-5px)}
.road-card .soon{position:absolute;top:14px;right:14px;font-family:var(--font-data);font-size:.66rem;letter-spacing:.16em;
text-transform:uppercase;background:var(--tramonto);color:#fff;padding:4px 10px;border-radius:999px}
.road-card .soon.demo{background:var(--laguna)}
.road-card .ico{font-size:1.8rem;margin-bottom:10px}
.road-card h3{font-family:var(--font-display);font-weight:500;font-size:1rem;margin-bottom:6px}
.road-card p{font-size:.88rem;color:var(--grigio)}
/* ================= MODALE AUTH ================= */
.auth-overlay{position:fixed;inset:0;background:rgba(7,37,58,.6);backdrop-filter:blur(6px);z-index:4500;
display:none;align-items:center;justify-content:center;padding:20px}
.auth-overlay.open{display:flex}
.auth-card{background:var(--card);border-radius:var(--r-lg);padding:34px;max-width:440px;width:100%;position:relative;
animation:slideUp .35s cubic-bezier(.2,.9,.3,1)}
.auth-card h3{font-family:var(--font-display);font-weight:700;margin-bottom:6px}
.auth-card p{font-size:.9rem;color:var(--grigio);margin-bottom:18px}
.auth-card input{width:100%;padding:12px 16px;border:2px solid var(--campo-bordo);background:var(--card);color:var(--inchiostro);border-radius:var(--r-sm);margin-bottom:10px;font-size:.95rem}
.auth-tabs{display:flex;gap:6px;margin-bottom:18px}
.auth-tab{flex:1;padding:10px;border-radius:999px;font-weight:700;font-size:.88rem;background:var(--sabbia);color:var(--grigio);transition:background .2s}
.auth-tab.on{background:var(--abisso);color:#fff}
.auth-badge{display:inline-block;font-family:var(--font-data);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
background:var(--sole);color:var(--abisso);padding:4px 12px;border-radius:999px;margin-bottom:14px}
.auth-hint{background:var(--sabbia);border-radius:var(--r-sm);padding:12px 16px;font-size:.82rem;margin-bottom:14px}
.auth-hint code{font-family:var(--font-data);background:#fff;padding:2px 8px;border-radius:6px}
.auth-error{color:#B03A20;font-size:.85rem;margin-bottom:10px;display:none}
.auth-error.on{display:block}
.btn-login{width:100%;justify-content:center}
.btn-disabled{opacity:.55;cursor:not-allowed}
/* ================= FOOTER ================= */
/* WP:TEMPLATE → footer.php */
footer{background:var(--abisso);color:rgba(255,255,255,.8);padding:46px 20px 30px;position:relative;overflow:hidden}
.footer-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr auto;
gap:32px;align-items:start}
/* v0.11.2 — identità a sinistra, contatto al centro, social e aspetto a destra */
.footer-brand{display:flex;flex-direction:column;gap:10px}
.footer-claim{font-size:.85rem;margin:0;color:rgba(255,255,255,.7);max-width:320px}
.footer-mid{display:flex;align-items:flex-start;justify-content:center;padding-top:4px}
.footer-contact{max-width:440px;font-size:.85rem;text-align:center}
.footer-end{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media(max-width:900px){
.footer-inner{grid-template-columns:1fr 1fr;gap:24px}
.footer-mid{justify-content:flex-start;grid-column:1/-1}
.footer-contact{text-align:left}
.footer-end{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
}
@media(max-width:640px){
.footer-inner{grid-template-columns:1fr;gap:18px}
.footer-claim,.footer-contact{max-width:100%}
/* "Aspetto" allineato a destra, icona IG a sinistra */
.footer-end{flex-direction:row;align-items:center;justify-content:space-between}
}
footer .brand-name{font-size:1.1rem}
footer small{display:block;margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
text-align:center;font-size:.72rem;color:rgba(255,255,255,.45);width:100%}
footer a{color:var(--laguna-chiara)}
/* v0.11.40 — "Preferenze cookie" deve apparire come gli altri link del
piè di pagina, pur essendo un