/* =====================================================================
   MILLION BEACH ORBITA · pagine delle spiagge (quelle a cui si arriva da
   Google) e indice delle spiagge — stile Orbita, solo CSS.
   Tutto sotto body.mbo-page (classe messa da functions.php solo su queste
   pagine): homepage e resto del sito non cambiano.
   Come la homepage: la scena (notte, bordo della Terra, stelle) è la stessa
   in chiaro e in scuro; cambiano le superfici (barra, pannelli, piè di
   pagina). Niente 3D qui: la pagina resta leggera per Google e i telefoni.
   ===================================================================== */
body.mbo-page{
  --p-ink:#f2f6f8; --p-dim:rgba(242,246,248,.70); --p-faint:rgba(242,246,248,.48);
  --p-line:rgba(255,255,255,.12); --p-line2:rgba(255,255,255,.07);
  --p-glass:rgba(9,16,25,.84); --p-glass-rgb:9,16,25; --p-bar:rgba(14,22,32,.46);
  --p-tile:rgba(255,255,255,.045); --p-tile2:rgba(255,255,255,.08);
  --p-pill:rgba(242,246,248,.94); --p-pill-ink:#0b1a26; --p-sole:#FFC145; --p-lag:#8CEADF;
  --p-foot:rgba(4,9,16,.42); --p-shadow:0 40px 90px -36px rgba(0,0,0,.9);
  --p-hero-img:var(--mbo-img-sabbia,none);
  /* le variabili del tema padre dentro i pannelli: stessa tinta del vetro */
  --card:#123047; --card-rgb:18,48,71; --inchiostro:#EAF3F5; --grigio:#9FB4C0; --linea:rgba(255,255,255,.1);
  --campo-bordo:rgba(255,255,255,.18); --sabbia:rgba(255,255,255,.07); --laguna-scura:#5AD6C6; --laguna-chiara:#8CEADF; --schiuma:#010307;
  background:#010307;color:var(--p-ink);min-height:100vh;min-height:100svh;isolation:isolate}
html:has(body.mbo-page){background:#010307}
html:not(.dark) body.mbo-page{
  --p-ink:#10283a; --p-dim:rgba(16,40,58,.72); --p-faint:rgba(16,40,58,.52);
  --p-line:rgba(16,40,58,.12); --p-line2:rgba(16,40,58,.07);
  --p-glass:rgba(250,249,245,.93); --p-glass-rgb:250,249,245; --p-bar:rgba(250,249,245,.84);
  --p-tile:rgba(16,40,58,.035); --p-tile2:rgba(16,40,58,.065);
  --p-pill:#10283a; --p-pill-ink:#f6f8f8; --p-sole:#A86C00; --p-lag:#0A7C6F;
  --p-foot:rgba(250,249,245,.84); --p-shadow:0 40px 90px -36px rgba(0,0,0,.85);
  --card:#ffffff; --card-rgb:255,255,255; --inchiostro:#12303F; --grigio:#5E7482; --linea:rgba(16,40,58,.1);
  --campo-bordo:rgba(16,40,58,.16); --sabbia:#F4EEE2; --laguna-scura:#0A7C6F; --laguna-chiara:#12B5A5}

/* ---------- la scena: notte, stelle, bordo della Terra con l'alba ---------- */
body.mbo-page::before,body.mbo-page::after{content:"";position:fixed;pointer-events:none;z-index:-1}   /* dietro a tutto il contenuto */
/* stelle: pochi punti, fermi */
body.mbo-page::before{inset:0;opacity:.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 27% 8%,#cfe0ff 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 58% 12%,#ffe9c9 50%,transparent 51%),
    radial-gradient(1px 1px at 73% 26%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 88% 9%,#dfe9ff 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 41%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 94% 37%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 19% 52%,#e8f0ff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 81% 48%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 35% 3%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 66% 35%,#fff 50%,transparent 51%)}
/* la Terra: un grande disco in basso, il bordo acceso dal sole che sorge */
body.mbo-page::after{left:50%;top:58vh;width:max(220vw,1900px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,#020812 92%,#06172a 97%,#0e2f4c 99.2%,rgba(120,190,255,.0) 100%);
  box-shadow:0 0 0 1px rgba(170,215,255,.35),0 -6px 40px rgba(110,180,255,.28),0 -30px 120px rgba(80,150,230,.16)}
/* un accenno dell'alba sul bordo, al centro */
body.mbo-page main::before{content:"";position:fixed;left:50%;top:calc(58vh - 70px);width:min(900px,120vw);height:140px;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,193,69,.20),rgba(255,140,60,.07) 45%,transparent 70%)}

/* ---------- barra in alto e piè di pagina (come la homepage) ---------- */
body.mbo-page .nav{background:var(--p-bar);border-color:var(--p-line);color:var(--p-ink);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%)}
html:not(.dark) body.mbo-page .nav{box-shadow:0 26px 60px -30px rgba(0,0,0,.55)}
html:not(.dark) body.mbo-page .nav .brand{color:var(--p-ink)}
html:not(.dark) body.mbo-page .nav .brand-name em{color:var(--p-lag)}
html:not(.dark) body.mbo-page .nav .brand-logo{filter:none}
html:not(.dark) body.mbo-page .nav-icon-btn{background:rgba(16,40,58,.06);color:var(--p-ink)}
html:not(.dark) body.mbo-page .nav-icon-btn:hover{background:rgba(16,40,58,.1)}
html:not(.dark) body.mbo-page .nav-icon-btn[aria-expanded="true"]{background:var(--p-pill);color:var(--p-pill-ink)}
html:not(.dark) body.mbo-page .nav-drop{background:#fbfaf6;border:1px solid var(--p-line)}
body.mbo-page footer.mb-foot{z-index:7;background:var(--p-foot);border-top-color:var(--p-line);color:var(--p-faint);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body.mbo-page footer.mb-foot a,body.mbo-page footer.mb-foot .footer-link-btn{color:var(--p-dim)}
body.mbo-page footer.mb-foot a:hover,body.mbo-page footer.mb-foot .ig-link{color:var(--p-ink)}
/* il piè di pagina è fisso: in fondo si lascia lo spazio, così l'ultima riga non ci finisce sotto */
body.mbo-page main.results{padding-bottom:calc(var(--mb-foot-h,44px) + 56px) !important}

/* =====================================================================
   PAGINA DI UNA SPIAGGIA — un pannello in vetro come la scheda (veste A)
   ===================================================================== */
body.mbo-page.single-spiaggia main.results{max-width:780px;padding-top:112px !important}
body.mbo-page.single-spiaggia article{background:var(--p-glass);border:1px solid var(--p-line);border-radius:28px;overflow:hidden;box-shadow:var(--p-shadow);
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);color:var(--p-ink)}
body.mbo-page .detail-hero.surface-sassi{--p-hero-img:var(--mbo-img-sassi,none)}
body.mbo-page .detail-hero.surface-rocce{--p-hero-img:var(--mbo-img-rocce,none)}
body.mbo-page .detail-hero.surface-mista{--p-hero-img:var(--mbo-img-mista,none)}
body.mbo-page .detail-hero.surface-mista.unknown-surface{--p-hero-img:var(--mbo-img-sconosciuta,none)}
body.mbo-page article .detail-hero{border-radius:0 !important;min-height:clamp(230px,34vw,320px);display:flex;flex-direction:column;justify-content:flex-end;padding:30px 34px 24px;color:var(--p-ink);
  background-image:linear-gradient(180deg,rgba(var(--p-glass-rgb),0) 0%,rgba(var(--p-glass-rgb),.3) 45%,rgba(var(--p-glass-rgb),.97) 100%),var(--p-hero-img);background-size:cover;background-position:center 45%}
body.mbo-page article .detail-hero::after{display:none}
body.mbo-page article .detail-hero h2{order:2;font-family:'Unbounded',var(--font-display);font-weight:300;font-size:clamp(1.75rem,4.2vw,2.7rem);line-height:1.06;letter-spacing:-.035em;max-width:none;text-wrap:balance;color:var(--p-ink)}
/* luogo sopra il nome, come un'etichetta; coordinate sotto, con la piccola Terra che gira */
body.mbo-page article .detail-hero .coords{font-family:var(--font-data);letter-spacing:.16em;font-size:.72rem;color:var(--p-dim);margin:0}
body.mbo-page article .detail-hero .coords:nth-of-type(1){order:1;margin-bottom:10px;color:var(--p-sole);letter-spacing:.22em}
body.mbo-page article .detail-hero .coords:nth-of-type(2){order:3;opacity:1 !important;margin-top:12px;display:flex;align-items:center;gap:10px;letter-spacing:.08em}
body.mbo-page article .detail-hero .coords:nth-of-type(2)::before{content:"";width:22px;height:22px;flex-shrink:0;border-radius:50%;
  background:rgba(255,255,255,.06) var(--mbo-img-mini,none) 0 50%/auto 100% repeat-x;border:1px solid var(--p-line);box-shadow:inset -5px -3px 7px rgba(1,3,7,.6);animation:mboPageSpin 6s linear infinite}
@keyframes mboPageSpin{to{background-position:-44px 50%}}
@media (prefers-reduced-motion:reduce){ body.mbo-page article .detail-hero .coords:nth-of-type(2)::before{animation:none} }
body.mbo-page article .detail-body{padding:24px 34px 34px;gap:26px;color:var(--p-ink)}
body.mbo-page article .detail-body > div:not(.tagrow){font-size:1.06rem;line-height:1.7;color:var(--p-ink)}
body.mbo-page article .detail-body p{margin:0 0 12px}
body.mbo-page article .detail-body p:last-child{margin-bottom:0;color:var(--p-dim);font-size:.96rem}
body.mbo-page article .detail-body img{border-radius:18px !important}
body.mbo-page .tagrow{gap:8px}
body.mbo-page article .tag{background:var(--p-tile2);color:var(--p-ink);border:1px solid transparent;font-size:.8rem;padding:5px 12px}
body.mbo-page article .tag.ok{background:rgba(90,214,198,.14);color:var(--p-lag)}
body.mbo-page article .tag.warn{background:rgba(255,193,69,.14);color:var(--p-sole)}
body.mbo-page article .tag.pay{background:rgba(255,140,110,.14);color:#FFB39F}
html:not(.dark) body.mbo-page article .tag.ok{background:#DDF6F0;color:#075E54}
html:not(.dark) body.mbo-page article .tag.warn{background:#FFF3D6;color:#7A5500}
html:not(.dark) body.mbo-page article .tag.pay{background:#FFE9DC;color:#B03A20}
body.mbo-page .d-section{padding:18px 20px 20px;border-radius:18px;background:var(--p-tile);border:1px solid var(--p-line2)}
body.mbo-page .d-section h4{font-family:var(--font-data);color:var(--p-faint);letter-spacing:.2em;font-size:.68rem;font-weight:500;gap:10px;margin-bottom:14px}
body.mbo-page .d-section h4::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--p-sole);box-shadow:0 0 10px var(--p-sole);flex-shrink:0}
body.mbo-page .d-section h4::after{background:linear-gradient(90deg,var(--p-line),transparent)}
/* il pulsante verso la scheda completa: la pillola di Orbita */
body.mbo-page article a.cta{background:var(--p-pill) !important;color:var(--p-pill-ink) !important;padding:14px 24px !important;font-size:.98rem;box-shadow:0 14px 34px -16px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.23,1,.32,1),filter .25s}
body.mbo-page article a.cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
body.mbo-page article a.cta:active{transform:scale(.97)}
body.mbo-page article .detail-body > p:last-of-type{margin-top:4px !important}

/* =====================================================================
   INDICE DELLE SPIAGGE — come l'elenco dei risultati della homepage
   ===================================================================== */
body.mbo-page.post-type-archive-spiaggia main.results{max-width:1180px;padding-top:112px !important}
body.mbo-page.post-type-archive-spiaggia main.results > *{position:relative}
body.mbo-page.post-type-archive-spiaggia .results-head{margin-bottom:18px}
/* il titolo sta sopra la scena (notte): resta bianco anche in chiaro, come le scritte sopra la Terra in homepage */
body.mbo-page.post-type-archive-spiaggia .results-head h2{font-family:'Unbounded',var(--font-display);font-weight:300;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.035em;color:#f2f6f8;line-height:1.05;text-shadow:0 2px 30px rgba(0,0,0,.5)}
body.mbo-page.post-type-archive-spiaggia .results-head h2 small{color:#FFC145;letter-spacing:.22em;font-size:.7rem;margin-bottom:10px}
body.mbo-page.post-type-archive-spiaggia main.results > form{display:inline-flex !important;padding:6px 8px 6px 16px;border-radius:999px;background:var(--p-bar);border:1px solid var(--p-line);color:var(--p-dim);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);margin-bottom:22px !important}
body.mbo-page.post-type-archive-spiaggia main.results > form select{appearance:none;-webkit-appearance:none;border:0;border-radius:999px;padding:7px 28px 7px 14px;font:inherit;font-weight:700;cursor:pointer;
  background:var(--p-pill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23889' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;color:var(--p-pill-ink)}
body.mbo-page.post-type-archive-spiaggia .beach-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:14px;overflow:visible;padding:0}
body.mbo-page.post-type-archive-spiaggia .beach-card{border-radius:20px;padding:18px 20px 16px;border:1px solid var(--p-line2);box-shadow:var(--p-shadow);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .3s cubic-bezier(.23,1,.32,1),border-color .25s}
body.mbo-page.post-type-archive-spiaggia .beach-card:hover{transform:translateY(-3px);border-color:var(--p-line)}
body.mbo-page.post-type-archive-spiaggia .beach-card h3{font-family:'Unbounded',var(--font-display);font-weight:300;font-size:1.25rem;letter-spacing:-.02em;margin-bottom:8px}
body.mbo-page.post-type-archive-spiaggia .beach-card p{font-size:.9rem;line-height:1.5;color:var(--grigio);max-width:70%;margin-top:10px}
body.mbo-page.post-type-archive-spiaggia .beach-card .tag{font-size:.74rem}
body.mbo-page .navigation.pagination{margin-top:26px}
body.mbo-page .navigation.pagination .page-numbers{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;padding:0 14px;border-radius:999px;margin:0 3px;
  background:var(--p-bar);border:1px solid var(--p-line);color:var(--p-ink);text-decoration:none;font-weight:700;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.mbo-page .navigation.pagination .page-numbers.current{background:var(--p-pill);color:var(--p-pill-ink);border-color:transparent}
body.mbo-page .empty-state{background:var(--p-glass);border-color:var(--p-line);color:var(--p-ink)}

/* =====================================================================
   v1.5.1 — COOKIE POLICY: lo stesso pannello di vetro, testo da leggere
   ===================================================================== */
body.mbo-page.mb-cookie-policy-page main.results{max-width:820px;padding-top:112px !important}
body.mbo-page.mb-cookie-policy-page article.detail-body{background:var(--p-glass) !important;color:var(--p-ink);border:1px solid var(--p-line);border-radius:28px !important;box-shadow:var(--p-shadow);
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);padding:30px 34px 34px !important;gap:22px}
body.mbo-page.mb-cookie-policy-page article h1{font-family:'Unbounded',var(--font-display) !important;font-weight:300;font-size:clamp(1.7rem,4vw,2.5rem) !important;letter-spacing:-.035em;line-height:1.08;color:var(--p-ink)}
body.mbo-page.mb-cookie-policy-page article p{line-height:1.65;color:var(--p-ink)}
body.mbo-page.mb-cookie-policy-page article .osm-note{color:var(--p-faint)}
body.mbo-page.mb-cookie-policy-page article a{color:var(--p-lag)}
body.mbo-page.mb-cookie-policy-page article .info-grid{gap:10px}
body.mbo-page.mb-cookie-policy-page article .info-box{background:var(--p-tile2);border:1px solid var(--p-line2);border-radius:14px;box-shadow:none}
body.mbo-page.mb-cookie-policy-page article .info-box .lbl{font-family:var(--font-data);color:var(--p-sole);letter-spacing:.08em}
body.mbo-page.mb-cookie-policy-page article .info-box .val{color:var(--p-ink)}
body.mbo-page.mb-cookie-policy-page article .info-box .note{color:var(--p-dim)}
body.mbo-page.mb-cookie-policy-page article button,body.mbo-page.mb-cookie-policy-page article .btn-auth{border-radius:999px}
/* "← Indietro" in alto: la pillola di Orbita, piccola */
body.mbo-page .mb-back{background:var(--p-tile2);color:var(--p-ink);border:1px solid var(--p-line);font-family:var(--font-body)}
body.mbo-page .mb-back:hover{background:var(--p-pill);color:var(--p-pill-ink);border-color:transparent}
body.mbo-page.mb-cookie-policy-page article .mb-back{color:var(--p-ink)}

/* ---------- telefono ---------- */
@media (max-width:640px){
  body.mbo-page::after{top:64vh}
  body.mbo-page.single-spiaggia main.results{padding:96px 12px calc(var(--mb-foot-h,44px) + 56px) !important}   /* v1.5.1 — anche sul telefono lo spazio in fondo per il piè di pagina */
  body.mbo-page.single-spiaggia article{border-radius:24px}
  body.mbo-page article .detail-hero{padding:24px 20px 20px;min-height:230px}
  body.mbo-page article .detail-body{padding:20px 20px 26px;gap:22px}
  body.mbo-page article .detail-body > div:not(.tagrow){font-size:1rem}
  body.mbo-page .d-section{padding:16px}
  body.mbo-page article a.cta{width:100%;justify-content:center}
  body.mbo-page.post-type-archive-spiaggia main.results{padding:96px 12px calc(var(--mb-foot-h,44px) + 56px) !important}   /* v1.5.1 — anche sul telefono lo spazio in fondo per il piè di pagina */
  body.mbo-page.post-type-archive-spiaggia .beach-card p{max-width:100%}
  body.mbo-page.mb-cookie-policy-page main.results{padding:96px 12px calc(var(--mb-foot-h,44px) + 56px) !important}   /* v1.5.1 — anche sul telefono lo spazio in fondo per il piè di pagina */
  body.mbo-page.mb-cookie-policy-page article.detail-body{padding:22px 20px 26px !important;border-radius:24px !important}
}

/* v1.5.12 — logo nella barra in alto (richiesta di Enrico): sul tema scuro l'immagine "logo-light" del tema padre (cerchio
   interno trasparente, prende il colore della barra); sul tema chiaro resta "logo-dark", come prima. L'immagine della
   pagina si sposta fuori dal riquadro e al suo posto si vede l'altra, come sfondo. */
html.dark body.mb-orbit .nav .brand-logo,html.dark body.mbo-page .nav .brand-logo{object-position:0 -999px;background:var(--mbo-img-logo-light) center/contain no-repeat}