.tfl-topo-quiz-wrapper {
    margin: 1em 0;
    background: #f5f0e8;
    padding: 1em;
    border-radius: 4px;
}

.tfl-topo-quiz-branding {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 0.5em;
}

.tfl-map-quiz-title {
    margin: 0 0 0.5em;
}

.tfl-topo-quiz-instructions {
    margin-bottom: 1em;
}

.tfl-topo-quiz-instructions p {
    margin: 0 0 0.5em;
    font-size: 1em;
}

.tfl-topo-quiz-controls {
    display: flex;
    gap: 0.5em;
    margin-bottom: 0.75em;
}

.tfl-topo-btn-draw {
    padding: 12px 20px;
    background: transparent;
    color: #2e7d32;
    border: 2px solid #2e7d32;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
}

.tfl-topo-btn-draw:hover {
    background: #2e7d32;
    color: #fff;
}

.tfl-topo-btn-finish {
    padding: 12px 20px;
    background: transparent;
    color: #1565c0;
    border: 2px solid #1565c0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
}

.tfl-topo-btn-finish:hover {
    background: #1565c0;
    color: #fff;
}

.tfl-topo-btn-delete {
    padding: 12px 20px;
    background: transparent;
    color: #c62828;
    border: 2px solid #c62828;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
}

.tfl-topo-btn-delete:hover {
    background: #c62828;
    color: #fff;
}

.tfl-topo-btn-undo {
    padding: 12px 20px;
    background: transparent;
    color: #6b7280;
    border: 2px solid #6b7280;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
}

.tfl-topo-btn-undo:hover {
    background: #6b7280;
    color: #fff;
}

/* Pin-style location markers (SeruPractice style) */
.tfl-marker-pin {
    background: transparent !important;
    border: none !important;
}

.tfl-pin-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tfl-pin-icon {
    width: 32px;
    height: 48px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.tfl-marker-green .tfl-pin-icon path,
.tfl-pin-green path {
    fill: #2e7d32 !important;
    stroke: #fff !important;
    stroke-width: 1.5;
}

.tfl-marker-red .tfl-pin-icon path,
.tfl-pin-red path {
    fill: #c62828 !important;
    stroke: #fff !important;
    stroke-width: 1.5;
}

.tfl-marker-label {
    font-size: 10px;
    font-weight: 700;
    color: #1a1a1a !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255,255,255,0.9);
}

.tfl-topo-map path.leaflet-interactive {
    stroke: #2563eb !important;
    stroke-width: 6 !important;
    fill: none !important;
}

.tfl-topo-map {
    height: 500px;
    width: 100%;
    border: 1px solid #d5d0c8;
    border-radius: 4px;
    background: #f5f0e8;
}

.tfl-topo-map .tfl-checkpoint-tooltip {
    background: rgba(26, 26, 26, 0.9);
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 6px;
}

.tfl-topo-map .tfl-checkpoint-tooltip:before {
    border-top-color: rgba(26, 26, 26, 0.9);
}

/* SeruPractice-style: filter applied via tfl_topo_quiz_tile_filter (contrast, saturate, sepia, brightness) */

.tfl-topo-quiz-actions {
    margin-top: 1em;
}

.tfl-map-quiz-timer {
    margin: 0 0 0.75em;
    font-weight: 700;
    color: #1a1a1a;
}

.tfl-topo-submit-route {
    padding: 10px 20px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.tfl-topo-submit-route:hover {
    background: #333;
}

/* --- Per-question result card --- */
.tfl-topo-quiz-result-card {
    padding: 1.25em 1.5em;
    border-radius: 8px;
    margin-top: 1em;
    text-align: center;
    border: 2px solid #d1d5db;
    background: #f9fafb;
}

.tfl-topo-quiz-result-card.is-passed {
    background: #e8f5e9;
    border-color: #2e7d32;
}

.tfl-topo-quiz-result-card.is-failed {
    background: #fdecea;
    border-color: #c62828;
}

.tfl-result-badge {
    display: inline-block;
    padding: 6px 24px;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 0.5em;
}

.tfl-badge-passed {
    background: #2e7d32;
    color: #fff;
}

.tfl-badge-failed {
    background: #c62828;
    color: #fff;
}

.tfl-result-score-line {
    font-size: 1.6em;
    font-weight: 700;
    margin: 0.25em 0;
}

.tfl-topo-quiz-result-card.is-passed .tfl-result-score-line {
    color: #1b5e20;
}

.tfl-topo-quiz-result-card.is-failed .tfl-result-score-line {
    color: #8e1b1b;
}

.tfl-topo-quiz-result-note {
    margin-top: 0.5em;
    font-size: 0.95em;
    color: #555;
}

/* --- Next Question button --- */
.tfl-topo-btn-next {
    padding: 12px 28px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    margin-left: 12px;
    transition: opacity 0.2s;
}

.tfl-topo-btn-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tfl-topo-btn-next:not(:disabled):hover {
    background: #4f46e5;
}

.tfl-topo-btn-next.tfl-next-ready {
    animation: tfl-pulse-next 1.5s ease-in-out 2;
}

@keyframes tfl-pulse-next {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); }
    50% { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
}

/* --- Final Summary --- */
.tfl-topo-final-summary {
    padding: 2em;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    text-align: center;
}

.tfl-topo-final-summary h2 {
    margin: 0 0 0.75em;
    font-size: 1.5em;
    color: #1a1a1a;
}

.tfl-summary-overall {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1em 2.5em;
    border-radius: 10px;
    margin-bottom: 1em;
}

.tfl-summary-overall-passed {
    background: #e8f5e9;
    border: 2px solid #2e7d32;
}

.tfl-summary-overall-failed {
    background: #fdecea;
    border: 2px solid #c62828;
}

.tfl-summary-overall-score {
    font-size: 2.4em;
    font-weight: 800;
}

.tfl-summary-overall-passed .tfl-summary-overall-score {
    color: #1b5e20;
}

.tfl-summary-overall-failed .tfl-summary-overall-score {
    color: #8e1b1b;
}

.tfl-summary-overall-label {
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: 0.25em;
}

.tfl-summary-overall-passed .tfl-summary-overall-label {
    color: #2e7d32;
}

.tfl-summary-overall-failed .tfl-summary-overall-label {
    color: #c62828;
}

.tfl-summary-counts {
    color: #555;
    margin: 0.5em 0 1em;
}

.tfl-summary-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto 1.5em;
    text-align: left;
}

.tfl-summary-table th {
    background: #f3f4f6;
    padding: 8px 12px;
    font-weight: 700;
    border-bottom: 2px solid #e5e7eb;
}

.tfl-summary-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.tfl-summary-passed {
    color: #2e7d32;
    font-weight: 700;
}

.tfl-summary-failed {
    color: #c62828;
    font-weight: 700;
}

.tfl-summary-actions {
    margin-top: 1em;
}

.tfl-summary-restart {
    padding: 10px 28px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
}

.tfl-summary-restart:hover {
    background: #333;
}

.tfl-map-quiz-feedback {
    min-height: 24px;
    margin-top: 0.75em;
    font-weight: 600;
}

.tfl-map-quiz-feedback.is-info {
    color: #0f5a95;
}

.tfl-map-quiz-feedback.is-success {
    color: #1b5e20;
}

.tfl-map-quiz-feedback.is-error {
    color: #8e1b1b;
}

.tfl-map-quiz-learndash-slot {
    margin-top: 1rem;
}

.tfl-map-quiz-linked-question .wpProQuiz_question {
    margin-top: 0 !important;
}

/* Hide LearnDash/quiz system immediate result widgets inside our quiz wrapper
   so frontend users only see the plugin's final summary when configured. */
.tfl-topo-quiz-wrapper .ld-quiz-result,
.tfl-topo-quiz-wrapper .ld-quiz-results,
.tfl-topo-quiz-wrapper .quiz-result,
.tfl-topo-quiz-wrapper .wpProQuiz_result {
    display: none !important;
}