/**
 * КАРТОЧКИ СЛОТОВ — slot-card.css
 * ================================
 * @package Gambling_Theme
 * @version 3.8.0 - Исправлены обычные карточки + фикс номера на мобильных
 */

/* ════════════════════════════════════════════════════════════════
   CSS ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ
   ════════════════════════════════════════════════════════════════ */

.slot-card {
    --sc-bg:               var(--bg-tertiary);
    --sc-border:           var(--border-color);
    --sc-text-primary:     var(--text-primary);
    --sc-text-secondary:   var(--text-secondary);
    --sc-accent:           var(--primary);
    --sc-radius:           var(--radius-lg);
    --sc-shadow:           var(--shadow-sm);
    --sc-shadow-hover:     var(--shadow-lg);
    --sc-transition:       var(--transition-base);

/*    background:     var(--sc-bg);*/
    background: #252538;
    border:         1px solid var(--sc-border);
    border-radius:  var(--sc-radius);
    overflow:       hidden;
    transition:     var(--sc-transition);
    box-shadow:     var(--sc-shadow);

    display:        flex;
    flex-direction: column;
    height:         100%;
    position:       relative;
    animation:      fadeInUp 0.4s ease forwards;
}

.slot-card:hover {
    transform:    translateY(-2px);
    box-shadow:   var(--sc-shadow-hover);
    border-color: var(--sc-accent);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   ЗВЁЗДЫ РЕЙТИНГА
   ════════════════════════════════════════════════════════════════ */

.slot-card__rating-unified {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   nowrap;
}

.slot-card__rating-unified .average-stars .star {
    font-size: 14px !important;
}

.slot-card__rating-number {
    font-size:   13px;
    font-weight: 700;
    color:       #ff9500;
    line-height: 1;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   ТИП 1: ПРЕМИУМ-КАРТОЧКА (С КАЗИНО)
   ════════════════════════════════════════════════════════════════ */

.slot-card--premium {
    flex-direction: row;
    align-items:    stretch;
    min-height:     120px;
    grid-column:    1 / -1;
    width:          100%;
/*    background: #1e1e2e;*/
    background: #252538;
}

.slot-card-premium__left {
    position:    relative;
    width:       200px;
    flex-shrink: 0;
/*    background:  var(--bg-secondary);*/
    display:     flex;
    overflow:    hidden;
}

.slot-card-premium__tag {
    position:       absolute;
    top:            8px;
    left:           8px;
    z-index:        2;
    background:     var(--info, #3b82f6);
    color:          #fff;
    padding:        3px 8px;
    border-radius:  4px;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space:    nowrap;
}

.slot-card-premium__image-wrapper {
    width:  100%;
    height: 100%;
}

.slot-card-premium__image-wrapper .slot-card__link {
    display: block;
    width:   100%;
    height:  100%;
}

.slot-card-premium__image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.3s ease;
}

.slot-card-premium__image-wrapper:hover .slot-card-premium__image {
    transform: scale(1.05);
}

.slot-card-premium__center {
    display:        flex;
    flex-direction: column;
    flex:           1 1 auto;
    min-width:      0;
/*    border-left:    1px solid var(--sc-border);*/
/*    border-right:   1px solid var(--sc-border);*/
/*    padding-bottom: 5px;*/
/*    padding-left: 5px;*/
    padding: 0 5px 5px 5px;
}

.slot-card-premium__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         10px 15px;
/*    border-bottom:   1px solid var(--sc-border);*/
/*    background:      rgba(0, 0, 0, 0.08);*/
    gap:             10px;
    flex-shrink:     0;
}

.slot-card-premium__title-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    min-width:   0;
    flex:        1 1 auto;
}

.slot-card-premium__position {
    font-size:   15px;
    font-weight: 800;
/*    color:       var(--accent-color, #f97316);*/
    color: #ff9500;
    flex-shrink: 0;
    white-space: nowrap;
}

.slot-card-premium__title {
    margin:      0 !important;
    font-size:   16px;
    font-weight: 700;
    min-width:   0;
    flex:        1 1 auto;
}

.slot-card-premium__title a {
    color:           var(--sc-text-primary);
    text-decoration: none;
    display:         block;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.slot-card-premium__title a:hover {
    color: var(--sc-accent);
}

.slot-card-premium__rating {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.slot-card-premium__promo {
    display:     flex;
    align-items: stretch;
    flex:        1 1 auto;
    background: var(--gradient-primary);
    border-radius: 3px;
/*    margin: 0 5px;*/
}

.slot-card-premium__logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           110px;
    flex-shrink:     0;
/*    padding:         10px;*/
/*    border-right:    1px solid var(--sc-border);*/
/*    background:      rgba(15, 23, 42, 0.4);*/
}

.slot-card-premium__logo img {
    max-width:  95px;
/*    max-height: 45px;*/
    max-height: 60px;
    object-fit: contain;
    display:    block;
}

.slot-card-premium__logo-placeholder {
    font-size:      18px;
    font-weight:    800;
    color:          var(--sc-text-secondary);
    text-transform: uppercase;
}

.slot-card-premium__bonus {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    flex:            1 1 auto;
    padding:         10px 15px;
/*    border-right:    1px solid var(--sc-border);*/
    gap:             4px;
    min-width:       0;
}

.slot-card-premium__bonus-label {
/*    font-size:      10px;*/
/*    font-size:      12px;*/
    font-size:      16px;
/*    color:          var(--sc-text-secondary);*/
    color:          var(--sc-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space:    nowrap;
}

.slot-card-premium__bonus-value {
/*    font-size:   14px;*/
    font-size:      16px;
    font-weight: 700;
/*    color:       #bbf7d0;*/
    color:          var(--sc-text-primary);
    line-height: 1.3;
}

.slot-card-premium__code {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           130px;
    flex-shrink:     0;
    padding:         10px;
    gap:             6px;
}

.slot-card-premium__code-label {
/*    font-size:      10px;*/
    font-size:      12px;
/*    font-weight: 700;*/
/*    color:          var(--sc-text-secondary);*/
    color:          var(--sc-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space:    nowrap;
}

.slot-card-premium__code-empty {
    font-size:  16px;
    color:      var(--sc-text-secondary);
    text-align: center;
}

.slot-card-premium__right {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             10px;
    min-width:       180px;
    flex-shrink:     0;
    padding:         12px;
}

/* ════════════════════════════════════════════════════════════════
   ТИП 2: ПРОСТАЯ КАРТОЧКА (ВСЕГДА ВЕРТИКАЛЬНАЯ)
   ════════════════════════════════════════════════════════════════ */

.slot-card--simple .slot-card__image-wrapper {
    position:      relative;
    width:         100%;
    padding-top:   60%;
    overflow:      hidden;
    background:    var(--bg-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.slot-card--simple .slot-card__link {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    display:  block;
    z-index:  1;
}

.slot-card--simple .slot-card__image {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.slot-card--simple:hover .slot-card__image {
    transform: scale(1.08);
}

.slot-card--simple .slot-overlay {
    position:        absolute;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    background:      rgba(0, 0, 0, 0.6);
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity 0.3s ease;
    z-index:         10;
    backdrop-filter: blur(2px);
}

.slot-card--simple:hover .slot-overlay {
    opacity: 1;
}

.slot-card--simple .btn-play-circle {
    display:    block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index:    11;
}

.slot-card--simple .btn-play-circle:hover {
    transform: scale(1.15);
}

.slot-card--simple .btn-play-circle svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.slot-card-simple__body {
/*    padding:        16px;*/
    padding:        0 3px 0 3px;
    display:        flex;
    flex-direction: column;
    flex-grow:      1;
}

.slot-card-simple__title-row {
/*    margin-bottom: 8px;*/
    padding-top: 5px;
}

.slot-card-simple__title {
    margin:      0;
    font-size:   16px;
    font-weight: 700;
    text-align:  center;
}

.slot-card-simple__title a {
    color:           var(--sc-text-primary);
    text-decoration: none;
    display:         block;
    line-height:     1.3;
}

.slot-card-simple__title a:hover {
    color: var(--sc-accent);
}

.slot-card-simple__rating {
    display:         flex;
    justify-content: center;
    align-items:     center;
    padding:         4px 0 15px 0;
/*    margin-bottom:   12px;*/
/*    border-bottom:   1px solid var(--sc-border);*/
}

.slot-card-simple__meta {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  16px;
    padding:        10px;
    border-radius:  6px;
    background:     rgba(15, 23, 42, 0.4);
    border:         1px solid rgba(51, 65, 85, 0.6);
}

.slot-card-simple__meta-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             8px;
    font-size:       12px;
}

.slot-card-simple__meta-label {
    color:       var(--sc-text-secondary);
    flex-shrink: 0;
}

.slot-card-simple__meta-value {
    font-weight:   600;
    color:         var(--sc-text-primary);
    text-align:    right;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    min-width:     0;
}

.slot-card-simple__actions {
    margin-top:     auto;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    width:          100%;
    flex-shrink:    0;
    padding:   0 6px 6px 6px;
}

/* ════════════════════════════════════════════════════════════════
   СЕТКИ
   ════════════════════════════════════════════════════════════════ */

.slots-list,
.archive-slot-cards-wrapper {
    display:               grid;
    gap:                   var(--spacing-lg, 20px);
    width:                 100%;
    grid-template-columns: repeat(4, 1fr);
    align-items:           stretch;
}

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

@media (max-width: 1200px) {
    .slots-list,
    .archive-slot-cards-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .slot-card-premium__left  { width: 170px; }
    .slot-card-premium__logo  { width: 90px; }
    .slot-card-premium__code  { width: 110px; }
    .slot-card-premium__right { width: 140px; }
}

/* ════════════════════════════════════════════════════════════════
   🎯 ПЛАНШЕТЫ (768px - 992px): ТОЛЬКО ПРЕМИУМ-КАРТОЧКА 30/70
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 992px) {

    .slots-list,
    .archive-slot-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* ══ ПРЕМИУМ-КАРТОЧКА: CSS Grid 30/70 ══ */
    .slot-card--premium {
        display:               grid;
        grid-template-columns: 30% 70%;
        grid-template-rows:    auto auto auto;
        min-height:            140px;
        flex-direction:        unset;
        align-items:           stretch;
    }

    .slot-card-premium__left {
        grid-column: 1;
        grid-row:    1;
        width:       100%;
        height:      auto;
        min-height:  140px;
        flex-shrink: unset;
    }

    .slot-card-premium__image-wrapper { height: 100%; }
    .slot-card-premium__image-wrapper .slot-card__link,
    .slot-card-premium__image { height: 100%; }

    .slot-card-premium__center {
        grid-column:     2;
        grid-row:        1;
        display:         flex;
        flex-direction:  column;
        justify-content: center;
        align-items:     center;
/*        border-left:     1px solid var(--sc-border);*/
        border-right:    none;
        border-bottom:   none;
        padding:         0 5px;
    }

    .slot-card-premium__header {
        display:         flex;
        flex-direction:  column;
        justify-content: center;
        align-items:     center;
        text-align:      center;
        padding:         16px 12px;
        border-bottom:   none;
        background:      transparent;
        gap:             8px;
        width:           100%;
        flex:            1;
    }

    .slot-card-premium__title-wrap {
        display:         flex;
        flex-direction:  row;
        justify-content: center;
        align-items:     center;
        width:           100%;
        gap:             6px;
        flex-wrap:       wrap;
    }

    .slot-card-premium__position {
        font-size:   16px;
        font-weight: 800;
        flex-shrink: 0;
    }

    .slot-card-premium__title {
        font-size: 15px;
        flex:      unset;
        min-width: unset;
    }

    .slot-card-premium__title a {
        white-space:   normal;
        overflow:      visible;
        text-overflow: unset;
        text-align:    center;
    }

    .slot-card-premium__rating {
        justify-content: center;
        width:           100%;
        flex-shrink:     unset;
    }

    .slot-card-premium__promo {
        grid-column:  1 / 3;
        grid-row:     2;
        border-top:   1px solid var(--sc-border);
        flex-wrap:    nowrap;
        align-items:  stretch;
        flex:         unset;
        width:           100%;
    }

    .slot-card-premium__logo {
/*        width:       20%;*/
        width:       10%;
        min-width:   70px;
        flex-shrink: 0;
    }

    .slot-card-premium__logo img {
        max-width:  70px;
        max-height: 40px;
    }

    .slot-card-premium__bonus {
        flex:         1;
        min-width:    0;
        padding:      8px 10px;
/*        border-right: 1px solid var(--sc-border);*/
    }

    .slot-card-premium__bonus-label { 
/*        font-size: 9px;*/
        font-size: 14px; 
    }
    .slot-card-premium__bonus-value { 
/*        font-size: 12px;*/
        font-size: 14px;
    }

    .slot-card-premium__code {
/*        width:       110px;*/
        width:       150px;
        flex-shrink: 0;
        padding:     8px;
    }

    .slot-card-premium__code-label { font-size: 9px; }

    .slot-card-premium__right {
        grid-column:    1 / 3;
        grid-row:       3;
        display:        flex;
        flex-direction: row;
        justify-content: stretch;
        min-width:      unset;
        width:          100%;
        padding:        12px;
        gap:            12px;
/*        border-top:     1px solid var(--sc-border);*/
        flex-shrink:    unset;
    }

    .slot-card-premium__btn {
        flex:       1;
        font-size:  13px;
        padding:    10px 8px;
        text-align: center;
    }

    /* 🎯 ПРОСТЫЕ КАРТОЧКИ остаются вертикальными на всех разрешениях */
}

/* ════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЕ УСТРОЙСТВА (до 767px)
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .slots-list,
    .archive-slot-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .slot-card--premium {
        display:        flex;
        flex-direction: column;
        min-height:     auto;
    }

    .slot-card-premium__left {
        width:  100%;
        height: 200px;
    }

    .slot-card-premium__center {
        border-left:   none;
        border-right:  none;
/*        border-top:    1px solid var(--sc-border);*/
/*        border-bottom: 1px solid var(--sc-border);*/
    }

    .slot-card-premium__header {
        flex-direction:  column;
        justify-content: center;
        align-items:     center;
        text-align:      center;
        padding:         5px 15px 15px 15px;
        gap:             8px;
    }

    /* 🎯 ФИКС: Центрируем номер и название вместе */
    .slot-card-premium__title-wrap {
        display:         flex;
        flex-direction:  row;
        justify-content: center;
        align-items:     center;
        width:           100%;
        gap:             8px;
    }
    
    .slot-card-premium__position {
        font-size:   22px;
    }    
    
    .slot-card-premium__title {
        flex:       unset; /* Отключаем растягивание */
        text-align: center;
        margin:     0;
        font-size:   22px;
    }

    .slot-card-premium__title a {
        white-space:   normal;
        overflow:      visible;
        text-overflow: unset;
        text-align:    center;
    }

    .slot-card-premium__rating {
        justify-content: center;
    }

    .slot-card-premium__promo {
        flex-wrap: wrap;
        margin: 0 5px;
    }

    .slot-card-premium__logo {
/*        width:         50%;*/
        width:         20%;
        padding-top: 5px;
/*        border-bottom: 1px solid var(--sc-border);*/
/*        border-right:  1px solid var(--sc-border);*/
    }
    
    .slot-card-premium__code {
/*        width:         50%;*/
        width:         100%;
        padding: 0px;
        gap: 1px;
        border-top: 1px solid var(--sc-border);
/*        border-bottom: 1px solid var(--sc-border);*/
    }
    
    .slot-card-premium__code-label { 
/*            font-size: 22px; */
            font-size: 20px; 
    } 

    
    .slot-card-premium__bonus {
/*        width:        100%;*/
        width:        80%;
        border-right: none;
        text-align:   center;
        align-items:  center;
    }
    
    .casino-card__promo-code {
        font-size: 22px; 
        line-height: var(--line-height-relaxed) !important; /*  1.0 */
        padding: 0 !important; 
 }
  
    .casino-card__promo-copied {
        font-size: 22px !important; 
        line-height: var(--line-height-relaxed) !important;  /*  1.0 */
        padding: 0 !important; 
 } 
    
    .slot-card-premium__right {
        width:          100%;
        display:        flex;
        flex-direction: column;
        padding:        16px;
        gap:            12px;
        min-width:      unset;
    }

    .slot-card-simple__body {
        padding: 10px 8px;
    }

    .slot-card-simple__title {
        font-size:   14px;
        line-height: 1.2;
    }

    .slot-card-simple__meta {
        padding:       8px 6px;
        gap:           4px;
        margin-bottom: 10px;
    }

    .slot-card-simple__meta-row {
/*        font-size: 20px;*/
        font-size: 14px;
    }

    .slot-card__rating-unified .average-stars .star {
        font-size: 16px !important;
    }

    .slot-card__rating-number {
        font-size: 20px;
    }
}

@media (max-width: 480px) {

    .slots-list,
    .archive-slot-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .slot-card-simple__body {
        padding: 8px 6px;
    }

    .slot-card-simple__title {
/*        font-size: 13px;*/
        font-size: 22px;
    }

    .slot-card-simple__meta-row {
/*        font-size: 9px;*/
        font-size: 14px;
        gap:       4px;
    }

    .slot-card__rating-unified .average-stars .star {
        font-size: 16px !important;
    }

    .slot-card__rating-number {
        font-size: 18px;
    }
}

/* ════════════════════════════════════════════════════════════════
   ИЗОЛЯЦИЯ СТИЛЕЙ ПРОМОКОДА
   ════════════════════════════════════════════════════════════════

.slot-card-premium__code-btn.casino-card__promo-btn {
    width:     auto !important;
    min-width: 0 !important;
    margin:    0 !important;
}

.slot-card-premium__code-btn .casino-card__promo-code::after {
    content:     ' 📋 ';
    font-size:   11px;
    margin-left: 2px;
}

.slot-card-premium__code-btn.is-copied .casino-card__promo-code::after {
    display: none;
}

*/




/* ════════════════════════════════════════════════════════════════
   КАРТОЧКИ ТЕРМИНОВ ТАКСОНОМИЙ
   ════════════════════════════════════════════════════════════════ */

.taxonomy-term-card {
    /* Наследует все стили от .slot-card--simple */
}

/* Переопределяем image-wrapper: убираем padding-top трюк, используем flexbox */
.taxonomy-term-card .slot-card__image-wrapper {
    position: relative;
    width: 100%;
/*    height: 150px;           /* фиксированная высота вместо padding-top: 60% */
/*    min-height: 100px;  */
    height: 120px;
    padding-top: 0;          /* сбрасываем padding-top от slot-card--simple */
    background: #1e1e2e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Ссылка-обёртка: сбрасываем абсолютное позиционирование, добавляем padding для контроля размера */
.taxonomy-term-card .slot-card__image-wrapper .slot-card__link {
    position: static;        /* сбрасываем position: absolute от slot-card--simple */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;          /* контролирует размер логотипа - уменьшите для большего размера */
    z-index: 1;
}

/* Картинка: статичная, занимает всё доступное пространство */
.taxonomy-term-card .slot-card__image {
    position: static;        /* сбрасываем position: absolute от slot-card--simple */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;     /* сохраняет пропорции логотипа без обрезки */
    top: auto;
    left: auto;
    transition: transform 0.3s ease;
}

/* Hover-эффект масштабирования */
.taxonomy-term-card:hover .slot-card__image {
    transform: scale(1.05);
}

/* Overlay остаётся абсолютным поверх всего wrapper */
.taxonomy-term-card .slot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(2px);
}

.taxonomy-term-card:hover .slot-overlay {
    opacity: 1;
}

/* Убираем блок характеристик (мета) для карточек терминов */
.taxonomy-term-card .slot-card-simple__meta {
    display: none;
}

/* Корректировка отступов */
.taxonomy-term-card .slot-card-simple__title-row {
    padding-top: 10px;
    margin-bottom: 15px;
}

.taxonomy-term-card .slot-card-simple__actions {
    margin-top: auto;
    padding: 0 6px 10px 6px;
}

/* ── Адаптивность ── */
@media (max-width: 767px) {
    .taxonomy-term-card .slot-card__image-wrapper {
        height: 130px;
    }

    .taxonomy-term-card .slot-card__image-wrapper .slot-card__link {
        padding: 15px;       /* уменьшаем отступы - логотип становится крупнее */
    }

    .taxonomy-term-card .slot-card-simple__title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .taxonomy-term-card .slot-card__image-wrapper {
        height: 110px;
    }

    .taxonomy-term-card .slot-card__image-wrapper .slot-card__link {
        padding: 12px;
    }
}