/* ==========================================================================
   MegaPets 2.0 — Delivery Countries / Showcase

   File path: components/delivery-countries-blocks/delivery-countries-showcase/delivery-countries-showcase.css
   Responsibility: Present one delivery-country statistic and changing flag.
   Provides: Premium showcase geometry, flag treatment and unified group motion.
   Reads: MegaPets Design System tokens.
   Saves meta fields: None.
   Consumed by: components/delivery-countries-blocks/delivery-countries-showcase/delivery-countries-showcase.php.
   Connected files: delivery-countries-showcase.php, delivery-countries-showcase.js and
                    assets/media/mp-delivery-countries-showcase-flags.svg.
   Dependencies: assets/css/design-system.css and style.css.
   External systems: None.
   Architecture: Block-local CSS; JavaScript only changes state classes.
   ========================================================================== */

.mp-delivery-countries-showcase,
.mp-delivery-countries-showcase * {
    box-sizing: border-box;
}

.mp-delivery-countries-showcase {
    --mp-delivery-showcase-exit-duration: var(--mp-duration-fast);

    position: relative;
    width: 100%;
    min-height: 62px;
    overflow: hidden;
    padding: 9px 10px;
    border: var(--mp-border-width) solid var(--mp-color-border-subtle);
    border-radius: var(--mp-radius-small);
    background: transparent;
    box-shadow: none;
    color: var(--mp-color-brown-chocolate);
    pointer-events: none;
    user-select: none;
}

.mp-delivery-countries-showcase__row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--mp-decorative-line-height)
        minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    min-height: 42px;
}

.mp-delivery-countries-showcase__stat {
    display: flex;
    align-items: center;
    justify-content: end;
    justify-self: end;
    gap: 4px;
    min-width: 0;
    color: var(--mp-color-gold-dark);
    text-transform: uppercase;
}

.mp-delivery-countries-showcase__number {
    flex: 0 0 auto;
    color: inherit;
    font-family: var(--mp-font-body);
    font-size: var(--mp-compact-heading-font-size);
    line-height: 1.1;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: .06em;
    font-variant-numeric: lining-nums tabular-nums;
}

.mp-delivery-countries-showcase__label {
    display: block;
    color: inherit;
    font-family: var(--mp-font-body);
    font-size: var(--mp-compact-heading-font-size);
    line-height: 1.1;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: .06em;
    text-align: left;
    white-space: nowrap;
}

.mp-delivery-countries-showcase__divider {
    display: block;
    width: 32px;
    height: var(--mp-decorative-line-height);
    justify-self: center;
    margin: 0;
    background: var(--mp-decorative-divider-line);
    transform: rotate(90deg);
    transform-origin: center;
}

.mp-delivery-countries-showcase__country {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity
        var(--mp-delivery-showcase-exit-duration)
        var(--mp-ease),
        transform
        var(--mp-delivery-showcase-exit-duration)
        var(--mp-ease);
}

.mp-delivery-countries-showcase__country-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.mp-delivery-countries-showcase__country.is-leaving {
    opacity: 0;
    transform: translateY(-3px);
}

.mp-delivery-countries-showcase__country.is-entering {
    opacity: 0;
    transform: translateY(3px);
    transition: none;
    animation: none;
}

.mp-delivery-countries-showcase__country.is-arriving {
    animation:
        mp-delivery-countries-showcase-country-arrive
        var(--mp-duration-normal)
        var(--mp-ease)
        both;
}

.mp-delivery-countries-showcase__flag-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 21px;
    opacity: 1;
    filter: drop-shadow(
        0 0 .55px
        color-mix(
            in srgb,
            var(--mp-color-brown-chocolate) 58%,
            transparent
        )
    );
}

.mp-delivery-countries-showcase__flag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 21px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='black' d='M1 3C11 0 19 5 30 2S49 4 59 2C57 11 61 18 58 27C56 32 60 36 58 38C48 40 40 35 29 38S10 36 1 39C3 30-1 22 2 14C4 9 0 6 1 3Z'/%3E%3C/svg%3E");
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='black' d='M1 3C11 0 19 5 30 2S49 4 59 2C57 11 61 18 58 27C56 32 60 36 58 38C48 40 40 35 29 38S10 36 1 39C3 30-1 22 2 14C4 9 0 6 1 3Z'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mp-delivery-countries-showcase__flag::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            103deg,
            transparent 8%,
            color-mix(
                in srgb,
                var(--mp-color-surface) 11%,
                transparent
            ) 29%,
            color-mix(
                in srgb,
                var(--mp-color-dark) 7%,
                transparent
            ) 45%,
            color-mix(
                in srgb,
                var(--mp-color-surface) 9%,
                transparent
            ) 61%,
            transparent 84%
        );
    opacity: .72;
    pointer-events: none;
}

.mp-delivery-countries-showcase__flag > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mp-delivery-countries-showcase__flag
[data-mp-delivery-country-flag] {
    display: none;
}

.mp-delivery-countries-showcase__flag
[data-mp-delivery-country-flag].is-active {
    display: inline;
}

.mp-delivery-countries-showcase__flag-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--mp-color-gold-dark);
    background: transparent;
    font-size: 9px;
    line-height: 1;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mp-delivery-countries-showcase__flag--has-svg
.mp-delivery-countries-showcase__flag-fallback {
    display: none;
}

.mp-delivery-countries-showcase__country-name {
    display: block;
    width: 100%;
    min-width: 0;
    color: var(--mp-color-gold-dark);
    font-family: var(--mp-font-body);
    font-size: var(--mp-compact-heading-font-size);
    line-height: 1.15;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: .06em;
    overflow-wrap: normal;
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
    opacity: 1;
}

@keyframes mp-delivery-countries-showcase-country-arrive {

    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .mp-delivery-countries-showcase__country,
    .mp-delivery-countries-showcase__country.is-leaving,
    .mp-delivery-countries-showcase__country.is-entering,
    .mp-delivery-countries-showcase__country.is-arriving {
        opacity: 1;
        transition: none;
        animation: none;
        transform: none;
    }
}

@media (max-width: 544px) {

    .mp-delivery-countries-showcase {
        min-height: 58px;
        padding: 8px;
    }

    .mp-delivery-countries-showcase__row {
        grid-template-columns:
            minmax(0, 1fr)
            var(--mp-decorative-line-height)
            minmax(0, 1fr);
        column-gap: 10px;
        min-height: 40px;
    }

    .mp-delivery-countries-showcase__divider {
        width: 30px;
    }

    .mp-delivery-countries-showcase__country {
        grid-template-columns: 28px minmax(0, 1fr);
        width: 100%;
        gap: 6px;
    }

    .mp-delivery-countries-showcase__flag-frame,
    .mp-delivery-countries-showcase__flag {
        width: 28px;
        height: 20px;
    }

}