/* Shared login and registration form styling. */
.auth-wrapper {
    width: min(100%, 420px);
    padding: 30px 26px;
    border: 1px solid #ffedd5;
    border-radius: 20px;
    background: linear-gradient(160deg, #ffffff 0%, #fffaf5 100%);
    box-shadow: 0 18px 48px rgba(154, 52, 18, .12), 0 4px 14px rgba(154, 52, 18, .05);
    animation: auth-card-in .35s ease-out both;
}

.auth-wrapper .dv-title h3 {
    font-family: 'Poppins', sans-serif;
    border-left: 4px solid #f97316 !important;
    color: #9a3412;
    margin-bottom: 22px;
}

.auth-wrapper .input-field {
    margin: 0 0 17px;
    width: 100%;
}

.auth-wrapper .input-field .input-label {
    display: block;
    color: #57534e;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 7px;
    transition: color .2s ease, transform .2s ease;
}

.auth-wrapper .input-field:focus-within .input-label {
    color: #ea580c;
    transform: translateX(2px);
}

.auth-wrapper .input-field .input {
    min-width: 0;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    color: #292524;
    background: #ffffff;
    border: 1.5px solid #e7d9ce;
    border-radius: 11px;
    outline: none;
    box-shadow: 0 2px 4px rgba(120, 53, 15, .025);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}

.auth-wrapper .input-field .input:hover {
    border-color: #fdba74;
    background: #fffdfa;
}

.auth-wrapper .input-field .input:focus {
    border-color: #f97316;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, .14), 0 5px 12px rgba(154, 52, 18, .07);
    transform: translateY(-1px);
}

.auth-wrapper .input-field .input::placeholder {
    color: #a8a29e;
}

.auth-password-wrap {
    position: relative;
}

.auth-wrapper .auth-password-wrap .input {
    padding-right: 54px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 39px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #78716c;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
    background: #ffedd5;
    color: #c2410c;
    outline: none;
}

.auth-password-toggle[aria-pressed="true"] {
    color: #ea580c;
}

.auth-field-hint {
    display: block;
    margin-top: 6px;
    color: #78716c;
    font-size: 12px;
    line-height: 1.4;
}

.auth-wrapper .btnlogin,
.auth-wrapper .btnlogin2 {
    min-height: 46px;
    margin-top: 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: linear-gradient(120deg, #fb923c, #ea580c);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(234, 88, 12, .2);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.auth-wrapper .btnlogin:hover,
.auth-wrapper .btnlogin2:hover,
.auth-wrapper .btnlogin:focus-visible,
.auth-wrapper .btnlogin2:focus-visible {
    background: linear-gradient(120deg, #fb923c, #ea580c);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 11px 20px rgba(234, 88, 12, .28);
    filter: saturate(1.08);
}

.auth-wrapper .btnlogin:active,
.auth-wrapper .btnlogin2:active {
    transform: translateY(0);
}

.auth-wrapper #password-strength-container {
    margin-top: 9px;
}

.auth-wrapper #password-strength-text {
    line-height: 1.45;
}

@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .auth-wrapper {
        width: 100%;
        padding: 22px 17px;
        border-radius: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-wrapper { animation: none; }
    .auth-wrapper .input-field .input,
    .auth-wrapper .input-field .input-label,
    .auth-password-toggle,
    .auth-wrapper .btnlogin,
    .auth-wrapper .btnlogin2 { transition: none; }
}