/*
=====================
    Auth Pages
    login / register
=====================
*/
.sp-auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 0 40px;
    max-width: 520px;
    margin: 0 auto;
}

.sp-auth-box {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: 36px 40px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}


/*
=====================
    Auth Header
=====================
*/
.sp-auth-header {
    text-align: center;
    margin-bottom: 28px;
}

.sp-auth-title {
    font-family: var(--sp-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sp-text-heading);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}

.sp-auth-sub {
    font-size: 0.875rem;
    color: var(--sp-text-muted);
}


/*
=====================
    Auth Submit Button
=====================
*/
.sp-auth-submit {
    margin-top: 8px;
    padding: 12px 20px;
    font-size: 0.9rem;
}


/*
=====================
    Auth Footer Links
=====================
*/
.sp-auth-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--sp-border);
    font-size: 0.875rem;
    color: var(--sp-text-muted);
}

.sp-auth-footer a {
    color: var(--sp-primary);
    font-weight: 600;
}

.sp-auth-footer a:hover {
    color: var(--sp-text-bright);
}


/*
=====================
    Form Hints
=====================
*/
.sp-form-hint {
    font-size: 0.75rem;
    color: var(--sp-text-muted);
    margin-top: 4px;
}


/*
=====================
    Password Requirements
=====================
*/
.sp-pw-requirements {
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    margin-bottom: 20px;
    overflow: hidden;
}

.sp-pw-req-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sp-text-muted);
    cursor: pointer;
    user-select: none;
    transition: color var(--sp-transition);
}

.sp-pw-req-toggle:hover {
    color: var(--sp-primary);
}

.sp-pw-req-arrow {
    font-size: 0.65rem;
    transition: transform var(--sp-transition);
}

.sp-pw-req-list {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 4px 14px 14px;
    border-top: 1px solid var(--sp-border);
    list-style: none;
}

.sp-pw-req-list.sp-pw-req-open {
    display: flex;
}

.sp-pw-req-list li {
    font-size: 0.82rem;
    color: var(--sp-text-muted);
    padding-left: 16px;
    position: relative;
}

.sp-pw-req-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--sp-text-muted);
}

.sp-pw-req-list li.sp-req-pass {
    color: var(--sp-success);
}

.sp-pw-req-list li.sp-req-pass::before {
    content: '✓';
    color: var(--sp-success);
}

.sp-pw-req-list li.sp-req-fail {
    color: var(--sp-danger);
}

.sp-pw-req-list li.sp-req-fail::before {
    content: '✗';
    color: var(--sp-danger);
}


/*
=====================
    Password Match
=====================
*/
.sp-pw-match {
    display: block;
    font-size: 0.78rem;
    margin-top: 5px;
    font-weight: 600;
}

.sp-pw-match-ok {
    color: var(--sp-success);
}

.sp-pw-match-fail {
    color: var(--sp-danger);
}


/*
=====================
    Rules Checkbox
=====================
*/
.sp-rules-group {
    margin-top: 4px;
}

.sp-rules-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--sp-text-muted);
    cursor: pointer;
    line-height: 1.5;
}

.sp-rules-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--sp-primary);
    cursor: pointer;
}

.sp-rules-label a {
    color: var(--sp-primary);
    font-weight: 600;
}

.sp-rules-label a:hover {
    color: var(--sp-text-bright);
}


/*
=====================
    Responsive
=====================
*/
@media (max-width: 520px) {
    .sp-auth-box {
        padding: 24px 20px;
    }
}