/* WPBravo Security Audit — Public Styles v1.1.0
   All selectors scoped under .wpbsa-wrap or .wpbsa-gate-backdrop
   to prevent theme CSS conflicts.
================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
.wpbsa-wrap,
.wpbsa-gate-backdrop {
  --wpbsa-primary:    #0C447C;
  --wpbsa-primary-l: #E6F1FB;
  --wpbsa-danger:    #E24B4A;
  --wpbsa-danger-l:  #FCEBEB;
  --wpbsa-warning:   #BA7517;
  --wpbsa-warning-l: #FAEEDA;
  --wpbsa-success:   #3B6D11;
  --wpbsa-success-l: #EAF3DE;
  --wpbsa-border:    #e2e2e0;
  --wpbsa-shadow:    0 2px 12px rgba(0,0,0,.08);
  --wpbsa-radius:    10px;
}

/* ── Wrap ───────────────────────────────────────────────────── */
.wpbsa-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 48px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}
.wpbsa-wrap *,
.wpbsa-wrap *::before,
.wpbsa-wrap *::after { box-sizing: border-box; }

/* ── Panels ─────────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-panel { }
.wpbsa-wrap .wpbsa-panel--hidden,
.wpbsa-gate-backdrop.wpbsa-panel--hidden { display: none !important; }

/* ── Hero ───────────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-hero { text-align: center; padding: 40px 0 28px; }
.wpbsa-wrap .wpbsa-hero__title {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  color: #111 !important;
  margin: 0 0 10px;
  line-height: 1.25;
}
.wpbsa-wrap .wpbsa-hero__sub {
  font-size: 16px;
  color: #666 !important;
  margin: 0;
  line-height: 1.6;
}

/* ── URL Form ───────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-url-form {
  background: #fff;
  border: 1px solid var(--wpbsa-border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--wpbsa-shadow);
}
.wpbsa-wrap .wpbsa-url-row { display: flex; gap: 10px; }

.wpbsa-wrap .wpbsa-input {
  flex: 1;
  padding: 13px 16px;
  border: 1.5px solid var(--wpbsa-border) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  color: #111 !important;
  background: #fafafa !important;
  outline: none;
  transition: border-color .15s;
  box-shadow: none !important;
  width: 100%;
}
.wpbsa-wrap .wpbsa-input:focus {
  border-color: var(--wpbsa-primary) !important;
  background: #fff !important;
}
.wpbsa-wrap .wpbsa-url-form__note {
  font-size: 12px;
  color: #999 !important;
  margin: 10px 0 0;
  text-align: center;
}

/* ── Buttons — high-specificity to beat theme resets ─────────── */
.wpbsa-wrap .wpbsa-btn,
.wpbsa-gate-backdrop .wpbsa-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  border: none !important;
  outline: none;
  transition: opacity .15s, transform .1s;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.4;
  box-shadow: none !important;
}
.wpbsa-wrap .wpbsa-btn:hover,
.wpbsa-gate-backdrop .wpbsa-btn:hover { opacity: .87; transform: translateY(-1px); }
.wpbsa-wrap .wpbsa-btn:active,
.wpbsa-gate-backdrop .wpbsa-btn:active { transform: translateY(0); }

/* Primary */
.wpbsa-wrap .wpbsa-btn--primary,
.wpbsa-gate-backdrop .wpbsa-btn--primary {
  background: var(--wpbsa-primary) !important;
  color: #ffffff !important;
}
/* Danger */
.wpbsa-wrap .wpbsa-btn--danger,
.wpbsa-gate-backdrop .wpbsa-btn--danger {
  background: var(--wpbsa-danger) !important;
  color: #ffffff !important;
}
/* Ghost */
.wpbsa-wrap .wpbsa-btn--ghost,
.wpbsa-gate-backdrop .wpbsa-btn--ghost {
  background: transparent !important;
  color: var(--wpbsa-primary) !important;
  border: 1.5px solid var(--wpbsa-primary) !important;
}
/* Ghost hover — keep readable */
.wpbsa-wrap .wpbsa-btn--ghost:hover,
.wpbsa-gate-backdrop .wpbsa-btn--ghost:hover {
  background: var(--wpbsa-primary-l) !important;
}
/* Sizes */
.wpbsa-wrap .wpbsa-btn--lg,
.wpbsa-gate-backdrop .wpbsa-btn--lg { padding: 15px 28px; font-size: 16px !important; }
.wpbsa-wrap .wpbsa-btn--full,
.wpbsa-gate-backdrop .wpbsa-btn--full { width: 100%; justify-content: center; }
.wpbsa-wrap .wpbsa-btn[disabled],
.wpbsa-gate-backdrop .wpbsa-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.wpbsa-wrap .wpbsa-btn__arrow { transition: transform .15s; }
.wpbsa-wrap .wpbsa-btn:hover .wpbsa-btn__arrow { transform: translateX(3px); }

/* ── Error ──────────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-error,
.wpbsa-gate-backdrop .wpbsa-error {
  background: var(--wpbsa-danger-l);
  color: var(--wpbsa-danger) !important;
  border: 1px solid #f09595;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 12px;
}

/* ── Check chips ────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-checks-preview { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 24px 0 8px; }
.wpbsa-wrap .wpbsa-check-chip {
  background: var(--wpbsa-primary-l);
  color: var(--wpbsa-primary) !important;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 99px;
  font-weight: 500;
}

/* ── Scanning loader ────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-scanning { text-align: center; padding: 60px 20px; }
.wpbsa-wrap .wpbsa-scanning__ring { position: relative; display: inline-block; width: 100px; height: 100px; }
.wpbsa-wrap .wpbsa-ring-svg { width: 100px; height: 100px; transform: rotate(-90deg); }
.wpbsa-wrap .wpbsa-ring-track    { fill: none; stroke: #eee; stroke-width: 5; }
.wpbsa-wrap .wpbsa-ring-progress {
  fill: none;
  stroke: var(--wpbsa-primary);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 175.9;
  stroke-dashoffset: 175.9;
  transition: stroke-dashoffset .4s ease;
}
.wpbsa-wrap .wpbsa-scanning__pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  color: var(--wpbsa-primary) !important;
}
.wpbsa-wrap .wpbsa-scanning__label { font-size: 18px; font-weight: 600; color: #222 !important; margin: 20px 0 6px; }
.wpbsa-wrap .wpbsa-scanning__url   { font-size: 13px; color: #888 !important; margin: 0 0 20px; }
.wpbsa-wrap .wpbsa-scanning__steps { font-size: 12px; color: #aaa !important; line-height: 2; }

/* ── Score Hero ─────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-score-hero {
  display: flex; align-items: center; gap: 28px;
  background: #fff;
  border: 1px solid var(--wpbsa-border);
  border-radius: 14px; padding: 28px;
  margin-bottom: 16px;
  box-shadow: var(--wpbsa-shadow);
  flex-wrap: wrap;
}
.wpbsa-wrap .wpbsa-score-ring { position: relative; flex-shrink: 0; width: 100px; height: 100px; }
.wpbsa-wrap .wpbsa-score-svg  { width: 100%; height: 100%; transform: rotate(-90deg); }
.wpbsa-wrap .wpbsa-score-track { fill: none; stroke: #eee; stroke-width: 6; }
.wpbsa-wrap .wpbsa-score-arc  {
  fill: none; stroke: var(--wpbsa-primary);
  stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .8s ease, stroke .4s ease;
}
.wpbsa-wrap .wpbsa-score-arc.is-critical { stroke: var(--wpbsa-danger); }
.wpbsa-wrap .wpbsa-score-arc.is-poor     { stroke: var(--wpbsa-warning); }
.wpbsa-wrap .wpbsa-score-arc.is-good     { stroke: var(--wpbsa-success); }
.wpbsa-wrap .wpbsa-score-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.wpbsa-wrap .wpbsa-score-number { font-size: 26px; font-weight: 800; color: #111 !important; line-height: 1; }
.wpbsa-wrap .wpbsa-score-label  { font-size: 11px; color: #aaa !important; }
.wpbsa-wrap .wpbsa-score-grade  { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.wpbsa-wrap .wpbsa-score-url    { font-size: 13px; color: #888 !important; margin-bottom: 10px; word-break: break-all; }

/* ── Summary chips ──────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-summary-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wpbsa-wrap .wpbsa-chip         { font-size: 12px; padding: 4px 12px; border-radius: 99px; font-weight: 600; }
.wpbsa-wrap .wpbsa-chip--critical { background: var(--wpbsa-danger-l);  color: #791F1F !important; }
.wpbsa-wrap .wpbsa-chip--warning  { background: var(--wpbsa-warning-l); color: #412402 !important; }
.wpbsa-wrap .wpbsa-chip--pass     { background: var(--wpbsa-success-l); color: #173404 !important; }

/* ── Blurred results ────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-results-blur-wrap {
  position: relative;
  background: #fff;
  border: 1px solid var(--wpbsa-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--wpbsa-shadow);
}
.wpbsa-wrap .wpbsa-blur-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; height: 70%;
  background: linear-gradient(transparent, rgba(255,255,255,.97) 35%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 32px;
}
.wpbsa-wrap .wpbsa-blur-cta       { text-align: center; max-width: 380px; padding: 0 20px; }
.wpbsa-wrap .wpbsa-blur-cta__title { font-size: 18px; font-weight: 700; color: #111 !important; margin: 0 0 8px; }
.wpbsa-wrap .wpbsa-blur-cta__sub   { font-size: 14px; color: #666 !important; margin: 0 0 18px; }

/* ── Results list ───────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-results-list { padding: 12px; }
.wpbsa-wrap .wpbsa-result {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 12px; border-radius: 8px;
  margin-bottom: 6px; border: 1px solid transparent;
}
.wpbsa-wrap .wpbsa-result--critical { background: var(--wpbsa-danger-l);  border-color: #f7c1c1; }
.wpbsa-wrap .wpbsa-result--warning  { background: var(--wpbsa-warning-l); border-color: #fac775; }
.wpbsa-wrap .wpbsa-result--info     { background: var(--wpbsa-primary-l); border-color: #b5d4f4; }
.wpbsa-wrap .wpbsa-result--pass     { background: var(--wpbsa-success-l); border-color: #c0dd97; }
.wpbsa-wrap .wpbsa-result__left  { display: flex; gap: 10px; align-items: flex-start; flex: 1; min-width: 0; }
.wpbsa-wrap .wpbsa-result__icon  { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; margin-top: 1px; }
.wpbsa-wrap .wpbsa-result--pass     .wpbsa-result__icon { color: var(--wpbsa-success) !important; font-weight: 700; }
.wpbsa-wrap .wpbsa-result--critical .wpbsa-result__icon { color: var(--wpbsa-danger)  !important; font-weight: 700; }
.wpbsa-wrap .wpbsa-result--warning  .wpbsa-result__icon { color: var(--wpbsa-warning) !important; font-weight: 700; }
.wpbsa-wrap .wpbsa-result__body  { flex: 1; min-width: 0; }
.wpbsa-wrap .wpbsa-result__name  { display: block; font-size: 13px; font-weight: 600; color: #111 !important; margin-bottom: 3px; }
.wpbsa-wrap .wpbsa-result__details { font-size: 12px; color: #555 !important; margin: 0 0 5px; line-height: 1.5; }
.wpbsa-wrap .wpbsa-result__rec   { font-size: 12px; color: #444 !important; margin: 0; background: rgba(255,255,255,.6); padding: 6px 8px; border-radius: 5px; line-height: 1.5; }
.wpbsa-wrap .wpbsa-rec-label     { font-weight: 600; color: #222 !important; margin-right: 4px; }

/* ── Badges ─────────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-badge,
.wpbsa-gate-backdrop .wpbsa-badge {
  font-size: 10px; padding: 3px 8px;
  border-radius: 99px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  border: none !important;
}
.wpbsa-wrap .wpbsa-badge--critical { background: var(--wpbsa-danger)  !important; color: #fff !important; }
.wpbsa-wrap .wpbsa-badge--warning  { background: var(--wpbsa-warning) !important; color: #fff !important; }
.wpbsa-wrap .wpbsa-badge--info     { background: var(--wpbsa-primary) !important; color: #fff !important; }
.wpbsa-wrap .wpbsa-badge--pass     { background: var(--wpbsa-success) !important; color: #fff !important; }

/* ── Deep banner ─────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-deep-banner {
  display: flex; align-items: center; gap: 14px;
  background: var(--wpbsa-warning-l);
  border: 1px solid #fac775;
  border-radius: 12px; padding: 16px 20px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.wpbsa-wrap .wpbsa-deep-banner__icon { font-size: 24px; flex-shrink: 0; }
.wpbsa-wrap .wpbsa-deep-banner__text { flex: 1; min-width: 180px; }
.wpbsa-wrap .wpbsa-deep-banner__text strong { display: block; font-size: 14px; color: #412402 !important; margin-bottom: 3px; }
.wpbsa-wrap .wpbsa-deep-banner__text span   { font-size: 12px; color: #633806 !important; }

/* ── Upsell CTAs ─────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-upsell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; border-radius: 12px; padding: 18px 22px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.wpbsa-wrap .wpbsa-upsell--danger { background: var(--wpbsa-danger-l);  border: 1px solid #f7c1c1; }
.wpbsa-wrap .wpbsa-upsell--info   { background: var(--wpbsa-primary-l); border: 1px solid #b5d4f4; }
.wpbsa-wrap .wpbsa-upsell__text   { flex: 1; min-width: 200px; }
.wpbsa-wrap .wpbsa-upsell__text strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.wpbsa-wrap .wpbsa-upsell--danger .wpbsa-upsell__text strong { color: #791F1F !important; }
.wpbsa-wrap .wpbsa-upsell--info   .wpbsa-upsell__text strong { color: #0C447C !important; }
.wpbsa-wrap .wpbsa-upsell__text span { font-size: 13px; color: #555 !important; }

/* ── Category sections ──────────────────────────────────────── */
.wpbsa-wrap .wpbsa-category {
  background: #fff; border: 1px solid var(--wpbsa-border);
  border-radius: 14px; margin-bottom: 12px;
  overflow: hidden; box-shadow: var(--wpbsa-shadow);
}
.wpbsa-wrap .wpbsa-category__title {
  font-size: 14px; font-weight: 700; color: #222 !important;
  padding: 14px 16px; background: #fafafa;
  border-bottom: 1px solid var(--wpbsa-border);
  margin: 0; display: flex; align-items: center; gap: 10px;
}
.wpbsa-wrap .wpbsa-category__badge {
  background: var(--wpbsa-danger) !important;
  color: #fff !important;
  font-size: 11px; padding: 2px 8px; border-radius: 99px;
}
.wpbsa-wrap .wpbsa-category .wpbsa-results-list { padding: 8px 10px; }
.wpbsa-wrap .wpbsa-category .wpbsa-result { margin-bottom: 4px; }

/* ── Report header ───────────────────────────────────────────── */
.wpbsa-wrap.wpbsa-report .wpbsa-report__header {
  display: flex; align-items: center; gap: 28px;
  background: #fff; border: 1px solid var(--wpbsa-border);
  border-radius: 14px; padding: 28px;
  margin-bottom: 16px; box-shadow: var(--wpbsa-shadow); flex-wrap: wrap;
}
.wpbsa-wrap.wpbsa-report .wpbsa-score-ring--lg { width: 120px; height: 120px; }
.wpbsa-wrap.wpbsa-report .wpbsa-score-ring--lg .wpbsa-score-svg { width: 120px; height: 120px; }
.wpbsa-wrap.wpbsa-report .wpbsa-report__grade  { font-size: 22px; font-weight: 800; color: #111 !important; margin: 0 0 4px; }
.wpbsa-wrap.wpbsa-report .wpbsa-report__url    { font-size: 13px; color: #888 !important; margin: 0 0 6px; word-break: break-all; }
.wpbsa-wrap.wpbsa-report .wpbsa-report__date   { font-size: 12px; color: #aaa !important; margin: 0 0 12px; }
.wpbsa-wrap.wpbsa-report .wpbsa-score-meta     { flex: 1; min-width: 180px; }

/* ── Bottom CTA ─────────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-bottom-cta {
  text-align: center; background: var(--wpbsa-primary-l);
  border: 1px solid #b5d4f4; border-radius: 14px;
  padding: 28px; margin-bottom: 20px;
}
.wpbsa-wrap .wpbsa-bottom-cta h3 { font-size: 20px; font-weight: 700; color: var(--wpbsa-primary) !important; margin: 0 0 10px; }
.wpbsa-wrap .wpbsa-bottom-cta p  { font-size: 14px; color: #555 !important; margin: 0 0 20px; }
.wpbsa-wrap .wpbsa-bottom-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Scan another ───────────────────────────────────────────── */
.wpbsa-wrap .wpbsa-scan-another { text-align: center; padding: 12px 0; }

/* ── Gate Modal ─────────────────────────────────────────────── */
.wpbsa-gate-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 999990;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wpbsa-gate-backdrop .wpbsa-gate-modal {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 480px; max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.wpbsa-gate-backdrop .wpbsa-gate-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--wpbsa-border);
}
.wpbsa-gate-backdrop .wpbsa-gate-modal__header h3 {
  margin: 0; font-size: 18px; font-weight: 700; color: #111 !important;
}
.wpbsa-gate-backdrop .wpbsa-gate-close {
  background: none; border: none; font-size: 18px;
  cursor: pointer; color: #888 !important; padding: 4px 8px;
  border-radius: 4px;
}
.wpbsa-gate-backdrop .wpbsa-gate-close:hover { background: #f5f5f5; color: #333 !important; }
.wpbsa-gate-backdrop .wpbsa-gate-modal__body { padding: 24px; }
.wpbsa-gate-backdrop .wpbsa-gate-score-row {
  display: flex; align-items: center; gap: 14px;
  background: #f9f9f9; border-radius: 10px; padding: 14px; margin-bottom: 16px;
}
.wpbsa-gate-backdrop .wpbsa-gate-score-badge {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wpbsa-danger-l); color: var(--wpbsa-danger) !important;
  font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wpbsa-gate-backdrop .wpbsa-gate-score-text strong { display: block; font-size: 14px; color: #111 !important; margin-bottom: 2px; }
.wpbsa-gate-backdrop .wpbsa-gate-score-text span   { font-size: 12px; color: #666 !important; }
.wpbsa-gate-backdrop .wpbsa-gate-modal__note { font-size: 13px; color: #888 !important; margin: 0 0 18px; text-align: center; }

/* Form fields inside gate */
.wpbsa-gate-backdrop .wpbsa-field { margin-bottom: 14px; }
.wpbsa-gate-backdrop .wpbsa-field label {
  display: block; font-size: 13px; font-weight: 600;
  color: #333 !important; margin-bottom: 5px;
}
.wpbsa-gate-backdrop .wpbsa-field .wpbsa-input { width: 100%; }

/* Responsive */
@media (max-width: 540px) {
  .wpbsa-wrap .wpbsa-url-row              { flex-direction: column; }
  .wpbsa-wrap .wpbsa-score-hero           { flex-direction: column; align-items: flex-start; }
  .wpbsa-wrap.wpbsa-report .wpbsa-report__header { flex-direction: column; align-items: flex-start; }
  .wpbsa-wrap .wpbsa-upsell              { flex-direction: column; }
  .wpbsa-wrap .wpbsa-deep-banner         { flex-direction: column; }
  .wpbsa-wrap .wpbsa-bottom-cta__btns   { flex-direction: column; align-items: center; }
}