/*
 * Develancer R193-B2
 * Persian visual digits, compact role cards and in-field eye buttons.
 */

body.dv193-auth-active {
    --dv193-navy: #10203d;
    --dv193-blue: #2563eb;
    --dv193-purple: #7042e9;
    --dv193-border: #d9e4f2;
    --dv193-muted: #6d7d92;
    --dv193-error: #c63e55;
}

body.dv193-auth-active .dv193-auth-card {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #dde7f3 !important;
    border-radius: 27px !important;
    box-shadow:
        0 22px 58px rgba(15, 23, 42, .09) !important;
}

body.dv193-auth-active .dv193-flow-head {
    margin: 0 0 22px !important;
    padding: 17px 18px !important;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(80, 123, 255, .15),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #f8fbff,
            #f2f7ff
        ) !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 20px !important;
}

body.dv193-auth-active .dv193-flow-head strong {
    display: block !important;
    color: var(--dv193-navy) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.9 !important;
}

body.dv193-auth-active .dv193-flow-head p {
    margin: 4px 0 0 !important;
    color: var(--dv193-muted) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    line-height: 1.9 !important;
}

body.dv193-auth-active .dv193-stepper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

body.dv193-auth-active .dv193-step {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 6px 9px !important;
    background: rgba(255, 255, 255, .76) !important;
    border: 1px solid #dfe8f4 !important;
    border-radius: 12px !important;
    color: #758399 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
}

body.dv193-auth-active .dv193-step b {
    display: inline-flex !important;
    flex: 0 0 23px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 23px !important;
    height: 23px !important;
    border-radius: 8px !important;
    background: #edf2f8 !important;
    color: #708096 !important;
    font-size: 10px !important;
}

body.dv193-auth-active .dv193-step.is-done {
    color: #24614a !important;
    border-color: #caeadc !important;
    background: #f4fcf8 !important;
}

body.dv193-auth-active .dv193-step.is-done b {
    color: #14714e !important;
    background: #dff6eb !important;
}

body.dv193-auth-active .dv193-step.is-current {
    color: #1d4fa8 !important;
    border-color: #bfd4f3 !important;
    background: #edf5ff !important;
}

body.dv193-auth-active .dv193-step.is-current b {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            var(--dv193-blue),
            var(--dv193-purple)
        ) !important;
}

body.dv193-auth-active form.dv193-auth-form {
    position: relative !important;
}

body.dv193-auth-active form.dv193-auth-form input:not(
    [type="radio"]
):not(
    [type="checkbox"]
):not(
    [type="hidden"]
),
body.dv193-auth-active form.dv193-auth-form select,
body.dv193-auth-active form.dv193-auth-form textarea {
    width: 100% !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    padding: 11px 14px !important;
    background: #ffffff !important;
    border: 1px solid #cedbea !important;
    border-radius: 15px !important;
    color: #17243a !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    outline: none !important;
    transition:
        border-color .17s ease,
        box-shadow .17s ease,
        background-color .17s ease !important;
}

body.dv193-auth-active
form.dv193-auth-form
input:focus,
body.dv193-auth-active
form.dv193-auth-form
select:focus,
body.dv193-auth-active
form.dv193-auth-form
textarea:focus {
    border-color: #6c96e8 !important;
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, .10) !important;
}

body.dv193-auth-active
.dv193-persian-phone,
body.dv193-auth-active
.dv193-persian-code {
    direction: ltr !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .8px !important;
}

body.dv193-auth-active
.dv193-persian-code {
    font-size: 19px !important;
    letter-spacing: 3px !important;
}

body.dv193-auth-active .dv193-field-shell {
    position: relative !important;
}

body.dv193-auth-active
.dv193-field-shell.dv193-invalid
input,
body.dv193-auth-active
.dv193-field-shell.dv193-invalid
select,
body.dv193-auth-active
.dv193-field-shell.dv193-invalid
textarea {
    border-color: #db7b8a !important;
    background: #fffafb !important;
    box-shadow:
        0 0 0 3px rgba(198, 62, 85, .07) !important;
}

body.dv193-auth-active .dv193-field-error {
    display: block !important;
    margin-top: 6px !important;
    color: var(--dv193-error) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.8 !important;
}

/*
 * Dedicated wrapper prevents the eye control from moving above the field.
 */
body.dv193-auth-active .dv193-password-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

body.dv193-auth-active
.dv193-password-wrap
> input {
    padding-left: 49px !important;
}

body.dv193-auth-active .dv193-password-eye {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    color: #52667f !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.dv193-auth-active
.dv193-password-eye:hover {
    color: #245fc0 !important;
    background: #eef5ff !important;
}

body.dv193-auth-active
.dv193-password-eye:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .12) !important;
}

body.dv193-auth-active
.dv193-password-eye svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
}

/*
 * Compact, controlled role cards.
 */
body.dv193-auth-active .dv193-role-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 9px 0 5px !important;
}

body.dv193-auth-active .dv193-role-card {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 104px !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    color: #10213d !important;
    background: #fbfdff !important;
    border: 1px solid #d9e4f1 !important;
    border-radius: 18px !important;
    cursor: pointer !important;
    transition:
        border-color .17s ease,
        background-color .17s ease,
        transform .17s ease,
        box-shadow .17s ease !important;
}

body.dv193-auth-active
.dv193-role-card:hover {
    transform: translateY(-1px) !important;
    border-color: #b9cdeb !important;
    box-shadow:
        0 9px 22px rgba(15, 23, 42, .055) !important;
}

body.dv193-auth-active
.dv193-role-card.is-selected {
    background: #edf5ff !important;
    border-color: #6f9be7 !important;
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .09) !important;
}

body.dv193-auth-active
.dv193-role-card
input[type="radio"] {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    margin: 3px 0 0 !important;
    accent-color: var(--dv193-blue) !important;
}

body.dv193-auth-active .dv193-role-copy {
    display: block !important;
    min-width: 0 !important;
}

body.dv193-auth-active
.dv193-role-copy strong {
    display: block !important;
    margin: 0 0 4px !important;
    color: #10213d !important;
    font-size: 13.5px !important;
    font-weight: 950 !important;
    line-height: 1.7 !important;
}

body.dv193-auth-active
.dv193-role-copy span {
    display: block !important;
    margin: 0 !important;
    color: #66778e !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.85 !important;
}

body.dv193-auth-active
.dv193-auth-form
button[type="submit"],
body.dv193-auth-active
.dv193-auth-form
input[type="submit"] {
    min-height: 49px !important;
    border: 0 !important;
    border-radius: 15px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

body.dv193-auth-active .dv193-primary-submit {
    color: #ffffff !important;
    background:
        linear-gradient(
            105deg,
            var(--dv193-blue),
            var(--dv193-purple)
        ) !important;
    box-shadow:
        0 13px 28px rgba(67, 56, 202, .21) !important;
}

@media (max-width: 720px) {
    body.dv193-auth-active .dv193-stepper {
        gap: 5px !important;
    }

    body.dv193-auth-active .dv193-step {
        display: grid !important;
        justify-items: center !important;
        min-height: 52px !important;
        padding: 6px 4px !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    body.dv193-auth-active .dv193-role-group {
        grid-template-columns: 1fr !important;
    }

    body.dv193-auth-active .dv193-role-card {
        min-height: 76px !important;
    }
}