/* =========================================================================
    new_ui_login.css
    Shared "new design" styling for the auth pages — login, signup, forgot / reset password, company / partner / user invites, badge login, AppSumo signup.
    These standalone Metronic auth pages aren't on the Vite/rd shell, so the --swft-* design tokens are inlined here verbatim from resources/css/tokens.css (same pattern as user-shell.blade.php / settings.blade.php). The input + button rules mirror .rd-input / .rd-btn-primary from frontend/new_css/new_ui_light_frontend.css.
    --swft-accent is intentionally left unset, so hover/focus fall back to the neutral dark (#222). If a WL accent is ever injected on these pages (via a :root override), the controls theme automatically.
    LOAD ORDER: link this AFTER css/login.css and frontend/new_css/businessSignup.css so these rules win the cascade (businessSignup.css's `.form-control:focus` is a lower-specificity blue rule overridden here).
    The .login-option / .sendCode / .numeral-mask / .email_input rules only match the login + badge-login markup; they're inert on the signup / invite pages.
========================================================================= */

:root {
    --swft-border:       #D0D5DD;
    --swft-fg1:          #222222;
    --swft-fg2:          #616161;
    --swft-fg-muted:     #B0B0B0;
    --swft-card:         #F1F1F1;
    --swft-btn:          #222222;
    --swft-btn-hover:    #191919;
    --swft-btn-text:     #FFFFFF;
    --swft-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --swft-radius-input: 10px;
    --swft-radius-pill:  999px;
    --swft-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --swft-dur:          320ms;
}

/* Text inputs (email / username / password / OTP) */
.login_box input.form-control {
    width: 100%; height: 44px; padding: 10px 14px; background: #FFFFFF; border: 1px solid var(--swft-border); border-radius: var(--swft-radius-input); font-family: var(--swft-font); font-size: 14px; font-weight: 400; line-height: normal; color: var(--swft-fg1);
    transition: border-color var(--swft-dur) var(--swft-ease), box-shadow var(--swft-dur) var(--swft-ease);
}
.login_box input.form-control::placeholder { color: var(--swft-fg-muted); }
.login_box input.form-control:hover { border-color: var(--swft-accent, var(--swft-fg1)); }
.login_box input.form-control:focus { outline: none; border-color: var(--swft-accent, var(--swft-fg1)) !important; box-shadow: 0 0 0 3px var(--swft-accent-ring, rgba(34, 34, 34, 0.08)) !important; }
/* Email input no longer hosts an inline overlay button — drop the legacy 6rem right padding so it reads as a clean, symmetric new-design field. */
.login_box input.email_input { padding-right: 14px !important; }
/* OTP digit boxes keep their square 40x40 footprint (Metronic h-40px/w-40px), just a larger centered glyph. */
.login_box input.form-control.numeral-mask { padding: 0; font-size: 18px; font-weight: 600; }

/* Login method cards (Email code / Enter password) — login + badge login only */
.login-option .option-label { display: flex; align-items: center; flex-direction: column; padding: 10px !important; background: transparent !important; border: 1px solid var(--swft-border) !important; border-radius: var(--swft-radius-input) !important; transition: border-color var(--swft-dur) var(--swft-ease), box-shadow var(--swft-dur) var(--swft-ease); }
.login-option .option-label:hover { border-color: var(--swft-accent, var(--swft-fg1)) !important; }
.login-option .option-title { font-size: 14px; font-weight: 600; color: var(--swft-fg1); margin-bottom: 4px; }
.login-option .option-description { font-size: 12px; color: var(--swft-fg2); }
/* Selected card mirrors the input :focus treatment — dark border + 3px ring, transparent fill. */
.login-option .btn-check:checked+.btn { border: 1px solid var(--swft-accent, var(--swft-fg1)) !important; background: transparent !important; box-shadow: 0 0 0 3px var(--swft-accent-ring, rgba(34, 34, 34, 0.08)) !important; }

/* Primary buttons (Send code / Sign in / Sign up / Reset / Create profile) */
.login_box .submit_button, .sendCode .send-code-btn {
    width: 100%; height: 44px; line-height: normal; padding: 12px 16px; display: flex; justify-content: center; align-items: center; border-radius: var(--swft-radius-pill); font-family: var(--swft-font); font-size: 14px; font-weight: 500; color: var(--swft-btn-text); background: var(--swft-btn); border: 1px solid var(--swft-btn);
    transition: background var(--swft-dur) var(--swft-ease), border-color var(--swft-dur) var(--swft-ease);
}
.login_box .submit_button:hover, .login_box .submit_button:focus, .sendCode .send-code-btn:hover,
.sendCode .send-code-btn:focus { background: var(--swft-btn-hover); border-color: var(--swft-btn-hover); color: var(--swft-btn-text); }
/* Disabled state — signup / invite buttons start disabled until the form is valid. */
.login_box .submit_button:disabled, .login_box .submit_button.disabled, .sendCode .send-code-btn:disabled, .sendCode
.send-code-btn.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* Google social-login button — brand-aware hover.
   Shared button from auth/socialLogins.blade.php (wrapped in `.row.g-6.mb-9`), present only on the 5 auth pages that @include it: login, signup, company/partner/user invites (NOT forgot/reset/badge/appsumo).
   It carries Metronic utility classes whose hover turns the text Metronic-blue (.btn-active-color-primary) and the fill light-grey !important (.bg-state-light). Re-skin that hover to match the inputs / login-option cards above: the BORDER carries the brand via var(--swft-accent, …#222), plus a 3px accent ring and a faint accent-tint fill. Two declarations need !important to win: the fill (beats .bg-state-light's own !important) and the ring (beats Metronic's blanket `.btn:not(.btn-shadow){box-shadow:none !important}` reset). The selector (0,7,1) already out-specifies Metronic's hover colour (.btn-active-color-primary:hover, 0,4,0) and the .btn-outline border, so those two need no !important. Verified live in-browser 2026-06-23.
   ACCENT-CONTRAST SAFETY: the button sits on white and the WL accent is arbitrary (bright yellow → near-black), so the label is NOT tinted with the accent — it is forced to a readable neutral grey (var(--swft-fg2)), which also neutralises Metronic's hover blue. The brand reads through the border + ring + faint fill only. The multicolour Google SVG uses hardcoded per-path fills (no .svg-icon / <i>), so `color` never touches it.
   When no WL accent is injected, every var falls back to the neutral #222 set, so the hover is just a tidy dark-outline treatment. The brand shows whenever an accent IS present on a page that still renders the button — e.g. the user-invite (accent from the inviting WL company, independent of domain). Note socialLogins gates the button behind @if(!isWhitelabelDomain()), so it does not render on live WL custom domains. */
.row.g-6.mb-9 a.btn.btn-outline.bg-state-light {
    transition: border-color var(--swft-dur) var(--swft-ease), background-color var(--swft-dur) var(--swft-ease), box-shadow var(--swft-dur) var(--swft-ease);
}
.row.g-6.mb-9 a.btn.btn-outline.bg-state-light:hover, .row.g-6.mb-9 a.btn.btn-outline.bg-state-light:focus {
    border-color: var(--swft-accent, var(--swft-fg1)); background-color: var(--swft-accent-lighter, rgba(34, 34, 34, 0.04)) !important; color: var(--swft-fg2); box-shadow: 0 0 0 3px var(--swft-accent-ring, rgba(34, 34, 34, 0.08));
}

/* Auth right-column marketing hero — scroll + anti-clip (SC-e79f89e4) The two-column auth layout (.main > .left-content + .right-content) gives each column a fixed height (businessSignup.css: calc(100vh - 99px)).
    The right column holds the marketing hero (.business-info > h1.login-right-title "The #1 Digital Business Card..."). businessSignup.css pulls that hero up with margin-top:-85px; combined with the column's default align-items:center, the hero's top is centred OFF the top of the column on short viewports and the heading is clipped with no way to reach it (jam e79f89e4 was the login page; the same layout ships on signup, the invites, forgot/reset password and AppSumo signup). Make the column scroll internally (`safe center` keeps it centred when it fits, top-aligns when it overflows so nothing is clipped) and zero the negative margin. Applies to every auth page that loads this sheet; inert on badge login (no .right-content). The standalone business / pricing page keeps its -85px because it does NOT load this sheet. Mobile (<=991px) already zeroes the margin + sets height:auto in businessSignup.css. */
.main .right-content { overflow-y: auto; overflow-x: hidden; align-items: safe center; scrollbar-width: thin; scrollbar-color: var(--swft-border, #D0D5DD) transparent; }
.main .right-content::-webkit-scrollbar { width: 6px; }
.main .right-content::-webkit-scrollbar-track { background: transparent; }
.main .right-content::-webkit-scrollbar-thumb { background: var(--swft-border, #D0D5DD); border-radius: 999px; }
.main .right-content .business-info { margin-top: 0; }