/*
 * Visibility Check widget.
 * Typography inherits from the embedding theme. Brand colors are CSS
 * variables and can be overridden by the theme on the .vch element.
 */
.vch {
  --vch-primary: #02b7b3;
  --vch-accent: #f8cb29;
  --vch-text: #1a1a1a;
  --vch-muted: #444;
  --vch-faint: #6b6b6b;
  --vch-soft: #8a8a8a;
  --vch-border: #e8e8e4;
  --vch-surface: #f9f9f7;
  --vch-surface-alt: #f5f5f2;
  --vch-card: #fff;
  --vch-error: #e24b4a;
  --vch-kicker-font: 'Barlow Condensed', inherit;
  --vch-size-body: 15px;
  --vch-size-small: 14px;
  --vch-size-tiny: 13px;
  --vch-size-title: 18px;
  --vch-size-intro: 22px;
}
.vch *, .vch *::before, .vch *::after { box-sizing: border-box; margin: 0; padding: 0; }
.vch { font-family: inherit; color: var(--vch-text); line-height: 1.6; }
.vch button { font-family: inherit; }

.vch .vch-card {
  max-width: 800px; height: 600px; margin: 0 auto;
  background: var(--vch-surface); border-radius: 20px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Top bar */
.vch .vch-topbar { background: var(--vch-card); padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--vch-border); flex-shrink: 0; }
.vch .vch-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 0.75rem; flex-wrap: wrap; }
.vch .vch-brand-logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.vch .vch-brand-name { font-size: var(--vch-size-small); font-weight: 600; }
.vch .vch-kicker { font-family: var(--vch-kicker-font); font-size: var(--vch-size-small); font-weight: 600; color: var(--vch-primary); letter-spacing: 0.09em; text-transform: uppercase; }
.vch .vch-progress { display: flex; align-items: center; gap: 12px; }
.vch .vch-progress-track { flex: 1; background: var(--vch-border); border-radius: 99px; height: 6px; }
.vch .vch-progress-fill { height: 6px; border-radius: 99px; background: var(--vch-primary); transition: width 0.4s ease; width: 0%; }
.vch .vch-progress-label { font-size: var(--vch-size-tiny); color: var(--vch-faint); white-space: nowrap; }

/* Screens */
.vch .vch-body { flex: 1; overflow-y: auto; padding: 1.75rem; }
.vch .vch-screen { display: none; }
.vch .vch-screen.is-active { display: block; }

/* Intro */
.vch .vch-intro { text-align: center; padding: 1.5rem 0; }
.vch .vch-intro-title { font-size: var(--vch-size-intro); font-weight: 700; margin-bottom: 0.5rem; line-height: 1.3; color: var(--vch-text); }
.vch .vch-intro-text { font-size: calc(var(--vch-size-body) + 1px); color: var(--vch-muted); line-height: 1.65; max-width: 480px; margin: 0 auto 1.5rem; }
.vch .vch-btn-start {
  display: inline-block; background: var(--vch-primary); color: #fff;
  font-size: calc(var(--vch-size-body) + 1px); font-weight: 700; padding: 14px 38px; border-radius: 999px;
  border: none; cursor: pointer; transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.vch .vch-btn-start:hover { opacity: 0.92; }
.vch .vch-btn-start:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

/* Question */
.vch .vch-q-kicker { font-family: var(--vch-kicker-font); font-size: var(--vch-size-small); font-weight: 600; color: var(--vch-primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.vch .vch-q-title { font-size: var(--vch-size-title); font-weight: 700; line-height: 1.4; margin-bottom: 0.25rem; }
.vch .vch-q-category { font-size: var(--vch-size-tiny); color: var(--vch-faint); margin-bottom: 0.85rem; }
.vch .vch-q-text { font-size: var(--vch-size-body); color: var(--vch-muted); line-height: 1.65; margin-bottom: 0.75rem; }
.vch .vch-examples-toggle { background: none; border: none; font-size: var(--vch-size-small); color: var(--vch-primary); cursor: pointer; padding: 0; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 4px; }
.vch .vch-examples { display: none; background: #f0f0ed; border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.vch .vch-examples.is-open { display: block; }
.vch .vch-examples ul { padding-left: 1.1rem; }
.vch .vch-examples li { font-size: var(--vch-size-small); color: var(--vch-muted); line-height: 1.8; }
.vch .vch-q-check { font-size: var(--vch-size-small); font-style: italic; color: var(--vch-faint); border-left: 3px solid var(--vch-accent); padding-left: 0.75rem; margin-bottom: 1.25rem; }
.vch .vch-answers { display: flex; gap: 10px; }
.vch .vch-btn-no, .vch .vch-btn-yes { flex: 1; padding: 13px; border-radius: 999px; font-size: var(--vch-size-body); font-weight: 600; cursor: pointer; border: 2px solid; transition: all 0.2s; }
.vch .vch-btn-no { border-color: #ddd; color: #555; background: var(--vch-card); }
.vch .vch-btn-no:hover { border-color: #787979; background: var(--vch-surface-alt); }
.vch .vch-btn-yes { border-color: var(--vch-primary); color: var(--vch-primary); background: var(--vch-card); }
.vch .vch-btn-yes:hover { background: rgba(2, 183, 179, 0.07); }

/* Result */
.vch .vch-score-ring { width: 120px; height: 120px; margin: 0 auto 1.25rem; position: relative; }
.vch .vch-score-ring svg { transform: rotate(-90deg); }
.vch .vch-score-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.vch .vch-score-value { font-size: 26px; font-weight: 700; }
.vch .vch-score-label { font-size: 12px; color: var(--vch-faint); }
.vch .vch-result-title { font-size: var(--vch-size-title); font-weight: 700; text-align: center; margin-bottom: 0.4rem; }
.vch .vch-result-text { font-size: var(--vch-size-small); color: var(--vch-muted); line-height: 1.6; text-align: center; margin-bottom: 1.25rem; }
.vch .vch-result-cols { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.vch .vch-result-col { flex: 1; background: var(--vch-surface-alt); border-radius: 12px; padding: 0.85rem; }
.vch .vch-result-col-title { font-family: var(--vch-kicker-font); font-size: var(--vch-size-tiny); font-weight: 700; color: var(--vch-faint); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.vch .vch-result-item { display: flex; align-items: center; gap: 8px; font-size: var(--vch-size-small); padding: 5px 0; border-bottom: 1px solid var(--vch-border); }
.vch .vch-result-item:last-child { border-bottom: none; }
.vch .vch-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vch .vch-dot--yes { background: var(--vch-primary); }
.vch .vch-dot--no { background: var(--vch-accent); }

/* Opt-in */
.vch .vch-optin { background: var(--vch-card); border: 1.5px solid var(--vch-border); border-radius: 14px; padding: 1.25rem; margin-top: 0.5rem; }
.vch .vch-optin-title { font-size: calc(var(--vch-size-body) + 1px); font-weight: 700; margin-bottom: 0.35rem; line-height: 1.4; color: var(--vch-text); }
.vch .vch-optin-text { font-size: var(--vch-size-small); color: var(--vch-muted); line-height: 1.55; margin-bottom: 0.75rem; }
.vch .vch-optin-form { display: flex; gap: 8px; flex-wrap: wrap; }
.vch .vch-input {
  flex: 1; min-width: 140px; padding: 14px 20px; border-radius: 999px;
  border: 1.5px solid #ccc; background: var(--vch-card); font-size: var(--vch-size-body);
  color: var(--vch-text); font-family: inherit; outline: none; transition: border-color 0.2s;
}
.vch .vch-input:focus { border-color: var(--vch-primary); }
.vch .vch-input.is-invalid { border-color: var(--vch-error); }
.vch .vch-btn-send {
  padding: 14px 28px; border-radius: 999px; background: var(--vch-primary); color: #fff;
  font-size: var(--vch-size-body); font-weight: 700; border: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22); transition: opacity 0.15s, transform 0.1s;
}
.vch .vch-btn-send:hover { opacity: 0.92; }
.vch .vch-btn-send:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22); }
.vch .vch-optin-note { font-size: 12px; color: var(--vch-soft); margin-top: 6px; width: 100%; }
.vch .vch-optin-success { display: none; text-align: center; padding: 1rem; background: rgba(2, 183, 179, 0.1); border-radius: 12px; color: var(--vch-primary); font-size: var(--vch-size-body); font-weight: 600; margin-top: 0.5rem; }
.vch .vch-error { font-size: var(--vch-size-tiny); color: var(--vch-error); display: none; width: 100%; margin-top: 2px; }
.vch .vch-captcha { width: 100%; }
.vch .vch-captcha altcha-widget { font-size: var(--vch-size-tiny); --altcha-max-width: 100%; }
/* Honeypot: kept out of sight and out of tab order, but present for bots. */
.vch .vch-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.vch .vch-btn-restart { background: none; border: none; color: var(--vch-soft); font-size: var(--vch-size-tiny); cursor: pointer; text-decoration: underline; margin-top: 0.75rem; display: block; }

/* Mobile: card grows with content, no inner scrolling */
@media (max-width: 640px) {
  .vch .vch-card { height: auto; min-height: 0; overflow: visible; }
  .vch .vch-body { overflow-y: visible; padding: 1.25rem; }
  .vch .vch-topbar { padding: 1rem 1.25rem; }
  .vch .vch-result-cols { flex-direction: column; gap: 0.75rem; }
  .vch .vch-optin-form { flex-direction: column; }
  .vch .vch-input { width: 100%; min-width: 0; }
  .vch .vch-btn-send { width: 100%; }
  .vch .vch-answers { flex-direction: column; }
  .vch .vch-intro-title { font-size: calc(var(--vch-size-intro) - 3px); }
  .vch .vch-q-title { font-size: calc(var(--vch-size-title) - 2px); }
}