/* =========================================================================
   КАТАЛОГ ЖЕТОНОВ: СТРАНИЦА ТОКЕНА / КАРТОЧКИ (token-styles.css)
   ========================================================================= */

/* ===== ОБЩИЙ КОНТЕЙНЕР СТРАНИЦЫ ===== */
.token-page {
    max-width: 1400px; 
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;

    /* Умный расчёт боковых отступов: на 2K экранах — 120px, к 1200px плавно ужимается до 20px */
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 10px;
    padding-right: 10px;
}

/* ===== ХЛЕБНЫЕ КРОШКИ ===== */
.token-breadcrumbs {
    font-family: 'Bahnschrift', sans-serif;
    font-size: clamp(13px, 0.9vw, 17px); 
    font-weight: 400; 
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* РАЗРЕШАЕМ перенос блоков на новую строку */
    gap: 0;
    color: #a1b7ca;
    
}

.token-breadcrumbs a {
    color: #a1b7ca;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap; /* Название страны или региона больше никогда не разобьется на 2 строки */
    display: inline-block;
}

.token-breadcrumbs a:hover {
    color: #759cb8;
}

.token-breadcrumbs .separator {
    cursor: default;
    pointer-events: none;
    font-weight: 700; 
    color: #bbb496;
    margin: 0 4px;
    white-space: nowrap;
    display: inline-block;
}

/* Возвращаем красивый отступ между текстом ссылки и стрелочкой на странице жетона */
.token-breadcrumbs span a {
    margin-right: -2px; /* подгоняй под десктопный вид */
}


/* ===== ЗАГОЛОВОК ЖЕТОНА ===== */
.token-title {
    font-family: 'Bahnschrift', sans-serif;
    font-size: clamp(50px, 10vw, 80px);
    text-align: center;
    letter-spacing: 0.02em; 
    text-transform: uppercase;
    font-weight: 300;
    color: #bbb496;
    margin-bottom: 30px; 
    line-height: 1.1;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* ===== БЛОК ХАРАКТЕРИСТИКИ + ФОТО AR ===== */
.token-content {
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    gap: 3vw; 
    max-width: 1800px; 
    margin: 0 auto 40px auto; 
    background: rgba(0, 0, 0, 0.21); /* Твоя фирменная подложка */
    
    /* Резиновые отступы для подложки */
    padding: 10px 10px 10px clamp(1.5vw, 3vw, 3vw); 
    
    border: none;
    box-shadow: none;
    outline: none;
    border-radius: 0; 
    box-sizing: border-box;
}

/* Левая текстовая часть внутри подложки */
.token-characteristics {
    flex: 1; 
    align-self: flex-start; 
    
    /* Максимум 30px на 2K, но полностью исчезает на ноутбуках (1200px) */
    margin-top: clamp(0px, calc(0px + (30 - 0) * ((100vw - 1200px) / (1834 - 1200))), 30px);
}

/* Блочный заголовок "Характеристики:" */
.token-characteristics h2 {
    font-family: 'Bahnschrift', sans-serif;
    font-size: clamp(30px, 2.6vw, 40px); 
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-weight: 400; 
    color: #a1b7ca;
    margin-top: clamp(0px, calc(0px + (30 - 0) * ((100vw - 1200px) / (1834 - 1200))), 30px); 
    margin-bottom: 0; 
    border: none;
}

.token-characteristics-heading {
    display: block;
}

.token-characteristics-toggle {
    display: none;
}

/* Таблица характеристик (Десктопная версия) */
.token-characteristics table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    border: none; 
    margin-top: clamp(5px, calc(5px + (20 - 5) * ((100vw - 1250px) / (1834 - 1110))), 20px);
    margin-bottom: 10px; 
}

.token-characteristics tr {
    border: none;
}

.token-characteristics td {
    padding: 2px 0; 
    font-family: 'Bahnschrift', sans-serif;
    font-size: clamp(22px, 1.2vw, 24px); 
    letter-spacing: 0.02em;
    border: none;
    vertical-align: top;
    background: transparent;
    box-shadow: none;
    line-height: 1.2; 
}

/* Левая колонка таблицы (Названия полей) */
.token-characteristics td:first-child {
    font-weight: 600; 
    text-transform: uppercase;
    white-space: nowrap;
    width: auto;
    min-width: 120px;
    max-width: 220px;
    color: #a1b7ca;
    padding-right: clamp(15px, 2.5vw, 40px); 
}

/* Правая колонка таблицы (Значения полей) */
.token-characteristics td:last-child {
    font-weight: 100; 
    letter-spacing: 0.02em;
    color: #9f978a;
    width: 100%; 
}

.token-characteristics td a {
    color: #9f978a;
    text-decoration: underline;
}

.token-characteristics td a:hover {
    color: #759cb8;
}

/* ===== ФОТО AR ===== */
.token-photo-ar {
    flex: 0 0 42%; 
    max-width: 670px; 
    border-radius: 20px; 
    overflow: hidden;
    display: flex;
    align-self: stretch; 
    position: relative; /* База для абсолютного позиционирования штампа */
}

.token-photo-ar img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important; 
    object-position: right center !important; 
    border-radius: 2px;
}

/* Фиксированный размер и жесткое позиционирование штампа */
.token-photo-ar img.hidden-token-stamp {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: clamp(90px, 14vw, 310px) !important;      
    max-width: 310px !important;  
    height: auto !important;      
    object-fit: contain !important;
    object-position: left top !important; 
    z-index: 10 !important;
    pointer-events: none;
}

/* ===== ГАЛЕРЕЯ (ОБЩАЯ СЕТКА) ===== */
.tokens-museum-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Изначально 2 столбика */
    gap: 10px; /* Правильное расстояние */
    max-width: 1800px;
    margin: 0 auto;
}

.token-gallery-item, 
.token-gallery .gallery-item {
    position: relative;
    width: 100%;
}

/* Контейнер-стопка для картинок */
.image-wrapper {
    position: relative;
    width: 100%;
    /* Если у картинок разная высота, можно задать min-height, 
       но если они одинаковые — всё будет отлично */
}

.img-black, .img-white {
    width: 100% !important;
    height: auto !important;
    border-radius: 20px;
    
    /* Делаем абсолютное позиционирование, чтобы они идеально легли друг под друга */
    position: absolute;
    top: 0;
    left: 0;
    
    /* Логика плавного растворения вместо display: none */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
    z-index: 1;
}

/* Первая картинка (задаем ей относительное позиционирование, 
   чтобы контейнер .image-wrapper имел реальную высоту на странице) */
.img-black {
    position: relative; 
}

/* Показываем только ту, у которой есть класс active */
.img-black.active, 
.img-white.active {
    opacity: 1;
    visibility: visible;
    z-index: 2; /* Активная картинка всегда выше */
}

/* ===== СТИЛИ ДЛЯ ПЛЕЕРА АНИМАЦИИ ===== */

/* Конкретные адаптивные стили для нашего переключателя */
.token-lottie-player {
    /* Наш умный адаптивный размер взамен жестких 100px */
    width: clamp(60px, 6.25vw, 100px) !important;
    height: clamp(60px, 6.25vw, 100px) !important;
    
    /* Пропорциональное скругление */
    border-radius: clamp(12px, 1.25vw, 20px) !important;
    
    /* Точное позиционирование на жетоне */
    position: absolute;
    top: clamp(10px, 1.25vw, 20px) !important;
    right: clamp(10px, 1.25vw, 20px) !important;

    display: block;
    margin: 0 auto;
    transition: transform 0.2s ease;
    z-index: 10;
    /* --- ОТКЛЮЧЕНИЕ ВЫДЕЛЕНИЯ И ПОДСВЕТКИ ТАПА НА МОБИЛЬНЫХ --- */
    -webkit-tap-highlight-color: transparent; /* Убирает синюю рамку-вспышку при тапе на iOS и Android */
    -webkit-touch-callout: none;               /* Отключает контекстное меню при долгом нажатии на iOS */
    -webkit-user-select: none;                 /* Safari */
    -moz-user-select: none;                    /* Firefox */
    -ms-user-select: none;                     /* IE/Edge */
    user-select: none;                         /* Стандартное свойство для Chrome и остальных */
}

/* Так как плеер сам по себе — это DOM-элемент, 
   нам не нужно его скрывать/показывать через display: none,
   как мы делали с картинками, но если ты захочешь добавить 
   fade-эффект при переключении, можно использовать opacity.
    .image-wrapper dotlottie-player {
        transition: opacity 0.3s ease;
    }

/* ВАЖНО: Если у тебя плеер может быть внутри элемента, который 
   скрыт (например, в табах), добавь это, чтобы плеер корректно 
   считал свои размеры при отрисовке: 
*/
dotlottie-player {
    overflow: hidden;
}



/* =========================================================================
   АДАПТИВНОСТЬ: ПЛАНШЕТЫ И НОУТБУКИ (до 1450px)
   ========================================================================= */
@media (max-width: 1450px) {
    .token-page {
        padding-bottom: 120px; 
    }
    .token-title {
        margin-bottom: 40px;
    }
    .token-content {
        gap: 2vw;
    }
    .token-photo-ar {
        flex: 0 0 40%; 
    }
}


/* =========================================================================
   АДАПТИВНОСТЬ: ПРОМЕЖУТОЧНЫЙ МАСШТАБ (до 1100px)
   ========================================================================= */
@media (max-width: 1100px) {
    .token-characteristics table {
        display: table;
        width: 100%;
        border-collapse: collapse;
        table-layout: auto;
        margin-bottom: 5px; 
    }

    .token-characteristics tbody {
        display: table-row-group;
    }

    .token-characteristics table tr {
        display: table-row; 
    }

    .token-characteristics td {
        display: table-cell; 
        font-size: clamp(18px, 1.2vw, 24px);
        line-height: 1.2;
        vertical-align: top;
        padding: 3px 0;
    }

    .token-characteristics table tr td:first-child {
        font-weight: 600;
        width: auto;
        white-space: nowrap;
        color: #a1b7ca;
        padding-right: clamp(15px, 2vw, 35px); 
    }

    .token-characteristics table tr td:last-child {
        width: auto;
        font-weight: 100;
        color: #9f978a;
        word-break: break-word;
    }

    .token-characteristics table tr.row-features {
        display: none;
    }
    
    .mobile-features {
        display: block;
        width: 100%;
        margin-top: -3px; 
        padding-top: 0; 
    }
    
    .mobile-features-title,
    .mobile-features-text {
        font-size: clamp(18px, 1.2vw, 24px);
        line-height: 1.2;
    }

    .token-content .token-photo-ar,
    .token-content .token-photo-ar img,
    .token-content .token-photo-ar a {
        align-self: flex-start; 
        border-radius: 10px !important;
        overflow: hidden;
    }

    /* Исправление радиуса скругления на плитках */
    .tokens-museum-gallery img,
    .tokens-museum-gallery .token-gallery-item img {
        border-radius: 10px !important;
    }
}


/* =========================================================================
   АДАПТИВНОСТЬ: МОБИЛЬНЫЕ УСТРОЙСТВА (до 768px)
   ========================================================================= */
@media (max-width: 768px) {
    .token-page {
        padding: 20px clamp(4px, 1.8vw, 15px) 80px; 
    }

    .token-title {
        font-size: clamp(50px, 15vw, 75px);
        margin-bottom: 15px; 
        line-height: 1.05;
    }

    .token-content {
        flex-direction: column; 
        align-items: stretch;
        padding: 20px 0 0 0;
        margin-bottom: 40px;
    }

    .token-characteristics {
        margin-top: 0;
        padding: 0 15px; 
        box-sizing: border-box;
    }

    .token-characteristics h2 {
        font-size: clamp(26px, 5.5vw, 30px);
        font-weight: 400; 
        text-align: left;
        margin: 0;
    }

    .token-characteristics-heading {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding-right: clamp(36px, 10vw, 46px);
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .token-characteristics-toggle {
        display: grid;
        place-items: center;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: clamp(34px, 9vw, 42px);
        height: clamp(34px, 9vw, 42px);
        padding: 0;
        color: #a1b7ca;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .token-characteristics-toggle svg {
        width: 62%;
        height: 62%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transform: rotate(0deg);
        transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .token-characteristics-collapsible {
        display: grid;
        grid-template-rows: 1fr;
        opacity: 1;
        transition:
            grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.25s ease;
    }

    .token-characteristics-collapsible-inner {
        min-height: 0;
        overflow: hidden;
    }

    .token-characteristics.is-characteristics-collapsed .token-characteristics-collapsible {
        grid-template-rows: 0fr;
        opacity: 0;
    }

    .token-characteristics.is-characteristics-collapsed .token-characteristics-toggle svg {
        transform: rotate(180deg);
    }

    .token-characteristics table {
        display: table;
        width: 100%;
        border-collapse: collapse;
        table-layout: auto; 
    }

    .token-characteristics tbody {
        display: table-row-group;
    }

    .token-characteristics table tr {
        display: table-row;
    }

    .token-characteristics table tr td {
        display: table-cell;
        font-size: clamp(19px, 4.8vw, 23px); 
        line-height: 1.25;
        vertical-align: top; 
        padding: 2px 0; 
    }

    .token-characteristics table tr td:first-child {
        font-weight: 500; 
        width: auto; 
        white-space: nowrap; 
        color: #a1b7ca;
        padding-right: clamp(12px, 4vw, 30px); 
    }

    .token-characteristics table tr td:last-child {
        width: auto; 
        font-weight: 100; 
        color: #9f978a;
        word-break: break-word;
        padding-left: 0;
    }

    .token-characteristics table tr.row-features {
        display: none;
    }

    .token-characteristics table,
    .token-characteristics tbody {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .mobile-features {
        display: block;
        width: 100%;
        padding-top: 0; 
        margin-top: 2px; 
    }
    
    .mobile-features-title {
        display: block;
        font-family: 'Bahnschrift', sans-serif;
        font-weight: 500;
        color: #a1b7ca;
        text-transform: uppercase;
        font-size: clamp(19px, 4.8vw, 23px);
        line-height: 1.25;
        margin-bottom: 5px; 
    }

    .mobile-features-text {
        display: block;
        font-family: 'Bahnschrift', sans-serif;
        font-weight: 100;
        color: #9f978a;
        word-break: break-word;
        font-size: clamp(19px, 4.8vw, 23px);
        line-height: 1.25;
        margin-bottom: 15px;
    }

    .token-photo-ar {
        width: auto;
        max-width: 100%;
        border-radius: 20px;
        overflow: hidden;
        margin-top: 20px;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .token-photo-ar img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 20px !important;
    }

    /* Переход в 1 столбик */
    .tokens-museum-gallery {
        display: flex;
        flex-direction: column;
        gap: clamp(3px, 1.4vw, 20px);
    }

    .token-gallery-item,
    .tokens-museum-gallery .gallery-item {
        width: 100%;
        max-width: 100%;
    }

    .tokens-museum-gallery img {
        border-radius: 20px !important;
    }

    .token-lottie-player {
        /* На брейкпоинте кнопка становится 80px и плавно уменьшается до 55px на смартфонах */
        /* 10.5vw — это коэффициент, который делает уменьшение более заметным на узких экранах */
        width: clamp(55px, 10.5vw, 80px) !important;
        height: clamp(55px, 10.5vw, 80px) !important;
        
        /* Пропорционально уменьшаем скругление углов (от 10px до 16px) */
        border-radius: clamp(10px, 2.1vw, 16px) !important;
        
        /* Отступы на мобильных тоже делаем чуть компактнее, чтобы экономить место (от 8px до 16px) */
        top: clamp(8px, 2.1vw, 16px) !important;
        right: clamp(8px, 2.1vw, 16px) !important;
    }

    /* Адаптируем штамп под один широкий столбец */
    .token-photo-ar img.hidden-token-stamp {
        /* Увеличиваем минимальную планку до 150px, а процент экрана до 25vw */
        width: clamp(90px, 40vw, 310px) !important;
        max-width: 310px !important;
        
        /* Скругление штампа подстраиваем под скругление блока на мобильных */
        border-radius: 20px 0 20px 0 !important; 
    }
}


/* =========================================================================
   АДАПТИВНОСТЬ: СУПЕР-МОБИЛЬНЫЙ МАСШТАБ (до 600px)
   ========================================================================= */
@media (max-width: 600px) {
    .token-photo-ar {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: -20px;
        border-radius: 20px; 
    }
    
    .token-photo-ar img {
        border-radius: 20px !important;
    }
}


/* =========================================================================
   ОБЩИЕ СТИЛИ ДЛЯ МОБИЛЬНЫХ ОСОБЕННОСТЕЙ (ПО УМОЛЧАНИЮ НА ПК СКРЫТО)
   ========================================================================= */
.mobile-features {
    display: none;
}

.mobile-features-title {
    display: block;
    font-family: 'Bahnschrift', sans-serif;
    font-weight: 500;
    color: #a1b7ca;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mobile-features-text {
    display: block;
    font-family: 'Bahnschrift', sans-serif;
    font-weight: 100; 
    color: #9f978a;
    word-break: break-word;
}

/* Блок по умолчанию скрыт на ПК, поэтому это правило должно идти после
   базового .mobile-features. Иначе на ширине до 1100px скрываются и строка
   таблицы, и её адаптивная версия. */
@media (max-width: 1100px) {
    .token-characteristics .mobile-features {
        display: block;
    }
}

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО ЖЕТОНОВ (ДИЗАЙН И ФИКСИРОВАННЫЕ КНОПКИ КАК В НОВОСТЯХ)
   ========================================================================== */

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО ЖЕТОНОВ (ФИКСИРОВАННЫЙ ФОН И ЖЕСТКИЙ POS:FIXED ДЛЯ КНОПОК)
   ========================================================================== */

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО ЖЕТОНОВ (ПОДЛОЖКА 14,14,14 С СИЛЬНЫМ РАЗМЫТИЕМ)
   ========================================================================== */

/* 1. ПОДЛОЖКА / СКРОЛЛ-КОНТЕЙНЕР */
#tokenAjaxModal,
#tokenAjaxModal.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: transparent !important;
    
    z-index: 90 !important; 

    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    
    box-sizing: border-box !important;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    scrollbar-width: none;
}

/* ЗАДНИЙ ФОН ВОКРУГ МОДАЛКИ (rgba(0, 0, 0, 0.3) + БЛЮР) */
#tokenAjaxModal::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    
    background: rgba(0, 0, 0, var(--token-modal-backdrop-opacity, 0.5)) !important;
    
    z-index: -1 !important;
    pointer-events: none !important;
    transition: background-color 0.3s ease !important;
}

#tokenAjaxModal::-webkit-scrollbar {
    display: none;
}

#tokenAjaxModal.active {
    opacity: 1;
    visibility: visible;
}

/* Лента жетонов устроена так же, как лента модалки новостей: двигается
   отдельный полноэкранный слайд вместе со всей карточкой, а не её контент. */
#tokenAjaxModal {
    overflow: hidden !important;
    display: block !important;
}

#tokenAjaxModal .token-modal-viewport {
    position: relative !important;
    width: 100% !important;
    max-width: 1600px;
    height: 100% !important;
    margin: 0 auto;
    overflow: hidden !important; /* Невидимая рамка, как у новостей. */
    z-index: 100;
}

#tokenAjaxModal .token-modal-track {
    display: flex !important;
    width: 300% !important;
    height: 100% !important;
    transform: translateX(-33.3333%);
    will-change: transform;
}

#tokenAjaxModal .token-modal-track.smooth-transition {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#tokenAjaxModal .token-modal-slide {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#tokenAjaxModal .token-modal-slide::-webkit-scrollbar {
    display: none;
}

#tokenAjaxModal .token-modal-slide .modal-window {
    position: relative !important;
}

/* Не даём браузеру выделять плитку или вызывать системное меню при удержании.
   Это не отменяет pointer-события, от которых зависит переворот плитки. */
.token-tile,
.token-tile *,
#tokenAjaxModal .token-photo-ar .token-new-badge,
#tokenAjaxModal .token-photo-ar .token-new-badge * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Сенсорное нажатие: оборот виден, пока палец удерживается. После pointerup
   принудительно возвращаем аверс, даже если браузер оставил :hover активным. */
.token-tile.touch-pressed .img-avers {
    opacity: 1 !important;
}

.token-tile.touch-pressed .img-revers {
    opacity: 1 !important;
}

.token-tile.touch-released .img-avers {
    opacity: 1 !important;
}

.token-tile.touch-released .img-revers {
    opacity: 0 !important;
}

.city-archive-page .token-grid-card.token-tile.touch-pressed .token-card-image-box .img-avers {
    opacity: 1 !important;
}

.city-archive-page .token-grid-card.token-tile.touch-pressed .token-card-image-box .img-revers {
    opacity: 1 !important;
}

.city-archive-page .token-grid-card.token-tile.touch-released .token-card-image-box .img-avers {
    opacity: 1 !important;
}

.city-archive-page .token-grid-card.token-tile.touch-released .token-card-image-box .img-revers {
    opacity: 0 !important;
}

/* 2. КАРТОЧКА МОДАЛКИ (ЦВЕТ rgb(20, 20, 20) И РАМКА 4px) */
.modal-window {
    position: relative !important;
    width: 95% !important;
    max-width: 1450px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    
    margin: 40px auto !important; 
    padding: 55px 0px 30px 0px !important;
    
    z-index: 1 !important;
    
    /* Полностью убираем картинку и задаем единый цвет */
    background: url('/wp-content/uploads/2025/08/%D1%84%D0%BE%D0%BD750.png') repeat top left scroll !important;
    background-size: auto !important;
    
    border-radius: 16px !important;
    border: 4px solid rgb(30, 30, 30) !important; /* Новая рамка */
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.6) !important;
    
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Сбрасываем старый псевдоэлемент размытия, если оставался */
.modal-window::before {
    display: none !important;
}

/* 3. КОНТЕНТ ЖЕТОНА ВНУТРИ МОДАЛКИ (rgb(15, 15, 15)) */
#tokenAjaxModal .token-content {
    background: rgba(0, 0, 0, 0.21) !important;
    background-size: auto !important;
}

#tokenAjaxModal .modal-title-link {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: text-decoration 0.2s ease !important;
}

#tokenAjaxModal .modal-title-link:hover {
    color: inherit !important; /* Цвет не меняется при наведении */
    text-decoration: underline !important; /* Только подчёркивание */
}

/* ==========================================================================
   3. ЖЁЛТАЯ ЗВЁЗДОЧКА НА ФОТО (ДЛЯ AR1500)
   ========================================================================== */
/* Контейнер фото в модалке должен быть relative */
/* Контейнер фото в модалке должен быть relative для удержания искорки */
#tokenAjaxModal .token-photo-ar,
#tokenAjaxModal .token-image-container,
#tokenAjaxModal .token-photo,
#tokenAjaxModal .token-image-wrapper {
    position: relative !important;
    overflow: visible !important;
}


/* ==========================================================================
   ИСКОРКА И ПОДСКАЗКА В МОДАЛЬНОМ ОКНЕ (ТОЧНАЯ КОПИЯ С ПЛИТОК)
   ========================================================================== */

/* 1. Контейнер фото в модалке */
#tokenAjaxModal .token-photo-ar {
    position: relative !important;
    overflow: visible !important;
}

/* 2. Позиционирование искорки (без кружка и лишних рамок) */
#tokenAjaxModal .token-photo-ar .token-new-badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 99 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    color: #fbe25f !important;
    transition: transform 0.3s ease !important;
}

/* 3. Иконка звёздочки */
#tokenAjaxModal .token-photo-ar .token-new-badge .sparkle-icon {
    width: 32px !important;
    height: 32px !important;
    fill: currentColor !important;
    display: block !important;
}

/* 4. Всплывающая подсказка (тултип) */
#tokenAjaxModal .token-photo-ar .badge-tooltip {
    position: absolute !important;
    top: 35px !important;
    bottom: auto !important;
    right: 0 !important;
    width: 220px !important;
    background: rgba(16, 15, 11, 0.768) !important;
    color: #d6c050 !important;
    padding: 6px 6px !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Bahnschrift', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
    box-shadow: none !important;
    z-index: 100 !important;
}

/* Строки внутри тултипа */
#tokenAjaxModal .token-photo-ar .badge-tooltip span {
    display: block !important;
    margin: 2px 0 !important;
    font-family: 'Bahnschrift', sans-serif !important;
    font-size: 16px !important;
    color: #d6c050 !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
}

/* Показ тултипа при наведении */
#tokenAjaxModal .token-photo-ar .token-new-badge:hover .badge-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.1s ease, visibility 0.1s ease !important;
}



/* 4. КНОПКИ УПРАВЛЕНИЯ */

#tokenModalClose {
    position: fixed !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 55px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    z-index: 910 !important;
    
    right: calc(50% - 810px) !important;
    top: calc(var(--modal-header-offset, 0px) + 10px) !important;
    
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
}

#tokenModalClose:hover {
    color: #ffffff !important;
}

#tokenModalPrev,
#tokenModalNext {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 50px !important;
    font-weight: 200 !important;
    line-height: 1 !important;
    
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    z-index: 999 !important;
    padding: 15px !important;
    
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}


#tokenModalPrev { left: calc(50% - 820px) !important; }
#tokenModalNext { right: calc(50% - 820px) !important; }


/* ==========================================================================
   АНИМАЦИЯ СЛАЙДОВ МОДАЛКИ (ЖЕЛЕЗОБЕТОННЫЙ ВАРИАНТ)
   ========================================================================== */

/* Вьюпорт модалки */
#tokenModalContent {
    position: relative !important;
    overflow: hidden !important;
    width: 100%;
    min-height: 100%;
}

/* Базовый класс для всех слайдов */
.modal-slide-wrapper {
    width: 100%;
    opacity: 1 !important;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
}

/* На время анимации фиксируем оба слайда (старый и новый) в absolute */
#tokenModalContent.is-animating .modal-slide-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Строгие классы позиций */
.slide-pos-center {
    transform: translateX(0) !important;
}
.slide-pos-right {
    transform: translateX(100%) !important;
}
.slide-pos-left {
    transform: translateX(-100%) !important;
}


/* 4. АДАПТИВНОСТЬ ДЛЯ МЕНЬШИХ ЭКРАНОВ */

/* 4. АДАПТИВНОСТЬ */

@media (max-width: 1650px) {
    #tokenModalPrev { left: clamp(1px, 0.2vw, 5px) !important; }
    #tokenModalNext { right: clamp(1px, 0.2vw, 5px) !important; }
    #tokenModalClose {
        left: auto !important;
        right: 0 !important;
    }

    #tokenModalPrev,
    #tokenModalNext {
        padding: 5px !important;
    }
}

@media (max-width: 1200px) {
        
    #tokenModalPrev,
    #tokenModalNext,
    #tokenModalClose {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .modal-window {
        width: 97% !important;

        margin: 20px 4px !important;
        padding: 20px 0 !important;
        border: 3px solid rgb(25, 25, 25) !important; /* Новая рамка */
    }

    #tokenAjaxModal .token-title {
        font-size: clamp(32px, 11vw, 68px);
    }
}

/* 5. Мобильный адаптив для искорки в модалке */
@media (max-width: 550px) {
    #tokenAjaxModal .token-photo-ar .token-new-badge {
        top: 6px !important;
        right: 6px !important;
    }
    #tokenAjaxModal .token-photo-ar .token-new-badge .sparkle-icon {
        width: 20px !important;
        height: 20px !important;
    }
    #tokenAjaxModal .token-photo-ar .badge-tooltip {
        width: 140px !important;
        right: -5px !important;
    }
}

@media (max-width: 450px) {
    #tokenAjaxModal .token-page {

        padding-bottom: 0;
    }

    #tokenAjaxModal .token-characteristics {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Кнопка закрытия */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #9f978a;
    cursor: pointer;
    z-index: 103;
    transition: color 0.2s;
}
.modal-close:hover { color: #333; }

/* CSS-поддержка плавного переключения "день-ночь" для картинок */
.image-wrapper {
    position: relative;
}
.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.image-wrapper img.active {
    opacity: 1;
    position: relative; /* Первый активный элемент задает высоту */
    z-index: 2;
}