/**
 * StatsBet Auth Form - Standalone Page Styles
 *
 * Light-theme styling for the [statsbet_auth_form] shortcode when used
 * on standalone pages (/login/, /register/).
 *
 * In popup context, auth-popup.css overrides all colors/backgrounds
 * via high-specificity !important rules targeting element types.
 */

/* Container */
.sb-auth {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 30px;
    background: var(--sb-color-bg, #fff);
    border-radius: var(--sb-radius-xl, 10px);
    box-shadow: var(--sb-shadow-lg, 0 4px 15px rgba(0,0,0,0.1));
    font-family: var(--sb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    box-sizing: border-box;
}

.sb-auth *, .sb-auth *::before, .sb-auth *::after {
    box-sizing: border-box;
}

/* Panel toggle */
.sb-auth__panel {
    display: none;
}

.sb-auth__panel.is-active {
    display: block;
}

/* Freemium badge */
.sb-auth__badge {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: var(--sb-font-size-sm, 0.85rem);
    text-align: center;
    margin-bottom: var(--sb-spacing-lg, 14px);
}

/* Title */
.sb-auth__title {
    margin: 0 0 var(--sb-spacing-lg, 14px) 0;
    text-align: center;
    color: var(--sb-color-text-body, #333);
    font-size: 1.4rem;
    font-weight: 700;
}

/* Form fields */
.sb-auth__field {
    margin-bottom: var(--sb-spacing-lg, 14px);
}

.sb-auth__field label {
    display: block;
    margin-bottom: var(--sb-spacing-xs, 4px);
    font-weight: var(--sb-font-weight-semibold, 600);
    color: var(--sb-color-text-body, #333);
    font-size: 0.9rem;
}

.sb-auth__field input[type="text"],
.sb-auth__field input[type="email"],
.sb-auth__field input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--sb-color-border, #e0e0e0);
    border-radius: var(--sb-radius-md, 6px);
    font-size: 1rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sb-auth__field input:focus {
    border-color: var(--sb-color-success, #28a745);
    outline: none;
}

/* Submit buttons */
.sb-auth__submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--sb-radius-md, 6px);
    font-size: 1rem;
    font-weight: var(--sb-font-weight-semibold, 600);
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
    text-decoration: none;
}

.sb-auth__submit--register {
    background: #28a745;
    color: #fff;
}

.sb-auth__submit--register:hover {
    background: #218838;
}

.sb-auth__submit--login {
    background: #333;
    color: #fff;
}

.sb-auth__submit--login:hover {
    background: #555;
}

.sb-auth__submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Panel toggle link */
.sb-auth__toggle {
    margin-top: var(--sb-spacing-lg, 14px);
    text-align: center;
    color: var(--sb-color-text-muted, #666);
    font-size: 0.9rem;
}

.sb-auth__toggle a {
    color: #28a745;
    text-decoration: none;
    cursor: pointer;
}

.sb-auth__toggle a:hover {
    text-decoration: underline;
}

/* Messages */
.sb-auth__message {
    padding: 12px;
    border-radius: var(--sb-radius-md, 6px);
    margin-bottom: var(--sb-spacing-lg, 14px);
    display: none;
}

.sb-auth__message--error {
    display: block;
    background: #f8d7da;
    color: #721c24;
}

.sb-auth__message--success {
    display: block;
    background: #d4edda;
    color: #155724;
}

/* Forgot password */
.sb-auth__forgot {
    text-align: right;
    margin-top: -8px;
    margin-bottom: 12px;
}

.sb-auth__forgot a {
    color: var(--sb-color-text-muted, #666);
    font-size: 0.9rem;
    text-decoration: none;
}

.sb-auth__forgot a:hover {
    text-decoration: underline;
}

/* Already logged in */
.sb-auth__logged-in {
    text-align: center;
    padding: 40px 20px;
    background: #d4edda;
    border-radius: var(--sb-radius-xl, 10px);
    max-width: 400px;
    margin: 0 auto;
}

/* Mobile */
@media (max-width: 480px) {
    .sb-auth {
        padding: 20px 15px;
        border-radius: var(--sb-radius-lg, 8px);
    }

    .sb-auth__title {
        margin: 0 0 12px 0;
        font-size: 1.3rem;
    }

    .sb-auth__badge {
        padding: 6px 12px;
        font-size: 0.75rem;
        margin-bottom: 12px;
    }

    .sb-auth__field {
        margin-bottom: 12px;
    }

    .sb-auth__field label {
        margin-bottom: 4px;
        font-size: 0.85rem;
    }

    .sb-auth__field input {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .sb-auth__submit {
        padding: 12px;
        font-size: 0.9rem;
    }

    .sb-auth__toggle {
        margin-top: 12px;
        font-size: 0.85rem;
    }

    .sb-auth__message {
        padding: 10px;
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .sb-auth__forgot {
        margin-top: -6px;
        margin-bottom: 10px;
    }

    .sb-auth__forgot a {
        font-size: 0.8rem;
    }
}