/* ============================================================
   VL Test Generator — Frontend Styles
   ============================================================ */

/* ── WRAP ── */
.vlt-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px 60px;
    font-family: 'Nunito', -apple-system, sans-serif;
}

/* ── STEP INDICATOR ── */
.vlt-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px 0 40px;
    flex-wrap: wrap;
    gap: 0;
}
.vlt-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: .4;
    transition: opacity .3s;
    min-width: 80px;
}
.vlt-step.active  { opacity: 1; }
.vlt-step.done    { opacity: .75; }
.vlt-step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #D8EBE0;
    color: #1A7F4E;
    font-weight: 800;
    font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .3s;
}
.vlt-step.active  .vlt-step-num { background: #1A7F4E; color: #fff; box-shadow: 0 4px 12px rgba(26,127,78,.35); }
.vlt-step.done    .vlt-step-num { background: #22A060; color: #fff; }
.vlt-step-label   { font-size: .75rem; font-weight: 700; color: #5A7265; text-align: center; }
.vlt-step.active  .vlt-step-label { color: #1A7F4E; }
.vlt-step-line    { flex: 1; min-width: 40px; height: 2px; background: #D8EBE0; margin: 0 4px; margin-bottom: 22px; }

/* ── PANELS ── */
.vlt-panel { display: none; }
.vlt-panel.active { display: block; animation: vltFadeIn .35s ease; }
@keyframes vltFadeIn { from {opacity:0;transform:translateY(12px)} to {opacity:1;transform:translateY(0)} }
.vlt-panel-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #125C38;
    margin-bottom: 6px;
}
.vlt-panel-sub { color: #5A7265; font-size: .95rem; margin-bottom: 28px; }

/* ── FIELDS ── */
.vlt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width:600px){ .vlt-grid-2 { grid-template-columns: 1fr; } }
.vlt-field { display: flex; flex-direction: column; gap: 8px; }
.vlt-field label { font-size: .85rem; font-weight: 700; color: #1A2B22; }
.vlt-field label small { font-weight: 400; color: #888; }
.vlt-field select,
.vlt-field input[type="text"] {
    padding: 11px 14px;
    border: 1.5px solid #D8EBE0;
    border-radius: 10px;
    font-size: .95rem;
    font-family: inherit;
    color: #1A2B22;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.vlt-field select:focus,
.vlt-field input[type="text"]:focus {
    border-color: #1A7F4E;
    box-shadow: 0 0 0 3px rgba(26,127,78,.1);
}
.vlt-field select:disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; }

/* ── ALERTS ── */
.vlt-alert { padding: 12px 16px; border-radius: 8px; font-size: .88rem; margin-top: 16px; }
.vlt-alert-warn { background: #fff8e1; border-left: 4px solid #F5A623; color: #7a5a00; }
.vlt-alert-ok   { background: #e8f5e9; border-left: 4px solid #1A7F4E; color: #125C38; }

/* ── PILL BUTTONS ── */
.vlt-pill-group { display: flex; gap: 8px; flex-wrap: wrap; }
.vlt-pill {
    padding: 8px 18px;
    border-radius: 50px;
    border: 1.5px solid #D8EBE0;
    background: #fff;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    color: #5A7265;
    cursor: pointer;
    transition: all .2s;
}
.vlt-pill:hover  { border-color: #1A7F4E; color: #1A7F4E; }
.vlt-pill.active { background: #1A7F4E; color: #fff; border-color: #1A7F4E; }

/* ── CHECKBOXES ── */
.vlt-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}
.vlt-checkbox-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: #1A2B22;
    cursor: pointer;
}
.vlt-checkbox-row input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #1A7F4E;
    cursor: pointer;
}

/* ── CHAPTERS LIST ── */
.vlt-select-all-wrap {
    margin-bottom: 14px;
    padding: 10px 14px;
    background: #EDF6F0;
    border-radius: 8px;
}
.vlt-select-all-wrap label { display: flex; align-items: center; gap: 10px; font-size: .88rem; cursor: pointer; }
.vlt-select-all-wrap input { width: 18px; height: 18px; accent-color: #1A7F4E; }
.vlt-chapters-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px 2px;
}
.vlt-chapter-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid #D8EBE0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all .2s;
    font-size: .88rem;
    font-weight: 600;
    color: #1A2B22;
}
.vlt-chapter-item:hover  { border-color: #1A7F4E; background: #EDF6F0; }
.vlt-chapter-item.checked{ border-color: #1A7F4E; background: #EDF6F0; }
.vlt-chapter-item input  { width: 18px; height: 18px; accent-color: #1A7F4E; flex-shrink: 0; margin-top: 1px; }

/* ── ACTION BUTTONS ── */
.vlt-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 20px; border-top: 1px solid #EDF6F0; }
.vlt-btn {
    padding: 12px 28px;
    border-radius: 50px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all .2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.vlt-btn-primary { background: #1A7F4E; color: #fff; }
.vlt-btn-primary:hover { background: #22A060; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,127,78,.35); }
.vlt-btn-primary:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }
.vlt-btn-ghost { background: transparent; color: #5A7265; border: 1.5px solid #D8EBE0; }
.vlt-btn-ghost:hover { border-color: #1A7F4E; color: #1A7F4E; }
.vlt-btn-outline { background: transparent; color: #1A7F4E; border: 1.5px solid #1A7F4E; }
.vlt-btn-outline:hover { background: #1A7F4E; color: #fff; }

/* ── LOADING SPINNER ── */
.vlt-spinner {
    width: 56px; height: 56px;
    border: 5px solid #D8EBE0;
    border-top-color: #1A7F4E;
    border-radius: 50%;
    animation: vltSpin .8s linear infinite;
    margin: 0 auto 20px;
}
@keyframes vltSpin { to { transform: rotate(360deg); } }
.vlt-loading-text { font-size: 1.1rem; font-weight: 700; color: #125C38; }

/* ── OUTPUT TOOLBAR ── */
.vlt-output-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 14px 20px;
    background: #EDF6F0;
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── TEST PAPER STYLES ── */
.vlt-paper {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}

/* Paper inner styles — used by Gemini-generated HTML */
.vlt-paper .test-paper { padding: 40px; font-family: 'Times New Roman', serif; color: #111; }
.vlt-paper .tp-header  { text-align: center; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid #1A7F4E; }
.vlt-paper .tp-school  { font-size: 1.2rem; font-weight: 700; color: #125C38; margin-bottom: 4px; }
.vlt-paper .tp-title   { font-size: 1.6rem; font-weight: 800; color: #0D1F16; margin: 8px 0; }
.vlt-paper .tp-meta    { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: .85rem; margin: 10px 0; color: #444; }
.vlt-paper .tp-meta span { background: #EDF6F0; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.vlt-paper .tp-student-line { margin: 14px 0; font-size: .95rem; color: #333; }
.vlt-paper .tp-instructions { text-align: left; margin-top: 14px; font-size: .85rem; background: #FAFDF8; padding: 10px 14px; border-radius: 8px; border: 1px solid #D8EBE0; }
.vlt-paper .tp-instructions ol { margin: 4px 0 0 16px; padding: 0; }
.vlt-paper .tp-instructions li { margin-bottom: 2px; }
.vlt-paper .tp-section { margin-top: 28px; }
.vlt-paper .tp-section-title { font-size: 1.05rem; font-weight: 700; color: #125C38; border-bottom: 1px solid #D8EBE0; padding-bottom: 6px; margin-bottom: 14px; }
.vlt-paper .tp-marks { font-size: .8rem; font-weight: 400; color: #888; margin-left: 8px; }
.vlt-paper .tp-section-inst { font-size: .85rem; color: #666; font-style: italic; margin-bottom: 10px; }
.vlt-paper .tp-questions { padding-left: 20px; margin: 0; }
.vlt-paper .tp-q { margin-bottom: 18px; line-height: 1.6; }
.vlt-paper .tp-q-text { font-size: .95rem; font-weight: 600; display: block; margin-bottom: 6px; }
.vlt-paper .tp-options { list-style: none; padding-left: 12px; margin: 4px 0; }
.vlt-paper .tp-options li { margin-bottom: 4px; font-size: .9rem; padding: 3px 0; }
.vlt-paper .tp-tf-blank { font-weight: 700; color: #1A7F4E; }
.vlt-paper .tp-answer-lines { margin-top: 8px; }
.vlt-paper .tp-line { border-bottom: 1px solid #bbb; margin-bottom: 10px; height: 22px; }
.vlt-paper .tp-match { width: 100%; border-collapse: collapse; margin-top: 8px; }
.vlt-paper .tp-match th { background: #EDF6F0; padding: 8px 14px; font-size: .88rem; border: 1px solid #D8EBE0; }
.vlt-paper .tp-match td { padding: 7px 14px; font-size: .9rem; border: 1px solid #D8EBE0; }
.vlt-paper .tp-match-blanks { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; font-size: .9rem; font-weight: 600; }

/* Answer Key */
.vlt-paper .tp-answer-key {
    margin-top: 36px;
    padding: 24px;
    background: #0D1F16;
    color: #fff;
    border-radius: 0 0 12px 12px;
}
.vlt-paper .tp-ak-title { font-size: 1.2rem; font-weight: 800; color: #F5A623; margin-bottom: 20px; text-align: center; }
.vlt-paper .tp-ak-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.vlt-paper .tp-ak-section h3 { font-size: .85rem; color: #9FE8C0; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.vlt-paper .tp-ak-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.vlt-paper .tp-ak-grid span { font-size: .85rem; color: #fff; background: rgba(255,255,255,.08); padding: 3px 8px; border-radius: 4px; }

/* Answer key hidden by default for print-clean version */
.vlt-paper .tp-answer-key.hidden { display: none; }

/* ── LONG ANSWER STYLES ── */
.vlt-paper .tp-section-long { border-top: 2px solid #1A7F4E; margin-top: 32px; padding-top: 8px; }
.vlt-paper .tp-q-long .tp-q-text { font-size: 1rem; font-weight: 700; }
.vlt-paper .tp-long-lines { margin-top: 12px; }
.vlt-paper .tp-long-lines .tp-line { height: 28px; border-bottom: 1px solid #bbb; margin-bottom: 8px; }
.vlt-paper .tp-ak-long h3 { color: #F5A623; }
.vlt-paper .tp-ak-la-list { margin: 6px 0 0 16px; padding: 0; }
.vlt-paper .tp-ak-la-list li { font-size: .85rem; color: #fff; margin-bottom: 8px; line-height: 1.6; }

/* ── PRINT STYLES — only test paper, no website chrome ── */
@media print {
    /* Hide everything on the page except the test paper itself */
    body > *                           { display: none !important; }
    body > #vlt-print-target           { display: block !important; }

    /* When using the iframe print method */
    body.vlt-printing *                { visibility: hidden; }
    body.vlt-printing #vlt-print-frame { visibility: visible; position: fixed; top:0; left:0; width:100%; height:100%; }

    /* Fallback — hide all theme elements when printing from main page */
    .vl-topbar, .site-header, .vl-hero, .trust-band,
    .vl-categories, .vl-series, .vl-nep, .vl-features,
    .vl-testimonials, .vl-cta, .vl-contact, .site-footer,
    .vlt-steps, .vlt-panel-title, .vlt-panel-sub,
    .vlt-output-toolbar, .no-print,
    header, footer, nav, .vl-page-header         { display: none !important; }

    /* Show only step 4 panel and the paper inside it */
    #vlt-panel-4                       { display: block !important; padding: 0 !important; }
    .vlt-wrap                          { padding: 0 !important; max-width: 100% !important; }
    .vlt-paper                         { border: none !important; border-radius: 0 !important; box-shadow: none !important; }
    .vlt-paper .test-paper             { padding: 15px !important; }

    /* Answer key print colours */
    .vlt-paper .tp-answer-key          { background: #f5f5f5 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .vlt-paper .tp-answer-key.hidden   { display: block !important; } /* Always show in print */
    .vlt-paper .tp-ak-title            { color: #1A7F4E !important; }
    .vlt-paper .tp-ak-grid span        { background: #eee !important; color: #000 !important; }
    .vlt-paper .tp-ak-la-list li       { color: #000 !important; }

    /* Typography */
    body                               { font-size: 11pt !important; }
    .vlt-paper .tp-title               { font-size: 16pt !important; }
    .vlt-paper .tp-section-title       { font-size: 12pt !important; }
    .vlt-paper .tp-q-text              { font-size: 11pt !important; }

    /* Page settings */
    @page { margin: 1.5cm; size: A4; }
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
    .vlt-paper .test-paper { padding: 20px; }
    .vlt-paper .tp-meta { gap: 8px; }
    .vlt-paper .tp-ak-sections { grid-template-columns: 1fr; }
    .vlt-actions { flex-direction: column; gap: 10px; }
    .vlt-actions .vlt-btn { width: 100%; justify-content: center; }
    .vlt-output-toolbar { flex-direction: column; }
    .vlt-output-toolbar div { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
    .vlt-output-toolbar .vlt-btn { flex: 1; justify-content: center; }
}