/*
 * auth-form.css — consolidated styles for the registration/auth templates
 * (signup, login, password reset form/confirm/done/complete, resend
 * verification, email verification sent).
 *
 * These eight pages each carried their own inline <style> block that had
 * DRIFTED apart over time — different card padding/shadow, cyan-vs-magenta
 * input borders, three different responsive behaviours, and several pages
 * with no media queries at all. To preserve every page's existing rendering
 * byte-for-byte, each page's wrapper carries a per-page modifier class
 * (.auth-page--signup, --login, --reset-form, --reset-confirm, --reset-done,
 * --reset-complete, --resend, --verify-sent) and every drifted rule is scoped
 * under it. Rules that are genuinely identical across pages are grouped.
 *
 * font-family is intentionally left unset on the form/card selectors (as in the
 * originals) so they keep inheriting the body font; only .reason-notice pins a
 * family, exactly as before. @keyframes are global (un-scopable). The Bootstrap
 * tooltip overrides stay un-scoped because the tooltip element is injected near
 * its trigger and may render outside .auth-page; this file only loads on the
 * eight auth pages, so an un-scoped tooltip rule can't leak elsewhere.
 */

/* ============================================================ *
 *  Shared base (identical across all eight pages)
 * ============================================================ */
.auth-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.auth-title {
    font-size: 3rem;
    margin-bottom: 30px;
}

@keyframes rainbow-border {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ============================================================ *
 *  Content card variants
 * ============================================================ */
/* Rainbow-bordered card (login, reset form/confirm/done/complete). */
.auth-page--login .content-card,
.auth-page--reset-form .content-card,
.auth-page--reset-confirm .content-card,
.auth-page--reset-done .content-card,
.auth-page--reset-complete .content-card {
    background-color: rgba(40, 0, 40, 0.7);
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.auth-page--login .content-card::before,
.auth-page--reset-form .content-card::before,
.auth-page--reset-confirm .content-card::before,
.auth-page--reset-done .content-card::before,
.auth-page--reset-complete .content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #ff00ff, #00ffff, #ff00ff);
    animation: rainbow-border 3s linear infinite;
    background-size: 200% 100%;
}

/* Flat card, no rainbow border (resend verification, email verification sent). */
.auth-page--resend .content-card,
.auth-page--verify-sent .content-card {
    background-color: rgba(40, 0, 40, 0.7);
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
}

/* Signup card — tighter padding, stronger glow, bordered, blurred backdrop. */
.auth-page--signup .content-card {
    background-color: rgba(40, 0, 40, 0.7);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
    border: 1px solid rgba(255, 0, 255, 0.2);
    backdrop-filter: blur(5px);
}

/* ============================================================ *
 *  Form labels
 * ============================================================ */
.auth-page--signup .form-label {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.auth-page--login .form-label,
.auth-page--reset-form .form-label,
.auth-page--reset-confirm .form-label {
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
}

/* ============================================================ *
 *  Inputs
 * ============================================================ */
/* Signup — cyan resting border (the others are magenta). */
.auth-page--signup .form-control.neon-input {
    background-color: rgba(20, 0, 20, 0.7);
    border: 2px solid rgba(0, 255, 255, 0.3);
    color: #fff;
    padding: 12px 15px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.auth-page--signup .form-control.neon-input:focus {
    background-color: rgba(30, 0, 30, 0.8);
    border-color: #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
    outline: none;
}

/* Magenta input, identical values across login + reset form/confirm (the
   selector differs per page — login uses .form-control.neon-input, the reset
   pages use .neon-input — both match the same element). */
.auth-page--login .form-control.neon-input,
.auth-page--reset-form .neon-input,
.auth-page--reset-confirm .neon-input {
    background-color: rgba(20, 0, 40, 0.7) !important;
    border: 2px solid rgba(255, 0, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 10px;
    padding: 12px 15px;
    transition: all 0.3s ease;
}

.auth-page--login .form-control.neon-input:focus,
.auth-page--reset-form .neon-input:focus,
.auth-page--reset-confirm .neon-input:focus {
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5) !important;
    border-color: #ff00ff !important;
    outline: none;
}

/* Resend verification — drifted: 1px border, smaller radius, no !important. */
.auth-page--resend .neon-input {
    background-color: rgba(30, 0, 30, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: white;
    border-radius: 5px;
    padding: 10px 15px;
    transition: all 0.3s;
}

.auth-page--resend .neon-input:focus {
    border-color: #ff00ff;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    background-color: rgba(40, 0, 40, 0.7);
    color: white;
}

.auth-page--signup .form-control.neon-input::placeholder,
.auth-page--login .form-control.neon-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

/* ============================================================ *
 *  Links
 * ============================================================ */
/* Animated underline link (signup, login, reset form). */
.auth-page--signup .neon-link,
.auth-page--login .neon-link,
.auth-page--reset-form .neon-link {
    color: #00ffff;
    text-decoration: none;
    position: relative;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.auth-page--signup .neon-link:hover,
.auth-page--login .neon-link:hover,
.auth-page--reset-form .neon-link:hover {
    color: #ff00ff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
}

.auth-page--signup .neon-link::after,
.auth-page--login .neon-link::after,
.auth-page--reset-form .neon-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(to right, #00ffff, #ff00ff);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.auth-page--signup .neon-link:hover::after,
.auth-page--login .neon-link:hover::after,
.auth-page--reset-form .neon-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Resend verification — drifted: pink, no underline. */
.auth-page--resend .neon-link {
    color: #ff9cff;
    text-decoration: none;
    transition: all 0.3s;
}

.auth-page--resend .neon-link:hover {
    color: #ff00ff;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
}

/* ============================================================ *
 *  Alerts
 * ============================================================ */
/* Signup — full treatment (radius, padding, glow). */
.auth-page--signup .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    margin-top: 8px;
    font-size: 0.95rem;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.2);
}

/* Login, reset form, reset confirm — colour-only override. */
.auth-page--login .alert-danger,
.auth-page--reset-form .alert-danger,
.auth-page--reset-confirm .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.auth-page--signup .alert-success,
.auth-page--login .alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    color: #75ff75;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

/* ============================================================ *
 *  Signup-only: help text, info icon, error state, tooltips
 * ============================================================ */
.auth-page--signup .form-text.help-text {
    color: #00ffff;
    font-size: 0.9rem;
    margin-top: 5px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

.auth-page--signup .field-info-icon {
    display: inline-block;
    margin-left: 8px;
    color: #00ffff;
    cursor: pointer;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.auth-page--signup .field-info-icon:hover {
    color: #ff00ff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
}

.auth-page--signup .has-error .form-control.neon-input {
    border-color: rgba(255, 107, 107, 0.5);
}

.auth-page--signup .has-error .form-label {
    color: rgba(255, 107, 107, 0.9);
}

/* Bootstrap tooltip overrides — kept un-scoped: the tooltip is injected near
   its trigger and can render outside .auth-page. Only signup creates tooltips,
   and this file loads only on the auth pages, so these can't leak elsewhere. */
.tooltip-inner {
    background-color: rgba(40, 0, 40, 0.95);
    border: 1px solid #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
    color: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: left;
    max-width: 300px;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #ff00ff;
}

/* ============================================================ *
 *  Status-page ornaments
 * ============================================================ */
/* Password reset done — floating email icon, paragraph type, outline button. */
.auth-page--reset-done .email-icon {
    font-size: 5rem;
    animation: float 3s ease-in-out infinite;
}

.auth-page--reset-done p {
    color: #fff;
    line-height: 1.6;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.auth-page--reset-done .btn-outline-light {
    border: 2px solid rgba(255, 0, 255, 0.5);
    color: #fff;
    padding: 10px 25px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.auth-page--reset-done .btn-outline-light:hover {
    background-color: rgba(255, 0, 255, 0.2);
    border-color: #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
}

/* Password reset complete — pulsing icon + glowing heading. */
.auth-page--reset-complete .success-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

.auth-page--reset-complete .success-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px #ff00ff, 0 0 20px rgba(255, 0, 255, 0.5);
    letter-spacing: 1px;
}

.auth-page--reset-complete .success-message {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.5;
}

/* Email verification sent — smaller static email icon, plain-white outline button. */
.auth-page--verify-sent .email-icon {
    font-size: 3rem;
    opacity: 0.8;
}

.auth-page--verify-sent .btn-outline-light {
    border: 2px solid #fff;
    transition: all 0.3s;
}

.auth-page--verify-sent .btn-outline-light:hover {
    background-color: #ff00ff33;
    border-color: #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
}

/* Login-only promoter prompt banner. */
.auth-page--login .reason-notice {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--rave-notice-bg);
    border: 2px solid var(--rave-primary);
    border-radius: 10px;
    padding: 12px 18px;
    color: var(--rave-secondary);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px var(--rave-cyan-glow-medium);
    box-shadow: 0 0 15px var(--rave-glow-soft);
}

/* ============================================================ *
 *  Top padding (offsets the fixed nav). signup/login start at 100px;
 *  the six reset/verification pages start at 80px.
 * ============================================================ */
.auth-page--signup .top-padding,
.auth-page--login .top-padding {
    padding-top: 100px;
}

.auth-page--reset-form .top-padding,
.auth-page--reset-confirm .top-padding,
.auth-page--reset-done .top-padding,
.auth-page--reset-complete .top-padding,
.auth-page--resend .top-padding,
.auth-page--verify-sent .top-padding {
    padding-top: 80px;
}

/* ============================================================ *
 *  Responsive — only signup, login and the reset form shrink; the other
 *  five pages deliberately keep their base layout at every width.
 * ============================================================ */
@media (max-width: 768px) {
    .auth-page--signup,
    .auth-page--login,
    .auth-page--reset-form {
        padding: 0 10px;
        max-width: 100%;
    }

    .auth-page--signup .content-card,
    .auth-page--login .content-card,
    .auth-page--reset-form .content-card {
        padding: 30px 20px;
        width: 100%;
        border-radius: 10px;
    }

    .auth-page--signup .auth-title,
    .auth-page--login .auth-title,
    .auth-page--reset-form .auth-title {
        font-size: 2.5rem;
    }

    .auth-page--reset-form .top-padding {
        padding-top: 70px;
    }

    .auth-page--signup .form-label {
        font-size: 1.1rem;
    }
}

@media (max-width: 430px) {
    .auth-page--signup,
    .auth-page--login,
    .auth-page--reset-form {
        padding: 0 5px;
    }

    .auth-page--signup .content-card,
    .auth-page--login .content-card,
    .auth-page--reset-form .content-card {
        padding: 25px 15px;
        border-radius: 8px;
    }

    .auth-page--signup .auth-title,
    .auth-page--login .auth-title,
    .auth-page--reset-form .auth-title {
        font-size: 2rem;
    }

    .auth-page--signup .top-padding,
    .auth-page--login .top-padding {
        padding-top: 90px;
    }

    .auth-page--reset-form .top-padding {
        padding-top: 60px;
    }

    .auth-page--signup .form-control.neon-input,
    .auth-page--login .form-control.neon-input,
    .auth-page--reset-form .neon-input {
        padding: 10px 12px;
    }

    .auth-page--signup .form-label {
        font-size: 1rem;
    }

    .auth-page--signup .alert-danger {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}