/* Create Account & Log In (/workspace/account) and Finish with Google: two rounded cards, navy text, fuchsia buttons, aqua accents. */
.auth-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:1220px;margin:8px auto 40px;align-items:start}
.auth-single{grid-template-columns:minmax(0,640px);justify-content:center}
.auth-card{background:#fff;border:1px solid #d6e6f2;border-radius:22px;padding:clamp(22px,3vw,38px);box-shadow:0 12px 32px #0b255912}
.auth-head{display:flex;gap:20px;align-items:center;margin-bottom:22px}
.auth-head h1,.auth-head h2{font:700 clamp(26px,2.6vw,34px)/1.15 var(--chalk-serif,Georgia,serif);color:var(--navy);margin:0 0 6px;letter-spacing:-.02em}
.auth-head p{margin:0;color:#31577d}
.auth-icon{flex:none;display:grid;place-items:center;width:88px;height:88px;border-radius:50%}
.auth-icon .ico{width:40px;height:40px}
.auth-icon.pink{background:#ffe1ef;color:var(--fuchsia)}
.auth-icon.aqua{background:#d9f6f7;color:#0f9ea3}
.auth-form{display:grid;gap:6px}
.auth-form>label:not(.auth-check){font-weight:700;color:var(--navy);margin-top:10px;font-size:15px}
.auth-form .req{color:var(--fuchsia)}
.auth-form input:not([type=checkbox]){width:100%;min-height:48px;border:1px solid #b9cfe0;border-radius:10px;padding:10px 14px;font-size:15px}
.auth-form input:not([type=checkbox]):focus{border-color:var(--fuchsia);box-shadow:0 0 0 3px #e6066f26;outline:none}
.auth-form input[aria-invalid=true]{border-color:#c0264f}
.auth-field-error{color:#b0183f;font-size:13px;margin:0;min-height:0}
.auth-field-error:empty{display:none}
.auth-password{position:relative}
.auth-password input{padding-right:52px!important}
.auth-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none!important;border:0!important;color:var(--navy)!important;min-height:40px;padding:6px 10px;box-shadow:none!important}
.auth-eye .ico{width:22px;height:22px}
.auth-prefs{border:0;padding:0;margin:14px 0 4px;display:grid;gap:10px}
.auth-prefs legend{font-weight:700;color:var(--navy);font-size:17px;margin-bottom:8px}
.auth-check{display:flex!important;gap:12px;align-items:flex-start;font-weight:500;color:var(--navy);font-size:15px;line-height:1.4}
.auth-check input{width:20px!important;height:20px!important;min-width:20px;margin-top:2px!important;accent-color:var(--fuchsia)}
.auth-hint{font-size:13px;color:#56708b;margin:2px 0}
.auth-link{color:#0f9ea3;font-weight:700}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 4px}
.auth-btn{width:100%;min-height:56px;margin-top:16px;background:var(--fuchsia)!important;border:0!important;border-radius:999px!important;color:#fff;font-size:18px;font-weight:700;box-shadow:0 4px 0 #b30d64}
.auth-btn:hover{background:#c2055e!important}
.auth-or{display:flex;align-items:center;gap:14px;color:#56708b;margin:20px 0 14px;font-size:13px}
.auth-or::before,.auth-or::after{content:"";flex:1;border-top:1px solid #d6e6f2}
.auth-google{display:flex;justify-content:center;align-items:center;gap:12px;min-height:52px;border:1.5px solid #9eb8cf;border-radius:999px;color:var(--navy);font-weight:700;text-decoration:none;background:#fff}
.auth-google:hover{background:#f5fbff}
.auth-switch{text-align:center;margin:18px 0 0;color:#31577d}
.auth-switch a{color:#0f9ea3;font-weight:700}
.auth-message{max-width:1220px;margin:0 auto 12px;padding:12px 16px;border-left:4px solid var(--fuchsia);background:#f7f8fb;border-radius:8px;color:var(--navy)}
.auth-message:empty{display:none}
.auth-error{padding:12px 14px;border-left:4px solid #c0264f;background:#f7f8fb;border-radius:8px;color:#9e2340}
#two-factor{display:grid;gap:10px}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}.auth-icon{width:64px;height:64px}.auth-icon .ico{width:30px;height:30px}}
/* Create Your Account card: a short list of what a buyer account offers, then the link to Create Your Buyer Account. */
.auth-benefits{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.auth-benefits li{display:flex;align-items:center;gap:12px;color:var(--navy);font-weight:600}
.auth-benefits .ico{width:34px;height:34px;padding:7px;border-radius:50%;background:#ffe1ef;color:var(--fuchsia);flex:none}
a.auth-btn-link{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff}

/* Log In "Remember me" (Nov 2026): checkbox and label on one row, vertically centred, label clickable, "Forgot your password?" stays on the
   right. The site-wide input{min-height:44px} rule stretched the box and the 2px top margin pushed it out of line with its text. */
.auth-check input[type=checkbox]{min-height:0!important;flex-shrink:0}
.auth-form .auth-row>label.auth-check{display:inline-flex!important;align-items:center;gap:8px;margin:0;cursor:pointer;line-height:1.3}
.auth-form .auth-row>label.auth-check input[type=checkbox]{margin:0!important;width:20px!important;height:20px!important}
.auth-form .auth-row>.auth-link{margin-left:auto}

/* Pink buttons on one line (Nov 2026). Both cards share four grid rows (heading, content, button, links below) through subgrid, so
   "Create My Buyer Account" and "Log In" start at the same height and keep matching heights whatever the content above or below them,
   including validation messages. The Log In form spans the content and button rows; its fields sit in .auth-fields. Stacked on phones. */
.auth-wrap:has(> #register-card + #login-card){grid-template-rows:repeat(4,auto);row-gap:0}
.auth-wrap>#register-card,.auth-wrap>#login-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
#login-card>#login{grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-items:start}
#login-card>#login>.auth-btn,#register-card>.auth-btn{align-self:start;margin-top:16px}
.auth-fields{display:grid;gap:6px;align-content:start}
.auth-fields>label:not(.auth-check){font-weight:700;color:var(--navy);margin-top:10px;font-size:15px}
.auth-after{display:grid;gap:4px;align-content:start;padding-top:6px}
.auth-after .auth-hint{margin:2px 0 0}
#register-card .auth-head,#login-card .auth-head{align-self:start}
@media(max-width:900px){.auth-wrap:has(> #register-card + #login-card){grid-template-rows:none;row-gap:32px}}
#register-card>.auth-benefits{align-self:start}
