/* Warm auth pages — "Create your account" (Figma 242:45) and "Business Login"
   (Figma 245:46). The two comps share a layout: a 448px column holding a
   48px rounded badge, a Fraunces heading, a bordered white card of pill
   inputs, and a link line beneath. Measurements below are the comps'.

   Both brand faces are declared in tailstap.css, which base.html always loads.
   Font URLs there are relative on purpose: ManifestStaticFilesStorage rewrites
   them to hashed paths during collectstatic.

   The submit button and badge differ per page (orange on register, near-black
   on business login), so those two colours are driven by --auth-accent. */

.auth-page {
    /* TT-123 — this drives the submit button and badge FILL, both of which
       carry white text; #f97316 measured 2.80:1. Darkened to the palette's
       #C2410C (5.18:1). The business login overrides both to near-black
       below — that path is already compliant and is left alone. */
    --auth-accent: #C2410C;
    --auth-accent-hover: #9A3412;
    /* TT-113 — link/text orange, dark enough for WCAG AA on the white auth
       card (5.52:1). Kept separate from --auth-accent because that one is a
       BACKGROUND (the submit button and badge) and flips to near-black on the
       business page, where the badge glyph stays brand orange on purpose. */
    --auth-link: #AF4A05;

    display: flex;
    justify-content: center;
    padding: 3.5rem 1rem 4.5rem;
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* Business login: dark badge + dark submit, orange kept for links. */
.auth-page.auth-page-business {
    --auth-accent: #1c1917;
    --auth-accent-hover: #000000;
}

.auth-stack {
    width: 100%;
    max-width: 448px;
    display: flex;
    flex-direction: column;
    gap: 23.5px;
}

/* --- Header ----------------------------------------------------------- */
.auth-head { text-align: center; }
.auth-badge {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--auth-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
/* The business comp draws an orange icon inside the near-black badge.
   TT-113: this one deliberately keeps the BRAND orange rather than the darker
   --auth-link. It sits on #1c1917, where #f97316 measures 6.24:1 and already
   passes AA; swapping in the darker orange would REGRESS it to 3.17:1. Dark
   backgrounds want the lighter orange, not the darker one. */
.auth-page-business .auth-badge { color: #f97316; }

.auth-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 36px;
    color: #1c1917;
    margin: 1rem 0 0.5rem;
}
.auth-sub {
    font-size: 14px;
    line-height: 20px;
    color: #78716c;
    margin: 0;
}

/* --- Card ------------------------------------------------------------- */
.auth-card {
    background: #fff;
    border: 1px solid rgba(28, 25, 23, 0.1);
    border-radius: 16px;
    padding: 33px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.auth-field + .auth-field { margin-top: 16px; }

.auth-label {
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #1c1917;
    margin-bottom: 8px;
}
/* Password row: label left, "Forgot password?" right. */
.auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.auth-label-row .auth-label { margin-bottom: 0; }
.auth-forgot {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--auth-link);
    text-decoration: none;
}
.auth-forgot:hover { text-decoration: underline; }

/* The bordered shell holds the leading icon, the input and (for passwords)
   the reveal button. The input itself is chromeless so the shell can own the
   border and the focus ring. */
.auth-input {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(28, 25, 23, 0.1);
    border-radius: 20px;
    padding: 13px 17px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-input:focus-within {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* TT-89 — inline field errors.
   The shell owns the border, so the invalid state has to be styled here:
   Bootstrap's .is-invalid only paints .form-control, and these inputs carry
   no such class, which is why an invalid email was detected on blur and then
   shown to nobody. Red is paired with a text message, never used alone. */
.auth-input.has-error {
    border-color: #dc2626;
}
.auth-input.has-error:focus-within {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: #b91c1c;
}
.field-error::before {
    content: "\f06a"; /* exclamation-circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 18px;
}
.auth-input > i {
    color: #78716c;
    font-size: 14px;
    width: 16px;
    text-align: center;
}
.auth-input input {
    flex: 1 0 0;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0;
    font-size: 14px;
    color: #1c1917;
    background: transparent;
}
.auth-input input::placeholder { color: #78716c; }

.auth-reveal {
    border: 0;
    background: transparent;
    padding: 0;
    color: #78716c;
    line-height: 1;
}
.auth-reveal:hover { color: #1c1917; }

/* --- Checkboxes (terms, remember me) ---------------------------------- */
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0;
    font-size: 12px;
    line-height: 16px;
    color: #78716c;
}
.auth-check input {
    accent-color: #f97316;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}
.auth-check a {
    color: var(--auth-link);
    font-weight: 500;
    text-decoration: none;
}
.auth-check a:hover { text-decoration: underline; }

/* --- Submit ------------------------------------------------------------ */
.auth-submit {
    width: 100%;
    border: 0;
    border-radius: 20px;
    background: var(--auth-accent);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    padding: 14px 0;
    transition: background-color 0.15s ease;
}
.auth-submit:hover { background: var(--auth-accent-hover); }

/* --- Link lines (in-card footer, and the line below the card) ---------- */
.auth-alt {
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #78716c;
    margin: 0;
}
.auth-alt a {
    color: var(--auth-link);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.25rem;
}
.auth-alt a:hover { text-decoration: underline; }

/* The business comp puts one link line inside the card, under the button. */
.auth-card .auth-alt { margin-top: 15.5px; }

/* --- Confirmation / status pages (reset done, complete, verify sent) ---
   Reuse the same 448px column, badge and card. These carry a message and a
   single action rather than a form. */
.auth-card.auth-card-center { text-align: center; }
.auth-note {
    font-size: 14px;
    line-height: 21px;
    color: #78716c;
    margin: 0 0 18px;
}
.auth-note:last-child { margin-bottom: 0; }
.auth-note strong { color: #1c1917; }

/* A link styled as the primary submit button, for "Sign in" / "Request a
   new link" actions on the status pages. */
.auth-btn {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 20px;
    background: var(--auth-accent);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    padding: 14px 0;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.auth-btn:hover { background: var(--auth-accent-hover); color: #fff; }

.auth-btn-outline {
    display: block;
    width: 100%;
    border: 1px solid rgba(28, 25, 23, 0.15);
    border-radius: 20px;
    background: #fff;
    color: #1c1917;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.auth-btn-outline:hover { border-color: var(--auth-accent); color: var(--auth-accent-hover); }