html, body {
  height: 100%;
  margin: 0;
}


body {
font-family: 'Poppins', sans-serif;
margin: 0;
}

/*====================
LOGO testo
==================*/


/* Brand */
/*  --sl-primary:        #8b5cf6;*/       /* viola principale */
--sl-primary:        #5A189A;       /* viola principale */
--sl-primary-light:  #a78bfa;
--sl-primary-dark:   #6d28d9;
--sl-accent:         #ec4899;       /* rosa accent */
--sl-gradient:       linear-gradient(135deg, #8b5cf6 0%, #e91e63 100%);

    .sl-auth-page {
        min-height: 100vh;
        /* background: #9422f2; */
        background: radial-gradient(circle, rgba(148, 34, 242, 0.24) 0%, rgba(193, 22, 245, 0.13) 41%, rgba(241, 245, 241, 1) 70%, rgba(241, 245, 241, 1) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        font-family: var(--sl-font);
        position: relative;
        overflow: hidden;
}

    .auth-card {
        /*background: #FFFFFF;*/
        background: rgba(135, 135, 180, .06);
        border-radius: 16px;
        padding: 2.5rem;
        width: 100%;
        max-width: 420px;
        box-shadow: 0 8px 20px rgba(111, 66, 193, 0.25);
        /*
        box-shadow: 0 8px 32px rgba(0,0,0,.4);*/

      }

      .center {

        display: flex;
        flex-direction: column;
        align-items: center;   /* centra orizzontalmente */
        text-align: center;    /* centra il testo */

    }
/*=====================
INTESTAZONE Logo
============*/

    .monsieur-la-doulaise-regular {
      font-family: "Monsieur La Doulaise", cursive;
      font-weight: 400;
      font-size: 48px;
      font-style: normal;
    }
/*
    .auth-logo {
        font-family: "Monsieur La Doulaise", cursive;
        font-size: 2.8rem;
        font-weight: 700;
        background: linear-gradient(135deg,#8B2FC9,#E91E8C);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


*/

.auth-logo{
    display: flex;
    align-items: center;   /* allineamento verticale */
    justify-content: center; /* mantiene tutto centrato nella card */
    gap: 8px;              /* spazio tra logo e testo */
    font-family: "Monsieur La Doulaise", cursive;
    font-size: 2.8rem;
    font-weight: 700;
    background: linear-gradient(135deg,#8B2FC9,#E91E8C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-img{
    width: 48px;
    height: 48px;
    background:#fff;
    border-radius:50%;
    padding:8px;
    object-fit:contain;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}

    .sl-auth-title {
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      color: var(--sl-primary);
      margin-bottom: 6px;
    }
    .sl-auth-subtitle {
      font-size: 14px;
      /*color:#f8f9fa;*/
      color: #71717a;
      text-align: center;
      margin-bottom: 28px;
    }

    .form-control {
      width: 100%;
      padding: 11px 14px;
      /*background: rgba(255,255,255,.35);*/
      background: rgb(40 30 60 / 35%);
      border: 1.5px solid rgba(255,255,255,.1);
      border-radius: var(--sl-radius-sm);
      color: #6c757d;
      font-family: var(--sl-font);
      font-size: 14px;
      outline: none;
      transition: border-color var(--sl-transition), box-shadow var(--sl-transition);

    }



        .form-control:focus {

          border-color: var(--sl-primary);
          box-shadow: 0 0 0 3px rgba(139,92,246,.12);

          /*  background: #ffffff;
            border-color: #8B2FC9;
            color: #fff;
            box-shadow: 0 0 0 3px rgba(139,47,201,.2);*/
        }

    .btn-signin {
        background: linear-gradient(135deg,#8B2FC9,#E91E8C);
        border: none;
        border-radius: 8px;
        color: #fff;
        font-weight: 600;
        padding: .75rem;
        width: 100%;
    }

        .btn-signin:hover {
            opacity: .9;
            color: #fff;
        }

  /*  label {
        color: #ccc;
        font-size: .9rem;
    }*/

    label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #52525b;
    /* color: #a1a1aa; */
    margin-bottom: 6px;
}

    .divider {
        color: #fff;
        text-align: center;
        margin: 1rem 0;
    }

    small a {
        color: #8B2FC9;
        text-decoration: none;
    }

        small a:hover {
            text-decoration: underline;
        }
.sl-text-center-footer {
  color:#fff;
}

.toggle-pwd {
  position:absolute;
  right:12px;top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

  /*===================
  conferma email
  ==================*/

  .step-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #845ef7);
    color: #fff;
    font-size: 28px;
    box-shadow: 0 8px 20px rgba(111, 66, 193, 0.25);
    transition: all 0.3s ease;
}

.mail-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #8B2FC9;
}

.mail-icon svg {
    width: 48px;
    height: 48px;
}