/* Spam-Schutz-Widget (core/templates/core/includes/captcha_widget.html).
   Eigenes Stylesheet, weil das Widget auch auf Seiten ohne hirsch.css laeuft
   (Login, Registrierung, Fileservice-Layout). */

.hr-captcha {
    margin: 18px 0;
    font-family: inherit;
}

/* Honeypot: aus dem Viewport schieben statt display:none.
   Bots, die gezielt nur sichtbare Felder ausfuellen, tappen so eher hinein. */
.hr-captcha-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
}

.hr-captcha-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #6b6b76;
    margin-bottom: 8px;
}

.hr-captcha-label .req { color: #c8102e; }

.hr-captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hr-captcha-img {
    display: block;
    width: 190px;
    height: 62px;
    border: 1px solid #dcdce3;
    border-radius: 8px;
    background: #f7f7f9;
    user-select: none;
    -webkit-user-drag: none;
}

.hr-captcha-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #dcdce3;
    border-radius: 8px;
    background: #fff;
    color: #6b6b76;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.hr-captcha-reload:hover { border-color: #c8102e; color: #c8102e; }
.hr-captcha-reload.is-busy { opacity: 0.5; pointer-events: none; }

/* Das "=" steht als Text neben dem Bild: im Bild selbst wuerde es Platz
   kosten, den die Ziffern brauchen. */
.hr-captcha-eq {
    font-size: 1.25rem;
    font-weight: 700;
    color: #6b6b76;
    line-height: 1;
}

.hr-captcha-input {
    width: 92px;
    padding: 11px 12px;
    border: 1px solid #dcdce3;
    border-radius: 8px;
    background: #fff;
    color: #16161a;
    font-size: 0.95rem;
    font-family: inherit;
    text-align: center;
}

.hr-captcha-input:focus { outline: none; border-color: #c8102e; }

/* Spinner-Pfeile in Zahlenfeldern stoeren hier nur. */
.hr-captcha-input::-webkit-outer-spin-button,
.hr-captcha-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hr-captcha-input { -moz-appearance: textfield; appearance: textfield; }

.hr-captcha-hint {
    display: block;
    margin-top: 7px;
    font-size: 0.76rem;
    color: #8a8a95;
}

.hr-captcha-error {
    margin: 0 0 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(200, 16, 46, 0.08);
    border: 1px solid rgba(200, 16, 46, 0.25);
    color: #c8102e;
    font-size: 0.84rem;
}

@media (max-width: 420px) {
    .hr-captcha-img { width: 100%; max-width: 190px; }
    .hr-captcha-input { width: 100%; }
}