/* =========================================
   Auth Pages (Login / Signup / reset-password / email-sent)
   ========================================= */
body {
    background-color: var(--bg-light);
    /* font-family is core.css's — it sets the same stack on body already, and
       repeating it here with !important only made this sheet look like it was
       fighting something. */
    margin: 0;
    padding: 0;
    /* Column, not row: the shared site footer is a body-level sibling of the
       auth card and must sit UNDER it, not beside it. align-items centres the
       card horizontally exactly as justify-content did on the row axis. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* dvh, not vh: on mobile browsers vh is the TALLEST viewport (chrome
       collapsed), so 100vh overflows by the toolbar height while it is shown. */
    min-height: 100dvh;
    /* Gutter above the card. */
    --auth-gutter: 15px;
    padding-top: var(--auth-gutter);
    /* No bottom inset — the footer is the last band and runs to the edge. */
    padding-bottom: 0;
    box-sizing: border-box;
}

/* Footer root: full-bleed, unlike the max-width auth card above it.
   margin-top:auto is the sticky-footer half of the card sizing itself to its
   content (below): on a tall screen the leftover space collects HERE, pinning
   the footer to the bottom, instead of being padded into the card. */
#auth-page-footer {
    width: 100%;
    margin-top: auto;
}

/* Phone: the card runs edge to edge, so there is no gutter to reserve. Setting
   the variable (not padding-top) keeps .auth-container's height math correct. */
@media (max-width: 600px) {
    body {
        --auth-gutter: 0px;
    }
}

.auth-container {
    background-color: var(--surface);
    width: 100%;
    max-width: 1070px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    overflow: hidden;
    padding: 0;
    /* Sized by its CONTENT, not by the viewport.
       This used to be `min-height: calc(100dvh - …)`, which stretched the card
       to the full screen whatever was in it. Measured at 1440x900 that left
       127-413px of empty card below the form depending on the page, and on a
       1440x1200 monitor 427-713px — more than half the card on
       /reset-password. The two columns still match each other's height
       (flex stretch); they just no longer match the window's.
       The right-hand pitch panel is ~458px of copy, which acts as the natural
       floor, so no explicit min-height is needed. */
    margin-bottom: var(--auth-gutter);
}

.auth-left {
    flex: 1;
    padding: 25px 40px 50px 40px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
}

.auth-right {
    flex: 1;
    background-color: var(--blue-highlight);
    padding: 25px 40px 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #fff;
    text-align: left;
    /* Containing block for the watermark below, which is clipped by overflow. */
    position: relative;
    overflow: hidden;
    z-index: 0;
}

/* Background Effect (Shopping Cart) */
.auth-right::before {
    content: '';
    position: absolute;
    top: calc(50% + 50px);
    right: calc(-10% + 90px);
    transform: translateY(-50%) rotate(-15deg);
    width: 80%;
    height: 80%;
    /* This sheet lives in /css/pages/, so the assets folder is TWO levels up
       (../../assets/). The old single-dot path resolved to /css/assets/… and
       404'd, which is why the watermark never appeared. */
    background-image: url('../../assets/shopping_cart_bg.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
}

.auth-right h2 {
    font-size: var(--fs-2xl);
    font-weight: 600;
    /* Aligns this heading with the left column's title across the two columns. */
    margin-top: 70px;
    margin-bottom: 20px;
}

.auth-right .subtitle {
    font-size: var(--fs-lg);
    line-height: 1.5;
    margin-bottom: 30px;
    opacity: 0.95;
}

.auth-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Icon + text on one baseline, the same shape home.css uses for its USP strip
   (.home-trust-item). Replaces a CSS-drawn "✓" pseudo-element: icons on this
   platform come from AppIcon, so the glyph is a real <svg> and scales with the
   type instead of depending on whatever the font renders for U+2713. */
.auth-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    /* A ticked list reads down its left edge — the tick and the first word of
       every line have to share one. Stated here rather than inherited because
       the list now has two homes: .auth-right is already text-align:left (so
       this changes nothing for the pitch panel), but .auth-left is centred, and
       there the centring left the ticks in a column of their own beside ragged
       text. */
    text-align: left;
    font-size: var(--fs-md);
    line-height: 1.4;
}

/* currentColor, so the panel sets the colour ONCE on .auth-right and the
   glyphs follow — the same reason home.css switched its USP icons off a
   hard-coded stroke. flex-none stops a long benefit squeezing the tick, and
   the top margin optically centres a 16px glyph on the first text line. */
.auth-benefits li svg {
    flex: none;
    margin-top: 2px;
    color: currentColor;
    opacity: 0.85;
}

/* ── FAQ on the pitch panel (<faq-list>, components.css) ────────────────────
   The accordion is painted for the light page background; on the purple panel
   everything reads off `currentColor` (the #fff .auth-right sets) instead —
   the pink accent and the dark question text both vanish against #3b2e9e. The
   divider takes the darker blue of the pair rather than a translucent white,
   so it stays a token. */
.auth-right h3 {
    font-size: var(--fs-xl);
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 4px;
}
.auth-right .faq-item { border-bottom-color: var(--blue-highlight-dark); }
.auth-right .faq-q,
.auth-right .faq-item.open .faq-q {
    color: inherit;
    font-size: var(--fs-md);
    padding: 0.85em 0;
}
.auth-right .faq-icon::before,
.auth-right .faq-icon::after { background: currentColor; }
.auth-right .faq-item p {
    color: inherit;
    opacity: 0.85;
    padding-left: 0;
    padding-right: 0;
}
/* The one answer with a mailto link: the global `a` colour is the panel's own
   background blue, which would leave the address unreadable here. */
.auth-right .faq-item p a { color: inherit; text-decoration: underline; }
.auth-right .faq-more { color: inherit; }
.auth-right .faq-more:hover { opacity: 0.85; }

/* Mobile Responsive: Stack
   The container flips to a column, so the benefits panel simply STACKS UNDER
   the form. It used to be `display:none !important` here — the value
   proposition (and the only "why sign up" copy on the page) disappeared
   entirely on phones, which is where most signups happen. */
@media (max-width: 900px) {
    .auth-container {
        flex-direction: column;
        max-width: 100%;
        width: 92%;
        margin: 0 auto;
    }

    .auth-left {
        width: 100%;
        padding: 30px 20px;
    }

    .auth-right {
        width: 100%;
        padding: 30px 20px 35px;
    }

    /* The 70px top margin exists only to align this heading with the desktop
       title across the two columns; stacked there is nothing to align to. */
    .auth-right h2 {
        margin-top: 0;
    }
}

.auth-header {
    margin-bottom: 30px;
}

.auth-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    position: relative;
    min-height: 50px;
    padding: 0;
}

.back-arrow {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--pink-highlight);
    border-radius: 50%;
    transition: background-color 0.2s;
    margin: 0;
    flex-shrink: 0;
    /* The rule now dresses a <button> on /login and /signup (the back control
       performs an action, it does not go to a URL) and still an <a href="/login">
       on /reset-password, which genuinely navigates. These four neutralise the
       button UA defaults so both tags render identically; the box is an icon
       frame with no text of its own, so its px size stays right. */
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
}

.header-logo-container {
    display: flex;
    align-items: center;
}

/* assets/logo.svg carries ONLY a viewBox — no width/height attributes — so it
   has an intrinsic ratio but no intrinsic size. Inside the shrink-to-fit flex
   item (.header-logo-container > a) a bare `max-height` left Chrome resolving
   the replaced box to 0x0: the logo was in the DOM, loaded, and invisible.
   A DEFINITE height (same pattern as core.css's .logo-img) lets the ratio
   resolve the width. display:block drops the inline baseline gap. */
.auth-logo-header {
    display: block;
    height: 40px;
    width: auto;
}

.auth-title {
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 25px 0;
    text-align: center;
}


.form-group {
    margin-bottom: 15px;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--text-color);
}


/* Mobile Responsive Styles */
@media (max-width: 600px) {
    body {
        background-color: var(--surface);
        align-items: flex-start;
    }

    .auth-container {
        max-width: 100%;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        min-height: auto;
        /* The stacked benefits panel is now the last thing on the page and
           brings its own bottom padding — a container inset here would leave a
           white strip under the pink block. */
        padding-bottom: 0;
    }

    .auth-header-nav {
        margin-bottom: 20px;
        border-bottom: 1px solid var(--border-color);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* colour / left / background are identical to the base .back-arrow rule
       above and were only repeated here with !important; the size and centring
       are the parts that actually belong to the phone layout. */
    .back-arrow {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
    }

    .auth-title {
        font-size: var(--fs-xl);
    }
}
/* ── Interaction guards ───────────────────────────────────────────────────
   Both are patterns the newer pages (home.css, partners.css) already carry
   and this sheet predates. */

/* Hover styling is applied ONLY where hover really exists. On a touch screen
   :hover sticks after a tap, so the back arrow and the auth links stayed in
   their hover colour until something else was tapped. */
@media (hover: hover) {
    .back-arrow:hover {
        background-color: var(--btn-primary-hover);
        color: #fff;
        opacity: 1;
    }

}

/* Respect a reduced-motion preference: the checkbox tick and the back-arrow
   colour fade are decoration, and vestibular triggers are not worth a 0.2s
   flourish. Kept as `transition: none` rather than 0.01ms — nothing here
   depends on a transitionend firing. */
@media (prefers-reduced-motion: reduce) {
    .back-arrow {
        transition: none;
    }
}