/* Acqua Sapone - Lavanderia Self-Service Pontecurone | stile della pagina di iscrizione (registrazione.html) */
  :root{
    --blu:#0e5aa7;
    --blu-scuro:#0a3f78;
    --verde:#3aaa35;
    --verde-chiaro:#e8f6e7;
    --rosso:#e2001a;
    --testo:#37474f;
    --bordo:#d3e0ea;
    --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{background:#e8f4fd;-webkit-text-size-adjust:100%}
  body{
    font-family:var(--font);
    color:var(--testo);
    line-height:1.6;
    min-height:100vh;
    min-height:100dvh;
    position:relative;
    overflow-x:hidden;
    padding:calc(16px + env(safe-area-inset-top)) 14px calc(26px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 12% 8%, rgba(58,170,53,.14), transparent 42%),
      radial-gradient(circle at 88% 6%, rgba(14,90,167,.16), transparent 44%),
      radial-gradient(circle at 50% 100%, rgba(14,90,167,.12), transparent 55%),
      linear-gradient(180deg,#e8f4fd 0%,#ffffff 45%,#e9fbf0 100%);
    background-attachment:fixed;
  }

  /* ---- logo in trasparenza come sfondo (filigrana visibile) ---- */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:url("../Acqua-Sapone_Lavenderia%20Self-Service_LOGO.jpg") center 38% / min(520px,92vw) no-repeat;
    mix-blend-mode:multiply;
    opacity:.85;
  }
  /* da computer: logo di sfondo un po' più grande, ma non a tutto schermo */
  @media (min-width:1024px){
    body::before{
      background-position:center center;
      background-size:min(780px,62vw);
      opacity:.5;
    }
  }

  /* ---- bollicine animate ---- */
  .bolle{position:fixed;inset:0;overflow:hidden;z-index:1;pointer-events:none}
  .bolla{
    position:absolute;
    bottom:-140px;
    border-radius:50%;
    background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 55%, rgba(14,90,167,.10) 100%);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:inset 0 0 14px rgba(255,255,255,.7), 0 6px 16px rgba(14,90,167,.12);
    animation:salita linear infinite;
  }
  @keyframes salita{
    0%{transform:translateY(0) translateX(0) scale(1)}
    50%{transform:translateY(-55vh) translateX(var(--drift,0)) scale(1.06)}
    100%{transform:translateY(-120vh) translateX(0) scale(1)}
  }

  /* ---- layout ---- */
  .wrap{
    position:relative;
    z-index:2;
    width:100%;
    max-width:440px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .back{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--blu);
    text-decoration:none;
    font-weight:600;
    font-size:.9rem;
    background:rgba(255,255,255,.72);
    padding:9px 15px;
    border-radius:999px;
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
  }

  .card{
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(7px) saturate(1.12);
    backdrop-filter:blur(7px) saturate(1.12);
    border:1px solid rgba(255,255,255,.65);
    border-radius:22px;
    box-shadow:0 20px 50px rgba(14,90,167,.20);
    padding:26px 20px 22px;
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .card{background:rgba(255,255,255,.95)}
    .back{background:rgba(255,255,255,.92)}
  }

  .brand{
    text-align:center;
    margin-bottom:16px;
  }
  .brand__logo{
    display:inline-block;
    height:54px;
    width:auto;
  }

  h1{
    color:var(--blu);
    font-size:1.4rem;
    line-height:1.22;
    text-align:center;
    margin-bottom:8px;
  }
  .intro{
    font-size:.92rem;
    text-align:center;
    color:#4a5b64;
    margin-bottom:20px;
  }
  .intro b{color:var(--blu-scuro);font-weight:600}

  .msg{padding:14px 15px;border-radius:12px;margin-bottom:16px;font-size:.92rem}
  .msg--ok{background:var(--verde-chiaro);color:#1f6b1b;border:1px solid #b7e0b3}
  .msg--err{background:#fdecea;color:#a52a2a;border:1px solid #f3c1bc}
  .msg strong{font-weight:700}

  .riga{margin-bottom:14px}
  .riga.due{display:grid;grid-template-columns:1fr;gap:14px}
  @media (min-width:430px){
    .riga.due{grid-template-columns:1fr 1fr;gap:12px}
  }
  .tre-box{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px}
  .tre-box input{text-align:center;letter-spacing:.04em}
  label{
    display:block;
    font-weight:600;
    font-size:.85rem;
    margin-bottom:6px;
    color:var(--blu-scuro);
  }
  label .opz{font-weight:400;color:#7c8b95}
  input[type=text],input[type=email],input[type=tel]{
    width:100%;
    font-family:inherit;
    font-size:16px;                 /* 16px: evita lo zoom automatico su iPhone */
    padding:14px 15px;
    border:1.5px solid var(--bordo);
    border-radius:12px;
    background:#fff;
    color:var(--testo);
    -webkit-appearance:none;
    appearance:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  input:focus{
    outline:none;
    border-color:var(--blu);
    box-shadow:0 0 0 3px rgba(14,90,167,.15);
  }
  input::placeholder{color:#9db2c0}

  .check{
    display:flex;
    gap:11px;
    align-items:flex-start;
    font-size:.85rem;
    line-height:1.45;
    margin:4px 0 12px;
  }
  .check input{
    margin-top:2px;
    width:22px;height:22px;
    flex-shrink:0;
    accent-color:var(--verde);
  }
  .check label{font-weight:400;margin:0;color:var(--testo)}
  .check a{color:var(--blu)}

  /* honeypot anti-spam: nascosto agli utenti */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  .btn{
    display:block;
    width:100%;
    margin-top:6px;
    padding:16px 20px;
    min-height:54px;
    border:0;
    border-radius:999px;
    background:var(--verde);
    color:#fff;
    font-family:inherit;
    font-weight:700;
    font-size:1.05rem;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(58,170,53,.35);
    -webkit-tap-highlight-color:transparent;
    transition:background .15s ease, transform .1s ease;
  }
  .btn:hover{background:#2e9129}
  .btn:active{transform:translateY(1px)}
  .btn:disabled{opacity:.7;cursor:default}

  .note{font-size:.77rem;color:#6b7c86;text-align:center;margin-top:14px}
  .mini{font-size:.76rem;color:#5f7883;text-align:center;padding:0 10px}

  @media (prefers-reduced-motion:reduce){
    .bolla{animation:none!important}
  }