/* ═══════════════════════════════════════════════════════════════
   loginStyles.css — zip at zip root; upload as <prefix>_logincss.
*/

/* ── FONT LOADING (must come first) ────────────────────────── */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}
/* ── Per-community theming ──────────────────────────────────── */
:root {
    --brand: #000000;
    --brand-deep: #1A1A1A;
    --accent: #DFE22B;
    --accent-bright: #E8EB4A;
    --paper: #FFFFFF;
    --ink: #000000;
    --muted: #3C434A;
    --line: #D7CEC2;
    --on-accent: #000000;
    --paper-alt: #F4EDE3;
}
.subheading {
  margin-top: -4px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: inherit;
  opacity: .72; 
}
/* ── Reset / base ── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
    font-family:"Poppins", sans-serif;
    background:var(--paper,#FFFFFF);
    color:var(--ink,#000000);
    font-size:15px;
}
.page-wrap{display:flex;min-height:100vh}
/* ── Left brand panel ── */
.brand-panel{
    width:44%;
	background: linear-gradient(
		160deg,
		var(--brand, #000000) 0%,
		var(--brand-deep, #1A1A1A) 100%
	) !important;
    color:#fff;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:56px 52px;position:relative;
}
.brand-panel::after{
    content:"";position:absolute;right:-1px;top:0;bottom:0;width:6px;
    background:var(--accent,#DFE22B);
}
.logo-slot{
    background:#fff;
    border-radius:12px;
    padding: 74px 24px;
    display:inline-block;
    align-self:flex-start;
}
.logo-slot img,
img.logo-img{
    max-width:320px !important;
    max-height:none !important;
    width:auto !important;
    height:auto !important;
    display:block;
}
.brand-copy h1{
    font-weight:700;font-size:clamp(28px,3.2vw,42px);
    line-height:1.12;letter-spacing:-.015em;color:#fff;
}
.brand-copy h1 em{font-style:normal;color:var(--accent-bright,#E8EB4A)}
.brand-copy p{
    margin-top:18px;font-size:15px;line-height:1.65;
    color:rgba(255,255,255,.62);max-width:38ch;
}
.assurance{display:flex;flex-direction:column;gap:14px;font-size:13.5px;color:rgba(255,255,255,.55)}
.assurance div{display:flex;align-items:center;gap:10px}
.assurance .tick{color:var(--accent,#DFE22B);font-weight:700}
/* ── Right form panel / card ── */
.form-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.card{
    width:100%;
    max-width:720px;
    text-align:left
}
.eyebrow{
    font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent,#DFE22B);margin-bottom:10px;
}
.card h2{font-weight:600;
font-size:32px;
letter-spacing:-.01em;
margin-bottom:14px;
color:var(--ink,#000000)
}
/* controller label panels: instruction + resend text (class "style") */
.label-zone{margin-bottom:20px}
.label-zone label,
.label-zone .style{
    display:block;
    font-size:16px;line-height:1.6;
    color:var(--muted,#3C434A);
    padding:0;border:0;outline:0;background:transparent;
}
/* ── Input (loginTextInput) — overrides old bold/centered/bordered look ── */
.loginTextInput,
input.loginTextInput{
    width:100%;
    font:inherit;font-size:16px;font-weight:400;
    text-align:left;
    padding:12px 2px;margin:4px 0 2px;
    border:none;border-bottom:1.5px solid var(--line,#D7CEC2);
    background:transparent;outline:none;
    color:var(--ink,#000000);border-radius:0;
    transition:border-color .2s;
}
.loginTextInput:focus{border-bottom-color:var(--accent,#DFE22B)}
/* ── Primary button (signInButton1): Next / Go to Login / Login ── */
.signInButton1, a.signInButton1,
.signInButton1:link, .signInButton1:hover, .signInButton1:visited{
    display:block;width:100%;margin:18px 0 0;
    font-weight:600;font-size:15.5px;letter-spacing:.02em;
    color: var(--paper, #FFFFFF);
    background: var(--brand, #000000);
    border:none;border-radius:10px;padding:15px;
    text-align:center;text-decoration:none !important;
    text-transform:none;cursor:pointer;
    transition: transform .12s ease,
            box-shadow .2s ease,
            background .2s;
}
.signInButton1:hover{
    background:var(--accent-bright,#E8EB4A);
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,.18);
    color: var(--brand, #000000);
}
.signInButton1:focus-visible{outline:3px solid var(--brand,#000000);outline-offset:2px}
/* ── OTP buttons row: Resend (secondary) + Submit (primary) ── */
.btn-row{display:flex;gap:14px;margin-top:18px}
.signInButton2, a.signInButton2,
.signInButton2:link, .signInButton2:hover, .signInButton2:visited{
    flex:1;display:block;
    font-weight:600;font-size:15px;letter-spacing:.02em;
    color:var(--on-accent,#000000) !important;
    background:var(--accent,#DFE22B);
    border:none;border-radius:10px;padding:14px 0;
    text-align:center;text-decoration:none !important;
    text-transform:none;cursor:pointer;margin:0;width:auto;
    transition: transform .12s ease,
            box-shadow .2s ease,
            background .2s;
}
.signInButton2:hover{
    background:var(--accent-bright,#E8EB4A);
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,.18);
}
/* Resend as secondary/outline (extra class in markup) */
.btn-secondary, a.btn-secondary,
.btn-secondary:link, .btn-secondary:hover, .btn-secondary:visited{
    background:transparent !important;
    color:var(--brand,#000000) !important;
    border:1.5px solid var(--line,#D7CEC2) !important;
}
a.btn-secondary:hover{
    border-color:var(--accent,#DFE22B) !important;
    box-shadow:none;transform:none;
}
/* T&C step's Login button sits full-width outside .btn-row */
.form-zone > .tc-closing + span .signInButton1{margin-top:14px}
/* ── Error text ── */
.error, label.error{
    display:block;
    font-size:13.5px;color:#B3261E;
    padding:8px 0 0;line-height:1.5;
    background:transparent;border:0;outline:0;
}
/* ── T&C step ── */
.tc-preface{font-size:14px;line-height:1.65;color:var(--ink,#000000);margin-bottom:16px}
.tc-preface label{font-size:14px;color:var(--ink,#000000);padding:0;background:transparent;border:0}
.inline-link, a.inline-link{
    color:var(--brand,#000000);font-weight:600;
    text-decoration:none;border-bottom:2px solid var(--accent,#DFE22B);
}
.tc-row{
    display:flex;align-items:flex-start;gap:10px;
    font-size:14px;line-height:1.55;
    padding:16px 0 8px;text-align:left;
}
.tc-check, input.tc-check{
    width:18px !important;height:18px;margin-top:2px;flex:none;
    accent-color:var(--accent,#DFE22B);
}
.tc-closing{font-size:13px;color:var(--muted,#3C434A);line-height:1.6;padding:6px 0}
.tc-closing label{font-size:13px;color:var(--muted,#3C434A);padding:0;background:transparent;border:0}
/* ── Password-reset-sent panel ── */
.reset-sent{
    text-align:center;font-size:15px;line-height:1.65;
    color:var(--ink,#000000);padding:6px 0 4px;
}
.reset-icon{font-size:34px;color:var(--accent,#DFE22B);margin-bottom:10px}
.reset-sent .signInButton1{margin-top:22px}
/* ── Footer / Back ── */
.footer-zone{margin-top:26px;text-align:center}
.footer, a.footer,
.footer:link, .footer:hover, .footer:visited{
    font-size:14px;
    color:var(--muted,#3C434A) !important;
    text-decoration:none !important;
    border-bottom:1.5px solid var(--line,#D7CEC2);
    padding-bottom:1px;background:transparent;width:auto;margin:0;
}
a.footer:hover{color:var(--brand,#000000) !important;border-bottom-color:var(--accent,#DFE22B)}
/* ── apex:pageMessages restyle ── */
.message{
    background:#FCEBEA;border:1px solid #C00;border-radius:8px;
    padding:10px 12px;margin:0 0 18px;font-size:13.5px;
}
.message .messageText{color:#8B1A12}
.message .msgIcon,.message h4{display:none}
.message ul{margin:0;padding:0}
.message li{list-style:none;border:0}
/* ── Responsive ── */
@media (max-width:900px){
    .page-wrap{flex-direction:column}
    .brand-panel{width:100%;padding:28px 24px;gap:18px}
    .brand-panel::after{left:0;right:0;top:auto;bottom:0;width:auto;height:5px}
    .brand-copy h1{font-size:24px;max-width:none}
    .brand-copy p,.assurance{display:none}
    .form-panel{padding:36px 20px 48px}
}
@media (prefers-reduced-motion: reduce){
    *{transition:none !important}
}