/* ============================================================
   sugar4.me · Auth & registration — EDITORIAL LIGHT, on-brand
   Matches the rest of the product: white & airy, Montserrat light
   display + Open Sans, rose accents, a champagne-gold hairline as
   the shared signature. One calm centered column at every width.
   Scoped to .s4auth (+ body:has(.s4auth) for page atmosphere).
   ============================================================ */

body:has(.s4auth), .s4auth {
  --pink: #d2447b; --pink-deep: #a81e57; --pink-soft: #fbe6ef;
  --ink: #1a1417; --muted: #8c8189;
  --field: #faf7f8; --field-line: #e7e0e3;
  --radius-sm: 13px; --radius: 18px;
  --gold: #b8995f; --gold-deep: #9c7d44;
  --ease: cubic-bezier(.22,.61,.36,1);
}
.s4auth {
  max-width: 100%; margin: 0; padding: 0;
  font-family: "Open Sans", sans-serif; color: var(--ink);
}

/* ---- Page atmosphere: clean white, template chrome stripped ---- */
body:has(.s4auth) { background: #fff !important; }
body:has(.s4auth) .page-content,
body:has(.s4auth) .page-content.space-top { background: transparent !important; padding: 0 !important; margin-top: 0 !important; }
body:has(.s4auth) .page-content > .container { max-width: 100% !important; padding: 0 !important; }

/* Slim white top bar holding the back button, aligned to the column */
body:has(.s4auth) .header.header-fixed {
  position: static; z-index: 20;
  background: #fff !important; box-shadow: none !important;
  border: 0 !important; border-bottom: 1px solid var(--field-line) !important;
}
body:has(.s4auth) .header.header-fixed .container { max-width: 520px !important; margin: 0 auto; }
body:has(.s4auth) .header.header-fixed .header-content { min-height: 54px; }
body:has(.s4auth) .header.header-fixed .back-btn .title { color: var(--muted) !important; font-weight: 600; font-size: 0.9rem; }
body:has(.s4auth) .header.header-fixed .back-btn .icon,
body:has(.s4auth) .header.header-fixed .back-btn i { color: var(--ink) !important; }
body:has(.s4auth) .header.header-fixed .back-btn:hover .title,
body:has(.s4auth) .header.header-fixed .back-btn:hover i { color: var(--pink-deep) !important; }

/* ---- One centered column (all breakpoints) ---- */
.s4auth .account-area {
  position: relative;
  min-height: calc(100vh - 55px); min-height: calc(100dvh - 55px);
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; max-width: 460px; margin: 0 auto;
  padding: 2.6rem clamp(1.3rem, 5vw, 1.7rem) 2.6rem;
}
.s4auth .card, .s4auth .auth-card {
  border: 0 !important; border-radius: 0 !important; background: transparent; box-shadow: none !important;
  width: 100%; display: flex; flex-direction: column;
}

/* ---- Logo: in flow, real brand colours on white ---- */
.s4auth .account-area > img, .s4auth .auth-logo {
  position: static; width: 148px; height: auto; margin: 0 auto 1.7rem; display: block; filter: none;
}
.s4auth .account-area > .s4-logo--auth {
  position: static; margin: 0 auto 1.7rem; justify-content: center; font-size: 15px; filter: none;
}
.s4auth .s4-logo--auth .s4-logo-tag { display: none; }
.s4auth .s4-logo--auth .s4-logo-word { font-weight: 300; letter-spacing: .12em; }
.s4auth .s4-logo--auth .s4-logo-heart { height: 2.5em; }

/* ---- Hero header: editorial, light, with the gold-hairline signature ---- */
.s4auth .card-header {
  position: relative; overflow: visible; display: block; text-align: center;
  background: transparent !important; color: var(--ink); border: 0 !important;
  margin: 0; padding: 0 0 1.7rem !important;
}
.s4auth .card-header::before {        /* champagne hairline — shared with the rest of the site */
  content: ""; display: block; width: 2.2rem; height: 2px; margin: 0 auto 1.15rem;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}
.s4auth h1, .s4auth h2, .s4auth h3, .s4auth .card-title {
  font-family: "Montserrat", sans-serif; letter-spacing: -0.03em;
}
.s4auth .card-title {
  color: var(--ink) !important; font-weight: 300; text-transform: none;
  font-size: clamp(1.95rem, 7.5vw, 2.45rem); line-height: 1.06; margin: 0;
}
.s4auth .auth-sub {
  color: var(--muted); margin: 0.85rem auto 0; font-size: 0.98rem; line-height: 1.55; max-width: 34ch;
}
/* sub-step heading ("Let's start with the e-mail" / "Confirm your e-mail") */
.s4auth .card-header .card-title + .card-title {
  font-size: 1.05rem; font-weight: 600; color: var(--pink-deep) !important; margin-top: 0.55rem; letter-spacing: 0;
}

/* ---- Body + footer ---- */
.s4auth .card-body, .s4auth .s4-body {
  padding: 0 !important; width: 100%; display: flex; flex-direction: column; flex: 1 1 auto;
}
.s4auth .card-footer { background: transparent !important; border: 0 !important; padding: 1.5rem 0 0; width: 100%; }
.s4auth .card-body .auth-sub, .s4auth .s4-body .auth-sub { color: var(--muted); margin: 0 0 1.4rem; max-width: none; }

/* ---- Aspirational hero content (login + register entry) — light ---- */
.s4auth .s4-hero-extra { position: relative; margin-top: 1.7rem; }
.s4auth .s4-hero-points { list-style: none; margin: 0 0 1.3rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.s4auth .s4-hero-points li { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); font-size: 0.96rem; line-height: 1.3; }
.s4auth .s4-hero-points i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pink-soft); color: var(--pink-deep); font-size: 0.78rem; }
.s4auth .s4-hero-proof {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--field-line);
}
.s4auth .s4-hero-proof .s4-proof-star { color: var(--gold); }
.s4auth .s4-hero-proof .s4-live-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2fbf6b;
  box-shadow: 0 0 0 0 rgba(47,191,107,0.55); animation: s4livepulse 2.2s ease infinite;
}
@keyframes s4livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,191,107,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(47,191,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,191,107,0); }
}
.s4auth .s4-hero-proof b { color: var(--ink); font-family: "Montserrat", sans-serif; font-weight: 700; }
.s4auth .s4-hero-proof span { color: var(--muted); font-size: 0.9rem; }
@media (max-width: 859px) {
  .s4auth .s4-hero-points { display: none; }   /* keep the form high on mobile */
  .s4auth .s4-hero-extra { margin-top: 1.2rem; text-align: center; }
}

/* ---- Benefit rows (Step0) ---- */
.s4-benefits { list-style: none; margin: 1rem 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.s4-benefits li { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 1rem; color: var(--ink); line-height: 1.45; }
.s4-benefits strong { font-weight: 700; }
.s4-check { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep);
  display: grid; place-items: center; font-size: 0.72rem; margin-top: 1px; }

/* ---- Inputs ---- */
.s4auth label, .s4auth .form-label { font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 0.86rem; letter-spacing: 0;
  text-transform: none; color: var(--ink); margin-bottom: 0.62rem; display: block; }
.s4auth .mb-2 { margin-bottom: 1.15rem !important; }
.s4auth .mb-3 { margin-bottom: 1.25rem !important; }
.s4auth .form-group { margin-bottom: 1.25rem; }
.s4auth .form-control {
  border: 1.5px solid var(--field-line); border-radius: var(--radius-sm); padding: 0.95rem 1.05rem;
  font-size: 1rem; background: var(--field); box-shadow: none; color: var(--ink); width: 100%;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.s4auth .form-control::placeholder { color: #b3a9af; }
.s4auth .form-control:focus { border-color: var(--pink); background: #fff; box-shadow: 0 0 0 4px rgba(210,68,123,0.13); }

/* Leading-icon field: the icon sits seamlessly INSIDE one clean field
   (no separate bordered box — that split look read as dated/template). */
.s4auth .input-group { position: relative; border: 0; display: block; gap: 0; }
.s4auth .input-group-text {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  width: 3rem; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--muted); pointer-events: none; border-radius: 0;
}
.s4auth .input-group-text .input-icon { background: transparent !important; width: auto; height: auto; }
.s4auth .input-group .form-control { border: 1.5px solid var(--field-line); border-radius: var(--radius-sm); padding-left: 3rem; }
.s4auth .input-group:focus-within .input-group-text { color: var(--pink-deep); }

/* ---- Buttons: full pill, app-like ---- */
.s4auth .btn {
  border-radius: 999px !important; text-transform: none; letter-spacing: 0; font-weight: 600;
  font-family: "Montserrat", sans-serif; font-size: 1rem; padding: 0.95rem 1.4rem; min-height: 54px;
  border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.s4auth .btn + .btn, .s4auth .s4-btn-ghost { margin-top: 0.7rem; }
.s4auth .btn:active { transform: scale(0.98); }
.s4auth .btn-primary, .s4auth .btn-success {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%) !important; color: #fff !important;
  box-shadow: 0 14px 28px -14px rgba(168,30,87,0.55);
}
.s4auth .btn-primary:hover, .s4auth .btn-success:hover { box-shadow: 0 18px 34px -14px rgba(168,30,87,0.6); transform: translateY(-1px); }
.s4auth .btn-light, .s4auth .s4-btn-ghost { background: #fff !important; color: var(--ink) !important; box-shadow: none; border: 1.5px solid var(--field-line) !important; }
.s4auth .btn-light:hover, .s4auth .s4-btn-ghost:hover { border-color: var(--pink) !important; color: var(--pink-deep) !important; }
.s4auth .s4-btn-lg { min-height: 58px; font-size: 1.05rem; }
.s4auth .btn i { font-size: 0.92em; }
/* Flatten the theme's floating circular icon badge → clean inline icon */
.s4auth .btn-icon { border-radius: 999px !important; overflow: visible; }
.s4auth .btn-icon.icon-start, .s4auth .btn-icon.icon-end { padding-left: 1.4rem; padding-right: 1.4rem; }
.s4auth .btn-icon i {
  position: static; width: auto; height: auto; line-height: inherit; font-size: 0.92em;
  background: transparent !important; border-radius: 0; transform: none; color: inherit; left: auto; right: auto;
}
.s4auth .btn-icon img { position: static; width: auto; background: transparent; padding: 0; }
.s4auth .btn-light i.text-black { color: var(--pink-deep) !important; }

.s4auth a { color: var(--pink-deep); font-weight: 600; }
.s4auth a:hover { color: var(--pink); }
.s4auth .s4-btn-ghost { text-decoration: none; }

/* ---- Divider ("Need help?") ---- */
.s4auth .divider { color: var(--muted); border-color: var(--field-line) !important; }
.s4auth .divider.inner-divider.border-info.transparent span,
.s4auth .divider.inner-divider span { color: var(--muted) !important; }
.s4auth .list-icons a { color: var(--ink); font-weight: 600; }
.s4auth .list-icons a:hover { color: var(--pink-deep); }
.s4auth .list-icons i { color: var(--pink-deep); }

/* ---- Registration choice tiles (sugar daddy / sugar baby) ---- */
.s4auth .reg-choice {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1.5px solid var(--field-line); border-radius: var(--radius); padding: 1.7rem 1rem 1.4rem; text-align: center; cursor: pointer;
  height: 100%; background: #fff;
  transition: border-color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.s4auth .reg-choice::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(120% 80% at 50% 0%, var(--pink-soft), transparent 70%);
  transition: opacity .25s var(--ease);
}
.s4auth .reg-choice:hover, .s4auth .reg-choice:focus-visible {
  border-color: var(--pink); transform: translateY(-3px); outline: none;
  box-shadow: 0 22px 42px -24px rgba(210,68,123,0.45);
}
.s4auth .reg-choice:hover::before, .s4auth .reg-choice:focus-visible::before { opacity: 1; }
.s4auth .reg-choice img { max-width: 94px; height: auto; margin: 0 auto 0.85rem; display: block; }
.s4auth .reg-choice-k {
  display: block; font-family: "Montserrat", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.66rem; color: var(--muted); margin-bottom: 0.2rem;
}
.s4auth .reg-choice h3, .s4auth .reg-choice h4 {
  margin: 0; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1.12rem;
  letter-spacing: -0.01em; color: var(--ink);
}
.s4auth .reg-choice:hover h3, .s4auth .reg-choice:hover h4 { color: var(--pink-deep); }

/* ---- Step indicator — momentum bar (fills + shimmers as you progress) ---- */
.s4auth .reg-steps { display: flex; gap: 0.45rem; justify-content: center; margin: 0 0 1.7rem; }
.s4auth .reg-steps span {
  flex: 1 1 0; max-width: 52px; height: 6px; border-radius: 999px;
  background: var(--field-line); position: relative; overflow: hidden;
  transition: background-color .35s var(--ease);
}
.s4auth .reg-steps span.on {
  background: linear-gradient(90deg, var(--pink), var(--pink-deep));
  box-shadow: 0 3px 12px -3px rgba(210,68,123,0.55);
}
.s4auth .reg-steps span.on::after {     /* travelling glint = "you're moving" */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%); animation: s4shimmer 2.4s var(--ease) infinite;
}

/* ---- Mud alerts ---- */
.s4auth .mud-alert { border-radius: var(--radius-sm) !important; }
.s4auth .mud-alert-outlined-info { color: var(--ink) !important; border-color: var(--field-line) !important; }
.s4auth .mud-alert-outlined-info .mud-alert-icon,
.s4auth .mud-alert-outlined-info .mud-icon-root { color: var(--pink) !important; }
.s4auth .mud-alert-filled-info { background-color: var(--pink) !important; color: #fff !important; }
.s4auth .mud-alert-filled-info .mud-alert-icon,
.s4auth .mud-alert-filled-info .mud-icon-root { color: #fff !important; }

/* ---- Mobile (primary traffic) ---- */
.s4auth .footer.fixed { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
@media (max-width: 480px) {
  .s4auth .account-area { padding-top: 2rem; }
  .s4auth .account-area > img, .s4auth .auth-logo { width: 128px; margin-bottom: 1.4rem; }
  .s4auth .account-area > .s4-logo--auth { font-size: 13px; margin-bottom: 1.4rem; }
  .s4auth .card-title { font-size: clamp(1.7rem, 8vw, 2.05rem); }
  .s4auth .auth-sub { font-size: 0.94rem; }
  .s4auth .s4-hero-proof { padding: 0.42rem 0.8rem 0.42rem 0.65rem; }
  .s4auth .s4-hero-proof span, .s4auth .s4-hero-proof b { font-size: 0.86rem; }
  .s4auth .s4-proof-more { display: none; }
}

/* ---- Native verification-code (PIN) input ---- */
.s4auth .s4-pin { display: flex; gap: 0.55rem; justify-content: center; margin: 0.4rem 0 0.2rem; }
.s4auth .s4-pin-cell {
  width: 3.2rem; height: 3.7rem; text-align: center;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--ink);
  border: 1.5px solid var(--field-line); border-radius: var(--radius-sm); background: var(--field);
  caret-color: var(--pink); -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.s4auth .s4-pin-cell:focus { outline: none; border-color: var(--pink); background: #fff; box-shadow: 0 0 0 4px rgba(210,68,123,0.13); }
.s4auth .s4-pin-value { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; opacity: 0; pointer-events: none; border: 0; }
@media (max-width: 480px) { .s4auth .s4-pin-cell { width: 2.9rem; height: 3.4rem; font-size: 1.45rem; } }

/* ============================================================
   Final registration step (/register/last) — cohesive controls
   ============================================================ */
.s4auth .divider.inner-divider span,
.s4auth .divider.inner-divider.transparent span {
  font-family: "Montserrat", sans-serif !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: -0.01em !important;
  font-size: 1rem !important; color: var(--ink) !important; padding-left: 0 !important;
}
.s4auth .s4-field-hint { margin: 0.35rem 0 0; font-size: 0.84rem; color: var(--muted); line-height: 1.45; }

/* Interest chips */
.s4auth .s4-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.7rem; }
.s4auth .s4-chip { position: relative; cursor: pointer; margin: 0; }
.s4auth .s4-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.s4auth .s4-chip > span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.62rem 1.05rem; border-radius: 999px; border: 1.5px solid var(--field-line); background: var(--field);
  font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 0.92rem; color: var(--ink);
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.s4auth .s4-chip > span i { color: var(--muted); font-size: 0.9em; transition: color .18s var(--ease); }
.s4auth .s4-chip:hover > span { border-color: var(--pink); }
.s4auth .s4-chip:has(input:checked) > span { border-color: var(--pink); background: var(--pink-soft); color: var(--pink-deep); }
.s4auth .s4-chip:has(input:checked) > span i { color: var(--pink); }
.s4auth .s4-chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(210,68,123,0.13); }

/* Terms / mailing checkboxes + final submit */
.s4auth .mud-checkbox .mud-typography { font-size: 0.92rem; color: var(--ink); line-height: 1.45; }
.s4auth .s4-last-submit { margin-top: 1.7rem; }

/* Native <select> — styled to echo the Explore filter's dropdown field
   (s4-country-field): a leading icon, a chunky grey caret, a comfortable
   48px field and the same soft rose focus ring. Native popup is kept on
   purpose (single-select; better mobile + no circuit needed). */
.s4auth .s4-selectfield { position: relative; }
.s4auth .s4-selectfield-ic {
  position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%);
  color: var(--pink-deep); font-size: 0.98rem; pointer-events: none; z-index: 1;
}
.s4auth .s4-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  min-height: 48px; padding-right: 2.7rem;
  /* The field has a fixed height:50px (legacy .form-control). With the base
     0.95rem vertical padding the content box (~16px) is shorter than the text
     line (~27px), so the native <select> CLIPPED its text top & bottom. Trim
     the vertical padding and pin line-height so the line fits and centers. */
  padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 1.2;
  /* Chevron in the filter caret's grey (#a0959e), not the old thin pink one. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0959e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.05rem center; background-size: 13px;
}
.s4auth .s4-select--icon { padding-left: 2.85rem; }
.s4auth .s4-select:hover { border-color: rgba(168, 30, 87, 0.4); }
.s4auth .s4-select:focus { border-color: var(--pink-deep); background: #fff; box-shadow: 0 0 0 3px rgba(168, 30, 87, 0.14); }
.s4auth .s4-select:has(option[value=""]:checked) { color: #b3a9af; }
.s4auth input[type="date"].form-control { cursor: text; }

/* Inline consent checkboxes (box beside the text, not above it) */
.s4auth .s4-consent { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0.95rem 0 0; cursor: pointer; }
.s4auth .s4-consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; cursor: pointer; accent-color: var(--pink); }
.s4auth .s4-consent span { font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.s4auth .s4-consent a { color: var(--pink-deep); text-decoration: underline; }

/* ============================================================
   Catchy layer — motion + momentum (makes the flow feel alive,
   premium and quick, so people WANT to go forward). Honours
   prefers-reduced-motion.
   ============================================================ */

/* Each step rises into place — a small orchestrated entrance on every load
   (and between wizard steps), so progressing feels like moving forward. */
@keyframes s4rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
.s4auth .account-area > .s4-logo--auth,
.s4auth .account-area > img,
.s4auth .card-header,
.s4auth .card-body, .s4auth .s4-body,
.s4auth .card-footer { animation: s4rise .5s var(--ease) both; }
.s4auth .account-area > .s4-logo--auth,
.s4auth .account-area > img { animation-delay: 0s; }
.s4auth .card-header { animation-delay: .06s; }
.s4auth .card-body, .s4auth .s4-body { animation-delay: .14s; }
.s4auth .card-footer { animation-delay: .2s; }

@keyframes s4shimmer { to { transform: translateX(100%); } }

/* A periodic glint sweeps the primary CTA — quietly says "tap me, keep going". */
.s4auth .btn-primary, .s4auth .btn-success { position: relative; overflow: hidden; isolation: isolate; }
.s4auth .btn-primary::after, .s4auth .btn-success::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 55%; height: 100%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: s4glint 4.8s var(--ease) infinite;
}
@keyframes s4glint { 0% { left: -70%; } 36% { left: 150%; } 100% { left: 150%; } }

/* Interest toggles (final step) — match the filter switches exactly.
   .s4-ftoggle styling comes from app.css; here we just frame the group. */
.s4auth .s4-ftoggles { margin-top: 0.6rem; border: 1.5px solid var(--field-line); border-radius: var(--radius); padding: 0.2rem 1rem; }
/* .s4auth label{display:block} (the input-label rule) would clobber the toggle's
   grid since .s4-ftoggle IS a <label> — re-assert the filter switch layout. */
.s4auth .s4-ftoggle {
  display: grid; grid-template-columns: 2.1rem 1fr 46px; align-items: center;
  gap: 0.85rem; margin: 0; border-top-color: var(--field-line) !important;
}
.s4auth .s4-ft-label { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .s4auth .account-area > .s4-logo--auth, .s4auth .account-area > img,
  .s4auth .card-header, .s4auth .card-body, .s4auth .s4-body, .s4auth .card-footer { animation: none !important; }
  .s4auth .reg-steps span.on::after,
  .s4auth .btn-primary::after, .s4auth .btn-success::after { animation: none !important; display: none; }
}