/**
 * Game Download Post Styles
 * Figma Node: 4001:7846 — PostHeaderSection (Game type)
 *
 * Design tokens:
 *   Neutral/01:  #C4C8CF  — secondary text
 *   Neutral/02:  #8F96A3  — meta text
 *   Neutral/08:  #25272D  — dark button bg
 *   Neutral/09:  #1C1E22  — card bg
 *   Primary/01:  #FFFFFF  — title / body text
 *   Primary:     #1081DF  — blue accent / download button
 *   Other/Yellow:#CAA512  — SC score border
 *   Other/Green: #1C7D45  — Steam score border
 *   Neutral/07:  #30343B  — thumbnail border
 *
 * @package Strategic_Club
 * @since 1.0.0
 */

/* ==========================================================================
   Page wrapper
   ========================================================================== */

.game-download-post-main {
    padding-top: 64px;
    padding-bottom: 48px;
}

.game-download-post-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================================
   Article root
   flex-col gap-16px items-start
   ========================================================================== */

.gdp-article {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    direction: rtl;
}

/* ==========================================================================
   POST HEADER SECTION — Figma Node 4001:7846
   flex-col gap-24px items-start
   ========================================================================== */

.gdp-header-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

/* Inner meta wrapper — flex-col gap-12px items-end */
.gdp-header-meta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
    flex-shrink: 0;
}

/* ── Row 1: Title + Breadcrumb ── */

.gdp-breadcrumb-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    gap: 16px;
}

/* Post Title — IRANSansX Regular 24px, line-height 32px, color #FFFFFF */
.gdp-post-title {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: 0;
    color: #ffffff;
    text-align: right;
    margin: 0;
    flex-shrink: 0;
    max-width: 70%;
}

/* Subtitle — IRANSansX Regular 18px, color #8F96A3 */
.gdp-post-subtitle {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.5;
    color: #8f96a3;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Breadcrumb — flex gap-4px items-center justify-end */
.gdp-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

.gdp-breadcrumb-current {
    display: inline-block;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #c4c8cf;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    vertical-align: middle;
}

.gdp-breadcrumb-item {
    min-width: 0;
    overflow: hidden;
}

.gdp-breadcrumb-link {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #c4c8cf;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.gdp-breadcrumb-link:hover {
    color: #ffffff;
}

.gdp-breadcrumb-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.gdp-breadcrumb-sep svg,
.gdp-breadcrumb-sep img {
    width: 18px;
    height: 18px;
    display: block;
}

/* ── Row 2: Meta + Categories ── */

.gdp-meta-categories-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    gap: 16px;
}

.gdp-meta-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.gdp-meta-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gdp-meta-stat {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.gdp-meta-value {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: #8f96a3;
    text-align: center;
    white-space: nowrap;
}

.gdp-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.gdp-meta-icon svg,
.gdp-meta-icon img {
    width: 14px;
    height: 14px;
    display: block;
}

.gdp-meta-author-date {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gdp-meta-date {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: #8f96a3;
    text-align: center;
    white-space: nowrap;
}

.gdp-meta-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #8f96a3;
    flex-shrink: 0;
}

.gdp-meta-author {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: #8f96a3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.gdp-meta-author:hover {
    color: #c4c8cf;
}

.gdp-selected-categories {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    direction: ltr;
}

.gdp-category-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 8px 12px;
    background-color: #25272d;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.gdp-category-btn:hover {
    background-color: #2e3038;
    color: #ffffff;
}

/* ==========================================================================
   MAIN CONTENT ROW — Figma Node 4001:7742
   flex gap-24px items-center
   ========================================================================== */

.gdp-content-row {
    display: flex;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    flex-shrink: 0;
}

/* ==========================================================================
   DOWNLOAD INFO CARD (LEFT) — Figma Node 4001:7743
   bg #1C1E22, rounded-8px, flex-col, justify-between
   Width: ~392px (flex-shrink-0), height: 579px
   ========================================================================== */

.gdp-download-info {
    background-color: #1c1e22;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    width: 392px;
    position: relative;
    padding-bottom: 24px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* Featured image at top of card — Figma: absolute h-176px, rounded-tl-8px rounded-tr-8px */
.gdp-download-cover {
    position: relative;
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
    height: 176px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    margin-bottom: 24px;
}

.gdp-download-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    border-radius: 8px 8px 0 0;
}

/* Info fields — flex-col gap-12px */
.gdp-download-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    width: 100%;
}

/* ── Scores row — Figma: flex gap-42px items-center justify-end ── */
.gdp-scores-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 42px;
    flex-shrink: 0;
    width: 100%;
}

.gdp-score-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Score badge — Figma: bg #25272D, border, rounded-4px, h-32px, px-12px py-8px, w-40px */
.gdp-score-badge {
    background-color: #25272d;
    border-radius: 4px;
    height: 32px;
    min-width: 40px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Score badge colors based on value */
/* Red: 1-4 or 10-49 */
.gdp-score-badge--red {
    border: 1px solid #f03900;
}

/* Yellow: 5-6 or 50-69 */
.gdp-score-badge--yellow {
    border: 1px solid #caa512;
}

/* Green: 7-10 or 70-100 */
.gdp-score-badge--green {
    border: 1px solid #1c7d45;
}

.gdp-score-value {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
}

.gdp-score-label {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #c4c8cf;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Info rows — Figma: flex h-32px items-center justify-between ── */
.gdp-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    overflow: hidden;
    flex-shrink: 0;
    width: 100%;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
}

.gdp-info-value {
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    text-align: left;
    cursor: default;
    direction: ltr;
}

.gdp-info-label {
    color: #c4c8cf;
    flex-shrink: 0;
    margin-left: 8px;
    white-space: nowrap;
}

/* ── Buttons — Figma: flex gap-8px h-48px items-end justify-center ── */
.gdp-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    margin-top: 24px;
}

.gdp-btn {
    display: flex;
    flex: 1 0 0;
    gap: 8px;
    height: 48px;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    box-sizing: border-box;
}

.gdp-btn:hover {
    opacity: 0.85;
    color: #ffffff;
}

/* Secondary button — bg #25272D */
.gdp-btn--secondary {
    background-color: #25272d;
}

/* Primary / Download button — bg #1081DF */
.gdp-btn--primary {
    background-color: #1081df;
}

.gdp-btn-text {
    flex-shrink: 0;
}

.gdp-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    line-height: 0;
    overflow: visible;
}

.gdp-btn-icon svg,
.gdp-btn-icon img {
    width: 24px;
    height: 24px;
    display: block;
    overflow: visible;
}

/* ==========================================================================
   GALLERY / CAROUSEL (RIGHT) — Figma Node 4001:7744
   flex-col gap-12px items-center, w-808px
   ========================================================================== */

.gdp-gallery-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    flex: 1 0 0;
    min-width: 0;
}

/* Main carousel — Figma: h-455px, rounded-8px */
.gdp-carousel {
    position: relative;
    width: 100%;
    height: 455px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #1c1e22;
}

.gdp-carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gdp-carousel-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.gdp-carousel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    cursor: zoom-in;
}

/* ── Carousel Navigation Arrows (overlay on images) ── */
/* Figma: bg #25272D, rounded on one side, w-31px, h-56px */
.gdp-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 31px;
    background-color: #25272d;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.15s ease;
}

.gdp-carousel-nav:hover {
    background-color: #2e3038;
}

/* Previous button — on the left side (LTR layout) */
.gdp-carousel-nav--prev {
    left: 0;
    border-radius: 0 8px 8px 0;
    height: 31px;
}

/* Next button — on the right side (LTR layout) */
.gdp-carousel-nav--next {
    right: 0;
    border-radius: 8px 0 0 8px;
    height: 31px;
}

.gdp-carousel-nav svg,
.gdp-carousel-nav img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Video embed — responsive 16:9 inside fixed-height container */
.gdp-video-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gdp-video-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    border-radius: 8px;
}

/* Video placeholder with play button */
.gdp-video-embed--with-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gdp-video-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.gdp-video-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: background 0.3s ease;
}

.gdp-video-placeholder:hover::after {
    background: rgba(0, 0, 0, 0.4);
}

.gdp-video-play-btn {
    position: relative;
    z-index: 2;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gdp-video-play-btn:hover {
    transform: scale(1.1);
}

.gdp-video-play-btn svg {
    width: 40px;
    height: 40px;
    display: block;
}

.gdp-video-embed--playing .gdp-video-placeholder {
    opacity: 0;
    pointer-events: none;
}

/* ── Thumbnails row ── */
.gdp-thumbnails-wrap {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    /* Create a stacking context for arrow positioning */
    z-index: 1;
}

.gdp-thumbnails-wrap {}

/* Figma: flex gap-8px items-center justify-end overflow-x-auto */
/* Gap adjusted to 15px to match 1640px site width */
.gdp-thumbnails {
    position: relative;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: none;
    flex-direction: row;
}

.gdp-thumbnails::-webkit-scrollbar {
    display: none;
}

/* Thumbnail button — Figma: h-96px w-184px, border #30343B, rounded-4px */
.gdp-thumb {
    position: relative;
    flex-shrink: 0;
    width: 184px;
    height: 96px;
    border-radius: 4px;
    border: 2px solid #30343b;
    overflow: hidden;
    padding: 0;
    background: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

/* Placeholder thumbnail for fewer than 6 slides */
.gdp-thumb-placeholder {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
    background: linear-gradient(135deg, #1e2024 0%, #262a30 100%);
    border-style: dashed;
    border-color: #3a3f47;
}

.gdp-thumb-placeholder .gdp-thumb-inner {
    display: none;
}

.gdp-thumb-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.gdp-thumb.is-active {
    border-color: #1081df;
}

.gdp-thumb-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gdp-thumb-inner img {
    /* position: absolute; */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Shadow overlay on thumbnail — Figma: bg rgba(25,26,30,0.3) */
.gdp-thumb-inner::after {
    content: '';
    position: absolute;
    inset: 2.08% 0.98%;
    background-color: rgba(25, 26, 30, 0.3);
    border-radius: 2px;
    pointer-events: none;
}

.gdp-thumb.is-active .gdp-thumb-inner::after {
    display: none;
}

/* Video thumbnail — play icon overlay */
.gdp-thumb-inner--video {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gdp-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1c1e22;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    width: 24px;
    height: 24px;
}

.gdp-thumb-play svg,
.gdp-thumb-play img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Navigation arrows — positioned inside .gdp-thumbnails-wrap */
/* Figma Node 4001:7753 & 4001:7754: bg #25272D, rounded-br-8px rounded-tr-8px, w-31px, p-4px */
/* Both arrows have no explicit height — auto (24px icon + 8px padding = 32px) */
.gdp-thumb-nav {
    position: absolute;
    background-color: #25272d;
    border: none;
    width: 31px;
    height: auto;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.15s ease;
}

.gdp-thumb-nav:hover {
    background-color: #2e3038;
}

/* Previous button — on the left side (LTR layout) */
/* Figma Node 4001:7753: left-0, top-32px */
.gdp-thumb-nav--prev {
    left: 0;
    top: 32px;
    border-radius: 0 8px 8px 0;
}

/* Next button — on the right side (LTR layout) */
/* Figma Node 4001:7754: right-0, top-50%, translateY(-50%) */
.gdp-thumb-nav--next {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 8px 0 0 8px;
}

.gdp-thumb-nav svg,
.gdp-thumb-nav img {
    width: 24px;
    height: 24px;
    display: block;
}

/* ── Dot indicators — Figma: flex gap-4px items-center ── */
.gdp-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    flex-direction: row;
}

/* Figma: bg #25272D, h-4px, rounded-8px, w-40px */
.gdp-dot {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 8px;
    background-color: #25272d;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Active dot — Figma: bg #1081DF */
.gdp-dot.is-active {
    background-color: #1081df;
}

/* ==========================================================================
   PROMOTION SECTION — Figma Node 6002:21153
   bg #1C1E22, rounded-8px, padding 24px
   flex row justify-between items-center, position relative
   ========================================================================== */

.gdp-promo-section {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    background-color: #1c1e22;
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-top: 16px;
}

/* ── Top badge — absolute, top -16px, left 24px ── */
/* Figma: bg #1081DF, h-32px, px-12px py-8px, rounded-4px */
.gdp-promo-badge {
    position: absolute;
    top: -16px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 8px 12px;
    background-color: #1081df;
    border-radius: 4px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.gdp-promo-badge-text {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
    text-align: right;
}

/* ── Left: actions column — flex-col gap-12px items-end ── */
.gdp-promo-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    flex: 0 1 320px;
    width: 320px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* ── Discount code row — flex gap-8px items-center justify-end ── */
.gdp-promo-code-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Copy button — Figma: bg #25272D, h-32px, px-12px py-8px, rounded-4px */
.gdp-promo-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 8px 12px;
    background-color: #25272d;
    border: none;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.gdp-promo-copy-btn:hover {
    background-color: #2e3038;
}

.gdp-promo-copy-btn.is-copied {
    background-color: #1c7d45;
}

/* Discount code text — flex gap-4px items-center justify-end */
.gdp-promo-code-text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.gdp-promo-code-label,
.gdp-promo-code-value {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
}

/* Buy button — Figma: bg #1081DF, h-40px, px-12px py-8px, rounded-4px, full width */
.gdp-promo-buy-btn {
    display: block;
    height: 40px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 8px 12px;
    background-color: #1081df;
    border: none;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.85vw, 20px);
    line-height: 24px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    flex-shrink: 1;
    transition: opacity 0.15s ease;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.gdp-promo-buy-btn:hover {
    opacity: 0.85;
}

/* ── Right: info cards — flex gap-16px h-80px items-center justify-end ── */
.gdp-promo-cards {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    height: 80px;
    flex-shrink: 0;
}

/* Each info card — Figma: flex gap-24px h-80px items-center justify-center
   overflow-clip, p-16px, rounded-8px */
.gdp-promo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    height: 80px;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Card text — IRANSansX Regular 16px, line-height 1.5, color #FFFFFF, center */
.gdp-promo-card-text {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Card icon — Figma: 32x32 */
.gdp-promo-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.gdp-promo-card-icon svg,
.gdp-promo-card-icon img {
    width: 32px;
    height: 32px;
    display: block;
}

/* ==========================================================================
   ABOUT GAME SECTION — Figma Node 6002:21154
   bg #1C1E22, rounded-8px, flex-col gap-32px, padding 24px
   ========================================================================== */

.gdp-about-section {
    background-color: #1c1e22;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    overflow: hidden;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ── Section Header ── */
/* Figma: flex gap-16px items-center justify-end, w-full */
.gdp-about-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
    flex-shrink: 0;
}

/* Title group: icon + text */
.gdp-about-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gdp-about-title {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.5;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
}

.gdp-about-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.gdp-about-title-icon svg,
.gdp-about-title-icon img {
    width: 32px;
    height: 32px;
    display: block;
}

/* Divider line — flex-1 */
.gdp-about-header-line {
    flex: 1 0 0;
    height: 1px;
    background-color: #30343b;
    min-width: 0;
}

/* Review link button — Figma: bg #25272D, h-48px, px-12px py-8px, rounded-4px */
.gdp-about-review-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 8px 12px;
    background-color: #25272d;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.gdp-about-review-btn:hover {
    background-color: #2e3038;
    color: #ffffff;
}

.gdp-about-review-btn-text {
    flex-shrink: 0;
}

.gdp-about-review-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gdp-about-review-btn-icon svg,
.gdp-about-review-btn-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

/* ── Tabs Navigation ── */
/* Figma: flex-wrap gap-16px items-center justify-start, w-full */
.gdp-tabs-nav-wrap {
    width: 100%;
    flex-shrink: 0;
}

.gdp-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

/* Tab button — Figma: h-48px, px-12px py-8px, rounded-8px */
.gdp-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: #8f96a3;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.gdp-tab-btn:hover {
    color: #c4c8cf;
}

/* Active tab — Figma: border-bottom #1081DF, text white */
.gdp-tab-btn.is-active {
    color: #ffffff;
    border-bottom-color: #1081df;
}

/* ── Tab Panels ── */
.gdp-tab-panels {
    width: 100%;
    flex-shrink: 0;
}

.gdp-tab-panel {
    display: none;
    flex-direction: column;
    gap: 24px;
    align-items: flex-end;
    width: 100%;
}

.gdp-tab-panel.is-active {
    display: flex;
}

/* ── Info Toast ── */
/* Figma: bg #25272D, border #30343B, rounded-4px, p-16px, flex gap-8px items-start justify-end */
.gdp-info-toast {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    background-color: #25272d;
    border: 1px solid #30343b;
    border-radius: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: stretch;
}

.gdp-info-toast-text {
    flex: 1 0 0;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    text-align: start;
    margin: 0;
    min-width: 0;
    min-height: 0;
    unicode-bidi: plaintext;
}

.gdp-info-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gdp-info-toast-icon svg,
.gdp-info-toast-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

/* ── Post Body ── */
.gdp-post-body {
    width: 100%;
    text-align: right;
}

.gdp-post-body p {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    margin-bottom: 16px;
    text-align: right;
}

.gdp-post-body p:last-child {
    margin-bottom: 0;
}

.gdp-post-body h1,
.gdp-post-body h2 {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.4;
    color: #ffffff;
    margin-top: 24px;
    margin-bottom: 16px;
    text-align: right;
    letter-spacing: -0.01em;
}

.gdp-post-body h3 {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
    color: #ffffff;
    margin-top: 20px;
    margin-bottom: 12px;
    text-align: right;
    letter-spacing: -0.005em;
}

.gdp-post-body h4,
.gdp-post-body h5,
.gdp-post-body h6 {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
    margin-top: 16px;
    margin-bottom: 12px;
    text-align: right;
    letter-spacing: 0.005em;
}

.gdp-post-body a {
    color: #1081df;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.gdp-post-body a:hover {
    color: #3a9aff;
}

.gdp-post-body ul,
.gdp-post-body ol {
    margin: 12px 0;
    padding-right: 24px;
    text-align: right;
}

.gdp-post-body li {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    margin-bottom: 8px;
}

.gdp-post-body img {
    border-radius: 8px;
    margin: 16px 0;
    max-width: 100%;
    height: auto;
}

/* HR - subtle divider with gradient fade edges */
.gdp-post-body hr {
    border: none;
    height: 1px;
    background: linear-gradient(to left, transparent, #30343B 20%, #30343B 80%, transparent);
    margin: 48px auto;
}

/* ── Tags Section ── */
.gdp-tags-section {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    flex-shrink: 0;
}

.gdp-tag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 8px 12px;
    background-color: #25272d;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    direction: rtl;
}

.gdp-tag-btn:hover {
    background-color: #2e3038;
    color: #ffffff;
}

/* ── Share + Rating Bar ── */
/* Figma: flex items-center justify-between, w-full */
.gdp-share-rating-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    gap: 16px;
}

/* Share group — flex gap-12px items-center */
.gdp-share-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Social buttons row */
.gdp-social-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Social button — Figma: bg #25272D, border #30343B, rounded-4px, p-4px, w-32px */
.gdp-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 4px;
    background-color: #25272d;
    border: 1px solid #30343b;
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.gdp-social-btn:hover {
    background-color: #2e3038;
    color: #ffffff;
}

.gdp-social-btn svg,
.gdp-social-btn img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Share label */
.gdp-share-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gdp-share-label span:first-child {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
    white-space: nowrap;
}

.gdp-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-left: -5px;
}

.gdp-share-icon svg,
.gdp-share-icon img {
    width: 28px;
    height: 28px;
    display: block;
}

/* Rating group — flex gap-12px items-center */
.gdp-rating-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Rate label */
.gdp-rate-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gdp-rate-label span:first-child {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
    white-space: nowrap;
}

.gdp-rate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.gdp-rate-icon svg,
.gdp-rate-icon img {
    width: 28px;
    height: 28px;
    display: block;
}

/* ── Article Score Widget (reused from review-post) ── */
/* Figma: flex gap-12px items-center justify-end */
.gdp-article-score.sc-article-score {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    direction: rtl;
}

/* Stars wrapper */
.gdp-article-score .sc-article-score__stars--interactive {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    direction: rtl;
}

.gdp-article-score .sc-article-score__stars--readonly {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    direction: rtl;
}

/* Interactive star button — Figma: 32x32 */
.gdp-article-score .sc-star-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #25272d;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.gdp-article-score .sc-star-btn:hover,
.gdp-article-score .sc-star-btn.sc-star--selected {
    color: #1081df;
}

.gdp-article-score .sc-star-btn svg {
    width: 32px;
    height: 32px;
    display: block;
}

/* Readonly star — Figma half-segment design */
/* Each star is a 32×32 square container split into two 16px halves.
   Full star  → both halves #1081DF (blue) + white star outline on top.
   Half star  → right half #1081DF, left half #25272D + white star outline on top.
   Empty star → both halves #25272D (dark) + dark star outline on top. */
.gdp-article-score .sc-star {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

/* The two background halves */
.gdp-article-score .sc-star::before,
.gdp-article-score .sc-star::after {
    content: '';
    position: absolute;
    top: 0;
    width: 16px;
    height: 32px;
}

/* Right half */
.gdp-article-score .sc-star::before {
    right: 0;
    background: #25272D;
    border-radius: 0 4px 4px 0;
}

/* Left half */
.gdp-article-score .sc-star::after {
    left: 0;
    background: #25272D;
    border-radius: 4px 0 0 4px;
}

/* Full star: both halves blue */
.gdp-article-score .sc-star--full::before,
.gdp-article-score .sc-star--full::after {
    background: #1081DF;
}

/* Half star: right half blue, left half dark */
.gdp-article-score .sc-star--half::before {
    background: #1081DF;
}
.gdp-article-score .sc-star--half::after {
    background: #25272D;
}

/* Star SVG sits on top of the background halves */
.gdp-article-score .sc-star svg {
    width: 18px;
    height: 18px;
    display: block;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* Empty star: neutral outline */
.gdp-article-score .sc-star svg {
    fill: #C4C8CF;
}

/* Full or half star: white outline on blue background */
.gdp-article-score .sc-star--full svg,
.gdp-article-score .sc-star--half svg {
    fill: #FFFFFF;
}

/* Score meta: badge + votes */
.gdp-article-score .sc-article-score__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Score badge — Figma: bg #1081DF, h-40px, px-12px py-8px, rounded-4px */
.gdp-article-score .sc-article-score__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 8px 12px;
    background-color: #1081df;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Vote count */
.gdp-article-score .sc-article-score__votes {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #8f96a3;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .gdp-download-info {
        width: 340px;
    }

    .gdp-carousel {
        height: 380px;
    }

    .gdp-thumb {
        width: 150px;
        height: 80px;
    }

    .gdp-promo-cards {
        gap: 8px;
    }

    .gdp-promo-card {
        padding: 12px;
        gap: 8px;
    }
}

@media (max-width: 1024px) {
    .gdp-content-row {
        flex-direction: column;
    }

    .gdp-download-info {
        width: 100%;
    }

    .gdp-carousel {
        height: 320px;
    }

    .gdp-post-title {
        font-size: 21px;
        line-height: 28px;
        max-width: 60%;
    }

    .gdp-scores-row {
        gap: 16px;
    }

    .gdp-promo-section {
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 16px;
    }

    .gdp-promo-cards {
        width: 100%;
        justify-content: flex-end;
        height: auto;
        flex-wrap: wrap;
    }

    .gdp-promo-actions {
        width: 100%;
    }

    .gdp-promo-buy-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .game-download-post-container {
        padding-left: 35px;
        padding-right: 40px;
    }

    .gdp-breadcrumb-title-row {
        flex-direction: column-reverse;
        align-items: center;
        gap: 8px;
    }

    .gdp-post-title {
        font-size: 19px;
        line-height: 26px;
        max-width: 100%;
        text-align: center;
    }

    .gdp-post-subtitle {
        text-align: center;
        align-self: center;
    }

    .gdp-meta-categories-row {
        flex-direction: column-reverse;
        align-items: center;
        gap: 12px;
    }

    .gdp-meta-left {
        flex-wrap: wrap;
        gap: 8px;
    }

    .gdp-carousel {
        height: 240px;
    }

    .gdp-thumb {
        width: 120px;
        height: 68px;
    }

    /* ===== About Section - Mobile ===== */
    .gdp-about-section {
        padding: 16px;
        gap: 24px;
    }

    .gdp-about-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .gdp-about-title {
        font-size: 20px;
    }

    /* Tabs: horizontal scroll */
    .gdp-tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
    }

    .gdp-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .gdp-tab-btn {
        flex-shrink: 0;
        height: 40px;
        padding: 8px 12px;
    }

    /* Info toast: block layout on mobile to prevent overlap */
    .gdp-info-toast {
        display: block !important;
        padding: 12px !important;
    }

    /* Post body content images */
    .gdp-post-body figure,
    .gdp-post-body .wp-caption {
        width: 100%;
        height: 210px;
        border-radius: 8px;
    }

    /* Review Score Section: full width, p-16 */
    .gdp-review-score-section {
        width: 100%;
        padding: 16px;
        gap: 24px;
    }

    .gdp-review-score-top {
        flex-direction: column-reverse;
        align-items: center;
        gap: 16px;
    }

    .gdp-review-score-badge {
        align-self: center;
    }

    .gdp-review-summary-text {
        text-align: center;
        width: 100%;
    }

    /* Pros/Cons items: full width */
    .gdp-pros-cons-item {
        width: 100%;
    }

    .gdp-pros-cons-item-text {
        flex: 1 0 0;
        min-width: 0;
    }

    /* Tags: centered */
    .gdp-tags-section {
        justify-content: center;
        gap: 8px;
    }

    /* Share/Rating: flex-col, centered */
    .gdp-share-rating-bar {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .gdp-share-group,
    .gdp-rating-group {
        width: 100%;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .gdp-rating-stars {
        gap: 4px;
    }

    .gdp-rating-stars .atom-left,
    .gdp-rating-stars .atom-right {
        width: 12px;
        height: 24px;
    }

    /* Scores row */
    .gdp-scores-row {
        flex-direction: row;
        align-items: flex-end;
        gap: 12px;
    }

    .gdp-promo-section {
        flex-direction: column;
        align-items: center;
        padding: 32px 16px 16px 16px;
        gap: 24px;
        height: 600px;
    }

    .gdp-promo-badge {
        position: absolute;
        top: -16px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        height: 32px;
        padding: 8px 12px;
    }

    .gdp-promo-badge-text {
        font-size: 14px;
    }

    .gdp-promo-actions {
        width: 100%;
        align-items: center;
        gap: 12px;
    }

    .gdp-promo-code-row {
        justify-content: center;
        gap: 8px;
    }

    .gdp-promo-code-text {
        font-size: 16px;
    }

    .gdp-promo-copy-btn {
        font-size: 14px;
        height: 32px;
        padding: 8px 12px;
    }

    .gdp-promo-buy-btn {
        width: 100%;
        height: 40px;
        font-size: 16px;
    }

    .gdp-promo-cards {
        width: 100%;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        height: auto;
    }

    .gdp-promo-card {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 12px;
        width: 100%;
        height: auto;
    }

    .gdp-promo-card-icon {
        width: 32px;
        height: 32px;
    }

    .gdp-promo-card-icon svg,
    .gdp-promo-card-icon img {
        width: 32px;
        height: 32px;
    }

    .gdp-promo-card-text {
        font-size: 16px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .game-download-post-main {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .gdp-carousel {
        height: 200px;
    }

    .gdp-thumb {
        width: 100px;
        height: 56px;
    }

    .gdp-buttons {
        flex-direction: column;
    }

    .gdp-btn {
        width: 100%;
        flex: none;
    }

    .gdp-promo-cards {
        gap: 16px;
    }

    .gdp-promo-card {
        padding: 12px;
    }
}

/* ==========================================================================
   DOWNLOAD SECTION TABS — Figma Node 6002:21155
   bg #1C1E22, rounded-8px, flex-col gap-32px, padding 24px
   ========================================================================== */

.gdp-dl-section {
    background-color: #1c1e22;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    overflow: hidden;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Reverse horizontal layout for all flex containers inside gdp-dl-section */
.gdp-dl-section .gdp-dl-tabs-nav-wrap {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-tabs-nav {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-version-header {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-version-size {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-version-title-with-btn {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-version-title-group {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-parts-row {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-accordion-label {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-accordion-header-row {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-update-item {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-update-size {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-update-meta {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-update-title-group {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-info-row {
    flex-direction: row;
}

.gdp-dl-section .gdp-dl-password-section {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-password-text {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-action-bar {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-action-btn {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-dl-direct-btn {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-guide-boxes-wrap {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-guide-box {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-sysreq-wrap {
    flex-direction: row-reverse;
}

.gdp-dl-section .gdp-sysreq-box-header {
    flex-direction: row-reverse;
}

/* System requirements rows - label on left, value on right */
.gdp-dl-section .gdp-sysreq-row {
    flex-direction: row-reverse;
}

/* ── Tabs Nav Wrap — flex gap-16px items-center justify-end ── */
.gdp-dl-tabs-nav-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    flex-shrink: 0;
}

/* Divider lines flanking the tabs */
.gdp-dl-tabs-line {
    flex: 1 0 0;
    height: 4px;
    background-color: var(--neutral-07-boarder-dark-hover, #30343B);
    min-width: 0;
}

/* Tabs nav — flex gap-16px items-center */
.gdp-dl-tabs-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Tab button — Figma: h-48px, px-12px py-8px, rounded-8px */
.gdp-dl-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: #8f96a3;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.gdp-dl-tab-btn:hover:not(:disabled) {
    color: #c4c8cf;
}

/* Active tab — border-bottom #1081DF, text white */
.gdp-dl-tab-btn.is-active {
    color: #ffffff;
    border-bottom-color: #1081df;
}

/* Active tab icon — make SVG/img icons white */
.gdp-dl-tab-btn.is-active .gdp-dl-tab-icon svg,
.gdp-dl-tab-btn.is-active .gdp-dl-tab-icon img {
    filter: brightness(0) invert(1);
}

/* Hover tab icon — make SVG/img icons white on hover */
.gdp-dl-tab-btn:hover:not(:disabled) .gdp-dl-tab-icon svg,
.gdp-dl-tab-btn:hover:not(:disabled) .gdp-dl-tab-icon img {
    filter: brightness(0) invert(1);
}

.gdp-dl-tab-btn--disabled,
.gdp-dl-tab-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gdp-dl-tab-text {
    flex-shrink: 0;
}

.gdp-dl-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gdp-dl-tab-icon svg,
.gdp-dl-tab-icon img {
    width: 24px;
    height: 24px;
    display: block;
    transition: filter 0.15s ease;
}

/* ── Tab Panels ── */
.gdp-dl-tab-panels {
    width: 100%;
    flex-shrink: 0;
}

.gdp-dl-tab-panel {
    display: none;
    flex-direction: column;
    gap: 24px;
    align-items: flex-end;
    width: 100%;
}

.gdp-dl-tab-panel.is-active {
    display: flex;
}

/* ── Download Info Row (toast + password in one row) ── */
/* Figma Node 4082:9235 — flex items-center justify-between */
.gdp-dl-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    gap: 16px;
}

/* Password section — flex gap-8px items-center justify-end */
.gdp-dl-password-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Download Versions Wrap ── */
.gdp-dl-versions-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex-shrink: 0;
}

/* ── Version Block — Figma: flex-col gap-16px items-end, rounded-4px ── */
.gdp-dl-version-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    width: 100%;
    flex-shrink: 0;
}

/* Version header — flex items-center justify-between */
.gdp-dl-version-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
}

/* Size group — flex gap-8px items-center */
.gdp-dl-version-size {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gdp-dl-size-text {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #c4c8cf;
    white-space: nowrap;
}

.gdp-dl-size-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.gdp-dl-size-icon svg,
.gdp-dl-size-icon img {
    width: 22px;
    height: 22px;
    display: block;
}

/* Title with button container — flex gap-16px items-center */
.gdp-dl-version-title-with-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

/* Title group — flex gap-8px items-center justify-end */
.gdp-dl-version-title-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.gdp-dl-version-title {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #c4c8cf;
    text-align: right;
    white-space: nowrap;
}

.gdp-dl-version-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gdp-dl-version-icon svg,
.gdp-dl-version-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Subtitle — Figma: IRANSansX Regular 14px, color #8F96A3, text-right */
.gdp-dl-version-subtitle {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #8f96a3;
    text-align: right;
    width: 100%;
    flex-shrink: 0;
}

/* Parts row — Figma: flex flex-wrap gap-16px items-start justify-end */
.gdp-dl-parts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    flex-shrink: 0;
}

/* Part button — Figma: bg #25272D, h-32px, px-12px py-8px, rounded-4px */
.gdp-dl-part-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 10px 14px;
    background-color: #25272d;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.gdp-dl-part-btn:hover {
    background-color: #2e3038;
    color: #ffffff;
}

.gdp-dl-part-btn--empty {
    opacity: 0.4;
    cursor: default;
}

/* ── Accordion Section ── */
.gdp-dl-accordion-section {
    width: 100%;
    flex-shrink: 0;
}

/* Accordion trigger — flex-col items-start */
.gdp-dl-accordion-trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Accordion header row — flex gap-16px h-24px items-center justify-end */
.gdp-dl-accordion-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    height: 24px;
    width: 100%;
    flex-shrink: 0;
}

/* Divider line inside accordion trigger */
.gdp-dl-accordion-line {
    flex: 1 0 0;
    height: 2px;
    background-color: var(--neutral-07-boarder-dark-hover, #30343B);
    min-width: 0;
}

.gdp-dl-accordion-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.gdp-dl-accordion-text {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #c4c8cf;
    white-space: nowrap;
    flex-shrink: 0;
}

.gdp-dl-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #c4c8cf;
    transition: transform 0.25s ease;
}

.gdp-dl-accordion-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Opened state — rotate icon to X (minus) */
.gdp-dl-accordion-trigger[aria-expanded="true"] .gdp-dl-accordion-icon {
    transform: rotate(45deg);
}

/* Accordion body — collapsed by default */
.gdp-dl-accordion-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease, padding-top 0.3s ease;
    padding-top: 0;
}

.gdp-dl-accordion-body.is-open {
    max-height: 9999px;
    padding-top: 16px;
}

/* Update item — flex gap-16px items-center */
.gdp-dl-update-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
}

.gdp-dl-update-size {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Update meta row — flex gap-8px items-center justify-end */
.gdp-dl-update-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 0 0;
    min-width: 0;
}

/* Update title group — flex gap-8px items-center justify-end */
.gdp-dl-update-title-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Update title — IRANSansX Regular 16px, color #C4C8CF */
.gdp-dl-update-title {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #c4c8cf;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Update subtitle — IRANSansX Regular 14px, color #8F96A3 */
.gdp-dl-update-subtitle {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #8f96a3;
    text-align: right;
    width: 100%;
    flex-shrink: 0;
}

/* Direct download button — Figma: bg #25272D, h-32px, px-12px py-8px, rounded-4px */
.gdp-dl-direct-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 10px 14px;
    background-color: #25272d;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
    direction: rtl;
}

.gdp-dl-direct-btn:hover {
    background-color: #2e3038;
    color: #ffffff;
}

/* ── File Password Toast ── */
/* Figma: bg #25272D, border #30343B, rounded-4px, p-16px, flex gap-8px items-center justify-end */
.gdp-dl-password-toast {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background-color: #25272d;
    border: 1px solid #30343b;
    border-radius: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
    direction: rtl;
}

.gdp-dl-password-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gdp-dl-password-icon svg,
.gdp-dl-password-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

.gdp-dl-password-text {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.gdp-dl-password-label {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
}

.gdp-dl-password-value {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #c4c8cf;
    white-space: nowrap;
    flex-shrink: 0;
    direction: ltr;
}

/* Password copy button — Figma: bg #25272D border, h-32px, px-12px py-8px, rounded-4px */
.gdp-dl-password-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 10px 14px;
    background-color: #1c1e22;
    border: 1px solid #30343b;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.gdp-dl-password-copy-btn:hover {
    background-color: #25272d;
    border-color: #c4c8cf;
}

.gdp-dl-password-copy-btn.is-copied {
    background-color: #1c7d45;
    border-color: #1c7d45;
}

/* ── Action Bar — flex gap-16px items-center ── */
.gdp-dl-action-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Action button base — Figma: bg #25272D, h-32px, px-12px py-8px, rounded-4px */
.gdp-dl-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 10px 14px;
    background-color: #25272d;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    box-sizing: border-box;
}

.gdp-dl-action-btn:hover {
    background-color: #2e3038;
    color: #ffffff;
}

/* Purchase button — Figma: bg #1081DF */
.gdp-dl-purchase-btn {
    background-color: #1081df;
}

.gdp-dl-purchase-btn:hover {
    background-color: #0d6fc0;
    color: #ffffff;
}

/* Report button — success state */
.gdp-dl-report-btn.is-reported {
    background-color: #1c7d45;
    cursor: default;
}

.gdp-dl-action-btn-text {
    flex-shrink: 0;
}

.gdp-dl-action-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.gdp-dl-action-btn-icon svg,
.gdp-dl-action-btn-icon img {
    width: 22px;
    height: 22px;
    display: block;
}

/* ── Content body (install guide / sys req) ── */
.gdp-dl-content-body {
    width: 100%;
    text-align: right;
}

/* ── Guide Boxes — Figma: flex flex-wrap gap-16px items-start justify-end ── */
.gdp-guide-boxes-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    flex-shrink: 0;
}

/* Guide box — Figma: bg #25272D, h-48px, px-12px py-8px, rounded-4px */
.gdp-guide-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 10px 14px;
    background-color: #25272d;
    border-radius: 4px;
    text-decoration: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.gdp-guide-box:hover {
    background-color: #2e3038;
}

.gdp-guide-box--no-link {
    cursor: default;
}

.gdp-guide-box--no-link:hover {
    background-color: #25272d;
}

/* Guide box title — Figma: IRANSansX Regular 16px, line-height 1.2, color #FFFFFF */
.gdp-guide-box-title {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

@media (max-width: 768px) {
    .gdp-guide-boxes-wrap {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .gdp-guide-box {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   Download Section Responsive
   ========================================================================== */

@media (max-width: 768px) {
    /* ===== Download Section - Mobile (Figma 6492:31943) ===== */
    .gdp-dl-section {
        padding: 16px;
        gap: 24px;
        border-radius: 8px;
    }

    /* ── Tabs ── */
    .gdp-dl-tabs-nav-wrap {
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .gdp-dl-tabs-line {
        display: none;
    }

    .gdp-dl-tabs-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .gdp-dl-tab-btn {
        height: 40px;
        padding: 8px 12px;
        font-size: 16px;
        border-radius: 8px;
    }

    /* ── Info Row ── */
    .gdp-dl-info-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    /* Info toast: block layout on mobile to prevent overlap */
    .gdp-info-toast {
        display: block !important;
        padding: 12px !important;
        gap: 8px !important;
        width: 100%;
    }

    .gdp-info-toast-text {
        font-size: 16px;
    }

    /* Password section */
    .gdp-dl-password-section {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: auto;
    }

    .gdp-dl-password-copy-btn {
        height: 32px;
        padding: 8px 12px;
        font-size: 14px;
    }

    /* ── Version Header ── */
    /* Size + title in same row, direct button below title+subtitle */
    .gdp-dl-version-header {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
        gap: 8px;
        align-items: center;
    }

    /* Size in row 1, col 1 */
    .gdp-dl-version-size {
        grid-column: 1;
        grid-row: 1;
    }

    /* title-with-btn in row 1, col 2 — grid to stack title-group then button */
    .gdp-dl-version-title-with-btn {
        grid-column: 2;
        grid-row: 1;
        display: grid !important;
        flex-direction: unset !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
    }

    .gdp-dl-version-title-group {
        grid-row: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: 100%;
    }

    .gdp-dl-version-title {
        white-space: normal;
        font-size: 16px;
        flex: 1 0 0;
        min-width: 0;
        width: 200px;
    }

    .gdp-dl-version-subtitle {
        font-size: 14px;
    }

    /* Direct download button — row 2, full width, below title+subtitle */
    .gdp-dl-direct-btn {
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100px;
        justify-content: center;
        height: 32px;
        padding: 8px 12px;
        font-size: 14px;
        align-self: center;
    }

    /* ── Parts Row ── */
    .gdp-dl-parts-row {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: flex-end;
    }

    .gdp-dl-part-btn {
        height: 32px;
        padding: 8px 12px;
        font-size: 14px;
    }

    /* ── Accordion ── */
    .gdp-dl-accordion-text {
        font-size: 16px;
    }

    .gdp-dl-accordion-label {
        gap: 4px;
    }

    .gdp-dl-update-item {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* ── Action Bar ── */
    .gdp-dl-action-bar {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .gdp-dl-action-btn {
        width: 100%;
        justify-content: center;
        height: 32px;
        padding: 8px 12px;
        font-size: 14px;
    }

    /* ── System Requirements ── */
    .gdp-sysreq-wrap {
        flex-direction: column;
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .gdp-dl-tabs-nav-wrap {
        flex-wrap: wrap;
    }

    .gdp-dl-tabs-line {
        display: none;
    }

    .gdp-dl-tabs-nav {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .gdp-dl-action-bar {
        flex-direction: column;
        align-items: flex-end;
    }

    .gdp-dl-action-btn {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   SYSTEM REQUIREMENTS — Figma Node 2484:5877
   Two-column layout: سیستم پیشنهادی (left) + سیستم حداقلی (right)
   flex gap-16px items-start, w-full
   ========================================================================== */

/* Outer wrap — flex row gap-16px items-start */
.gdp-sysreq-wrap {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

/* Each box — flex-1, flex-col gap-24px items-end */
.gdp-sysreq-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-end;
    flex: 1 0 0;
    min-width: 0;
}

/* Box header — flex gap-8px items-center justify-end */
.gdp-sysreq-box-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    width: 100%;
}

/* Box title — IRANSansX Regular 18px, line-height 1.5, color #FFFFFF */
.gdp-sysreq-box-title {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Box icon — 28x28 */
.gdp-sysreq-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.gdp-sysreq-box-icon svg,
.gdp-sysreq-box-icon img {
    width: 28px;
    height: 28px;
    display: block;
}

/* Recommended icon — color #1081DF */
.gdp-sysreq-box-icon--rec svg path,
.gdp-sysreq-box-icon--rec svg {
    color: #1081df;
    fill: currentColor;
}

/* Minimum icon — color #8F96A3 */
.gdp-sysreq-box-icon--min svg path,
.gdp-sysreq-box-icon--min svg {
    color: #8f96a3;
    fill: currentColor;
}

/* Rows container — flex-col gap-16px items-end, w-full */
.gdp-sysreq-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    width: 100%;
    flex-shrink: 0;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}

/* Single requirement row — Figma: flex gap-16px items-center justify-end
   p-8px, rounded-4px, w-full */
.gdp-sysreq-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Value — flex-1, color #FFFFFF, text-right, white-space pre-wrap */
.gdp-sysreq-value {
    flex: 1 0 0;
    min-width: 0;
    min-height: 0;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    /* text-align: right; */
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    flex-direction: row;
    display: flex;
    direction: ltr;
}

/* Label — shrink-0, color #8F96A3, text-right */
.gdp-sysreq-label {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #8f96a3;
    text-align: right;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Responsive — stack vertically on tablet */
@media (max-width: 768px) {
    .gdp-sysreq-wrap {
        flex-direction: column;
        gap: 24px;
    }

    .gdp-sysreq-box {
        width: 100%;
        flex: none;
    }
}

/* ==========================================================================
   Similar Games Section — Figma Node 4001:8211
   Design tokens: Neutral/09 #1C1E22, Neutral/07 #30343B, Primary/01 #FFFFFF,
   Neutral/02 #8F96A3, Body/Body1 Regular 18px, Numbers/12 12px,
   Heading/Heading3 Medium 20px
   ========================================================================== */

.related-news-section {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-end;
	width: 100%;
	padding-top: 40px;
	padding-bottom: 40px;
	direction: rtl;
}

/* Section header — flex gap-16px items-center justify-end */
.related-news-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	width: 100%;
	flex-shrink: 0;
}

/* Title wrapper — flex gap-8px items-center */
.related-news-title-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Section title — Heading/Heading3: IRANSansX Medium 20px, line-height 1.5, #FFFFFF */
.related-news-title {
	font-family: 'Vazir', 'Vazir', sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
	white-space: nowrap;
}

/* Title icon — 32x32 */
.related-news-title-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.related-news-title-icon svg,
.related-news-title-icon img {
	width: 32px;
	height: 32px;
	display: block;
}

/* Decorative line — flex-1, height 1px, color #30343B */
.related-news-line {
	flex: 1 0 0;
	height: 4px;
	min-height: 1px;
	background-color: var(--neutral-07-boarder-dark-hover, #30343B);
	min-width: 0;
}

/* Grid — flex-col gap-24px */
.related-news-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	flex-shrink: 0;
}

/* Grid row — flex gap-24px items-center */
.related-news-grid-row {
	display: grid;
	gap: 24px;
	align-items: stretch;
	width: 100%;
	flex-shrink: 0;
	grid-template-columns: repeat(4, 1fr);
}

/* Card — flex-col, rounded-8px */
.related-news-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-radius: 8px;
	overflow: hidden;
	flex: 1 0 0;
	min-width: 0;
	transition: opacity 0.2s ease;
}

.related-news-card:hover {
	opacity: 0.9;
}

.related-news-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	width: 100%;
	height: 100%;
}

/* Card image — height 184px, rounded-tl-8px rounded-tr-8px */
.related-news-card-image {
	position: relative;
	width: 100%;
	height: 184px;
	overflow: hidden;
	flex-shrink: 0;
	border-radius: 8px 8px 0 0;
	background-color: #25272d;
}

.related-news-card-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	border-radius: 8px 8px 0 0;
	transition: transform 0.3s ease;
}

.related-news-card:hover .related-news-card-image img {
	transform: scale(1.04);
}

.related-news-card-placeholder {
	position: absolute;
	inset: 0;
	background-color: #25272d;
}

/* Card content — bg #1C1E22, flex-col gap-16px items-end justify-center p-16px, rounded-bl-8px rounded-br-8px */
.related-news-card-content {
	background-color: #1c1e22;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-end;
	justify-content: center;
	padding: 16px;
	border-radius: 0 0 8px 8px;
	flex: 1;
	width: 100%;
	box-sizing: border-box;
}

/* Card title — Body/Body1 Regular: IRANSansX Regular 18px, line-height 1.5, #FFFFFF, single line ellipsis */
.related-news-card-title {
	font-family: 'Vazir', 'Vazir', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
	text-align: right;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Card meta row — flex items-center justify-between */
.related-news-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	flex-shrink: 0;
}

/* Meta left (views + comments) — flex gap-8px items-center */
.related-news-card-meta-left {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Meta right (date + author) — flex gap-8px items-center */
.related-news-card-meta-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Meta item — flex gap-4px items-center justify-end */
.related-news-meta-item {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	flex-shrink: 0;
}

/* Meta icon — 12x12 */
.related-news-meta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.related-news-meta-icon svg,
.related-news-meta-icon img {
	width: 12px;
	height: 12px;
	display: block;
}

/* Meta value — Numbers/12: IRANSansX Regular 12px, color #8F96A3 */
.related-news-meta-value {
	font-family: 'Vazir', 'Vazir', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: #8f96a3;
	white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
	.related-news-grid-row {
		flex-wrap: wrap;
	}

	.related-news-card {
		flex: 1 0 calc(50% - 12px);
		min-width: calc(50% - 12px);
	}
}

@media (max-width: 640px) {
	.related-news-section {
		gap: 24px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.related-news-header {
		justify-content: center;
	}

	.related-news-line {
		display: none;
	}

	.related-news-title {
		font-size: 18px;
	}

	.related-news-grid-row {
		gap: 24px;
		grid-template-columns: minmax(0, 1fr);
	}

	.related-news-card {
		flex: none;
		width: 100%;
		min-width: 0;
	}

	.related-news-card-image {
		height: 153px;
	}

	.related-news-card-content {
		padding: 12px;
		gap: 12px;
	}

	.related-news-card-title {
		font-size: 16px;
	}
}

/* ==========================================================================
   Similar Games Section — Horizontal Reversal for Game Download Post
   ========================================================================== */

.game-download-post-main .related-news-header {
	flex-direction: row-reverse;
}

.game-download-post-main .related-news-title-wrapper {
	flex-direction: row-reverse;
}


.game-download-post-main .related-news-card-meta-left {
	flex-direction: row-reverse;
}

.game-download-post-main .related-news-card-meta-right {
	flex-direction: row-reverse;
}

.game-download-post-main .related-news-meta-item {
	flex-direction: row-reverse;
}

/* ==========================================================================
   CAROUSEL LIGHTBOX
   ========================================================================== */

.gdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.9);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gdp-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.gdp-lightbox__image {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.gdp-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.gdp-lightbox__close:hover {
	background-color: rgba(255, 255, 255, 0.2);
	transform: scale(1.1);
}

.gdp-lightbox__close svg {
	width: 20px;
	height: 20px;
	color: #ffffff;
}