/* IconCaptcha, dressed as one of the contact form's Bootstrap rows.

   The library ships a single hard-coded look — 330px wide box, blue accent, uppercase
   titles, 8px radius — that reads as a foreign widget dropped into the form. It exposes
   no custom properties, so the only way to reskin it is to re-declare its own selectors.
   That works because app.js imports this file after the library stylesheet: the rules
   below have the same specificity and win on load order alone. Keep that import order.

   Colours are literals rather than Bootstrap variables: this theme is Bootstrap 4,
   which has no --bs-* custom properties to read. #AD115A is the accent from
   styles/color/theme-red.css, #ced4da / .25rem the border and radius of .form-control.

   Only the frame and the palette are ours. The geometry of the challenge strip (the
   320px icons/selection area) is load-bearing: a click is sent as an x coordinate plus
   the element's width, which the server divides by the icon count, so widening it would
   make clicks land on the wrong icon. */

.iconcaptcha-widget {
    /* The library caps the widget at 330px. Every other control in the form is full
       width, and the captcha is just another row in it. */
    max-width: 100%;
    width: 100%;
    border-radius: 0.25rem;
}

.iconcaptcha-widget.iconcaptcha-theme-light {
    /* Matches .form-control: white field on the same hairline, not the library's grey
       on #d8d8d8. */
    background: #ffffff;
    border: 1px solid #ced4da;
}

.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-init:hover {
    background: #f7f7f7;
}

/* ===== Idle state ("Overte, že nie ste robot.") ===== */

.iconcaptcha-widget.iconcaptcha-init .iconcaptcha-modal__body-circle {
    border-width: 5px;
    border-color: #ad115a;
}

/* Same name as the library's, redeclared so the animation stops repainting the circle
   blue on every keyframe — it sets border-color on each step, which beats any colour
   set on the element itself. */
@keyframes captcha-breathing {
    0%,
    100% {
        transform: scale(1) translateZ(0);
        border-color: #ad115a;
    }
    25% {
        transform: scale(0.8) translateZ(0);
        border-color: #cf176d;
    }
    50% {
        transform: scale(1) translateZ(0);
        border-color: #ad115a;
    }
    75% {
        transform: scale(0.8) translateZ(0);
        border-color: #cf176d;
    }
}

.iconcaptcha-widget.iconcaptcha-init .iconcaptcha-modal__body-title,
.iconcaptcha-widget.iconcaptcha-success .iconcaptcha-modal__body-title {
    font-size: 14px;
    font-weight: 500;
    /* The library shouts this in bold; the labels next to it are 14px regular, and this
       line is a sentence, not a heading. */
    text-transform: none;
}

.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-init .iconcaptcha-modal__body-title {
    color: #666666;
}

/* ===== Challenge state ===== */

/* The instruction bar above the icons. */
.iconcaptcha-widget .iconcaptcha-modal__header span {
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__header {
    border-bottom: 1px solid #e9ecef;
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__header span {
    color: #636363;
}

/* The library emphasises the important word ("najmenej") with a <u>. The accent is a
   highlight, not a text colour — keep the ink and put it in the underline. */
.iconcaptcha-widget .iconcaptcha-modal__header span u {
    text-decoration-color: #ad115a;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.iconcaptcha-widget .iconcaptcha-modal__body-selection > i {
    background: #ad115a;
    border: 1px solid #ffffff;
}

.iconcaptcha-widget .iconcaptcha-modal__body .captcha-loader {
    border-width: 5px;
    border-color: #ad115a;
}

/* ===== Result states ===== */

/* Wrong icon / too many attempts: a headline and one line of explanation. */
.iconcaptcha-widget .iconcaptcha-modal__body-title {
    top: 10px;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
}

.iconcaptcha-widget .iconcaptcha-modal__body-subtitle {
    top: 33px;
    font-size: 12px;
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__body-subtitle {
    color: #888888;
}

/* The same red .invalid-feedback draws the field errors under the controls in. */
.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-error .iconcaptcha-modal__body-title {
    color: #dc3545;
}

/* The green of the .alert-success the form shows once it has been sent. */
.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-success .iconcaptcha-modal__body-title {
    color: #28a745;
}

.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-success .iconcaptcha-modal__body-checkmark svg {
    stroke: #28a745;
}

/* An unsolved captcha fails validation like any other field, but Bootstrap's .is-invalid
   never reaches it — the widget is not an input, and the bundle renders its own row
   block. The red border is inferred from the violation inside that row instead. */
.iconcaptcha-row:has(.invalid-feedback) .iconcaptcha-widget.iconcaptcha-theme-light {
    border-color: #dc3545;
}

/* ===== Attribution footer ===== */

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__footer {
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #e9ecef;
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__footer > span a,
.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__body-info a {
    /* The library prints the credit link in bold uppercase blue, which ends up louder
       than the instruction it sits under. Attribution stays, the shouting does not. */
    color: #a7a7a7;
    font-weight: 500;
    text-transform: none;
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__footer > span a:hover {
    color: #ad115a;
}