/* ============================================================
   HEATSAFE · CSS PERSONALIZZATO (versione pulita 2025-09)
   ============================================================ */

/* ---------- Variabili e reset minimi ---------- */
:root{
  --maroon:#6f0f28;
  --text:#411627;
  --accent:#f0932b;
  --border:#f1d7cd;
  --soft:#fff5ea;

  --pill-bg: rgba(255,255,255,.55);
  --pill-blur: 3px;

  /* Gradiente trasparente usato in HERO e BADGE */
  --grad-hero: linear-gradient(
      180deg,
      rgba(255,245,234,.18) 0%,
      rgba(255,245,234,.88) 70%,
      rgba(255,245,234,1) 100%
  );
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

/* ---------- Sfondo unico pagina ---------- */
html{
  background:
    url('/upload/surveys/298128/images/OndateCalore_Arezzo_ai.png')
    center 22% / cover no-repeat fixed,
    var(--soft);
}
body{
  background: transparent !important;
  color: var(--text);
}

/* Nascondi eventuale barra avanzamento */
.top-container,
.top-container .progress{ display:none !important; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar.navbar-default.navbar-fixed-top{
  background: transparent !important;
  border:0; box-shadow:none;
  min-height: 136px;           /* altezza header desktop */
}
body{ padding-top: 146px !important; } /* spazio sotto header */

@media (max-width: 767px){
  .navbar.navbar-default.navbar-fixed-top{ min-height: 98px; }
  body{ padding-top: 110px !important; }
}

/* A) Stoppa il logo auto-generato di LS a sinistra */
.navbar .navbar-header > img.logo{ display:none !important; }

/* B) Logo Comune a sinistra (più grande, leggibile) */
.navbar .logo-container{
  margin: 0px 0px;
  background: var(--pill-bg);
  border-radius: 10px;
  padding: 0px 0px;
  backdrop-filter: blur(var(--pill-blur));
  -webkit-backdrop-filter: blur(var(--pill-blur));
  box-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.navbar .logo-container img{
  display:block !important;
  height: 100px;                 /* <<< più grande */
  width:auto;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.18));
}
@media (max-width: 767px){
  .navbar .logo-container img{ height: 46px; }
}

/* Titoli a sinistra: leggibili su foto */
.navbar-brand.hidden-xs h3,
.navbar-brand.hidden-xs h5{
  color:#fff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  margin:0; line-height:1.2;
}
.navbar-brand.hidden-xs h5{ opacity:.95; font-weight:500; }

/* C) Loghi progetto a destra (mostrati come immagine di sfondo) */
.navbar .navbar-right{
  position: relative;
  display:flex !important;
  align-items:center;
  gap:10px;
  padding: 0 0 0 0;             /* niente padding, lo gestisce il blocco loghi */
  margin: 10px 12px 0 0;
}

/* Blocco con i 3 loghi (HEATSAFE + Interreg + EU) */
.navbar .navbar-right::before{
  content:"";
  display:block;
  width: 520px;                 /* regola se serve */
  height: 72px;
  background: var(--pill-bg);
  backdrop-filter: blur(var(--pill-blur));
  -webkit-backdrop-filter: blur(var(--pill-blur));
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.35);

  background-image: url('/upload/surveys/298128/images/Heatsafe_interreg_euro_med_logo_horizontal_web_2330-x314_en.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
}

/* Link “Caricare il questionario incompleto”: compatto e discreto */
.navbar .navbar-right a{
  font-size: 12.5px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,.55);
  color: #3b1138 !important;
  white-space: nowrap;
  margin-left: 10px;
}

@media (max-width: 1200px){
  .navbar .navbar-right::before{ width: 410px; height: 60px; }
}
@media (max-width: 991px){
  .navbar .navbar-right::before{ width: 340px; height: 52px; }
  .navbar .navbar-right a{ font-size:12px; padding:6px 9px; }
}
@media (max-width: 767px){
  .navbar .navbar-right{ margin:8px 10px 0 0; }
  .navbar .navbar-right::before{ width: 260px; height: 40px; }
  .navbar .navbar-right a{ display:none; } /* su mobile di solito inutile tenerlo */
}

/* ============================================================
   HERO + BADGE (gradiente trasparente condiviso)
   ============================================================ */
.hero{
  background: var(--grad-hero);
  border-radius: 16px;
  padding: 1.1rem 1.3rem 1.4rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.hero h1{
  margin:0 0 .35rem;
  font-size: clamp(2rem, 2.1vw + 1.1rem, 2.6rem);
  font-weight:800;
  line-height:1.2;
  color:#2c0b18;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.lead{
  margin:.2rem 0 .9rem;
  font-size: clamp(1.35rem, 1.35vw + 1rem, 1.85rem);
  font-weight:700;
  color:#5a1d2f;
  max-width:72ch;
}

/* BADGE: override di Bootstrap (.badge) con lo stesso gradiente dell’hero */
.survey-welcome .hero .badge{
  display:inline-flex; align-items:baseline; gap:.3rem;
  padding:.40rem .70rem !important;
  border-radius:999px !important;
  border:1px solid rgba(240,160,90,.55) !important;
  background: var(--grad-hero) !important;
  color:#5a1d2f !important;
  box-shadow:0 1px 0 rgba(111,15,40,.10) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.survey-welcome .hero .badge .k{
  font-weight:800; font-size: clamp(1.05rem, .5vw + .9rem, 1.18rem); line-height:1;
}
.survey-welcome .hero .badge .v{
  font-weight:600; font-size: clamp(.82rem, .3vw + .7rem, .92rem); line-height:1; opacity:.95;
}

/* ============================================================
   CARD / LISTE / PRIVACY (coerenza visiva)
   ============================================================ */
.card{
  background: var(--grad-hero); !important;
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.card.accent{ border-left:4px solid var(--accent); }

.ul{ list-style:none; margin:.25rem 0 0; padding:0; display:grid; gap:.6rem; }
.li{ display:grid; grid-template-columns:26px 1fr; gap:.5rem; align-items:flex-start; }
.ico{ width:26px; text-align:center; }

.privacy{
  background: rgba(255,245,234,.9);
  border:1px dashed #efc7b3;
  color:#4a1630;
  padding:.8rem .95rem;
  border-radius:12px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Pulsante “Avanti” */
.btn.btn-primary{ background:var(--maroon); border-color:#5e0d22; }
.btn.btn-primary:hover,
.btn.btn-primary:focus{ background:#821335; border-color:#6f102c; }

/* ===========================
   LOGO COMUNE DI AREZZO
   =========================== */

/* Ingrandito senza aumentare l’altezza dell’header */
.navbar .logo-container img {
  height: 100px !important;   /* più grande */
  width: auto;
  max-height: none;
  margin-top: -8px;          /* sporge un po’ senza alzare la navbar */
}

/* Bordo arrotondato e pill traslucida */
.navbar .logo-container {
  border-radius: 12px !important;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.25) 100%
  );
  padding: 0px 0px !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}


/* ===========================
   CONTENITORI DOMANDE / GRUPPI
   =========================== */

/* Box delle domande e gruppi con gradiente trasparente */
.question-container,
.group-container {
  border-radius: 14px !important;
  border: 1px solid rgba(240,160,90,.35);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.78) 0%,
    rgba(255,245,234,.65) 100%
  ) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.08);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Titoli dei gruppi */
.group-title,
.group-container h2,
.group-container h3 {
  background: linear-gradient(
    90deg,
    rgba(255,245,234,.75) 0%,
    rgba(255,233,207,.55) 100%
  );
  padding: .6rem .9rem;
  border-radius: 10px;
  margin-bottom: .8rem;
  font-weight: 700;
  color: #411627;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ===========================
   TITOLI PRINCIPALI
   =========================== */

.navbar .navbar-brand h3 {
  font-size: 3rem !important;   /* più grande */
  font-weight: 700 !important;
}

.navbar .navbar-brand h5 {
  font-size: 2rem !important;  /* sottotitolo più grande */
  font-weight: 500 !important;
}

/* ===== Quota message – stile evidente e gradevole ===== */
.quotamessage.limesurveycore{
  /* layout */
  display:flex;
  align-items:flex-start;
  gap:.9rem;

  /* spaziatura & dimensioni */
  padding:1rem 1.25rem;
  margin:1.25rem auto 2rem auto;
  max-width: 880px;
  line-height:1.35;

  /* tipografia */
  font-size:2.05rem;
  font-weight:600;

  /* estetica */
  color:#0f3a1f; /* testo principale */
  background: linear-gradient(180deg, #e8f6ed 0%, #dff4e9 100%); /* verde tenue */
  border:1px solid rgba(6,94,50,.25);
  border-left:6px solid #138a4b; /* accento visivo */
  border-radius:14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* Icona a sinistra (usa Font Awesome già caricato) */
.quotamessage.limesurveycore::before{
  content:"\f05a"; /* fa-info-circle */
  font-family:"FontAwesome";
  font-weight:normal;
  font-style:normal;
  font-size:1.4rem;
  line-height:1;
  color:#138a4b;
  flex:0 0 auto;
  margin-top:.15rem;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Modalità “scura” o sfondi scuri del tema */
@media (prefers-color-scheme: dark){
  .quotamessage.limesurveycore{
    color:#e9fff3;
    background: linear-gradient(180deg, #0f2b1d 0%, #0c2418 100%);
    border-color: rgba(120,255,190,.25);
    border-left-color:#5de0a1;
    box-shadow: 0 8px 26px rgba(0,0,0,.35);
  }
  .quotamessage.limesurveycore::before{ color:#86f5c3; }
}

/* Compattezza su schermi piccoli */
@media (max-width: 576px){
  .quotamessage.limesurveycore{
    font-size:1rem;
    padding:.9rem 1rem;
    border-radius:12px;
    margin:1rem .5rem 1.5rem .5rem;
  }
}

/* Focus visivo se si porta il focus via tastiera da script */
.quotamessage.limesurveycore:focus{
  outline:3px solid #138a4b;
  outline-offset:3px;
  border-radius:14px;
}

/* Pulsanti di navigazione mostrati in pagina quota (già Bootstrap) – piccolo ritocco */
form.QuotaMessage .navigator .btn{
  border-radius:10px;
  font-weight:600;
}
form.QuotaMessage .ls-move-previous-btn{
  border-color:#138a4b;
  color:#138a4b;
}
form.QuotaMessage .ls-move-previous-btn:hover{
  background:#138a4b;
  color:#fff;
}

/* ===== Consenso privacy: box compatto, allineato e con checkbox centrata ===== */

/* Gruppo: input + label (non posso creare un wrapper, quindi lavoro sulla label) */
#datasecurity_accepted + label{
  /* box più piccolo */
  display: inline-flex;
  align-items: center;              /* centra verticalmente la checkbox col testo */
  gap: .55rem;
  font-size: .95rem;
  font-weight: 700;
  color: #3a1120;

  /* dimensioni e ritmo */
  padding: .55rem .85rem;           /* meno “alto” e più compatto */
  margin: .25rem 0 0 .25rem;        /* avvicina al blocco sopra; leggero rientro */
  line-height: 1.25;
  max-width: 680px;                 /* PIÙ PICCOLO: regola a 620–720px se vuoi */
  border-radius: 12px;
  position: relative;               /* necessario per lo pseudo-sfondo */
}

/* Sfondo che abbraccia ANCHE la checkbox (sporge a sinistra) */
#datasecurity_accepted + label::before{
  content: "";
  position: absolute;
  z-index: -1;
  /* inset con left negativo per coprire la checkbox */
  inset: -8px -8px -8px -42px;      /* ← regola SOLO questo per allineare al pixel */
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(239,199,179,.70);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Checkbox: dimensione e allineamento */
#datasecurity_accepted{
  width: 18px; height: 18px;        /* dimensione coerente con il testo */
  transform: translateY(0);         /* cancella eventuali scale precedenti */
  margin: 0 0 0 14px;               /* porta il gruppo in linea con le “card” */
  vertical-align: middle;
}

/* Hover/focus/checked: feedback chiaro ma sobrio */
#datasecurity_accepted + label:hover::before{
  background: rgba(255,255,255,.95);
}
#datasecurity_accepted:focus + label::before{
  outline: 3px solid #8b2d4a; outline-offset: 2px;
}
#datasecurity_accepted:checked + label::before{
  border-color: #e28f74;
  box-shadow: 0 0 0 3px rgba(226,143,116,.14);
}

/* Link dentro al box */
#datasecurity_accepted + label a{
  font-weight: 700; text-decoration: underline;
}

/* Mobile: ancora più compatto e allineato */
@media (max-width: 576px){
  #datasecurity_accepted + label{
    font-size: .92rem;
    padding: .5rem .75rem;
    max-width: 100%;
    margin-left: .2rem;
  }
  #datasecurity_accepted + label::before{
    inset: -6px -6px -6px -38px;
  }
  #datasecurity_accepted{
    margin-left: 12px;
  }
}