/* ── sc-login-modal ── */

/* Overlay */
.sc-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(50, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: var(--sc-z-modal);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}

.sc-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sc-overlay__logo {
    width: 160px;
    margin-bottom: 20px;
}

/* Modal wrapper */
.sc-modal-wrapper {
    width: 460px;
    max-width: 90%;
}

.sc-modal-outer {
    color: white;
    border-radius: var(--sc-radius-md);
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 200, 120, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    padding: 6px;
}

.sc-modal-outer::before {
    content: "";
    position: absolute; inset: 0;
    box-sizing: border-box;
    border-radius: var(--sc-radius-md);
    padding: 2.5px;
    background:
        radial-gradient(at 50% 30%, rgba(254,254,240,1) 0%, rgba(254,232,166,0.5) 56%, rgba(244,179,101,0) 100%),
        linear-gradient(to bottom,
            hsl(33deg 87% 68% / 50%) 0%, hsl(45deg 98% 82% / 50%) 15%,
            hsl(60deg 88% 97% / 80%) 30%, hsl(56 100% 97% / 1) 35%,
            hsl(39deg 96% 78% / 70%) 60%, hsl(30deg 95% 71% / 50%) 90%,
            hsl(32deg 96% 68% / 50%) 100%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.sc-modal-inner {
    position: relative;
    background: var(--sc-color-surface-dark);
    box-sizing: border-box;
    border-radius: var(--sc-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: 2px solid #BB966A;
}

.sc-modal-inner::before {
    content: "";
    position: absolute; inset: 0;
    box-sizing: border-box;
    border-radius: var(--sc-radius-md);
    padding: 2.5px;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    filter: blur(8px);
}

/* Title */
.sc-modal__top-border {
    width: 100%;
    height: 25px;
    border-bottom: 2px solid #BB966A;
}

.sc-modal__title {
    width: 340px;
    height: 40px;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-top: -37px;
    letter-spacing: 1.3px;
    font-family: var(--sc-font-display);
    font-weight: 600;
    color: #FCC466;
    box-shadow:
        inset 0 0 12px rgba(255,200,0,0.45),
        0 0 32px rgba(255,170,40,0.35),
        0 0 60px rgba(255,140,0,0.25);
    border: 2px solid #BB966A;
    background: var(--sc-color-surface-dark);
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);
}

/* Close button */
.sc-modal__close {
    position: absolute;
    right: 14px; top: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #BB966A;
    font-family: var(--sc-font-display);
    z-index: 10;
    line-height: 1;
    padding: 4px 8px;
    transition: color 0.2s ease, transform 0.1s ease;
}

.sc-modal__close:hover { color: #FCC466; }
.sc-modal__close:active { transform: scale(0.92); }

/* Plano selecionado */
.sc-modal__plano {
    margin-top: 30px;
}
.sc-modal__plano p {
    font-family: var(--sc-font-display);
    color: #FDCB92;
    font-size: 15px;
}
.sc-modal__plano strong {
    color: #FCC466;
}

/* Login form */
.sc-login-form {
    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 310px;
    gap: 10px;
}

.sc-login-form * { margin: 0 !important; }

.sc-login-form__label {
    color: #F4BFA2;
    font-family: var(--sc-font-display);
    font-size: 14px;
}

.sc-login-form__desc {
    margin: 0;
    width: 100%;
    font-family: var(--sc-font-display);
    font-size: 13px;
    letter-spacing: 0.5px;
    font-weight: 400;
    color: #FDCB92;
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);
    text-align: center;
}

/* Divider */
.sc-login-form__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 4px 0;
}

.sc-login-form__divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #BB966A 40%, #BB966A 60%, transparent);
}

.sc-login-form__divider span {
    font-family: var(--sc-font-display);
    font-size: 13px;
    font-weight: 600;
    color: #BB966A;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Toggle senha */
.sc-login-form__toggle {
    font-family: var(--sc-font-display);
    font-size: 14px;
    color: #FDCB92;
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    border: none;
    background: none;
    padding: 0;
    transition: color 0.2s ease;
}

.sc-login-form__toggle:hover { color: #FCC466; }

/* Senha section */
.sc-login-form__senha {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    animation: sc-fadeSlideDown 0.25s ease;
}

.sc-login-form__senha.active { display: flex; }

@keyframes sc-fadeSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.sc-login-form__senha-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.sc-login-form__senha-box .sc-button--secondary {
    height: 44px;
    white-space: nowrap;
}

/* Alert / Success boxes */
.sc-modal__alert {
    background: radial-gradient(circle at 50% 40%, #7a1e18 0%, #5a1410 60%, #3d0d0a 100%);
    border: 1px solid #ff4c4c;
    border-radius: var(--sc-radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    color: #ff4c4c;
    min-width: 200px;
    width: 310px;
    box-shadow: inset 0 2px 5px rgba(255,0,0,0.7), 0 0 6px rgba(255,70,70,0.5);
    display: none;
    z-index: 1000;
    white-space: normal;
    line-height: 1.4;
    font-family: var(--sc-font-display);
}

.sc-modal__success {
    background: radial-gradient(circle at 50% 40%, #1a5c2a 0%, #14491e 60%, #0d3a14 100%);
    border: 1px solid #4cff7c;
    border-radius: var(--sc-radius-sm);
    padding: 14px 16px;
    font-size: 13px;
    color: #b8ffc8;
    width: 310px;
    box-shadow: inset 0 2px 5px rgba(0,100,0,0.4), 0 0 6px rgba(76,255,124,0.3);
    display: none;
    white-space: normal;
    line-height: 1.5;
    font-family: var(--sc-font-display);
    text-align: center;
}

.sc-modal__success.active { display: block; }

/* Terms */
.sc-modal__termos {
    font-size: 12px;
    font-family: var(--sc-font-display);
    color: #F4BFA2;
    opacity: 0.8;
    padding: 0 20px 16px;
}

.sc-modal__termos u { cursor: pointer; }
.sc-modal__termos u:hover { color: #FCC466; }