/* ============================================================
   DWD Breach Check — matches the dwd-glass theme.
   Uses theme variables with fallbacks so it also works elsewhere.
   ============================================================ */
.dwd-bc {
  --bc-teal: var(--teal, #00D4AA);
  --bc-purple: var(--purple, #7B2FBE);
  --bc-red: var(--red, #FF4757);
  --bc-amber: var(--amber, #FFAB00);
  --bc-text: var(--text, #E8E8F0);
  --bc-dim: var(--text-dim, #8888A0);
  --bc-muted: var(--text-muted, #7C7C96);
  --bc-glass: var(--glass, rgba(255,255,255,0.04));
  --bc-border: var(--glass-border, rgba(255,255,255,0.08));
  --bc-font: var(--font, system-ui, sans-serif);
  --bc-mono: var(--mono, ui-monospace, monospace);
  /* Follow the theme's light/dark tokens when present (dwd-glass). */
  --bc-input: var(--input-bg, rgba(255,255,255,0.05));
  --bc-tint: var(--tint-1, rgba(255,255,255,0.03));
  --bc-tint-2: var(--tint-2, rgba(255,255,255,0.05));
  --bc-fill: var(--teal-fill, #00D4AA);
  --bc-fill-end: var(--teal-fill-end, #00B894);
  --bc-on-fill: var(--on-teal, #000);
  --bc-err-text: #ffb3ba;
  --bc-warn-text: #ffd98a;
  --bc-sens-text: #ff8a95;
  --bc-card-shadow: var(--card-shadow, none);
  margin: 32px 0 48px;
  font-family: var(--bc-font);
  color: var(--bc-text);
  line-height: 1.6;
}

[data-theme="light"] .dwd-bc {
  --bc-err-text: #A3172A;
  --bc-warn-text: #7A4200;
  --bc-sens-text: #B3203A;
}

/* Neutralise article typography inside the widget (div. outranks .article-content) */
div.dwd-bc p { margin: 0; color: inherit; line-height: 1.6; }
div.dwd-bc ul, div.dwd-bc ol { margin: 0; padding: 0; list-style: none; }
div.dwd-bc li { margin: 0; line-height: 1.6; }
div.dwd-bc li::marker { content: none; }

/* ---------- Form card ---------- */
.dwd-bc-form {
  position: relative; overflow: hidden;
  background: var(--bc-glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bc-border);
  border-radius: 20px; padding: 40px;
  box-shadow: var(--bc-card-shadow);
}
.dwd-bc-form::before {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%; pointer-events: none;
  background: radial-gradient(circle at 25% 35%, rgba(123,47,190,0.10) 0%, transparent 45%),
              radial-gradient(circle at 75% 65%, rgba(0,212,170,0.07) 0%, transparent 45%);
}
.dwd-bc-form > * { position: relative; }

.dwd-bc-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
.dwd-bc-head-icon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  color: var(--bc-teal);
  background: linear-gradient(135deg, rgba(0,212,170,0.15), rgba(123,47,190,0.15));
  border: 1px solid rgba(0,212,170,0.25);
  box-shadow: 0 0 24px rgba(0,212,170,0.12);
}
.dwd-bc .dwd-bc-title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--bc-text); }
.dwd-bc .dwd-bc-sub { font-size: 14px; color: var(--bc-dim); margin-top: 4px; }

.dwd-bc-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--bc-dim); margin-bottom: 8px;
}

.dwd-bc-inputrow { display: flex; gap: 12px; margin-bottom: 20px; }
.dwd-bc input[type="email"],
.dwd-bc input[type="text"] {
  width: 100%; min-width: 0;
  background: var(--bc-input);
  border: 1px solid var(--bc-border); border-radius: 12px;
  padding: 15px 18px; color: var(--bc-text);
  font-size: 15px; font-family: var(--bc-font);
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.dwd-bc input::placeholder { color: var(--bc-muted); }
.dwd-bc input:focus { border-color: var(--bc-teal); box-shadow: 0 0 0 3px rgba(0,212,170,0.12); }
.dwd-bc input.is-error { border-color: var(--bc-red); }

.dwd-bc-submit {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--bc-fill), var(--bc-fill-end));
  border: none; border-radius: 12px; padding: 0 28px;
  color: var(--bc-on-fill); font-size: 15px; font-weight: 700; font-family: var(--bc-font);
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.dwd-bc-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,212,170,0.25); }
.dwd-bc-submit:focus-visible { outline: 2px solid var(--bc-teal); outline-offset: 3px; }
.dwd-bc-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.dwd-bc-submit .dwd-bc-arrow { transition: transform 0.2s; }
.dwd-bc-submit:hover .dwd-bc-arrow { transform: translateX(2px); }
.dwd-bc-form.is-loading .dwd-bc-arrow { animation: dwd-bc-spin 0.9s linear infinite; }
@keyframes dwd-bc-spin { to { transform: rotate(360deg); } }

/* ---------- Captcha ---------- */
.dwd-bc-captcha { margin-bottom: 20px; }
.dwd-bc-captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dwd-bc-captcha-img img {
  display: block; width: 240px; max-width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--bc-border);
}
.dwd-bc .dwd-bc-captcha input[type="text"] {
  width: 150px; font-family: var(--bc-mono); font-weight: 700;
  font-size: 18px; letter-spacing: 4px; text-transform: uppercase;
}
.dwd-bc-refresh {
  background: transparent; border: 1px solid var(--bc-border); border-radius: 10px;
  color: var(--bc-dim); font: 600 13px var(--bc-font); padding: 10px 14px; cursor: pointer;
}
.dwd-bc-refresh:hover { color: var(--bc-teal); border-color: var(--bc-teal); }
div.dwd-bc .dwd-bc-hint { font-size: 13px; color: var(--bc-muted); margin-top: 8px; }

div.dwd-bc .dwd-bc-pow {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--bc-dim); margin: -6px 0 16px;
}
div.dwd-bc .dwd-bc-pow[hidden] { display: none; }
.dwd-bc-pow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bc-amber); box-shadow: 0 0 8px var(--bc-amber);
}
.dwd-bc-pow.is-done::before { background: var(--bc-teal); box-shadow: 0 0 8px var(--bc-teal); }

.dwd-bc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

div.dwd-bc .dwd-bc-privacy { font-size: 12.5px; color: var(--bc-muted); }
.dwd-bc-privacy svg { color: var(--bc-teal); vertical-align: -2px; margin-right: 4px; }

div.dwd-bc a {
  color: var(--bc-teal); text-decoration: none;
  border-bottom: 1px solid rgba(0,212,170,0.3);
}
div.dwd-bc a:hover { border-bottom-color: var(--bc-teal); }

/* ---------- Results ---------- */
/* Land below the sticky header when scrolled to (anchor or JS). */
.dwd-bc, .dwd-bc-result { scroll-margin-top: 88px; }
/* Programmatic focus target only — never show the theme's focus ring. */
div.dwd-bc .dwd-bc-result:focus,
div.dwd-bc .dwd-bc-result:focus-visible { outline: none; box-shadow: none; }
.dwd-bc-result:not(:empty) { margin-top: 24px; }
.dwd-bc-result.is-entering > * { animation: dwd-bc-enter 0.45s ease-out both; }
.dwd-bc-result.is-entering > *:nth-child(2) { animation-delay: 0.06s; }
.dwd-bc-result.is-entering > *:nth-child(3) { animation-delay: 0.12s; }
.dwd-bc-result.is-entering > *:nth-child(4) { animation-delay: 0.18s; }
.dwd-bc-result.is-entering > *:nth-child(n+5) { animation-delay: 0.24s; }
@keyframes dwd-bc-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Scanning state */
.dwd-bc-loading {
  display: flex; align-items: center; gap: 18px;
  padding: 24px 28px; border-radius: 20px;
  background: var(--bc-glass); border: 1px solid rgba(0,212,170,0.25);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: relative; overflow: hidden;
  animation: dwd-bc-enter 0.3s ease-out both;
}
.dwd-bc-loading-radar {
  position: relative; flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(0,212,170,0.35);
  background:
    radial-gradient(circle, var(--bc-teal) 0 2.5px, transparent 3px),
    radial-gradient(circle, transparent 0 10px, rgba(0,212,170,0.25) 10.5px 11px, transparent 11.5px 19px, rgba(0,212,170,0.18) 19.5px 20px, transparent 20.5px),
    rgba(0,212,170,0.06);
}
.dwd-bc-loading-radar::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0,212,170,0.55), rgba(0,212,170,0) 70deg, transparent 360deg);
  animation: dwd-bc-spin 1.6s linear infinite;
}
.dwd-bc-loading-body { flex: 1 1 auto; min-width: 0; }
div.dwd-bc .dwd-bc-loading-title { font-size: 16px; font-weight: 700; color: var(--bc-text); overflow-wrap: anywhere; }
div.dwd-bc .dwd-bc-loading-title strong { color: var(--bc-teal); font-weight: 700; }
div.dwd-bc .dwd-bc-loading-step { font-size: 13.5px; color: var(--bc-dim); margin-top: 2px; }
.dwd-bc-loading-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden;
  background: rgba(0,212,170,0.08);
}
.dwd-bc-loading-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 35%;
  background: linear-gradient(90deg, transparent, var(--bc-teal), transparent);
  animation: dwd-bc-bar 1.4s ease-in-out infinite;
}
@keyframes dwd-bc-bar { from { left: -35%; } to { left: 100%; } }

.dwd-bc-alert {
  border-radius: 14px; padding: 16px 20px; font-size: 14.5px;
  border: 1px solid var(--bc-border); background: var(--bc-glass);
}
.dwd-bc-alert.is-error { border-color: rgba(255,71,87,0.35); background: rgba(255,71,87,0.08); color: var(--bc-err-text); }
.dwd-bc-alert.is-warn  { border-color: rgba(255,171,0,0.35); background: rgba(255,171,0,0.08); color: var(--bc-warn-text); }
.dwd-bc-alert strong { color: var(--bc-text); }

.dwd-bc-summary {
  display: flex; gap: 18px; align-items: flex-start;
  border-radius: 20px; padding: 28px 32px;
  border: 1px solid var(--bc-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.dwd-bc-summary.is-found { background: linear-gradient(135deg, rgba(255,71,87,0.12), rgba(123,47,190,0.08)); border-color: rgba(255,71,87,0.35); }
.dwd-bc-summary.is-clean { background: linear-gradient(135deg, rgba(0,212,170,0.12), rgba(123,47,190,0.06)); border-color: rgba(0,212,170,0.35); }
.dwd-bc-summary-icon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
}
.is-found .dwd-bc-summary-icon { color: var(--bc-red); background: rgba(255,71,87,0.12); box-shadow: 0 0 28px rgba(255,71,87,0.2); }
.is-clean .dwd-bc-summary-icon { color: var(--bc-teal); background: rgba(0,212,170,0.12); box-shadow: 0 0 28px rgba(0,212,170,0.2); }
.dwd-bc .dwd-bc-summary-title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
div.dwd-bc .dwd-bc-summary-text { font-size: 14.5px; color: var(--bc-dim); margin-top: 4px; }

.dwd-bc-block {
  margin-top: 16px; padding: 24px 28px; border-radius: 16px;
  background: var(--bc-glass); border: 1px solid var(--bc-border);
}
div.dwd-bc .dwd-bc-block-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--bc-muted); margin-bottom: 14px;
}

.dwd-bc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dwd-bc-chip {
  font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: var(--bc-tint-2); border: 1px solid var(--bc-border); color: var(--bc-dim);
}
.dwd-bc-chip.is-sensitive { color: var(--bc-sens-text); background: rgba(255,71,87,0.10); border-color: rgba(255,71,87,0.3); }
.dwd-bc-chip-n { font-family: var(--bc-mono); font-size: 11px; opacity: 0.75; }
.dwd-bc-chips.is-small { margin-top: 14px; gap: 6px; }
.dwd-bc-chips.is-small .dwd-bc-chip { font-size: 12px; padding: 3px 10px; }

.dwd-bc-advice { counter-reset: tip; display: grid; gap: 12px; }
.dwd-bc-advice li {
  counter-increment: tip; position: relative;
  padding: 14px 16px 14px 52px; border-radius: 12px;
  background: var(--bc-tint); border: 1px solid var(--bc-border);
}
.dwd-bc-advice li::before {
  content: counter(tip); position: absolute; left: 14px; top: 14px;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--bc-mono);
  color: var(--bc-teal); background: rgba(0,212,170,0.12);
}
.dwd-bc-advice li.is-high::before { color: var(--bc-red); background: rgba(255,71,87,0.12); }
.dwd-bc-advice li.is-medium::before { color: var(--bc-amber); background: rgba(255,171,0,0.12); }
.dwd-bc-advice strong { display: block; font-size: 15px; color: var(--bc-text); }
.dwd-bc-advice span { display: block; font-size: 14px; color: var(--bc-dim); margin-top: 2px; }

.dwd-bc-breaches { display: grid; gap: 12px; }
.dwd-bc-breach {
  padding: 18px 20px; border-radius: 14px;
  background: var(--bc-tint); border: 1px solid var(--bc-border);
  transition: border-color 0.2s, background 0.2s;
}
.dwd-bc-breach:hover { border-color: rgba(0,212,170,0.25); background: var(--bc-tint-2); }
.dwd-bc-breach-head { display: flex; gap: 14px; align-items: center; }
.dwd-bc-logo {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  object-fit: contain; background: #fff; padding: 4px;
}
.dwd-bc-logo.is-letter {
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: linear-gradient(135deg, rgba(123,47,190,0.35), rgba(0,212,170,0.25));
  color: var(--bc-text); font-weight: 800; font-size: 18px;
}
.dwd-bc-breach-meta { flex: 1 1 auto; min-width: 0; }
.dwd-bc .dwd-bc-breach-title { font-size: 16px; font-weight: 700; color: var(--bc-text); }
.dwd-bc .dwd-bc-breach-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--bc-muted); }
.dwd-bc-flags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dwd-bc-flag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  padding: 3px 8px; border-radius: 6px;
  color: var(--bc-amber); background: rgba(255,171,0,0.10); border: 1px solid rgba(255,171,0,0.25);
}
.dwd-bc-flag.is-red { color: var(--bc-red); background: rgba(255,71,87,0.10); border-color: rgba(255,71,87,0.3); }

.dwd-bc-desc { margin-top: 12px; font-size: 14px; color: var(--bc-dim); }
.dwd-bc-desc summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--bc-dim);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.dwd-bc-desc summary::-webkit-details-marker { display: none; }
.dwd-bc-desc summary::before { content: '▸'; color: var(--bc-teal); transition: transform 0.2s; }
.dwd-bc-desc[open] summary::before { transform: rotate(90deg); }
.dwd-bc-desc summary:hover { color: var(--bc-teal); }
.dwd-bc-desc > div { margin-top: 8px; line-height: 1.7; }

div.dwd-bc .dwd-bc-source { font-size: 12.5px; color: var(--bc-muted); margin-top: 16px; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .dwd-bc-form { padding: 26px 20px; }
  .dwd-bc-inputrow { flex-direction: column; }
  .dwd-bc-submit { justify-content: center; padding: 15px 28px; }
  .dwd-bc-summary { padding: 22px 20px; gap: 14px; }
  .dwd-bc-block { padding: 20px 18px; }
  .dwd-bc-breach-head { flex-wrap: wrap; }
  .dwd-bc-flags { width: 100%; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .dwd-bc *, .dwd-bc *::before { animation: none !important; transition: none !important; }
}