:root {
    --vk-af: #28a745;
    --vk-tsd: #e53935;
    --vk-open: #8f1a9b;

    --vk-bg-dark: #172126;
    --vk-bg-dark-2: #10181c;
    --vk-text: #ffffff;
    --vk-muted: #d7dde0;
}

/* základ */
.vk-cat {
    --cat-color: #666;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-weight: 700;
    line-height: 1;
    color: var(--vk-text);
    text-decoration: none;
    white-space: nowrap;
}

.vk-cat.af { --cat-color: var(--vk-af); }
.vk-cat.tsd { --cat-color: var(--vk-tsd); }
.vk-cat.open { --cat-color: var(--vk-open); }

/* SVG ikona */
.vk-cat-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.vk-cat-icon .vk-hex {
    fill: rgba(255,255,255,.08);
    stroke: var(--cat-color);
    stroke-width: 8;
}

.vk-cat-icon .vk-symbol,
.vk-cat-icon .vk-text {
    fill: #fff;
}

/* pill pro reporty */
.vk-cat-pill {
    padding: .55rem 1.15rem .55rem .65rem;
    border-radius: 999px;
    background:
            linear-gradient(135deg, color-mix(in srgb, var(--cat-color) 88%, white 8%), var(--cat-color));
    box-shadow:
            0 5px 14px color-mix(in srgb, var(--cat-color) 35%, transparent),
            inset 0 1px 0 rgba(255,255,255,.28);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.vk-cat-pill .vk-cat-icon {
    width: 36px;
    height: 36px;
}

/* menu položka */
.vk-cat-menu {
    width: 100%;
    min-height: 72px;
    padding: .85rem 1rem;
    border-radius: 12px;
    background:
            radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--cat-color) 22%, transparent), transparent 34%),
            linear-gradient(135deg, var(--vk-bg-dark), var(--vk-bg-dark-2));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08),
            0 8px 20px rgba(0,0,0,.25);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.vk-cat-menu:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--cat-color) 65%, white 10%);
    box-shadow:
            0 0 0 1px color-mix(in srgb, var(--cat-color) 35%, transparent),
            0 10px 26px rgba(0,0,0,.35),
            0 0 22px color-mix(in srgb, var(--cat-color) 28%, transparent);
}

/* kompaktní ikonka do tabulek */
.vk-cat-mini .vk-cat-icon {
    width: 30px;
    height: 30px;
}

.vk-cat-mini .vk-cat-label {
    font-size: .9rem;
}

/* světlá outline varianta */
.vk-cat-outline {
    padding: .45rem .95rem .45rem .55rem;
    border-radius: 999px;
    color: var(--cat-color);
    border: 1px solid color-mix(in srgb, var(--cat-color) 75%, white 10%);
    background: rgba(255,255,255,.78);
}

.vk-cat-outline .vk-cat-icon .vk-hex {
    fill: transparent;
}

.vk-cat-outline .vk-cat-icon .vk-symbol,
.vk-cat-outline .vk-cat-icon .vk-text {
    fill: var(--cat-color);
}

/* decentní animace */
.vk-cat-animate .vk-cat-icon {
    animation: vkFloat 3.2s ease-in-out infinite;
}

.vk-cat-animate.vk-cat-pill {
    position: relative;
    overflow: hidden;
}

.vk-cat-animate.vk-cat-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.18) 45%,
            rgba(255,255,255,.28) 50%,
            transparent 56%
    );
    animation: vkShine 4.8s ease-in-out infinite;
}

/* menší pill */
.vk-cat-sm {
    gap: .4rem;
    font-size: .85rem;
}

.vk-cat-sm.vk-cat-pill {
    padding: .32rem .7rem .32rem .38rem;
}

.vk-cat-sm .vk-cat-icon {
    width: 26px;
    height: 26px;
}

/* extra malý pill */
.vk-cat-xs {
    gap: .32rem;
    font-size: .75rem;
}

.vk-cat-xs.vk-cat-pill {
    padding: .24rem .55rem .24rem .3rem;
}

.vk-cat-xs .vk-cat-icon {
    width: 22px;
    height: 22px;
}


@keyframes vkFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes vkShine {
    0%, 55% { transform: translateX(-120%); }
    75%, 100% { transform: translateX(120%); }
}

/* responzivita */
@media (max-width: 576px) {
    .vk-cat-menu {
        min-height: 58px;
        padding: .65rem .75rem;
        border-radius: 10px;
    }

    .vk-cat-menu .vk-cat-icon {
        width: 34px;
        height: 34px;
    }

    .vk-cat-label {
        font-size: .95rem;
    }

    .vk-cat-pill {
        padding: .45rem .85rem .45rem .5rem;
    }
}


.place-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.place-rank {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* MINI BADGE */

.vk-mini-badge {
    --cat-color: #666;

    display: inline-flex;
    align-items: center;
    gap: .32rem;

    padding: .22rem .55rem .22rem .32rem;

    border-radius: 999px;

    color: #fff;

    font-size: .95rem;
    font-weight: 600;
    line-height: 1;

    background:
            linear-gradient(
                    135deg,
                    color-mix(in srgb, var(--cat-color) 88%, white 8%),
                    var(--cat-color)
            );

    box-shadow:
            0 2px 8px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.18);

    white-space: nowrap;
}

.vk-mini-badge.af {
    --cat-color: #28a745;
}

.vk-mini-badge.tsd {
    --cat-color: #e53935;
}

.vk-mini-badge.open {
    --cat-color: #8f1a9b;
}

.vk-mini-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* mobil */

@media (max-width: 576px) {

    .place-rank {
        font-size: 1.7rem;
    }

    .vk-mini-badge {
        font-size: .82rem;
        padding: .18rem .45rem .18rem .25rem;
    }

    .vk-mini-icon {
        width: 15px;
        height: 15px;
    }
}

/* změna kategorie TsD->OPEN */
.vk-category-transition {
    margin: 2rem auto;
    padding: 1.25rem;
    max-width: 700px;
    text-align: center;

    background: linear-gradient(
            135deg,
            rgba(231,76,60,.05),
            rgba(155,89,182,.08)
    );

    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.08);
}

.vk-transition-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.vk-transition-arrow {
    font-size: 2rem;
    font-weight: 700;
    color: #7d3c98;
}

.vk-transition-text {
    margin-top: 1rem;
    font-size: .95rem;
    color: #555;
}

@media (max-width: 400px) {
    .vk-transition-arrow {
        transform: rotate(90deg);
    }
    .vk-transition-row {
        flex-direction: column;
        gap: .5rem;
    }
}