/*
  MTCaptcha Demo Widget (brand overrides)
  ----------------------------------------------------------------------------
  Loaded AFTER /demo/vendor/mtcaptcha-demo.css (the untouched vendor
  stylesheet). This file only restyles: it never renames or removes a class or
  id the vendor JS depends on (see specs/demo-widget.md for the full list).

  v3 design strategy (rebuilt from scratch, see specs/demo-widget.md revision
  history for the full rationale):

  1. ONE card, not three. The vendor already renders its own themed card
     (.demo-loginbox: a white/off-white/dark box with its own border and
     background, different per theme). Earlier revisions wrapped that in a
     second bordered/shadowed box (.demoscreen) inside a third card supplied
     by the page (the hero's browser-chrome frame), so every theme showed as
     nested boxes-in-boxes. Here .demoscreen and .demo-canvas are made fully
     transparent, so the vendor's own themed card is the only visible surface
     inside the page's frame. Depth comes from a single box-shadow/ring on
     that one card (see "elevation" section below), not from extra layers.
  2. Columns share one height (`align-items: stretch` on the grid) with the tab
     area top-anchored, so a content-driven height change on one side (e.g.
     Invisible Captcha's fallback challenge growing taller) resizes the row
     without shifting any content. See the note on .mtc-demo-grid below.
  3. Every toggle (Modern Mini, Invisible Captcha, Automated Test Mode) uses
     one shared switch component (.mtc-switchrow / .mtc-switch) instead of two
     different shapes with two different alignment models.
  4. Tab bar icons get a fixed, centered, aspect-ratio-preserving box, and
     fill/stroke color rules are keyed to each icon's own id and combined with
     the *button's* id for hover/active state. This matters because the
     vendor CSS itself already has hover/active icon-color rules keyed to
     `#theme-icon`/`#developers-icon` (see mtcaptcha-demo.css), which are MORE
     specific than a generic ".icon svg path" rule and were winning on hover,
     flashing icons white against a barely-tinted hover background. Beating
     that requires matching specificity with our own id-qualified selectors.

  IMPORTANT sizing note: the vendor's own responsive rules give `.demo-loginbox`
  a real max-width up to 350px (Standard theme) with 40-45px of horizontal
  padding on top (content-box sizing), so the finished card wants roughly
  420-450px to render its captcha challenge without clipping. The right column
  below is sized to guarantee that room; don't shrink it without re-checking
  the captcha renders uncropped at every theme and at Modern Mini.
*/

/* ---------- outer container ---------- */

#mtcaptcha-main-demo {
  display: block;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: 'Poppins', sans-serif;
  color: var(--body);
}

.mtc-demo {
  width: 100%;
}

.mtc-demo-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  grid-template-columns: 1fr minmax(300px, 420px);
  /*
    Equal column heights (v5). This was `start` in v3 to stop the left panel
    "jumping" when the right side grew, but that fix treated the symptom: the
    jump came from `justify-content: center` on .mtc-demo-tabarea re-centering
    its content inside a changed height, not from stretch itself. The tab area
    is now top-anchored (`flex-start`), so both columns can share a height
    without anything shifting. Do not reintroduce `center` there.
  */
  align-items: stretch;
}

@media (max-width: 860px) {
  .mtc-demo-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ---------- tab bar (segmented control) ---------- */

.mtc-demo-tabbar {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
}

/*
  setActiveTab() in the vendor JS overwrites these three buttons' className
  wholesale (to "badge-secondary category-badges w-inline-block[ w--current]"),
  so any custom class we put in the markup gets clobbered on the very first
  render. Target the stable ids instead, they're never touched by the JS.
*/
#demo-tabbtn-themes-a,
#demo-tabbtn-accessibility-a,
#demo-tabbtn-developers-a {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  flex: 1 1 0;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 0.5rem;
  margin-left: 0 !important;
  border-radius: 0.6rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

#demo-tabbtn-themes-a:hover,
#demo-tabbtn-accessibility-a:hover,
#demo-tabbtn-developers-a:hover {
  background: color-mix(in oklab, var(--surface) 60%, transparent);
}

#demo-tabbtn-themes-a.w--current,
#demo-tabbtn-accessibility-a.w--current,
#demo-tabbtn-developers-a.w--current {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.mtc-demo-tabbar .demo-tabbtn {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
  transition: color 0.15s ease;
}

#demo-tabbtn-themes-a.w--current .demo-tabbtn,
#demo-tabbtn-accessibility-a.w--current .demo-tabbtn,
#demo-tabbtn-developers-a.w--current .demo-tabbtn {
  color: var(--color-brand-600);
}

/*
  Fixed, centered, aspect-ratio-preserving icon slot. The vendor injects three
  differently-proportioned SVGs (40x40, 30x40, 36x34) with hardcoded width/
  height attributes straight into these spans via innerHTML on load; forcing
  them to an identical square with `width/height` in CSS would distort the
  narrower accessibility glyph. Constraining with max-width/max-height instead
  keeps every icon's own aspect ratio while giving all three the same visual
  footprint, which is what actually makes the row read as aligned.
*/
.mtc-demo-tabicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

.mtc-demo-tabicon svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/*
  Icon color, keyed per icon id rather than a blanket "svg path" rule, for two
  reasons found by reading the vendor CSS directly:
  1. The developers icon is a stroke-only line glyph (`fill="none"` on its own
     <svg>, drawn entirely with `stroke`). A shared `fill: var(--muted)` rule
     silently fills it solid, turning a thin "</>" bracket into a dark blob.
  2. The vendor CSS itself ships hover/active color rules scoped to
     `#theme-icon`/`#accessibility-icon`/`#developers-icon` (an id selector),
     which outrank a generic class-based rule on specificity and were winning
     on hover, flashing the icon white against our barely-tinted hover
     background. Matching specificity requires our own id-qualified selectors.
*/
#theme-icon-container svg path,
#accessibility-icon-container svg path {
  fill: var(--muted);
  stroke: none;
  transition: fill 0.15s ease;
}

#developers-icon-container svg path {
  fill: none;
  stroke: var(--muted);
  transition: stroke 0.15s ease;
}

#demo-tabbtn-themes-a:hover #theme-icon-container svg path,
#demo-tabbtn-themes-a.w--current #theme-icon-container svg path,
#demo-tabbtn-accessibility-a:hover #accessibility-icon-container svg path,
#demo-tabbtn-accessibility-a.w--current #accessibility-icon-container svg path {
  fill: var(--color-brand-600);
}

#demo-tabbtn-developers-a:hover #developers-icon-container svg path,
#demo-tabbtn-developers-a.w--current #developers-icon-container svg path {
  stroke: var(--color-brand-600);
}

@media (max-width: 480px) {
  .mtc-demo-tabbar {
    flex-direction: column;
  }
  #demo-tabbtn-themes-a,
  #demo-tabbtn-accessibility-a,
  #demo-tabbtn-developers-a {
    justify-content: flex-start !important;
    padding: 0.7rem 0.75rem;
  }
}

#mtcaptcha-main-demo hr {
  display: none;
}

/* ---------- tab pages (left column) ---------- */

.mtc-demo-tabarea {
  display: flex;
  flex-direction: column;
  /* Top-anchored, not centered: content keeps its position when the shared
     column height changes (see the .mtc-demo-grid note above). */
  justify-content: flex-start;
  gap: 1.1rem;
  min-height: 21rem;
  height: 100%;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.demo-tabpage {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.demo-tabpage-invisible {
  display: none !important;
}

/* Icon + heading pairing reused by the Accessibility and Developers panels,
   so both read as one deliberate design system instead of two ad hoc ones. */
.mtc-demo-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.mtc-demo-panel-title {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.mtc-demo-panel-intro {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--body);
}

#options-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  min-height: 0;
  font-size: 0.9rem;
  margin: 0;
}

/* ---------- unified switch component ---------- */
/*
  Shared by Modern Mini, Invisible Captcha, and the Developers tab's test-mode
  toggle. One track size, one dot size, one alignment model (label on the
  left, switch on the right) everywhere a toggle appears in this widget.
*/
.mtc-switchrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 0 !important;
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}

.mtc-switchrow-label {
  font-weight: 600;
  color: var(--ink);
}

.mtc-switch {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background-color: var(--surface-2);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mtc-switchrow input:checked ~ .mtc-switch {
  background-color: var(--color-brand-600);
  border-color: var(--color-brand-600);
}

.mtc-switchrow:hover input:not(:checked) ~ .mtc-switch {
  border-color: var(--color-brand-500);
}

.mtc-switch:after {
  content: '' !important;
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border: none !important;
  border-radius: 50%;
  background: #fff;
  transform: none !important;
  transition: left 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.mtc-switchrow input:checked ~ .mtc-switch:after {
  left: 18px;
}

/*
  Vendor bug we're exposing, not introducing: `.demo-chkcontainer
  .demo-checkmark:after` draws its checkmark border unconditionally
  (border-color #fcfcfc), relying on it being invisible against the vendor's
  own light-gray unchecked background. Our surface color is darker, so that
  "invisible" mark becomes visible. Hide it explicitly when unchecked.
*/
.demo-chkcontainer input:not(:checked) ~ .demo-checkmark:after {
  border-color: transparent;
}

/* ---------- theme swatches + buttons ---------- */

.theme-name {
  font-size: 0.85rem;
  color: var(--body);
  white-space: nowrap;
}

.mtc-demo-themebtns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mtc-demo-themebtns .category-badges.theme-btn {
  width: auto;
  height: auto;
  flex-direction: row;
  align-items: center;
  padding: 0.5rem 1rem 0.5rem 0.6rem;
  margin-left: 0 !important;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--canvas);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  gap: 0.55rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mtc-demo-themebtns .category-badges.theme-btn:hover {
  border-color: var(--color-brand-500);
}

.mtc-demo-themebtns .category-badges.theme-btn.w--current {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
  color: #fff;
}

/*
  Rounded-square color chips, not circles: a plain filled circle (especially
  Blackmoon's near-black one) reads as an ambiguous bullet or stray dot next
  to a label, not as an intentional color swatch. A chip shape with a visible
  ring reads unambiguously as "this button previews this color."
*/
.mtc-demo-swatch {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.3rem;
  box-shadow: 0 0 0 1px var(--line-strong);
  flex-shrink: 0;
}

.mtc-demo-swatch--standard {
  background: #f5f7fa;
}

.mtc-demo-swatch--neowhite {
  background: #ffffff;
}

.mtc-demo-swatch--blackmoon {
  background: #1a1a1a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.mtc-demo-themebtns .category-badges.theme-btn.w--current .mtc-demo-swatch {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* ---------- fields (select) ---------- */

.mtc-demo-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mtc-demo-fieldlabel {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

/*
  The vendor pins .mtselect to `height: 30px` (mtcaptcha-demo.css). With our
  own vertical padding and Poppins' line box on top of that fixed height, the
  selected option was rendering taller than its own box and getting visually
  cut in half. Height is released to `auto` with a min-height floor so the
  text always has room, whatever the font or zoom level.
*/
.mtselect {
  height: auto;
  min-height: 2.5rem;
  line-height: 1.5;
  border-radius: 0.6rem;
  border: 1px solid var(--line-strong);
  background-color: var(--canvas);
  color: var(--ink);
  padding: 0.5rem 1.9rem 0.5rem 0.7rem;
  font-family: inherit;
  font-size: 0.85rem;
}

.mtselect:focus {
  outline: 2px solid color-mix(in oklab, var(--color-brand-500) 50%, transparent);
  outline-offset: 1px;
}

/* ---------- help / comment text + CTA buttons ---------- */

.demo-comment {
  color: var(--muted);
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  padding: 1rem 1.1rem;
  line-height: 1.6;
  font-size: 0.9rem;
}

.demo-comment p {
  margin: 0 0 0.6rem;
}

.demo-comment p:last-child {
  margin-bottom: 0;
}

.mtc-demo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  background: color-mix(in oklab, var(--color-brand-500) 14%, transparent);
  color: var(--color-brand-600);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.mtc-demo-cta:hover {
  background: color-mix(in oklab, var(--color-brand-500) 22%, transparent);
  transform: translateX(1px);
}

.mtc-demo-cta--filled {
  background: var(--color-brand-600);
  color: #fff;
  align-self: flex-start;
}

.mtc-demo-cta--filled:hover {
  background: var(--color-brand-700, var(--color-brand-600));
}

.mtc-demo-cta-icon {
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
}

/* ---------- accessibility tab ---------- */

.mtc-demo-a11y {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  color: var(--body);
}

.mtc-demo-a11y-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--color-brand-500) 14%, transparent);
  color: var(--color-brand-600);
  flex-shrink: 0;
}

.mtc-demo-a11y-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* Keyboard shortcuts as a short, scannable list instead of one run-on
   sentence stitched together from several translation strings, that read as
   machine-generated filler rather than crafted UI copy. */
.mtc-demo-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mtc-demo-shortcuts li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--body);
}

.mt-keybox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line-strong);
  background: var(--canvas);
  box-shadow: 0 1px 0 var(--line-strong);
  /*
    Monospace on purpose, not an oversight: these are keycaps showing a
    literal keyboard key, and a keycap reads as a key rather than as prose.
    The stack is spelled out rather than left as bare `monospace` so every
    platform renders the same glyphs, matching the stack Tailwind already
    applies to <code> elsewhere on the site. Everything else in this widget
    inherits Poppins.
  */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.mtc-demo-invisible-status {
  margin-top: 0.75rem;
}

.mtc-demo-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.4em;
  border: 2px solid color-mix(in oklab, var(--color-brand-500) 35%, transparent);
  border-top-color: var(--color-brand-600);
  border-radius: 50%;
  vertical-align: -0.15em;
}

.mtc-demo-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--color-brand-600);
  color: #fff;
  font-size: 0.75em;
  vertical-align: -0.1em;
}

/* ---------- developer tab ---------- */

#demo-tabpage-developers {
  gap: 1.1rem !important;
}

.demo-devmodecomments {
  color: var(--body);
}

.demo-devmodecomments > p:first-child {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
}

.demo-devmodecomments code,
.demo-devmodecomments p code {
  background: var(--surface-2);
  border-radius: 0.35rem;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}

/* ---------- live demo screen (right column) ---------- */

/* The right column is a flex chain down to .demo-canvas so it fills the shared
   row height. The login card itself is never stretched, it stays its natural
   vendor size and centers in whatever height the row ends up being. */
.mtc-demo-screen-container {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

/*
  No border, background, or shadow on .demoscreen or .demo-canvas: the vendor
  already renders its own themed card one level down (.demo-loginbox), and
  stacking our own card around it produced the "three layers of background"
  effect, most visible on Blackmoon where a dark card sat inside a light
  vendor canvas inside our own bordered/shadowed frame. Depth now comes from a
  single box-shadow applied directly to .demo-loginbox further down, so there
  is exactly one visible surface per state.
*/
.demoscreen,
.demo-theme-standard .demo-canvas,
.demo-theme-neowhite .demo-canvas,
.demo-theme-blackmoon .demo-canvas {
  background: transparent;
}

.demoscreen {
  width: 100% !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.demo-canvas {
  min-height: 300px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  overflow: visible;
  transition: min-height 0.2s ease;
}

/* Modern Mini's form is much shorter; without this the canvas keeps its full
   min-height and the compact form looks lost in a mostly-empty box. Reading
   the mini state straight off the DOM (:has()) instead of adding a JS hook
   keeps every vendor className assignment untouched. */
.demo-canvas:has(.demo-captchabox-mini) {
  min-height: 190px;
}

/*
  Deliberately NOT adding overflow-x:auto/hidden anywhere in this ancestor
  chain (.demo-loginbox, .demo-captchabox, .demoscreen, .demo-canvas): any of
  them would clip or force-scroll Modern Mini's intentionally-overflowing
  compact layout. Verified via direct measurement that the captcha iframe
  (real width) stays within .demo-loginbox at both mobile (375px) and desktop
  widths; keep re-verifying this after any width change.
*/

.demo-loginbox {
  /* Let the vendor's own responsive max/min-width rules govern this; they're
     already tuned to fit the captcha challenge without clipping. We only
     guarantee the surrounding boxes (above) never squeeze it smaller. */
  margin-inline: auto;
  transition: box-shadow 0.2s ease;
}

/*
  Real mobile clipping, found after a screenshot showed the captcha's audio
  icon, text input, and footer cut off on the right at 375px, even though the
  outer page had zero horizontal scroll (document.scrollWidth === clientWidth).
  That measurement was the wrong check: the captcha itself renders inside a
  cross-origin iframe, so if its own content needs more width than we give
  its container, the overflow happens *inside the iframe's own browsing
  context* and never touches the parent page's scrollWidth at all, while the
  hero section's own `overflow-hidden` (needed for its decorative background
  blobs) visibly clips it. The actual bug was a width *budget* problem: by the
  time you subtract the page gutter (container-page, 24px/side), the hero
  card's own padding, and this canvas's padding, `.demo-loginbox` was only
  reaching vendor's >=371px breakpoint (40px padding + 5px border/side) with
  as little as ~179px left for the captcha itself, well under what the vendor
  designed for. Reclaim width specifically at narrow viewports: the vendor's
  own breakpoints already assume a generous parent, so this overrides its
  padding down near its own <350px bucket instead of the >=371px one a 375px
  screen would otherwise land in.
*/
@media (max-width: 600px) {
  .demo-canvas {
    padding-inline: 0;
  }

  .demo-loginbox,
  .demo-theme-standard .demo-loginbox,
  .demo-theme-neowhite .demo-loginbox,
  .demo-theme-blackmoon .demo-loginbox {
    padding: 14px !important;
    border-width: 2px !important;
  }
}

/*
  Elevation strategy: one box-shadow per (widget theme x site mode) pairing,
  covering all six real combinations instead of a single generic drop shadow.
  Card background colors come entirely from the vendor (white / off-white /
  dark gray); this only ever adds a shadow or a soft outer ring, never a
  second background, so it can't reintroduce the layering problem above.
*/
.demo-theme-standard .demo-loginbox,
.demo-theme-neowhite .demo-loginbox,
.demo-theme-blackmoon .demo-loginbox {
  box-shadow: var(--shadow-lift);
}

/* Neowhite's card is near-white; on a light page it needs a visible outer
   ring or its edges disappear into the page background. */
.demo-theme-neowhite .demo-loginbox {
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lift);
}

/* Neowhite stays a light card in both site modes (it is the vendor's own
   near-white theme, left exactly as shipped). On a dark page it gets a warm
   brand-colored glow so it reads as "lit up," not pasted onto black. */
.dark .demo-theme-neowhite .demo-loginbox {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 25px 60px -18px color-mix(in oklab, var(--color-brand-500) 55%, transparent);
}

/* Dark cards on a dark page (Blackmoon always, Standard once it adopts the
   site's dark surface below) would vanish into the page, so they get a light
   ring rather than a colored glow. On a light page the shared lift shadow
   above is enough. */
.dark .demo-theme-blackmoon .demo-loginbox {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 20px 50px -14px rgba(0, 0, 0, 0.7);
}

/* Standard's dark card sits closer to the page color than Blackmoon's does, so
   it needs a fainter edge; a 0.16 ring reads as a hard white outline here. */
.dark .demo-theme-standard .demo-loginbox {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 20px 50px -14px rgba(0, 0, 0, 0.7);
}

/* ---------- Standard theme follows the site's own light/dark mode ---------- */
/*
  Standard is the demo's default theme and the only one that tracks the host
  page: white card on a light page (the vendor's own look, untouched), and the
  site's dark surface on a dark page, so it doesn't sit there as a white slab.
  Neowhite and Blackmoon are deliberately left exactly as the vendor ships
  them, since those two exist to show the product's own fixed themes.

  The vendor's own rules are `.demo-theme-standard .demo-*` (specificity 0,2,0)
  and some sit inside media queries; adding `.dark` in front (0,3,0) beats them
  everywhere without !important.

  Known limit: the captcha challenge itself renders in a cross-origin iframe
  whose styling comes from `mtcaptchaConfig.theme`, which the vendor's setTheme()
  sets to null (its default light look) for Standard. CSS in this file cannot
  reach inside that iframe, so the challenge block stays light within the
  darkened card. Changing it would mean overriding the vendor's captcha config
  for Standard, which would misrepresent what the product's Standard theme
  actually looks like to a customer evaluating it.
*/
/* The vendor gives this card `border: 5px solid #ffffff`, which is invisible
   on a white page and a glaring white frame on a dark one. It is really just
   inset spacing, so it takes the card's own color rather than being removed
   (removing it would shrink the card and squeeze the captcha). */
.dark .demo-theme-standard .demo-loginbox {
  background-color: var(--surface);
  border-color: var(--surface);
}

.dark .demo-theme-standard .demo-welcomesm {
  color: var(--ink);
}

.dark .demo-theme-standard .demo-label {
  color: var(--muted);
}

.dark .demo-theme-standard .demo-inputtxt {
  background-color: var(--canvas);
  border-color: var(--line-strong);
  color: var(--ink);
}

/*
  Vendor forces the invisible-mode captcha box to a fixed 23px (tall enough
  for just a "verifying..." line). In this demo, invisible mode can still fall
  back to a visible challenge (no real behavioral signal to judge), which then
  overflowed into the Sign In button below. Let it grow instead of overlap.
*/
.demo-captchabox-invisible {
  height: auto !important;
  min-height: 23px;
  margin-bottom: 0.5rem;
}

/* ---------- video modal ---------- */

.mtc-demo-videomodal {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.mtc-demo-videomodal-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(4, 9, 26, 0.72);
  backdrop-filter: blur(2px);
}

.mtc-demo-videomodal .video-mod-box {
  width: 100%;
  max-width: 48rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
}

.mtc-demo-videomodal-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.75rem;
  background: #000;
}

.mt-videoclosebtn {
  border: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0.8;
  cursor: pointer;
}

.mt-videoclosebtn:hover {
  opacity: 1;
}

.mtc-demo-videomodal iframe {
  flex: 1;
  width: 100%;
  border: 0;
}

/* ---------- dark mode (general text colors) ---------- */

.dark .demo-comment,
.dark .demo-chkcontainer,
.dark .theme-name,
.dark .mtc-demo-a11y,
.dark .demo-devmodecomments {
  color: var(--body);
}