/* ==========================================================================
   finder-quiz.css — Quiz-specific styles for /finder.html
   ==========================================================================
   Extracted from finder.html inline <style> block on 2026-06-12
   as part of SEO Tier 2 (bloat reduction → CWV improvement).
   
   Scope: All selectors prefixed with .quiz-, .match-, .multi-, .swipe-, .progress-
   are unique to the finder page. No conflicts with style.mobile.css.
   ========================================================================== */

/* Quiz container + steps */
.quiz-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem;
}

.quiz-header {
    text-align: center;
    margin-bottom: 2rem;
}

.quiz-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.quiz-step.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.quiz-question {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.quiz-options {
    display: grid;
    gap: 1rem;
}

.quiz-option {
    padding: 1rem 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    background: white;
    font-size: 1rem;
}

.quiz-option:hover {
    border-color: #c9a227;
    background: #f9f9f9;
}

.quiz-option.selected {
    border-color: #c9a227;
    background: #c9a227;
    color: white;
}

.quiz-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    gap: 1rem;
}

.quiz-progress {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0e0e0;
}

.progress-dot.active {
    background: #c9a227;
}

.progress-dot.completed {
    background: #4CAF50;
}

/* Results styles */
.match-results {
    display: grid;
    gap: 1.5rem;
}

.match-card {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    background: white;
}

.match-card.top-match {
    border-color: #c9a227;
    background: linear-gradient(to bottom right, #fff9e6, #fff);
}

.match-rank {
    display: inline-block;
    background: #c9a227;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.match-score {
    float: right;
    font-size: 0.875rem;
    color: #666;
}

/* Featured Match badge - shown next to % Match when a Gold tier gym
   has real match reasons. Visually consistent with .badge-listing-gold
   in style.mobile.css, but scoped to finder.html match cards. */
.match-featured-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #1a1a1a;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    border: 1.5px solid #b8860b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Gold listing card - subtle gold tint to visually distinguish
   from regular match cards. Only applies when the card also has
   the .match-featured-badge (so it stays consistent with the
   matchReasons.length > 0 check). */
.match-card.gold-listing {
    border-color: #ffd700;
    background: linear-gradient(to bottom right, #fffdf5, #fff);
}

.match-card.gold-listing.top-match {
    border-color: #c9a227;
    background: linear-gradient(to bottom right, #fff9e6, #fffdf5);
}

.match-reasons {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.match-reasons li {
    padding: 0.25rem 0;
    color: #4CAF50;
}

.match-reasons li::before {
    content: "✓ ";
    font-weight: bold;
}

.match-cta {
    margin-top: 1rem;
}

.restart-quiz {
    text-align: center;
    margin-top: 2rem;
}

/* Multi-select styles */
.multi-select-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.multi-select-option {
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    background: white;
}

.multi-select-option:hover {
    border-color: #c9a227;
}

.multi-select-option.selected {
    border-color: #c9a227;
    background: #c9a227;
    color: white;
}

@media (max-width: 600px) {
    .multi-select-options {
        grid-template-columns: 1fr;
    }
}

/* FIX 2026-06-20: Removed ~185 lines of dead swipe cards CSS. The swipe system in finder.html was
never wired up to the quiz results flow (showListResults runs, not showSwipeCards). Hammer.js
library was also removed. All .swipe-* and .saved-gyms-* selectors are now orphaned. */