/* ==========================================================================
   KYC status badges.
   --------------------------------------------------------------------------
   One look for the four states, shared by the customer account page and the
   admin console so the two can never drift apart.

   Colour alone is not enough - each state also carries its own icon and
   wording, so it still reads correctly in greyscale or to someone who
   cannot separate red from green.
   ========================================================================== */

.ks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 13px;
    padding: 3px 12px 3px 9px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .2px;
    text-transform: none;
    white-space: nowrap;
    border: 1px solid transparent;
    vertical-align: middle;
}

.ks svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: block;
}

/* ---------- not started ---------- */

/* The grey is darker than it looks like it needs to be: at #7d766c it only
   reached 3.9:1 against this background, short of the 4.5:1 WCAG AA needs. */
.ks.is-none {
    background: #f1efea;
    border-color: #e2ddd2;
    color: #6b6459;
}

/* ---------- pending ---------- */

.ks.is-pending {
    background: #fff6dd;
    border-color: #f2dfa4;
    color: #8a6d10;
}

/* a slow pulse, so "waiting" reads as active rather than stalled */
.ks.is-pending svg {
    animation: ks-pulse 1.9s ease-in-out infinite;
    transform-origin: center;
}

@keyframes ks-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* ---------- verified ---------- */

.ks.is-verified {
    background: #e7f6ea;
    border-color: #b6e0be;
    color: #1f6b26;
}

/* ---------- rejected ---------- */

.ks.is-rejected {
    background: #fdeceb;
    border-color: #f2bdb7;
    color: #a3271c;
}

/* ---------- larger variant, for the card header ---------- */

.ks.ks-lg {
    font-size: 12px;
    padding: 4px 14px 4px 11px;
    border-radius: 15px;
}

.ks.ks-lg svg { width: 15px; height: 15px; }

/* ---------- document tile state ---------- */

.ksd {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    border-radius: 9px;
    padding: 2px 9px 2px 7px;
    background: #f1efea;
    color: #8d857a;
    white-space: nowrap;
}

.ksd svg { width: 12px; height: 12px; flex: 0 0 auto; display: block; }

.ksd.is-done { background: #e7f6ea; color: #1f6b26; }

@media (prefers-reduced-motion: reduce) {
    .ks.is-pending svg { animation: none; }
}