/*
  Copyright (c) 2026 Blue Astra Technologies LLP, India. All Rights Reserved.
  This source code is the proprietary and confidential property of Blue Astra
  Technologies LLP (India). Unauthorized copying, modification, distribution, or
  use of this file or codebase, in whole or in part, by any means or technology
  (including AI tools), is strictly prohibited without express written permission.
*/
/* =====================================================
   AUTHENTICATION STYLES
   ===================================================== */

.auth-container {
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

/* ===== Product landing chrome (login page only) — theme-aware ===== */
.lp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 6%; background: #fff; position: sticky; top: 0; z-index: 200;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.lp-logo { font-size: 26px; font-weight: 800; color: #16233a; letter-spacing: -.5px; }
.lp-logo span { color: #2E86FF; }
.lp-nav { display: flex; gap: 28px; }
.lp-nav a { text-decoration: none; color: #333; font-weight: 600; }
.lp-nav a:hover { color: #2E86FF; }
.lp-btn {
    background: #2E86FF; color: #fff;
    padding: 11px 22px; border-radius: 8px; text-decoration: none; font-weight: 700;
    display: inline-block; transition: .2s;
}
.lp-btn:hover { background: #1666d8; }
.lp-btn-outline { background: transparent; color: #2E86FF; border: 2px solid #2E86FF; }
.lp-btn-outline:hover { background: #eef4ff; }

/* Hubstaff-style rotating headline CTA in the header */
.lp-rotate-cta { text-decoration: none; font-weight: 700; color: #222; font-size: 16px; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 6px; }
.lp-rotate-word { color: #2E86FF; display: inline-block; min-width: 262px; text-align: left; transition: opacity .35s ease, transform .35s ease; }
.lp-rotate-cta:hover .lp-rotate-word { text-decoration: underline; }
@media (max-width: 900px) { .lp-rotate-cta { display: none; } }

.lp-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 48px;
    padding: 56px 6% 40px; flex-wrap: wrap;
    background: linear-gradient(135deg, #eef4ff 0%, #ffffff 60%);
    position: relative; overflow: hidden;
}
/* Blurred NYSE video background — the login card stays the highlight */
.lp-bg-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    object-position: center 40%;   /* frame the NYSE facade + American flag */
    z-index: 0; filter: blur(2.5px) brightness(0.98); transform: scale(1.03);
    pointer-events: none;
}
.lp-bg-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(238,244,255,0.32));
}

/* Animated digital dots over the video */
.lp-hero-text, .lp-hero-stats { position: relative; z-index: 2; }
.lp-dots { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lp-dots::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(46,134,255,.16) 1.4px, transparent 1.5px);
    background-size: 26px 26px;
}
.lp-dots .dot {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    opacity: 0; transform: scale(.4); box-shadow: 0 0 10px currentColor;
    animation: dotTwinkle 4s ease-in-out infinite;
}
@keyframes dotTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .95; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lp-dots .dot { animation: none; opacity: .55; transform: scale(1); } }
.lp-hero-text { flex: 1 1 420px; }
.lp-hero-text h1 { font-size: 44px; line-height: 1.12; color: #16233a; letter-spacing: -.5px; margin-bottom: 16px; }
.lp-hero-text h1 span { color: #2E86FF; }
.lp-hero-text p { color: #555; font-size: 17px; margin-bottom: 16px; max-width: 620px; }
.lp-website-note { background: #fff; border-left: 4px solid #2E86FF; padding: 12px 16px; border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,0.05); font-size: 15px; }
.lp-website-note a { color: #2E86FF; font-weight: 700; text-decoration: none; }
.lp-hero-stats { flex: 1 1 320px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-stat { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.lp-stat span { display: block; color: #777; font-size: 13px; margin-bottom: 6px; }
.lp-stat strong { color: #2E86FF; font-size: 26px; }

.lp-features { padding: 56px 6%; background: #eef4ff; }
.lp-section-title { text-align: center; margin-bottom: 34px; }
.lp-section-title h2 { font-size: 34px; color: #2E86FF; margin-bottom: 8px; }
.lp-section-title p { color: #666; }
.lp-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.lp-feature-card { background: #fff; padding: 26px; border-radius: 14px; box-shadow: 0 5px 20px rgba(0,0,0,0.06); }
.lp-feature-card h3 { color: #2E86FF; margin-bottom: 10px; font-size: 18px; }
.lp-feature-card p { color: #555; font-size: 15px; }
.lp-features-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

.lp-footer { background: #111; color: #eee; text-align: center; padding: 22px; font-size: 14px; }
.lp-footer a { color: #fff; font-weight: 600; text-decoration: none; margin: 0 4px; }

/* Hide all landing chrome once the user is inside the app */
body.app-active .lp-header,
body.app-active .lp-hero,
body.app-active .lp-features,
body.app-active .lp-footer { display: none !important; }

@media (max-width: 780px) {
    .lp-nav { display: none; }
    .lp-hero-text h1 { font-size: 34px; }
    .lp-hero-stats { grid-template-columns: 1fr 1fr; }
}

.auth-container.hidden {
    display: none;
}

.auth-form {
    display: none;
    background: var(--white);
    border-radius: 1rem;
    padding: 3rem 2rem;
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
    border-top: 6px solid var(--theme-primary);
    position: relative;
    z-index: 2;
}

/* Uniform Bloo CRM brand logo (matches Features page) */
.auth-header h1.brand-logo { color: #16233a; gap: 0; letter-spacing: -.5px; }
.auth-header h1.brand-logo span { color: #2E86FF; }

.auth-form.active {
    display: block;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h1 {
    font-size: 2.5rem;
    color: var(--theme-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.auth-header h1 i {
    font-size: 2rem;
}

.auth-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

.auth-form form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auth-form .form-group input,
.auth-form .form-group select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--medium-gray);
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: var(--light-gray);
}

.auth-form .form-group input:focus,
.auth-form .form-group select:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(239, 0, 0, 0.1);
    background-color: var(--white);
}

.auth-form .btn-primary {
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    width: 100%;
}

.auth-toggle {
    text-align: center;
    color: var(--text-light);
    margin-top: 1rem;
}

.auth-toggle a {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.auth-toggle a:hover {
    color: var(--theme-primary-dark);
    text-decoration: underline;
}

.auth-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--danger);
    color: var(--danger);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: none;
}

.auth-error.active {
    display: block;
    animation: slideDown 0.3s ease;
}

.auth-success {
    background-color: rgba(16, 185, 129, 0.1);
    border-left: 4px solid var(--success);
    color: var(--success);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: none;
}

.auth-success.active {
    display: block;
    animation: slideDown 0.3s ease;
}

/* Additional Auth Links */
.auth-links {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.auth-links a {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.auth-links a:hover {
    color: var(--theme-primary-dark);
    text-decoration: underline;
}

/* Security Features Box */
.security-box {
    margin-top: 30px;
    background: var(--light-aqua);
    padding: 20px;
    border-radius: 15px;
}

.security-box h3 {
    color: var(--theme-primary);
    margin-bottom: 10px;
    font-size: 1rem;
}

.security-box ul {
    padding-left: 18px;
    font-size: 0.9rem;
}

.security-box li {
    margin-bottom: 8px;
    color: var(--text-dark);
}

/* Auth Options */
.auth-options {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr;   /* full width — no side tilt */
    gap: 15px;
}

/* Full-width MFA card with the options listed underneath */
.mfa-card { text-align: left; }
.mfa-card h4 { display: flex; align-items: center; gap: 8px; }
.mfa-card .mfa-options {
    display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.mfa-card .mfa-options span {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
    background: #fff; border: 1px solid #e6ecf5; border-radius: 8px;
    padding: 10px 12px; font-size: 0.88rem; font-weight: 600; color: #16233a;
}
.mfa-card .mfa-options span small {
    color: #8a93a3; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .4px;
}

.auth-card {
    padding: 18px;
    text-align: center;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid #eee;
}

.auth-card h4 {
    color: var(--theme-primary);
    margin-bottom: 8px;
    font-size: 1rem;
}

.auth-card p {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* =====================================================
   RESPONSIVE AUTH
   ===================================================== */

@media (max-width: 600px) {
    .auth-form {
        padding: 2rem 1.5rem;
    }

    .auth-header h1 {
        font-size: 2rem;
    }

    .auth-header p {
        font-size: 1rem;
    }

    .auth-options {
        grid-template-columns: 1fr;
    }
}