@import url(../base/common.css);

/* BUTTON HOVER IS NOT DECLARED HERE. Every button on the site shares one
   hover — a small highlight and a 1px lift — and it lives in
   base/button-hover.css, which is linked on every page. The per-button
   `:hover` rules this file used to carry were removed when that file was
   written; a new one here would silently win (page sheets load after it) and
   put this page's buttons back out of step with the rest of the site. */
@import url(../base/form.css);

/* SIZE/OVERLAP FIX: the page used body{overflow:hidden} + a fixed 90vh
   centered wrap. The card is taller than 90vh on common screens, so the
   centered overflow pushed the top of the card up UNDER the sticky header
   (and it could never be scrolled back into view). The page now flows
   normally below the header and scrolls when needed. */

/* ── Layout ──────────────────────────────────────────────────────── */

.login-page-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    /* fill the viewport minus the sticky header, but grow when needed */
    min-height: calc(100vh - 90px);
    padding: 2rem 0;
}

.mobile-signup-link { display: none; }

/* CENTERING FIX: the promo panel (.login-right) is no longer in the markup,
   but the container was still a 2-column grid — so the form card sat in the
   left half and read as off-centre, with rounding on its left edge only.
   Single column + full rounding + a slightly wider card on desktop. */
.login-container {
    width: 90%;
    max-width: 560px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
    z-index: 10;
    animation: fadeInUp 0.8s;
}

.login-left {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    padding: 2.5rem 2.5rem;
    border-radius: var(--radius-xl);
    border: var(--glass-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-right {
    background: var(--overlay-lg);
    backdrop-filter: var(--glass-blur);
    padding: 2.5rem 2.5rem;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    border: var(--glass-border);
    border-left: 1px solid var(--overlay-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ── Text ────────────────────────────────────────────────────────── */

.logo {
    font-size: 1.9rem;
    font-weight: bold;
    background: linear-gradient(45deg, #fff, var(--color-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.welcome-text {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.subtitle {
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
    font-size: 1rem;
}

/* ── Password toggle ─────────────────────────────────────────────── */

.password-container { position: relative; }

.toggle-password {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}

.toggle-password:hover { color: var(--color-gold); }

/* Eye / eye-with-slash icon swap */
.toggle-password .icon-eye-off { display: none; }
.toggle-password.is-visible .icon-eye { display: none; }
.toggle-password.is-visible .icon-eye-off { display: block; }

/* ── Remember / forgot ───────────────────────────────────────────── */

.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.remember-me input { width: 18px; height: 18px; cursor: pointer; }

.forgot-password {
    color: var(--color-gold);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.forgot-password:hover { text-decoration: underline; }

/* ── Login button ────────────────────────────────────────────────── */

.btn-login {
    width: 100%;
    padding: 1.1rem;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--btn-transition);
    box-shadow: var(--shadow-primary);
    margin-bottom: 1.5rem;
}

/* ── Divider ─────────────────────────────────────────────────────── */

.divider {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
}

/* The rules are absolutely positioned against the divider and the label sits
   centred on top of them, so their width has to leave a gap for the label
   rather than run underneath it. 34% a side leaves 32% clear on desktop; the
   label needs proportionally more room on a narrow panel, hence 30% in the
   media query at the foot of this file. */
.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 34%;
    height: 1px;
    background: var(--overlay-xl);
}

.divider::before { left: 0; }
.divider::after  { right: 0; }

.divider span {
    background: var(--overlay-sm);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* ── Social login ────────────────────────────────────────────────── */

/* THREE PROVIDERS, NOT TWO. `flex: 1` alone squeezed the third button until "Discord"
   clipped on narrow panels; the basis below lets a button that cannot get ~7rem drop to
   the next line as a full-width row instead. gap shrinks with the count so the row still
   fills the panel. */
.social-login { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.btn-social {
    flex: 1 1 7rem;
    min-width: 0;
    padding: 0.9rem;
    border: var(--glass-border);
    background: var(--overlay-sm);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--btn-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-social-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

/* ── Promo panel ─────────────────────────────────────────────────── */

.promo-icon { font-size: 3.5rem; margin-bottom: 1.25rem; }

.promo-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.promo-description {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.features-list {
    text-align: left;
    margin-bottom: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.8rem;
    background: var(--overlay-sm);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.feature-item:hover {
    background: var(--overlay-md);
    transform: translateX(5px);
}

.feature-icon { font-size: 1.8rem; flex-shrink: 0; }

/* OVERLAP FIX: this is an <a>, and an inline box's vertical padding does not
   push the surrounding lines apart — it just paints over them. With 1rem of it
   the button bled upwards into the "or register now" divider directly above.
   A block box with auto side margins both stops the overlap and centres the
   button, which `place-self` never could: the button's parent is the <form>,
   not a grid or flex container, so that property was inert here. */
.btn-signup {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 1rem 3rem;
    background: var(--overlay-lg);
    color: white;
    text-align: center;
    text-decoration: none;
    border: 2px solid var(--overlay-xl);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--btn-transition);
}

/* RESPONSIVE FIX: on mobile the welcome/promo panel is hidden entirely,
   the form panel gets full rounding, and the page becomes scrollable
   (body overflow:hidden + fixed 90vh made the form unreachable). */
@media (max-width: 968px) {
    .divider::before, .divider::after { width: 30%; }

    .login-page-wrap {
        min-height: calc(100vh - 90px);
        padding: 1.5rem 0;
    }

    .login-container {
        max-width: 500px;
    }

    .login-left {
        padding: 2.5rem 1.5rem;
    }

    .login-right { display: none; }

    .mobile-signup-link {
        display: block;
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--overlay-md);
        color: var(--color-text-muted);
    }

    .mobile-signup-link a {
        color: var(--color-gold);
        text-decoration: none;
        font-weight: 600;
    }

    .mobile-signup-link a:hover { text-decoration: underline; }

    .logo { font-size: 1.8rem; }
    .welcome-text { font-size: 1.6rem; }
}

/* ── Account-state notices ───────────────────────────────────────── */

/* The banners above the sign-in form: "confirm your email", "password changed",
   "check your inbox". They sit inside the left panel, which is the narrow column on
   mobile, so they stay compact and wrap rather than pushing the form off-screen. */
.auth-notice {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.9rem;
    line-height: 1.5;
}

.auth-notice--ok {
    background: rgba(91, 61, 245, 0.12);
    border: 1px solid rgba(91, 61, 245, 0.35);
}

.auth-notice--warn {
    background: rgba(255, 176, 32, 0.12);
    border: 1px solid rgba(255, 176, 32, 0.4);
}

.resend-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.resend-form input {
    flex: 1 1 12rem;
    min-width: 0;
}

.btn-resend {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}