/**
 * ═══════════════════════════════════════════════════════════════════════════
 * A ELITE - LOGIN CINEMATOGRÁFICO
 * Área Reservada - Restyle Épico by CODEBOYS TECHNOLOGY
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN PAGE CONTAINER
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--elite-darker);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO BACKGROUND
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.4;
    filter: blur(2px);
}

/* Fallback Image Background */
.elite-login-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRADIENT OVERLAY
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(233, 50, 86, 0.85) 0%,
        rgba(26, 26, 46, 0.95) 50%,
        rgba(15, 15, 26, 0.98) 100%
    );
    z-index: 2;
}

/* Animated Gradient Version - Subtil */
.elite-login-overlay-animated {
    background: linear-gradient(
        -45deg,
        rgba(233, 50, 86, 0.4),
        rgba(26, 26, 46, 0.9),
        rgba(15, 15, 26, 0.95),
        rgba(196, 32, 58, 0.3)
    );
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTICLES CONTAINER (Optional)
═══════════════════════════════════════════════════════════════════════════ */

#elite-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN CARD GLASSMORPHISM
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 440px;
    margin: var(--spacing-6);
    padding: var(--spacing-10);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-3xl);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* Animation */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s var(--ease-out) 0.3s forwards;
}

/* Glass Shine Effect */
.elite-login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-logo {
    text-align: center;
    margin-bottom: var(--spacing-8);

    /* Animation */
    opacity: 0;
    transform: scale(0.8);
    animation: scaleInBounce 0.6s var(--ease-bounce) forwards;
}

.elite-login-logo img {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(233, 50, 86, 0.4));
    transition: transform var(--transition-normal) var(--ease-out);
}

.elite-login-logo img:hover {
    transform: scale(1.05);
}

/* Logo Glow Animation */
.elite-login-logo-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WELCOME TEXT
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-welcome {
    text-align: center;
    margin-bottom: var(--spacing-8);

    /* Animation */
    opacity: 0;
    animation: fadeIn 0.5s var(--ease-out) 0.5s forwards;
}

.elite-login-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--elite-text-primary);
    margin-bottom: var(--spacing-2);
}

.elite-login-subtitle {
    font-size: var(--font-size-sm);
    color: var(--elite-text-secondary);
}

/* VIP Badge */
.elite-login-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--radius-full);
    color: var(--elite-gold);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

.elite-login-vip-badge i {
    color: var(--elite-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM INPUTS
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-form .form-group {
    margin-bottom: var(--spacing-5);

    /* Stagger Animation */
    opacity: 0;
    animation: fadeInUp 0.5s var(--ease-out) forwards;
}

.elite-login-form .form-group:nth-child(1) { animation-delay: 0.6s; }
.elite-login-form .form-group:nth-child(2) { animation-delay: 0.7s; }
.elite-login-form .form-group:nth-child(3) { animation-delay: 0.8s; }

.elite-login-form label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--elite-text-secondary);
}

.elite-login-form .form-control {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-5);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--elite-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal) var(--ease-out);
}

.elite-login-form .form-control::placeholder {
    color: var(--elite-text-muted);
}

.elite-login-form .form-control:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.elite-login-form .form-control:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--elite-primary);
    box-shadow: 0 0 0 4px rgba(233, 50, 86, 0.15);
    outline: none;
}

/* Input with Icon */
.elite-input-icon {
    position: relative;
}

.elite-input-icon .form-control {
    padding-left: var(--spacing-12);
}

.elite-input-icon i {
    position: absolute;
    left: var(--spacing-5);
    top: 50%;
    transform: translateY(-50%);
    color: var(--elite-text-muted);
    transition: color var(--transition-fast) var(--ease-out);
}

.elite-input-icon .form-control:focus + i,
.elite-input-icon:focus-within i {
    color: var(--elite-primary);
}

/* Password Toggle */
.elite-password-toggle {
    position: absolute;
    right: var(--spacing-5);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--elite-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast) var(--ease-out);
}

.elite-password-toggle:hover {
    color: var(--elite-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM OPTIONS (Remember, Forgot)
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);

    /* Animation */
    opacity: 0;
    animation: fadeIn 0.5s var(--ease-out) 0.85s forwards;
}

.elite-login-remember {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.elite-login-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--elite-primary);
    cursor: pointer;
}

.elite-login-remember label {
    font-size: var(--font-size-sm);
    color: var(--elite-text-secondary);
    cursor: pointer;
    margin: 0;
}

.elite-login-forgot {
    font-size: var(--font-size-sm);
    color: var(--elite-primary);
    text-decoration: none;
    transition: all var(--transition-fast) var(--ease-out);
}

.elite-login-forgot:hover {
    color: var(--elite-primary-light);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBMIT BUTTON
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-submit {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-6);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: white;
    background: linear-gradient(135deg, var(--elite-primary), var(--elite-primary-dark));
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal) var(--ease-out);

    /* Animation */
    opacity: 0;
    animation: fadeInUp 0.5s var(--ease-out) 0.9s forwards;

    /* Pulse Glow */
    box-shadow: 0 10px 30px rgba(233, 50, 86, 0.4);
}

.elite-login-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left var(--transition-slow) var(--ease-out);
}

.elite-login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(233, 50, 86, 0.5);
}

.elite-login-submit:hover::before {
    left: 100%;
}

.elite-login-submit:active {
    transform: translateY(0);
}

/* Loading State */
.elite-login-submit.loading {
    pointer-events: none;
    opacity: 0.8;
}

.elite-login-submit.loading .btn-text {
    opacity: 0;
}

.elite-login-submit .btn-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.elite-login-submit.loading .btn-loader {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERROR MESSAGES
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-error {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    background: rgba(255, 61, 113, 0.1);
    border: 1px solid rgba(255, 61, 113, 0.3);
    border-radius: var(--radius-lg);
    animation: shake 0.5s ease-in-out, fadeIn 0.3s ease;
}

.elite-login-error i {
    color: var(--elite-danger);
    font-size: var(--font-size-lg);
}

.elite-login-error span {
    color: var(--elite-danger);
    font-size: var(--font-size-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUCCESS MESSAGE
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-success {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    background: rgba(0, 214, 143, 0.1);
    border: 1px solid rgba(0, 214, 143, 0.3);
    border-radius: var(--radius-lg);
    animation: fadeIn 0.3s ease;
}

.elite-login-success i {
    color: var(--elite-success);
    font-size: var(--font-size-lg);
}

.elite-login-success span {
    color: var(--elite-success);
    font-size: var(--font-size-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════════════ */

.elite-login-footer {
    text-align: center;
    margin-top: var(--spacing-8);

    /* Animation */
    opacity: 0;
    animation: fadeIn 0.5s var(--ease-out) 1s forwards;
}

.elite-login-footer-text {
    font-size: var(--font-size-sm);
    color: var(--elite-text-muted);
}

.elite-login-footer a {
    color: var(--elite-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast) var(--ease-out);
}

.elite-login-footer a:hover {
    color: var(--elite-primary-light);
    text-decoration: underline;
}

/* CODEBOYS Credit */
.elite-login-credit {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--font-size-xs);
    color: var(--elite-text-hint);
}

.elite-login-credit a {
    color: var(--elite-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DECORATIVE ELEMENTS
═══════════════════════════════════════════════════════════════════════════ */

/* Corner Accent */
.elite-login-accent {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(233, 50, 86, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 4;
    pointer-events: none;
}

.elite-login-accent-1 {
    top: -100px;
    left: -100px;
    animation: float 8s ease-in-out infinite;
}

.elite-login-accent-2 {
    bottom: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
    animation: float 10s ease-in-out infinite reverse;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .elite-login-card {
        margin: var(--spacing-4);
        padding: var(--spacing-6);
        border-radius: var(--radius-2xl);
    }

    .elite-login-logo img {
        width: 100px;
    }

    .elite-login-title {
        font-size: var(--font-size-xl);
    }

    .elite-login-options {
        flex-direction: column;
        gap: var(--spacing-3);
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOM SPINNER
═══════════════════════════════════════════════════════════════════════════ */

.elite-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}