/* ezrs-login.css — Login page (uses EZRS Auth design tokens) */

:root {
    --green-900: #0B3D26;
    --green-800: #0F5132;
    --green-700: #166534;
    --green-600: #16A34A;
    --green-500: #22C55E;
    --green-400: #4ADE80;
    --green-300: #86EFAC;
    --green-200: #BBF7D0;
    --green-100: #DCFCE7;
    --green-50:  #F0FDF4;

    --ink-900: #0A1A12;
    --ink-700: #1F2A24;
    --ink-500: #4B5A53;
    --ink-300: #8E9B95;
    --ink-200: #C5CDC9;
    --ink-100: #E4E9E7;
    --ink-50:  #F6F8F7;

    --danger: #DC2626;
    --danger-bg: #FEF2F2;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(11,61,38,0.06);
    --shadow: 0 8px 24px -8px rgba(11,61,38,0.18), 0 2px 6px rgba(11,61,38,0.06);
    --shadow-lg: 0 24px 60px -20px rgba(11,61,38,0.32), 0 6px 20px rgba(11,61,38,0.08);
}

/* ── Layout ── */
.ezrs-login-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* ── Left hero panel ── */
/* Two equal halves on desktop (col-6 / col-6); stacked full width below 992px. */
.ezrs-login-hero {
    flex: 0 0 50%;
    max-width: 50%;
    background: linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 50%, var(--green-900) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 120px 48px 40px;
    position: relative;
    overflow: hidden;
}

/* ── Hexagon backgrounds ── */
.ezrs-login-hex {
    position: absolute;
    pointer-events: none;
}

.ezrs-login-hex svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ezrs-login-hex--lg {
    width: 500px;
    height: 500px;
    top: -100px;
    right: -40px;
    transform: rotate(12deg);
}

.ezrs-login-hex--md {
    width: 280px;
    height: 280px;
    bottom: 40px;
    left: -60px;
    transform: rotate(-8deg);
}

.ezrs-login-hex--sm {
    width: 160px;
    height: 160px;
    bottom: 240px;
    right: 100px;
    transform: rotate(22deg);
}

/* ── Hero text ── */
.ezrs-login-tagline {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-300);
    margin-bottom: 12px;
}

/* px, not rem: style.css sets html { font-size: 62.5% }, so 1rem is 10px on these
   pages and a rem floor shrank this heading to half its size on a phone. */
.ezrs-login-headline {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 20px 0;
    text-shadow: none;
    color: #fff;
    max-width: 540px;
}

.ezrs-login-headline .highlight {
    font-style: normal;
    color: var(--green-300);
}

.ezrs-login-subtext {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(220,252,231,0.85);
    max-width: 460px;
    margin: 0;
}

/* ── Right card panel ── */
/* flex-basis and max-width move together: the panel does not grow, so a wider
   max-width alone changes nothing. Half of the page, like the hero beside it. */
.ezrs-login-card-panel {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, var(--green-800) 0%, var(--green-900) 100%);
}

.ezrs-login-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    width: 100%;
    max-width: 680px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--ink-100);
    color: var(--ink-900);
}

/* Logo in card */
.ezrs-login-logo {
    text-align: center;
    margin-bottom: 20px;
}

.ezrs-login-logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* The card heading is the page's <h1> where the hero describes a different
   page (the register result pages, 2.4.6); elsewhere it is still an <h2>. */
.ezrs-login-card h1,
.ezrs-login-card h2 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
    color: var(--ink-900);
    text-shadow: none;
}

.ezrs-login-card .ezrs-login-card-sub {
    font-size: 14px;
    color: var(--ink-500);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

/* ── Divider ── */
.ezrs-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px 0;
}

.ezrs-login-divider::before,
.ezrs-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink-100);
}

.ezrs-login-divider span {
    font-size: 11px;
    color: var(--ink-300);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Form fields ── */
.ezrs-login-field {
    margin-bottom: 16px;
}

.ezrs-login-card .ezrs-login-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-700);
    margin-bottom: 6px;
    padding-top: 0;
}

/* Input fields on the login, registration and password-reset pages (beta and non-beta)
   carry a black border, so an empty field reads as a field on the white card. The focus,
   invalid and valid states below keep their own colours. */
.ezrs-login-card .ezrs-login-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #000;
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink-900);
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* 1.4.3: placeholder text is text and needs 4.5:1. --ink-300 measured
   2.89:1 on white; --ink-500 is 7.3:1. Do not lighten this again. */
.ezrs-login-card .ezrs-login-input::placeholder {
    color: var(--ink-500);
}

.ezrs-login-card .ezrs-login-input:hover {
    border-color: #000;
}

.ezrs-login-card .ezrs-login-input:focus {
    outline: none;
    border-color: #13893E;
    box-shadow: 0 0 0 3px rgba(19, 137, 62, .18);
}

.ezrs-login-card .ezrs-login-input.is-invalid {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.ezrs-login-card .ezrs-login-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}

.ezrs-login-card .ezrs-login-input.is-valid {
    border-color: var(--green-600);
}

/* Password wrapper with show toggle */
.ezrs-login-pw-wrapper {
    position: relative;
}

.ezrs-login-pw-wrapper .ezrs-login-input {
    padding-right: 60px;
}

.ezrs-login-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--ink-500);
    cursor: pointer;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.ezrs-login-pw-toggle:hover {
    background: var(--ink-50);
    color: var(--green-700);
}

/* ── Checkbox + forgot row ── */
.ezrs-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 13px;
}

.ezrs-login-options .form-check {
    margin: 0;
    padding-left: 1.75em;
}

.ezrs-login-options .form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 0.1em;
    accent-color: var(--green-700);
    border-color: #000;
}

.ezrs-login-options .form-check-input:checked {
    background-color: var(--green-700);
    border-color: var(--green-700);
}

.ezrs-login-options .form-check-label {
    font-size: 13px;
    color: var(--ink-700);
    padding-top: 0;
}

.ezrs-login-forgot {
    font-size: 13px;
    color: var(--green-700);
    font-weight: 500;
    text-decoration: none;
}

.ezrs-login-forgot:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Sign in button ── */
.ezrs-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--green-700);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, transform 0.08s;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(11,61,38,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

.ezrs-login-btn:hover {
    background: var(--green-800);
}

.ezrs-login-btn:active {
    transform: scale(0.99);
}

.ezrs-login-btn:disabled {
    background: var(--ink-200);
    cursor: wait;
    box-shadow: none;
}

/* ── Bottom links ── */
.ezrs-login-footer-text {
    text-align: center;
    font-size: 13px;
    color: var(--ink-500);
    margin: 8px 0 0;
}

/* 1.4.1: this link sits inside --ink-500 body text and --green-700 differs
   from it by 1.02:1 in luminance — colour alone cannot mark it. The underline
   is the non-colour cue and belongs in the resting state. */
.ezrs-login-footer-text a {
    color: var(--green-700);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ezrs-login-footer-text a:hover {
    text-decoration-thickness: 2px;
}

/* ── Error alert inside card ── */
.ezrs-login-card .alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--danger-bg);
    border: 1px solid #FECACA;
    border-radius: var(--radius);
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 16px;
}

/* Validation error text */
.ezrs-login-card .ezrs-login-error {
    display: none;
    font-size: 12px;
    color: var(--danger);
    margin-top: 4px;
    font-weight: 400;
}

/* ── Password requirements checklist ── */
.ezrs-login-requirements {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--ink-700);
}

.ezrs-login-requirements strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 8px;
}

.ezrs-login-requirements .list-group {
    border-radius: var(--radius-sm);
    margin: 0;
}

.ezrs-login-requirements .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--ink-500);
    border-color: var(--ink-100);
    background: #fff;
}

.ezrs-login-requirements .list-group-item div {
    color: var(--ink-200);
    transition: color 0.15s;
}

.ezrs-login-requirements .list-group-item div.checkOK {
    color: var(--green-600);
}

.ezrs-login-requirements .list-group-item div.checkNotOK {
    color: var(--danger);
}

/* ── Success / info icon (confirmation pages) ── */
.ezrs-login-status-icon {
    text-align: center;
    margin: 8px 0 20px;
    font-size: 48px;
    color: var(--green-600);
}

.ezrs-login-status-icon.is-danger {
    color: var(--danger);
}

.ezrs-login-card .ezrs-login-message {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-700);
    margin: 0 0 16px 0;
}

.ezrs-login-card .ezrs-login-message strong {
    color: var(--ink-900);
}

/* ── Select field ──
   Drawn like the in-app `.form-select`: the browser's own arrow is switched off and the
   same chevron sits inside the field, inset from the right edge, with the text padded
   clear of it. The native arrow hugged the border and pushed the label off its 14px
   inset, so the field did not match the text inputs above and below it. */
.ezrs-login-card .ezrs-login-select {
    display: block;
    width: 100%;
    padding: 11px 40px 11px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #000;
    border-radius: var(--radius);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 12px;
    color: var(--ink-900);
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ezrs-login-card .ezrs-login-select:hover {
    border-color: #000;
}

.ezrs-login-card .ezrs-login-select:focus {
    outline: none;
    border-color: #13893E;
    box-shadow: 0 0 0 3px rgba(19, 137, 62, .18);
}

/* ── Two-column row inside card ── */
.ezrs-login-row {
    display: flex;
    gap: 12px;
}

.ezrs-login-row > .ezrs-login-field {
    flex: 1 1 0;
}

@media (max-width: 575.98px) {
    .ezrs-login-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ── Legal text ── */
.ezrs-login-legal {
    font-size: 12px;
    color: var(--ink-500);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* 1.4.1 — see .ezrs-login-footer-text a above. */
.ezrs-login-legal a {
    color: var(--green-700);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ezrs-login-legal a:hover {
    text-decoration-thickness: 2px;
}

/* ── Wide variant ── */

/* ── Hero illustration (single SVG) ── */
.ezrs-login-illustrations {
    margin-top: 40px;
    padding-top: 0;
    position: relative;
    z-index: 1;
}

.ezrs-login-illu-svg {
    display: block;
    width: 100%;
    max-width: 880px;
    height: auto;
    margin: 0 auto;
    opacity: 0.95;
    pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .ezrs-login-wrapper {
        flex-direction: column;
    }

    .ezrs-login-hero {
        flex: 0 0 auto;
        max-width: 100%;
        padding: 48px 32px;
        min-height: auto;
    }

    .ezrs-login-illustrations {
        display: none;
    }

    .ezrs-login-card-panel {
        flex: 1 1 auto;
        max-width: 100%;
        padding: 32px 20px;
        background: var(--green-50);
    }

    .ezrs-login-card {
        max-width: 460px;
    }
}

@media (max-width: 575.98px) {
    .ezrs-login-hero {
        padding: 36px 24px;
    }

    .ezrs-login-headline {
        font-size: 28px;
    }

    .ezrs-login-card-panel {
        padding: 24px 16px;
    }

    .ezrs-login-card {
        padding: 32px 24px;
    }
}

/* ── Override base.html defaults ── */
body.ezrs-login-page {
    background: none;
    height: auto;
    display: block;
    -webkit-font-smoothing: antialiased;
}

body.ezrs-login-page .container {
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    max-width: 100%;
    padding: 0;
}

body.ezrs-login-page .content {
    padding: 0;
    margin: 0;
    color: inherit;
}

body.ezrs-login-page .content .ideas {
    display: block;
}

body.ezrs-login-page .content .ideas .idea {
    background: none;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
}

body.ezrs-login-page .header_etrs_headline {
    display: none;
}

body.ezrs-login-page .footer-copy,
body.ezrs-login-page footer {
    display: none;
}

body.ezrs-login-page hr {
    display: none;
}

body.ezrs-login-page h1,
body.ezrs-login-page h2 {
    text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Register - "Thank you" page (post-payment)
   Four pieces the login/register sheet did not have yet. Everything else
   on that page reuses .ezrs-login-hero / -card / -btn / -divider.
   Hexagons are drawn with clip-path rather than an inline <svg> per
   instance: the shape is the same polygon ezrs-nav.css uses, and the
   steps list needs one per row.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Progress steps in the hero (payment -> password -> start) ── */
.ezrs-login-steps {
    /* The connector line's `left` and `top` are both functions of the marker
       size, so the size lives in ONE variable. Hard-coding three numbers that
       have to agree is how a later resize leaves the line running beside the
       hexagons instead of through them. */
    --step-mark: 46px;
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
}

.ezrs-login-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 34px;
}

.ezrs-login-step:last-child {
    padding-bottom: 0;
}

/* Connector between the markers. Stops at the last row so the line does
   not dangle below the final step. */
.ezrs-login-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc(var(--step-mark) / 2 - 0.5px);
    top: var(--step-mark);
    bottom: 8px;
    width: 1px;
    background: rgba(220, 252, 231, 0.22);
}

.ezrs-login-step-mark {
    flex: 0 0 var(--step-mark);
    width: var(--step-mark);
    height: var(--step-mark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--green-100);
    background: rgba(255, 255, 255, 0.10);
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.ezrs-login-step--done .ezrs-login-step-mark {
    background: var(--green-500);
    color: #fff;
}

.ezrs-login-step-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}

/* 1.4.3: 0.62 alpha measured 3.56:1 against the --green-700 midpoint of the
   hero gradient, which is exactly where this list sits. 0.85 gives 5.2:1
   across the whole gradient — the same value .ezrs-login-subtext uses. */
.ezrs-login-step-sub {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    color: rgba(220, 252, 231, 0.85);
    line-height: 1.5;
}

/* ── Big status hexagon at the top of the card ── */
.ezrs-login-status-hex {
    width: 72px;
    height: 72px;
    margin: 4px auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--green-600);
    background: var(--green-100);
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

/* ── Notice box inside the card (icon + title + body) ── */
.ezrs-login-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin: 0 0 18px;
    border: 1px solid var(--green-200);
    border-radius: 10px;
    background: var(--green-50);
}

.ezrs-login-notice-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: var(--green-800);
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.ezrs-login-notice-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 4px;
}

.ezrs-login-notice-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-700);
    margin: 0;
}

/* ── Secondary button (outline), for actions that are not the main path ── */
.ezrs-login-btn--outline {
    color: var(--ink-900);
    background: #fff;
    border: 1px solid var(--ink-200);
}

.ezrs-login-btn--outline:hover {
    background: var(--green-50);
    border-color: var(--green-300);
    color: var(--green-800);
}

/* ── Footer meta row: order number left, help link right ── */
.ezrs-login-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-500);
}

.ezrs-login-meta-row strong {
    color: var(--ink-900);
    font-weight: 700;
}

/* 1.4.1 — see .ezrs-login-footer-text a. Third of the three link rules on
   this sheet; all of them sit in --ink-500 body text. */
.ezrs-login-meta-row a {
    color: var(--green-700);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ezrs-login-meta-row a:hover {
    text-decoration-thickness: 2px;
}