/* 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 {
    --auth-accent: #f97316;
    --auth-accent-hover: #ea580c;

    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. */
.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: #f97316;
    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);
}
.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: #f97316;
    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: #f97316;
    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; }