:root{
  --red:#D60000;
  --red-700:#B10000;
  --accent:#1B7A3D;
  --accent-light:#E9FFF0;
  --bg:#ffffff;
  --text:#222222;
  --muted:#555555;
  --light:#f6f6f7;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-lg:0 20px 40px rgba(0,0,0,.12);
  --radius:14px;
  --transition:.25s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:"Lato",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--red); text-decoration:none; transition:color var(--transition), opacity var(--transition)}
a:hover{color:var(--red-700)}
.container{width:min(1100px, 92%); margin-inline:auto}
h1,h2,h3,h4{
  font-family:"Montserrat",sans-serif; line-height:1.2; margin:0 0 .5rem;
  letter-spacing:-.02em;
}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.6rem,2.4vw,2.2rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.4rem)}
p{margin:0 0 1rem}
.sm{font-size:.9rem; color:var(--muted)}
.mt{margin-top:1rem}
.rounded{border-radius:var(--radius)}
.shadow{box-shadow:var(--shadow)}
.bg-light{background:var(--light)}
.section{padding:64px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.link-more{font-weight:700; transition:transform var(--transition)}
.link-more:hover{transform:translateX(4px)}
.grid{display:grid; gap:2rem}
.grid.two{grid-template-columns:1.15fr .85fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width: 900px){
  .grid.two,.grid.three{grid-template-columns:1fr}
  .section{padding:40px 0}
}

/* Buttons */
.btn{
  display:inline-block; padding:.7rem 1.1rem; border-radius:999px; font-weight:700;
  transition:all var(--transition); cursor:pointer; border:2px solid transparent;
}
.btn-lg{padding:1rem 1.4rem}
.btn-primary{background:var(--red); color:#fff; border-color:var(--red)}
.btn-primary:hover{background:var(--red-700); border-color:var(--red-700); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(214,0,0,.3)}
.btn-secondary{background:#fff; color:var(--red); border:2px solid var(--red)}
.btn-secondary:hover{background:#FFECEC; color:var(--red); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn-whatsapp{background:#25D366; color:#fff; border:2px solid #25D366}
.btn-whatsapp:hover{background:#1DA851; border-color:#1DA851; color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn-outline{border:2px solid #fff; color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.15); color:#fff; transform:translateY(-2px)}

/* Header / Nav */
/* Skip-link accessibilita: nascosto finche non riceve focus da tastiera */
.skip-link{position:absolute; left:.5rem; top:-3rem; z-index:60; background:var(--red); color:#fff; padding:.6rem 1rem; border-radius:6px; font-weight:700; text-decoration:none; transition:top var(--transition)}
.skip-link:focus{top:.5rem; outline:2px solid #fff; outline-offset:2px}
.site-header{position:sticky; top:0; inset-inline:0; background:#fff; z-index:40; box-shadow:var(--shadow-sm); transition:box-shadow var(--transition)}
.nav-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--text)}
.brand:hover{color:var(--text); opacity:1}
.logo{height:42px; width:auto}
.brand-text{white-space:nowrap}
.main-nav{display:flex; align-items:center; gap:1rem}
.main-nav ul{display:flex; align-items:center; list-style:none; padding:0; margin:0; gap:.6rem}
.main-nav a{padding:.5rem .7rem; border-radius:var(--radius); transition:all var(--transition)}
.main-nav a:hover{background:#FFECEC; color:var(--red); opacity:1}
.main-nav a.active{background:#FFECEC; color:var(--red); font-weight:800}
.nav-toggle{display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:transform var(--transition)}
.nav-toggle:hover{transform:scale(1.1)}

/* Mobile nav */
@media (max-width: 900px){
  .nav-toggle{display:block}
  .main-nav{position:fixed; right:0; top:0; width:min(380px, 85%); height:100vh; height:100dvh; background:#fff; box-shadow:var(--shadow-lg); padding:1.5rem; flex-direction:column; align-items:flex-start; gap:1rem; transform:translateX(110%); transition:transform .3s ease; z-index:100; -webkit-overflow-scrolling:touch; overflow-y:auto}
  .main-nav.open{transform:translateX(0)}
  .main-nav ul{flex-direction:column; align-items:flex-start; gap:.2rem; width:100%}
  .main-nav ul a{display:block; width:100%; padding:.8rem 1rem; font-size:1.05rem}
  .main-nav .btn{align-self:stretch; text-align:center; margin-top:.5rem}
  .nav-close{display:block; align-self:flex-end; background:none; border:none; font-size:1.6rem; cursor:pointer; padding:.4rem; color:var(--text); transition:transform var(--transition)}
  .nav-close:hover{transform:rotate(90deg)}
}
.nav-close{display:none}

/* Nav backdrop */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.nav-backdrop.visible{opacity:1; visibility:visible}

/* Hero */
.hero{position:relative; height:70vh; min-height:520px; display:grid; place-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(214,0,0,.7), rgba(0,0,0,.25))}
.hero-content{position:relative; color:#fff; text-align:center}
.hero .accent{color:#fff; background:#D60000; padding:.1rem .5rem; border-radius:var(--radius); display:inline-block}
.subtitle{font-size:1.25rem; opacity:.95; margin-top:.6rem}
.hero-actions{margin-top:1.2rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.hero-events{margin-top:1rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.hero-events .btn{font-size:.9rem; padding:.6rem 1.2rem}

/* Sub hero */
.sub-hero{background:linear-gradient(180deg,#FFECEC,#fff); padding:36px 0; border-bottom:1px solid #f0f0f0}

/* Cards */
.cards{display:grid; gap:1.2rem; align-items:start}
.cards.three{grid-template-columns:repeat(3,1fr)}
@media (max-width: 900px){ .cards.three{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .cards.three{grid-template-columns:1fr} }
.card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.card img{width:100%; height:auto; display:block}
.card-body{padding:1.2rem}
.card h3{margin-bottom:.4rem}
.card .meta{font-size:.875rem; color:var(--muted); margin-bottom:.4rem}
.card .card-actions{margin-top:auto; padding:0 1.2rem 1.2rem}

/* Event badge */
.event-badge{
  display:inline-block; padding:.2rem .6rem; border-radius:999px;
  font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:.4rem;
}
.event-badge.torneo{background:#FFF3E0; color:#E65100}
.event-badge.sociale{background:#E8F5E9; color:#2E7D32}
.event-badge.coppa{background:#E3F2FD; color:#1565C0}
.event-badge.default{background:#F5F5F7; color:#555}

/* Features */
.features .feature{
  padding:1.4rem; border:1px solid #eee; border-radius:var(--radius); background:#fff;
  transition:transform var(--transition), box-shadow var(--transition);
  text-align:center;
}
.features .feature:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.feature-icon{
  width:48px; height:48px; margin:0 auto .8rem; display:flex; align-items:center; justify-content:center;
}
.feature-icon svg{width:32px; height:32px}

/* Staff */
.staff .card img{aspect-ratio:1/1; object-fit:cover}

/* Group photo */
.group-photo{margin-top:1.4rem}

/* Contact */
.contact-list{padding-left:1rem}
.contact-list li{margin:.3rem 0}
.contact-form{margin-top:.6rem}
.form-row{display:flex; flex-direction:column; gap:.3rem; margin-bottom:.8rem}
.form-row label{font-weight:700; font-size:.95rem}
.form-row label .required{color:var(--red); margin-left:2px}
input,textarea{
  padding:.75rem .9rem; border:1px solid #ddd; border-radius:var(--radius); font:inherit;
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input:focus,textarea:focus{
  outline:none; border-color:var(--red);
  box-shadow:0 0 0 3px rgba(214,0,0,.1);
  background:#FFFAFA;
}
input.invalid,textarea.invalid{border-color:#c62828; box-shadow:0 0 0 3px rgba(198,40,40,.1)}
input.valid,textarea.valid{border-color:var(--accent); box-shadow:0 0 0 3px rgba(27,122,61,.1)}
/* I radio/checkbox nativi non devono ereditare lo stile dei campi di testo:
   padding/bordo/box-shadow + alone su :focus facevano "ingrandire" e flickerare il radio al click.
   Il focus resta visibile solo da tastiera (:focus-visible) con un outline che non causa riflusso. */
input[type="radio"],input[type="checkbox"]{padding:0; border:0; border-radius:0; box-shadow:none; background:none; transition:none}
input[type="radio"]:focus,input[type="checkbox"]:focus{box-shadow:none; background:none}
input[type="radio"]:focus-visible,input[type="checkbox"]:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.checkbox{display:flex; align-items:flex-start; gap:.6rem}
.form-feedback{margin-top:.8rem; padding:.8rem 1rem; border-radius:var(--radius); font-weight:700}
.form-feedback.success{background:#e8f5e9; color:#2e7d32}
.form-feedback.error{background:#ffeaea; color:#c62828}
.form-feedback.error a{color:#c62828; text-decoration:underline}
button:disabled{opacity:.6; cursor:wait}

/* Map */
.map-wrap{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}

/* CTA blocco */
.cta{text-align:center}
.cta p{max-width:700px; margin:0 auto 1rem}

/* Footer */
.site-footer{background:#111; color:#ddd; margin-top:28px}
.footer-grid{display:grid; gap:2rem; grid-template-columns:2fr 1fr 1fr; padding:36px 0}
.logo-footer{height:46px; width:auto}
.foot-brand{font-weight:800; margin:.3rem 0 0}
.foot-list{list-style:none; padding:0; margin:0}
.foot-list li{margin:.3rem 0}
.foot-list a{color:#fff; transition:color var(--transition)}
.foot-list a:hover{color:var(--red); opacity:1}
.foot-bottom{border-top:1px solid #222; text-align:center; padding:14px 0; color:#aaa}
@media (max-width: 900px){
  .footer-grid{grid-template-columns:1fr}
}

/* Floating CTA */
.btn-float{
  position:fixed; right:16px; bottom:16px; z-index:50;
  background:var(--red); color:#fff; padding:.9rem 1.1rem; border-radius:999px;
  box-shadow:0 12px 24px rgba(214,0,0,.3); font-weight:800;
  display:none;
  transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn-float:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 16px 32px rgba(214,0,0,.4); color:#fff}
@media (max-width: 900px){ .btn-float{display:inline-block} }

/* Back to top */
.btn-top{
  position:fixed; left:16px; bottom:16px; z-index:50;
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--text); color:#fff; font-size:1.2rem;
  cursor:pointer; display:grid; place-items:center;
  box-shadow:var(--shadow-sm);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all var(--transition);
}
.btn-top.visible{opacity:1; visibility:visible; transform:translateY(0)}
.btn-top:hover{background:var(--red); transform:translateY(-2px)}

/* WhatsApp community banner */
.wa-banner{
  background:linear-gradient(135deg,#075E54,#128C7E);
  border-radius:var(--radius); padding:1.4rem 1.6rem;
  display:flex; align-items:center; gap:1.2rem;
  color:#fff; box-shadow:var(--shadow);
  transition:transform var(--transition), box-shadow var(--transition);
}
.wa-banner:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); color:#fff}
.wa-banner-icon{
  width:52px; height:52px; flex-shrink:0;
  background:rgba(255,255,255,.15); border-radius:50%;
  display:grid; place-items:center;
}
.wa-banner-icon svg{width:28px; height:28px; fill:#fff}
.wa-banner-text{flex:1}
.wa-banner-text h3{color:#fff; margin:0 0 .2rem; font-size:1.1rem}
.wa-banner-text p{margin:0; opacity:.9; font-size:.95rem}
.wa-banner .btn{
  background:#25D366; color:#fff; border-color:#25D366;
  white-space:nowrap; flex-shrink:0;
}
.wa-banner .btn:hover{background:#1DA851; border-color:#1DA851; color:#fff}
@media (max-width: 640px){
  .wa-banner{flex-direction:column; text-align:center}
  .wa-banner .btn{align-self:stretch; text-align:center}
}

/* WhatsApp in footer */
.foot-wa{
  display:flex; align-items:center; gap:.5rem;
  margin-top:.6rem; padding:.5rem .8rem;
  background:rgba(37,211,102,.1); border-radius:999px;
  width:fit-content;
  transition:background var(--transition);
}
.foot-wa:hover{background:rgba(37,211,102,.2)}
.foot-wa svg{width:18px; height:18px; fill:#25D366; flex-shrink:0}
.foot-wa a{color:#25D366; font-weight:700; font-size:.9rem}
.foot-wa a:hover{color:#1DA851; opacity:1}

/* Social links in footer */
.foot-social{display:flex; gap:.6rem; margin-top:.8rem}
.foot-social a{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1);
  transition:background var(--transition), transform var(--transition);
}
.foot-social a:hover{transform:translateY(-2px)}
.foot-social a svg{width:18px; height:18px; fill:#fff}
.foot-social .social-fb:hover{background:#1877F2}
.foot-social .social-ig:hover{background:#E4405F}

/* Utilities */
.two > :first-child{order:1}
.two > :last-child{order:2}
.rounded-shadow{border-radius:var(--radius); box-shadow:var(--shadow)}

/* Filters */
.filters{display:flex; align-items:center; gap:.5rem}
#filterAnno{padding:.5rem .7rem; border:1px solid #ddd; border-radius:var(--radius); font:inherit; cursor:pointer}

/* Cookie banner */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:60; background:#111; color:#fff; padding:16px; box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.cookie-banner .container{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cookie-banner p{margin:0; max-width:800px; font-size:.95rem}
.cookie-actions{display:flex; gap:.6rem}
.btn-sm{padding:.45rem .8rem; font-size:.9rem}
.consent-gate{border:2px dashed #ccc; border-radius:var(--radius); padding:16px; display:grid; place-items:center; min-height:200px; text-align:center}
.gate-msg{color:#666}

/* Foto Gallery */
.gallery-grid{
  columns:3; column-gap:16px;
}
@media (max-width: 900px){ .gallery-grid{columns:2} }
@media (max-width: 640px){ .gallery-grid{columns:1} }
.gallery-item{
  margin:0 0 16px; break-inside:avoid;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform var(--transition), box-shadow var(--transition);
}
.gallery-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.gallery-link{display:block; position:relative; overflow:hidden;}
.gallery-item img{
  width:100%;
  display:block;
  transition:transform .3s ease, filter .3s ease;
}
.gallery-item figcaption{
  padding:10px 14px;
}
.filters .input{
  min-width:240px;
  padding:10px 12px;
  border:1px solid #d0d0d0;
  border-radius:var(--radius);
}
@media (max-width: 640px){
  .filters .input{min-width:0; width:100%}
  .filters{flex-direction:column; align-items:stretch}
}

/* Foto Gallery - data */
.gallery-title{font-weight:700;font-size:1.05rem;margin-bottom:2px;}
.gallery-cap{font-size:.9rem;color:var(--muted);}
.gallery-date{margin-top:4px;font-size:.875rem;color:var(--muted);}

/* Foto Gallery - lens (hover) */
.gallery-link{cursor:zoom-in;}
.gallery-link::after{
  content:'';
  position:absolute; right:10px; top:10px;
  width:34px; height:34px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center/18px no-repeat;
  border-radius:999px;
  opacity:0; transform:scale(.9);
  transition:opacity .25s ease, transform .25s ease;
}
.gallery-link:hover::after{opacity:1; transform:scale(1);}
.gallery-link:hover img{
  transform:scale(1.06);
  filter:brightness(1.03);
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.88);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lightbox.active{opacity:1; visibility:visible}
.lightbox img{
  max-width:90vw; max-height:85vh;
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  object-fit:contain;
}
.lightbox-close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none;
  color:#fff; font-size:1.5rem; cursor:pointer;
  display:grid; place-items:center;
  transition:background var(--transition);
}
.lightbox-close:hover{background:rgba(255,255,255,.3)}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none;
  color:#fff; font-size:1.4rem; cursor:pointer;
  display:grid; place-items:center;
  transition:background var(--transition);
}
.lightbox-nav:hover{background:rgba(255,255,255,.3)}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
.lightbox-caption{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:#fff; background:rgba(0,0,0,.5); padding:.4rem 1rem;
  border-radius:999px; font-size:.9rem; white-space:nowrap;
  max-width:80vw; overflow:hidden; text-overflow:ellipsis;
}

/* Skeleton loaders */
.skeleton{
  background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius);
}
.skeleton-card{height:280px; border-radius:var(--radius)}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Scroll animations */
.fade-in{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-in.visible{opacity:1; transform:translateY(0)}
.fade-in-left{
  opacity:0; transform:translateX(-24px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-in-left.visible{opacity:1; transform:translateX(0)}
.fade-in-right{
  opacity:0; transform:translateX(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-in-right.visible{opacity:1; transform:translateX(0)}

/* Stagger children */
.stagger > *:nth-child(1){transition-delay:.05s}
.stagger > *:nth-child(2){transition-delay:.1s}
.stagger > *:nth-child(3){transition-delay:.15s}
.stagger > *:nth-child(4){transition-delay:.2s}
.stagger > *:nth-child(5){transition-delay:.25s}
.stagger > *:nth-child(6){transition-delay:.3s}

/* === METEO (Home) === */
.weather-wrap { padding: 0; }
.weather-grid { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items:start; }
@media (max-width: 900px){ .weather-grid{ grid-template-columns:1fr; } }
.iframe-box{ max-width:420px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.iframe-box iframe{ width:100%; height:520px; border:0; }
.weather-copy{ background:#fff; border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); }
.weather-status{ display:flex; gap:.6rem; flex-wrap:wrap; }
.badge{display:inline-block; padding:.3rem .7rem; border-radius:999px; font-size:.875rem; font-weight:700}
.badge.good{ background:#E9FFF0; color:#0B6B2A; }
.badge.bad{ background:#FFF2F2; color:#9B1212; }
.badge.neutral{ background:#F5F5F7; color:#333; }

/* Toast notification */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#111; color:#fff; padding:.8rem 1.4rem;
  border-radius:999px; font-weight:700; font-size:.95rem;
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden;
  transition:all .3s ease;
  z-index:100;
}
.toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.toast.success{background:var(--accent)}
.toast.error{background:#c62828}

/* ======================== */
/* THEME TOGGLE             */
/* ======================== */
.theme-toggle{
  background:none; border:none; cursor:pointer; padding:.4rem;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition); color:var(--text);
}
.theme-toggle:hover{background:#FFECEC; color:var(--red); transform:scale(1.1)}
.theme-toggle svg{width:20px; height:20px; fill:currentColor}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* ======================== */
/* DARK MODE                */
/* ======================== */
[data-theme="dark"]{
  --bg:#1a1a1a;
  --text:#e8e8e8;
  --muted:#999;
  --light:#242424;
  --red:#FF6B6B;
  --red-700:#FF5252;
  --shadow-sm:0 2px 8px rgba(0,0,0,.2);
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --shadow-lg:0 20px 40px rgba(0,0,0,.35);
}
[data-theme="dark"] body{background:var(--bg); color:var(--text)}
[data-theme="dark"] .site-header{background:#1a1a1a; box-shadow:0 2px 14px rgba(0,0,0,.3)}
[data-theme="dark"] .brand{color:var(--text)}
[data-theme="dark"] .main-nav a:hover{background:#2a2020}
[data-theme="dark"] .main-nav a.active{background:#2a2020; color:var(--red)}
[data-theme="dark"] .card{background:#242424}
[data-theme="dark"] .features .feature{background:#242424; border-color:#333}
[data-theme="dark"] .hero .accent{background:var(--red)}
[data-theme="dark"] .sub-hero{background:linear-gradient(180deg,#2a1a1a,var(--bg)); border-color:#333}
[data-theme="dark"] .bg-light{background:var(--light)}
[data-theme="dark"] .btn-secondary{background:#242424; color:var(--red); border-color:var(--red)}
[data-theme="dark"] .btn-secondary:hover{background:#2a2020; color:var(--red)}
[data-theme="dark"] input,[data-theme="dark"] textarea{background:#242424; color:var(--text); border-color:#444}
[data-theme="dark"] input:focus,[data-theme="dark"] textarea:focus{background:#2a2020; border-color:var(--red)}
[data-theme="dark"] .site-footer{background:#0a0a0a}
[data-theme="dark"] .gallery-item{background:#242424}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#2a2a2a 25%,#333 50%,#2a2a2a 75%); background-size:200% 100%}
[data-theme="dark"] .weather-copy{background:#242424}
[data-theme="dark"] .iframe-box{box-shadow:var(--shadow)}
[data-theme="dark"] .consent-gate{border-color:#444}
[data-theme="dark"] .gate-msg{color:var(--muted)}
[data-theme="dark"] .cookie-banner{background:#0a0a0a}
[data-theme="dark"] #filterAnno{background:#242424; color:var(--text); border-color:#444}
[data-theme="dark"] .lightbox{background:rgba(0,0,0,.92)}
[data-theme="dark"] .btn-top{background:#e8e8e8; color:#111}
[data-theme="dark"] .btn-top:hover{background:var(--red); color:#fff}
[data-theme="dark"] .theme-toggle:hover{background:#2a2020}
@media (max-width: 900px){
  [data-theme="dark"] .main-nav{background:#1a1a1a; box-shadow:var(--shadow-lg)}
}

/* ======================== */
/* REDUCED MOTION           */
/* ======================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .fade-in,.fade-in-left,.fade-in-right{opacity:1; transform:none}
  .card:hover,.features .feature:hover,.gallery-item:hover{transform:none}
  .btn-primary:hover,.btn-secondary:hover,.btn-outline:hover,.btn-float:hover{transform:none}
}

/* ======================== */
/* PRENOTA CAMPO            */
/* ======================== */

.prenota-main { padding: 32px 0 64px; }
.prenota-hero { text-align: center; margin-bottom: 24px; }
.prenota-hero h1 { margin-bottom: 8px; }
.prenota-subtitle { color: var(--muted); font-size: 1.05rem; }

.prenota-step {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  margin-bottom: 24px;
}
.prenota-step h2 {
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.prenota-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
}
.prenota-step-success { background: var(--accent-light); border: 1px solid var(--accent); }
.prenota-step-success h2 { color: var(--accent); }

.prenota-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prenota-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid #e5e5e5;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  font-size: 1rem;
}
.prenota-radio:hover { border-color: var(--red); }
.prenota-radio input { width: 18px; height: 18px; accent-color: var(--red); }
/* "Bolder" via text-shadow: evidenzia la scelta senza cambiare la larghezza del testo
   (font-weight reale faceva riflusso/andare a capo -> i radio sembravano muoversi). */
.prenota-radio input:checked + span { text-shadow: .35px 0 0 currentColor, -.35px 0 0 currentColor; }
.prenota-radio:has(input:checked) { border-color: var(--red); background: #FFECEC; }

/* Checkbox group (cerca-avversario) */
.prenota-checkbox-group {
  border: 1px solid #e5e5e5;
  border-radius: var(--radius);
  padding: 12px 16px 16px;
  margin: 8px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.prenota-checkbox-group legend {
  font-weight: 700;
  padding: 0 8px;
  color: var(--text);
}
.prenota-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid #ddd;
  border-radius: 999px;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  transition: all var(--transition);
  user-select: none;
}
.prenota-checkbox:hover { border-color: var(--red); color: var(--red); }
.prenota-checkbox input { width: 16px; height: 16px; accent-color: var(--red); }
.prenota-checkbox:has(input:checked) { border-color: var(--red); background: #FFECEC; color: var(--red); }
.prenota-checkbox small { color: var(--muted); font-weight: 400; margin-left: 4px; }

.prenota-hint { color: var(--muted); font-size: .95rem; margin-top: 12px; }

/* Date tabs */
.prenota-date-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  margin-bottom: 16px;
  scrollbar-width: thin;
}
.prenota-date-tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1.5px solid #ddd;
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  transition: all var(--transition);
}
.prenota-date-tab:hover { border-color: var(--red); color: var(--red); }
.prenota-date-tab.active { background: var(--red); color: #fff; border-color: var(--red); }
.prenota-date-tab { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.prenota-date-meteo { font-size: .875rem; font-weight: 600; opacity: .85; margin-top: 3px; white-space: nowrap; }

/* Calendar grid */
.prenota-calendar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .prenota-calendar { grid-template-columns: 1fr; }
}

.prenota-court-col h3 {
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: var(--red);
  text-align: center;
}
.prenota-court-sub {
  font-size: .875rem;
  font-weight: 400;
  color: var(--muted);
}

.prenota-court-closed {
  padding: 20px 12px;
  background: #333;
  color: #fff;
  border-radius: var(--radius);
  text-align: center;
  font-weight: 700;
}
.prenota-court-closed .prenota-court-sub { color: #ccc; }
.prenota-court-empty {
  padding: 16px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
  font-size: .95rem;
}

.prenota-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  margin-bottom: 6px;
  background: #E9FFF0;
  border: 1.5px solid #BFE9CD;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  transition: all .15s ease;
}
.prenota-slot:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
}
.prenota-slot:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.prenota-slot-meteo {
  font-size: .875rem;
  font-weight: 500;
  opacity: .85;
  white-space: nowrap;
}

/* === "Le mie disponibilità" (cerca-avversario): griglia toggle ============ */
.disp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
/* lo slot riusa .prenota-slot; stato OFF = grigio, stato DISP = verde pieno */
.disp-slot { position: relative; justify-content: center; gap: 6px; padding: 12px 14px; white-space: nowrap; }
.disp-slot .prenota-slot-time { white-space: nowrap; }
.disp-slot.is-off {
  background: #fff;
  border-color: #ddd;
  color: var(--text);
}
.disp-slot.is-off:hover {
  background: var(--accent-light);
  border-color: #BFE9CD;
  color: var(--accent);
  transform: none;
}
.disp-slot.is-disp {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.disp-slot.is-disp:hover { background: #15622f; border-color: #15622f; color: #fff; transform: none; }
.disp-slot.is-passato {
  background: #f1f1f1;
  border-color: #e3e3e3;
  color: #aaa;
  cursor: default;
}
.disp-slot.is-passato:hover { background: #f1f1f1; color: #aaa; transform: none; }
.disp-mark { font-weight: 700; }
.disp-mark:empty { display: none; }
.disp-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  display: inline-block; animation: disp-spin .7s linear infinite;
}
@keyframes disp-spin { to { transform: rotate(360deg); } }
.disp-saving { text-align: center; color: var(--accent); font-weight: 600; font-style: italic; }
.disp-legenda-verde { color: var(--accent); font-weight: 700; }

/* === Card "Cerco un avversario" =========================================== */
.cerca-card { display: flex; flex-direction: column; gap: 14px; }
.cerca-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; }
.cerca-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cerca-toggle-track {
  position: relative; flex: 0 0 auto; width: 48px; height: 26px;
  background: #ccc; border-radius: 999px; transition: background var(--transition);
}
.cerca-toggle-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.cerca-toggle input:checked + .cerca-toggle-track { background: var(--red); }
.cerca-toggle input:checked + .cerca-toggle-track .cerca-toggle-thumb { transform: translateX(22px); }
.cerca-toggle input:focus-visible + .cerca-toggle-track { outline: 2px solid var(--red); outline-offset: 2px; }
.cerca-field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.cerca-field select, .cerca-field textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px;
  border: 1.5px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 1rem;
}
.cerca-field select:focus, .cerca-field textarea:focus { outline: none; border-color: var(--red); }

.prenota-loading, .prenota-no-slots {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 24px;
}
.prenota-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--red);
  font-weight: 700;
  padding: 16px;
}

/* Slot summary + form */
.prenota-slot-summary {
  background: #FFECEC;
  border-left: 4px solid var(--red);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Moduli con etichetta sopra e campo sotto: la classe .form-stack va sul <form>.
   Restano fuori le etichette-contenitore di checkbox e radio (.tess-check,
   .prenota-radio, .prenota-checkbox), che stanno accanto al loro controllo. */
.form-stack label:not(.tess-check):not(.prenota-radio):not(.prenota-checkbox) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: .95rem;
}
.form-stack input:not([type="checkbox"]):not([type="radio"]),
.form-stack textarea {
  padding: 10px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  color: var(--text);
  transition: border-color var(--transition);
}
.form-stack input:focus,
.form-stack textarea:focus {
  outline: none;
  border-color: var(--red);
}
.prenota-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .prenota-form-row { grid-template-columns: 1fr; gap: 0; }
}
.prenota-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Dark theme overrides */
[data-theme="dark"] .prenota-step { background: #242424; }
[data-theme="dark"] .prenota-radio { border-color: #3a3a3a; }
[data-theme="dark"] .prenota-radio:hover { border-color: var(--red); }
[data-theme="dark"] .prenota-radio:has(input:checked) { border-color: var(--red); background: #2a2020; }
[data-theme="dark"] .prenota-date-tab { background: #242424; border-color: #3a3a3a; color: var(--text); }
[data-theme="dark"] .prenota-date-tab:hover { border-color: var(--red); color: var(--red); }
[data-theme="dark"] .prenota-date-tab.active { background: var(--red); color: #fff; }
[data-theme="dark"] .prenota-slot { background: #1a3a25; border-color: #2d5a3a; color: #9be0b0; }
[data-theme="dark"] .prenota-slot:hover { background: var(--accent); color: #fff; }
[data-theme="dark"] .prenota-court-closed { background: #1a1a1a; }
[data-theme="dark"] .prenota-slot-summary { background: #2a2020; border-color: var(--red); }
[data-theme="dark"] .disp-slot.is-off { background: #1a1a1a; border-color: #3a3a3a; color: var(--text); }
[data-theme="dark"] .disp-slot.is-off:hover { background: #1a3a25; border-color: #2d5a3a; color: #9be0b0; }
[data-theme="dark"] .disp-slot.is-passato { background: #161616; border-color: #2a2a2a; color: #666; }
[data-theme="dark"] .cerca-toggle-track { background: #4a4a4a; }
[data-theme="dark"] .cerca-field select, [data-theme="dark"] .cerca-field textarea { background: #1a1a1a; border-color: #3a3a3a; color: var(--text); }
[data-theme="dark"] .form-stack input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .form-stack textarea {
  background: #1a1a1a; border-color: #3a3a3a; color: var(--text);
}
[data-theme="dark"] .form-stack input:focus,
[data-theme="dark"] .form-stack textarea:focus { background: #242424; }
[data-theme="dark"] .prenota-checkbox-group { border-color: #3a3a3a; }
[data-theme="dark"] .prenota-checkbox { background: #1a1a1a; border-color: #3a3a3a; }
[data-theme="dark"] .prenota-checkbox:has(input:checked) { background: #3a1a1f; }
[data-theme="dark"] .prenota-step-success { background: #1a3a25; border-color: var(--accent); }

/* === Tesseramento === */
.tess-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tess-check { display: flex; align-items: flex-start; gap: .6rem; margin: .5rem 0; line-height: 1.4; }
.tess-check input[type="checkbox"] { margin-top: .2rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.tess-price { color: var(--accent); font-weight: 700; white-space: nowrap; }
.tess-totale { font-size: 1.15rem; font-weight: 800; margin: .8rem 0 0; }
.tess-genitore { border: 1px solid var(--border, #ddd); border-radius: 10px; padding: .8rem 1rem; margin: .8rem 0; background: rgba(0,0,0,.02); }
#tessForm h2, #certForm h2 { margin-top: 1.6rem; }
.tess-grp-label { font-weight: 700; margin: 1rem 0 .4rem; font-size: .95rem; }
.tess-totale { color: var(--red); }
[data-theme="dark"] .tess-genitore { background: #1a1a1a; border-color: #3a3a3a; }

/* === Menu dropdown "Servizi" === */
.has-submenu{position:relative}
.submenu-toggle{padding:.5rem .7rem; border-radius:var(--radius); background:none; border:none; cursor:pointer; font:inherit; color:inherit; display:inline-flex; align-items:center; gap:.35rem; transition:all var(--transition)}
.submenu-toggle:hover{background:#FFECEC; color:var(--red)}
.has-submenu .caret{font-size:.875em; line-height:1; transition:transform var(--transition)}
.main-nav .submenu{list-style:none; margin:0; padding:.4rem; position:absolute; top:100%; left:0; min-width:230px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:var(--radius); box-shadow:var(--shadow-lg); display:none; flex-direction:column; gap:.15rem; z-index:120}
.has-submenu.open .submenu{display:flex}
.has-submenu.open .caret{transform:rotate(180deg)}
.submenu a{display:block; white-space:nowrap; width:100%}
.submenu a.wa-link{color:#25D366; font-weight:700}
.submenu a.wa-link:hover{background:#25D366; color:#fff}

/* === Prenota: contatori giocatori + prezzo === */
.prenota-giocatori { margin: 1rem 0; }
.prenota-giocatori-title { font-size: 1rem; margin: 0 0 .5rem; }
.prenota-counter-row { display: flex; align-items: center; justify-content: space-between; margin: .35rem 0; }
.prenota-counter-label { font-weight: 700; }
.prenota-stepper { display: inline-flex; align-items: center; gap: .5rem; }
.prenota-step-btn { width: 36px; height: 36px; border: none; border-radius: 8px; background: var(--red); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.prenota-step-btn:disabled { opacity: .4; cursor: default; }
.prenota-step-val { min-width: 28px; text-align: center; font-weight: 700; }
.prenota-giocatori-hint { font-size: 1rem; color: var(--muted); margin: .25rem 0; }
.prenota-nome-giocatore { display: block; margin-top: .5rem; }
.prenota-prezzo { margin-top: .8rem; padding: .8rem 1rem; background: var(--light); border-radius: 10px; }
.prenota-prezzo-riga { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin: .25rem 0; font-size: .95rem; }
.prenota-prezzo-tot { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(0,0,0,.12); font-weight: 800; font-size: 1.05rem; }
.prenota-prezzo-tot span:last-child { color: var(--red); }
.prenota-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: .25rem; padding: 0; border: none; border-radius: 50%; background: var(--muted); color: #fff; font-size: .875rem; font-style: italic; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
.prenota-info-btn:hover { background: var(--text); }
.prenota-info-luce { margin: .5rem 0 0; padding: .5rem .6rem; background: rgba(0,0,0,.04); border-radius: 8px; font-size: 1rem; color: var(--muted); line-height: 1.4; }
.prenota-prezzo-nota { margin: .5rem 0 0; font-size: 1rem; color: var(--muted); }
[data-theme="dark"] .prenota-prezzo-tot { border-top-color: rgba(255,255,255,.15); }
[data-theme="dark"] .prenota-info-luce { background: rgba(255,255,255,.06); }
.has-submenu:has(a.active) > .submenu-toggle{background:#FFECEC; color:var(--red); font-weight:800}
[data-theme="dark"] .submenu{background:#1a1a1a; border-color:#333}
[data-theme="dark"] .submenu-toggle:hover{background:#2a2020; color:var(--red)}
[data-theme="dark"] .has-submenu:has(a.active) > .submenu-toggle{background:#2a2020; color:var(--red)}

@media (max-width:900px){
  .has-submenu{width:100%}
  .submenu-toggle{display:flex; width:100%; justify-content:space-between; padding:.8rem 1rem; font-size:1.05rem}
  .submenu{position:static; box-shadow:none; border:none; background:transparent; min-width:0; padding:.1rem 0 .3rem .8rem; display:none !important}
  .has-submenu.open .submenu{display:flex !important}
  .has-submenu:hover .caret{transform:none}
  .has-submenu.open .caret{transform:rotate(180deg)}
}

/* === Consiglio Direttivo (Chi Siamo) === */
.cd-intro{color:var(--text); opacity:.75; margin:-.4rem 0 1.6rem}
.cd-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(205px, 1fr)); gap:1.6rem 1rem}
.cd-card{text-align:center}
.cd-avatar{width:120px; height:120px; margin:0 auto .8rem; border-radius:50%; overflow:hidden; background:#FFECEC; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.12)}
.cd-avatar img{width:100%; height:100%; object-fit:cover; object-position:top center}
.cd-initials{font-family:'Montserrat',sans-serif; font-weight:800; font-size:2.4rem; color:var(--red); letter-spacing:.02em}
.cd-card h3{margin:.2rem 0 .25rem; font-size:1.08rem}
.cd-role{display:inline-block; background:var(--red); color:#fff; font-size:.875rem; font-weight:700; padding:.12rem .65rem; border-radius:999px; margin-bottom:.45rem}
.cd-card p{font-size:.9rem; color:var(--text); opacity:.8; margin:0}
[data-theme="dark"] .cd-avatar{background:#2a2020}
/* p.cd-contact: e' un <p>, e .cd-card p (0-1-1) vincerebbe sul solo .cd-contact (0-1-0):
   con la sola classe il corpo resterebbe quello dei paragrafi delle card. */
p.cd-contact{display:flex; flex-direction:column; gap:.18rem; margin:.5rem 0 0; font-size:1rem}
.cd-contact a{color:var(--text); opacity:.82; overflow-wrap:anywhere}
.cd-contact a:hover{color:var(--red); opacity:1}

/* === Documenti === */
.doc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; max-width:720px}
.doc-item{display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border:1px solid rgba(0,0,0,.1); border-radius:var(--radius); background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.05)}
.doc-icon{font-size:2rem; flex:0 0 auto; line-height:1}
.doc-info{flex:1 1 auto; min-width:0}
.doc-info h3{margin:0 0 .2rem; font-size:1.1rem}
.doc-info p{margin:0; font-size:.9rem; color:var(--text); opacity:.8}
.doc-item .btn{flex:0 0 auto; white-space:nowrap}
[data-theme="dark"] .doc-item{background:#1a1a1a; border-color:#333}
@media (max-width:560px){
  .doc-item{flex-wrap:wrap}
  .doc-item .btn{width:100%; text-align:center}
}

/* Percorso veloce prenotazione: banner esito verifica anagrafica */
.prenota-verifica-esito { margin:10px 0 0; padding:10px 12px; border-radius:8px; font-weight:600; }
.prenota-verifica-esito.ok { background:#f4f8f4; border:1px solid #cfe3d2; color:#1b7f3b; }
.prenota-verifica-esito.err { background:#fbf3f2; border:1px solid #e6cfcc; color:#c0392b; }
#btnVerifica { margin-top:8px; }

/* Co-giocatori: righe nome/cognome/email per giocatore aggiuntivo */
.prenota-cogioc-row { margin-top:10px; padding-top:8px; border-top:1px dashed #e2e8e2; }
.prenota-cogioc-title { margin:0 0 4px; font-weight:700; font-size:.92rem; }

/* =========================================================
   SVENDITA ABBIGLIAMENTO (svendita.html)
   Pagina temporanea, fuori dal menu. Usa i token del sito
   (--red, --bg, --text, --muted, --light) piu' tre suoi.
   ========================================================= */
:root{
  --sv-superficie:#ffffff;
  --sv-tenue:#faf7f6;
  --sv-bordo:#e6e0de;
}
[data-theme="dark"]{
  --sv-superficie:#242424;
  --sv-tenue:#1f1f1f;
  --sv-bordo:#343434;
}

/* Su questa pagina il pulsante flottante "Prenota" lascia il posto
   all'elenco personale: stanno tutti e due in basso a destra. */
[data-page="svendita"] #ctaPrenotaFloat{display:none}

.sv-pagina{padding:32px 0 96px}

/* ---------------- apertura ---------------- */
.sv-apertura{max-width:62ch; margin-bottom:2rem}
.sv-occhiello{font-family:"Montserrat",sans-serif; font-size:.875rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 .35rem}
.sv-apertura h1{margin-bottom:.7rem}
.sv-intro{font-size:1.08rem; margin-bottom:.8rem}
.sv-disponibili{font-family:"Montserrat",sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--red); margin:0 0 .5rem}
.sv-nota{font-size:.92rem; color:var(--muted); margin:0}

/* ---------------- filtri ---------------- */
.sv-filtri{background:var(--sv-tenue); border:1px solid var(--sv-bordo);
  border-radius:var(--radius); padding:1rem 1.15rem; margin-bottom:1.6rem;
  display:flex; flex-direction:column; gap:.7rem}
.sv-filtro-riga{display:flex; align-items:flex-start; gap:.7rem; flex-wrap:wrap}
.sv-et{font-family:"Montserrat",sans-serif; font-size:.875rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  min-width:6.4rem; padding-top:.38rem}
.sv-gruppo{display:flex; flex-wrap:wrap; gap:.4rem; flex:1}
.sv-chip{font:inherit; font-size:.94rem; background:var(--sv-superficie);
  border:1px solid var(--sv-bordo); color:var(--text); border-radius:999px;
  padding:.34rem .8rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem;
  transition:background var(--transition), border-color var(--transition), color var(--transition)}
.sv-chip small{color:var(--muted); font-variant-numeric:tabular-nums; font-size:.875rem}
.sv-chip:hover:not(:disabled){border-color:var(--red); color:var(--red)}
.sv-chip[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#fff}
.sv-chip[aria-pressed="true"] small{color:rgba(255,255,255,.78)}
.sv-chip:disabled{opacity:.4; cursor:default}
.sv-filtro-coda{justify-content:space-between; align-items:center;
  border-top:1px solid var(--sv-bordo); padding-top:.7rem}
.sv-conta{margin:0; font-size:.95rem; color:var(--muted); font-variant-numeric:tabular-nums}
.sv-conta b{color:var(--text)}
.sv-azzera{font:inherit; font-size:.9rem; background:none; border:0; color:var(--red);
  cursor:pointer; text-decoration:underline; padding:0}

/* ---------------- griglia dei capi ---------------- */
.sv-griglia{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.sv-scheda{background:var(--sv-superficie); border:1px solid var(--sv-bordo);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--transition), transform var(--transition)}
.sv-scheda:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.sv-esaurito{opacity:.72}
.sv-esaurito:hover{transform:none; box-shadow:none}
.sv-foto{position:relative; aspect-ratio:1/1; background:var(--light); overflow:hidden}
.sv-foto img{width:100%; height:100%; object-fit:cover}
.sv-bollo{position:absolute; top:.55rem; left:.55rem; background:var(--red); color:#fff;
  font-family:"Montserrat",sans-serif; font-size:.875rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; padding:.22rem .5rem; border-radius:4px}
.sv-fascia{position:absolute; inset:0; background:rgba(255,255,255,.66); display:grid; place-items:center}
[data-theme="dark"] .sv-fascia{background:rgba(26,26,26,.68)}
.sv-fascia span{font-family:"Montserrat",sans-serif; font-weight:800; font-size:.875rem;
  letter-spacing:.13em; text-transform:uppercase; color:#fff; background:#333;
  padding:.32rem .75rem; border-radius:5px; transform:rotate(-6deg)}
.sv-testo{padding:.85rem .9rem 1rem; display:flex; flex-direction:column; gap:.45rem; flex:1}
.sv-testo h3{font-size:1.02rem; margin:0; letter-spacing:-.01em}
.sv-meta{margin:0; font-size:.875rem; color:var(--muted)}
.sv-prezzo{margin:0; font-family:"Montserrat",sans-serif; font-weight:800; font-size:1.2rem;
  color:var(--red); font-variant-numeric:tabular-nums}
.sv-taglie{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; padding-top:.2rem}
.sv-tg{font:inherit; font-size:.88rem; border:1px solid var(--sv-bordo);
  background:var(--sv-superficie); color:var(--text); border-radius:6px;
  padding:.28rem .55rem; cursor:pointer; font-variant-numeric:tabular-nums;
  transition:background var(--transition), border-color var(--transition), color var(--transition)}
.sv-tg em{font-style:normal; color:var(--muted); font-size:.875rem}
.sv-tg:hover:not(:disabled){border-color:var(--red); color:var(--red)}
.sv-tg.sv-evid{border-color:var(--red); color:var(--red); font-weight:700}
.sv-tg-out{text-decoration:line-through; opacity:.45; cursor:default}
.sv-tg-scelta{opacity:.55; cursor:default; border-style:dashed}
.sv-vuoto,.sv-errore{margin:2rem 0; text-align:center; color:var(--muted)}

/* ---------------- pulsante che apre l'elenco ---------------- */
.sv-apri{position:fixed; right:16px; bottom:16px; z-index:55;
  font:inherit; font-family:"Montserrat",sans-serif; font-weight:800; font-size:.98rem;
  background:var(--red); color:#fff; border:0; border-radius:999px;
  padding:.75rem 1.2rem; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 8px 22px -6px rgba(214,0,0,.6)}
.sv-apri:hover{background:var(--red-700)}
.sv-apri-n{background:#fff; color:var(--red); border-radius:999px; min-width:1.5rem;
  padding:.05rem .45rem; font-size:.875rem; font-variant-numeric:tabular-nums; text-align:center}
.sv-apri-n[hidden]{display:none}

/* ---------------- pannello dell'elenco ---------------- */
.sv-velo{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90}
.sv-velo[hidden]{display:none}
.sv-pannello{position:fixed; top:0; right:0; z-index:100;
  width:min(430px,92%); height:100vh; height:100dvh;
  background:var(--sv-superficie); box-shadow:var(--shadow-lg);
  transform:translateX(110%); transition:transform .3s ease;
  display:flex; flex-direction:column; overflow:hidden}
.sv-pannello.sv-aperto{transform:translateX(0)}
.sv-pannello-testa{background:var(--red); color:#fff; padding:.9rem 1.1rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex:0 0 auto}
.sv-pannello-testa h2{margin:0; font-size:1.12rem; color:#fff}
.sv-chiudi{font:inherit; font-size:1.7rem; line-height:1; background:none; border:0;
  color:#fff; cursor:pointer; padding:0 .2rem}
.sv-pannello-corpo{padding:1.1rem; overflow-y:auto; flex:1;
  display:flex; flex-direction:column; gap:1rem; -webkit-overflow-scrolling:touch}
.sv-carrello-vuoto{margin:0; color:var(--muted)}
.sv-carrello-vuoto[hidden]{display:none}
.sv-voci{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem}
.sv-voce{display:flex; align-items:center; gap:.75rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--sv-bordo)}
.sv-voce:last-child{border-bottom:0; padding-bottom:0}
.sv-voce img{width:56px; height:56px; object-fit:cover; border-radius:6px; flex:0 0 auto}
.sv-voce-d{flex:1; min-width:0}
.sv-voce-d b{display:block; font-size:.95rem}
.sv-voce-d span{font-size:.875rem; color:var(--muted)}
.sv-voce-p{font-family:"Montserrat",sans-serif; font-weight:800; color:var(--red);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.sv-togli{font:inherit; font-size:1.3rem; line-height:1; background:none; border:0;
  color:var(--muted); cursor:pointer; padding:0 .25rem}
.sv-togli:hover{color:var(--red)}
.sv-totale{display:flex; justify-content:space-between; align-items:baseline; margin:0;
  border-top:2px solid var(--text); padding-top:.6rem;
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:1.15rem}
.sv-totale span:last-child{color:var(--red); font-variant-numeric:tabular-nums}

/* ---------------- modulo ---------------- */
#svForm{display:flex; flex-direction:column; gap:.8rem}
#svForm[hidden]{display:none}
.sv-campo{display:flex; flex-direction:column; gap:.28rem}
.sv-campo label{font-size:.88rem; font-weight:700}
.sv-campo input,.sv-campo textarea{font:inherit; font-size:1rem; width:100%;
  border:1px solid var(--sv-bordo); border-radius:8px; padding:.55rem .7rem;
  background:var(--bg); color:var(--text)}
.sv-campo input:focus-visible,.sv-campo textarea:focus-visible{outline:2px solid var(--red);
  outline-offset:1px; border-color:var(--red)}
.sv-campo textarea{resize:vertical}
.sv-aiuto{font-size:.95rem; color:var(--muted)}
.sv-btn{font:inherit; font-family:"Montserrat",sans-serif; font-weight:800; font-size:1.02rem;
  background:var(--red); color:#fff; border:0; border-radius:8px; padding:.75rem 1rem;
  cursor:pointer; width:100%}
.sv-btn:hover:not(:disabled){background:var(--red-700)}
.sv-btn:disabled{opacity:.65; cursor:default}
.sv-esito{margin:0; font-size:.93rem; padding:.7rem .85rem; border-radius:8px}
.sv-esito[hidden]{display:none}
.sv-esito-ko{background:#fdecec; color:#8c1010; border:1px solid #f2c4c4}
[data-theme="dark"] .sv-esito-ko{background:#3a1c1c; color:#ffb4b4; border-color:#5a2a2a}
.sv-fatto{display:flex; flex-direction:column; gap:.8rem}
.sv-fatto h3{margin:0}

/* ---------------- avviso momentaneo ---------------- */
.sv-avviso{position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(14px);
  z-index:110; margin:0; background:var(--text); color:var(--bg);
  padding:.6rem 1rem; border-radius:999px; font-size:.92rem;
  opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition)}
.sv-avviso.sv-avviso-on{opacity:1; transform:translateX(-50%) translateY(0)}

body.sv-bloccato{overflow:hidden}

@media (max-width:640px){
  .sv-griglia{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.9rem}
  .sv-et{min-width:100%; padding-top:0}
  .sv-apri{right:12px; bottom:12px; font-size:.92rem; padding:.65rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  .sv-scheda,.sv-pannello,.sv-avviso{transition:none}
}

/* ---------------- pulsante d'ingresso alla svendita (tutte le pagine) ----------------
   In basso a sinistra, in sovraimpressione: l'angolo in basso a destra ospita gia' il
   pulsante "Prenota" sul telefono. La freccia "torna su" sta nello stesso angolo di
   questo pulsante e viene spostata piu' in alto, qui sotto. */
.sv-fab{
  position:fixed; left:16px; bottom:16px; z-index:45;
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:.92rem; line-height:1;
  background:var(--red); color:#fff; border-radius:999px; padding:.6rem 1.05rem;
  /* L'anello bianco serve davvero: sulla home il pulsante galleggia sopra l'eroe
     rosso, e senza stacco un rosso su rosso non si legge. */
  box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 6px 18px -4px rgba(0,0,0,.35);
  transition:background var(--transition), transform var(--transition), opacity var(--transition);
}
.sv-fab:hover{ background:var(--red-700); color:#fff; transform:translateY(-1px) }
.sv-fab-corto{ display:none }

/* Il menu mobile e' un pannello fisso a z-index 100 con velatura a 90: mentre e' aperto
   il pulsante deve sparire, altrimenti galleggia sopra la velatura. */
body:has(.main-nav.open) .sv-fab,
body:has(.nav-backdrop.visible) .sv-fab{ opacity:0; pointer-events:none }

/* Sulla pagina della svendita non serve: li' c'e' gia' il pulsante dell'elenco. */
[data-page="svendita"] .sv-fab{ display:none }

[data-theme="dark"] .sv-fab{ box-shadow:0 0 0 2px rgba(26,26,26,.92), 0 6px 18px -4px rgba(0,0,0,.6) }

/* .btn-top vive nello stesso angolo: dove c'e' il pulsante della svendita, sale sopra. */
html:not([data-page="svendita"]) .btn-top{ bottom:74px }

@media (max-width:900px){
  .sv-fab{ left:12px; bottom:12px; font-size:.875rem; padding:.5rem .85rem }
  html:not([data-page="svendita"]) .btn-top{ bottom:66px }
  .sv-fab-lungo{ display:none }
  .sv-fab-corto{ display:inline }
}
@media (prefers-reduced-motion:reduce){ .sv-fab{ transition:none } }