/* ============================ AUTHENTICATION PAGE STYLES (FULL RESPONSIVE UPDATE) ============================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body, input { 
    font-family: 'Poppins', sans-serif; 
}

.auth-container {
    position: relative;
    width: 100%;
    background-color: var(--bg-color);
    min-height: 100vh;
    overflow: hidden;
}

#tsparticles { 
    position: fixed; 
    inset: 0; 
    z-index: 0; 
}

.auth-container:before {
    content: '';
    position: absolute;
    height: 2000px;
    width: 2000px;
    top: -10%;
    right: 48%;
    transform: translateY(-50%);
    background-image: var(--primary-gradient);
    transition: 1.8s ease-in-out;
    border-radius: 50%;
    z-index: 6;
}

/* Theme Switcher Styles */
#auth-theme-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}
.theme-button {
    position: relative;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.theme-button i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.theme-button .sun-icon { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
.theme-button .moon-icon { transform: translate(-50%, -50%) scale(0) rotate(-90deg); opacity: 0; }
body.light-mode .theme-button .sun-icon { transform: translate(-50%, -50%) scale(0) rotate(90deg); opacity: 0; }
body.light-mode .theme-button .moon-icon { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }


.forms-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.signin-signup { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 75%; width: 50%; transition: 1s 0.7s ease-in-out; display: grid; grid-template-columns: 1fr; z-index: 7; }

form { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0rem 5rem; transition: opacity 0.2s 0.7s, transform 0.2s 0.7s; grid-column: 1 / 2; grid-row: 1 / 2; }

/* FIX PARA HINDI MAG-OVERLAP ANG FORMS */
form.sign-up-form { opacity: 0; z-index: 1; pointer-events: none; }
form.sign-in-form { opacity: 1; z-index: 2; pointer-events: auto; }
.auth-container.sign-up-mode form.sign-up-form { opacity: 1; z-index: 2; pointer-events: auto; }
.auth-container.sign-up-mode form.sign-in-form { opacity: 0; z-index: 1; pointer-events: none; }

.form-logo-link { display: block; margin-bottom: 1rem; }
.form-logo { width: 60px; height: auto; animation: float 3s ease-in-out infinite; }
.title { font-size: 2rem; color: var(--text-color); margin-bottom: 1rem; }
.input-field { max-width: 380px; width: 100%; background-color: var(--secondary-color); border: 1px solid var(--border-color); margin: 10px 0; height: 55px; border-radius: 8px; display: grid; grid-template-columns: 15% 85%; padding: 0 0.4rem; position: relative; }
.input-field i { text-align: center; line-height: 55px; color: var(--text-color-gray); font-size: 1.1rem; }
.input-field input { background: none; outline: none; border: none; line-height: 1; font-weight: 500; font-size: 1rem; color: var(--text-color); }
.auth-options { display: flex; justify-content: space-between; width: 100%; max-width: 380px; font-size: 0.9rem; margin: 10px 0; }
.auth-options a { color: var(--primary-color); text-decoration: none !important; }
.remember-me { display: flex; align-items: center; gap: 0.5rem; color: var(--text-color-gray); }
.auth-btn { width: 100%; max-width: 380px; background-image: var(--primary-gradient); border: none; outline: none; height: 49px; border-radius: 8px; color: #fff; text-transform: uppercase; font-weight: 600; margin: 20px 0; cursor: pointer; transition: 0.5s; }

.panels-container { position: absolute; height: 100%; width: 100%; top: 0; left: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.panel { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-around; text-align: center; z-index: 6; }
.left-panel { pointer-events: all; padding: 3rem 17% 2rem 12%; }
.right-panel { pointer-events: none; padding: 3rem 12% 2rem 17%; }
.panel .content { color: #fff; transition: transform 0.9s ease-in-out; transition-delay: 0.6s; }
.panel .image { width: 100%; max-width: 450px; transition: transform 1.1s ease-in-out; transition-delay: 0.4s; }
.panel h3 { font-size: 1.5rem; }
.panel p { font-size: 0.95rem; }
.panel .btn.transparent { 
    margin-top: 1rem; /* BINAGO: Dinagdagan ng espasyo sa taas */
    background: none; 
    border: 2px solid #fff; 
    width: 130px; 
    height: 41px; 
    font-weight: 600; 
    font-size: 0.8rem; 
    color: #fff; 
    text-decoration: none; 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
}
.right-panel .image, .right-panel .content { transform: translateX(800px); }

/* ANIMATION */
.auth-container.sign-up-mode:before { transform: translate(100%, -50%); right: 52%; }
.auth-container.sign-up-mode .left-panel .image, .auth-container.sign-up-mode .left-panel .content { transform: translateX(-800px); }
.auth-container.sign-up-mode .signin-signup { left: 25%; }
.auth-container.sign-up-mode .right-panel .image, .auth-container.sign-up-mode .right-panel .content { transform: translateX(0%); }
.auth-container.sign-up-mode .left-panel { pointer-events: none; }
.auth-container.sign-up-mode .right-panel { pointer-events: all; }

/* TABLET BREAKPOINT */
@media (max-width: 1024px) {
    form { padding: 0 2rem; }
    .panel { align-items: center; }
    .left-panel { padding: 2rem 10% 2rem 8%; }
    .right-panel { padding: 2rem 8% 2rem 10%; }
    .panel .image { max-width: 350px; }
}

/* MOBILE/TABLET VERTICAL BREAKPOINT */
@media (max-width: 870px) {
    .auth-container { min-height: 800px; height: 100vh; }
    .signin-signup { width: 100%; top: 95%; transform: translate(-50%, -100%); transition: 1s 0.8s ease-in-out; }
    .signin-signup, .auth-container.sign-up-mode .signin-signup { left: 50%; }
    .panels-container { grid-template-columns: 1fr; grid-template-rows: 1fr 2fr 1fr; }
    .panel { flex-direction: row; justify-content: space-around; align-items: center; padding: 2.5rem 8%; grid-column: 1 / 2; }
    .right-panel { grid-row: 3 / 4; }
    .left-panel { grid-row: 1 / 2; }
    .image { width: 200px; }
    .panel .content { padding-right: 15%; }
    .panel h3 { font-size: 1.2rem; }
    .panel p { font-size: 0.7rem; }
    .btn.transparent { width: 110px; height: 35px; font-size: 0.7rem; }
    .auth-container:before { width: 1500px; height: 1500px; transform: translateX(-50%); left: 30%; bottom: 68%; right: initial; top: initial; transition: 2s ease-in-out; }
    .auth-container.sign-up-mode:before { transform: translate(-50%, 100%); bottom: 32%; right: initial; }
    
    .panel { transition: opacity 0.5s 0.4s ease-in-out, transform 0.9s ease-in-out; }
    .right-panel { opacity: 0; pointer-events: none; }
    .auth-container.sign-up-mode .right-panel { opacity: 1; pointer-events: all; }
    .auth-container.sign-up-mode .left-panel { opacity: 0; pointer-events: none; }

    .auth-container.sign-up-mode .left-panel .image, .auth-container.sign-up-mode .left-panel .content { transform: translateY(-300px); }
    .auth-container.sign-up-mode .right-panel .image, .auth-container.sign-up-mode .right-panel .content { transform: translateY(0px); }
    .right-panel .image, .right-panel .content { transform: translateY(300px); }
    .auth-container.sign-up-mode .signin-signup { top: 5%; transform: translate(-50%, 0); }
}

/* SMALL MOBILE BREAKPOINT */
@media (max-width: 570px) {
    form { padding: 0 1.5rem; }
    .image { display: none; }
    .panel { justify-content: center; }
    .panel .content { padding: 0.5rem 1rem; }

    /* === BAGONG DAGDAG: SHRINK STYLES PARA SA MALIIT NA SCREEN === */
    .title {
        font-size: 1.5rem; /* Pinaliit ang main title */
    }
    .input-field {
        height: 45px; /* Pinaliit ang input fields */
        margin: 8px 0;
    }
    .input-field i {
        line-height: 45px;
    }
    .input-field input {
        font-size: 0.9rem;
    }
    .auth-btn {
        height: 40px; /* Pinaliit ang button */
        margin: 15px 0;
        font-size: 0.9rem;
    }
    .panel h3 {
        font-size: 1rem;
    }
    .panel p {
        font-size: 0.8rem;
    }
    .btn.transparent {
        width: 100px;
        height: 32px;
        font-size: 0.7rem;
    }
}

/* KEYFRAMES PARA SA FLOATING ANIMATION */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}