/* VJ Business OS Diagnostic Pro — style.css v1.5
   Rules:
   - Navy bg (#0B1F3B) → always white text, explicit on EVERY child
   - Light bg → dark navy text
   - Zero CSS variables — Elementor theme handles fonts/sizes
   - All selectors prefixed vbd- to avoid theme conflicts
*/

/* ── WIDGET SHELL ── */
.vj-bos-pro { max-width:680px; margin:0 auto; padding:0 4px; box-sizing:border-box; }
.vbd-hidden { display:none !important; }
.vbd-screen { animation: vbd-fadeup .35s ease both; }
@keyframes vbd-fadeup { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ── TYPOGRAPHY (no sizes — inherits theme) ── */
.vbd-h2 { font-weight:600; line-height:1.25; margin:0 0 12px; color:#0B1F3B; letter-spacing:-.3px; }
.vbd-section-label { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#C9A84C; margin-bottom:14px; display:block; }
.vbd-step-label    { font-size:11px; font-weight:600; letter-spacing:.1em;  text-transform:uppercase; color:#C9A84C; margin-bottom:8px; display:block; }

/* ── BUTTONS ── */

/* Gold — always readable: gold bg, navy text */
.vbd-btn-gold {
    display:inline-block; background:#C9A84C; color:#0B1F3B;
    padding:14px 30px; border-radius:8px;
    font-size:15px; font-weight:700;
    border:none; cursor:pointer; font-family:inherit;
    text-decoration:none; transition:opacity .2s; white-space:nowrap;
    -webkit-appearance:none;
}
.vbd-btn-gold:hover { opacity:.85; }
.vbd-btn-gold:active { opacity:.75; }

/* Primary — navy bg, white text — ONLY on light backgrounds */
.vbd-btn-primary {
    display:inline-block; background:#0B1F3B; color:#ffffff;
    padding:14px 30px; border-radius:8px;
    font-size:15px; font-weight:600;
    border:none; cursor:pointer; font-family:inherit;
    text-decoration:none; transition:opacity .2s; white-space:nowrap;
    -webkit-appearance:none;
}
.vbd-btn-primary:hover { opacity:.82; }

/* Secondary — white bg, navy border */
.vbd-btn-secondary {
    display:inline-flex; align-items:center; gap:6px;
    background:#ffffff; color:#0B1F3B;
    padding:10px 18px; border-radius:7px;
    font-size:13px; font-weight:500;
    border:1.5px solid #E8E3DC; cursor:pointer; font-family:inherit;
    transition:border-color .15s; white-space:nowrap;
    -webkit-appearance:none;
}
.vbd-btn-secondary:hover { border-color:#0B1F3B; }

/* Link button — white underline, used inside navy card */
.vbd-link-btn {
    background:none; border:none; cursor:pointer; font-family:inherit;
    color:rgba(255,255,255,.38); font-size:12px; text-decoration:underline; padding:0;
    -webkit-appearance:none;
}
.vbd-link-btn:hover { color:rgba(255,255,255,.62); }

/* ── INTRO CARD — navy bg, ALL children white ── */
.vbd-intro-card {
    background:#0B1F3B; border-radius:14px;
    padding:44px 40px; text-align:center; color:#ffffff;
}
/* Override vbd-h2 inside navy card */
.vbd-intro-card .vbd-h2 { color:#ffffff; margin-bottom:12px; }

.vbd-badge {
    display:inline-block;
    background:rgba(201,168,76,.18); color:#C9A84C;
    border:1px solid rgba(201,168,76,.3);
    font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    padding:4px 14px; border-radius:20px; margin-bottom:16px;
}
.vbd-intro-p { font-size:16px; color:rgba(255,255,255,.6); line-height:1.7; margin:0 auto 24px; max-width:460px; font-weight:300; }
.vbd-intro-stats { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.vbd-stat { text-align:center; }
.vbd-stat-n { display:block; font-size:28px; font-weight:700; color:#C9A84C; line-height:1; margin-bottom:2px; }
.vbd-stat-l { font-size:12px; color:rgba(255,255,255,.4); }
.vbd-stat-sep { width:1px; height:32px; background:rgba(255,255,255,.12); flex-shrink:0; }
.vbd-intro-note { font-size:12px; color:rgba(255,255,255,.28); margin:12px 0 0; }

/* ── PROGRESS ── */
.vbd-prog-row { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-top:4px; }
.vbd-prog-bar { flex:1; height:4px; background:#E8E3DC; border-radius:2px; overflow:hidden; }
.vbd-prog-fill { height:100%; background:#0B1F3B; border-radius:2px; width:0; transition:width .4s ease; }
.vbd-prog-txt { font-size:12px; color:#888; white-space:nowrap; font-weight:500; }

/* ── QUESTION CARD ── */
.vbd-q-card { background:#ffffff; border:1px solid #E8E3DC; border-radius:12px; padding:32px 28px; }
.vbd-q-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid #f0ece4; }
.vbd-q-num { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#C9A84C; }
.vbd-q-sys { font-size:13px; font-weight:600; color:#0B1F3B; }
.vbd-q-ctr { font-size:11px; color:#aaa; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; font-weight:500; }
.vbd-q-text { font-size:17px; font-weight:500; line-height:1.55; color:#111; margin:0 0 22px; }

/* Choices */
.vbd-choices { display:flex; flex-direction:column; gap:8px; }
.vbd-choice {
    display:flex; align-items:flex-start; gap:12px; text-align:left;
    background:#ffffff; border:1.5px solid #E5E7EB; border-radius:8px;
    padding:13px 16px; cursor:pointer; font-family:inherit;
    transition:border-color .15s, background .15s; width:100%;
    -webkit-appearance:none;
}
.vbd-choice:hover { border-color:#0B1F3B; background:#fafaf8; }
/* Selected: navy bg — all text white */
.vbd-choice-sel { border-color:#0B1F3B !important; background:#0B1F3B !important; }
.vbd-choice-sel .vbd-choice-alpha { background:rgba(255,255,255,.2) !important; color:#ffffff !important; }
.vbd-choice-sel .vbd-choice-text  { color:#ffffff !important; }
.vbd-choice-alpha {
    width:24px; height:24px; border-radius:50%;
    background:#f0ece4; color:#0B1F3B;
    font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-top:1px;
}
.vbd-choice-text { font-size:14px; color:#444; line-height:1.5; }

/* ── LEAD GATE ── */
.vbd-lead-wrap { padding:8px 0; }
/* Teaser box — navy bg, white text */
.vbd-teaser-box { background:#0B1F3B; border-radius:12px; padding:20px 24px; margin-bottom:28px; text-align:center; }
.vbd-teaser-score { font-size:17px; font-weight:700; color:#C9A84C; margin-bottom:4px; }
.vbd-teaser-gaps  { font-size:14px; color:rgba(255,255,255,.6); margin-bottom:8px; }
.vbd-teaser-hint  { font-size:12px; color:rgba(255,255,255,.35); font-style:italic; }

.vbd-lead-sub { font-size:15px; color:#666; line-height:1.65; margin:0 0 24px; font-weight:300; }
.vbd-lead-form { display:flex; flex-direction:column; gap:18px; }
.vbd-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vbd-field { display:flex; flex-direction:column; gap:5px; }
.vbd-label { font-size:13px; font-weight:500; color:#0B1F3B; }
.vbd-req { color:#C9A84C; }
.vbd-input {
    width:100%; padding:13px 15px; border:1.5px solid #E5E7EB; border-radius:7px;
    font-size:15px; font-family:inherit; color:#111; background:#ffffff;
    box-sizing:border-box; transition:border-color .15s; -webkit-appearance:none;
}
.vbd-input:focus { outline:none; border-color:#0B1F3B; }
.vbd-input::placeholder { color:#bbb; }

/* Pill group */
.vbd-pill-group { display:flex; flex-wrap:wrap; gap:8px; }
.vbd-pill {
    padding:7px 14px; border-radius:20px;
    border:1.5px solid #E5E7EB; background:#ffffff;
    color:#555; font-size:13px; font-family:inherit; cursor:pointer;
    transition:all .15s; -webkit-appearance:none;
}
.vbd-pill:hover { border-color:#0B1F3B; color:#0B1F3B; }
/* Selected pill: navy bg, white text */
.vbd-pill-sel { background:#0B1F3B !important; color:#ffffff !important; border-color:#0B1F3B !important; }

/* Stage cards */
.vbd-stage-cards { display:flex; flex-direction:column; gap:8px; }
.vbd-stage-card {
    display:flex; flex-direction:column; text-align:left; gap:2px;
    background:#ffffff; border:1.5px solid #E5E7EB; border-radius:10px;
    padding:16px 18px; cursor:pointer; font-family:inherit;
    transition:border-color .15s, background .15s; -webkit-appearance:none;
}
.vbd-stage-card:hover { border-color:#0B1F3B; background:#fafaf8; }
/* Selected stage: navy border, light navy bg */
.vbd-stage-sel { border-color:#0B1F3B !important; border-width:2px !important; background:#f0f4f9 !important; }
.vbd-stage-num   { font-size:12px; font-weight:700; color:#C9A84C; letter-spacing:.04em; }
.vbd-stage-title { font-size:14px; font-weight:600; color:#0B1F3B; }
.vbd-stage-desc  { font-size:12px; color:#888; line-height:1.5; margin-top:2px; }

.vbd-error { font-size:13px; color:#dc2626; background:#fef2f2; border:1px solid #fecaca; border-radius:6px; padding:10px 14px; margin-bottom:4px; }
.vbd-form-note { font-size:12px; color:#aaa; }

/* ── RESULTS ── */
.vbd-results-wrap { padding:8px 0; }

/* Score hero */
.vbd-score-hero { display:flex; align-items:center; gap:28px; margin-bottom:32px; flex-wrap:wrap; }
.vbd-ring-wrap  { position:relative; width:130px; height:130px; flex-shrink:0; }
.vbd-ring-svg   { width:130px; height:130px; transform:rotate(-90deg); }
.vbd-ring-bg    { fill:none; stroke:#E8E3DC; stroke-width:9; }
.vbd-ring-fill  { fill:none; stroke:#C9A84C; stroke-width:9; stroke-linecap:round; stroke-dasharray:314; stroke-dashoffset:314; }
.vbd-ring-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; line-height:1; }
.vbd-score-num  { display:block; font-size:36px; font-weight:700; color:#0B1F3B; }
.vbd-score-den  { font-size:14px; color:#aaa; }
.vbd-score-right { flex:1; min-width:180px; }
.vbd-result-hl  { margin-bottom:8px; }
.vbd-result-sum { font-size:15px; color:#555; line-height:1.75; margin:0 0 12px; font-weight:300; }
.vbd-meta-pills { display:flex; gap:8px; flex-wrap:wrap; }
.vbd-meta-pill  { font-size:12px; font-weight:500; padding:3px 10px; border-radius:10px; background:#f0ece4; color:#555; }

.vbd-rpt-actions { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; align-items:center; }
.vbd-share-feedback { font-size:13px; font-weight:500; color:#1D9E75; }

.vbd-section { margin-bottom:28px; }

/* System list */
.vbd-sys-list { border:1px solid #E8E3DC; border-radius:12px; overflow:hidden; background:#ffffff; }
.vbd-sys-row {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:13px 16px; border-bottom:1px solid #f0ece4;
    border-left:3px solid transparent;
}
.vbd-sys-row:last-child { border-bottom:none; }
.vbd-sys-strong { border-left-color:#1D9E75; }
.vbd-sys-mid    { border-left-color:#C9A84C; }
.vbd-sys-weak   { border-left-color:#E24B4A; }
.vbd-sys-row-left  { display:flex; align-items:flex-start; gap:10px; flex:1; min-width:0; }
.vbd-sys-row-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.vbd-sys-num        { font-size:11px; font-weight:700; color:#C9A84C; letter-spacing:.06em; flex-shrink:0; padding-top:2px; }
.vbd-sys-title      { font-size:13px; font-weight:600; color:#0B1F3B; }
.vbd-sys-diag-label { font-size:11px; color:#888; font-style:italic; margin-top:2px; }
.vbd-bar-wrap  { width:72px; height:5px; background:#f0ece4; border-radius:3px; overflow:hidden; }
.vbd-bar-fill  { height:100%; border-radius:3px; }
.vbd-sys-strong .vbd-bar-fill { background:#1D9E75; }
.vbd-sys-mid    .vbd-bar-fill { background:#C9A84C; }
.vbd-sys-weak   .vbd-bar-fill { background:#E24B4A; }
.vbd-sys-score  { font-size:12px; font-weight:700; color:#0B1F3B; min-width:30px; text-align:right; }
.vbd-sys-pill   { font-size:10px; font-weight:600; padding:2px 9px; border-radius:10px; white-space:nowrap; }
.vbd-sys-strong .vbd-sys-pill { background:#dcfce7; color:#166534; }
.vbd-sys-mid    .vbd-sys-pill { background:#fef3c7; color:#92400e; }
.vbd-sys-weak   .vbd-sys-pill { background:#fef2f2; color:#dc2626; }

/* Diagnosis items */
.vbd-diag-list { display:flex; flex-direction:column; gap:10px; }
.vbd-diag-item { background:#fef9f0; border:1px solid rgba(201,168,76,.22); border-radius:10px; padding:20px 22px; }
.vbd-diag-sys-label { display:block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#C9A84C; margin-bottom:3px; }
.vbd-diag-name      { display:block; font-size:16px; font-weight:700; color:#0B1F3B; margin-bottom:10px; }
.vbd-diag-root      { font-size:14px; color:#555; line-height:1.65; margin-bottom:8px; }
.vbd-diag-root strong { color:#0B1F3B; font-weight:600; }
.vbd-diag-action    { font-size:14px; color:#555; line-height:1.65; padding-top:10px; border-top:1px solid rgba(201,168,76,.15); }
.vbd-diag-action strong { color:#0B1F3B; font-weight:600; }

/* Action list */
.vbd-action-list { display:flex; flex-direction:column; }
.vbd-action-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #f0ece4; font-size:14px; color:#444; line-height:1.6; }
.vbd-action-item:last-child { border-bottom:none; }
.vbd-action-num  { font-size:12px; font-weight:700; color:#C9A84C; flex-shrink:0; padding-top:2px; min-width:18px; }
.vbd-action-item strong { color:#0B1F3B; font-weight:500; display:block; margin-bottom:2px; font-size:13px; }

/* ── CTA CARD — navy bg, ALL text white ── */
.vbd-cta-card { background:#0B1F3B; border-radius:14px; padding:36px 32px; text-align:center; }
.vbd-cta-tier { display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#C9A84C; margin:0 0 12px; }
.vbd-cta-h3   { font-size:20px; font-weight:600; color:#ffffff; margin:0 0 10px; line-height:1.3; }
.vbd-cta-p    { font-size:15px; color:rgba(255,255,255,.55); line-height:1.65; margin:0 0 24px; font-weight:300; }
.vbd-cta-note { font-size:12px; color:rgba(255,255,255,.28); margin:14px 0 0; }

/* ── MOBILE ── */
@media (max-width:560px) {
    .vbd-intro-card   { padding:32px 20px; }
    .vbd-q-card       { padding:22px 16px; }
    .vbd-q-text       { font-size:15px; }
    .vbd-field-row    { grid-template-columns:1fr; }
    .vbd-cta-card     { padding:28px 20px; }
    .vbd-diag-item    { padding:16px; }
    .vbd-score-hero   { flex-direction:column; align-items:flex-start; gap:16px; }
    .vbd-bar-wrap     { width:52px; }
    .vbd-rpt-actions  { flex-direction:column; align-items:flex-start; }
}