/* ==========================================================================
   Central ICT Club Bangladesh
   Auth pages (login and signup)
   Shares the tokens, buttons, and badge from style.css. Only the split layout
   and the form pieces live here, so nothing gets duplicated.
   ========================================================================== */

.auth-body {
    background: var(--white);
}

/* Two panels side by side: a branded story on the left, the form on the right */
.auth {
    display: flex;
    min-height: 100dvh;
}

/* ---- Brand panel ------------------------------------------------------ */
.auth__brand {
    position: relative;
    flex: 0 0 44%;
    max-width: 600px;
    display: flex;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(120% 70% at 12% 0%, rgba(28, 99, 180, 0.35), transparent 55%),
        radial-gradient(90% 80% at 100% 100%, rgba(22, 163, 93, 0.32), transparent 52%),
        linear-gradient(160deg, var(--navy-900), var(--navy-800) 62%, #0a2950);
}

/* faint circuit grid for the same texture as the homepage hero */
.auth__circuit {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 80% 12%, rgba(43, 196, 115, 0.18), transparent 30%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 64px);
    pointer-events: none;
}

.auth__brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    padding: clamp(36px, 5vw, 64px);
}

/* Logo lockup reuses the shared white badge */
.auth__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
}

.auth__logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--white);
    max-width: 200px;
    line-height: 1.2;
}

.auth__brand-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth__headline {
    font-family: var(--font-display);
    color: var(--white);
    font-weight: 800;
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.auth__sub {
    font-size: clamp(1.02rem, 1rem + 0.3vw, 1.18rem);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 420px;
}

/* Benefit and reassurance list */
.auth__points {
    display: grid;
    gap: 16px;
    margin: 0;
}

.auth__points li {
    position: relative;
    padding-left: 36px;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}

.auth__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center / 13px no-repeat,
        var(--grad-brand);
}

.auth__brand-foot {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ---- Form panel ------------------------------------------------------- */
.auth__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 4vw, 56px);
    background: var(--white);
}

.auth__card {
    width: 100%;
    max-width: 430px;
    margin: auto;
    padding-block: 24px;
}

.auth__card-head {
    margin-bottom: 26px;
}

.auth__title {
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}

.auth__lead {
    color: var(--slate-500);
    margin: 0;
}

/* status icon badge, used by the verify email page */
.auth__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 18px;
    color: var(--white);
    background: var(--grad-brand);
    box-shadow: var(--sh-green);
}

.auth__icon svg {
    width: 30px;
    height: 30px;
}

/* small muted helper line, used above the resend button */
.auth__hint {
    margin: 0 0 18px;
    font-size: 0.94rem;
    color: var(--slate-500);
}

/* Social sign on */
.auth__social {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    font-family: var(--font-body);
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
                transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.oauth-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.oauth-btn:hover {
    background: var(--paper);
    border-color: var(--slate-400);
    transform: translateY(-1px);
    box-shadow: var(--sh-sm);
}

/* Divider with a label in the middle */
.auth__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--slate-400);
    font-size: 0.86rem;
}

.auth__divider::before,
.auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ---- Form fields ------------------------------------------------------ */
/* a hidden block stays hidden even when it also carries a layout class */
[hidden] { display: none !important; }

.auth-form {
    display: grid;
    gap: 18px;
}

/* ---- Submit, status, switch ------------------------------------------- */
.auth-form .btn {
    margin-top: 4px;
}

.auth__status {
    min-height: 20px;
    margin: 4px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--green-600);
    text-align: center;
}

.auth__status.is-error {
    color: #d6453d;
}

.auth__switch {
    margin: 24px 0 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--slate-500);
}

.auth__switch a {
    font-weight: 700;
    color: var(--green-600);
}

.auth__switch a:hover {
    text-decoration: underline;
}

/* ---- Panel footer ----------------------------------------------------- */
.auth__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
    padding-top: 20px;
    font-size: 0.85rem;
    color: var(--slate-400);
}

.auth__foot p {
    margin: 0;
}

.auth__foot-links {
    display: flex;
    gap: 18px;
}

.auth__foot-links a {
    color: var(--slate-500);
    transition: color 0.2s var(--ease);
}

.auth__foot-links a:hover {
    color: var(--green-600);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Stack the panels and turn the brand side into a compact banner */
@media (max-width: 960px) {
    .auth {
        flex-direction: column;
        min-height: 100dvh;
    }

    .auth__brand {
        flex: none;
        max-width: none;
    }

    .auth__brand-inner {
        gap: 18px;
        padding: clamp(24px, 6vw, 40px);
    }

    /* keep the banner short by dropping the extras on small screens */
    .auth__sub,
    .auth__points,
    .auth__brand-foot {
        display: none;
    }

    .auth__panel {
        flex: 1;
    }

    .auth__card {
        margin-block: 0;
        padding-top: 32px;
    }
}

/* Phones */
@media (max-width: 480px) {
    .auth__brand-inner {
        gap: 14px;
    }

    .auth__logo-text {
        font-size: 0.95rem;
    }

    .auth__foot {
        justify-content: center;
        text-align: center;
    }
}