/**
 * Category Review Page Styles
 * Figma Node: 6002:31133 � "Category - News"
 *
 * Design tokens:
 *   Background:              #101114
 *   Neutral/09 - Section:    #1C1E22
 *   Neutral/08 - Frame:      #25272D
 *   Neutral/07 - Border:     #30343B
 *   Neutral/06 - Frame 2:    #3C4049
 *   Primary:                 #1081DF
 *   Other/Yellow:            #9B7F0E
 *   Primary/01:              #FFFFFF
 *   Neutral/01:              #C4C8CF
 *   Neutral/02 - Secondary:   #8F96A3
 *   Font:                    IRANSansX
 *
 * @package Strategic_Club
 * @since 1.0.0
 */

/* --- Body override ----------------------------------------------------------- */
/* Ensure dark background extends to full viewport to prevent white corners
   around footer's rounded top borders. This file is only loaded on the
   category-???-?-????? page, so these styles are scoped appropriately. */
body.category-???-?-????? {
    background-color: #101114;
    /* Ensure no white shows through footer rounded corners */
    overflow-x: hidden;
    /* Extend background to cover viewport */
    min-height: 100vh;
}

body.category-???-?-????? .site-main {
    padding-top: 0;
    padding-bottom: 0;
    min-height: unset;
    margin-top: 0;
    margin-bottom: 0;
}

/* Ensure hero sits flush under header (no gap) */
body.category-???-?-????? .cat-review-hero {
    margin-top: 0;
    border-radius: 0;
}

/* Fix footer rounded corners - ensure dark background extends to edges */
body.category-???-?-????? #colophon.sc-footer,
body.category-???-?-????? .site-footer {
    position: relative;
    /* Ensure the footer background extends fully */
    background-clip: padding-box;
}

/* --- CSS Custom Properties --------------------------------------------------- */
.cat-review-page {
    --cr-bg-page:        #101114;
    --cr-bg-section:     #1c1e22;
    --cr-bg-frame:       #25272d;
    --cr-bg-frame2:      #3c4049;
    --cr-border:         #30343b;
    --cr-text-primary:   #ffffff;
    --cr-text-secondary: #8f96a3;
    --cr-text-muted:     #c4c8cf;
    --cr-primary:        #1081df;
    --cr-yellow:         #9b7f0e;
    --cr-radius-card:    8px;
    --cr-radius-badge:   4px;
    --cr-radius-btn:     8px;
    --cr-gap-grid:       24px;
    --cr-gap-section:    64px;
    --cr-transition:     0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --cr-font:           'Vazir', 'Vazir', 'Tahoma', sans-serif;
    padding-top: 0;
    padding-bottom: 0;
}

/* --- Page Base --------------------------------------------------------------- */
.cat-review-page {
    background-color: var(--cr-bg-page);
    min-height: 100vh;
    direction: rtl;
    font-family: var(--cr-font);
}

/* --- Hero Banner ------------------------------------------------------------- */
.cat-review-hero {
    position: relative;
    width: 100%;
    height: 286px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-review-hero__bg {
    position: absolute;
    inset: 0;
    background-color: #1a1c21;
    z-index: 0;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}
.cat-review-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cat-review-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(16, 17, 20, 0.90) 0%,
        rgba(25, 26, 30, 0.90) 100%
    );
    z-index: 1;
    border-radius: 0 0 16px 16px;
    border-bottom: 2px solid var(--neutral-07-boarder-dark-hover, #30343B);
}

.cat-review-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Decorative display text (transparent, behind heading) */
.cat-review-hero__display-text {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(143, 150, 163, 0.20);
    font-family: iransansx;
    font-size: 80px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: transparent;
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
    letter-spacing: 4px;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.cat-review-hero__title {
    font-family: var(--cr-font);
    font-size: 40px;
    font-weight: 400;
    color: var(--cr-text-primary);
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
}

/* Breadcrumb navigation */
.cat-review-hero__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    direction: rtl;
    flex-direction: row-reverse;
}

.cat-review-hero__breadcrumb-link {
    font-family: var(--cr-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--cr-text-muted);
    text-decoration: none;
    transition: color var(--cr-transition);
    line-height: 1.2;
}

.cat-review-hero__breadcrumb-link:hover {
    color: var(--cr-text-primary);
}

.cat-review-hero__breadcrumb-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cat-review-hero__breadcrumb-sep img {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

.cat-review-hero__breadcrumb-current {
    font-family: var(--cr-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--cr-text-muted);
    line-height: 1.2;
}

/* --- Main Section ------------------------------------------------------------ */
.cat-review-section {
    padding: 64px 0;
    background-color: var(--cr-bg-page);
}

.cat-review-container {
    max-width: 1640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 108px;
    display: flex;
    flex-direction: column;
    gap: var(--cr-gap-section);
    align-items: center;
}

/* --- Featured Slider --------------------------------------------------------- */
.cat-review-featured {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.cat-review-featured__link {
    display: block;
    width: 100%;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
}

.cat-review-featured__image-wrap {
    position: relative;
    width: 100%;
    height: 516px;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--cr-bg-section);
    direction: initial;
}

.cat-review-featured__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* NOTE: The scale-on-hover for the featured image is intentionally
   disabled on the Review category page. The JS carousel handles
   transitions instead. This rule is overridden below. */
.cat-review-featured__link:hover .cat-review-featured__image {
    transform: none; /* disabled for Review category � carousel handles transitions */
}

.cat-review-featured__shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(16, 17, 20, 0) 0%,
        #191a1e 100%
    );
    display: flex;
    align-items: flex-end;
    padding: 24px;
    border-radius: 16px;
}

.cat-review-featured__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

.cat-review-featured__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 24px;
    padding: 4px 8px;
    border-radius: var(--cr-radius-badge);
    flex-shrink: 0;
    /* background-color set inline */
}

.cat-review-featured__badge-text {
    font-family: var(--cr-font);
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.cat-review-featured__title {
    font-family: var(--cr-font);
    font-size: 24px;
    font-weight: 400;
    color: var(--cr-text-primary);
    margin: 0;
    line-height: 32px;
    text-align: right;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Featured Slider Score */
.cat-review-featured__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 150px;
    flex-shrink: 0;
    position: absolute;
    margin-top: 8px;
    align-self: flex-start;
}

.cat-review-featured__score-img {
    width: 56px;
    height: 56px;
    display: block;
    flex-shrink: 0;
}

.cat-review-featured__score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    line-height: 0;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}

/* Slider dots */
.cat-review-featured__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}

.cat-review-featured__dot {
    position: relative;
    width: 42px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--cr-bg-frame);
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--cr-transition), width var(--cr-transition), border-color var(--cr-transition), box-shadow var(--cr-transition), transform var(--cr-transition);
    flex-shrink: 0;
}

.cat-review-featured__dot::before {
    content: '';
    position: absolute;
    inset: -12px -6px;
}

.cat-review-featured__dot--active {
    width: 56px;
    background-color: var(--cr-primary);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 4px rgba(240, 57, 0, 0.2);
}

.cat-review-featured__dot:hover:not(.cat-review-featured__dot--active),
.cat-review-featured__dot:focus-visible:not(.cat-review-featured__dot--active) {
    background-color: var(--cr-bg-frame2);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.cat-review-featured__dot:focus-visible {
    outline: 2px solid var(--cr-primary);
    outline-offset: 4px;
}

/* --- Slider Controls (Nav Arrows + Dots) ------------------------------------ */
.cat-review-featured__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
    align-self: flex-end;
    padding: 8px;
    margin: -8px;
}

.cat-review-featured__nav {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: var(--cr-bg-frame);
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.cat-review-featured__nav img {
    width: 16px;
    height: 16px;
    display: block;
}

.cat-review-featured__nav--next {
    transform: rotate(180deg);
}

.cat-review-featured__nav:hover:not(:disabled) {
    background: var(--cr-bg-frame2);
}

.cat-review-featured__nav:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Posts Section ----------------------------------------------------------- */
.cat-review-posts-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* --- Controls: Tabs + Count -------------------------------------------------- */
.cat-review-controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

/* Sort Tabs */
.cat-review-tabs {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-direction: row-reverse;
}

.cat-review-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 8px 12px;
    border-radius: var(--cr-radius-btn);
    font-family: var(--cr-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--cr-text-secondary);
    text-decoration: none;
    line-height: 1.2;
    direction: rtl;
    transition: color var(--cr-transition), border-color var(--cr-transition);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    /* button reset */
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    outline: none;
}

.cat-review-tab:hover,
.cat-review-tab:focus-visible {
    color: var(--cr-text-primary);
    background-color: rgba(48, 52, 59, 0.45);
    outline: none;
}

.cat-review-tab--active {
    color: var(--cr-text-primary);
    border-bottom-color: var(--cr-primary);
}

/* Count + Filter Badge group (right side of controls) */
.cat-review-count-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    flex-direction: row-reverse;
}

/* Active Score Filter Badge */
.cat-review-active-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 8px 12px;
    background-color: var(--cr-primary);
    border-radius: var(--cr-radius-badge);
    flex-shrink: 0;
}

.cat-review-active-filter__label {
    font-family: var(--cr-font);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1;
}

.cat-review-active-filter__value {
    font-family: var(--cr-font);
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
}

.cat-review-active-filter__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #ffffff;
    opacity: 0.7;
    transition: opacity var(--cr-transition);
    text-decoration: none;
}

.cat-review-active-filter__clear:hover {
    opacity: 1;
}

/* Post Count */
.cat-review-count {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cat-review-count__number {
    font-family: var(--cr-font);
    font-size: 20px;
    font-weight: 500;
    color: var(--cr-text-primary);
    line-height: 1.5;
    direction: rtl;
    white-space: nowrap;
}

.cat-review-count__icon {
    flex-shrink: 0;
    display: block;
}

/* --- Posts Grid -------------------------------------------------------------- */
.cat-review-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cr-gap-grid);
    width: 100%;
    align-items: start;
}

/* --- Post Card --------------------------------------------------------------- */
.cat-review-card {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    border-radius: var(--cr-radius-card);
    overflow: hidden;
    transition:
        transform var(--cr-transition),
        box-shadow var(--cr-transition);
    will-change: transform;
    position: relative;
}

.cat-review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Card Image */
.cat-review-card__link {
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}

.cat-review-card__image-wrap {
    position: relative;
    width: 100%;
    height: 184px;
    overflow: hidden;
    border-radius: var(--cr-radius-card) var(--cr-radius-card) 0 0;
    background-color: var(--cr-bg-section);
}

.cat-review-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.cat-review-card:hover .cat-review-card__image {
    transform: scale(1.05);
}

.cat-review-card__image-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #25272d 0%, #1c1e22 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-review-card__image-placeholder::after {
    content: '';
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' stroke='%2330343b' stroke-width='1.5'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' stroke='%2330343b' stroke-width='1.5'/%3E%3Cpath d='M21 15L16 10L5 21' stroke='%2330343b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
}

/* Card Body */
.cat-review-card__body {
    background-color: var(--cr-bg-section);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    border-radius: 0 0 var(--cr-radius-card) var(--cr-radius-card);
    flex: 1;
    position: relative;
}

/* Category Badge */
.cat-review-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 24px;
    padding: 4px 8px;
    border-radius: var(--cr-radius-badge);
    text-decoration: none;
    flex-shrink: 0;
    transition:
        filter var(--cr-transition),
        transform var(--cr-transition);
    align-self: baseline;
    /* background-color is set inline via PHP */
}

.cat-review-card__badge:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
}

.cat-review-card__badge-text {
    font-family: var(--cr-font);
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* Card Title */
.cat-review-card__title {
    margin: 0;
    width: 100%;
    height: 27px;
    overflow: hidden;
    text-align: right;
    direction: rtl;
}

.cat-review-card__title-link {
    display: block;
    font-family: var(--cr-font);
    font-size: 18px;
    font-weight: 400;
    color: var(--cr-text-primary);
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--cr-transition);
}

.cat-review-card__title-link:hover {
    color: var(--cr-primary);
}

/* Game Name - under title, aligned left */
.cat-review-card__game-name {
    font-family: var(--cr-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--Neutral-01, #C4C8CF);
    line-height: 1.5;
    text-align: left;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Review Score Badge - positioned at line between image and body */
.cat-review-card__score {
    position: absolute;
    top: 156px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: transparent;
    box-shadow: none;
    flex-shrink: 0;
    z-index: 2;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state - centered on image with larger size */
.cat-review-card:hover .cat-review-card__score {
    left: 50%;
    top: 58px;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
}

.cat-review-card__score-img {
    width: 56px;
    height: 56px;
    display: block;
    flex-shrink: 0;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-review-card:hover .cat-review-card__score-img {
    width: 72px;
    height: 72px;
}

.cat-review-card__score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    line-height: 0;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    transition: font-size 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-review-card:hover .cat-review-card__score-text {
    font-size: 24px;
}

/* Dark overlay on image during hover */
.cat-review-card__image-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(25, 26, 30, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    border-radius: var(--cr-radius-card) var(--cr-radius-card) 0 0;
}

.cat-review-card:hover .cat-review-card__image-overlay {
    opacity: 1;
    visibility: visible;
}

/* Card Meta */
.cat-review-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    flex-direction: row-reverse;
}

.cat-review-card__meta-left,
.cat-review-card__meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-review-card__meta-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.cat-review-card__meta-item svg {
    flex-shrink: 0;
    display: block;
}

.cat-review-card__meta-value {
    font-family: var(--cr-font);
    font-size: 12px;
    font-weight: 400;
    color: var(--cr-text-secondary);
    line-height: 1;
    white-space: nowrap;
    direction: rtl;
}

/* --- Pagination -------------------------------------------------------------- */
.cat-review-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

.cat-review-pagination__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
}

.cat-review-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 8px;
    font-family: var(--cr-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--cr-text-primary);
    text-decoration: none;
    line-height: 1.5;
    transition:
        background-color var(--cr-transition),
        color var(--cr-transition),
        transform var(--cr-transition);
    cursor: pointer;
    flex-shrink: 0;
    border: none;
    background: transparent;
}

.cat-review-pagination__btn:hover:not(.cat-review-pagination__btn--current):not(.cat-review-pagination__btn--disabled) {
    background-color: var(--cr-bg-frame);
    transform: scale(1.05);
}

.cat-review-pagination__btn--current {
    background-color: var(--cr-primary);
    color: #ffffff;
    cursor: default;
    pointer-events: none;
}

.cat-review-pagination__btn--nav {
    color: var(--cr-text-primary);
}

.cat-review-pagination__btn--nav svg {
    display: block;
}

.cat-review-pagination__btn--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.cat-review-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: var(--cr-font);
    font-size: 16px;
    color: var(--cr-text-primary);
    line-height: 1.5;
    flex-shrink: 0;
    user-select: none;
}

/* --- Empty State ------------------------------------------------------------- */
.cat-review-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
    padding: 64px 0;
}

/* When empty state is rendered inside the grid (AJAX response) */
#cat-review-grid .cat-review-empty,
#cat-review-grid .cat-review-empty--ajax {
    grid-column: 1 / -1;
}

.cat-review-empty__text {
    font-family: var(--cr-font);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cr-text-primary);
    margin: 0;
    text-align: center;
    direction: rtl;
}

/* --- Card Entrance Animation ------------------------------------------------- */
@keyframes cr-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cat-review-card {
    animation: cr-card-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Stagger delay for each card in the grid */
.cat-review-card:nth-child(1)  { animation-delay: 0.00s; }
.cat-review-card:nth-child(2)  { animation-delay: 0.05s; }
.cat-review-card:nth-child(3)  { animation-delay: 0.10s; }
.cat-review-card:nth-child(4)  { animation-delay: 0.15s; }
.cat-review-card:nth-child(5)  { animation-delay: 0.20s; }
.cat-review-card:nth-child(6)  { animation-delay: 0.25s; }
.cat-review-card:nth-child(7)  { animation-delay: 0.30s; }
.cat-review-card:nth-child(8)  { animation-delay: 0.35s; }
.cat-review-card:nth-child(9)  { animation-delay: 0.40s; }

/* --- Filter Switch Transition ------------------------------------------------ */
/* The JS sets opacity/transform inline; these defaults ensure smooth start */
#cat-review-grid {
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: opacity, transform;
}

/* Loading state: skeleton shimmer on grid */
#cat-review-grid.is-loading {
    pointer-events: none;
    opacity: 0.4;
}

/* ---------------------------------------------------------------------------
   REVIEW SCORE ROW SYSTEM
   Custom system for filtering reviews by score
   --------------------------------------------------------------------------- */

/* --- Row Wrapper ------------------------------------------------------------- */
.cat-review-score-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* --- Inner: header + track side by side ------------------------------------- */
.cat-review-score-row__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 100%;
    direction: rtl;
}

/* --- Section Header ---------------------------------------------------------- */
.cat-review-score-row__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0;
}

.cat-review-score-row__header-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-review-score-row__header-icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

.cat-review-score-row__header-title {
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    direction: rtl;
}

/* --- Scroll Track ------------------------------------------------------------ */
/* JS wraps cards in a .cat-review-score-row__strip and animates it with
   transform: translateX() � same pattern as game/mod category rows.
   The track is the clipping viewport; overflow must be hidden. */
.cat-review-score-row__track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 8px 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    direction: ltr;
}

.cat-review-score-row__track.is-dragging {
    cursor: grabbing;
}

/* Inner strip � created by JS, holds original + cloned cards */
.cat-review-score-row__strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    will-change: transform;
}

/* --- Individual Score Card --------------------------------------------------- */
/* Figma: border border-[#30343b], h-[80px], rounded-[8px], overflow-clip,
   px-[40px], flex flex-col gap-[8px] items-center justify-center */
.cat-review-score-card {
    position: relative;
    flex-shrink: 0;
    height: 80px;
    border: 1px solid var(--cr-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 40px;
    text-decoration: none;
    transition: border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    direction: ltr;
    cursor: pointer;
    background: transparent;
    white-space: nowrap;
}

.cat-review-score-card:hover {
    border-color: var(--cr-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 129, 223, 0.25);
}

.cat-review-score-card--active {
    border-color: var(--cr-primary);
    box-shadow: 0 0 0 2px rgba(16, 129, 223, 0.4);
}

/* Background image (covers the card) */
.cat-review-score-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    border-radius: 8px;
}

/* Dark overlay � Figma: bg-[rgba(25,26,30,0.7)], h-[80px], w-[303px], rounded-[8px] */
.cat-review-score-card__shadow {
    position: absolute;
    inset: 0;
    background-color: rgba(25, 26, 30, 0.7);
    border-radius: 8px;
    pointer-events: none;
}

/* Content: score atom SVG + title � Figma: flex gap-[16px] items-center justify-center */
.cat-review-score-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Score atom SVG wrapper � Figma: size-[56px] */
.cat-review-score-card__score {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    position: relative;
}

/* Score atom SVG image */
.cat-review-score-card__score-img {
    width: 56px;
    height: 56px;
    display: block;
    flex-shrink: 0;
}

/* Score number overlay on the atom SVG */
.cat-review-score-card__score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    line-height: 0;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}

/* Title � Figma: font-['IRANSansX:Medium'], text-[20px], text-white, leading-[1.5] */
.cat-review-score-card__title {
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5;
    white-space: nowrap;
    text-align: center;
    direction: rtl;
}

/* Placeholder card (no image) */
.cat-review-score-card--no-image .cat-review-score-card__bg {
    display: none;
}

.cat-review-score-card--no-image {
    background-color: #25272d;
}

/* --- Responsive -------------------------------------------------------------- */

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
    .cat-review-container {
        padding: 0 108px;
    }
}

/* Desktop (1200px�1639px) */
@media (max-width: 1639px) {
    .cat-review-container {
        padding: 0 48px;
    }
}

/* Tablet landscape (1024px�1199px) */
@media (max-width: 1199px) {
    .cat-review-container {
        padding: 0 32px;
    }

    .cat-review-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .cat-review-featured__image-wrap {
        height: 400px;
    }
}

/* Tablet portrait (768px�1023px) */
@media (max-width: 1023px) {
    .cat-review-container {
        padding: 0 24px;
    }

    .cat-review-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .cat-review-hero {
        height: 220px;
    }

    .cat-review-hero__title {
        font-size: 28px;
    }

    .cat-review-featured__image-wrap {
        height: 320px;
    }

    .cat-review-featured__title {
        font-size: 20px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .cat-review-container {
        padding: 0 16px;
        gap: 40px;
    }

    .cat-review-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cat-review-section {
        padding: 40px 0 60px;
    }

    .cat-review-hero {
        height: 200px;
    }

    .cat-review-hero__display-text {
        font-size: 48px;
    }

    .cat-review-hero__title {
        font-size: 24px;
    }

    .cat-review-hero__breadcrumb-link,
    .cat-review-hero__breadcrumb-current {
        font-size: 14px;
    }

    .cat-review-featured__image-wrap {
        height: 240px;
    }

    .cat-review-featured__title {
        font-size: 16px;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cat-review-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cat-review-controls {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .cat-review-count-group {
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .cat-review-tabs {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .cat-review-card__image-wrap {
        height: 200px;
    }

    .cat-review-card__title {
        height: auto;
        white-space: normal;
    }

    .cat-review-card__title-link {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cat-review-card__game-name {
        font-size: 12px;
    }

    /* Score positioning on mobile */
    .cat-review-card__score {
        top: 144px;
        left: 12px;
        width: 48px;
        height: 48px;
    }

    .cat-review-card:hover .cat-review-card__score {
        top: 72px;
    }
    
    .cat-review-card__score-img {
        width: 48px;
        height: 48px;
    }
    
    .cat-review-card__score-text {
        font-size: 16px;
    }
    
    /* --- Score Row - Mobile (Figma node: 6312:36214) --- */
    /* Stack header above cards on mobile */
    .cat-review-score-row__inner {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .cat-review-score-row__header {
        align-items: center;
    }

    .cat-review-score-row__header-title {
        font-size: 16px;
        font-weight: 400;
    }

    .cat-review-score-row__strip {
        gap: 12px;
    }

    .cat-review-score-row__track {
        width: 100%;
        padding: 8px 4px;
    }

    /* Score cards: full 80px height, 40px horizontal padding */
    .cat-review-score-card {
        height: 80px;
        padding: 0 40px;
    }

    .cat-review-score-card__score {
        width: 36px;
        height: 36px;
    }

    .cat-review-score-card__score-img {
        width: 36px;
        height: 36px;
    }

    .cat-review-score-card__score-text {
        font-size: 16px;
    }

    .cat-review-score-card__title {
        font-size: 16px;
    }

    /* Center slider controls on mobile */
    .cat-review-featured__controls {
        align-self: center;
    }
}

/* --- Reduced Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cat-review-card {
        animation: none;
    }

    .cat-review-card,
    .cat-review-card__image,
    .cat-review-card__badge,
    .cat-review-card__title-link,
    .cat-review-tab,
    .cat-review-pagination__btn,
    .cat-review-featured__image,
    .cat-review-featured__dot,
    #cat-review-grid,
    .cat-review-score-card,
    .cat-review-score-card__score-img {
        transition: none;
    }

    /* Freeze the score row marquee strip for users who prefer reduced motion */
    .cat-review-score-row__strip {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }
}

    .cat-review-featured__subtitle {
        color: var(--Neutral-01, #C4C8CF);
        font-family: Vazir;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 30px */
    }