/**
 * Header Styles — Figma Node 6025:17637
 *
 * Pixel-perfect RTL two-row header implementation.
 * All values taken directly from Figma Dev MCP.
 *
 * Design tokens:
 *   Neutral/09 - Section:          #1C1E22
 *   Neutral/07 - Border:           #30343B
 *   Neutral/08 - Frame/Dark Btn:   #25272D
 *   Neutral/02 - Secondary Text:   #8F96A3
 *   Primary/01 - White:            #FFFFFF
 *   Button/Button1 Regular:        IRANSansX 16px/400/1.2
 *   Button/Button2 Regular:        IRANSansX 14px/400/1.2
 *
 * @package Strategic_Club
 * @since 1.0.0
 */

/* ==========================================================================
   Reset old header styles that conflict
   ========================================================================== */

.site-header {
    border-bottom: none !important;
    padding: 0 !important;
}

.site-header .container {
    display: none !important;
}

/* ==========================================================================
   Base header element
   Figma: bg-[#1c1e22], direction rtl, sticky top-0
   ========================================================================== */

#masthead.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* background: linear-gradient(180deg, #202228 0%, #1c1e22 100%); */
    direction: rtl;
    width: 100%;
    border-bottom: 1px solid rgba(16, 129, 223, 0.18);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    font-family: 'Vazir', 'Vazir', Tahoma, Arial, sans-serif;
}

/* Inner wrapper to constrain max-width.
   position:relative makes this the containing block for flyouts. */
#masthead.site-header > .header-inner {
    position: relative;
    max-width: 1640px;
    margin: 0 auto;
    width: 100%;
}

/* ==========================================================================
   Shared row base
   Figma: flex items-center justify-between overflow-clip bg-[#1c1e22] w-full
   ========================================================================== */

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1C1E22;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

/* ==========================================================================
   Row 1 — Primary navigation
   Figma: pl-[16px] pr-[88px] py-[16px] border-b border-[#30343b]
   RTL: pl = left padding (visual left), pr = right padding (visual right, near logo)
   pr-[88px] = 16px gap + 74px logo column width (logo is absolute)
   ========================================================================== */

.header-row--primary {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 88px;
    padding-left: 20px;
    border-bottom: 1px solid rgba(48, 52, 59, 0.95);
    gap: 18px;
    min-height: 72px;
}

/* ==========================================================================
   Logo — absolute, right edge of row 1
   Figma: absolute right-[-2px] top-0, w-[74px] h-[72px]
          bg-[#1c1e22], border-l border-b border-[#30343b], p-[16px]
   ========================================================================== */

/* Logo flyout root wrapper — takes over absolute positioning from .header-logo */
.header-logo-flyout-root {
    position: absolute;
    right: -2px;
    top: 0;
    width: 74px;
    height: 72px;
    z-index: 1300;
}

.header-logo {
    position: relative;
    width: 74px;
    height: 76px;
    background-color: #1C1E22;
    border-left: 1px solid #30343B;
    /* border-bottom: 1px solid #30343B; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    flex-shrink: 0;
    text-decoration: none;
    overflow: hidden;
    box-sizing: border-box;
}

.header-logo__img {
    width: 50px;
    height: 55px;
    display: block;
    flex-shrink: 0;
}

/* ==========================================================================
   Navigation button groups
   Figma: gap-[16px] between buttons in each group
   ========================================================================== */

.header-nav-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* ==========================================================================
   Promo button (no dropdown arrow)
   Figma: bg-[#25272d] h-[40px] px-[12px] py-[8px] rounded-[4px]
          gap-[8px] between icon and text
   ========================================================================== */

.header-promo-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 8px 12px;
    background-color: #25272D;
    border-radius: 4px;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

a.header-promo-btn {
    cursor: pointer;
}

.header-promo-btn:hover {
    background-color: #30343B;
}

/* ==========================================================================
   Nav button (with dropdown arrow)
   Figma: bg-[#25272d] h-[40px] px-[12px] py-[8px] rounded-[4px]
          gap-[12px] between arrow and inner content group
          inner content group: gap-[8px] between icon and text
   ========================================================================== */

.header-nav-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 9px 14px;
    background-color: #25272D;
    border: 1px solid rgba(48, 52, 59, 0.85);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    box-sizing: border-box;
    outline: none;
}

.header-nav-btn:hover {
    background-color: #30343B;
    border-color: #1081df;
    box-shadow: 0 8px 22px rgba(16, 129, 223, 0.18);
    transform: translateY(-1px);
}

.header-nav-btn:focus-visible {
    outline: 2px solid #1081DF;
    outline-offset: 2px;
}

/* Inner content wrapper: icon + text, gap-[8px] */
.header-nav-btn__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Text label — Persian UI navigation */
.header-nav-btn__text {
    font-family: 'Vazir', 'Vazir', Tahoma, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    white-space: nowrap;
    direction: rtl;
    flex-shrink: 0;
}

/* Duotone icon wrapper — size-[24px] */
.header-nav-btn__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-nav-btn__icon img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
    -webkit-font-smoothing: antialiased;
    color-rendering: optimizeQuality;
    shape-rendering: geometricPrecision;
}

/* Received icon needs 90deg rotation per Figma */
.header-nav-btn__icon--rotate90 img {
    /* transform: rotate(90deg); */
}

/* Dropdown arrow — w-[12px] h-[7px] */
.header-nav-btn__arrow {
    width: 12px;
    height: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-nav-btn__arrow img {
    width: 12px;
    height: 7px;
    display: block;
}

/* ==========================================================================
   Main category flyout menu — دانلود بازی / دانلود مد / آموزش
   Figma Nodes 177:6262, 4147:10265 and 189:6203
   ========================================================================== */

.header-nav-flyout-root {
    position: relative;
    display: flex;
    flex-shrink: 0;
}

.header-nav-btn--games[aria-expanded="true"],
.header-nav-btn--mods[aria-expanded="true"],
.header-nav-btn--guides[aria-expanded="true"],
.header-nav-btn--articles[aria-expanded="true"],
.header-nav-btn--shop[aria-expanded="true"],
.header-nav-flyout-root.is-open .header-nav-btn--games,
.header-nav-flyout-root.is-open .header-nav-btn--mods,
.header-nav-flyout-root.is-open .header-nav-btn--guides,
.header-nav-flyout-root.is-open .header-nav-btn--articles,
.header-nav-flyout-root.is-open .header-nav-btn--shop {
    background-color: #30343B;
    border-color: #1081df;
    box-shadow: 0 8px 22px rgba(16, 129, 223, 0.18);
}

.header-nav-btn--games[aria-expanded="true"] .header-nav-btn__arrow img,
.header-nav-btn--mods[aria-expanded="true"] .header-nav-btn__arrow img,
.header-nav-btn--guides[aria-expanded="true"] .header-nav-btn__arrow img,
.header-nav-btn--articles[aria-expanded="true"] .header-nav-btn__arrow img,
.header-nav-btn--shop[aria-expanded="true"] .header-nav-btn__arrow img,
.header-nav-flyout-root.is-open .header-nav-btn__arrow img {
    transform: rotate(180deg);
}

.header-nav-btn__arrow img {
    transition: transform 220ms ease;
}

.header-game-flyout {
    position: absolute;
    left: 0;
    top: calc(100% - 70px);
    z-index: 1200;
    width: min(872px, calc(100vw - 32px));
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.985);
    transform-origin: top center;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 220ms ease;
    visibility: hidden;
}

.header-game-flyout.is-open,
.header-game-flyout.is-closing {
    pointer-events: auto;
    visibility: visible;
}

.header-game-flyout.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.header-game-flyout.is-closing {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(0.99);
}

.header-game-flyout__panel {
    position: relative;
    width: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    border-radius: 16px;
    background-color: #1C1E22;
    box-shadow: 0 20px 49.4px 5px rgba(20, 20, 22, 0.81);
    box-sizing: border-box;
}

.header-game-flyout__tags {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scroll-behavior: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.header-game-flyout__tags::-webkit-scrollbar {
    display: none;
}

.header-game-flyout__tags::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.header-game-flyout__tag {
    min-height: 38px;
    padding: 8px 14px;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    border-radius: 4px;
    background-color: #25272D;
    color: #C4C8CF;
    text-decoration: none;
    font-family: 'Vazir', 'Vazir', Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    box-sizing: border-box;
}

.header-game-flyout__tag:hover,
.header-game-flyout__tag:focus-visible {
    background-color: #30343B;
    color: #FFFFFF;
    transform: translateY(-1px);
    outline: none;
}

.header-game-flyout__tag.is-active {
    background-color: #1081DF;
    color: #FFFFFF;
}

.header-game-flyout__counter {
    width: 31px;
    height: 20px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 31px;
    border-radius: 2px;
    background-color: #30343B;
    color: #C4C8CF;
    font-size: 12px;
    line-height: 1;
    box-sizing: border-box;
}

.header-game-flyout__counter--active,
.header-game-flyout__tag.is-active .header-game-flyout__counter {
    background-color: #FFFFFF;
    color: #1081DF;
}

.header-game-flyout__track {
    display: none;
}

.header-game-flyout__indicator {
    display: none;
}

.header-game-flyout__indicator::after {
    content: '';
    position: absolute;
    inset: -12px 0;
}

.header-game-flyout.is-dragging-tags,
.header-game-flyout.is-dragging-tags .header-game-flyout__tags,
.header-game-flyout.is-dragging-tags .header-game-flyout__indicator {
    cursor: grabbing;
    user-select: none;
}

.header-game-flyout.is-dragging-tags .header-game-flyout__indicator {
    transition: none;
}

.header-game-flyout__cards {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 400px));
    justify-content: center;
    gap: 24px;
}

.header-game-flyout__cards.is-filtering {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.header-game-flyout__card {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 8px;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #25272D;
    isolation: isolate;
}

.header-game-flyout__card-img,
.header-game-flyout__card-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.header-game-flyout__card-img {
    object-fit: cover;
    z-index: -2;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}

.header-game-flyout__card-shade {
    z-index: -1;
    background: linear-gradient(180deg, rgba(16, 17, 20, 0) 0%, #101114 100%);
}

.header-game-flyout__card:hover .header-game-flyout__card-img,
.header-game-flyout__card:focus-visible .header-game-flyout__card-img {
    transform: scale(1.045);
    filter: brightness(1.06);
}

.header-game-flyout__card:focus-visible {
    outline: 2px solid #1081DF;
    outline-offset: 3px;
}

.header-game-flyout__card-content {
    width: 100%;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    box-sizing: border-box;
}

.header-game-flyout__badge {
    height: 24px;
    padding: 4px 8px;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 4px;
    background-color: #1081DF;
    color: #FFFFFF;
    font-family: 'Vazir', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    align-self: baseline;
}

.header-game-flyout__badge--mod {
    background-color: #401C73;
}

.header-game-flyout__badge--guide {
    background-color: #1C7D45;
}

.header-game-flyout__badge img {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1);
}

.header-game-flyout__card-title {
    width: 100%;
    height: 21px;
    overflow: hidden;
    color: #FFFFFF;
    font-family: 'Vazir', 'Vazir', Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-game-flyout__card-subtitle {
    width: 100%;
    height: 21px;
    overflow: hidden;
    color: #C4C8CF;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-game-flyout__all {
    height: 36px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #25272D;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 180ms ease, transform 180ms ease;
}

.header-game-flyout__all:hover,
.header-game-flyout__all:focus-visible {
    background-color: #30343B;
    transform: translateY(-1px);
    outline: none;
}

/* Article flyout has narrower width; left/top positioned by JS */
.header-article-flyout {
    width: min(264px, calc(100vw - 15px));
}

.header-article-flyout .header-game-flyout__panel {
    padding: 16px;
    gap: 16px;
    align-items: stretch;
}

.header-article-flyout__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-article-flyout__item {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    display: flex;
    direction: rtl;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 4px;
    color: #FFFFFF;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 180ms ease, transform 180ms ease;
}

.header-article-flyout__item:hover,
.header-article-flyout__item:focus-visible {
    background-color: #25272D;
    transform: translateY(-1px);
    outline: none;
}

.header-article-flyout__counter {
    width: 31px;
    height: 20px;
    order: 2;
    flex: 0 0 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background-color: #30343B;
    color: #FFFFFF;
    font-family: 'Vazir', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    box-sizing: border-box;
}

.header-article-flyout__item-main {
    display: inline-flex;
    direction: rtl;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.header-article-flyout__label {
    flex: 1;
    color: #FFFFFF;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-article-flyout__icon {
    order: 1;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
}

.header-article-flyout__all {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #25272D;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    box-sizing: border-box;
    transition: background-color 180ms ease, transform 180ms ease;
}

.header-article-flyout__all:hover,
.header-article-flyout__all:focus-visible {
    background-color: #30343B;
    transform: translateY(-1px);
    outline: none;
}

/* Shop flyout has narrower width; left/top positioned by JS */
.header-shop-flyout {
    width: min(264px, calc(100vw - 15px));
}

.header-shop-flyout .header-game-flyout__panel {
    padding: 16px;
    gap: 16px;
    align-items: stretch;
}

.header-shop-flyout__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.header-shop-flyout__item {
    width: 232px;
    height: 36px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    direction: rtl;
    border-radius: 4px;
    color: #FFFFFF;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 180ms ease, transform 180ms ease;
}

.header-shop-flyout__item:hover,
.header-shop-flyout__item:focus-visible {
    background-color: #25272D;
    transform: translateY(-1px);
    outline: none;
}

.header-shop-flyout__item-main {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    max-width: 100%;
}

.header-shop-flyout__label {
    color: #FFFFFF;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    text-align: right;
}

.header-shop-flyout__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
    color-rendering: optimizeQuality;
    shape-rendering: geometricPrecision;
}

.header-shop-flyout__all {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #25272D;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    box-sizing: border-box;
    transition: background-color 180ms ease, transform 180ms ease;
}

.header-shop-flyout__all:hover,
.header-shop-flyout__all:focus-visible {
    background-color: #30343B;
    transform: translateY(-1px);
    outline: none;
}

.header-guide-flyout .header-game-flyout__panel {
    gap: 24px;
}

.header-guide-flyout .header-game-flyout__tags {
    justify-content: flex-start;
    padding-bottom: 0;
}

/* ==========================================================================
   Row 2 — Secondary navigation
   Figma: pl-[16px] pr-[8px]
   ========================================================================== */

.header-row--secondary {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 8px;
    padding-left: 16px;
    gap: 16px;
}

/* ==========================================================================
   Secondary text links — RIGHT side in RTL (first flex child)
   Figma: h-[32px] px-[12px] py-[8px] rounded-[4px]
          font 14px color #8F96A3
   ========================================================================== */

.header-secondary-links {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.header-secondary-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Vazir', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #8F96A3;
    white-space: nowrap;
    text-decoration: none;
    direction: rtl;
    transition: color 0.15s ease, background-color 0.15s ease;
    box-sizing: border-box;
}

.header-secondary-link:hover {
    color: #FFFFFF;
    background-color: #25272D;
}

/* ==========================================================================
   Search & Social group — LEFT side in RTL (second flex child)
   Figma: gap-[16px] between social group and search
   ========================================================================== */

.header-search-social {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Social buttons group — gap-[8px] */
.header-social {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

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

.header-social-btn:hover {
    background-color: #30343B;
    border-color: #8F96A3;
}

.header-social-btn img {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

/* Vertical divider between social and search */
.header-divider {
    width: 1px;
    height: 31px;
    background-color: #30343B;
    flex-shrink: 0;
}

/* Search input button
   Figma: bg-[#25272d] border border-[#30343b] h-[37px] w-[200px]
          p-[8px] rounded-[4px] justify-between
*/
.header-search {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    height: 37px;
    padding: 8px;
    background-color: #25272D;
    border: 1px solid #30343B;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
    gap: 8px;
    box-sizing: border-box;
    outline: none;
}

.header-search:hover {
    border-color: #8F96A3;
}

.header-search:focus-visible {
    border-color: #1081DF;
    outline: none;
}

.header-search__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

/* Placeholder text — Button/Button2 Regular: IRANSansX 14px/400/1.2 */
.header-search__placeholder {
    font-family: 'Vazir', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #8F96A3;
    white-space: nowrap;
    direction: rtl;
    flex: 1;
    text-align: right;
}

/* ==========================================================================
   Mobile toggle button (hidden on desktop)
   ========================================================================== */

.header-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    background-color: #25272D;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    outline: none;
}

.header-mobile-toggle:hover {
    background-color: #30343B;
}

.header-mobile-toggle__icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* ==========================================================================
   Mobile menu (hidden by default)
   ========================================================================== */

.header-mobile-menu {
    display: none;
    flex-direction: column;
    background-color: #1C1E22;
    border-top: 1px solid #30343B;
    padding: 8px 16px 16px;
}

.header-mobile-menu.is-open {
    display: flex;
}

.header-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-mobile-nav__item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 4px;
    font-family: 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #FFFFFF;
    text-decoration: none;
    direction: rtl;
    transition: background-color 0.15s ease;
}

.header-mobile-nav__item:hover {
    background-color: #25272D;
}

.header-mobile-nav__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-mobile-nav__icon img {
    width: 20px;
    height: 20px;
    display: block;
}

.header-mobile-nav__item--secondary {
    font-size: 14px;
    color: #8F96A3;
}

.header-mobile-nav__item--secondary:hover {
    color: #FFFFFF;
}

.header-mobile-nav__divider {
    height: 1px;
    background-color: #30343B;
    margin: 8px 0;
}

/* ==========================================================================
   Site search flyout — Figma Node 254:1364
   ========================================================================== */

.site-search-open {
    overflow: hidden;
}

.site-search-flyout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(8, 10, 14, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.site-search-flyout-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-search-flyout {
    position: fixed;
    top: 130px;
    left: 25%;
    z-index: 1210;
    width: min(440px, calc(100vw - 22px));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -10px, 0) scale(0.985);
    transform-origin: top center;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 220ms ease;
}

.site-search-flyout.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0) scale(1);
}

.site-search-flyout__panel {
    width: 100%;
    min-height: 548px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    direction: rtl;
    border-radius: 16px;
    background-color: #1C1E22;
    box-shadow: 0 20px 49.4px 5px rgba(20, 20, 22, 0.81);
    box-sizing: border-box;
    overflow: hidden;
}

.site-search-flyout__form {
    width: 100%;
    height: 37px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border: 1px solid #30343B;
    border-radius: 4px;
    background-color: #25272D;
    box-sizing: border-box;
}

.site-search-flyout__input {
    min-width: 0;
    flex: 1;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-align: right;
}

.site-search-flyout__input::placeholder {
    color: #8F96A3;
    opacity: 1;
}

.site-search-flyout__input::-webkit-search-cancel-button {
    display: none;
}

.site-search-flyout__submit {
    width: 18px;
    height: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.site-search-flyout__submit img {
    width: 18px;
    height: 18px;
    display: block;
}

.site-search-flyout__top {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-search-flyout__tags {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    max-height: 130px;
    overflow-y: auto;
    overflow-x: clip;
    user-select: none;
    scrollbar-width: thin;
    scrollbar-color: #30343B transparent;
}

.site-search-flyout__tags.is-dragging {
    cursor: grabbing;
}

.site-search-flyout__tags::-webkit-scrollbar {
    width: 4px;
}

.site-search-flyout__tags::-webkit-scrollbar-track {
    background: transparent;
}

.site-search-flyout__tags::-webkit-scrollbar-thumb {
    background-color: #30343B;
    border-radius: 999px;
}

.site-search-flyout__tag {
    height: 36px;
    padding: 8px;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 4px;
    background-color: #25272D;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Vazir', sans-serif;
    box-sizing: border-box;
    transition: background-color 180ms ease, transform 180ms ease;
}

.site-search-flyout__tag:hover,
.site-search-flyout__tag:focus-visible {
    background-color: #30343B;
    outline: none;
}

.site-search-flyout__tag.is-active {
    background-color: #1081DF;
}

.site-search-flyout__counter {
    min-width: 31px;
    height: 20px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    box-sizing: border-box;
}

.site-search-flyout__tag-label,
.site-search-flyout__count {
    color: #FFFFFF;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

.site-search-flyout__count {
    flex: 0 0 auto;
    color: #8F96A3;
}

.site-search-flyout__body {
    position: relative;
    width: 100%;
    height: 384px;
    padding-right: 16px;
    box-sizing: border-box;
}

.site-search-flyout__results {
    width: 100%;
    height: 384px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
}

.site-search-flyout__results::-webkit-scrollbar {
    display: none;
}

.site-search-flyout__scroll-track {
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 384px;
    border-radius: 999px;
    background-color: #25272D;
}

.site-search-flyout__scroll-thumb {
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 112px;
    border-radius: 999px;
    background-color: #1081DF;
    transition: transform 120ms linear, height 120ms linear;
}

.site-search-flyout__card {
    width: 100%;
    min-height: 84px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 0 0 auto;
    border-radius: 8px;
    background-color: transparent;
    color: #FFFFFF;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 180ms ease, transform 180ms ease;
}

.site-search-flyout__card:hover,
.site-search-flyout__card:focus-visible {
    background-color: #25272D;
    transform: translateX(-2px);
    outline: none;
}

.site-search-flyout__card-img {
    width: 120px;
    height: 68px;
    flex: 0 0 120px;
    display: block;
    object-fit: cover;
    border-radius: 4px;
    background-color: #25272D;
}

.site-search-flyout__card-img--empty {
    background: linear-gradient(135deg, #25272D, #30343B);
}

.site-search-flyout__card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.site-search-flyout__card-title {
    width: 100%;
    min-height: 42px;
    color: #FFFFFF;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.site-search-flyout__card-meta {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: #8F96A3;
    font-family: 'Vazir', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

.site-search-flyout__meta-item {
    min-width: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    color: #8F96A3;
}

.site-search-flyout__meta-item img {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: block;
    opacity: 0.85;
}

.site-search-flyout__meta-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-search-flyout__state {
    width: 100%;
    min-height: 84px;
    padding: 24px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #8F96A3;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
}

.site-search-flyout__state--error {
    color: #ff7a7a;
}

.site-search-flyout__all {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #25272D;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    box-sizing: border-box;
    transition: background-color 180ms ease, transform 180ms ease;
}

.site-search-flyout__all:hover,
.site-search-flyout__all:focus-visible {
    background-color: #30343B;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 768px) {
    .site-search-flyout {
        position: fixed;
        top: 128px;
        left: 50%;
        transform: translateX(-50%);
        width: min(390px, calc(100vw - 24px));
    }

    .site-search-flyout__panel {
        min-height: min(548px, calc(100vh - 130px));
        border-radius: 12px;
    }

    .site-search-flyout__body,
    .site-search-flyout__results,
    .site-search-flyout__scroll-track {
        height: min(384px, calc(100vh - 300px));
    }

    .site-search-flyout__card,
    .site-search-flyout__state {
        width: 100%;
    }

    .site-search-flyout__card-content {
        width: auto;
        flex: 1;
    }
}

/* ==========================================================================
   Responsive — Tablet (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .header-row--primary {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .header-game-flyout {
        top: calc(100% + 12px);
        width: min(872px, calc(100vw - 24px));
    }

    .header-game-flyout__panel {
        padding: 20px;
        gap: 36px;
    }

    .header-game-flyout__track,
    .header-game-flyout__indicator {
        top: 72px;
    }

    .header-game-flyout__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .header-row--primary::-webkit-scrollbar {
        display: none;
    }

    .header-nav-group {
        gap: 8px;
    }
}

/* ==========================================================================
   Responsive — Mobile (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* ══════════════════════════════════════════════════════════════
       TOP ROW (64px) — Figma 6212:6082
       Contains: Hamburger (left:12px), Search (left:121px), Logo (right:0)
       All three are absolutely positioned within this row.
       ══════════════════════════════════════════════════════════════ */

    .header-row--primary {
        padding: 0;
        min-height: 64px;
        gap: 0;
        border-bottom: 1px solid #30343B;
        overflow: visible; /* Allow search (positioned from secondary) to show */
    }

    /* Hide desktop nav groups and flyouts on mobile */
    .header-promo-group,
    .header-main-nav-group {
        display: none;
    }

    .header-game-flyout {
        display: none;
    }

    /* ── Hamburger toggle: absolute left-[12px] top-[12px] ── */
    .header-mobile-toggle {
        display: flex;
        position: absolute;
        left: 12px;
        top: 12px;
        z-index: 2;
        width: auto;
        height: 40px;
        padding: 8px 12px;
        gap: 12px;
        background-color: #25272D;
        border-radius: 4px;
    }

    /* ── Logo: absolute right-0, 67×64px, border-l + border-b ── */
    .header-logo-flyout-root {
        width: 67px;
        height: 64px;
        right: 0;
    }

    .header-logo {
        width: 67px;
        height: 64px;
        padding: 12px;
        border-left: 1px solid #30343B;
        border-bottom: 1px solid #30343B;
    }

    .header-logo__img {
        width: 43px;
        height: 40px;
    }

    .header-logo-flyout {
        top: 64px;
        right: 0;
    }

    /* ══════════════════════════════════════════════════════════════
       SEARCH — Absolutely positioned into the TOP ROW
       In HTML it lives inside .header-search-social (secondary row),
       but Figma places it in the top 64px row at left:121px top:12px.
       We use absolute positioning with negative top to pull it up.
       ══════════════════════════════════════════════════════════════ */

    .header-search {
        position: absolute;
        top: -52px;        /* secondary row starts at 64px, so -52px = 12px from top */
        left: 310px;       /* Figma: left-[121px] */
        width: 160px;      /* Figma: w-[160px] */
        height: 40px;      /* Figma: h-[40px] */
        padding: 8px;      /* Figma: p-[8px] */
        border-radius: 4px;
        gap: 8px;
        z-index: 10;
        background-color: #25272D;
        border: 1px solid #30343B;
    }

    .header-search__placeholder {
        display: block;
    }

    .header-search__icon {
        width: 18px;
        height: 18px;
    }

    /* ══════════════════════════════════════════════════════════════
       SECONDARY ROW — Social icons + Text links
       Figma: top-[64px], pl-[12px] pr-[8px] py-[12px]
       flex items-center justify-between
       ══════════════════════════════════════════════════════════════ */

    .header-row--secondary {
        padding: 12px 8px 12px 12px;
        gap: 8px;
        min-height: auto;
        border-top: none;
        overflow: visible; /* Allow search (absolutely positioned) to show above */
    }

    /* Text links: visible on mobile (Figma: تخفیفات, اخبار, درباره ما) */
    .header-secondary-links {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .header-secondary-link {
        height: 32px;              /* Figma: h-[32px] */
        padding: 8px 12px;         /* Figma: px-[12px] py-[8px] */
        border-radius: 4px;        /* Figma: rounded-[4px] */
        font-family: 'IRANSansX', 'Vazir', sans-serif;
        font-size: 14px;           /* Figma: text-[14px] */
        font-weight: 400;
        line-height: 1.2;
        color: #8F96A3;            /* Figma: text-[#8f96a3] */
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .header-secondary-link:hover,
    .header-secondary-link:focus-visible {
        color: #FFFFFF;
        background-color: rgba(48, 52, 59, 0.5);
    }

    /* Hide the search-social wrapper layout since search is absolutely positioned */
    .header-search-social {
        gap: 8px;
        position: static;
    }

    /* Divider: hidden on mobile */
    .header-divider {
        display: none;
    }

    /* ── Social buttons: 28px container, 20px icon (Figma: p-[4px] bg-[#25272d] border-[#30343b] rounded-[4px]) ── */
    .header-social {
        gap: 8px;
    }

    .header-social-btn {
        width: 28px;
        height: 28px;
        padding: 4px;
    }

    .header-social-btn img {
        width: 20px;
        height: 20px;
    }

    /* ══════════════════════════════════════════════════════════════
       MOBILE MENU — Full-screen overlay
       Figma: bg-[#1c1e22], z-index 1500
       ══════════════════════════════════════════════════════════════ */

    .header-mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 1500;
        display: none;
        flex-direction: column;
        background-color: #1C1E22;
        border-top: none;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .header-mobile-menu.is-open {
        display: flex;
    }

    .header-menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* ── Mobile menu top bar: close + search + logo ── */
    .header-mobile-menu__topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background-color: #1C1E22;
        border-bottom: 1px solid #30343B;
        position: sticky;
        top: 0;
        z-index: 2;
        direction: ltr;
    }

    .header-mobile-menu__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: #25272D;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.15s ease;
    }

    .header-mobile-menu__close:hover {
        background-color: #30343B;
    }

    .header-mobile-menu__search {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex: 1;
        height: 40px;
        padding: 8px 12px;
        background-color: #25272D;
        border: 1px solid #30343B;
        border-radius: 4px;
        cursor: pointer;
    }

    .header-mobile-menu__search-text {
        font-family: 'Vazir', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #8F96A3;
    }

    .header-mobile-menu__logo {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .header-mobile-menu__logo img {
        width: 40px;
        height: 40px;
    }

    /* ── Mobile nav ── */
    .header-mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 12px 16px 24px;
    }

    /* ── Social row ── */
    .header-mobile-nav__social-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0 12px;
        flex-direction: row;
    }

    .header-mobile-nav__social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 4px;
        background-color: #25272D;
        border: 1px solid #30343B;
        text-decoration: none;
        flex-shrink: 0;
        transition: background-color 0.15s ease;
    }

    .header-mobile-nav__social-link:hover {
        background-color: #30343B;
    }

    .header-mobile-nav__social-link img {
        width: 20px;
        height: 20px;
    }

    .header-mobile-nav__social-links {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-direction: row-reverse;
        margin-right: auto;
    }

    .header-mobile-nav__social-text {
        font-family: 'Vazir', sans-serif;
        font-size: 13px;
        font-weight: 400;
        color: #8F96A3;
        text-decoration: none;
        padding: 6px 8px;
        border-radius: 4px;
        transition: color 0.15s ease;
        white-space: nowrap;
    }

    .header-mobile-nav__social-text:hover {
        color: #FFFFFF;
    }

    /* ── Main nav items ── */
    .header-mobile-nav__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 16px;
        border-radius: 8px;
        background-color: #25272D;
        margin-bottom: 8px;
        font-family: 'Vazir', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.4;
        color: #FFFFFF;
        text-decoration: none;
        direction: rtl;
        transition: background-color 0.15s ease;
        min-height: 52px;
    }

    .header-mobile-nav__item:hover,
    .header-mobile-nav__item:active {
        background-color: #30343B;
    }

    .header-mobile-nav__item-label {
        flex: 1;
        text-align: right;
    }

    .header-mobile-nav__item-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .header-mobile-nav__item-icon img {
        width: 24px;
        height: 24px;
        display: block;
    }

    /* ── خانواده کلاب section ── */
    .header-mobile-nav__family-section {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .header-mobile-nav__family-title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: 'Vazir', sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
        direction: ltr;
    }

    .header-mobile-nav__family-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        direction: ltr;
    }

    .header-mobile-nav__family-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 16px 8px;
        background-color: #25272D;
        border: 1px solid #30343B;
        border-radius: 8px;
        text-decoration: none;
        font-family: 'Vazir', sans-serif;
        font-size: 13px;
        font-weight: 400;
        color: #FFFFFF;
        direction: rtl;
        transition: background-color 0.15s ease;
        position: relative;
        text-align: center;
    }

    .header-mobile-nav__family-card:hover {
        background-color: #30343B;
    }

    .header-mobile-nav__family-card img {
        width: 24px;
        height: 24px;
    }

    .header-mobile-nav__family-card--active {
        border-color: #1081DF;
    }

    .header-mobile-nav__family-badge {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #1081DF;
        color: #FFFFFF;
        font-size: 10px;
        font-weight: 500;
        padding: 2px 8px;
        border-radius: 4px;
        white-space: nowrap;
        line-height: 1.4;
    }
}

/* ==========================================================================
   Responsive — Small mobile (≤ 480px)
   ========================================================================== */

@media (max-width: 480px) {
    /* Primary row: slightly smaller for narrow screens */
    .header-row--primary {
        min-height: 56px;
    }

    /* Logo: 56px square */
    .header-logo-flyout-root {
        width: 56px;
        height: 56px;
        right: 0;
    }

    .header-logo {
        width: 56px;
        height: 56px;
        padding: 8px;
    }

    .header-logo__img {
        width: 36px;
        height: 40px;
    }

    /* Toggle: smaller */
    .header-mobile-toggle {
        left: 10px;
        top: 10px;
        height: 36px;
        padding: 7px 10px;
    }

    /* Search: adjust top for 56px row (12px from top = 56 - 44) */
    .header-search {
        top: -44px;
        /* left: 108px; */
        /* width: 140px; */
        height: 36px;
        padding: 6px 8px;
        right: 70px;
    }

    /* Social buttons */
    .header-social {
        gap: 6px;
    }

    .header-social-btn {
        width: 28px;
        height: 28px;
        padding: 4px;
    }

    /* Secondary links: slightly smaller */
    .header-secondary-link {
        font-size: 13px;
        padding: 6px 8px;
        height: 28px;
    }

    /* Mobile menu overlay: tighter padding */
    .header-mobile-menu {
        padding: 64px 12px 20px;
        padding-top: calc(64px + env(safe-area-inset-top, 0px));
    }

    .header-mobile-nav__item {
        padding: 10px 12px;
        font-size: 15px;
        min-height: 44px;
        direction: ltr;
    }
}

@media (max-width: 900px) {
    .header-game-flyout__cards {
        grid-template-columns: 1fr;
    }

    .header-game-flyout__card {
        height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-game-flyout,
    .header-game-flyout__tag,
    .header-game-flyout__indicator,
    .header-game-flyout__card-img,
    .header-game-flyout__all,
    .header-nav-btn__arrow img,
    .header-logo-flyout {
        transition: none;
    }
}

/* ==========================================================================
   Logo Flyout — Club Family Flyout Menu
   Figma Node 6016:14460
   Hover-triggered dropdown below the logo showing sister sites.
   ========================================================================== */

.header-logo-flyout {
    position: absolute;
    /* Positioned relative to .header-inner (position: relative).
       Logo root is at top:0, right:-2px, height:72px.
       Place flyout directly below the logo. */
    top: 72px;
    right: -2px;
    z-index: 1300;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transform-origin: top right;
    transition: opacity 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 200ms ease;
}

/* Invisible bridge between logo and flyout to prevent close on mouse travel */
.header-logo-flyout::before {
    content: '';
    position: absolute;
    top: -12px;
    right: 0;
    width: 100%;
    height: 12px;
}

.header-logo-flyout.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-logo-flyout.is-closing {
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-4px);
}

.header-logo-flyout__panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: #1C1E22;
    border-radius: 16px;
    box-shadow: 0 20px 49.4px 5px rgba(20, 20, 22, 0.81);
    box-sizing: border-box;
    white-space: nowrap;
}

.header-logo-flyout__row {
    display: flex;
    flex-direction: row;
    direction: ltr;
    gap: 24px;
    align-items: stretch;
    justify-content: flex-end;
}

.header-logo-flyout__card {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 288px;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #FFFFFF;
    box-sizing: border-box;
    position: relative;
    transition: background-color 180ms ease;
}

.header-logo-flyout__card:hover {
    background-color: rgba(60, 64, 73, 0.25);
}

.header-logo-flyout__card-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.header-logo-flyout__card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3C4049;
    border-radius: 4px;
    padding: 4px 2px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.header-logo-flyout__card-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

.header-logo-flyout__card-icon--rotate90 img {
    transform: rotate(90deg);
}

.header-logo-flyout__card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    overflow: hidden;
    min-width: 0;
}

.header-logo-flyout__card-title {
    font-family: 'IRANSansX', 'Vazir', Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.header-logo-flyout__card-desc {
    width: 100%;
    font-family: 'IRANSansX', 'Vazir', Tahoma, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    height: 18px;
}

.header-logo-flyout__card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    padding: 4px 8px;
    background-color: #1081DF;
    border-radius: 4px;
    font-family: 'IRANSansX', 'Vazir', Tahoma, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #FFFFFF;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Hide flyout on mobile */
@media (max-width: 768px) {
    .header-logo-flyout {
        display: none !important;
    }
}