/*
 * Famiyora shortcode styles (B1) — sign in, register, reset password, plans.
 *
 * WHITE SURFACE, BLUE ACCENT, AND IT COMMITS TO THAT.
 *
 * This file used to carry a `prefers-color-scheme: dark` block that repainted the form dark. On a
 * light WordPress theme — which is the overwhelmingly common case — a visitor whose OPERATING SYSTEM
 * was in dark mode got black inputs and a black consent panel dropped into a white page, with text
 * at whatever contrast happened to fall out of the mix. The widget cannot know the theme's colours,
 * so guessing from an OS signal is guessing; it now renders light, always, and declares
 * `color-scheme: light` so the browser does not auto-darken the controls either.
 *
 * Everything is scoped under `.fcs-sc` and driven by custom properties, so a theme (or a child
 * theme, or a single page) can restyle the whole thing by redefining the variables rather than
 * fighting selector specificity. Colours are set EXPLICITLY on every element rather than inherited,
 * because these forms are dropped into arbitrary themes and an inherited colour is a colour you do
 * not control.
 */

.fcs-sc {
  /* Override these from your theme to restyle everything below. */
  --fcs-sc-fg:         #0F172A;
  --fcs-sc-fg-2:       #334155;
  --fcs-sc-muted:      #64748B;
  --fcs-sc-bg:         #FFFFFF;
  --fcs-sc-surface:    #F8FAFC;
  --fcs-sc-border:     #E2E8F0;
  --fcs-sc-border-2:   #CBD5E1;
  --fcs-sc-accent:     #2563EB;
  --fcs-sc-accent-2:   #1D4ED8;
  --fcs-sc-accent-soft:#EFF6FF;
  --fcs-sc-accent-fg:  #FFFFFF;
  --fcs-sc-error:      #DC2626;
  --fcs-sc-error-bg:   #FEF2F2;
  --fcs-sc-warn:       #B45309;
  --fcs-sc-warn-bg:    #FFFBEB;

  --fcs-sc-radius:     12px;
  --fcs-sc-radius-sm:  8px;
  --fcs-sc-gap:        18px;
  --fcs-sc-control-h:  46px;
  --fcs-sc-maxw:       30rem;
  --fcs-sc-shadow:     0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);

  /* Tell the browser this is a light widget. Without it, a visitor in OS dark mode gets
     user-agent-darkened inputs no matter what colours we set. */
  color-scheme: light;

  color: var(--fcs-sc-fg);
  font-size: 16px;
  line-height: 1.55;
  max-width: var(--fcs-sc-maxw);
  margin-inline: auto;
  text-align: left;
}

.fcs-sc *, .fcs-sc *::before, .fcs-sc *::after { box-sizing: border-box; }

/*
 * `hidden` MUST win. This is not defensive tidying — it fixes two live bugs.
 *
 * `hidden` only sets `display: none` in the user-agent stylesheet, so ANY author `display` rule
 * beats it. `.fcs-sc-form` is `display: grid` and `.fcs-sc-btn` is a displayed button, which means
 * the login page was rendering the "forgotten your password" form permanently open below the
 * sign-in form, and every plan column was showing all three buy buttons at once — monthly,
 * quarterly and yearly stacked — no matter which term was selected.
 *
 * It also protects what this file added: `.fcs-sc-step` is now a grid, and without this rule the
 * two-factor step would show alongside the password step.
 */
.fcs-sc [hidden] { display: none !important; }

.fcs-sc-plans-wrap { --fcs-sc-maxw: 68rem; }

.fcs-sc-title {
  margin: 0 0 6px;
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--fcs-sc-fg);
  text-align: center;
}
.fcs-sc-login .fcs-sc-title,
.fcs-sc-register .fcs-sc-title { margin-bottom: 16px; }

/* ---- forms ---------------------------------------------------------------
 *
 * Every form on the auth pages IS the card: the login form, the "forgotten password" form, and the
 * set-a-new-password form the script injects when someone arrives from a reset email all carry
 * .fcs-sc-form, so all three look identical without the script having to know anything about it.
 */

.fcs-sc-form {
  display: grid;
  gap: var(--fcs-sc-gap);
  padding: 28px;
  background: var(--fcs-sc-bg);
  border: 1px solid var(--fcs-sc-border);
  border-radius: var(--fcs-sc-radius);
  box-shadow: var(--fcs-sc-shadow);
}
.fcs-sc-plans-wrap .fcs-sc-form { padding: 0; border: 0; box-shadow: none; background: none; }

.fcs-sc-step { display: grid; gap: var(--fcs-sc-gap); }
.fcs-sc-field { display: grid; gap: 7px; }

.fcs-sc-field label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--fcs-sc-fg-2);
  margin: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}

.fcs-sc input[type="text"],
.fcs-sc input[type="email"],
.fcs-sc input[type="tel"],
.fcs-sc input[type="password"] {
  width: 100%;
  height: var(--fcs-sc-control-h);
  margin: 0;
  padding: 0 14px;
  font: inherit;
  font-size: 1rem;
  line-height: normal;
  color: var(--fcs-sc-fg);
  background: var(--fcs-sc-bg);
  background-image: none;
  border: 1px solid var(--fcs-sc-border-2);
  border-radius: var(--fcs-sc-radius-sm);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fcs-sc input::placeholder { color: var(--fcs-sc-muted); opacity: 1; }

.fcs-sc input[type="text"]:hover,
.fcs-sc input[type="email"]:hover,
.fcs-sc input[type="password"]:hover { border-color: var(--fcs-sc-muted); }

.fcs-sc input[type="text"]:focus,
.fcs-sc input[type="email"]:focus,
.fcs-sc input[type="password"]:focus {
  border-color: var(--fcs-sc-accent);
  box-shadow: 0 0 0 3px var(--fcs-sc-accent-soft);
  outline: none;
}

/* Keep the visible focus ring for keyboard users on everything else. */
.fcs-sc button:focus-visible,
.fcs-sc a:focus-visible,
.fcs-sc input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--fcs-sc-accent);
  outline-offset: 2px;
}

/* The 6-digit authenticator code deserves to look like a code. */
.fcs-sc input[name="totp_code"] {
  font-size: 1.35rem;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fcs-sc-hint  { margin: 0; font-size: .875rem; color: var(--fcs-sc-muted); }
.fcs-sc-alt   { margin: 0; font-size: .9rem; color: var(--fcs-sc-muted); text-align: center; }
.fcs-sc-alt a { color: var(--fcs-sc-accent); font-weight: 600; text-decoration: none; }
.fcs-sc-alt a:hover { color: var(--fcs-sc-accent-2); text-decoration: underline; }

.fcs-sc a { color: var(--fcs-sc-accent); }
.fcs-sc a:hover { color: var(--fcs-sc-accent-2); }

/* ---- buttons ------------------------------------------------------------- */

.fcs-sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fcs-sc-control-h);
  padding: 12px 20px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid var(--fcs-sc-border-2);
  border-radius: var(--fcs-sc-radius-sm);
  background: var(--fcs-sc-bg);
  color: var(--fcs-sc-fg);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fcs-sc-btn:hover { background: var(--fcs-sc-surface); color: var(--fcs-sc-fg); }

.fcs-sc-btn.is-primary {
  background: var(--fcs-sc-accent);
  border-color: var(--fcs-sc-accent);
  color: var(--fcs-sc-accent-fg);
}
.fcs-sc-btn.is-primary:hover {
  background: var(--fcs-sc-accent-2);
  border-color: var(--fcs-sc-accent-2);
  color: var(--fcs-sc-accent-fg);
}
.fcs-sc-btn[disabled] { opacity: .65; cursor: progress; }

/* On the auth forms the submit is the one thing to do on the page, so it takes the full width. */
.fcs-sc-login .fcs-sc-btn,
.fcs-sc-register .fcs-sc-btn { width: 100%; }

/* ---- notices ------------------------------------------------------------- */

.fcs-sc-note,
.fcs-sc-err {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--fcs-sc-radius-sm);
  border: 1px solid var(--fcs-sc-border);
  background: var(--fcs-sc-surface);
  color: var(--fcs-sc-fg-2);
  font-size: .9rem;
}
.fcs-sc-err,
.fcs-sc-note.is-error {
  border-color: var(--fcs-sc-error);
  background: var(--fcs-sc-error-bg);
  color: var(--fcs-sc-error);
}
.fcs-sc-note.is-warn {
  border-color: var(--fcs-sc-warn);
  background: var(--fcs-sc-warn-bg);
  color: var(--fcs-sc-warn);
}
.fcs-sc-err:focus, .fcs-sc-note:focus { outline: 2px solid var(--fcs-sc-accent); outline-offset: 2px; }

/* The post-registration "check your email" panel. */
.fcs-sc-done {
  padding: 28px;
  text-align: center;
  background: var(--fcs-sc-bg);
  border: 1px solid var(--fcs-sc-border);
  border-radius: var(--fcs-sc-radius);
  box-shadow: var(--fcs-sc-shadow);
}
.fcs-sc-done h3 { margin: 0 0 8px; font-size: 1.25rem; color: var(--fcs-sc-fg); }
.fcs-sc-done p  { margin: 0; color: var(--fcs-sc-fg-2); font-size: .95rem; }

/* ---- consent block ------------------------------------------------------- */

.fcs-sc-consent {
  display: block;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--fcs-sc-border);
  border-radius: var(--fcs-sc-radius-sm);
  background: var(--fcs-sc-surface);
  min-width: 0;   /* a fieldset defaults to min-content width and will blow out a grid parent */
}

/*
 * A <legend> is normally rendered by the browser INTO the fieldset's top border — straddling it,
 * with the border interrupted behind the text and nothing painted underneath. On a panel with a
 * background that produced the half-cut "Before you start" heading: the top half of the letters sat
 * on the page, the bottom half on the panel.
 *
 * Floating it takes it out of that border slot and lays it out as an ordinary block inside the
 * padding box, which every engine handles the same way. The element after it clears the float.
 */
.fcs-sc-consent legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--fcs-sc-fg);
}
.fcs-sc-consent > .fcs-sc-hint { clear: both; margin: 0 0 10px; }

/* Each declaration is its own hit target: the whole row is the label, and it lights up on hover so
   it is obvious there are eight separate things being agreed to, not one block of small print. */
.fcs-sc-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  margin: 0 0 2px;
  border-radius: var(--fcs-sc-radius-sm);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--fcs-sc-fg-2);
  cursor: pointer;
}
.fcs-sc-check:hover { background: var(--fcs-sc-accent-soft); }
.fcs-sc-check span { color: var(--fcs-sc-fg-2); }
.fcs-sc-check a { color: var(--fcs-sc-accent); font-weight: 600; }

.fcs-sc-check input[type="checkbox"] {
  /* 1.05em against an inherited font-size made these different sizes in different themes. */
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 1px 0 0;
  padding: 0;
  flex: none;
  accent-color: var(--fcs-sc-accent);
  cursor: pointer;
}

/* ---- trial note ---------------------------------------------------------- */

/* This is a legal disclosure, not a footnote — it says the trial data is deleted. Blue panel with a
   rule down the side so it reads as something to be read, and at full body contrast, not grey. */
.fcs-sc-trial-note {
  padding: 14px 16px;
  border: 1px solid var(--fcs-sc-border);
  border-left: 3px solid var(--fcs-sc-accent);
  border-radius: 0 var(--fcs-sc-radius-sm) var(--fcs-sc-radius-sm) 0;
  background: var(--fcs-sc-accent-soft);
  color: var(--fcs-sc-fg-2);
  font-size: .875rem;
}
.fcs-sc-trial-note strong { color: var(--fcs-sc-fg); }

/* ---- plans --------------------------------------------------------------- */

.fcs-sc-precontract {
  padding: var(--fcs-sc-gap);
  margin-bottom: var(--fcs-sc-gap);
  border: 1px solid var(--fcs-sc-border);
  border-radius: var(--fcs-sc-radius);
  background: var(--fcs-sc-surface);
  color: var(--fcs-sc-fg-2);
  font-size: .95rem;
}
.fcs-sc-precontract p { margin: 0 0 8px; }
.fcs-sc-precontract p:last-child { margin-bottom: 0; }
.fcs-sc-precontract strong { color: var(--fcs-sc-fg); }

/* A segmented control rather than three loose pills: one track, the selected segment filled. */
.fcs-sc-duration {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  margin: 0 auto var(--fcs-sc-gap);
  border: 1px solid var(--fcs-sc-border);
  border-radius: 999px;
  background: var(--fcs-sc-surface);
}

.fcs-sc-dur {
  padding: 8px 18px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--fcs-sc-muted);
  transition: background-color .15s ease, color .15s ease;
}
.fcs-sc-dur:hover { color: var(--fcs-sc-fg); }
.fcs-sc-dur.is-active {
  background: var(--fcs-sc-accent);
  border-color: var(--fcs-sc-accent);
  color: var(--fcs-sc-accent-fg);
}

.fcs-sc-tiers {
  display: grid;
  gap: var(--fcs-sc-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: stretch;
}
.fcs-sc-tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--fcs-sc-border);
  border-radius: var(--fcs-sc-radius);
  background: var(--fcs-sc-bg);
  box-shadow: var(--fcs-sc-shadow);
}
.fcs-sc-tier h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--fcs-sc-fg); }
.fcs-sc-amount { font-size: 2rem; font-weight: 700; color: var(--fcs-sc-fg); line-height: 1.1; }
.fcs-sc-was { margin-left: 8px; color: var(--fcs-sc-muted); text-decoration: line-through; font-size: 1rem; font-weight: 500; }
.fcs-sc-term { display: block; margin-top: 2px; font-size: .85rem; color: var(--fcs-sc-muted); }

.fcs-sc-feats {
  margin: 0;
  padding-left: 1.15em;
  display: grid;
  gap: 6px;
  font-size: .9rem;
  color: var(--fcs-sc-fg-2);
}
.fcs-sc-feats strong { color: var(--fcs-sc-fg); }
.fcs-sc-tier .fcs-sc-btn { margin-top: auto; width: 100%; }

/* Wide tables must scroll inside their own box, never the page. */
.fcs-sc-compare {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  font-size: .9rem;
  color: var(--fcs-sc-fg-2);
}
.fcs-sc-compare caption {
  text-align: left;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fcs-sc-fg);
  padding-bottom: 10px;
}
.fcs-sc-compare th,
.fcs-sc-compare td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--fcs-sc-border);
  text-align: left;
  white-space: nowrap;
}
.fcs-sc-compare thead th { color: var(--fcs-sc-fg); font-weight: 700; background: var(--fcs-sc-surface); }
.fcs-sc-compare tbody th { font-weight: 500; color: var(--fcs-sc-muted); }

.fcs-sc-seller { margin-top: 28px; font-size: .85rem; color: var(--fcs-sc-muted); }
.fcs-sc-seller p { margin: 0 0 4px; }

/* ---- small screens ------------------------------------------------------- */

@media (max-width: 480px) {
  .fcs-sc-form, .fcs-sc-done { padding: 20px 16px; border-radius: var(--fcs-sc-radius-sm); }
  .fcs-sc-consent { padding: 12px; }
  .fcs-sc-check { padding: 8px 6px; }
  .fcs-sc-duration { width: 100%; }
  .fcs-sc-dur { flex: 1 1 auto; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fcs-sc * { transition: none !important; animation: none !important; }
}