/* ============================================================
AUTHENTICATION — login / signup / password pages stylesheet
(split from style.css)
Loaded only on auth pages (layout/auth_head.php) via
.
Shared base styles (.btn, .form-control, .alert, ...) still
come from style.css — both files load together on auth pages.
============================================================ */
/* ---------- Auth pages (Marketplace: 360px column on gray, no white panel — 2026-08-27) ---------- */
.auth-page { background: #edf1f2; min-height: 100vh; padding-top: 50px; }
.auth-wrap { width: 360px; margin: 0 auto; padding: 0 15px; }
@media (max-width: 767px) { .auth-wrap { width: auto; } }
/* The SAME form embedded in a full-page layout (checkout sign-up, which shows
the "Order overview" beside it). The wrapper keeps every field rule below
(.auth-wrap .list-group-item, .pw-wrap, .pw-toggle, ...) applying unchanged,
while dropping the 360px card container so the form fills its panel.
This file is linked by layout/auth_head.php (the standalone card) and by the
checkout sign-up page only — no other page loads it. */
.auth-wrap.auth-embed { width: auto; max-width: none; margin: 0; padding: 0; }
/* Field spacing in the embedded layout (site owner's setting, 2026-09-11):
the .m-b spacer boxes keep their gap at 16px instead of Marketplace's 15px.
Scoped to .auth-embed, so the standalone card's markup and spacing are not
touched — only this embedded layout gets the value. */
.auth-wrap.auth-embed .list-group-item.m-b { margin-bottom: 16px; }
/* …and a true 16px GAP, not 15px: the join rule above pulls the following box
up by -1px (.list-group-item + .list-group-item { margin-top: -1px }), which
would eat 1px of the 16px spacer. Zeroing it here makes the gap exactly 16px
in the embedded layout, without touching the card's joined/stack handling. */
.auth-wrap.auth-embed .list-group-item + .list-group-item { margin-top: 0; }
/* The site stylesheet never defined .b-t (only the unused old app.css backup
had it), so every `class="… b-t …"` in the app — including the "Total:" row
of the Order overview on this page — drew NO top border. It is defined here,
in the stylesheet the auth pages load, rather than in style.css: .b-t is used
by ~20 other views (item, search, badges, my-items, …) and defining it
globally would add borders to all of them. */
.b-t { border-top: 1px solid #dee5e7; }
/* Brand above the content, centered (Marketplace: logo 156x27, m-t) */
.auth-brand { display: block; text-align: center; margin: 15px 0; }
.auth-brand:hover { text-decoration: none; }
.auth-brand-name { font-size: 24px; font-weight: 800; color: #363f44; }
.auth-logo { max-height: 27px; width: auto; max-width: 220px; object-fit: contain; display: inline-block; }
/* Title (Marketplace:
inside .wrapper.text-center) */
.auth-head { padding: 15px; text-align: center; }
.auth-head h3 { margin: 0; font-size: 24px; font-weight: 500; color: #58666e; }
/* Alert messages */
.auth-wrap .alert { border-radius: 2px; text-align: left; margin: 0 0 12px; }
/* Links: Marketplace plain links are dark; only .link-info links are blue */
.auth-wrap a { color: #363f44; }
.auth-wrap a:hover, .auth-wrap a:focus { color: #141719; text-decoration: none; }
.auth-wrap .link-info a { color: #19a9d5; }
.auth-wrap .link-info a:hover, .auth-wrap .link-info a:focus { color: #1797be; }
/* Social blocks (Marketplace: btn-lg full-width, Google = btn-danger) */
.auth-social .btn { width: 100%; margin-bottom: 15px; border-radius: 2px; font-weight: 600; }
/* "Or with your username and password" / "Or by using the registration form" */
.auth-or { margin: 30px 0 15px; text-align: center; font-size: 13px; color: #58666e; }
/* Intro/helper text */
.auth-text { font-size: 13.5px; color: #58666e; line-height: 1.65; margin: 0 0 16px; }
.auth-text.muted { color: #98a6ad; }
.auth-text.text-center { text-align: center; }
/* Marketplace margin utilities (scoped to auth pages) */
.auth-wrap .m-t { margin-top: 15px; }
.auth-wrap .m-b { margin-bottom: 15px; }
/* Marketplace list-group boxes (white, #e7ecee border, radius 2px) */
.auth-wrap .list-group { margin-bottom: 10px; text-align: left; }
.auth-wrap .list-group-item { border: 1px solid #e7ecee; border-radius: 2px; padding: 10px 14px; background: #fff; }
.auth-wrap .list-group-sm .list-group-item { padding: 6px 10px; }
/* Joined boxes (Marketplace sign-in / reset: two fields in one list-group) */
.auth-wrap .list-group-item + .list-group-item { margin-top: -1px; border-radius: 0; }
.auth-wrap .list-group-item:first-child { border-radius: 2px 2px 0 0; }
.auth-wrap .list-group-item:last-child { border-radius: 0 0 2px 2px; }
/* Borderless inputs inside the boxes (Marketplace .form-control.no-border) */
.auth-wrap .form-control.no-border { border: 0; box-shadow: none; background: transparent;
padding: 6px 2px; font-size: 14px; height: auto; }
.auth-wrap .form-control.no-border:focus { border: 0; box-shadow: none; outline: none; }
.auth-wrap .form-control.no-border::placeholder { color: #98a6ad; }
/* First/last name: the input IS the box (Marketplace .form-control.list-group-item) */
.auth-wrap input.form-control.list-group-item { border: 1px solid #e7ecee; border-radius: 2px;
background: #fff; padding: 8px 12px; height: auto; box-shadow: none; font-size: 14px; }
.auth-wrap input.form-control.list-group-item:focus { border-color: #23b7e5; box-shadow: none; }
.auth-row { display: flex; gap: 10px; margin-bottom: 15px; }
.auth-row input { flex: 1; min-width: 0; }
/* Both name inputs also carry .list-group-item (Marketplace's markup), so the
stacked-list rules reach them: style.css .list-group-item { margin-bottom:-1px }
and .auth-wrap .list-group-item + .list-group-item { margin-top:-1px }. Inside a
list-group that -1px is exactly what JOINS two boxes; inside this side-by-side
flex row it only lifts the SECOND input 1px above the first — measured on a
1280px viewport: lastname y 487.667 vs firstname y 488.667, bottoms 523 vs 524,
i.e. a 1px step between First name and Last name (on the card too: 169 vs 170).
Zeroed here, after the join rule, so the specificity tie resolves in our favour
and both boxes sit on exactly the same line. */
.auth-wrap .auth-row .list-group-item { margin-top: 0; margin-bottom: 0; }
@media (max-width: 480px) { .auth-row { flex-direction: column; } }
/* Step-2 (Marketplace): field labels + borderless select inside the box */
.auth-wrap .f-label { display: block; font-size: 12.5px; font-weight: 600; color: #98a6ad; margin: 0 0 4px; }
.auth-wrap select.form-control { border: 0; box-shadow: none; background: transparent;
padding: 5px 2px; font-size: 14px; }
/* Password visibility toggle */
.auth-wrap .pw-wrap { position: relative; }
.auth-wrap .pw-wrap .form-control.no-border { padding-right: 30px; }
.auth-wrap .pw-toggle { position: absolute; top: 50%; right: 0; transform: translateY(-50%);
background: none; border: 0; cursor: pointer; color: #98a6ad; padding: 6px 4px; }
.auth-wrap .pw-toggle:hover { color: #23b7e5; background: transparent; }
/* Step-2 account type radios */
.radio-row { text-align: left; margin: 0 0 14px; padding: 0 10px; }
/* Account-type label: same 10px inset as the boxed f-labels, tight gap to the radios */
.acc-type-label { margin-bottom: 6px; padding: 0 10px; }
/* Country dropdown popup: option text sits at the same position as the field's text */
.auth-wrap select option { padding: 8px 2px; font-size: 14px; }
.radio-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #58666e;
margin-right: 20px; cursor: pointer; }
.radio-inline input { margin: 0; }
/* Step-2 Company/VAT block: the generic .hide class has NO rule on auth pages
(only .settings-page), so without this the business fields always showed */
.auth-wrap .business_input.hide { display: none !important; }
/* Terms line */
.auth-terms { font-size: 12.5px; color: #98a6ad; margin: 12px 0 16px; text-align: center; }
/* Dashed divider (Marketplace .line.line-dashed) */
.auth-divider { border-top: 1px dashed #c7d3d6; margin: 15px 0; }
/* Bottom lines */
.auth-links { margin: 15px 0; text-align: center; font-size: 13px; }
.auth-links .pipe { color: #c0c8cc; margin: 0 7px; }
.auth-small { margin: 0 0 15px; text-align: center; font-size: 13px; color: #58666e; }
.auth-alt { margin-top: 16px; text-align: center; font-size: 13.5px; color: #58666e; }