/* ==========================================================================
   ScamAdvisory UI Component Styles
   Extracted from templates so browsers cache this file across page loads.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout: embed mode & validator state
   -------------------------------------------------------------------------- */
.result-state-hide {
  display: none;
}

@media (max-width: 640px) {
  #validator-container-window {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  #validator-container {
    width: 100% !important;
  }

  #validator-container > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Hero background image overlay opacity */
.opacity-hero {
  opacity: 0.15;
}

/* Safe area bottom for mobile CTAs */
@supports (padding: max(0px)) {
  .safe-bottom {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  }
}

/* --------------------------------------------------------------------------
   Embed mode — "Hide validator" button
   -------------------------------------------------------------------------- */

/* Body: dark gradient background */
body[data-sa-is-embed="true"] {
  background: linear-gradient(135deg, hsl(215 72% 24%) 0%, hsl(215 65% 35%) 50%, hsl(354 70% 54%) 100%) !important;
  min-height: 100vh;
}

/* Embed wrapper: centred, padded */
body[data-sa-is-embed="true"] #embed {
  background: transparent !important;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
}

body[data-sa-is-embed="true"] #validator-container {
  width: 100%;
  max-width: 720px;
}

/* Glass card: solid dark navy — backdrop-blur loses its compositing context
   after the DOM move so we replace it with an opaque dark background */
#validator-glass-card {
  transition: background 0.2s;
}
body[data-sa-is-embed="true"] #validator-glass-card {
  background: hsl(215 72% 18% / 0.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
}

/* Kill any white backgrounds inherited by inner wrappers */
body[data-sa-is-embed="true"] #sa-zoom-wrapper,
body[data-sa-is-embed="true"] #sa-root,
body[data-sa-is-embed="true"] #quick-report,
body[data-sa-is-embed="true"] #sa-root > div {
  background: transparent !important;
}

/* All text: white */
body[data-sa-is-embed="true"] #validator-glass-card * {
  color: rgba(255,255,255,0.9) !important;
}

/* Title */
body[data-sa-is-embed="true"] #validator-glass-card h2 {
  color: #fff !important;
}

/* Kind tabs */
body[data-sa-is-embed="true"] #validator-glass-card .kind-shortcut {
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
}
body[data-sa-is-embed="true"] #validator-glass-card .kind-shortcut:hover {
  color: rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.08) !important;
}
body[data-sa-is-embed="true"] #validator-glass-card .kind-shortcut.is-selected,
body[data-sa-is-embed="true"] #validator-glass-card .kind-shortcut[aria-pressed="true"] {
  color: #fff !important;
  border-bottom-color: #fff !important;
}

/* Info line */
body[data-sa-is-embed="true"] #validator-glass-card #kindInfoLine {
  color: rgba(255,255,255,0.55) !important;
}

/* Input shell: semi-transparent, visible border */
body[data-sa-is-embed="true"] #validator-glass-card .sa-input-shell {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
}
body[data-sa-is-embed="true"] #validator-glass-card .sa-input-shell:focus-within {
  border-color: rgba(255,255,255,0.55) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1) !important;
}

/* Smartbox text + placeholder */
body[data-sa-is-embed="true"] #validator-glass-card #smartbox {
  color: #fbbf24 !important;
  background: transparent !important;
}
body[data-sa-is-embed="true"] #validator-glass-card #smartbox:empty::before {
  content: attr(data-placeholder);
  color: rgba(251,191,36,0.7) !important;
  display: block !important;
}

/* Prefix icon */
body[data-sa-is-embed="true"] #validator-glass-card .sa-input-prefix {
  color: #fbbf24 !important;
}

/* Clear button */
body[data-sa-is-embed="true"] #validator-glass-card .sa-shell-tab-clear {
  background: transparent !important;
  color: rgba(255,255,255,0.55) !important;
  border-left-color: rgba(255,255,255,0.15) !important;
}
body[data-sa-is-embed="true"] #validator-glass-card .sa-shell-tab-clear:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}

/* Check it button: amber */
body[data-sa-is-embed="true"] #validator-glass-card .sa-shell-tab-check {
  background: #f59e0b !important;
  color: #1a1a1a !important;
  border-left-color: rgba(255,255,255,0.15) !important;
}
body[data-sa-is-embed="true"] #validator-glass-card .sa-shell-tab-check:disabled {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.35) !important;
}


/* --------------------------------------------------------------------------
   Snapshot thumbnail overlay
   -------------------------------------------------------------------------- */
.sa-snap-wrap {
  left: auto;
  right: 0.5rem;
  top: calc(var(--spacing, 0.25rem) * 24);
  position: absolute;
}

.sa-snap-thumb {
  width: 50px;
  height: 50px;
  max-width: 50px;
  max-height: 50px;
}

@media (min-width: 768px) {
  .sa-snap-wrap {
    right: calc(var(--spacing, 0.25rem) * 35);
  }

  .sa-snap-thumb {
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
  }
}

/* --------------------------------------------------------------------------
   Smartbox / quick-report component
   -------------------------------------------------------------------------- */

/* ── Kind tab strip ──────────────────────────────────────────────────────── */
#quick-report .kind-shortcut-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  scrollbar-width: none;
}

#quick-report .kind-shortcut-grid::-webkit-scrollbar { display: none; }

#quick-report .kind-shortcut {
  /* Reset all pill/bubble styles */
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.55rem 1rem !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;

  /* Tab appearance */
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 4px solid transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;

  color: rgba(255,255,255,0.5) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  transition: color 0.15s, background 0.15s, border-color 0.15s !important;
  margin-bottom: -1px !important;
}

#quick-report .kind-shortcut:hover {
  color: rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.07) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Active / selected tab — base white underline (overridden per-kind below) */
#quick-report .kind-shortcut.is-selected,
#quick-report .kind-shortcut[aria-pressed="true"],
#quick-report .kind-shortcut.is-active {
  color: #fff !important;
  border-bottom-color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* ── Per-kind coloured underlines ──────────────────────────────────────── */
/* Hover: colour at 50% opacity  |  Active: colour at full opacity          */

/* Auto (search) — slate blue */
#quick-report .kind-shortcut[data-kind=""]:hover                             { border-bottom-color: rgba(148,163,184,0.55) !important; }
#quick-report .kind-shortcut[data-kind=""].is-selected,
#quick-report .kind-shortcut[data-kind=""][aria-pressed="true"]              { border-bottom-color: #94a3b8 !important; }

/* Website — blue */
#quick-report .kind-shortcut[data-kind="url"]:hover                          { border-bottom-color: rgba(96,165,250,0.55) !important; }
#quick-report .kind-shortcut[data-kind="url"].is-selected,
#quick-report .kind-shortcut[data-kind="url"][aria-pressed="true"]           { border-bottom-color: #60a5fa !important; }

/* Email — purple */
#quick-report .kind-shortcut[data-kind="email"]:hover                        { border-bottom-color: rgba(167,139,250,0.55) !important; }
#quick-report .kind-shortcut[data-kind="email"].is-selected,
#quick-report .kind-shortcut[data-kind="email"][aria-pressed="true"]         { border-bottom-color: #a78bfa !important; }

/* Phone — green */
#quick-report .kind-shortcut[data-kind="number"]:hover                       { border-bottom-color: rgba(74,222,128,0.55) !important; }
#quick-report .kind-shortcut[data-kind="number"].is-selected,
#quick-report .kind-shortcut[data-kind="number"][aria-pressed="true"]        { border-bottom-color: #4ade80 !important; }

/* QR — orange */
#quick-report .kind-shortcut[data-kind="qr"]:hover                           { border-bottom-color: rgba(251,146,60,0.55) !important; }
#quick-report .kind-shortcut[data-kind="qr"].is-selected,
#quick-report .kind-shortcut[data-kind="qr"][aria-pressed="true"]            { border-bottom-color: #fb923c !important; }

/* Vehicle — sky */
#quick-report .kind-shortcut[data-kind="vehicle_check"]:hover                { border-bottom-color: rgba(56,189,248,0.55) !important; }
#quick-report .kind-shortcut[data-kind="vehicle_check"].is-selected,
#quick-report .kind-shortcut[data-kind="vehicle_check"][aria-pressed="true"] { border-bottom-color: #38bdf8 !important; }

/* Company — amber */
#quick-report .kind-shortcut[data-kind="company"]:hover                      { border-bottom-color: rgba(251,191,36,0.55) !important; }
#quick-report .kind-shortcut[data-kind="company"].is-selected,
#quick-report .kind-shortcut[data-kind="company"][aria-pressed="true"]       { border-bottom-color: #fbbf24 !important; }

/* Message — teal */
#quick-report .kind-shortcut[data-kind="message"]:hover                      { border-bottom-color: rgba(45,212,191,0.55) !important; }
#quick-report .kind-shortcut[data-kind="message"].is-selected,
#quick-report .kind-shortcut[data-kind="message"][aria-pressed="true"]       { border-bottom-color: #2dd4bf !important; }

/* --------------------------------------------------------------------------
   Mobile overrides: glass palette kept but contrast raised
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #quick-report .mb-5.rounded-xl {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  }

  #quick-report label[for="smartbox"],
  #quick-report #kindInfoLine,
  #quick-report #status,
  #quick-report h1,
  #quick-report h2,
  #quick-report h3,
  #quick-report p,
  #quick-report span {
    color: #f8fafc !important;
  }

  #quick-report #kindBtn {
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  }

  #quick-report .kind-shortcut,
  #quick-report .kind-shortcut[data-kind=""],
  #quick-report .kind-shortcut[data-kind="qr"],
  #quick-report .kind-shortcut[data-kind="vehicle_check"],
  #quick-report .kind-shortcut[data-kind="company"] {
    color: #ffffff !important;
    text-shadow: none !important;
  }

  #quick-report #fieldWrap {
    border: 2px dashed rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14) !important;
  }

  #quick-report #smartbox {
    background: transparent !important;
    color: #f8fafc !important;
  }

  #quick-report #smartbox:empty::before {
    color: rgba(250, 204, 21, 0.92) !important;
    opacity: 1 !important;
    display: block !important;
  }

  #quick-report #chooseBtn,
  #quick-report #chooseBtnMobile,
  #quick-report #clearBtn {
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  }

  #quick-report #submitBtn {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #163d76 !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16) !important;
  }

  #quick-report #submitBtn:disabled {
    background: rgba(255, 255, 255, 0.18) !important;
    color: rgba(15, 23, 42, 0.80) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10) !important;
  }

  body:not([data-sa-is-embed="true"]) #quick-report #smartbox:empty::before {
    content: attr(data-placeholder);
    color: rgba(250, 204, 21, 0.92) !important;
    opacity: 1 !important;
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   Embed mode: same glass treatment
   -------------------------------------------------------------------------- */
body[data-sa-is-embed="true"] #quick-report {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

body[data-sa-is-embed="true"] #quick-report .mb-5.rounded-xl {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
}

body[data-sa-is-embed="true"] #quick-report,
body[data-sa-is-embed="true"] #quick-report h1,
body[data-sa-is-embed="true"] #quick-report h2,
body[data-sa-is-embed="true"] #quick-report h3,
body[data-sa-is-embed="true"] #quick-report p,
body[data-sa-is-embed="true"] #quick-report label,
body[data-sa-is-embed="true"] #quick-report span,
body[data-sa-is-embed="true"] #quick-report #kindInfoLine,
body[data-sa-is-embed="true"] #quick-report #status {
  color: #f8fafc !important;
}

body[data-sa-is-embed="true"] #quick-report #kindBtn {
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
}

body[data-sa-is-embed="true"] #quick-report .kind-shortcut,
body[data-sa-is-embed="true"] #quick-report .kind-shortcut[data-kind=""],
body[data-sa-is-embed="true"] #quick-report .kind-shortcut[data-kind="qr"],
body[data-sa-is-embed="true"] #quick-report .kind-shortcut[data-kind="vehicle_check"],
body[data-sa-is-embed="true"] #quick-report .kind-shortcut[data-kind="company"] {
  color: #ffffff !important;
  text-shadow: none !important;
}

body[data-sa-is-embed="true"] #quick-report #fieldWrap {
  border: 2px dashed rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14) !important;
}

body[data-sa-is-embed="true"] #quick-report #smartbox {
  background: transparent !important;
  color: #f8fafc !important;
}

body[data-sa-is-embed="true"] #quick-report #smartbox:empty::before {
  content: attr(data-placeholder);
  color: rgba(250, 204, 21, 0.92) !important;
  opacity: 1 !important;
  display: block !important;
}

body[data-sa-is-embed="true"] #quick-report #chooseBtn,
body[data-sa-is-embed="true"] #quick-report #chooseBtnMobile,
body[data-sa-is-embed="true"] #quick-report #clearBtn {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
}

body[data-sa-is-embed="true"] #quick-report #submitBtn {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #163d76 !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16) !important;
}

body[data-sa-is-embed="true"] #quick-report #submitBtn:disabled {
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(15, 23, 42, 0.80) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10) !important;
}

body[data-sa-is-embed="true"] #quick-report button svg,
body[data-sa-is-embed="true"] #quick-report button svg path {
  color: currentColor !important;
  stroke: currentColor !important;
}

body[data-sa-is-embed="true"] #quick-report #kindBtnLabel,
body[data-sa-is-embed="true"] #quick-report #submitBtn:not(:disabled),
body[data-sa-is-embed="true"] #quick-report #submitBtn:not(:disabled) span,
body[data-sa-is-embed="true"] #quick-report #submitBtn:not(:disabled) svg,
body[data-sa-is-embed="true"] #quick-report #submitBtn:not(:disabled) svg path {
  color: inherit !important;
}

/* Placeholder text on non-embed, non-mobile */
body:not([data-sa-is-embed="true"]) #quick-report #smartbox:empty::before {
  content: attr(data-placeholder);
  color: #eae58ef0 !important;
  opacity: 1 !important;
  display: block;
}

/* --------------------------------------------------------------------------
   Sidebar menu
   -------------------------------------------------------------------------- */
#sa-sidebar {
  will-change: transform;
}

#sa-sidebar .sa-sidebar-section-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 260ms ease, opacity 220ms ease;
}

#sa-sidebar .sa-sidebar-section-panel.sa-sidebar-section-open {
  opacity: 1;
}

#sa-sidebar .sa-sidebar-chevron {
  transition: transform 220ms ease;
}

#sa-sidebar .sa-sidebar-section-button[aria-expanded="true"] .sa-sidebar-chevron {
  transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Feedback button pulse animation
   -------------------------------------------------------------------------- */
@keyframes sa-feedback-pulse-grow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 15px -3px rgba(127, 29, 29, 0.30), 0 0 0 0 rgba(239, 68, 68, 0.45);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 18px 24px -6px rgba(127, 29, 29, 0.40), 0 0 0 10px rgba(239, 68, 68, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #sa-feedback-open.sa-feedback-pulse-grow {
    animation: none;
  }
}

#sa-feedback-open.sa-feedback-pulse-grow {
  animation: sa-feedback-pulse-grow 1.8s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, box-shadow;
}

/* --------------------------------------------------------------------------
   Theme selector panel background
   -------------------------------------------------------------------------- */
#theme-panel {
  background-color: hsl(var(--popover)) !important;
}

/* --------------------------------------------------------------------------
   Homepage layout
   -------------------------------------------------------------------------- */
#homepage_outer_wrap {
  overflow-x: visible;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#homepage_top_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#homepage_columns {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

#homepage_center_panel,
#homepage_right_panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#homepage_center_panel > div,
#homepage_right_panel > div {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

#homepage_center_panel img,
#homepage_right_panel img,
#homepage_center_panel video,
#homepage_right_panel video,
#homepage_center_panel canvas,
#homepage_right_panel canvas,
#homepage_center_panel svg,
#homepage_right_panel svg,
#homepage_center_panel iframe,
#homepage_right_panel iframe {
  display: block;
  max-width: 100% !important;
  height: auto;
}

#homepage_center_panel table,
#homepage_right_panel table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  #homepage_outer_wrap {
    padding: 0.75rem;
  }

  #homepage_center_panel { order: 1; }
  #homepage_right_panel  { order: 2; }
}

@media (min-width: 768px) {
  #homepage_columns {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  #homepage_center_panel {
    flex: 0 0 calc(70% - 0.375rem);
    max-width: calc(70% - 0.375rem);
    order: 1;
  }

  #homepage_right_panel {
    flex: 0 0 calc(30% - 0.375rem);
    max-width: calc(30% - 0.375rem);
    order: 2;
  }
}

/* Word cloud panels */
.wc-panel.wc-panel-top.wc-panel-empty {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  align-items: flex-start !important;
}

.wc-panel.wc-panel-top.wc-panel-empty,
.wc-panel.wc-panel-top.wc-panel-empty * {
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   Homepage redesign — hero, kind tiles, trust strip
   ========================================================================== */

/* --- Hero --- */
/* --- Hero — below the tool --- */
.sa-hero-below {
  text-align: center;
  padding: 1.5rem 0 2rem;
}

.sa-hero-below .sa-hero-headline {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 0.6rem;
}

.dark .sa-hero-below .sa-hero-headline { color: #f1f5f9; }

.sa-hero-below .sa-hero-sub {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #64748b;
  max-width: 36rem;
  margin: 0 auto;
}

/* --- Kind chips — horizontal scrollable row --- */
/* Tab strip — single row, scrollable on small screens */
.sa-kind-tile-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  scrollbar-width: none; /* Firefox */
}

.sa-kind-tile-grid::-webkit-scrollbar { display: none; }

.sa-kind-tile {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: -1px; /* sits on top of the strip border */
}

.sa-kind-tile:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.06);
}

.sa-kind-tile.is-active,
.sa-kind-tile[aria-pressed="true"],
.sa-kind-tile.is-selected {
  color: #fff;
  border-bottom-color: #fff;
  background: rgba(255,255,255,0.08);
}

.sa-kind-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  stroke-width: 2;
}

/* White card tab overrides */
.sa-white-card .sa-kind-tile-grid {
  border-bottom-color: #e2e8f0 !important;
}

.sa-white-card .sa-kind-tile {
  color: #94a3b8 !important;
  background: transparent !important;
}

.sa-white-card .sa-kind-tile:hover {
  color: #475569 !important;
  background: #f8fafc !important;
}

.sa-white-card .sa-kind-tile.is-active,
.sa-white-card .sa-kind-tile.is-selected {
  color: #16a34a !important;
  border-bottom-color: #16a34a !important;
  background: transparent !important;
}

/* --- Kind info line --- */
.sa-kind-info-line {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  min-height: 1.1rem;
}

/* --- Trust strip — inline text style --- */
.sa-trust-strip { margin-top: 1rem; }

.sa-trust-inline {
  text-align: center;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.8;
  margin: 0;
}

.sa-trust-inline strong { color: #334155; font-weight: 700; }

.sa-trust-sep {
  display: inline-block;
  margin: 0 0.35rem;
  color: #cbd5e1;
}

/* Upload buttons — visibility controlled by inline JS in tools.html */


/* ==========================================================================
   QR / file-upload in-flight fixes
   ========================================================================== */

/* When #preview becomes visible (file selected/early warning active),
   collapse the smartbox form and trust strip so the QR output area
   feels consistent with all other check results                        */
.sa-check-section:has(#preview:not(.hidden)) #scamadvisory_smartstuff,
.sa-check-section:has(#preview:not(.hidden)) .sa-trust-strip {
  display: none;
}

/* Suppress the QR early-warning progress bar entirely.
   The standard sa-modern-spinner fires on form submit instead.        */
#qrEarlyWarning {
  display: none !important;
}




/* ==========================================================================
   saModeModal — professional silver/slate restyle
   IDs and structure unchanged; CSS overrides the Tailwind defaults.

   Selector notes:
     #saModeModal > div > div  =  the card  (.relative.flex > .w-full.max-w-xl)
     > div:first-child          =  header
     > div:nth-child(2)         =  body (desc + notice + timing)
     > div:last-child           =  button row
   ========================================================================== */

/* Backdrop */
#saModeBackdrop {
  background: rgba(10, 14, 20, 0.78);
  backdrop-filter: blur(4px);
}

/* ── Card: single orange border around the entire popup ─────────────────── */
#saModeModal > div > div {
  background: #fff;
  border: 2px solid #f97316 !important;
  border-radius: 1.1rem !important;
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.28),
    0 0 0 5px rgba(249, 115, 22, 0.12);
  overflow: hidden;
  max-width: 32rem;
}

/* Neutralise any borders/shadows the Tailwind classes add to inner sections */
#saModeModal > div > div > div {
  border: none !important;
  box-shadow: none !important;
}

/* ── Header: white, logo left / × right ─────────────────────────────────── */
#saModeModal > div > div > div:first-child {
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 0.6rem 0.75rem 0.6rem 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Render the title element as the SA logo image */
#saModeTitle {
  display: block !important;
  font-size: 0 !important;          /* hide text */
  width: 130px !important;
  height: 28px !important;
  background: url('https://image-checks.scamadvisory.co.uk/static/images/sa.png')
              no-repeat left center !important;
  background-size: contain !important;
  flex-shrink: 0;
}

#saModeClose {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #6b7280 !important;
  width: 2rem !important;
  height: 2rem !important;
  flex-shrink: 0;
}

#saModeClose:hover {
  background: #e5e7eb !important;
  color: #111827 !important;
}

/* ── Body: white, clean readable text ──────────────────────────────────── */
#saModeModal > div > div > div:nth-child(2) {
  background: #fff !important;
  padding: 1.1rem 1.25rem 0.75rem !important;
}

#saModeDesc {
  color: #1e293b !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  background: #fff !important;
}

#saModeDesc p { color: #374151 !important; }

#saModeDesc strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Notice box */
#saModeModal .rounded-xl.border.border-amber-200,
#saModeModal [class*="border-amber"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #4b5563 !important;
  font-size: 0.78rem !important;
  border-radius: 0.65rem !important;
}

#saModeModal .rounded-xl.border.border-amber-200 strong,
#saModeModal [class*="border-amber"] strong {
  color: #111827 !important;
}

/* Timing note */
#saModeModal .text-slate-500,
#saModeModal .text-center.text-sm {
  color: #9ca3af !important;
  font-size: 0.72rem !important;
}

/* ── Button row ─────────────────────────────────────────────────────────── */
#saModeModal .flex.flex-row.gap-2 {
  background: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 0.85rem 1.1rem !important;
}

#saModeStandard {
  background: #e5e7eb !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  font-weight: 600 !important;
  border-radius: 0.55rem !important;
}

#saModeStandard:hover {
  background: #d1d5db !important;
  color: #111827 !important;
}

#saModeAdvanced {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 0.55rem !important;
  box-shadow: 0 2px 8px rgba(30,64,175,0.3) !important;
}

#saModeAdvanced:hover {
  filter: brightness(1.1) !important;
}


/* ==========================================================================
   White card redesign — homepage checker
   ========================================================================== */

/* ── Card wrapper ────────────────────────────────────────────────────────── */
.sa-white-card {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #16a34a;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 24px rgba(15,23,42,.09);
  overflow: hidden;
}

.dark .sa-white-card {
  background: #0f172a;
  border-color: #1e293b;
  border-top-color: #16a34a;
}

.sa-white-card-inner {
  padding: 1.25rem 1.25rem 1rem;
}

@media (min-width: 640px) {
  .sa-white-card-inner { padding: 1.5rem 1.5rem 1.25rem; }
}

/* ── Kind tiles — light pill style overrides glass defaults ──────────────── */
.sa-white-card #quick-report .kind-shortcut {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.sa-white-card #quick-report .kind-shortcut:hover {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  transform: none !important;
}

.sa-white-card #quick-report .kind-shortcut.is-active,
.sa-white-card #quick-report .kind-shortcut[aria-pressed="true"],
.sa-white-card #quick-report .kind-shortcut.is-selected {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(22,163,74,.25) !important;
}

/* kind-specific tint overrides all default to light on white card */
.sa-white-card #quick-report .kind-shortcut[data-kind=""],
.sa-white-card #quick-report .kind-shortcut[data-kind="qr"],
.sa-white-card #quick-report .kind-shortcut[data-kind="vehicle_check"],
.sa-white-card #quick-report .kind-shortcut[data-kind="company"] {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

/* ── Kind info line ─────────────────────────────────────────────────────── */
.sa-white-card .sa-kind-info-line {
  color: #64748b !important;
}

/* ── Input field wrapper ────────────────────────────────────────────────── */
.sa-white-card #fieldWrap {
  border: 1.5px solid #e2e8f0 !important;
  border-style: solid !important;
  border-radius: 0.75rem !important;
  background: #f8fafc !important;
}

.sa-white-card #fieldWrap:focus-within {
  border-color: #16a34a !important;
  background: #fff !important;
}

.sa-white-card #smartbox {
  background: transparent !important;
  color: #1e293b !important;
  min-height: 44px !important;
}

/* ── Proxy submit button ────────────────────────────────────────────────── */
.sa-proxy-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1.25rem;
  border-radius: 0.75rem;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
  min-height: 44px;
  font-family: inherit;
}

.sa-proxy-submit-btn:hover:not(:disabled) { background: #15803d; }

.sa-proxy-submit-btn:disabled {
  background: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Real submitBtn stays in DOM but is invisible — JS still wires to it */
.sa-white-card #submitBtn {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Action grid — minimal on white card ────────────────────────────────── */
.sa-white-card #sa-action-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  margin-top: 0.4rem !important;
  grid-template-columns: none !important;
}

.sa-white-card #clearBtn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  padding: 0.25rem 0.4rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: auto !important;
}

.sa-white-card #clearBtn:hover { color: #475569 !important; }

.sa-white-card #chooseBtnMobile {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── "Or try one:" example pills ───────────────────────────────────────── */
.sa-example-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.sa-example-pills-label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}

.sa-example-pill {
  font-size: 0.72rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  font-family: inherit;
}

.sa-example-pill:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #1e293b;
}

/* ── Mobile overrides for white card ────────────────────────────────────── */
@media (max-width: 640px) {
  .sa-white-card #quick-report label[for="smartbox"],
  .sa-white-card #quick-report #kindInfoLine,
  .sa-white-card #quick-report #status,
  .sa-white-card #quick-report span {
    color: #475569 !important;
  }

  .sa-white-card #fieldWrap {
    background: #f8fafc !important;
    box-shadow: none !important;
  }
}

/* ── Dark mode white card ───────────────────────────────────────────────── */
.dark .sa-white-card #quick-report .kind-shortcut {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

.dark .sa-white-card #quick-report .kind-shortcut.is-active,
.dark .sa-white-card #quick-report .kind-shortcut.is-selected {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}

.dark .sa-white-card #fieldWrap {
  border-color: #334155 !important;
  background: #1e293b !important;
}

.dark .sa-white-card #smartbox { color: #f1f5f9 !important; }


/* ==========================================================================
   Input shell — reference design style
   ========================================================================== */

.sa-input-shell {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 0.875rem;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sa-input-shell:focus-within {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.sa-input-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem 0 1rem;
  color: #16a34a;
  flex-shrink: 0;
}

.sa-prefix-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.sa-field-wrap {
  flex: 1;
  min-width: 0;
}

.sa-smartbox {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.5rem;
  outline: none;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1e293b;
  background: transparent;
}

.sa-smartbox:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}

/* Check it → button inside the shell */
.sa-input-shell .sa-proxy-submit-btn {
  border-radius: 0;
  border-left: 1px solid #e2e8f0;
  min-height: 48px;
  padding: 0 1.25rem;
  font-size: 0.875rem;
}

/* Upload button — inside field wrap, below smartbox text */
.sa-upload-btn {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.45rem;
  border: none;
  border-top: 1px solid #e2e8f0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  /* Do NOT set width:100% — let the button size to its content */
}

.sa-upload-btn:hover {
  background: #f8fafc;
  color: #334155;
}

/* Clear button */
.sa-clear-btn {
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #94a3b8;
  font-size: 0.78rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}

.sa-clear-btn:hover { background: #f1f5f9; color: #475569; }

/* Override fieldWrap styles when inside the new shell */
.sa-input-shell #fieldWrap {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Dark mode shell */
.dark .sa-input-shell {
  background: #1e293b;
  border-color: #334155;
}

.dark .sa-input-shell:focus-within { border-color: #16a34a; }

.dark .sa-smartbox { color: #f1f5f9; }

.dark .sa-input-shell .sa-proxy-submit-btn { border-left-color: #334155; }
.dark .sa-upload-btn { border-top-color: #334155; color: #94a3b8; }
.dark .sa-upload-btn:hover { background: #263244; color: #cbd5e1; }

/* White card context overrides for shell */
.sa-white-card .sa-input-shell {
  border-color: #e2e8f0;
}

.sa-white-card .sa-input-shell:focus-within {
  border-color: #16a34a;
}

.sa-white-card #fieldWrap {
  border: none !important;
  background: transparent !important;
}


/* ==========================================================================
   Landing mode — dark input shell with yellow text
   ========================================================================== */

#validator-container .sa-input-shell {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px);
}

#validator-container .sa-input-shell:focus-within {
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

#validator-container .sa-input-prefix {
  color: #fbbf24;  /* amber-400 */
}

#validator-container .sa-smartbox {
  color: #fbbf24 !important;
}

#validator-container .sa-smartbox:empty::before {
  color: rgba(251, 191, 36, 0.5) !important;
}

#validator-container .sa-upload-btn {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

#validator-container .sa-upload-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

#validator-container .sa-input-shell .sa-proxy-submit-btn {
  border-left-color: rgba(255, 255, 255, 0.15) !important;
}

/* sa-shell-upload: field wrap already grows to fit the inline upload button */


/* ==========================================================================
   Shell tab buttons — Clear and Check it → inside the input shell
   ========================================================================== */

.sa-shell-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.1rem;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  min-height: 46px;
}

/* Clear tab */
.sa-shell-tab-clear {
  color: rgba(255,255,255,0.55);
}

.sa-shell-tab-clear:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}

/* Check it tab */
.sa-shell-tab-check {
  background: #16a34a;
  color: #fff;
  border-left-color: transparent;
  border-radius: 0 0.85rem 0.85rem 0; /* rounds the right end of the shell */
  padding: 0 1.25rem;
}

.sa-shell-tab-check:hover:not(:disabled) {
  background: #15803d;
}

.sa-shell-tab-check:disabled {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.35);
  cursor: not-allowed;
}

/* White card context overrides */
.sa-white-card .sa-shell-tab {
  border-left-color: #e2e8f0;
}

.sa-white-card .sa-shell-tab-clear {
  color: #94a3b8;
}

.sa-white-card .sa-shell-tab-clear:hover {
  background: #f1f5f9;
  color: #475569;
}

.sa-white-card .sa-shell-tab-check:disabled {
  background: #e2e8f0;
  color: #94a3b8;
}


/* ==========================================================================
   Mobile kind picker — "More" tab + bottom sheet
   ========================================================================== */

/* Desktop: show all extra tabs, hide More button */
@media (min-width: 640px) {
  #quick-report .kind-shortcut.sa-kind-tab-extra { display: inline-flex !important; }
  .sa-kind-tab-extra  { display: inline-flex !important; }
  .sa-kind-more-tab   { display: none !important; }
}

/* Mobile: hide extra tabs (using high-specificity selector to beat kind-shortcut rule), show More */
@media (max-width: 639px) {
  #quick-report .kind-shortcut.sa-kind-tab-extra,
  .sa-kind-tab-extra { display: none !important; }
  .sa-kind-more-tab  { display: inline-flex !important; }
}

/* More tab styling — matches the tab strip */
.sa-kind-more-tab {
  color: rgba(255,255,255,0.65) !important;
  font-style: italic;
  letter-spacing: 0.01em;
}

.sa-kind-more-tab:hover {
  color: #fff !important;
}

/* ── Bottom sheet modal ──────────────────────────────────────────────────── */
.sa-more-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.sa-more-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}

.sa-more-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e293b;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0 1rem 2rem;
  animation: sa-sheet-up 0.22s ease-out;
}

@keyframes sa-sheet-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.sa-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 1rem;
}

.sa-more-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f1f5f9;
}

.sa-more-close {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #94a3b8;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}

.sa-more-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* 4-column grid of kind buttons */
.sa-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.sa-more-kind-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}

.sa-more-kind-btn svg {
  width: 1.3rem;
  height: 1.3rem;
  stroke-width: 1.8;
}

.sa-more-kind-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.sa-more-kind-btn:active {
  background: rgba(255,255,255,0.22);
}


/* ==========================================================================
   Mobile-specific layout overrides
   ========================================================================== */

@media (max-width: 639px) {

  /* --- Tabs: equal-width, icon above label --- */
  #quick-report .kind-shortcut {
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.2rem !important;
    padding: 0.5rem 0.4rem !important;
    font-size: 0.68rem !important;
  }

  #quick-report .sa-kind-icon,
  #quick-report .kind-shortcut svg.sa-kind-icon {
    width: 1.15rem !important;
    height: 1.15rem !important;
  }

  /* --- Input shell: wrap into rows --- */
  .sa-input-shell {
    flex-wrap: wrap !important;
    border-radius: 0.75rem !important;
  }

  /* Hide prefix icon — free up width */
  .sa-input-shell #sa-kind-prefix {
    display: none !important;
  }

  /* Input takes full row */
  .sa-input-shell .sa-field-wrap {
    flex: 1 1 100% !important;
    order: 1 !important;
    min-width: 0 !important;
  }

  /* Clear + Check it on same row below input */
  .sa-input-shell .sa-shell-tab-clear {
    flex: 1 !important;
    order: 3 !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    border-bottom-left-radius: 0.75rem !important;
    min-height: 42px !important;
  }

  .sa-input-shell .sa-shell-tab-check {
    flex: 1 !important;
    order: 4 !important;
    border-bottom-right-radius: 0.75rem !important;
    border-radius: 0 0 0.75rem 0 !important;
    min-height: 42px !important;
  }

  .sa-white-card .sa-input-shell .sa-shell-tab-clear,
  .sa-white-card .sa-input-shell .sa-shell-tab-check {
    border-top-color: #e2e8f0 !important;
  }
}


/* ── Full-width report output on mobile ─────────────────────────────────── */
@media (max-width: 639px) {

  #sa-output {
    width: 99% !important;
    max-width: 99% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Flatten every nested wrapper the renderer injects */
  #sa-report-root,
  #sa-report-root > div,
  #sa-report-root > div > div,
  #sa-report-highlight,
  #sa-report-reviews,
  #sa-report-root [class*="max-w-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}