@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
* { box-sizing: border-box; }

body {
    background: #F6F5F7;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    margin: -20px 0 50px;
}

h1 { font-weight: 600; margin: 0; }
h2 { text-align: center; }

p {
    font-size: .85rem;
    font-weight: 200;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span { font-size: .75rem; }

a {
    color: #333333;
    font-size: .85rem;
    text-decoration: none;
    margin: 15px 0;
}

/* ─────────────────────────────────────────
   BUTTON
───────────────────────────────────────── */
button {
    border-radius: 20px;
    border: 1px solid #27CDA7;
    background-color: #27CDA7;
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 500;
    padding: 0.75rem 2.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all .25s ease-in;
    cursor: pointer;
}
button:hover  { background-color: #37DFB8; }
button:active { transform: scale(.95); }
button:focus  { outline: none; }
button.ghost  { background-color: transparent; border-color: #FFFFFF; }

/* ─────────────────────────────────────────
   FORM & INPUT
───────────────────────────────────────── */
form {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
}

input {
    background-color: #EEEEEE;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

/* ─────────────────────────────────────────
   LOGIN WRAPPER
───────────────────────────────────────── */
.login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* ─────────────────────────────────────────
   OUTER LOGO — PreciousConnect (above card)
───────────────────────────────────────── */
.outer-logo {
    text-align: center;
}

.parent-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.parent-brand span {
    font-size: 0.65rem;
    color: #999999;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.parent-brand img {
    max-width: 130px;
    height: auto;
    opacity: 0.85;
}

/* ─────────────────────────────────────────
   INNER LOGO — PreciousFrame (inside card)
───────────────────────────────────────── */
.inner-logo {
    text-align: center;
    margin-bottom: 10px;
}

.inner-logo img {
    max-width: 120px;
    height: auto;
}

/* ─────────────────────────────────────────
   CONTAINER CARD
───────────────────────────────────────── */
.container {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 400px;
}

/* ─────────────────────────────────────────
   FORM CONTAINERS (login / forgot)
───────────────────────────────────────── */
.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all .5s ease-in-out;
}

/* Login panel */
.login-container {
    left: 0;
    width: 50%;
    z-index: 2;
}
.container.right-panel-active .login-container {
    transform: translateX(100%);
}

/* Forgot panel */
.forgot-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}
.container.right-panel-active .forgot-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show .5s;
}

/* Signup panel (kept for extensibility) */
.signup-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}
.container.right-panel-active .signup-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show .5s;
}

@keyframes show {
    0%,   49.99% { opacity: 0; z-index: 1; }
    50%, 100%    { opacity: 1; z-index: 5; }
}

/* ─────────────────────────────────────────
   SOCIAL ICONS
───────────────────────────────────────── */
.social-container { margin: 20px 0; }
.social-container a {
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

/* ─────────────────────────────────────────
   OVERLAY
───────────────────────────────────────── */
.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all .5s ease-in-out;
    z-index: 100;
}
.container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

.overlay {
    background: linear-gradient(to right, #37DFB8, #E87B37, #E8375A);
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform .5s ease-in-out;
}
.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform .5s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}
.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

/* ─────────────────────────────────────────
   PASSWORD TOGGLE
───────────────────────────────────────── */
.password-field-container {
    position: relative;
    width: 100%;
}

.password-field-container input {
    padding-right: 40px;
}

.password-toggle-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    font-size: 1rem;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.company-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 15px 0;
    background-color: #F6F5F7;
    font-size: 0.75rem;
    color: #666;
    z-index: 1000;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 768px) {

    body {
        height: auto;
        min-height: 100vh;
        padding: 30px 15px 70px;
        justify-content: flex-start;
    }

    .login-wrapper {
        width: 100%;
        gap: 10px;
    }

    /* Card becomes full width */
    .container {
        width: 100%;
        min-height: unset;
        border-radius: 10px;
        /* Stack vertically: login on top, overlay hidden */
        display: flex;
        flex-direction: column;
    }

    /* All form panels: static, full width, full height auto */
    .form-container {
        position: static;
        width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        z-index: auto !important;
    }

    /* Hide forgot panel by default on mobile */
    .forgot-container {
        display: none;
    }

    /* Show forgot panel when active */
    .container.right-panel-active .forgot-container {
        display: flex;
    }

    /* Hide login panel when forgot is active */
    .container.right-panel-active .login-container {
        display: none;
    }

    form {
        padding: 30px 25px;
        height: auto;
    }

    /* Hide overlay entirely on mobile */
    .overlay-container {
        display: none;
    }

    /* Show a simple text link instead of overlay button on mobile */
    .mobile-switch {
        display: block;
        text-align: center;
        margin-top: 10px;
        font-size: 0.8rem;
        color: #27CDA7;
        cursor: pointer;
        text-decoration: underline;
    }

    h1 { font-size: 1.3rem; }

    .parent-brand img { max-width: 100px; }
    .inner-logo img   { max-width: 90px; }

    .company-footer {
        font-size: 0.65rem;
        padding: 10px 15px;
    }
}