/*
================================================
|   Apexza Edutech - Account Pages Stylesheet   |
|   VERSION 15.0 - Mobile Logo Fix              |
================================================
*/

/* --- Root Variables & Resets --- */
:root {
    --primary-color: #1E74FD;
    --primary-hover: #025ff3;
    --text-dark: #212529;
    --text-light: #f8f9fa;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-family);
    background-color: #0c0a1a;
    color: var(--text-dark);
    line-height: 1.6;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Animated Background --- */
.background-grid {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; gap: 1.5vw;
    padding: 1.5vw; overflow: hidden; z-index: -2;
    filter: brightness(0.8);
    transform: scale(1.1);
    transition: filter 1s ease-in-out;
}
.grid-column {
    display: flex; flex-direction: column; gap: 1.5vw;
    min-width: 150px;
    animation: scrollAnimation 80s linear infinite;
}
.grid-column img {
    width: 100%; height: auto; border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transition: opacity 0.8s ease;
}
@keyframes scrollAnimation { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes scrollAnimationReverse { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }

.background-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(160deg, rgba(1, 2, 44, 0.7) 0%, rgba(43, 0, 85, 0.6) 45%, rgba(0, 78, 99, 0.7) 100%);
    z-index: -1;
    transition: background 1s ease-in-out;
}

/* --- Account Container & Form Styling --- */
.account-container {
    width: 90%; max-width: 440px; margin: auto; padding: 2.5rem;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center; z-index: 10; color: #333;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transform: scale(1); opacity: 1;
}
.logo { display: block; width: 180px; height: 60px; margin: 0 auto 1.5rem auto; background-image: url('https://apexza.org/images/logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; text-indent: -9999px; overflow: hidden; }
.account-container h2 { margin-bottom: 0.75rem; font-size: 2rem; font-weight: 700; color: var(--text-dark); }
.account-container p { margin-bottom: 1.5rem; color: #555; font-size: 15px; }
.form-group { margin-bottom: 1.25rem; text-align: left; }
.form-control { width: 100%; padding: 0.8rem 1rem; border: 1px solid #ced4da; border-radius: 10px; font-size: 1rem; font-family: var(--font-family); background-color: #f8f9fa; transition: all 0.2s ease-in-out; }
.form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(30, 116, 253, 0.2); }
.btn-submit { width: 100%; padding: 0.9rem; border: none; border-radius: 10px; background-color: var(--primary-color); color: var(--text-light); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; text-transform: uppercase; letter-spacing: 0.5px; }
.btn-submit:hover { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(30, 116, 253, 0.3); }
.form-links { margin-top: 1rem; font-size: 14px; }
.form-links a, .form-links button { color: var(--primary-color); text-decoration: none; font-weight: 600; background: none; border: none; cursor: pointer; font-size: inherit; font-family: inherit; }
.separator { display: flex; align-items: center; text-align: center; color: #aaa; margin: 1.5rem 0; font-size: 12px; font-weight: 500; text-transform: uppercase; }
.separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid #ddd; }
.separator:not(:empty)::before { margin-right: .5em; }
.separator:not(:empty)::after { margin-left: .5em; }
.alert { padding: 1rem; margin-bottom: 1.5rem; border-radius: 8px; text-align: left; font-weight: 500; }
.alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

/* --- Header & Footer --- */
.account-header { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; z-index: 20; }
.account-header .logo-link { display: block; width: 150px; height: 50px; background-image: url('https://apexza.org/images/logo.png'); background-size: contain; background-repeat: no-repeat; background-position: left center; text-indent: -9999px; overflow: hidden; }
.account-header .desktop-nav a { color: var(--text-light); text-decoration: none; margin-left: 2rem; font-weight: 500; }
.account-footer { position: relative; width: 100%; text-align: center; padding: 1rem; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; z-index: 20; }
.account-footer a { color: rgba(255, 255, 255, 0.8); }

/* --- Showcase Animation Styles --- */
body.showcase-active .account-container { opacity: 0; transform: scale(0.9); pointer-events: none; }
body.showcase-active .background-grid { filter: brightness(0.4); }
body.showcase-active .background-overlay { background: rgba(1, 2, 44, 0.85); }
.showcase-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60vw; max-width: 800px; aspect-ratio: 16 / 9; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
body.showcase-active .showcase-container { opacity: 1; }
.showcase-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; box-shadow: 0 0 120px 60px rgba(1, 2, 44, 0.9); animation-duration: 1s; animation-fill-mode: both; }
@keyframes showcaseFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes showcaseFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
.showcase-fade-in { animation-name: showcaseFadeIn; }
.showcase-fade-out { animation-name: showcaseFadeOut; }

/*
================================================
|   FINAL Mobile Responsive Styles            |
================================================
*/
@media (max-width: 991px) {
    body { overflow-y: auto; overflow-x: hidden; }
    
    /* NEW: Hide top-left header on mobile */
    .account-header {
        display: none;
    }

    .account-container { padding: 2.5rem 1.5rem; }
    .account-container h2 { font-size: 1.8rem; }
    
    /* NEW: Increase size of logo inside the form on mobile */
    .account-container .logo {
        width: 220px;
        height: 73px; /* maintain aspect ratio */
        margin-bottom: 2rem;
    }

    /* Disable showcase on mobile */
    .showcase-container { display: none; }
    body.showcase-active .account-container {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
}