/* -------------------------------------------------------------------------
   Kuwait Mobile ID ("هويتي") login wait popup — #Modal_PACI_AUTH.

   Loaded after Modal_V4.css so these rules win over the generic
   .modal-sweet ones. Everything is scoped under .paci-auth, which only
   #Modal_PACI_AUTH carries, so the other sweet modals are untouched.
   ------------------------------------------------------------------------- */

/* rtl_V2.css sets "* { direction: rtl; text-align: right }". A universal
   selector matches every element in here directly, so centring the card is
   not enough - inheritance never reaches the children, and the countdown ends
   up pinned to the right edge of its box, outside the ring. Every element in
   the popup has to be told explicitly. */
.paci-auth .modal-content,
.paci-auth .modal-content * {
    text-align: center;
}

.paci-auth .modal-dialog {
    width: 452px;
    max-width: calc(100% - 24px);
    box-shadow: none; /* .modal-sweet paints a hard offset drop shadow */
}

.paci-auth .modal-content {
    position: relative;
    overflow: hidden;
    direction: rtl;
    padding: 0 0 32px;
    border: none;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 28px 64px rgba(9, 35, 48, 0.32), 0 2px 10px rgba(9, 35, 48, 0.10);
}

    /* Brand strip across the top of the card. */
    .paci-auth .modal-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, #0b6e8f 0%, #12a4a4 50%, #8dc63f 100%);
    }

.paci-auth .modal-header {
    display: block;
    padding: 34px 26px 0;
    border-bottom: none;
}

/* The badge pulses while the request is outstanding, so the popup reads as
   waiting on something rather than frozen. */
.paci-auth-badge {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #e9f4f9 0%, #d5e9f2 100%);
}

    .paci-auth-badge i {
        position: relative;
        z-index: 2;
        font-size: 42px;
        line-height: 88px;
        color: #0b6e8f;
    }

.paci-auth-badge-halo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(11, 110, 143, 0.35);
    animation: paci-auth-halo 2.6s ease-out infinite;
}

.paci-auth-badge-halo-2 {
    animation-delay: 1.3s;
}

@keyframes paci-auth-halo {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.paci-auth .modal-title {
    margin: 22px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: #0e2c3a;
}

.paci-auth .modal-body {
    padding: 14px 30px 0;
    font-size: 15px;
    line-height: 1.95;
    color: #55727f;
}

.paci-auth .PACI_AUTH_MSG {
    color: #3d5d6b;
}

.paci-auth .paci-auth-note {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.9;
    color: #7591a0;
}

.paci-auth .paci-auth-divider {
    height: 1px;
    margin: 22px auto 20px;
    background: linear-gradient(90deg, rgba(205,222,231,0) 0%, #cddee7 50%, rgba(205,222,231,0) 100%);
}

.paci-auth .paci-auth-label {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #7591a0;
}

/* Circular countdown. The bar is a full-circumference dash that MasterScript
   shortens once a second, so what is left of the ring is what is left of the
   five minutes. The track underneath has to stay clearly darker than the card
   or there is nothing for the arc to be read against, and the cap has to be
   butt: a round cap paints half a stroke width past each end, which closes the
   gap back up and makes the first minute look like a full circle. */
.paci-auth-ring {
    position: relative;
    width: 152px;
    height: 152px;
    margin: 0 auto;
}

    .paci-auth-ring svg {
        width: 100%;
        height: 100%;
        /* The mirror flips the sweep anticlockwise, the direction the rest of
           the page reads in, and the rotation puts its start at twelve
           o'clock. Order matters: rotate(-90deg) would start it at six. */
        transform: rotate(90deg) scaleX(-1);
    }

.paci-auth-ring-track {
    fill: none;
    stroke: #7591a0; /* 3.33:1 against the white card - above the WCAG floor
                       for a non-text indicator. Anything lighter and the
                       spent part of the ring reads as background. */
    stroke-width: 8;
}

.paci-auth-ring-bar {
    fill: none;
    stroke: url(#PACI_AUTH_GRAD);
    stroke-width: 8;
    stroke-linecap: butt;
    stroke-dasharray: 314.159; /* 2 * PI * 50, the circle radius */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}

/* Rides the head of the remaining arc, so the ring is visibly moving even in
   the first minute when the arc has barely shortened. */
.paci-auth-ring-head {
    fill: #d63b57;
    stroke: #ffffff;
    stroke-width: 3;
    transform-box: view-box;
    /* MasterScript rotates this with the SVG attribute form,
       rotate(<deg> 60 60), which already carries the centre. A CSS
       transform-origin is applied ON TOP of that, so 60px 60px here made the
       browser rotate about (120,120): the dot left the ring and swung across
       the card - 139 units from the centre at the halfway mark, on a ring of
       radius 50. 0 0 contributes nothing and lets the attribute mean what it
       says. Do not "restore" the centre here without also dropping it from
       the attribute in MasterScript. */
    transform-origin: 0 0;
    transition: transform 1s linear, fill 0.4s linear;
}

.paci-auth-ring-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: #0e2c3a;
    direction: ltr; /* the clock always reads m:ss, never ss:m */
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* stop the digits jittering each second */
}

/* Three dots keeping time with the ten-second status checks. */
.paci-auth-waiting {
    margin-top: 18px;
    line-height: 0;
}

.paci-auth-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 4px;
    border-radius: 50%;
    background: #b3c7d1;
    animation: paci-auth-blink 1.4s ease-in-out infinite;
}

    .paci-auth-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .paci-auth-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes paci-auth-blink {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.85);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* The last thirty seconds. */
.paci-auth-ring-urgent .paci-auth-ring-bar {
    stroke: url(#PACI_AUTH_GRAD_URGENT);
}

.paci-auth-ring-urgent .paci-auth-ring-head {
    fill: #a51c25;
}

.paci-auth-ring-urgent .paci-auth-ring-text {
    color: #c62828;
    animation: paci-auth-pulse 1s ease-in-out infinite;
}

@keyframes paci-auth-pulse {
    50% {
        opacity: 0.45;
    }
}

@media (max-width: 480px) {
    .paci-auth .modal-content {
        border-radius: 16px;
        padding-bottom: 26px;
    }

    .paci-auth .modal-header {
        padding: 26px 18px 0;
    }

    .paci-auth-badge {
        width: 76px;
        height: 76px;
    }

        .paci-auth-badge i {
            font-size: 36px;
            line-height: 76px;
        }

    .paci-auth .modal-title {
        font-size: 20px;
    }

    .paci-auth .modal-body {
        padding: 12px 18px 0;
        font-size: 14px;
    }

    .paci-auth .paci-auth-note {
        font-size: 13px;
    }

    .paci-auth-ring {
        width: 132px;
        height: 132px;
    }

    .paci-auth-ring-text {
        font-size: 30px;
    }
}

/* Respect a reduced-motion preference: the countdown still counts, it just
   stops pulsing and sweeping. */
@media (prefers-reduced-motion: reduce) {
    .paci-auth-badge-halo,
    .paci-auth-dot,
    .paci-auth-ring-urgent .paci-auth-ring-text {
        animation: none;
    }

    .paci-auth-ring-bar,
    .paci-auth-ring-head {
        transition: none;
    }
}