/* ============================================================
   STAN VENTURES — VENDOR SCORECARD QUIZ
   Standalone stylesheet. Drop into any page.
   Depends on: Google Fonts (Roboto + Montserrat) — loaded below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap');

/* Brand variables the quiz needs.
   If your page already defines these (e.g. on :root), you can delete this block. */
.quiz-sec {
    --primary-orange: #f15a24;
    --dark-blue: #1A2B47;
    --text-dark: #15141D;
    --text-grey: #475467;
}

/* ============ VENDOR QUIZ STYLES ============ */
.quiz-sec { background: #f0f4f8; position: relative; overflow: hidden; padding: 50px 0; font-family: 'Roboto', sans-serif; color: var(--text-dark); }
.quiz-sec * { box-sizing: border-box; }
.quiz-sec .quiz-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.quiz-sec .quiz-heading { text-align: center; margin-bottom: 24px; }
.quiz-sec .quiz-heading h2 {
    font-family: 'Montserrat', sans-serif; font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.2;
    color: var(--dark-blue); margin: 0 0 12px 0;
}
.quiz-sec .quiz-heading p {
    font-size: 1.0625rem; color: var(--text-grey);
    max-width: 800px; margin: 0 auto; line-height: 1.55;
}

.quiz-wrapper {
    background: white; border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.12);
    overflow: hidden; max-width: 1100px; margin: 0 auto;
    min-height: min(680px, calc(100vh - 180px)); position: relative;
    border: 1px solid rgba(0,0,0,0.04);
}
.quiz-screen { display: none; padding: 36px 50px; animation: quizFade 0.4s ease; min-height: min(680px, calc(100vh - 180px)); box-sizing: border-box; }
.quiz-screen.active { display: flex; flex-direction: column; }
#screen-quiz.active { justify-content: flex-start; }
#screen-start.active, #screen-email.active { justify-content: center; }
#screen-results.active { justify-content: flex-start; min-height: auto; }
@keyframes quizFade { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }

/* Start Screen */
.quiz-start-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items:center; }
.quiz-pill {
    display:inline-block; background:#fff5f2; color: var(--primary-orange);
    font-size:12px; font-weight:700; padding:6px 14px; border-radius:50px;
    text-transform:uppercase; letter-spacing:0.5px; margin-bottom:20px;
    border:1px solid rgba(241,90,36,0.2);
}
.quiz-start-title {
    font-family:'Montserrat',sans-serif; font-size: clamp(1.625rem, 3vw, 2rem);
    font-weight:800; color: var(--dark-blue); margin-bottom:15px; line-height:1.25;
}
.quiz-start-desc { color: var(--text-grey); font-size:16px; margin-bottom:25px; line-height:1.6; }
.quiz-feature-list { list-style:none; padding:0; margin:0 0 30px 0; }
.quiz-feature-list li {
    display:flex; gap:14px; align-items:flex-start; padding:10px 0;
    border-bottom: 1px solid #f0f4f8;
}
.quiz-feature-list li:last-child { border-bottom:none; }
.qf-icon { flex-shrink:0; width:38px; height:38px; background:#fff5f2; border-radius:8px; display:flex !important; align-items:center; justify-content:center; line-height:0; }
.qf-icon svg { width:20px; height:20px; fill:none; stroke: var(--primary-orange); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.quiz-feature-list strong { display:block; color: var(--dark-blue); font-size:15px; font-weight:700; margin-bottom:2px; }
.quiz-feature-list span:not(.qf-icon) { display:block; color: var(--text-grey); font-size:13px; }
.quiz-cta-btn {
    background: var(--primary-orange); color:white; padding:16px 32px;
    border-radius:10px; font-weight:800; font-size:16px; border:none; cursor:pointer;
    transition:all 0.3s; box-shadow:0 6px 20px rgba(241,90,36,0.3);
    font-family:'Roboto',sans-serif; display:inline-block; text-decoration:none;
}
.quiz-cta-btn:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(241,90,36,0.4); }
.quiz-cta-btn.primary { background: var(--primary-orange); color:white; }
.quiz-cta-btn.secondary {
    background:transparent; color:var(--dark-blue);
    border:2px solid #d5d8e2; box-shadow:none;
}
.quiz-cta-btn.secondary:hover { border-color:var(--primary-orange); color:var(--primary-orange); transform:translateY(-2px); }
.quiz-tiny-print { font-size:12px; color:#94a3b8; margin-top:12px; }

.quiz-start-form { margin-top: 5px; }
.quiz-gate-selects {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px;
}
.quiz-gate-selects .quiz-form-label { margin-top: 0; }
.quiz-gate-selects select {
    width: 100%; padding: 13px 16px;
    border: 1px solid #e2e8f0; border-radius: 8px;
    background: #f8fafc; font-size: 14px; font-family: 'Roboto', sans-serif;
    color: var(--text-dark); cursor: pointer; outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 36px;
    transition: border-color 0.2s;
}
.quiz-gate-selects select:focus { background:white; border-color: var(--primary-orange); box-shadow: 0 0 0 3px rgba(241,90,36,0.1); }
.quiz-gate-selects select:invalid { color: #94a3b8; }
.quiz-gate-selects select option { color: var(--text-dark); }
.quiz-gate-selects select.error { border-color: #ef4444; background:#fef2f2; }
.quiz-start-input-row {
    display: flex; gap: 10px; align-items: stretch;
    background: white; border: 2px solid #e2e8f0; border-radius: 12px;
    padding: 6px; transition: border-color 0.2s;
}
.quiz-start-input-row:focus-within { border-color: var(--primary-orange); box-shadow: 0 0 0 4px rgba(241,90,36,0.08); }
.quiz-start-input-row input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 12px 14px; font-size: 15px; font-family: 'Roboto', sans-serif;
    color: var(--text-dark); min-width: 0;
}
.quiz-start-input-row input::placeholder { color: #94a3b8; }
.quiz-start-input-row .quiz-cta-btn {
    padding: 12px 22px; font-size: 14px; flex-shrink: 0; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(241,90,36,0.25);
}
.quiz-start-input-row.error { border-color: #ef4444; }
.quiz-start-input-row.error:focus-within { box-shadow: 0 0 0 4px rgba(239,68,68,0.08); }

.quiz-start-visual { display:flex; justify-content:center; }
.quiz-preview-card {
    background:white; border:1px solid #e2e8f0; border-radius:14px;
    padding:24px; width:100%; max-width:340px;
    box-shadow:0 15px 40px rgba(26,43,71,0.1);
}
.qpc-header { display:flex; align-items:center; gap:8px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid #f1f5f9; }
.qpc-dots { display:flex; gap:5px; }
.qpc-dots span { width:9px; height:9px; border-radius:50%; background:#ef4444; }
.qpc-dots span:nth-child(2){background:#f59e0b;} .qpc-dots span:nth-child(3){background:#10b981;}
.qpc-label { font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; }
.qpc-score-mock { text-align:center; margin-bottom:24px; }
.qpc-circle {
    width:120px; height:120px; border-radius:50%; margin:0 auto 12px;
    background:conic-gradient(#f59e0b 0deg 169deg, #f1f5f9 169deg 360deg);
    display:flex; align-items:center; justify-content:center; position:relative;
}
.qpc-circle::before { content:""; position:absolute; inset:8px; background:white; border-radius:50%; }
.qpc-num { position:relative; font-size:36px; font-weight:900; color:var(--dark-blue); font-family:'Montserrat',sans-serif; }
.qpc-of { position:relative; font-size:14px; color:#94a3b8; font-weight:600; margin-top:18px; }
.qpc-tag { display:inline-block; background:#fef3c7; color:#92400e; font-size:12px; font-weight:700; padding:4px 12px; border-radius:50px; }
.qpc-bars { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.qpc-bar { display:grid; grid-template-columns: 70px 1fr 45px; align-items:center; gap:10px; }
.qpc-bar > span { font-size:12px; font-weight:600; color:#475467; }
.qpc-bar div { background:#f1f5f9; height:6px; border-radius:3px; overflow:hidden; }
.qpc-bar i { display:block; height:100%; border-radius:3px; }
.qpc-bar strong { font-size:11px; color:var(--dark-blue); font-weight:700; text-align:right; }
.qpc-foot { display:block; text-align:center; font-size:11px; color:#94a3b8; font-style:italic; }

/* Quiz Screen */
.quiz-progress-wrap { margin-bottom:24px; }
.quiz-progress-meta { display:flex; justify-content:space-between; margin-bottom:10px; font-size:13px; }
.quiz-section-name { color: var(--primary-orange); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.quiz-step-count { color: #94a3b8; font-weight:600; }
.quiz-progress-bar { height:6px; background:#f1f5f9; border-radius:3px; overflow:hidden; }
.quiz-progress-fill { height:100%; background:linear-gradient(90deg, var(--primary-orange), #ff7e4d); border-radius:3px; transition:width 0.4s ease; width:0%; }

.quiz-question-area { flex: 1; display: flex; flex-direction: column; min-height: 360px; }
.quiz-question-text {
    font-family:'Montserrat',sans-serif; font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight:700; color:var(--dark-blue); margin-bottom:20px; line-height:1.3;
    min-height: 60px;
}
.quiz-options { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.quiz-option {
    display:flex; align-items:center; gap:14px; padding:13px 18px;
    border:2px solid #e2e8f0; border-radius:12px; cursor:pointer;
    transition:all 0.2s; background:white; text-align:left;
    font-family:'Roboto',sans-serif; font-size:15px; color:var(--text-dark); font-weight:500;
}
.quiz-option:hover { border-color: var(--primary-orange); background:#fff5f2; }
.quiz-option.selected {
    border-color: var(--primary-orange); background:#fff5f2;
    box-shadow: 0 0 0 4px rgba(241,90,36,0.1);
}
.quiz-opt-bullet {
    width:22px; height:22px; border:2px solid #cbd5e1; border-radius:50%;
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    transition:all 0.2s;
}
.quiz-option.selected .quiz-opt-bullet { border-color:var(--primary-orange); background:var(--primary-orange); }
.quiz-option.selected .quiz-opt-bullet::after {
    content:""; width:8px; height:8px; background:white; border-radius:50%;
}

.quiz-fact-box {
    margin-top:14px; padding:14px 18px;
    background:#fff5f2; border-left:3px solid var(--primary-orange);
    border-radius:6px; min-height: 70px;
    box-sizing: border-box;
}
.quiz-fact-box strong { color:var(--primary-orange); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:4px; font-weight:800; }
.quiz-fact-box p { font-size:13.5px; color:#475467; line-height:1.5; margin:0; }

.quiz-nav {
    display:flex; justify-content:space-between; align-items:center;
    padding-top:20px; border-top:1px solid #f0f4f8;
    margin-top: auto;
}
.quiz-back-btn {
    background:transparent; border:none; color:#94a3b8; cursor:pointer;
    font-weight:600; font-size:14px; padding:10px 0; font-family:'Roboto',sans-serif;
}
.quiz-back-btn:hover { color:var(--dark-blue); }
.quiz-back-btn:disabled { opacity:0.3; cursor:not-allowed; }
.quiz-next-btn {
    background:var(--primary-orange); color:white; padding:13px 30px;
    border-radius:8px; border:none; cursor:pointer; font-weight:700; font-size:15px;
    transition:all 0.3s; font-family:'Roboto',sans-serif;
    box-shadow:0 4px 12px rgba(241,90,36,0.25);
}
.quiz-next-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 18px rgba(241,90,36,0.35); }
.quiz-next-btn:disabled { opacity:0.4; cursor:not-allowed; box-shadow:none; }

/* Email/Details Gate */
.quiz-email-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap:50px; align-items:center; }
.quiz-email-lock {
    width:70px; height:70px; background:#fff5f2; border-radius:16px;
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.quiz-email-lock svg { width:32px; height:32px; color: var(--primary-orange); }
.quiz-email-visual h4 { font-family:'Montserrat',sans-serif; font-size:1.625rem; color:var(--dark-blue); margin-bottom:12px; font-weight:800; }
.quiz-email-visual p { color:var(--text-grey); margin-bottom:20px; font-size:15px; line-height:1.6; }
.quiz-email-bullets { list-style:none; padding:0; margin:0; }
.quiz-email-bullets li { padding:8px 0; color:var(--dark-blue); font-size:14px; font-weight:500; }
.quiz-form-label { display:block; font-size:13px; font-weight:700; color:var(--dark-blue); margin-bottom:6px; margin-top:14px; }
.quiz-form-label:first-child { margin-top:0; }
.quiz-email-form input {
    width:100%; padding:13px 16px; border:1px solid #e2e8f0; border-radius:8px;
    font-size:14px; background:#f8fafc; font-family:'Roboto',sans-serif; box-sizing:border-box;
    transition:0.2s;
}
.quiz-email-form input:focus { background:white; border-color:var(--primary-orange); outline:none; box-shadow:0 0 0 3px rgba(241,90,36,0.1); }
.quiz-email-form input.error { border-color:#ef4444; background:#fef2f2; }
.quiz-form-error { color:#ef4444; font-size:12px; margin-top:4px; display:none; font-weight:600; }
.quiz-form-error.show { display:block; }
.quiz-submit-btn {
    background:var(--primary-orange); color:white; padding:14px 30px;
    border-radius:8px; border:none; cursor:pointer; font-weight:700; font-size:15px;
    width:100%; margin-top:20px; transition:all 0.3s; font-family:'Roboto',sans-serif;
    box-shadow:0 4px 12px rgba(241,90,36,0.25);
}
.quiz-submit-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(241,90,36,0.35); }
.quiz-submit-btn:disabled { opacity:0.6; cursor:wait; }

/* Results */
.quiz-result-top {
    display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;
    padding-bottom:30px; border-bottom:1px solid #f0f4f8; margin-bottom:30px;
}
.quiz-score-circle {
    width:160px; height:160px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    position:relative; flex-shrink:0;
}
.quiz-score-circle::before {
    content:""; position:absolute; inset:10px; background:white; border-radius:50%; z-index:0;
}
.quiz-score-num {
    position:relative; z-index:1; font-family:'Montserrat',sans-serif;
    font-size:52px; font-weight:900; color:var(--dark-blue); line-height:1;
}
.quiz-score-of { position:relative; z-index:1; font-size:14px; color:#94a3b8; font-weight:700; margin-top:4px; }
.quiz-tier-badge {
    display:inline-block; padding:5px 14px; border-radius:50px;
    font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px;
    margin-bottom:10px; color:white;
}
.quiz-result-headline h3 {
    font-family:'Montserrat',sans-serif; font-size:1.625rem;
    color:var(--dark-blue); margin-bottom:10px; font-weight:800; line-height:1.3;
}
.quiz-result-headline p { color:var(--text-grey); font-size:15px; line-height:1.6; margin:0; }

.quiz-section-breakdown {
    display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:30px;
}
.qsb-card {
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:18px;
}
.qsb-card-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.qsb-card-head span { display:inline-flex; align-items:center; justify-content:center; color: var(--primary-orange); }
.qsb-card-head span svg { width:18px; height:18px; display:block; }
.qsb-card-head strong { font-size:12px; color:var(--dark-blue); font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.qsb-score-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.qsb-score-num { font-family:'Montserrat',sans-serif; font-size:22px; font-weight:800; color:var(--dark-blue); }
.qsb-score-of { font-size:13px; color:#94a3b8; font-weight:600; }
.qsb-bar { height:6px; background:#e2e8f0; border-radius:3px; overflow:hidden; }
.qsb-bar-fill { height:100%; border-radius:3px; transition:width 0.8s ease; }

.quiz-gaps-box {
    background:#fef9f5; border:1px solid #fed7c0; border-radius:12px;
    padding:24px; margin-bottom:30px;
}
.quiz-gaps-box h4 { font-size:16px; color:var(--dark-blue); font-weight:800; margin-bottom:14px; font-family:'Montserrat',sans-serif; }
.quiz-gaps-box ul { list-style:none; padding:0; margin:0; }
.quiz-gaps-box li {
    display:flex; gap:12px; align-items:flex-start; padding:10px 0;
    border-bottom:1px dashed #fed7c0; font-size:14px; color:#475467; line-height:1.5;
}
.quiz-gaps-box li:last-child { border-bottom:none; }
.quiz-gaps-box li::before { content:"⚠"; color:var(--primary-orange); font-size:16px; flex-shrink:0; }

.quiz-results-cta {
    background:var(--dark-blue); border-radius:14px; padding:30px; text-align:center;
}
.quiz-results-cta h4 { color:white; font-family:'Montserrat',sans-serif; font-size:1.375rem; font-weight:800; margin-bottom:10px; }
.quiz-results-cta p { color:#cbd5e1; font-size:14px; margin-bottom:20px; line-height:1.6; max-width:580px; margin-left:auto; margin-right:auto; }
.quiz-cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.quiz-results-cta .quiz-cta-btn.secondary { color:white; border-color:rgba(255,255,255,0.3); background:transparent; }
.quiz-results-cta .quiz-cta-btn.secondary:hover { border-color:white; background:rgba(255,255,255,0.05); color:white; }

/* Mobile */
@media (max-width: 900px) {
    /* Lock wrapper to fixed height so it doesn't bounce between screens */
    .quiz-wrapper { min-height: 640px; }
    .quiz-screen { padding:28px 22px; min-height: 640px; }
    #screen-results.active { min-height: auto; } /* Results can grow naturally */
    .quiz-start-grid, .quiz-email-grid { grid-template-columns:1fr; gap:30px; }
    /* Hide the preview scorecard mockup on mobile — it eats too much vertical space */
    .quiz-start-visual { display: none; }
    .quiz-result-top { grid-template-columns:1fr; text-align:center; gap:20px; }
    .quiz-score-circle { margin:0 auto; }
    .quiz-section-breakdown { grid-template-columns:repeat(2,1fr); }
    .quiz-cta-row { flex-direction:column; }
    .quiz-cta-row .quiz-cta-btn { width:100%; }
    .quiz-question-area { min-height: 360px; }
}
@media (max-width: 500px) {
    .quiz-wrapper { min-height: 580px; }
    .quiz-screen { padding:22px 16px; min-height: 580px; }
    .quiz-section-breakdown { grid-template-columns:1fr 1fr; }
    .quiz-question-text { font-size:1.125rem; min-height: 56px; }
    .quiz-option { padding:12px 14px; font-size:14px; }
    .quiz-question-area { min-height: 320px; }
    .quiz-start-input-row { flex-direction: column; padding: 8px; gap: 8px; }
    .quiz-start-input-row .quiz-cta-btn { width: 100%; padding: 14px 22px; }
    .quiz-gate-selects { grid-template-columns: 1fr; gap: 14px; }
    /* Hide Did You Know on phones to save vertical space */
    .quiz-fact-box { display: none; }
}