/* ═══════════════════════════════════════════════════════
   HD Quiz Answer Statistics – styles
   ═══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   1. Toggle overrides  (brand blue #050a95)
   OFF state  = dark blue track  (#050a95)
   ON  state  = light blue track (#7478d4 ≈ 50 % tint)
   The thumb stays white / light grey (unchanged).
   ────────────────────────────────────────────────────── */

/* Track – unchecked (OFF) */
.hdq-options-check .hdq_toggle:before {
    background: rgba(5, 10, 149, 0.45);
    box-shadow: inset 0px 1px 1px rgba(5, 10, 149, 0.2);
}

/* Track – checked (ON) */
.hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:before {
    background: #050a95;
    box-shadow: inset 0px 1px 1px rgba(5, 10, 149, 0.4);
}

/* ──────────────────────────────────────────────────────
   2. Correct-answer highlighting  (green → brand blue)
   ────────────────────────────────────────────────────── */

/* Selected correct answer */
.hdq_correct {
    border: 4px solid #050a95;
    background: rgba(5, 10, 149, 0.07);
}

/* Correct answer the user did NOT pick (shown when mark_answers = yes) */
.hdq_correct_not_selected {
    border-bottom: 4px solid #050a95;
    background: rgba(5, 10, 149, 0.07);
}

/* ──────────────────────────────────────────────────────
   3. Stats bars – VnExpress-inspired layout
      Each row shows:
        [● label text ████████████] [XX%]
      The track has a light background (full width), the
      fill sits behind the label as a colored overlay.
   ────────────────────────────────────────────────────── */

.hdqs_stats {
    margin-top: 16px;
    width: 100%;
}

/* One row per answer – flex so track fills space and % stays right */
.hdqs_bar_row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Full-width track; light background set inline by JS */
.hdqs_bar_track {
    flex: 1;
    height: 38px;
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Coloured fill – absolute, grows from left; color set inline by JS */
.hdqs_bar_fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    min-width: 3px;
    transition: width 0.55s ease;
}

/* Dot + answer label, rendered above the fill via z-index */
.hdqs_bar_label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: #2d2d2d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1;
}

/* Dot indicator – color set inline by JS */
.hdqs_dot {
    font-size: 10px;
    flex-shrink: 0;
    line-height: 1;
}

/* Percentage badge – right of each bar */
.hdqs_pct {
    min-width: 42px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: #333333;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────
   4. Summary line
   ────────────────────────────────────────────────────── */
.hdqs_summary {
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 14px;
    color: #555555;
    font-style: italic;
}