/* =========================================================
   SSHNETPLUS v258 — Redesign real do formulário
   Corrige Chrome Autofill + compacta e-mail + alinhamentos.
   NÃO altera lógica.
   ========================================================= */

:root{
    --v258-bg:#07101a;
    --v258-bg2:#0a1420;
    --v258-bg3:#0d1928;
    --v258-line:rgba(121,155,201,.22);
    --v258-line-focus:#2995ff;
    --v258-text:#f6f9ff;
    --v258-muted:#7f93ac;
    --v258-muted2:#62758f;
    --v258-blue:#2496ff;
    --v258-green:#27d17f;
}

/* ---------- CARD PRINCIPAL ---------- */
html body #testForm .customer-data-card{
    padding:22px!important;
    border:1px solid rgba(89,135,194,.18)!important;
    border-radius:20px!important;
    background:
        radial-gradient(circle at 92% -10%,rgba(36,150,255,.085),transparent 260px),
        linear-gradient(180deg,#0b1420 0%,#09111a 100%)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 18px 42px rgba(0,0,0,.20)!important;
}

html body #testForm .customer-data-card__header{
    grid-template-columns:46px minmax(0,1fr) auto!important;
    gap:13px!important;
    padding-bottom:16px!important;
    margin-bottom:18px!important;
    border-bottom:1px solid rgba(123,151,188,.13)!important;
}

html body #testForm .customer-data-card__header strong{
    font-size:15px!important;
    line-height:1.2!important;
    letter-spacing:-.015em!important;
}

html body #testForm .customer-data-card__header small{
    margin-top:3px!important;
    font-size:10.5px!important;
    line-height:1.4!important;
    color:#8091a8!important;
}

/* ---------- GRID REAL ---------- */
html body #testForm .form-grid--customer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(310px,360px)!important;
    column-gap:18px!important;
    row-gap:14px!important;
    align-items:start!important;
}

html body #testForm .form-grid--customer > .modern-field,
html body #testForm .form-grid--customer > .modern-field-group,
html body #testForm .form-grid--customer > .field-full{
    grid-column:1!important;
    min-width:0!important;
}

html body #testForm .form-grid--customer > #emailVerificationBox,
html body #testForm .form-grid--customer > .email-verify-card{
    grid-column:2!important;
    grid-row:1 / span 4!important;
    align-self:start!important;
}

/* Caso o card de e-mail não esteja dentro da grid, o JS v258 adiciona classe. */
html body #testForm .customer-data-card.v258-email-side{
    --v258-email-width:350px;
}

html body #testForm .customer-data-card.v258-email-side .v258-form-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(310px,var(--v258-email-width))!important;
    gap:18px!important;
    align-items:start!important;
}

html body #testForm .customer-data-card.v258-email-side .v258-fields-column{
    min-width:0!important;
}

/* ---------- LABELS ---------- */
html body #testForm .modern-field__label{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:14px!important;
    margin-bottom:7px!important;
}

html body #testForm .modern-field__label > span{
    color:#f7faff!important;
    font-size:11.5px!important;
    font-weight:800!important;
    line-height:1.25!important;
}

html body #testForm .modern-field__label > small{
    max-width:58%!important;
    color:#6d829e!important;
    font-size:9.5px!important;
    line-height:1.3!important;
    text-align:right!important;
}

/* ---------- INPUTS ESCUROS ---------- */
html body #testForm .modern-input-shell{
    min-height:52px!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 30px!important;
    align-items:center!important;
    overflow:hidden!important;
    border:1px solid rgba(150,174,207,.55)!important;
    border-radius:14px!important;
    background:#070e16!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        inset 0 0 0 1px rgba(0,0,0,.10)!important;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}

html body #testForm .modern-input-shell:focus-within{
    border-color:var(--v258-line-focus)!important;
    background:#08121d!important;
    box-shadow:
        0 0 0 3px rgba(36,150,255,.14),
        inset 0 1px 0 rgba(255,255,255,.025)!important;
}

html body #testForm .modern-input-icon{
    width:44px!important;
    display:grid!important;
    place-items:center!important;
    color:#647994!important;
}

html body #testForm .modern-input-icon svg{
    width:17px!important;
    height:17px!important;
}

html body #testForm .modern-input-shell input,
html body #testForm .customer-data-card input{
    width:100%!important;
    min-width:0!important;
    height:50px!important;
    padding:0 8px 0 0!important;
    border:0!important;
    outline:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#f6f9ff!important;
    caret-color:#fff!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1!important;
    box-shadow:none!important;
}

html body #testForm .modern-input-shell input::placeholder,
html body #testForm .customer-data-card input::placeholder{
    color:#536a87!important;
    opacity:1!important;
    font-weight:600!important;
}

/* =========================================================
   CORREÇÃO CRÍTICA — CHROME / EDGE AUTOFILL
   É isso que estava deixando os inputs azul-claro no print.
   ========================================================= */
html body #testForm input:-webkit-autofill,
html body #testForm input:-webkit-autofill:hover,
html body #testForm input:-webkit-autofill:focus,
html body #testForm input:-webkit-autofill:active{
    -webkit-text-fill-color:#f6f9ff!important;
    caret-color:#f6f9ff!important;
    -webkit-box-shadow:0 0 0 1000px #070e16 inset!important;
    box-shadow:0 0 0 1000px #070e16 inset!important;
    border:0!important;
    transition:background-color 999999s ease-out 0s!important;
    background-clip:content-box!important;
}

html body #testForm input:autofill{
    color:#f6f9ff!important;
    background:#070e16!important;
    box-shadow:0 0 0 1000px #070e16 inset!important;
}

html body #testForm .modern-input-shell:has(input:-webkit-autofill){
    background:#070e16!important;
    border-color:rgba(150,174,207,.55)!important;
}

html body #testForm .modern-input-shell:has(input:-webkit-autofill:focus){
    border-color:var(--v258-line-focus)!important;
    box-shadow:0 0 0 3px rgba(36,150,255,.14)!important;
}

/* ---------- CHECK ---------- */
html body #testForm .modern-input-check{
    width:22px!important;
    height:22px!important;
    border-radius:50%!important;
    font-size:11px!important;
}

html body #testForm .modern-input-shell.is-filled .modern-input-check{
    color:#07120c!important;
    background:#3ee58d!important;
    box-shadow:0 0 12px rgba(62,229,141,.15)!important;
}

/* ---------- AJUDA ---------- */
html body #testForm .field-help,
html body #testForm .field-help--modern{
    margin-top:6px!important;
    color:#71849e!important;
    font-size:9.5px!important;
    line-height:1.4!important;
}

/* ---------- CARD E-MAIL: MENOR E SEM BURACO ---------- */
html body #testForm #emailVerificationBox,
html body #testForm .email-verify-card{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    align-self:start!important;
    padding:16px!important;
    overflow:hidden!important;
    border:1px solid rgba(54,137,237,.34)!important;
    border-radius:16px!important;
    background:
        radial-gradient(circle at 100% 0%,rgba(36,150,255,.11),transparent 180px),
        linear-gradient(180deg,#061d34,#06182a)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 14px 30px rgba(0,0,0,.16)!important;
}

/* neutraliza flex/height antigo que empurrava botão para baixo */
html body #testForm #emailVerificationBox *,
html body #testForm .email-verify-card *{
    box-sizing:border-box!important;
}

html body #testForm #emailVerificationBox > *,
html body #testForm .email-verify-card > *{
    flex:none!important;
}

html body #testForm #emailVerificationBox > div:first-child,
html body #testForm .email-verify-card > div:first-child{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:11px!important;
}

html body #testForm #emailVerificationBox strong,
html body #testForm .email-verify-card strong{
    margin:0 0 3px!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.2!important;
}

html body #testForm #emailVerificationBox p,
html body #testForm .email-verify-card p{
    margin:0!important;
    color:#8fa5c0!important;
    font-size:9.5px!important;
    line-height:1.42!important;
}

html body #testForm #emailVerificationStatus{
    align-self:start!important;
    padding:6px 9px!important;
    border:1px solid rgba(101,158,231,.24)!important;
    border-radius:999px!important;
    background:rgba(17,46,78,.48)!important;
    color:#9bb9de!important;
    font-size:8.5px!important;
    font-weight:800!important;
    line-height:1!important;
    white-space:nowrap!important;
}

html body #testForm #sendEmailVerificationCode{
    width:100%!important;
    min-height:44px!important;
    margin:16px 0 0!important;
    border:0!important;
    border-radius:11px!important;
    background:linear-gradient(180deg,#2fa5ff,#1785ee)!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:800!important;
    box-shadow:0 10px 22px rgba(23,133,238,.18)!important;
}

html body #testForm #emailVerificationCodeArea{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 124px!important;
    gap:8px!important;
    margin:10px 0 0!important;
}

html body #testForm #emailVerificationCode{
    min-width:0!important;
    height:42px!important;
    padding:0 11px!important;
    border:1px solid rgba(116,145,182,.22)!important;
    border-radius:10px!important;
    background:#050c14!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:800!important;
    letter-spacing:.06em!important;
    -webkit-text-fill-color:#fff!important;
}

html body #testForm #confirmEmailVerificationCode{
    height:42px!important;
    padding:0 10px!important;
    border:0!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,#31a8ff,#187fef)!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:800!important;
}

html body #testForm #emailVerificationBox small,
html body #testForm .email-verify-card small{
    display:block!important;
    margin:9px 0 0!important;
    color:#697f99!important;
    font-size:8.8px!important;
    line-height:1.4!important;
}

/* verificado */
html body #testForm #emailVerificationBox.is-verified,
html body #testForm #emailVerificationBox[data-email-verified="1"],
html body #testForm .email-verify-card.is-verified{
    border-color:rgba(39,209,127,.36)!important;
    background:
        radial-gradient(circle at 100% 0%,rgba(39,209,127,.10),transparent 180px),
        linear-gradient(180deg,#06271f,#061d19)!important;
}

html body #testForm #emailVerificationBox.is-verified #emailVerificationStatus,
html body #testForm #emailVerificationBox[data-email-verified="1"] #emailVerificationStatus{
    border-color:rgba(39,209,127,.30)!important;
    background:rgba(10,74,49,.52)!important;
    color:#8ef3b6!important;
}

/* ---------- FOOTER ---------- */
html body #testForm .customer-form-footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(360px,.78fr)!important;
    gap:14px!important;
    align-items:stretch!important;
    margin-top:18px!important;
    padding-top:18px!important;
    border-top:1px solid rgba(121,155,201,.12)!important;
}

html body #testForm .customer-privacy-box{
    min-height:66px!important;
    padding:13px 15px!important;
    border-radius:14px!important;
    border:1px solid rgba(39,209,127,.22)!important;
    background:linear-gradient(180deg,rgba(6,50,38,.50),rgba(5,38,31,.46))!important;
}

html body #testForm .customer-privacy-box strong{
    color:#58e99b!important;
    font-size:10.5px!important;
    font-weight:800!important;
}

html body #testForm .customer-privacy-box small{
    margin-top:2px!important;
    color:#6e9c89!important;
    font-size:8.8px!important;
}

html body #testForm #generateButton,
html body #testForm .primary-button--customer{
    min-height:66px!important;
    margin:0!important;
    border:1px solid rgba(66,159,255,.18)!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,#2ca2ff,#1682f0)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
    box-shadow:0 12px 26px rgba(22,130,240,.18)!important;
}

html body #testForm #generateButton:disabled,
html body #testForm .primary-button--customer:disabled{
    border-color:rgba(128,151,183,.12)!important;
    background:linear-gradient(180deg,#1b2431,#171f2b)!important;
    color:#657892!important;
    box-shadow:none!important;
    opacity:1!important;
}

html body #testForm .form-readiness-note{
    margin:7px 2px 0!important;
    color:#60758f!important;
    font-size:8.8px!important;
    text-align:right!important;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width:980px){
    html body #testForm .form-grid--customer{
        grid-template-columns:1fr!important;
    }

    html body #testForm .form-grid--customer > .modern-field,
    html body #testForm .form-grid--customer > .modern-field-group,
    html body #testForm .form-grid--customer > .field-full,
    html body #testForm .form-grid--customer > #emailVerificationBox,
    html body #testForm .form-grid--customer > .email-verify-card{
        grid-column:1!important;
        grid-row:auto!important;
    }

    html body #testForm .customer-data-card.v258-email-side .v258-form-layout{
        grid-template-columns:1fr!important;
    }

    html body #testForm .customer-form-footer{
        grid-template-columns:1fr!important;
    }
}

@media (max-width:720px){
    html body #testForm .customer-data-card{
        padding:15px!important;
        border-radius:17px!important;
    }

    html body #testForm .customer-data-card__header{
        grid-template-columns:40px minmax(0,1fr)!important;
    }

    html body #testForm .customer-data-card__badge{
        grid-column:1/-1!important;
        justify-self:start!important;
    }

    html body #testForm .modern-field__label{
        align-items:flex-start!important;
        flex-direction:column!important;
        gap:2px!important;
    }

    html body #testForm .modern-field__label > small{
        max-width:none!important;
        text-align:left!important;
    }

    html body #testForm #emailVerificationCodeArea{
        grid-template-columns:1fr!important;
    }

    html body #testForm #confirmEmailVerificationCode{
        width:100%!important;
    }

    html body #testForm #generateButton,
    html body #testForm .primary-button--customer{
        min-height:58px!important;
    }
}