/*
 * Seraphina conversational scan widget (onboarding step 0).
 * Self-contained and scoped under .ssw so it drops into any section without
 * depending on the host page CSS or Tailwind. Pixel-matched to the mockup
 * seraphina_scan_widget_conversational.html. UK English, no em dashes.
 */

.ssw.ssw[data-seraphina-scan], .ssw.ssw[data-seraphina-scan] * { box-sizing: border-box !important; }

.ssw.ssw[data-seraphina-scan] input, .ssw.ssw[data-seraphina-scan] button, .ssw.ssw[data-seraphina-scan] textarea, .ssw.ssw[data-seraphina-scan] select { -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; outline: none !important; text-transform: none !important; letter-spacing: normal !important; min-height: 0 !important; height: auto !important; border-radius: 0 !important; background-image: none !important; text-shadow: none !important; max-width: none !important; min-width: 0 !important; font: inherit !important; }


.ssw.ssw[data-seraphina-scan] { --ssw-signal:#5B3DF5 !important; --ssw-electric:#7C4DFF !important; --ssw-signalsoft:#ECE8FE !important; --ssw-ink:#15161B !important; --ssw-line:#E6E4F2 !important; --ssw-slate:#52515E !important; --ssw-neg:#C0553C !important; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important; color:var(--ssw-ink) !important; background:#fff !important; border:2px solid var(--ssw-line) !important; border-radius:24px !important; padding:28px !important; box-shadow:0 18px 50px -16px rgba(21,22,27,.22), 0 2px 8px rgba(21,22,27,.05) !important; -webkit-font-smoothing:antialiased !important; text-align:left !important; max-width:640px !important; width:auto !important; margin-left:auto !important; margin-right:auto !important; float:none !important; display:block !important; clear:both !important; position:relative !important; }

@media (min-width:640px){  .ssw.ssw[data-seraphina-scan] { padding:40px !important; }
  }

/* eyebrow */
.ssw.ssw[data-seraphina-scan] .ssw-eyebrow { display:flex !important; align-items:center !important; gap:10px !important; margin-bottom:24px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-eyebrow svg { display:block !important; width:24px !important; height:24px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-eyebrow span { font-family:'IBM Plex Mono',monospace !important; font-size:12px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.16em !important; color:var(--ssw-signal) !important; }


/* the sentence */
.ssw.ssw[data-seraphina-scan] .ssw-sentence { font-size:22px !important; font-weight:800 !important; line-height:1.85 !important; letter-spacing:-0.025em !important; color:var(--ssw-ink) !important; }

@media (min-width:640px){  .ssw.ssw[data-seraphina-scan] .ssw-sentence { font-size:27px !important; }
  }

/* violet inline fields share one underline + violet bold ink */
.ssw.ssw[data-seraphina-scan] .ssw-uline { border-bottom:3px solid var(--ssw-signal) !important; padding-bottom:2px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-name-wrap { position:relative !important; display:inline-block !important; margin:0 4px !important; vertical-align:baseline !important; }

.ssw.ssw[data-seraphina-scan] .ssw-otherwrap { position:relative !important; display:inline-block !important; }

/* Custom placeholder: a real element, not the native ::placeholder, so no host
   theme rule (color, opacity or -webkit-text-fill-color) can override it. */
.ssw.ssw[data-seraphina-scan] .ssw-ph { position:absolute !important; left:0 !important; top:0 !important; width:100% !important; text-align:center !important; pointer-events:none !important; color:rgba(91,61,245,.42) !important; -webkit-text-fill-color:rgba(91,61,245,.42) !important; font-family:inherit !important; font-weight:800 !important; font-size:22px !important; line-height:inherit !important; white-space:nowrap !important; }

@media (min-width:640px){  .ssw.ssw[data-seraphina-scan] .ssw-ph { font-size:27px !important; }
  }
.ssw.ssw[data-seraphina-scan] .ssw-ph.is-hidden { display:none !important; }

.ssw.ssw[data-seraphina-scan] .ssw-vio { background:transparent !important; color:var(--ssw-signal) !important; font-weight:800 !important; text-align:center !important; border:none !important; outline:none !important; font-family:inherit !important; font-size:22px !important; line-height:inherit !important; padding:0 !important; margin:0 !important; }

@media (min-width:640px){  .ssw.ssw[data-seraphina-scan] .ssw-vio { font-size:27px !important; }
  }
/* Force the violet placeholder over any host theme input styles. Vendor
   prefixes are split into separate rules: a browser drops the whole rule if any
   selector in a group is unknown to it. */
.ssw.ssw[data-seraphina-scan] .ssw-vio::placeholder { color:rgba(91,61,245,.42) !important; opacity:1 !important; }

.ssw.ssw[data-seraphina-scan] .ssw-vio::-webkit-input-placeholder { color:rgba(91,61,245,.42) !important; opacity:1 !important; }

.ssw.ssw[data-seraphina-scan] .ssw-vio::-moz-placeholder { color:rgba(91,61,245,.42) !important; opacity:1 !important; }

.ssw.ssw[data-seraphina-scan] .ssw-vio:-ms-input-placeholder { color:rgba(91,61,245,.42) !important; opacity:1 !important; }

.ssw.ssw[data-seraphina-scan] .ssw-vio:-moz-placeholder { color:rgba(91,61,245,.42) !important; opacity:1 !important; }

.ssw.ssw[data-seraphina-scan] .ssw-name { width:150px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-otherinput { width:170px !important; }


/* niche control */
.ssw.ssw[data-seraphina-scan] .ssw-niche { position:relative !important; display:inline-flex !important; align-items:center !important; margin:0 4px !important; vertical-align:baseline !important; }

.ssw.ssw[data-seraphina-scan] .ssw-trigger { display:inline-flex !important; align-items:center !important; gap:4px !important; border:none !important; border-bottom:3px solid var(--ssw-signal) !important; padding:0 0 2px 0 !important; margin:0 !important; background:transparent !important; cursor:pointer !important; font-family:inherit !important; font-size:inherit !important; font-weight:800 !important; line-height:inherit !important; color:var(--ssw-signal) !important; }

.ssw.ssw[data-seraphina-scan] .ssw-value { color:rgba(91,61,245,.6) !important; }

.ssw.ssw[data-seraphina-scan] .ssw-value.is-set { color:var(--ssw-signal) !important; }

.ssw.ssw[data-seraphina-scan] .ssw-trigger svg { display:block !important; width:20px !important; height:20px !important; color:var(--ssw-signal) !important; }

.ssw.ssw[data-seraphina-scan] .ssw-chev { transition:transform .2s ease !important; }

.ssw.ssw[data-seraphina-scan] .ssw-trigger[aria-expanded="true"] .ssw-chev { transform:rotate(180deg) !important; }


.ssw.ssw[data-seraphina-scan] .ssw-othermode { display:none !important; align-items:center !important; gap:8px !important; border-bottom:3px solid var(--ssw-signal) !important; padding-bottom:2px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-othermode.is-on { display:inline-flex !important; }

.ssw.ssw[data-seraphina-scan] .ssw-otherback { background:none !important; border:none !important; padding:0 !important; margin:0 !important; cursor:pointer !important; flex-shrink:0 !important; line-height:0 !important; }

.ssw.ssw[data-seraphina-scan] .ssw-otherback svg { display:block !important; width:16px !important; height:16px !important; color:var(--ssw-slate) !important; }


/* dropdown menu */
.ssw.ssw[data-seraphina-scan] .ssw-menu { display:none !important; position:absolute !important; left:0 !important; top:100% !important; margin-top:12px !important; z-index:99999 !important; width:300px !important; max-width:80vw !important; background:#fff !important; border-radius:16px !important; border:1px solid var(--ssw-line) !important; box-shadow:0 28px 56px -16px rgba(21,22,27,.30), 0 8px 20px rgba(21,22,27,.10) !important; padding:6px !important; text-align:left !important; }

.ssw.ssw[data-seraphina-scan] .ssw-menu.is-open { display:block !important; }

.ssw.ssw[data-seraphina-scan] .ssw-menu:focus { outline:none !important; }

.ssw.ssw[data-seraphina-scan] .ssw-scroll { max-height:240px !important; overflow:auto !important; padding-right:2px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-opt { width:100% !important; text-align:left !important; padding:10px 12px !important; border-radius:12px !important; font-weight:600 !important; font-size:15px !important; color:var(--ssw-ink) !important; background:none !important; border:none !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; font-family:inherit !important; line-height:1.3 !important; }

.ssw.ssw[data-seraphina-scan] .ssw-opt:hover, .ssw.ssw[data-seraphina-scan] .ssw-opt.is-active { background:var(--ssw-signalsoft) !important; }

.ssw.ssw[data-seraphina-scan] .ssw-opt .ssw-tick { width:16px !important; height:16px !important; color:var(--ssw-signal) !important; display:none !important; flex-shrink:0 !important; }

.ssw.ssw[data-seraphina-scan] .ssw-opt.is-selected .ssw-tick { display:block !important; }


.ssw.ssw[data-seraphina-scan] .ssw-otherrow { border-top:1px solid var(--ssw-line) !important; margin-top:4px !important; padding-top:4px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-otheropt { width:100% !important; text-align:left !important; padding:10px 12px !important; border-radius:12px !important; background:none !important; border:none !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; font-family:inherit !important; }

.ssw.ssw[data-seraphina-scan] .ssw-otheropt:hover, .ssw.ssw[data-seraphina-scan] .ssw-otheropt.is-active { background:var(--ssw-signalsoft) !important; }

.ssw.ssw[data-seraphina-scan] .ssw-otheropt .ssw-ol { font-weight:700 !important; color:var(--ssw-signal) !important; font-size:15px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-otheropt .ssw-oh { display:block !important; font-size:12px !important; color:var(--ssw-slate) !important; font-weight:500 !important; margin-top:1px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-otheropt svg { width:16px !important; height:16px !important; color:var(--ssw-signal) !important; flex-shrink:0 !important; }


/* submit */
.ssw.ssw[data-seraphina-scan] .ssw-btn { margin-top:32px !important; width:100% !important; background:var(--ssw-signal) !important; color:#fff !important; font-weight:700 !important; font-size:16px !important; padding:16px 28px !important; border-radius:12px !important; border:none !important; cursor:pointer !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; transition:background .15s ease !important; font-family:inherit !important; }

.ssw.ssw[data-seraphina-scan] .ssw-btn:hover { background:var(--ssw-electric) !important; }

.ssw.ssw[data-seraphina-scan] .ssw-btn svg { display:block !important; width:18px !important; height:18px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-btn[disabled] { opacity:.65 !important; cursor:default !important; }

.ssw.ssw[data-seraphina-scan] .ssw-btn-label { display:inline-flex !important; align-items:center !important; }


/* inline validation, spoken in Seraphina's voice */
.ssw.ssw[data-seraphina-scan] .ssw-msg { margin-top:14px !important; font-size:13px !important; font-weight:500 !important; color:var(--ssw-slate) !important; min-height:1px !important; }

.ssw.ssw[data-seraphina-scan] .ssw-msg.is-err { color:var(--ssw-neg) !important; }


/* keyboard focus: the violet underline carries focus for the inline fields */
.ssw.ssw[data-seraphina-scan] .ssw-vio:focus-visible { outline:none !important; }

.ssw.ssw[data-seraphina-scan] .ssw-trigger:focus-visible, .ssw.ssw[data-seraphina-scan] .ssw-opt:focus-visible, .ssw.ssw[data-seraphina-scan] .ssw-otheropt:focus-visible, .ssw.ssw[data-seraphina-scan] .ssw-otherback:focus-visible, .ssw.ssw[data-seraphina-scan] .ssw-btn:focus-visible { outline:2px solid var(--ssw-signal) !important; outline-offset:2px !important; border-radius:8px !important; }


/* spinner */
.ssw.ssw[data-seraphina-scan] .ssw-spin { display:inline-block !important; width:18px !important; height:18px !important; border-radius:50% !important; border:2px solid rgba(255,255,255,.5) !important; border-top-color:#fff !important; animation:ssw-spin .7s linear infinite !important; }

@keyframes ssw-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){ 
	.ssw.ssw[data-seraphina-scan] .ssw-chev, .ssw.ssw[data-seraphina-scan] .ssw-btn { transition:none !important; }

	.ssw.ssw[data-seraphina-scan] .ssw-spin { animation:none !important; }

 }

/* Strictly centre the widget on screen, over any theme container styles */
.seraphina-surface[data-surface="seraphina_landing"] .sx-wrap,
.seraphina-surface[data-surface="seraphina_scan_widget"] {
	max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important;
	width: auto !important; float: none !important; text-align: left !important;
}
.seraphina-surface[data-surface="seraphina_scan_widget"] { padding: 0 16px !important; }