/* ===============================
   REGISTER PAGE – CYBER VISUAL
================================ */


/* ===== FINAL LOGIN LOGO STYLE ===== */
.cyber-visual-content {
    width: 100%;
    max-width: none;
}

.cyber-visual-content .logo-circle {
    width: 260px;        /* adjust if needed */
    height: auto;
    max-width: none;
    display: block;
    margin: 0 auto 24px;
}

.cyber-visual {
    overflow: visible;
}

/* Left cyber visual */
.cyber-visual {
    position: relative;
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(0,242,255,.15), transparent),
        url("/assets/cyber-forensics-bg.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Animated scan line */
.cyber-visual::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--neon), transparent);
    top: -10%;
    animation: scan 4s linear infinite;
}

@keyframes scan {
    from { top: -10%; }
    to { top: 110%; }
}

/* Visual text */
.cyber-visual-content {
    text-align: center;
    z-index: 2;
    padding: 20px;
}

.cyber-visual-content h1 {
    font-size: 2.4rem;
}

.cyber-visual-content p {
    color: #cfd8dc;
    max-width: 420px;
}

/* Register form container */
.register-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 30px;
}

/* Override Bootstrap form */
.myForm input,
.myForm select {
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(0,242,255,.3);
    color: white;
}

.myForm input:focus,
.myForm select:focus {
    box-shadow: 0 0 10px rgba(0,242,255,.5);
    border-color: var(--neon);
}

/* Button reuse cyber-btn */
.myBtn {
    @apply: none;
}
/* ===============================
   REGISTER – FIX GOOGLE BUTTON
================================ */

.cyber-tagline {
    font-size: 0.85rem;
    color: #9fbec9;
    margin-top: -10px;
}
/* ===============================
   GOOGLE BUTTON SCAN EFFECT
================================ */
.cyber-btn.google-scan {
    position: relative;
    overflow: hidden;
}

.cyber-btn.google-scan::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(0,242,255,0.35),
        transparent
    );
    transform: translateX(-120%);
    animation: googleScan 3.5s infinite;
}

@keyframes googleScan {
    0%   { transform: translateX(-120%); }
    60%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}
/* ===============================
   TYPEWRITER EFFECT
================================ */
.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--neon);
    animation:
        typing 3s steps(40, end),
        blink 0.8s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink {
    50% { border-color: transparent }
}
/* ===============================
   GOOGLE SIGN-UP BUTTON (FIXED)
================================ */
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    height: 48px;
    width: 100%;

    background: #ffffff;
    color: #202124;

    border-radius: 6px;
    border: 1px solid #dadce0;

    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    position: relative;
    overflow: hidden;

    transition: all 0.25s ease;
}

/* Google icon */
.google-btn i {
    font-size: 18px;
    color: #4285F4;
}

/* Hover cyber enhancement */
.google-btn:hover {
    box-shadow:
        0 0 0 1px rgba(0,242,255,0.4),
        0 0 12px rgba(0,242,255,0.25);
    transform: translateY(-1px);
}

/* Subtle scan (not aggressive) */
.google-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(0,242,255,0.25),
        transparent
    );
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}

.google-btn:hover::after {
    transform: translateX(120%);
}

/* ===============================
   CENTERED SIGNUP DIVIDER
================================ */
.signup-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin: 20px 0;
    font-size: 0.9rem;
    color: #9fbec9;
    text-align: center;
}

.signup-divider::before,
.signup-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0,242,255,0.25);
}
/* ===============================
   CENTER CYBER VISUAL CONTENT
================================ */

.cyber-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Force center alignment */
.cyber-visual-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    width: 100%;
    max-width: 420px;

    position: relative;
    z-index: 5;
}

/* Lottie centering */
.cyber-visual-content lottie-player {
    display: block;
    margin: 0 auto 15px auto;
}

/* ===== LOGIN PAGE LOGO (FINAL FIX) ===== */
.col-md-6.cyber-visual .cyber-visual-content img.logo-circle {
    width: 260px !important;
    max-width: none !important;
    height: auto !important;
    display: block;
    margin: 0 auto 28px;
}