/* ------------------------------------------------------------------------
   The verified tick.

   Loaded by BOTH the public page and the admin panel, because the panel
   previews the very same badge. The markup lives in ilkh-config.js; all the
   colour lives here.

   Every shape carries its own --badge-glow as a bare rgb triplet, so the
   breathing halo is mixed from the badge's own colour rather than a fixed
   blue. That is the whole trick: change the badge, the glow follows.

   Both host pages define --color-primary / --primary-rgb / --color-magenta /
   --magenta-rgb, so this file needs no token block of its own.
------------------------------------------------------------------------ */

/* The five badge colours as bare rgb triplets, defined once here because two
   things wear them now: these badges, and the glow behind a promo row on the
   public page. Written as triplets so either consumer can vary only the
   alpha. Magenta is the brand token — it follows the owner's colour picker,
   and always did. The other five are literal for the reason given below.

   Change one here and both the tick and any promo using it move together,
   which is the point. */
:root {
    --tick-blue: #0095f6;
    --tick-blue-rgb: 0, 149, 246;
    --tick-green: #16a34a;
    --tick-green-rgb: 22, 163, 74;
    --tick-yellow: #f5b301;
    --tick-yellow-rgb: 245, 179, 1;
    --tick-red: #dc2626;
    --tick-red-rgb: 220, 38, 38;
    --tick-violet: #9880fc;
    --tick-violet-rgb: 152, 128, 252;
}

.verify-badge {
    /* Overridden per shape below; this is the fallback if a class is missing. */
    --badge-glow: var(--tick-blue-rgb);

    /* The halo's three radii, named so a badge drawn larger than the 19px
       footer one can scale its glow with it. They used to be literals, which
       meant the 42px preview in the admin panel wore the same absolute halo
       as the badge less than half its size — proportionally a fifth of the
       glow, which reads as "the glow is not working" rather than "the glow is
       smaller". It was reported exactly that way. */
    --glow-still: 5px;
    --glow-rest: 3px;
    --glow-peak: 10px;

    width: 19px;
    height: 19px;
    display: inline-flex;
    flex-shrink: 0;
    filter: drop-shadow(0 0 var(--glow-still) rgba(var(--badge-glow), 0.55));
}

.verify-badge svg {
    width: 100%;
    height: 100%;
}

/* ---------- the tick ---------- */

/* White on everything except the yellow seal, where it would vanish. */
.verify-badge .vb-tick {
    stroke: #ffffff;
}

/* ---------- the six shapes ----------

   These colours are the badge's own, deliberately literal rather than pulled
   from the brand tokens. The owner asked for a specific green, yellow and red
   here, and wiring them to --color-green would also drag the BUY NOW button
   along whenever one changed. The badge is the only thing that wears them. */

/* Burst — blue, the original badge. */
.verify-badge.style-burst {
    --badge-glow: var(--tick-blue-rgb);
}

.verify-badge.style-burst .vb-a {
    stop-color: #4dc3ff;
}

.verify-badge.style-burst .vb-b {
    stop-color: var(--tick-blue);
}

/* Hex — magenta. */
.verify-badge.style-hex {
    --badge-glow: var(--magenta-rgb);
}

.verify-badge.style-hex .vb-a {
    stop-color: color-mix(in srgb, var(--color-magenta) 58%, white);
}

.verify-badge.style-hex .vb-b {
    stop-color: var(--color-magenta);
}

/* Circle — green. Deep enough that the white tick still reads on it; the
   brand's electric green is far too bright to carry white. */
.verify-badge.style-circle {
    --badge-glow: var(--tick-green-rgb);
}

.verify-badge.style-circle .vb-a {
    stop-color: #4ade80;
}

.verify-badge.style-circle .vb-b {
    stop-color: var(--tick-green);
}

/* Scallop — yellow. */
.verify-badge.style-scallop {
    --badge-glow: var(--tick-yellow-rgb);
}

.verify-badge.style-scallop .vb-a {
    stop-color: #fde68a;
}

.verify-badge.style-scallop .vb-b {
    stop-color: var(--tick-yellow);
}

/* White on yellow is unreadable, so this one tick goes dark. */
.verify-badge.style-scallop .vb-tick {
    stroke: #3d2b00;
}

/* Hex — red. */
.verify-badge.style-hexRed {
    --badge-glow: var(--tick-red-rgb);
}

.verify-badge.style-hexRed .vb-a {
    stop-color: #fb7185;
}

.verify-badge.style-hexRed .vb-b {
    stop-color: var(--tick-red);
}

/* Hex — violet. The lighter stop is mixed from the base rather than written
   out, the way the magenta one is: change --tick-violet and the whole
   gradient follows instead of half of it. */
.verify-badge.style-hexViolet {
    --badge-glow: var(--tick-violet-rgb);
}

.verify-badge.style-hexViolet .vb-a {
    stop-color: color-mix(in srgb, var(--tick-violet) 58%, white);
}

.verify-badge.style-hexViolet .vb-b {
    stop-color: var(--tick-violet);
}

/* ---------- breathing ---------- */

/* Only the halo moves — the badge itself does not scale or shift, so this
   reads as ambient light rather than as one more thing bouncing. */
@keyframes verifyBreathe {
    0%,
    100% {
        filter: drop-shadow(0 0 var(--glow-rest) rgba(var(--badge-glow), 0.38));
    }

    50% {
        filter: drop-shadow(0 0 var(--glow-peak) rgba(var(--badge-glow), 0.9));
    }
}

.verify-badge.breathing {
    animation: verifyBreathe 3.2s ease-in-out infinite;
}