/**
 * wh_recaptcha — Frontend Styles v1.2 (Hummingbird compatible)
 *
 * ⚠️ STANDARD MODULU wh_* (kanon: „panel Vue + front w pelni na tokenach"):
 * odstepy, promien, typografia i kolory ida przez `var(--wh-*, <dotychczasowa
 * wartosc>)`. Fallback = to, co bylo, wiec migracja nie zmienia wygladu.
 *
 * Sam widget reCAPTCHA renderuje Google w <iframe> — jego wygladu nie stylujemy
 * (i nie wolno), sterujemy tylko motywem light/dark z panelu.
 */
.wh-recaptcha-box {
    margin: var(--wh-space-sm, 1rem) 0;
    padding: 0;
    clear: both;
    width: 100%;
}

.wh-recaptcha-box .wh-recaptcha-widget {
    display: inline-block;
}

.wh-recaptcha-contact {
    margin: var(--wh-space-md, 1.25rem) 0 var(--wh-space-xs, 0.75rem);
}

.wh-recaptcha-login {
    margin: var(--wh-space-md, 1.25rem) 0 var(--wh-space-xs, 0.75rem);
}

.wh-recaptcha-register {
    margin: var(--wh-space-sm, 1rem) 0 var(--wh-space-2xs, 0.5rem);
}

/* Newsletter: full-width row below the input+button line */
.wh-recaptcha-newsletter {
    flex-basis: 100%;
    width: 100%;
    margin: var(--wh-space-xs, 0.75rem) 0 0 0;
    order: 99; /* Push to end in flex layouts */
}

/* Handle newsletter forms that use flex row */
.block-newsletter form,
.block_newsletter form {
    flex-wrap: wrap !important;
}

/* === Custom hook widget === */
.wh-recaptcha-custom-hook {
    margin: var(--wh-space-sm, 1rem) 0;
}

.wh-recaptcha-v3-hook {
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* === Inline error message === */
.wh-recaptcha-error {
    color: var(--wh-color-semantic-danger, #dc2626);
    font-size: var(--wh-font-size-small, 12px);
    margin-top: var(--wh-space-2xs, 0.5rem);
    padding: var(--wh-space-3xs, 0.375rem) var(--wh-space-2xs, 0.625rem);
    background: var(--wh-color-danger-soft, color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 6%, #fff));
    /* Obramowanie liczy z koloru bledu — bez tokenu zostaloby rozowe nawet po
       zmianie palety semantycznej branzy. */
    border: 1px solid var(--wh-color-danger-border, #f5c6cb);
    border-radius: var(--wh-radius-sm, 4px);
    line-height: 1.4;
}

/* Newsletter error: ensure it spans full width */
.wh-recaptcha-newsletter .wh-recaptcha-error {
    flex-basis: 100%;
}

@media (max-width: 400px) {
    .wh-recaptcha-box .wh-recaptcha-widget,
    .wh-recaptcha-custom-hook .wh-recaptcha-custom-widget {
        transform: scale(0.85);
        transform-origin: 0 0;
    }
}