/* MyChooz Rating Table Block - ТОЧНАЯ КОПИЯ HTML версии */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================
   MOBILE-FIRST FILTER SYSTEM - APPLE STYLE
   ============================================ */
.filters {
    display: flex;
    align-items: center;
    gap: var(--mychooz-space-3, 12px);
    padding: var(--mychooz-space-4, 16px) var(--mychooz-space-5, 20px);
    background: var(--mychooz-surface, rgba(255, 255, 255, 0.8));
    backdrop-filter: blur(10px);
    border-radius: var(--mychooz-radius-lg, 16px);
    margin: 0 calc(-1 * var(--mychooz-space-5, 20px)) var(--mychooz-space-5, 20px) calc(-1 * var(--mychooz-space-5, 20px));
    
    /* PRODUCTION: Optimized GPU isolation to prevent flickering */
    will-change: transform;
    transform: translateZ(0);
    position: relative;
    z-index: 100;
    backface-visibility: hidden;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Mobile First: scroll, Desktop: center */
    justify-content: flex-start;
}

/* Desktop центрирование фильтров - КОМПАКТНО */
@media (min-width: 768px) {
    .filters {
        justify-content: center;
        margin: 0 0 var(--mychooz-space-3, 12px) 0;
        padding: var(--mychooz-space-2, 8px) var(--mychooz-space-3, 12px);
        overflow-x: visible;
    }
}

/* ВОССТАНОВЛЕНИЕ мобильных свайпов */
@media (max-width: 767px) {
    .filters {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        justify-content: flex-start !important;
    }
}
    
    /* ЯДЕРНОЕ ПОДАВЛЕНИЕ ::after ГЛОБАЛЬНО */
    .filters::before,
    .filters::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* ЯДЕРНЫЙ RESET ФИЛЬТРОВ - МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ */
    body .filters .filter-select {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #007AFF !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        padding: 8px 32px 8px 16px !important;
        height: 36px !important;
        min-width: 96px !important;
        background: rgba(0, 122, 255, 0.08) !important;
        border: 1px solid rgba(0, 122, 255, 0.12) !important;
        border-radius: 16px !important;
        position: relative !important;
        z-index: 10 !important;
        text-indent: 0 !important;
        text-shadow: none !important;
        line-height: normal !important;
    }

.filters::-webkit-scrollbar {
    display: none;
}

/* ПОЛНОСТЬЮ УДАЛЕНЫ fade edges - источник проблем с ::after */

.filters-container {
    position: relative;
    margin-bottom: 20px;
}

/* MyChooz Aesthetic filter select buttons - 20% smaller */
.filter-select {
    padding: var(--mychooz-space-2, 8px) var(--mychooz-space-4, 16px);
    border: none;
    border-radius: var(--mychooz-radius-lg, 16px);
    font-size: 14px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #007AFF;
    background: rgba(0, 122, 255, 0.08);
    backdrop-filter: blur(8px);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    height: 36px;
    min-width: 96px;
    outline: none;
    transition: all 0.15s ease;
    border: 1px solid rgba(0, 122, 255, 0.12);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: 
        0 1px 3px rgba(0, 122, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    
    /* КРИТИЧНО: Изоляция для предотвращения мигания */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* Кастомная стрелка dropdown */
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23007AFF%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m6 8 4 4 4-4%27/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    padding-right: 32px;
}

.filter-select:focus {
    background: rgba(0, 122, 255, 0.2);
    border-color: #007AFF;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}

.filter-select:hover {
    background: rgba(0, 122, 255, 0.15);
}

.filter-select:active {
    background: rgba(0, 122, 255, 0.25);
}

/* Responsive improvements - обновлено под новые размеры */
@media (max-width: 768px) {
    .filters {
        margin: 0 -16px 16px -16px;
        padding: var(--mychooz-space-3, 12px) var(--mychooz-space-4, 16px);
        gap: var(--mychooz-space-2, 8px);
    }
    
    .filter-select {
        min-width: 88px;
        font-size: 13px;
        height: 32px;
        padding: 6px 14px;
        padding-right: 28px;
        background-size: 12px 12px;
        background-position: right 8px center;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    .filters {
        margin: 0 -12px 12px -12px;
        padding: 10px 12px;
        border-radius: 12px;
    }
    
    .filter-select {
        min-width: 80px;
        font-size: 12px;
        height: 28px;
        padding: 5px 12px;
        padding-right: 24px;
        border-radius: 12px;
        background-size: 10px 10px;
        background-position: right 6px center;
    }
    
    /* Удалены fade edges */
}

.rating-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    
    /* КРИТИЧНО: Изоляция таблицы от фильтров */
    will-change: contents;
    transform: translateZ(0);
    position: relative;
    z-index: 10;
}

.rating-table td {
    vertical-align: middle;
    border-bottom: 1px solid #f1f3f4;
}

.rating-table td:not(.image-cell) {
    padding: 8px 6px;
}

.rank-cell {
    padding: 8px 6px;
    width: 54px;
    text-align: center;
}

.rank-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid #000;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    background: #fff;
}

.image-cell {
    padding: 5px;
    width: 68px;
}

.image-cell img {
    max-width: 57px !important;
    max-height: 57px !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: auto;
    border-radius: 4px;
    object-fit: contain;
}

.model {
    font-weight: 500;
    min-width: 150px;
    padding-right: 10px;
}

.model a {
    color: #1a202c;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    display: block;
}

.description {
    color: #2d3748;
    font-size: 14px;
    line-height: 1.6;
    max-width: 420px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.price {
    text-align: center;
    width: 80px;
}

/* Единый стиль для всех кнопок с ценой - СУПЕР ПРИОРИТЕТ */
.price-button, 
.price-widget,
a.price-button, 
a.price-widget,
.price a.price-button, 
.price a.price-widget,
td.price a.price-button, 
td.price a.price-widget,
.rating-table .price-button, 
.rating-table .price-widget,
.rating-table td.price a.price-button, 
.rating-table td.price a.price-widget {
    color: #e71d1d !important;
    background: #fff !important;
    border: 2px solid #e71d1d !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    min-width: 56px !important;
    min-height: 40px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

/* Защита от перезаписи после AJAX загрузки */
.price-button:link, 
.price-widget:link,
.price-button:visited, 
.price-widget:visited,
a.price-button:link, 
a.price-widget:link,
a.price-button:visited, 
a.price-widget:visited {
    color: #e71d1d !important;
    background: #fff !important;
}

/* Индикатор загрузки цены */
.price-loading {
    color: #999;
    font-size: 11px;
    font-style: italic;
}

@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
    .rating-table tbody tr:hover {
        background: #f8f9fa;
    }
    
    .rating-table tbody tr:hover .rank-circle {
        background: #000;
        color: #fff;
    }
    
    .model a:hover {
        color: #e71d1d;
    }
    
    /* Hover для кнопок - СУПЕР ПРИОРИТЕТ */
    .price-button:hover, 
    .price-widget:hover,
    a.price-button:hover, 
    a.price-widget:hover,
    .price a.price-button:hover, 
    .price a.price-widget:hover,
    td.price a.price-button:hover, 
    td.price a.price-widget:hover {
        background: #e71d1d !important;
        color: #fff !important;
        border-color: #e71d1d !important;
    }
    
    .filter-select:hover {
        border-color: #2563eb;
    }
}

@media (max-width: 600px) {
    .filters {
        gap: var(--mychooz-space-3, 12px);
        padding: var(--mychooz-space-2-5, 10px);
    }
    
    .filter-select {
        min-width: 140px;
        flex: 1;
        font-size: 16px;
        padding: 12px;
        height: 44px;
        border-width: 1px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 stroke=%27%232c5282%27 stroke-width=%272%27 fill=%27none%27/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px;
        padding-right: 36px;
    }
    
    .rating-table {
        font-size: 13px;
    }
    
    .rating-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 12px;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        background: #fff;
    }
    
    .rank-cell {
        order: 1;
        flex: 0 0 45px;
        padding: 4px;
    }
    
    .rank-circle {
        width: 28px;
        height: 28px;
        font-size: 13px;
        border-width: 1px;
    }
    
    .image-cell {
        order: 2;
        flex: 0 0 54px;
        padding: 4px;
    }
    
    .image-cell img {
        max-width: 46px !important;
        max-height: 46px !important;
    }
    
    .model {
        order: 3;
        flex: 1;
        min-width: 0;
        padding: 4px 8px;
    }
    
    .model a {
        font-size: 14px;
        word-break: break-word;
        font-weight: 500;
    }
    
    .price {
        order: 4;
        flex: 0 0 auto;
        padding: 4px;
        width: auto;
    }
    
    .price-button, 
    .price-widget {
        min-height: 34px;
        font-size: 11px;
        padding: 5px 8px;
        border-width: 1px;
    }
    
    .description {
        order: 5;
        flex: 0 0 100%;
        padding: 8px 4px 4px;
        margin-top: 6px;
        border-top: 1px solid #f1f3f4;
        font-size: 13px;
        line-height: 1.6;
        color: #2d3748;
        letter-spacing: 0.3px;
    }
    
    .rating-table td {
        border-bottom: none;
    }
}

/* ЯДЕРНАЯ ЗАЩИТА ФИЛЬТРОВ - МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ */
html body .filters.rating-table-filters .filter-select,
html body div.filters select.filter-select,
html body .wp-block-mychooz-rating-table .filters .filter-select {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #007AFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: rgba(0, 122, 255, 0.08) !important;
    border: 1px solid rgba(0, 122, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 8px 32px 8px 16px !important;
    height: 36px !important;
    min-width: 96px !important;
    position: relative !important;
    z-index: 999 !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    line-height: normal !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    
    /* ЯРКИЕ СТРЕЛКИ для понятности интерфейса */
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23007AFF%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272.5%27 d=%27m6 8 4 4 4-4%27/%3e%3c/svg%3e") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    padding-right: 36px !important;
}

/* ЯДЕРНЫЕ HOVER ЭФФЕКТЫ - "НАЖМИ МЕНЯ!" */
html body .filters.rating-table-filters .filter-select:hover,
html body div.filters select.filter-select:hover,
html body .wp-block-mychooz-rating-table .filters .filter-select:hover {
    background: rgba(0, 122, 255, 0.15) !important;
    border-color: #007AFF !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2) !important;
    transform: translateY(-1px) !important;
    transition: all 0.15s ease !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23007AFF%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272.5%27 d=%27m6 8 4 4 4-4%27/%3e%3c/svg%3e") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
}

/* ЯДЕРНЫЕ FOCUS ЭФФЕКТЫ - доступность */
html body .filters.rating-table-filters .filter-select:focus,
html body div.filters select.filter-select:focus,  
html body .wp-block-mychooz-rating-table .filters .filter-select:focus {
    background: rgba(0, 122, 255, 0.2) !important;
    border-color: #007AFF !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important;
    outline: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23007AFF%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272.5%27 d=%27m6 8 4 4 4-4%27/%3e%3c/svg%3e") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
}

/* Стрелки в активном состоянии - пытаюсь сохранить при открытии dropdown */
html body .filters.rating-table-filters .filter-select:active,
html body div.filters select.filter-select:active,
html body .wp-block-mychooz-rating-table .filters .filter-select:active,
html body .filters.rating-table-filters .filter-select[aria-expanded="true"],
html body div.filters select.filter-select[aria-expanded="true"],
html body .wp-block-mychooz-rating-table .filters .filter-select[aria-expanded="true"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23007AFF%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272.5%27 d=%27m6 8 4 4 4-4%27/%3e%3c/svg%3e") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
}

/* Мобильные размеры для фильтров */
@media (max-width: 767px) {
    html body .filters.rating-table-filters .filter-select,
    html body div.filters select.filter-select,
    html body .wp-block-mychooz-rating-table .filters .filter-select {
        width: auto !important;
        font-size: 13px !important;
        height: 32px !important;
        padding: 8px 32px 8px 16px !important;
        background-size: 12px 12px !important;
        background-position: right 8px center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* Скрываем пустые фильтры */
.filters:empty {
    display: none !important;
}

/* ФИНАЛЬНАЯ ЗАЩИТА - максимальная специфичность */
body .rating-table tbody tr td.price a.price-button,
body .rating-table tbody tr td.price a.price-widget {
    color: #e71d1d !important;
}

body .rating-table tbody tr td.price a.price-button:hover,
body .rating-table tbody tr td.price a.price-widget:hover {
    color: #fff !important;
}/* MyChooz Rating Table - Loading States */

.loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.loading-indicator::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid #007AFF;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.price-loading {
    color: #999;
    font-size: 11px;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.price-loading::after {
    content: '';
    width: 8px;
    height: 8px;
    border: 1px solid #999;
    border-top: 1px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error states */
.error-indicator {
    color: #dc3545;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Responsive loading states */
@media (max-width: 600px) {
    .loading-indicator {
        font-size: 13px;
    }
    
    .price-loading {
        font-size: 10px;
    }
}/* MyChooz Rating Table - Scroll Hint Styles */

.scroll-hint {
    position: absolute;
    top: -24px;
    right: 0;
    font-size: 12px;
    color: #86868b;
    font-weight: 500;
    opacity: 0.7;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.scroll-hint.fade-out {
    opacity: 0;
}

/* Responsive scroll hints */
@media (max-width: 768px) {
    .scroll-hint {
        top: -20px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .scroll-hint {
        top: -18px;
        font-size: 10px;
        right: 4px;
    }
}

/* Animation for scroll hint appearance */
@keyframes hintFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 0.7;
        transform: translateY(0);
    }
}

.scroll-hint {
    animation: hintFadeIn 0.3s ease-out;
}/**
 * MyChooz Rating Table Animations v0.0.39
 * Apple-inspired smooth animations for premium UX
 */

/* ============================================
   APPLE-INSPIRED EASING FUNCTIONS
   ============================================ */
:root {
    /* Apple standard easing curves */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-ios: cubic-bezier(0.2, 0, 0, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* MyChooz brand timing */
    --animation-fast: 200ms;
    --animation-normal: 300ms;
    --animation-slow: 500ms;
    --stagger-delay: 50ms;
    
    /* Colors for animations */
    --highlight-color: #ffeb3b;
    --highlight-fade: rgba(255, 235, 59, 0);
}

/* ============================================
   TABLE ROW ANIMATIONS - STAGGERED ENTRANCE
   ============================================ */

/* Base animation classes */
.table-row-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    animation: slideInFade var(--animation-normal) var(--ease-out-quart) forwards;
}

.table-row-exit {
    animation: slideOutFade var(--animation-fast) var(--ease-out-quart) forwards;
}

/* Staggered delays for smooth sequential appearance */
.table-row-stagger-1 { animation-delay: calc(var(--stagger-delay) * 1); }
.table-row-stagger-2 { animation-delay: calc(var(--stagger-delay) * 2); }
.table-row-stagger-3 { animation-delay: calc(var(--stagger-delay) * 3); }
.table-row-stagger-4 { animation-delay: calc(var(--stagger-delay) * 4); }
.table-row-stagger-5 { animation-delay: calc(var(--stagger-delay) * 5); }
.table-row-stagger-6 { animation-delay: calc(var(--stagger-delay) * 6); }
.table-row-stagger-7 { animation-delay: calc(var(--stagger-delay) * 7); }
.table-row-stagger-8 { animation-delay: calc(var(--stagger-delay) * 8); }
.table-row-stagger-9 { animation-delay: calc(var(--stagger-delay) * 9); }
.table-row-stagger-10 { animation-delay: calc(var(--stagger-delay) * 10); }

@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideOutFade {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }
}

/* ============================================
   PRICE UPDATE ANIMATIONS
   ============================================ */

/* Highlight flash when price updates */
.price-updated {
    animation: priceHighlight 2000ms var(--ease-out-expo);
}

@keyframes priceHighlight {
    0% {
        background-color: var(--highlight-color);
        transform: scale(1.02);
    }
    30% {
        background-color: var(--highlight-color);
        transform: scale(1);
    }
    100% {
        background-color: var(--highlight-fade);
        transform: scale(1);
    }
}

/* Pulsing loading state */
.price-loading-pulse {
    animation: gentlePulse 1500ms var(--ease-in-out-back) infinite;
}

@keyframes gentlePulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Price change bounce effect */
.price-change-bounce {
    animation: priceChangeBounce var(--animation-normal) var(--ease-spring);
}

@keyframes priceChangeBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ============================================
   TOUCH FEEDBACK ANIMATIONS
   ============================================ */

/* Filter button active state */
.filter-select-active {
    transform: scale(0.96);
    transition: transform 150ms var(--ease-ios);
}

.filter-select {
    transition: all var(--animation-fast) var(--ease-ios);
}

.filter-select:active {
    transform: scale(0.96);
}

/* Touch ripple effect */
.touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 122, 255, 0.3);
    animation: rippleEffect 600ms var(--ease-out-expo);
    pointer-events: none;
}

@keyframes rippleEffect {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Bounce animations for scroll boundaries */
@keyframes bounceLeft {
    0% { transform: translateX(0); }
    30% { transform: translateX(8px); }
    60% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

@keyframes bounceRight {
    0% { transform: translateX(0); }
    30% { transform: translateX(-8px); }
    60% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* ============================================
   LOADING SKELETON ENHANCEMENTS
   ============================================ */

/* Enhanced loading indicator */
.loading-indicator-enhanced {
    background: linear-gradient(90deg, 
        rgba(240, 240, 240, 0.8) 25%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(240, 240, 240, 0.8) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    overflow: hidden;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================
   RESPONSIVE ANIMATION OPTIMIZATIONS
   ============================================ */

/* Faster animations on mobile for better responsiveness */
@media (hover: none) and (pointer: coarse) {
    :root {
        --animation-fast: 150ms;
        --animation-normal: 250ms;
        --animation-slow: 400ms;
        --stagger-delay: 30ms;
    }
    
    .filter-select:active {
        transform: scale(0.94);
    }
}

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --animation-fast: 0.01ms;
        --animation-normal: 0.01ms;
        --animation-slow: 0.01ms;
        --stagger-delay: 0ms;
    }
    
    .table-row-enter,
    .table-row-exit,
    .price-updated,
    .price-loading-pulse,
    .touch-ripple,
    .loading-indicator-enhanced {
        animation: none !important;
    }
    
    .filter-select-active {
        transform: none;
        transition: none;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for smooth animations */
.table-row-enter,
.table-row-exit,
.price-updated,
.filter-select {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Contain layout shifts during animations */
.rating-table tbody {
    contain: layout;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --highlight-color: #ffd54f;
        --highlight-fade: rgba(255, 213, 79, 0);
    }
    
    .touch-ripple {
        background: rgba(100, 181, 246, 0.3);
    }
    
    .loading-indicator-enhanced {
        background: linear-gradient(90deg, 
            rgba(60, 60, 60, 0.8) 25%, 
            rgba(80, 80, 80, 0.9) 50%, 
            rgba(60, 60, 60, 0.8) 75%);
    }
}/**
 * MyChooz Rating Table Accessibility Styles
 * WCAG 2.1 AA compliant accessibility enhancements
 * Supports screen readers, keyboard navigation, and visual accessibility
 */

/* =================================
   SCREEN READER ONLY UTILITIES
   ================================= */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Screen reader only text that becomes visible when focused */
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* =================================
   FOCUS MANAGEMENT & VISIBILITY
   ================================= */

/* Enhanced focus styles with high contrast and visible indication */
.mcb-rating-table select:focus,
.mcb-rating-table button:focus,
.mcb-rating-table a:focus,
.mcb-rating-table tr:focus {
    outline: 3px solid var(--mcb-primary, #007cba) !important;
    outline-offset: 2px !important;
    background-color: rgba(0, 124, 186, 0.1) !important;
    transition: outline 150ms ease, background-color 150ms ease;
}

/* Enhanced focus for table rows */
.mcb-rating-table tbody tr:focus {
    background-color: rgba(0, 124, 186, 0.15) !important;
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.2);
    position: relative;
    z-index: 1;
}

/* Skip to content link for keyboard users */
.mcb-rating-table .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--mcb-primary, #007cba);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 100;
    font-weight: 600;
    transition: top 150ms ease;
}

.mcb-rating-table .skip-link:focus {
    top: 6px;
}

/* =================================
   HIGH CONTRAST & COLOR ACCESSIBILITY
   ================================= */

/* Ensure sufficient contrast ratios (WCAG AA: 4.5:1) */
.mcb-rating-table {
    color: #212529; /* High contrast text */
}

.mcb-rating-table .description {
    color: #495057; /* Minimum WCAG AA contrast */
}

.mcb-rating-table .price {
    color: #198754; /* Accessible green */
}

.mcb-rating-table .rank-circle {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    font-weight: 700;
    /* Ensure 4.5:1 contrast ratio */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mcb-rating-table {
        border: 2px solid currentColor;
    }
    
    .mcb-rating-table th,
    .mcb-rating-table td {
        border: 1px solid currentColor;
    }
    
    .mcb-rating-table .rank-circle {
        background: currentColor;
        border: 2px solid currentColor;
    }
}

/* =================================
   REDUCED MOTION ACCESSIBILITY
   ================================= */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .mcb-rating-table *,
    .mcb-rating-table *::before,
    .mcb-rating-table *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .mcb-rating-table .table-row-enter,
    .mcb-rating-table .table-row-exit {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* =================================
   TOUCH & POINTER ACCESSIBILITY
   ================================= */

/* Minimum touch target size (44px x 44px per WCAG) */
.mcb-rating-table select,
.mcb-rating-table button,
.mcb-rating-table a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
}

/* Increase touch targets for small screens */
@media (max-width: 768px) {
    .mcb-rating-table select,
    .mcb-rating-table button,
    .mcb-rating-table a {
        min-height: 48px;
        min-width: 48px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Enhanced hover states for mouse users */
@media (hover: hover) {
    .mcb-rating-table tbody tr:hover {
        background-color: rgba(0, 124, 186, 0.08);
        cursor: pointer;
    }
    
    .mcb-rating-table a:hover {
        text-decoration: underline;
        background-color: rgba(0, 124, 186, 0.1);
    }
}

/* =================================
   FONT SIZE & READABILITY
   ================================= */

/* Respect user's font size preferences */
.mcb-rating-table {
    font-size: 1rem; /* Relative sizing */
    line-height: 1.5; /* Improved readability */
}

.mcb-rating-table th {
    font-size: 1.1rem;
    font-weight: 600;
}

.mcb-rating-table .model {
    font-size: 1.05rem;
    font-weight: 500;
}

/* Support for large text (200% zoom) */
@media (min-resolution: 2x) {
    .mcb-rating-table {
        font-size: 1.1rem;
    }
}

/* =================================
   KEYBOARD NAVIGATION INDICATORS
   ================================= */

/* Show keyboard navigation is active */
.mcb-rating-table[data-keyboard-active="true"] tbody tr {
    cursor: pointer;
    position: relative;
}

.mcb-rating-table[data-keyboard-active="true"] tbody tr:focus::before {
    content: "→";
    position: absolute;
    left: -20px;
    font-weight: bold;
    color: var(--mcb-primary, #007cba);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.5; }
}

/* =================================
   ERROR STATES & FEEDBACK
   ================================= */

/* Accessible error states */
.mcb-rating-table .error-message {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 16px 0;
    font-weight: 500;
}

.mcb-rating-table .error-message::before {
    content: "⚠️ ";
    margin-right: 8px;
}

/* Loading states with accessible indicators */
.mcb-rating-table .loading-indicator {
    position: relative;
    padding-left: 32px;
}

.mcb-rating-table .loading-indicator::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-top: 2px solid var(--mcb-primary, #007cba);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* =================================
   RESPONSIVE ACCESSIBILITY
   ================================= */

/* Improve small screen accessibility */
@media (max-width: 768px) {
    .mcb-rating-table {
        font-size: 0.9rem;
    }
    
    /* Horizontal scroll indicator */
    .mcb-rating-table-container {
        position: relative;
    }
    
    .mcb-rating-table-container::after {
        content: "← Прокрутите горизонтально для просмотра всех данных →";
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.8rem;
        color: #6c757d;
        text-align: center;
        width: 100%;
    }
}

/* =================================
   PRINT ACCESSIBILITY
   ================================= */

@media print {
    .mcb-rating-table .sr-only {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
    }
    
    .mcb-rating-table a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* =================================
   FORCED COLORS MODE (Windows HIGH CONTRAST)
   ================================= */

@media (forced-colors: active) {
    .mcb-rating-table {
        forced-color-adjust: none;
    }
    
    .mcb-rating-table th,
    .mcb-rating-table td {
        border: 1px solid;
    }
    
    .mcb-rating-table .rank-circle {
        border: 2px solid;
        background: ButtonText;
        color: ButtonFace;
    }
    
    .mcb-rating-table a:focus,
    .mcb-rating-table tr:focus {
        forced-color-adjust: none;
        outline: 3px solid Highlight;
    }
}