@charset "UTF-8";
/* =====================================================================
   ElbaMyLove CMS · Login
   Sfondo animato (Ken Burns) + overlay mare, card di vetro fluttuante.
   Palette: mare/teal + accento brand rosso + oro turistico.
   ===================================================================== */

:root{
    --eml-red:#ED3439;          /* rosso brand (cuore logo) */
    --eml-red-dark:#c81f24;
    --eml-sea:#9b1c42;          /* WINE / bordeaux: accento */
    --eml-sea-deep:#2a1020;     /* aubergine scuro */
    --eml-purple:#6e2a86;       /* viola */
    --eml-gold:#6e2a86;
    --eml-ink:#3a0f24;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

.login-body{
    margin:0;
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
    min-height:100vh;
    min-height:100svh;
    color:#fff;
    overflow:hidden;
}

/* Il form runat=server avvolge tutto: lo rendo io il contenitore che
   centra la card verticalmente e orizzontalmente. */
#form1{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ---------- Sfondo foto con lento zoom (Ken Burns) ---------- */
.login-bg{
    position:fixed; inset:0;
    background:url('../App_Images/cms-login.elbamylove.jpg') center/cover no-repeat;
    transform:scale(1.08);
    animation:emlKenBurns 28s ease-in-out infinite alternate;
    z-index:0;
}
@keyframes emlKenBurns{
    from{ transform:scale(1.08) translate(0,0); }
    to  { transform:scale(1.18) translate(-2%,-2%); }
}

/* ---------- Overlay bordeaux/aubergine + vignettatura ---------- */
.login-overlay{
    position:fixed; inset:0; z-index:1;
    background:
        radial-gradient(120% 90% at 50% 10%, rgba(155,28,66,.28), transparent 55%),
        linear-gradient(160deg, rgba(42,16,32,.82) 0%, rgba(58,15,36,.74) 45%, rgba(24,10,22,.9) 100%);
}
/* riflessi luminosi animati, sensazione "acqua" */
.login-overlay::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
    background-size:300% 300%;
    animation:emlShimmer 12s linear infinite;
    mix-blend-mode:screen;
}
@keyframes emlShimmer{ from{background-position:0% 0%;} to{background-position:300% 300%;} }

/* ---------- Stage / centratura ---------- */
.login-stage{
    position:relative; z-index:2;
    margin:0;
    width:100%;
    max-width:430px;
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ---------- Card di vetro fluttuante ---------- */
.login-card{
    width:100%;
    background:rgba(15,38,52,.55);
    border:1px solid rgba(255,255,255,.16);
    border-radius:22px;
    padding:34px 30px 26px;
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    animation:emlFloatIn .7s cubic-bezier(.2,.8,.25,1) both, emlFloat 7s ease-in-out 1s infinite;
}
@keyframes emlFloatIn{
    from{ opacity:0; transform:translateY(26px) scale(.98); }
    to  { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes emlFloat{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-7px); }
}

.login-card__brand{ text-align:center; margin-bottom:18px; }
.login-logo{ width:190px; max-width:72%; height:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.login-claim{
    margin:.6rem 0 0;
    font-size:.78rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
}

.login-title{
    font-size:1.18rem;
    font-weight:600;
    text-align:center;
    margin:0 0 1.2rem;
    color:#fff;
}

/* ---------- Campi ---------- */
.login-card .form-floating > label{
    color:rgba(255,255,255,.72);
    padding:1rem .85rem;
}
/* Bootstrap disegna un ::after bianco dietro la label flottante: su vetro scuro
   diventa un rettangolo. Lo rendo trasparente. */
.login-card .form-floating > label::after{
    background-color:transparent !important;
}
.login-card .form-control{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    border-radius:12px;
}
.login-card .form-control:focus{
    background:rgba(255,255,255,.16);
    border-color:var(--eml-sea);
    box-shadow:0 0 0 .2rem rgba(155,28,66,.30);
    color:#fff;
}
.login-card .form-control:-webkit-autofill{
    -webkit-text-fill-color:#fff;
    transition:background-color 9999s ease-in-out 0s;
}
.login-card .form-floating > .form-control:focus ~ label,
.login-card .form-floating > .form-control:not(:placeholder-shown) ~ label{
    color:rgba(255,255,255,.85);
}

/* toggle mostra password */
.login-pass{ position:relative; }
.login-pass__toggle{
    position:absolute; top:50%; right:10px; transform:translateY(-50%);
    background:transparent; border:0; color:rgba(255,255,255,.7);
    font-size:1.1rem; cursor:pointer; padding:6px; line-height:1; z-index:5;
}
.login-pass__toggle:hover{ color:#fff; }

.login-row{ font-size:.9rem; }
.login-card .form-check-label{ color:rgba(255,255,255,.85); }

/* Switch DEFINIZIONE COMPLETA e autosufficiente (non dipende da eml-forms.css,
   cosi' e' immune alla cache). appearance:none -> disegno io track + knob. */
.login-card .form-switch{ display:inline-flex; align-items:center; gap:.5em; padding-left:0; min-height:auto; }
.login-card .form-switch .form-check-input{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    flex:0 0 auto;
    float:none;
    margin:0;
    font-size:1rem;
    width:2.4em;
    height:1.3em;
    border:0;
    border-radius:1em;
    background-color:rgba(255,255,255,.22);
    background-repeat:no-repeat;
    background-position:.18em center;
    background-size:.94em .94em;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='8' fill='%23ffffff'/%3e%3c/svg%3e");
    box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
    cursor:pointer;
    transition:background-color .2s ease, background-position .2s ease;
    vertical-align:middle;
}
.login-card .form-switch .form-check-input:checked{
    background-color:var(--eml-sea);
    background-position:calc(100% - .18em) center;
}
.login-card .form-switch .form-check-input:focus-visible{
    outline:0;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.2), 0 0 0 .2rem rgba(155,28,66,.35);
}
.login-card .form-switch .form-check-label{ cursor:pointer; margin:0; }

/* ---------- Bottone entra (accento brand) ---------- */
.btn-login{
    background:linear-gradient(135deg, var(--eml-red) 0%, var(--eml-red-dark) 100%);
    border:0; color:#fff; font-weight:600; letter-spacing:.02em;
    padding:.8rem 1rem; border-radius:12px;
    box-shadow:0 8px 22px rgba(237,52,57,.38);
    transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-login:hover{ filter:brightness(1.06); box-shadow:0 10px 26px rgba(237,52,57,.5); color:#fff; }
.btn-login:active{ transform:translateY(1px); }
.btn-login.is-loading{ pointer-events:none; opacity:.85; }

/* ---------- Alert errore ---------- */
.login-alert{
    display:flex; align-items:center; gap:.55rem;
    background:rgba(237,52,57,.18);
    border:1px solid rgba(237,52,57,.5);
    color:#ffe2e3;
    border-radius:12px;
    padding:.7rem .85rem;
    font-size:.9rem;
    margin-bottom:1rem;
}
.login-alert .bi{ font-size:1.05rem; }

.login-foot{
    text-align:center; margin:1.1rem 0 0;
    font-size:.78rem; color:rgba(255,255,255,.6);
}
.login-copy{
    margin-top:18px; font-size:.75rem; color:rgba(255,255,255,.55); text-align:center;
}

/* ---------- Mobile ---------- */
@media (max-width:480px){
    .login-card{ padding:26px 20px 22px; border-radius:18px; }
    .login-logo{ width:160px; }
    .login-title{ font-size:1.06rem; }
    /* su mobile riduciamo l'ondeggiamento per non distrarre durante la digitazione */
    .login-card{ animation:emlFloatIn .7s cubic-bezier(.2,.8,.25,1) both; }
}

/* Rispetta chi preferisce meno animazioni */
@media (prefers-reduced-motion:reduce){
    .login-bg,.login-overlay::after,.login-card{ animation:none !important; }
    .login-bg{ transform:scale(1.05); }
}