/**
 * Counter widget.
 *
 * Scoped to `.goxom-cn`, which only this widget outputs. Everything the Style
 * tab reaches is a custom property, so the panel can retune the tile without
 * the stylesheet knowing what it will send.
 *
 * Colours fall back to the theme's tokens where they exist, so a fresh widget
 * already looks like the site rather than like a default.
 */

.goxom-cn {
    --cn-ink: var(--color-black, #0C2338);
    --cn-body: var(--color-body, #5A7387);
    --cn-accent: var(--color-primary, #1273C4);
    --cn-surface: #fff;
    --cn-border: var(--color-border, #D5E3EF);

    --cn-align: center;
    --cn-ibox: 72px;
    --cn-isize: 32px;
    --cn-affix: 58%;

    position: relative;
    isolation: isolate;
    /* Block rather than flex on purpose: alignment then rides on `text-align`
       alone, which is a single value the panel can send. A flex column would
       need `align-items` translated from left/center/right to
       flex-start/center/flex-end as well, and Elementor emits one value. */
    display: block;
    padding: 38px 28px 32px;
    overflow: hidden;
    text-align: var(--cn-align);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.goxom-cn *,
.goxom-cn *::before,
.goxom-cn *::after {
    box-sizing: border-box;
}

/* ───────────────────────────────────────── tiles */

.goxom-cn--plain {
    padding: 0;
    background: none;
}

.goxom-cn--card {
    background-color: var(--cn-surface);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(6, 23, 38, 0.04), 0 18px 40px -26px rgba(6, 23, 38, 0.35);
}

.goxom-cn--outline {
    border: 1px solid var(--cn-border);
    border-radius: 20px;
    background-color: transparent;
}

.goxom-cn--glass {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    --cn-ink: #fff;
    --cn-body: rgba(255, 255, 255, 0.72);
}

.goxom-cn--gradient {
    border-radius: 20px;
    background-image: linear-gradient(140deg, var(--cn-accent) 0%, color-mix(in srgb, var(--cn-accent) 62%, #061726) 100%);
    box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--cn-accent) 70%, transparent);
    --cn-ink: #fff;
    --cn-body: rgba(255, 255, 255, 0.78);
}

/* color-mix is recent; this keeps the tile solid where it is not understood. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .goxom-cn--gradient {
        background-image: linear-gradient(140deg, var(--cn-accent) 0%, rgba(6, 23, 38, 0.92) 100%);
    }
}

.goxom-cn--lift:hover,
.goxom-cn--lift.is-hold {
    transform: translateY(-6px);
}

.goxom-cn--card.goxom-cn--lift:hover {
    box-shadow: 0 6px 12px rgba(6, 23, 38, 0.06), 0 30px 60px -28px rgba(6, 23, 38, 0.45);
}

.goxom-cn--outline.goxom-cn--lift:hover {
    border-color: var(--cn-accent);
}

/* A wash that follows the accent, so a hovered tile warms rather than jumps. */
.goxom-cn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 0%, var(--cn-accent) 0%, transparent 62%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.goxom-cn--card:hover::before,
.goxom-cn--outline:hover::before {
    opacity: 0.06;
}

/* ───────────────────────────────────────── accent bar & sheen */

.goxom-cn__topbar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background-image: linear-gradient(90deg, var(--cn-accent), color-mix(in srgb, var(--cn-accent) 45%, #fff));
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .goxom-cn__topbar {
        background-image: none;
        background-color: var(--cn-accent);
    }
}

.goxom-cn--topbar:hover .goxom-cn__topbar {
    width: 100%;
}

.goxom-cn--glass .goxom-cn__topbar,
.goxom-cn--gradient .goxom-cn__topbar {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.85);
}

/* A light that sweeps across on hover. Clipped by the tile's own overflow. */
.goxom-cn--sheen::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -60%;
    width: 42%;
    transform: skewX(-18deg);
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    opacity: 0;
    pointer-events: none;
    /* Above the tile's own background but below the text, the same layer the
       wash and the ghost number sit on — the tile isolates, so -1 stays inside. */
    z-index: -1;
}

.goxom-cn--sheen:hover::after {
    opacity: 1;
    animation: goxomCnSheen 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On a white card the sweep has to darken rather than lighten to be seen. */
.goxom-cn--card.goxom-cn--sheen::after,
.goxom-cn--outline.goxom-cn--sheen::after {
    background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cn-accent) 12%, transparent), transparent);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .goxom-cn--card.goxom-cn--sheen::after,
    .goxom-cn--outline.goxom-cn--sheen::after {
        background-image: linear-gradient(90deg, transparent, rgba(18, 115, 196, 0.12), transparent);
    }
}

@keyframes goxomCnSheen {
    from { left: -60%; }
    to { left: 130%; }
}

/* ───────────────────────────────────────── ghost number */

.goxom-cn__ghost {
    position: absolute;
    right: -6px;
    bottom: -26px;
    font-size: 116px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--cn-ink);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

/* ───────────────────────────────────────── icon */

.goxom-cn__icon {
    /* inline-grid so `text-align` on the tile positions it, the same way it
       positions the number and the label. */
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    flex: none;
    width: var(--cn-ibox);
    height: var(--cn-ibox);
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--cn-accent) 12%, transparent);
    color: var(--cn-accent);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .goxom-cn__icon {
        background-color: rgba(18, 115, 196, 0.12);
    }
}

.goxom-cn--glass .goxom-cn__icon,
.goxom-cn--gradient .goxom-cn__icon {
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.goxom-cn__icon img {
    display: block;
    width: var(--cn-isize);
    height: auto;
    max-height: var(--cn-isize);
    object-fit: contain;
}

/* The upload used as a silhouette: the mark is painted with a colour and the
   image only decides its shape, so a white or black export reads on any tile.
   `currentColor` keeps it on the same colour as a library icon, which means
   the hover fill below works on both without a second rule. */
.goxom-cn__mark {
    display: block;
    width: var(--cn-isize);
    height: var(--cn-isize);
    background-color: currentColor;
    -webkit-mask-image: var(--cn-mask);
    mask-image: var(--cn-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.goxom-cn__icon--white {
    color: #fff;
}

/* Halo ring — drawn with a shadow so it costs no layout and can widen freely. */
.goxom-cn--ring .goxom-cn__icon {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--cn-accent) 8%, transparent);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, color 0.35s ease, box-shadow 0.4s ease;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .goxom-cn--ring .goxom-cn__icon {
        box-shadow: 0 0 0 6px rgba(18, 115, 196, 0.08);
    }
}

.goxom-cn--ring:hover .goxom-cn__icon {
    box-shadow: 0 0 0 11px color-mix(in srgb, var(--cn-accent) 10%, transparent);
}

.goxom-cn--ring.goxom-cn--glass:hover .goxom-cn__icon,
.goxom-cn--ring.goxom-cn--gradient:hover .goxom-cn__icon {
    box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.12);
}

/* Flood on hover: the box takes the accent and the mark goes white. */
.goxom-cn--invert:hover .goxom-cn__icon {
    background-color: var(--cn-accent);
    color: #fff;
}

.goxom-cn--invert.goxom-cn--glass:hover .goxom-cn__icon,
.goxom-cn--invert.goxom-cn--gradient:hover .goxom-cn__icon {
    background-color: #fff;
    color: var(--cn-accent);
}

.goxom-cn__icon svg {
    width: var(--cn-isize);
    height: var(--cn-isize);
    fill: currentColor;
}

.goxom-cn__icon i {
    font-size: var(--cn-isize);
    line-height: 1;
}

.goxom-cn--ico-pop:hover .goxom-cn__icon {
    transform: scale(1.12);
}

.goxom-cn--ico-tilt:hover .goxom-cn__icon {
    transform: rotate(-8deg) scale(1.06);
}

.goxom-cn--ico-float:hover .goxom-cn__icon {
    transform: translateY(-6px);
}

/* Icon beside the number rather than above it. The row always reads
   left-to-right, so it opts out of the tile's text alignment. */
.goxom-cn--icon-side {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
}

.goxom-cn--icon-side .goxom-cn__body {
    min-width: 0;
}

/* ───────────────────────────────────────── body */

.goxom-cn__body {
    min-width: 0;
    width: 100%;
}

.goxom-cn__value {
    /* Inline children, so the affixes sit on the number's baseline for free
       and the whole line follows `text-align`. */
    display: block;
    margin-top: 20px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--cn-ink);
}

/* Nothing above it to space away from. */
.goxom-cn--noicon .goxom-cn__value,
.goxom-cn--icon-side .goxom-cn__value {
    margin-top: 0;
}

.goxom-cn__num {
    /* Digits of equal width, so a counting number does not jitter its
       neighbours on every frame. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.goxom-cn__affix {
    font-size: var(--cn-affix);
    font-weight: 600;
    line-height: 1;
    color: var(--cn-accent);
}

.goxom-cn__affix--before {
    margin-right: 2px;
}

.goxom-cn__affix--after {
    margin-left: 2px;
}

.goxom-cn--gradient .goxom-cn__affix,
.goxom-cn--glass .goxom-cn__affix {
    color: rgba(255, 255, 255, 0.85);
}

/* Gradient number — the fill is clipped to the glyphs, so the counting text
   keeps its paint as the value changes. */
.goxom-cn--numgrad .goxom-cn__num {
    background-image: linear-gradient(120deg, var(--cn-ink) 10%, var(--cn-accent) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.goxom-cn__rule {
    display: inline-block;
    width: 34px;
    height: 3px;
    margin: 14px 0 4px;
    border-radius: 999px;
    background-color: var(--cn-accent);
    opacity: 0.55;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.goxom-cn:hover .goxom-cn__rule {
    width: 54px;
    opacity: 1;
}

.goxom-cn--glass .goxom-cn__rule,
.goxom-cn--gradient .goxom-cn__rule {
    background-color: rgba(255, 255, 255, 0.8);
}

.goxom-cn__label {
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cn-ink);
}

/* The rule already provides the gap above the label. */
.goxom-cn__rule + .goxom-cn__label {
    margin-top: 0;
}

.goxom-cn__text {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--cn-body);
}

/* ───────────────────────────────────────── progress bar */

.goxom-cn__bar {
    position: relative;
    width: 100%;
    height: 6px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--cn-ink) 10%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .goxom-cn__bar {
        background-color: rgba(12, 35, 56, 0.1);
    }
}

.goxom-cn--glass .goxom-cn__bar,
.goxom-cn--gradient .goxom-cn__bar {
    background-color: rgba(255, 255, 255, 0.24);
}

.goxom-cn__bar-fill {
    --cn-fill: 0%;

    display: block;
    width: var(--cn-fill);
    height: 100%;
    border-radius: inherit;
    background-image: linear-gradient(90deg, var(--cn-accent), color-mix(in srgb, var(--cn-accent) 55%, #fff));
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .goxom-cn__bar-fill {
        background-image: none;
        background-color: var(--cn-accent);
    }
}

.goxom-cn--gradient .goxom-cn__bar-fill {
    background-image: none;
    background-color: #fff;
}

/* The fill grows from nothing only once the script has confirmed it can run;
   without it the bar is already at its width. */
.goxom-cn--js .goxom-cn__bar-fill {
    width: 0;
    transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.goxom-cn--js.is-in .goxom-cn__bar-fill {
    width: var(--cn-fill);
}

/* ───────────────────────────────────────── entrance */

.goxom-cn--js {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.goxom-cn--js.is-in {
    opacity: 1;
    transform: none;
}

/* The lift has to win over the entrance transform once the tile has landed. */
.goxom-cn--js.is-in.goxom-cn--lift:hover,
.goxom-cn--js.is-in.goxom-cn--lift.is-hold {
    transform: translateY(-6px);
}

/* ───────────────────────────────────────── responsive */

@media (max-width: 767px) {
    .goxom-cn__value {
        font-size: 36px;
    }

    .goxom-cn__ghost {
        font-size: 88px;
    }
}

@media (max-width: 479px) {
    .goxom-cn--icon-side {
        gap: 14px;
    }

    .goxom-cn__value {
        font-size: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .goxom-cn,
    .goxom-cn__icon,
    .goxom-cn__bar-fill,
    .goxom-cn__topbar,
    .goxom-cn__rule,
    .goxom-cn::before {
        transition: none;
    }

    .goxom-cn--lift:hover {
        transform: none;
    }

    .goxom-cn--sheen::after,
    .goxom-cn--sheen:hover::after {
        display: none;
        animation: none;
    }
}