/* signaleer.php: een rondzwervend dier doorgeven dat niemand als vermist heeft gemeld.
   Voorvoegsel .sgn-. */
.sgn-body { padding: clamp(1.25rem, 3vw, 2rem) 0 3rem; }
.sgn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.sgn-hoofd { min-width: 0; }

.sgn-klaar {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--band-groen-rand);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.75rem, 5vw, 2.75rem);
}
.sgn-icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--band-groen);
    color: var(--primary-dark);
    font-size: 1.7rem;
}
.sgn-klaar h2 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; margin: 0 0 .5rem; }
.sgn-klaar p { color: var(--text-muted); line-height: 1.65; margin: 0 auto; max-width: 46ch; }
.sgn-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.4rem 0 0 !important; }

.sgn-fout {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    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;
    margin: 0 0 1.25rem;
}

.sgn-uitleg {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--blue-light);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
}
.sgn-uitleg > i { font-size: 1.15rem; color: var(--blue); margin-top: .1rem; flex-shrink: 0; }
.sgn-uitleg strong { display: block; font-size: .95rem; color: var(--blue-darker); }
.sgn-uitleg p { font-size: .88rem; color: var(--blue-dark); line-height: 1.6; margin: .2rem 0 0; }

.sgn-kaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.15rem, 3vw, 1.5rem);
}

.sgn-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.sgn-velden-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sgn-veld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.sgn-veld-breed { grid-column: 1 / -1; }
.sgn-veld > span:first-child { font-size: .85rem; font-weight: 600; color: var(--text); }
.sgn-veld small { font-weight: 400; color: var(--text-muted); }
.sgn-veld abbr { color: var(--danger); text-decoration: none; border: 0; }
.sgn-veld input,
.sgn-veld select,
.sgn-veld textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: .95rem;
    font-family: inherit;
    padding: .6rem .75rem;
}
.sgn-veld input:focus, .sgn-veld select:focus, .sgn-veld textarea:focus { outline: 0; border-color: var(--primary); }
.sgn-veld textarea { resize: vertical; }

.sgn-privacy {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.6;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0;
    padding-top: 1rem;
}
.sgn-privacy .bi { margin-top: .15rem; flex-shrink: 0; }
.sgn-verplicht { font-size: .8rem; color: var(--text-muted); margin: .9rem 0 0; }

.sgn-versturen {
    width: 100%;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: .9rem 1rem;
    margin-top: 1rem;
    cursor: pointer;
}
.sgn-versturen:hover { background: var(--primary-dark); }

/* ── Zijbalk ────────────────────────────────────────────────────────────── */
.sgn-zijbalk { display: grid; gap: 1rem; position: sticky; top: 5.5rem; }
.sgn-zijkaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem 1.25rem;
}
.sgn-zijkaart h2 {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 0 0 .85rem;
}
.sgn-zijkaart p { font-size: .87rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.sgn-zijkaart-let { background: var(--blue-light); border-color: var(--blue-border); }
.sgn-zijkaart-let h2, .sgn-zijkaart-let p { color: var(--blue-dark); }

.sgn-verschil { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.sgn-verschil a { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; color: var(--primary-dark); text-decoration: none; }
.sgn-verschil a:hover { text-decoration: underline; }
.sgn-verschil p { font-size: .84rem; margin-top: .15rem; }

@media (max-width: 1099px) { .sgn-grid { grid-template-columns: 1fr; } .sgn-zijbalk { position: static; } }
@media (max-width: 767px) { .sgn-velden, .sgn-velden-drie { grid-template-columns: 1fr; } }

/* bestandskiezer in de huisstijl; de standaardknop van de browser valt uit de toon */
.sgn-veld input[type="file"] { padding: .35rem .4rem; font-size: .9rem; color: var(--text-muted); }
.sgn-veld input[type="file"]::file-selector-button {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-warm);
    color: var(--text);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    padding: .35rem .8rem;
    margin-right: .6rem;
    cursor: pointer;
}
.sgn-veld input[type="file"]::file-selector-button:hover { background: var(--band-groen); border-color: var(--band-groen-rand); color: var(--primary-darker); }