/* PFI Quiz — pfi-quiz.css  v1.0.0
   All selectors namespaced with .pfi-qz- to avoid conflicts with the WordPress theme.
*/

.pfi-quiz-root { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1C2B3A; }

/* ── Loading / Error ── */
.pfi-qz-loading {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 24px; color: #5A6E82;
}
.pfi-qz-spinner {
    width: 40px; height: 40px;
    border: 4px solid #D0DCE8;
    border-top-color: #1A7FA0;
    border-radius: 50%;
    animation: pfi-spin 0.8s linear infinite;
    margin-bottom: 16px;
}
@keyframes pfi-spin { to { transform: rotate(360deg); } }
.pfi-qz-error {
    padding: 16px 20px; background: #FDF0EF;
    border: 1px solid #F0B0AB; border-radius: 10px;
    color: #C0392B; font-size: 0.9rem;
}

/* ── Wrap ── */
.pfi-qz-wrap {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(13,43,78,0.10);
    border: 1px solid #D0DCE8;
    padding: 40px 44px;
    max-width: 780px;
    margin: 0 auto;
}
@media (max-width: 600px) { .pfi-qz-wrap { padding: 24px 18px; } }

.pfi-qz-hidden { display: none !important; }

/* ── Progress ── */
.pfi-qz-progress-wrap { margin-bottom: 28px; }
.pfi-qz-progress-meta {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: #5A6E82; font-weight: 600; margin-bottom: 8px;
}
.pfi-qz-track { height: 7px; background: #D0DCE8; border-radius: 99px; overflow: hidden; }
.pfi-qz-fill  { height: 100%; background: linear-gradient(90deg, #1A7FA0, #0D2B4E); border-radius: 99px; transition: width 0.4s ease; }

/* ── Question ── */
.pfi-qz-qlabel { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #1A7FA0; margin-bottom: 10px; font-weight: 800; }
.pfi-qz-qtext  { font-size: 1.15rem; font-weight: 600; color: #0D2B4E; line-height: 1.5; margin-bottom: 24px; }

/* Roman numeral sub-items */
.pfi-qz-sublist  { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.pfi-qz-subitem  { font-size: 0.95rem; font-weight: 500; color: #1C2B3A; padding-left: 8px; border-left: 3px solid #D0DCE8; line-height: 1.5; }

/* ── Answers ── */
.pfi-qz-answers { display: flex; flex-direction: column; gap: 12px; }

.pfi-qz-answer {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 18px;
    border: 2px solid #D0DCE8; border-radius: 10px;
    background: #fff; cursor: pointer; text-align: left;
    font-size: 0.95rem; color: #1C2B3A; font-family: inherit;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    width: 100%;
}
.pfi-qz-answer:hover:not(:disabled) { border-color: #1A7FA0; background: #E8F6FA; transform: translateY(-1px); }
.pfi-qz-answer:disabled { cursor: default; }

.pfi-qz-letter {
    width: 32px; height: 32px; border-radius: 50%;
    background: #F4F7FA; border: 2px solid #D0DCE8;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.82rem; color: #0D2B4E; flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pfi-qz-atext { flex: 1; line-height: 1.4; color: #1C2B3A; }

/* Force answer text black on all states — prevents theme overrides */
.pfi-qz-answer.pfi-qz-correct  .pfi-qz-atext,
.pfi-qz-answer.pfi-qz-wrong    .pfi-qz-atext,
.pfi-qz-answer.pfi-qz-was-wrong .pfi-qz-atext,
.pfi-qz-answer:disabled         .pfi-qz-atext { color: #1C2B3A !important; }
.pfi-qz-icon  { width: 28px; height: 28px; flex-shrink: 0; opacity: 0; transition: opacity 0.2s; }
.pfi-qz-icon svg { width: 28px; height: 28px; display: block; }

/* Selected (yesno mode — neutral highlight) */
.pfi-qz-answer.pfi-qz-selected { border-color: #1A7FA0; background: #E8F6FA; }
.pfi-qz-answer.pfi-qz-selected .pfi-qz-letter { background: #1A7FA0; border-color: #1A7FA0; color: #fff; }

/* Correct */
.pfi-qz-answer.pfi-qz-correct { border-color: #1A7A4A; background: #EAF7EF; animation: pfi-pulse 0.4s ease; }
.pfi-qz-answer.pfi-qz-correct .pfi-qz-letter { background: #1A7A4A; border-color: #1A7A4A; color: #fff; }
.pfi-qz-answer.pfi-qz-correct .pfi-qz-icon  { opacity: 1; }

/* Wrong */
.pfi-qz-answer.pfi-qz-wrong { border-color: #C0392B; background: #FDF0EF; animation: pfi-shake 0.35s ease; }
.pfi-qz-answer.pfi-qz-wrong .pfi-qz-letter { background: #C0392B; border-color: #C0392B; color: #fff; }
.pfi-qz-answer.pfi-qz-wrong .pfi-qz-icon  { opacity: 1; }

/* Was-wrong (dimmed, locked) */
.pfi-qz-answer.pfi-qz-was-wrong { border-color: #F0B0AB; background: #FDF0EF; opacity: 0.55; }
.pfi-qz-answer.pfi-qz-was-wrong .pfi-qz-letter { background: #C0392B; border-color: #C0392B; color: #fff; }
.pfi-qz-answer.pfi-qz-was-wrong .pfi-qz-icon  { opacity: 1; }

@keyframes pfi-shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
@keyframes pfi-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.015); }
    100% { transform: scale(1); }
}

/* Try-again */
.pfi-qz-tryagain {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; margin-top: 14px;
    background: #FDF0EF; border: 1px solid #F0B0AB;
    border-radius: 10px; color: #C0392B;
    font-size: 0.88rem; font-weight: 600;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
}
.pfi-qz-tryagain.pfi-qz-visible { opacity: 1; transform: translateY(0); }

/* ── Results ── */
#pfi-results, [id$="-results"] .pfi-qz-screen { text-align: center; }

.pfi-qz-ring-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto 24px; }
.pfi-qz-ring-wrap svg { transform: rotate(-90deg); }
.pfi-qz-ring-track { fill: none; stroke: #D0DCE8; stroke-width: 10; }
.pfi-qz-ring-fill  { fill: none; stroke-width: 10; stroke-linecap: round; stroke: #1A7FA0; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
.pfi-qz-ring-text  { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pfi-qz-pct        { font-size: 2.4rem; font-weight: 800; color: #0D2B4E; line-height: 1; }
.pfi-qz-pct-lbl    { font-size: 0.75rem; font-weight: 600; color: #5A6E82; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.pfi-qz-headline { font-size: 1.5rem; font-weight: 700; color: #0D2B4E; margin-bottom: 8px; }
.pfi-qz-sub      { color: #5A6E82; font-size: 0.93rem; margin-bottom: 28px; line-height: 1.6; }
.pfi-qz-sub strong { color: #1C2B3A; }

.pfi-qz-stats { display: flex; gap: 16px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap; }
.pfi-qz-stat  { background: #F4F7FA; border: 1px solid #D0DCE8; border-radius: 10px; padding: 16px 24px; min-width: 120px; }
.pfi-qz-stat-num { font-size: 1.8rem; font-weight: 800; color: #0D2B4E; line-height: 1; }
.pfi-qz-stat-lbl { font-size: 0.72rem; color: #5A6E82; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

/* Review */
.pfi-qz-review-toggle {
    background: none; border: 1px solid #D0DCE8; border-radius: 10px;
    padding: 10px 20px; font-size: 0.88rem; font-weight: 600;
    color: #0D2B4E; cursor: pointer; margin-bottom: 20px;
    font-family: inherit; transition: background 0.15s;
}
.pfi-qz-review-toggle:hover { background: #F4F7FA; }
.pfi-qz-review-list { text-align: left; display: none; margin-bottom: 24px; }
.pfi-qz-review-list.pfi-qz-open { display: block; }

.pfi-qz-review-item {
    border: 1px solid #D0DCE8; border-radius: 10px;
    padding: 14px 16px; margin-bottom: 10px;
    display: flex; gap: 12px; align-items: flex-start;
}
.pfi-qz-r-correct { border-color: #A3D9BC; background: #EAF7EF; }
.pfi-qz-r-wrong   { border-color: #F0B0AB; background: #FDF0EF; }
.pfi-qz-r-neutral { border-color: #A3C4D8; background: #EAF3F8; }
.pfi-qz-review-icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.pfi-qz-review-icon svg { width: 22px; height: 22px; display: block; }
.pfi-qz-review-q   { font-size: 0.87rem; font-weight: 600; color: #1C2B3A; margin-bottom: 4px; }
.pfi-qz-review-a   { font-size: 0.83rem; color: #5A6E82; }
.pfi-qz-ans-correct { color: #1A7A4A; font-weight: 600; }
.pfi-qz-ans-no      { color: #5A6E82; font-weight: 600; }

/* Buttons */
.pfi-qz-btn-row { margin-top: 8px; }
.pfi-qz-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px; background: #0D2B4E; color: #fff;
    border: none; border-radius: 10px; font-size: 0.95rem;
    font-weight: 700; cursor: pointer; font-family: inherit;
    transition: background 0.15s, transform 0.1s;
}
.pfi-qz-btn-primary:hover { background: #1A3F6F; transform: translateY(-1px); }