@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* ---------- Base ---------- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
}

/* ---------- 2-pane layout (logo left, card right) ---------- */
.login-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* equal halves for balance */
    align-items: center;
    min-height: 100vh;
    max-width: 1280px;
    margin: 0 auto; /* center the whole composition */
    padding: 0 60px; /* equal outer gutters */
}

/* LEFT: logo */
.brand-pane {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo {
    width: 70%;
    max-width: 500px;
    height: auto;
}

/* RIGHT: pane */
.login-pane {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center the two buttons and control width/spacing */
.action-stack.compact {
    display: flex;
    flex-direction: column;
    align-items: center; /* centers the boxes horizontally */
    gap: 10px; /* space between buttons */
}

    /* Make both buttons smaller and fixed-width, but responsive */
    .action-stack.compact .btn-myinfo,
    .action-stack.compact .btn-manual {
        width: 280px; /* target size */
        max-width: 90%; /* shrink nicely on small screens */
        margin: 0; /* stack handles spacing */
        border-radius: 10px;
    }

    /* Tighter paddings & centered text for MyInfo */
    .action-stack.compact .btn-myinfo {
        padding: 10px 14px 8px; /* smaller than original */
        text-align: center; /* center the two lines */
    }

        /* Reduce line sizes slightly */
        .action-stack.compact .btn-myinfo .line1 {
            font-size: 10pt; /* keep bold headline size */
        }

        .action-stack.compact .btn-myinfo .line2 {
            font-size: 9pt; /* slightly smaller subline */
        }

    /* Tighter manual button too */
    .action-stack.compact .btn-manual {
        padding: 10px 14px;
        font-size: 10pt;
    }

/* Optional: even smaller on very small screens */
@media (max-width: 420px) {
    .action-stack.compact .btn-myinfo,
    .action-stack.compact .btn-manual {
        width: 240px;
    }
}

/* ---------- Blue shell + white card (compact, not stretched) ---------- */
.card-shell {
    background: #7ab9e1; /* light blue */
    border-radius: 0; /* square corners per mock */
    padding: 48px; /* thickness of blue border */
    display: inline-block; /* shrink to fit content */
    flex: 0 0 auto; /* stop flex stretching */
    align-self: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.login-card {
    background: #fff;
    border-radius: 12px; /* inner card slightly rounded */
    padding: 32px;
    width: 420px; /* fixed compact form width */
    max-width: 420px;
    text-align: left; /* labels & fields left aligned */
}

/* ---------- Typography + controls ---------- */
.login-title {
    font-weight: 700;
    font-size: 18pt;
    color: #000;
    margin-bottom: 20px;
    text-align: center; /* title centered */
}

.subtitle {
    font-size: 10pt;
    color: #c7c7d0;
    margin: 6px 0 18px 0;
    text-align: center;
}


/* Vertical stack with equal gaps */
.welcome-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* lets hr and section fill the card width */
    gap: 18px; /* set your desired equal spacing here */
}

    /* Remove stray margins so only the gap controls spacing */
    .welcome-stack > * {
        margin: 0;
    }

    .welcome-stack .login-button {
        margin: 0;
    }
    /* override inline style if any */
    .welcome-stack .thin-divider {
        margin: 0;
    }
/* kills default hr margins */


/* Step headings (magenta) */
.form-step {
    font-weight: 700;
    font-size: 10pt;
    color: #cf3679;
    margin-bottom: 12px;
    text-align: left;
}

/* Labels */
.login-card label {
    font-size: 10pt;
    font-weight: 400;
    color: #000;
    display: block;
    margin: 8px 0 4px;
    text-align: left;
}

/* Inputs */
.login-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 10pt;
    color: #000;
}

    .login-input::placeholder {
        color: #c7c7d0;
    }

/* Button */
.login-button {
    background: #cf3679;
    color: #fff;
    font-weight: 700;
    font-size: 10pt;
    border: none;
    border-radius: 6px;
    padding: 12px;
    width: 100%;
    cursor: pointer;
    transition: background-color .2s ease;
}

    .login-button:hover {
        background: #b82e69;
    }

/* ---------- Alerts + validation ---------- */
.ywca-alert {
    margin: 0 0 16px 0;
    padding: 10px 12px;
    border: 1px solid #cf3679;
    background: #fff0f6;
    color: #7a0140;
    font-size: 10pt;
    border-radius: 6px;
    text-align: left;
}

    .ywca-alert.success {
        border-color: #28a745;
        background: #e6f9ee;
        color: #155724;
    }

.field-error {
    display: block;
    margin: -8px 0 10px 2px;
    font-size: 10pt;
    color: #cf3679;
}

input.input-validation-error,
.login-input.input-validation-error {
    border-color: #cf3679 !important;
}

/* ---------- Dividers ---------- */
.thin-divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,.2);
    margin: 18px 0;
}

/* ---------- Signup: “New Registration” block (welcome page) ---------- */
.login-card .section-title {
    font-weight: 700 !important; /* 10pt bold black */
    font-size: 12pt !important;
    color: #000 !important;
    text-align: center;
    margin-bottom: 10px;
}

.login-card .section-links {
    display: block !important; /* stack vertically */
    text-align: center;
}

    .login-card .section-links a.cta-link {
        display: block !important;
        margin-top: 8px;
        font-size: 10pt;
        font-weight: 700 !important;
        color: #cf3679 !important; /* brand magenta */
        text-decoration: underline !important;
    }

        .login-card .section-links a.cta-link:hover {
            text-decoration: underline !important;
            opacity: .95;
        }

/* Generic inline links */
.login-links {
    margin-top: 18px;
    font-size: 10pt;
    color: #000;
}

    .login-links .link-bold {
        font-weight: 700;
        color: #cf3679;
        text-decoration: none;
    }

        .login-links .link-bold:hover {
            text-decoration: underline;
        }

    .login-links .link-muted {
        display: block;
        margin-top: 10px;
        color: #cf3679;
        text-decoration: none;
    }

        .login-links .link-muted:hover {
            text-decoration: underline;
        }

/* Choice screen tweaks */
.title-2line {
    margin-bottom: 12px;
}

/* MyInfo button (red, two-line) */
.btn-myinfo {
    display: block;
    width: 100%;
    margin: 12px 0 10px;
    padding: 14px 16px 10px;
    border: none;
    border-radius: 10px;
    background: #ec1c24; /* Official Singpass/MyInfo red */
    color: #fff !important;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0,0,0,.08);
}

    .btn-myinfo .line1 {
        display: block;
        font-weight: 700;
        font-size: 10pt;
        line-height: 1.1;
    }

    .btn-myinfo .line2 {
        display: block;
        margin-top: 2px;
        font-weight: 600;
        font-size: 10pt;
        opacity: .9;
    }

/* Manual button (grey) */
.btn-manual {
    display: block;
    width: 100%;
    margin: 8px 0 18px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    background: #cfd2d6;
    color: #fff !important;
    font-weight: 700;
    font-size: 10pt;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Back link (magenta, small) */
.back-link {
    display: block;
    margin-top: 6px;
    text-align: center;
    font-size: 10pt;
    color: #cf3679 !important;
    text-decoration: none;
}

    .back-link:hover {
        text-decoration: underline;
    }

/* Required indicator (subtle magenta bar) */
.login-card input[required],
.login-card select[required],
.login-card textarea[required] {
    border-left: 3px solid #cf3679; /* visual cue = required */
    padding-left: 10px; /* keep text away from bar */
}

/* Focus + invalid feedback (no JS needed) */
.login-card input:focus,
.login-card select:focus,
.login-card textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(207,54,121,.18);
}

.login-card input:invalid:not(:placeholder-shown),
.login-card select:invalid,
.login-card textarea:invalid:not(:placeholder-shown) {
    border-color: #cf3679;
    background: #fff0f6; /* soft error background */
}

/* ---------- Responsive ---------- */
@media (max-width:980px) {
    .login-layout {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .brand-pane {
        display: none;
    }

    .card-shell {
        padding: 30px;
    }

    .login-card {
        width: 360px;
        max-width: 360px;
    }
}
/* Step 2: single-column outer layout (no big left logo) */
.login-layout.single {
    grid-template-columns: 1fr;
}

/* Wider card so two columns fit nicely */
.login-card-wide {
    width: 820px;
    max-width: 820px;
}

/* Small logo on top of the card */
.brand-mini {
    display: block;
    margin: 0 auto 6px;
    max-width: 160px;
    height: auto;
}

/* Two-column grid inside the form */
.form-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 16px;
}

/* A row that spans both columns (e.g., password section) */
.span-2 {
    grid-column: 1 / -1;
}

/* Two equal cells within a single row */
.grid-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

/* Tighten spacing in sections to avoid vertical scroll */
.login-card-wide .form-section {
    margin-bottom: 10px;
}

/* Responsive: stack columns on narrow screens */
@media (max-width: 980px) {
    .login-card-wide {
        width: 100%;
        max-width: 560px;
    }

    .form-grid2 {
        grid-template-columns: 1fr;
    }

    .grid-row-2 {
        grid-template-columns: 1fr;
    }

    .brand-mini {
        max-width: 140px;
    }
}
/* Verify result card bits (reuses the YWCA shell/card) */
.verify-card {
    text-align: center;
}

.verify-badge {
    width: 72px;
    height: 72px;
    border-radius: 9999px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    font-size: 28px;
    color: #fff;
}

    .verify-badge.ok {
        background: #22c55e;
    }
    /* green */
    .verify-badge.err {
        background: #ea4335;
    }
/* red */

.verify-heading {
    font-weight: 700;
    font-size: 16pt;
    margin: 6px 0 4px;
    color: #000;
    text-transform: none;
}

    .verify-heading.ok {
        color: #22a155;
    }

    .verify-heading.err {
        color: #d93025;
    }
/* Password helper box */
.pw-helper {
    margin-top: 10px;
    background: #f8f9fb;
    border: 1px solid #e4e7ee;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px; /* ~8–9pt */
    color: #333;
}

.pw-req-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* two columns on wide screens */
    gap: 6px 16px;
}

.pw-req {
    position: relative;
    padding-left: 20px; /* space for icon */
    line-height: 1.3;
    color: #666; /* default muted */
}

    /* default bullet (gray dot) */
    .pw-req::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(1px);
        font-weight: 700;
        color: #b5bac7;
    }

    /* when requirement is satisfied -> green check */
    .pw-req.ok {
        color: #1b5e20; /* dark green text */
        font-weight: 600;
    }

        .pw-req.ok::before {
            content: "✓";
            color: #2e7d32; /* green icon */
        }

    /* when requirement is currently failing (user has typed) -> red cross */
    .pw-req.bad {
        color: #9b1c1c; /* red text */
    }

        .pw-req.bad::before {
            content: "✗";
            color: #c62828; /* red icon */
        }

/* Stack to one column on small screens */
@media (max-width: 600px) {
    .pw-req-list {
        grid-template-columns: 1fr;
    }
}
/* Put this in LoginYWCA.css if you want */
.pw-helper {
    margin-top: 10px;
    background: #f8f9fb;
    border: 1px solid #e4e7ee;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #333;
}

.pw-req-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.pw-req {
    position: relative;
    padding-left: 20px;
    line-height: 1.3;
    color: #666;
}

    .pw-req::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(1px);
        font-weight: 700;
        color: #b5bac7;
    }

    .pw-req.ok {
        color: #1b5e20;
        font-weight: 600;
    }

        .pw-req.ok::before {
            content: "✓";
            color: #2e7d32;
        }

    .pw-req.bad {
        color: #9b1c1c;
    }

        .pw-req.bad::before {
            content: "✗";
            color: #c62828;
        }

@media (max-width: 600px) {
    .pw-req-list {
        grid-template-columns: 1fr;
    }
}
.verify-badge.warn {
    background: #f59e0b; /* amber */
}

.verify-heading.warn {
    color: #b45309; /* darker amber text */
}

/* Wrap for password + eye (inside the white card) */
.login-card .password-field {
    position: relative;
    margin-bottom: 12px; /* keep spacing consistent with inputs */
}

/* Ensure input has room for the eye */
.login-card .login-input.has-toggle {
    display: block;
    width: 100%;
    padding-right: 46px !important; /* >= eye width + gap */
}

/* Absolutely position the eye inside the input */
.login-card .password-field .eye-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #6b7280;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    z-index: 2;
    line-height: 0; /* optional: avoid any stray inline height */
}

    /* Hover/focus */
    .login-card .password-field .eye-toggle:hover,
    .login-card .password-field .eye-toggle:focus {
        color: #374151;
    }

    /* Icon sizing */
    .login-card .password-field .eye-toggle svg {
        width: 20px;
        height: 20px;
    }

/* Default: show open eye, hide closed eye */
.icon-eye-closed {
    display: none;
}

/* Improve hit area on small screens */
@media (max-width: 600px) {
    .login-card .password-field .eye-toggle {
        width: 40px;
        height: 40px;
        right: 6px;
    }
}

/* Flagging UX for IMDA: expired rows in soft red */
.expired {
    background: #ffecec;
}

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .8rem;
}

.tag-expired {
    background: #ffdddd;
    border: 1px solid #ff9b9b;
}

.tag-upcoming {
    background: #e8f3ff;
    border: 1px solid #9ecbff;
}

@media print {
    .no-print {
        display: none !important;
    }

    table {
        font-size: 12px;
    }

    a {
        text-decoration: none;
        color: #000;
    }
}