/* foto-match.php: een foto van een gevonden dier vergelijken met de vermiste dieren.
   Voorvoegsel .fm-. De klassen .fm-label, .fm-kleur, .fm-match en .fm-vlag worden
   vanuit de JS gezet; wijzig die namen niet los van foto-match.php. */
.fm-body { padding: clamp(1.25rem, 3vw, 2rem) 0 3rem; }
.fm-body > .container > section + section { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.fm-body h2 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }

/* ── Foto kiezen ────────────────────────────────────────────────────────── */
.fm-upload { max-width: 44rem; margin-inline: auto; }
.fm-veld {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    width: 100%;
    background: var(--surface);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 5vw, 2.75rem) 1.5rem;
    cursor: pointer;
    text-align: center;
    color: var(--text);
}
.fm-veld:hover, .fm-veld.is-sleep, .fm-veld:focus-visible { border-color: var(--primary); background: var(--band-groen); }
.fm-veld > .bi { font-size: 2.25rem; color: var(--primary); margin-bottom: .35rem; }
.fm-veld-kop { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.fm-veld-hint { font-size: .85rem; color: var(--text-muted); }

.fm-voorbeeld { text-align: center; margin-top: 1rem; }
.fm-voorbeeld img { max-height: 200px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.fm-voorbeeld-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: .85rem 0 0; }

.fm-bezig {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1rem;
    background: var(--blue-light);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    color: var(--blue-dark);
}
.fm-bezig strong { display: block; font-size: .95rem; }
.fm-bezig span { font-size: .84rem; }

.fm-fout {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-top: 1rem;
    font-size: .92rem;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
}

/* ── Wat de analyse herkende ────────────────────────────────────────────── */
.fm-labels h2 { font-size: 1.2rem; margin: 0 0 .7rem; }
.fm-labelrij, .fm-kleurrij { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fm-kleurrij { margin-top: .6rem; }
.fm-label {
    font-size: .8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: .2rem .6rem;
    border: 1px solid var(--border);
    background: var(--surface-warm);
    color: var(--text-muted);
}
.fm-label.is-hoog   { background: var(--band-groen); border-color: var(--band-groen-rand); color: var(--primary-darker); }
.fm-label.is-middel { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue-dark); }
.fm-kleurlabel { font-size: .8rem; color: var(--text-muted); margin-right: .2rem; }
.fm-kleur {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--kleur, var(--border));
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border-strong);
}

/* ── Overeenkomsten ─────────────────────────────────────────────────────── */
.fm-matches-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fm-matches-kop h2 { font-size: 1.35rem; margin: 0; }
.fm-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.fm-match {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.fm-match-beeld { background: var(--surface-warm); }
.fm-match-beeld img { width: 100%; height: 11rem; object-fit: cover; display: block; }
.fm-geenfoto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7rem;
    font-size: 2rem;
    color: var(--text-muted);
}
.fm-match-body { padding: .9rem 1rem; flex: 1; }
.fm-match-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .35rem; }
.fm-match-kop h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.fm-vlag {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 700;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
    border-radius: var(--radius-sm);
    padding: .1rem .45rem;
}
.fm-regel { display: flex; gap: .4rem; align-items: center; font-size: .84rem; color: var(--text-muted); margin: 0 0 .2rem; }
.fm-beloning {
    display: inline-block;
    margin-top: .35rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
    border-radius: var(--radius-sm);
    padding: .1rem .45rem;
}
.fm-match-voet { display: flex; gap: .5rem; padding: 0 1rem 1rem; }
.fm-match-voet .btn { flex: 1; }

.fm-geenmatch {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}
.fm-geenmatch h3 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; }
.fm-geenmatch p { color: var(--text-muted); margin: 0 auto; max-width: 52ch; line-height: 1.6; }
.fm-geenmatch-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.1rem 0 0 !important; }

.fm-oproep {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    background: var(--band-groen);
    border: 1px solid var(--band-groen-rand);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}
.fm-oproep > div { flex: 1 1 18rem; min-width: 0; }
.fm-oproep strong { display: block; color: var(--primary-darker); }
.fm-oproep p { font-size: .9rem; color: var(--primary-dark); margin: .15rem 0 0; }

/* ── Uitleg ─────────────────────────────────────────────────────────────── */
.fm-stappen h2 { font-size: 1.35rem; margin: 0 0 1rem; text-align: center; }
.fm-stappenlijst { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.fm-stappenlijst li {
    counter-increment: stap;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.15rem;
}
.fm-stappenlijst li::before {
    content: counter(stap);
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--band-groen);
    border: 1px solid var(--band-groen-rand);
    color: var(--primary-darker);
    font-weight: 700;
    font-size: .88rem;
}
.fm-stappenlijst strong { display: block; font-size: .95rem; }
.fm-stappenlijst p { font-size: .85rem; color: var(--text-muted); line-height: 1.55; margin: .15rem 0 0; }
.fm-onderaan { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin: 1.5rem 0 0; color: var(--text-muted); }

/* ── Smallere schermen ──────────────────────────────────────────────────── */
@media (max-width: 991px) { .fm-stappenlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .fm-stappenlijst { grid-template-columns: 1fr; } }

/* Soortkeuze onder het uploadveld en de regel die zegt hoe er vergeleken is. */
.fm-soort { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; justify-content: center; }
.fm-soort > span { font-size: .9rem; font-weight: 600; color: var(--text); }
.fm-soort select {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: .92rem;
    padding: .45rem .7rem;
}
.fm-soort select:focus { outline: 0; border-color: var(--primary); }
.fm-modus { font-size: .84rem; color: var(--text-muted); margin: -.5rem 0 .9rem; }
.fm-score {
    display: inline-block;
    font-size: .76rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--band-groen);
    border: 1px solid var(--band-groen-rand);
    border-radius: var(--radius-sm);
    padding: .1rem .45rem;
    margin: 0 0 .4rem;
}