@charset "utf-8";

/* =========================
   RESET LEGGERO + BASE
   ========================= */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

html {
  font-size: 15px;
}

body {
  font-family: Roboto, Arial, sans-serif;
  line-height: 1.5;
  letter-spacing: .2px;
  /* più leggibile di 1.5px globale */
  color: #0a0a0a;
}

/* Accessibilità: focus visibile */
a:focus-visible,
button:focus-visible,
.btn-sito:focus-visible,
.btn-form:focus-visible {
  outline: 2px solid #08abf1;
  outline-offset: 2px;
}

/* =========================
   TOKENS/COLORI
   ========================= */
:root {
  --colore-primario: #1a629e;
  --color-primary-10: rgba(26, 98, 168, .10);
  --colore-primario-middle: #6a72d9;
  --colore-primarioHoverdark: #7958db;
  --colore-seconadario: #6a95d9;
  --colore-secondario1: #09dbd8;
  --colore-bianco: #ffffff;
  --colore-giallo: #FFC745;
  --colore-giallo-hover: #e5a40c;
  --colore-grigio-chiaro: #b2c1d9;
  --colore-grigio: #DDE2E5;
  --colore-grigio-scuro: #A1b1b9;
  --colore-black: #1C1B17;
  --colore-verde-evidenziato: #0bff5e;
  --colore-fuxia: #C5006C;
  --colore-green: rgba(35, 255, 41, 1)
}

/* =========================
   UTILITY SPACING
   ========================= */
.container {
  max-width: 1400px;
  width: 100%;
  margin: auto;
}

.padd-bot-1 {
  padding-bottom: 1rem;
}

.padd-bot-2 {
  padding-bottom: 2rem;
}

.sp-or-1 {
  margin: 1em auto;
}

.sp-or-2 {
  margin: 2em auto;
}

.sp-or-3 {
  margin: 3em auto;
}

.sp-or-4 {
  margin: 4em auto;
}

.sp-or-5 {
  margin: 5em auto;
}

.padd-or-1 {
  padding: 0 1em;
}

.padd-or-2 {
  padding: 0 2em;
}

/* FIX: la tua seconda definizione di .padd-or-2 sovrascriveva — creo .padd-or-3 */
.padd-or-3 {
  padding: 0 3em;
}

.padd-or-4 {
  padding: 0 4em;
}

.padd-or-5 {
  padding: 0 5em;
}

.padd-ver-1 {
  padding: 1em 0;
}

.padd-ver-2 {
  padding: 2em 0;
}

.padd-ver-3 {
  padding: 3em 0;
}

.padd-ver-4 {
  padding: 4em 0;
}

.padd-ver-5 {
  padding: 5em 0;
}

.padd-1 {
  padding: 1em !important;
}

.padd-2 {
  padding: 2em !important;
}

.padd-3 {
  padding: 3em !important;
}

.padd-4 {
  padding: 4em !important;
}

.padd-5 {
  padding: 5em !important;
}

.no-padd {
  padding: 0 !important;
}

.mx-auto {
  margin: auto !important;
}

.mb-1 {
  margin-bottom: .25rem !important;
}

.mb-2 {
  margin-bottom: .5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.mt-1 {
  margin-top: .25rem !important;
}

.mt-2 {
  margin-top: .5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mr-1 {
  margin-right: .25rem !important;
}

.mr-2 {
  margin-right: .5rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.mr-5 {
  margin-right: 3rem !important;
}

.mr-auto {
  margin-right: auto !important;
}

.ml-1 {
  margin-left: .25rem !important;
}

.ml-2 {
  margin-left: .5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.ml-5 {
  margin-left: 3rem !important;
}

.mt-auto {
  margin-left: auto !important;
}

.reset-mergin {
  margin: 0 !important;
}


.allinea-centro {
  text-align: center !important;
}

.allinea-start {
  text-align: start !important;
}

.allinea-end {
  text-align: end !important;
}

.text-justify {
  text-align: justify !important;
}

.min-heigth-2 {
  min-height: 0;
}

/* mantengo il nome (refuso), valore sensato */
.min-height-2 {
  min-height: 0;
}

.acapo {
  display: block;
  margin-top: 10px;
}

.strong {
  font-weight: 600;
}

/* alias corretto nel caso lo usi nuovo */

/* =========================
   TITOLI “TESTATA”
   ========================= */
.testi-testata h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.25;
}

.testi-testata h2 {
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.4;
}

.testi-testata h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.5;
}

.width-100 {
  width: 100% !important;
}

.h1-page-style {
  line-height: 45px;
  padding: 5px;
}

/* =========================
   COLORI/TEXT HELPERS
   ========================= */
.colore-testo-bianco {
  color: var(--colore-bianco) !important;
}

.colore-testo-giallo {
  color: var(--colore-giallo) !important;
}

.colore-testo-hover {
  color: var(--colore-primarioHoverdark) !important;
}

.sfondo-colori-sito {
  background-color: var(--colore-primario);
  border-radius: 15px;
}

.sfondo-colori-hover {
  background-color: var(--colore-primarioHoverdark);
  border-radius: 15px;
}

.sfondo-colori-middle {
  background-color: var(--colore-primario-middle);
  border-radius: 15px;
}

.sfondo-colori-hover-no-radius {
  background-color: var(--colore-primarioHoverdark);
}

/* =========================
   CARD GENERICHE
   ========================= */
.flex-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 20px;
}

.item-card {
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.card-header {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 3rem;
  padding: 10px;
  color: var(--colore-primarioHoverdark);
}

.card-header-text {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 1.5rem;
  padding: 3px 10px;
  line-height: 2rem;
}

.card-img-col-2 {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: nowrap;
}

.card-description {
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.6rem;
  padding: 3px 10px;
}

.image-flex-2 {
  max-width: 200px;
  width: 100%;
  height: auto;
  padding: 10px;
}

.flex-rows {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 40px;
  padding: 10px;
  border-radius: 10px;
}

.item-4 {
  display: flex;
  flex-direction: column;
  max-width: 290px;
  width: 100%;
  margin: auto;
  line-height: 30px;
  gap: 15px;
  padding: 1em;
  border-radius: 8px;
}

.item-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  width: 100%;
  margin: auto;
  line-height: 30px;
  gap: 15px;
  padding: 1em;
  border-radius: 8px;
}

.txt-allign-center {
  text-align: center !important;
}

.item-2-btn {
  margin-top: 2em;
  max-width: 200px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
}

/* =========================
   BUTTONS
   ========================= */
.btn-sito {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 60px;
  width: 100%;
  height: 100%;
  padding: 15px;
  border-radius: 8px;
  color: var(--colore-bianco);
  background-color: var(--colore-primario);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.btn-sito:hover {
  background-color: var(--colore-primario-middle);
}

/* .ombra{
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
} */
.ombra {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .04),
    0 8px 24px rgba(0, 0, 0, .06);
}

.color-inerit {
  color: inherit !important;
}



.ombra-chiara {
  box-shadow: rgba(248, 234, 25, 0.07) 0px 1px 2px, rgba(243, 243, 142, 0.07) 0px 2px 4px, rgba(240, 240, 142, 0.07) 0px 4px 8px, rgba(241, 229, 147, 0.07) 0px 8px 16px, rgba(238, 236, 170, 0.07) 0px 16px 32px, rgba(246, 240, 168, 0.07) 0px 32px 64px;
}

/* =========================
   FORM / LOGIN
   ========================= */
.container-for-reg {
  position: relative;
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;

}

.container-for-reg h3 {
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 310px;
  height: 40px;
  color: var(--colore-black);
  margin-top: 10px;
}

.item-form {
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  position: relative;
}

.item-form-login {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.container-btnclose {
  width: 50px;
  height: 50px;
  position: absolute;
  right: -5px;
  top: -5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btnclose:hover {
  transform: scale(.9);
}

.input-form {
  width: 100%;
  height: 40px;
  border-radius: 5px;
  border: 1px solid var(--colore-primario);
  padding: 3px 5px;
}

.input-form-login {
  width: 250px;
  height: 40px;
  background-color: var(--colore-bianco);
  border-radius: 5px;
  border: 1px solid var(--colore-grigio);
  padding: 0 7px;
}

.input-form-icona {
  min-width: 250px;
  height: 40px;
  background-color: var(--colore-bianco);
  border-radius: 5px;
}

.icona {
  width: 25px;
}

.icona-input-text {
  position: absolute;
  right: -28px;
  top: 45px;
  max-width: 25px;
  cursor: pointer;
}

.icona-input-text:hover {
  transform: scale(1.05);
}

@media screen and (max-width: 768px) {


  .item-form {
    width: 100%;
    margin: auto;
    display: block;
  }

  .input-form {
    width: 100%;
  }

  .input-form-icona {
    min-width: 330px;
    width: 100%;
  }

  .icona-input-text {
    left: 335px;
    top: 45px;
    right: auto;
  }
}

.btn-form {
  width: 245px;
  height: 40px;
  background-color: var(--colore-primario);
  color: var(--colore-bianco);
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  margin-top: 10px;
}

.btn-form:hover {
  background-color: var(--colore-primario-middle);
  color: #fff;
}

/* FIX contrasto */

.btn-align-end {
  align-self: end;
}

.align-start {
  align-self: start;
}

.align-center-flex {
  align-self: center;
}

.margin-rw-50 {
  margin-right: 50px !important;
}

.password {
  font-size: 10px;
}

.hidden {
  display: none !important;
}

.occhietto {
  position: relative;
  top: -28px;
  left: 220px;
  max-width: 30px;
  cursor: pointer;
}

.occhiettoUpdate {
  position: relative;
  top: -25px;
  left: 110px;
  max-width: 30px;
  cursor: pointer;
}

.container-error {
  max-width: 365px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  margin: 10px auto;
}

/* =========================
   INTESTAZIONI / ERROR
   ========================= */
.intestazione {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.errori {
  color: red;
}

.reset-password {
  margin: 0;
  position: relative;
  top: -15px;
  right: 26px;
  font-size: 13px;
}

.modale-100 {
  width: 100%;
  margin: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 40%);
  z-index: 1;
  background-color: var(--colore-bianco);
}

.container-errori {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--colore-bianco);
}

.card-error {
  max-width: 340px;
  min-height: 400px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.img-error {
  width: 300px;
  height: 220px;
}

.intestazine-error {
  text-align: center;
  padding: 20px;
}

.body-error {
  text-align: center;
  padding: 20px;
  font-weight: 500;
  color: red;
}

.spazio2 {
  min-height: 2em;
}

.errore {
  max-width: 600px;
  margin: 50px auto 0 auto;
  width: 100%;
}

.err-status {
  font-size: 60px;
  font-weight: 600;
  text-align: center;
  margin: 20px;
}

.err-message {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}

.err-return {
  margin-top: 25px;
  text-align: center;
}

.btn-error {
  min-width: 120px;
  min-height: 45px;
  font-size: 20px;
  color: var(--colore-bianco);
  background-color: var(--colore-primarioHoverdark);
}

.btn-error:hover {
  background-color: var(--colore-primario-middle);
}

/* =========================
   AVVISI / OVERLAY
   ========================= */
.container-avviso {
  position: absolute;
  top: 0;
  min-width: 100vw;
  min-height: 100dvh;
  margin: auto;
  background-color: var(--colore-bianco);
  opacity: .95;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avviso {
  position: relative;
  max-width: 500px;
  width: 100%;
  padding: 20px;
  background-color: var(--colore-bianco);
  box-shadow: rgba(149, 157, 165, .2) 0 8px 24px;
  z-index: 13;
}

.img-elimina {
  max-width: 200px;
  height: auto;
}

/* =========================
   UTILS AREA PERSONALE
   ========================= */
.container-utils {
  display: flex;
  flex-direction: row;
  gap: 40px;
  cursor: pointer;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
}

.utils-items {
  margin-top: 10px;
  min-height: 40px;
  min-width: 80px;
  background-color: #1b3c6a;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

.container-utils-label {
  position: relative;
  min-height: 155px;
  width: 155px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 10px;
  padding: 5px;
  border: 1px solid var(--colore-primario);
  box-shadow: rgba(149, 157, 165, .2) 0 8px 24px;
  border-radius: 8px;
}

.container-utils-label:hover {
  transform: scale(1.05);
}

.icona-premium {
  position: absolute;
  top: -10px;
  right: -10px;
}

.icone-area-personale {
  padding: 5px;
}

.utils-items-label {
  margin-top: 10px;
  min-height: 40px;
  min-width: 80px;
  background-color: #1b3c6a;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: underline;
}

/* =========================
   BOTTONI/LOGIN TERZE PARTI
   ========================= */
.btn-google {
  max-width: 245px;
  cursor: pointer;
  box-shadow: 5px 5px 10px -5px gray;
}

/* FIX: mancava il punto prima della classe */
.btn-google:hover {
  transform: scale(1.05);
}

/* =========================
   LINK & CHECK
   ========================= */
.link {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px;
  gap: 15px;
}

.item-check {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

/* =========================
   COMUNICAZIONI
   ========================= */
.container-comunicazione {
  position: fixed;
  inset: 0;
  background-color: var(--colore-bianco);
  opacity: .8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comunicazione {
  position: absolute;
  top: 100px;
  max-width: 350px;
  font-size: 25px;
  color: #118336;
}

.privacy {
  font-size: 12px;
  text-align: justify;
  padding: 10px;
  line-height: 18px;
}

/* =========================
   PROFILO
   ========================= */
/* .form-profile {
  max-width: 600px;
  margin: auto;
  padding: 10px;
  border-radius: 8px;
} */

.container-container-profile {
  position: relative;
  max-width: 620px;
  width: calc(100% - 10px);
  margin: 20px auto;
  border: 1px solid var(--colore-primario);
  border-radius: 8px;
  padding: 10px 5px;
  box-shadow: rgba(149, 157, 165, .2) 0 8px 24px -14px;
}

.close-profile-form {
  width: 50px;
  height: 29px;
  position: absolute;
  top: 5px;
  right: -5px;
  text-align: end;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.item-profile,
.item-profile-single {
  max-width: calc(100% - 10px);
  width: 100%;
  margin: 5px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
  padding: 5px;
  border-radius: 5px;
}

.item-profile {
  justify-content: space-between;
}

.item-profile-single {
  justify-content: start;
}

.item-form-single-elimina {
  max-width: calc(100% - 10px);
  width: 100%;
  margin: 5px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
  gap: 1em;
  padding: 0 10px;
  border-radius: 5px;
}

.campoObbligatorio {
  border: red 1px solid;
}

.edit {
  width: 100%;
  margin: 50px auto 15px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.intestazione-title {
  width: calc(100% - 25px);
  margin: 30px auto 5px auto;
  padding: 5px;
  border-radius: 5px;
  background-color: var(--colore-grigio);
}

.user-profile {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  background-color: var(--colore-bianco);
}

.img-profile {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* =========================
   QR SECTION / CTA
   ========================= */
.container-qr {
  margin: 30px 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: 50px;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--colore-bianco);
  flex-wrap: wrap;
}

.container-qr-code {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  max-width: 45%;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, .07) 0px 1px 2px, rgba(0, 0, 0, .07) 0px 2px 4px, rgba(0, 0, 0, .07) 0px 4px 8px, rgba(0, 0, 0, .07) 0px 8px 16px, rgba(0, 0, 0, .07) 0px 16px 32px, rgba(0, 0, 0, .07) 0px 32px 64px;
  transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1);
  will-change: box-shadow;
  cursor: pointer;
  gap: 10px;
}

.container-header-accedi {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 15px;
  width: 100%;
}

.btn-header-accedi {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: none;
  cursor: pointer;
  max-width: 350px;
  width: 100%;
  background-color: var(--colore-primario);
  color: var(--colore-bianco);
  font-size: 20px;
  font-weight: 600;
  border-radius: 8px;
}

.img-qr-code-index {
  max-width: 500px;
  width: 100%;
  height: auto;
}

/* =========================
   RESPONSIVE
   ========================= */
@media screen and (max-width: 768px) {
  .items-header {
    border-radius: 0;
  }

  .container-qr-code {
    max-width: none;
    width: 100%;
  }


}