/* ============================================================
   slider-captcha.css — Slider/puzzle CAPTCHA widget (.ft-captcha) and the shared popover
   dialog (.ft-captcha-popover) that hosts it.

   Used by the Contact page form and the footer newsletter box, both through the shared
   JsCommon/ClsCaptchaPopover.js dialog (see also JsCommon/ClsSliderCaptcha.js). Loaded last
   in _Layout.cshtml so nothing in style1.css/responsive.css overrides these rules.

   .ft-captcha_track is deliberately kept in a physical LTR track regardless
   of page direction: the piece/handle positions the widget computes are
   plain left-edge pixel offsets from the server-generated image, the same
   convention essentially every slider CAPTCHA uses. Only the track (and its
   image children) is pinned LTR - the hint text, error text and fallback
   question/label around it stay in the page's own direction so Arabic still
   reads right-to-left, matching how the rest of the Contact form behaves.
   ============================================================ */

.ft-captcha {
    max-width: 340px;
    margin: var(--sp-4, 1rem) 0;
    padding: var(--sp-3, 0.75rem);
    border: 1px solid rgba(17, 29, 66, 0.12);
    border-radius: var(--radius-md, 14px);
    background: #fff;
}

.ft-captcha_hint {
    margin: 0 0 var(--sp-2, 0.5rem);
    font-size: 13px;
    color: var(--ft-muted, #51607a);
}

.ft-captcha_track {
    position: relative;
    direction: ltr;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm, 8px);
    background: rgba(17, 29, 66, 0.06);
    /* Height set inline by the widget once a challenge loads; this keeps the box from
       collapsing to 0 for the brief moment before the first challenge image arrives. */
    min-height: 120px;
}

.ft-captcha--loading .ft-captcha_track {
    animation: ft-captcha-pulse 1.2s ease-in-out infinite;
}

@keyframes ft-captcha-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.ft-captcha_bg,
.ft-captcha_piece {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.ft-captcha_piece {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.ft-captcha_handle {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border: 2px dashed rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    cursor: grab;
    touch-action: none;
    /* Not decorative - this is the actual draggable/focusable control (role="slider"), the
       piece image beneath it is purely visual. */
}

.ft-captcha--dragging .ft-captcha_handle {
    cursor: grabbing;
}

.ft-captcha_handle:focus-visible {
    outline: 2px solid var(--main-color, #176090);
    outline-offset: 2px;
}

.ft-captcha--busy .ft-captcha_handle {
    cursor: not-allowed;
}

.ft-captcha--busy {
    opacity: 0.65;
    pointer-events: none;
}

.ft-captcha_error {
    margin: var(--sp-2, 0.5rem) 0 0;
    font-size: 13px;
    color: #ff4d4f;
}

.ft-captcha_error:empty {
    display: none;
}

.ft-captcha_fallback-toggle {
    display: inline-block;
    margin-top: var(--sp-2, 0.5rem);
    padding: 0;
    border: none;
    background: none;
    font-size: 12.5px;
    text-decoration: underline;
    color: var(--main-color, #176090);
    cursor: pointer;
}

.ft-captcha_fallback-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.ft-captcha_fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
    margin-top: var(--sp-2, 0.5rem);
}

.ft-captcha_fallback-label {
    font-size: 13px;
    color: var(--ft-navy, #111d42);
}

.ft-captcha_fallback-input {
    width: 90px;
    padding: 6px 10px;
    border: 1px solid rgba(17, 29, 66, 0.2);
    border-radius: var(--radius-sm, 8px);
    font-size: 14px;
}

@media (max-width: 480px) {
    .ft-captcha {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------
   Shared CAPTCHA confirmation popover (.ft-captcha-popover, markup in _Layout.cshtml).
   One dialog, opened by both the Contact page (JsPages/Contact.js) and the footer
   "Stay in the Loop" box (JsCommon/ClsNewsletter.js) through JsCommon/ClsCaptchaPopover.js.
   Wraps the SAME .ft-captcha widget either caller would otherwise embed inline.

   The [hidden] attribute is what keeps the footer's appearance and layout completely
   unchanged while the popover is closed - display is only ever set to flex on the
   :not([hidden]) rule below, so a plain `.ft-captcha-popover { display: flex }` can never
   accidentally out-rank the browser's own `[hidden]{display:none}` default.
   ------------------------------------------------------------ */
.ft-captcha-popover {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4, 1rem);
}

.ft-captcha-popover:not([hidden]) {
    display: flex;
}

.ft-captcha-popover_backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 29, 66, 0.55);
}

.ft-captcha-popover_panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: var(--sp-5, 1.5rem) var(--sp-4, 1rem);
    border-radius: var(--radius-lg, 22px);
    background: #fff;
    box-shadow: 0 20px 60px rgba(17, 29, 66, 0.35);
}

.ft-captcha-popover_title {
    margin: 0 0 var(--sp-3, 0.75rem);
    padding-inline-end: 30px;
    font-size: 18px;
    color: var(--ft-navy, #111d42);
}

.ft-captcha-popover_close {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 29, 66, 0.06);
    color: var(--ft-navy, #111d42);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ft-captcha-popover_close:focus-visible,
.ft-captcha-popover_confirm:focus-visible {
    outline: 2px solid var(--main-color, #176090);
    outline-offset: 2px;
}

.ft-captcha-popover_confirm {
    display: block;
    width: 100%;
    margin-top: var(--sp-3, 0.75rem);
    border: none;
    text-align: center;
    cursor: pointer;
}

.ft-captcha-popover_confirm:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.ft-captcha-popover .ft-captcha {
    margin: 0;
    max-width: 100%;
}

@media (max-width: 480px) {
    .ft-captcha-popover_panel {
        max-width: 100%;
    }
}