/*
 * Recupero password APP Fornitori.
 * Variante magenta dello standard visivo usato da APP Lavoratori.
 * Il foglio e' volutamente separato: non altera autenticazione o altre schermate.
 */

#recoveryPanel {
    --recovery-main: #e6007e;
    --recovery-bright: #ff1493;
    --recovery-deep: #9e005d;
    --recovery-ink: #311126;
    --recovery-soft: #fff0f8;
    --recovery-line: #f3bddb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#recoveryPanel .supplier-recovery-intro {
    margin-bottom: 24px;
}

#recoveryPanel .supplier-recovery-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border: 1px solid #ffb6dc;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .92) 0 8%, transparent 30%),
        linear-gradient(145deg, var(--recovery-bright) 0%, var(--recovery-main) 58%, var(--recovery-deep) 100%);
    box-shadow: 0 7px 18px rgba(158, 0, 93, .28), inset 0 1px 0 rgba(255, 255, 255, .65);
    color: #fff;
    font-size: 34px;
}

#recoveryPanel .supplier-recovery-intro h1 {
    color: var(--recovery-main);
    font-size: 24px;
}

#recoveryPanel .supplier-recovery-intro p {
    color: #6f5d69;
    font-size: 15px;
}

#recoveryPanel .supplier-recovery-workflow {
    border-color: #efd7e5;
    box-shadow: 0 8px 26px rgba(113, 16, 73, .11);
}

#recoveryPanel .supplier-recovery-section {
    position: relative;
    padding: 24px;
}

#recoveryPanel .supplier-recovery-reset .supplier-recovery-section {
    border-top-color: #f0dce7;
}

#recoveryPanel .supplier-recovery-section h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #7c536b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
}

#recoveryPanel .supplier-recovery-section h2::before {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--recovery-bright), var(--recovery-deep));
    color: #fff;
    box-shadow: 0 3px 8px rgba(158, 0, 93, .22);
    font-size: 12px;
    line-height: 1;
}

#recoveryPanel #recoveryRequestForm h2::before { content: "1"; }
#recoveryPanel #recoveryResetForm .supplier-recovery-section:nth-of-type(1) h2::before { content: "2"; }
#recoveryPanel #recoveryResetForm .supplier-recovery-section:nth-of-type(2) h2::before { content: "3"; }

#recoveryPanel .supplier-recovery-field input {
    min-height: 52px;
    border: 1px solid #e4cad9;
    border-radius: 12px;
    background: #fffafb;
    color: var(--recovery-ink);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#recoveryPanel .supplier-recovery-field input:focus {
    border-color: var(--recovery-main);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(230, 0, 126, .10);
}

#recoveryPanel .supplier-registration-eye {
    color: var(--recovery-main);
}

#recoveryPanel .supplier-registration-eye:hover:not(:disabled),
#recoveryPanel .supplier-registration-eye:focus-visible {
    background: var(--recovery-soft);
}

#recoveryPanel .supplier-registration-eye:focus-visible {
    outline: 2px solid var(--recovery-main);
    outline-offset: -2px;
}

#recoveryPanel button.primary.supplier-recovery-button.attestiamo-glossy-button {
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 700;
}

/*
 * Override circoscritto: la vecchia regola blu nel foglio condiviso ha una
 * specificita superiore allo standard glossy centrale. Manteniamo qui la
 * stessa struttura glossy, alimentata esclusivamente dalla palette magenta.
 */
#recoveryPanel button.primary.supplier-recovery-button.attestiamo-glossy-button.attestiamo-glossy-magenta:not(:disabled) {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(var(--att-gloss-ice-rgb), 0.82) 5%,
            rgba(var(--att-gloss-highlight-rgb), 0.62) 14%,
            rgba(var(--att-gloss-light-rgb), 0.18) 29%,
            rgba(255, 255, 255, 0) 40%),
        radial-gradient(ellipse at 50% 12%,
            var(--att-gloss-light) 0%,
            var(--att-gloss-bright) 31%,
            var(--att-gloss-main) 52%,
            var(--att-gloss-deep) 74%,
            var(--att-gloss-dark) 100%);
}

#recoveryPanel button.primary.supplier-recovery-button.attestiamo-glossy-button.attestiamo-glossy-magenta:not(:disabled):hover,
#recoveryPanel button.primary.supplier-recovery-button.attestiamo-glossy-button.attestiamo-glossy-magenta:not(:disabled):focus-visible {
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            rgba(var(--att-gloss-ice-rgb), 0.92) 6%,
            rgba(var(--att-gloss-highlight-rgb), 0.72) 15%,
            rgba(var(--att-gloss-light-rgb), 0.22) 30%,
            rgba(255, 255, 255, 0) 41%),
        radial-gradient(ellipse at 50% 10%,
            var(--att-gloss-highlight) 0%,
            var(--att-gloss-bright) 30%,
            var(--att-gloss-main) 51%,
            var(--att-gloss-deep) 73%,
            var(--att-gloss-dark) 100%);
}

#recoveryPanel button.primary.supplier-recovery-button.attestiamo-glossy-button:disabled {
    opacity: .38;
    filter: saturate(.65);
}

#recoveryPanel .supplier-recovery-registration-note {
    border-color: var(--recovery-line);
    background: var(--recovery-soft);
    color: #6b214c;
}

#recoveryPanel .supplier-recovery-registration-note button,
#recoveryPanel .supplier-recovery-login button {
    color: var(--recovery-main);
    font-weight: 700;
}

#recoveryPanel .supplier-recovery-otp-info strong {
    color: var(--recovery-ink);
}

#recoveryPanel .supplier-recovery-otp {
    display: grid;
    grid-template-columns: repeat(6, 42px);
    justify-content: center;
    gap: 10px;
    margin: 16px 0;
}

#recoveryPanel .supplier-recovery-otp-digit {
    width: 42px !important;
    min-width: 42px;
    max-width: 42px;
    height: 52px;
    margin: 0;
    border: 2px solid #ead6e2;
    border-radius: 10px;
    background: #fff;
    color: var(--recovery-ink);
    font-size: 23px;
    font-weight: 700;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#recoveryPanel .supplier-recovery-otp-digit:focus {
    border-color: var(--recovery-main);
    outline: none;
    box-shadow: 0 0 0 3px rgba(230, 0, 126, .13);
    transform: scale(1.05);
}

#recoveryPanel .supplier-recovery-field input:disabled,
#recoveryPanel .supplier-recovery-otp-digit:disabled {
    border-color: #e7dfe4;
    background: #f5f2f4;
    color: #b6aab1;
}

#recoveryPanel .supplier-recovery-timer strong {
    color: var(--recovery-main);
}

#recoveryPanel .supplier-recovery-login {
    margin-top: 20px;
}

@media (max-width: 480px) {
    #recoveryPanel .supplier-recovery-section { padding: 20px 16px; }
    #recoveryPanel .supplier-recovery-otp {
        grid-template-columns: repeat(6, minmax(34px, 40px));
        gap: 6px;
    }
    #recoveryPanel .supplier-recovery-otp-digit {
        width: 100% !important;
        min-width: 0;
        max-width: none;
        height: 50px;
    }
}