/*
Theme Name: astra Child
Theme URI: http://example.com/twentytwenty-child/
Description: Twenty Twenty Child Theme
Author: Your Name
Author URI: http://example.com
Template: astra
Version: 1.0.0
*/

/* == CSS Custom Properties (مرکز کنترل رنگ‌ها) =================== */
:root {
    /* تعریف حالت پیش‌فرض: DARK MODE */
    color-scheme: dark light;
    
    /* پس‌زمینه‌ها */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #212121;
    --bg-overlay: rgba(255, 255, 255, 0.05);
    --bg-modal: rgba(0, 0, 0, 0.9);
    
    /* متن‌ها */
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #a0a0a0;
    --text-inverse: #000000;
    
    /* لینک‌ها */
    --link-color: #64b5f6;
    --link-hover: #90caf9;
    --link-visited: #ba68c8;
    
    /* مرزها */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-light: rgba(255, 255, 255, 0.05);
    --border-color-strong: rgba(255, 255, 255, 0.2);
    
    /* سایه‌ها */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --shadow-strong: rgba(0, 0, 0, 0.4);
    
    /* اجزای UI */
    --button-bg: #2196f3;
    --button-hover: #1976d2;
    --button-text: #ffffff;
    --input-bg: #1e1e1e;
    --input-border: #444444;
    --input-focus: #2196f3;
    
    /* وضعیت‌ها */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --info: #2196f3;
    
    /* ستاره‌ها و نور مهتاب */
    --star-color: #ffffff;
    --starfield-bg: transparent;
    --moonlight-opacity: 0.4;
    
    /* فاصله‌ها */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* شعاع‌ها */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    
    /* انتقال‌ها */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* حالت روشن - فقط بازنویسی متغیرها */
[data-theme="light"] {
    color-scheme: light dark;
    
    /* پس‌زمینه‌ها */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #eeeeee;
    --bg-overlay: rgba(0, 0, 0, 0.05);
    --bg-modal: rgba(255, 255, 255, 0.9);
    
    /* متن‌ها */
    --text-primary: #212121;
    --text-secondary: #424242;
    --text-muted: #757575;
    --text-inverse: #ffffff;
    
    /* لینک‌ها */
    --link-color: #1976d2;
    --link-hover: #1565c0;
    --link-visited: #7b1fa2;
    
    /* مرزها */
    --border-color: rgba(0, 0, 0, 0.12);
    --border-color-light: rgba(0, 0, 0, 0.06);
    --border-color-strong: rgba(0, 0, 0, 0.2);
    
    /* سایه‌ها */
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --shadow-strong: rgba(0, 0, 0, 0.15);
    
    /* اجزای UI */
    --button-bg: #1976d2;
    --button-hover: #1565c0;
    --button-text: #ffffff;
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --input-focus: #1976d2;
    
    /* وضعیت‌ها - در حالت روشن رنگ‌ها کمی تیره‌تر */
    --success: #2e7d32;
    --warning: #f57c00;
    --error: #d32f2f;
    --info: #1976d2;
    
    /* ستاره‌ها و نور مهتاب */
    --star-color: #000000;
    --starfield-bg: #ffffff;
    --moonlight-opacity: 0;
}


/* == Starfield layer (استفاده از CSS Variables) ================ */
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200vh;        /* دو برابر ویوپورت */
    z-index: -10;         /* عقب‌تر از همه */
    pointer-events: none; /* اجازه کلیک روی محتوا */
    overflow: hidden;
    transition: transform var(--transition-fast);
    background-color: var(--starfield-bg);
}

/* حالت اسکرول ستاره‌ها - با سرعت کم */
.scroll-enabled #starfield {
    transform: translateY(var(--stars-scroll-offset, 0px));
}

/* اطمینان از نمایش canvas */
#starfield canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important; /* جلوی gradient */
}

/* ستاره‌های fallback - استفاده از CSS Variables */
#starfield .fallback-star {
    position: absolute;
    background: var(--star-color);
    border-radius: 50%;
    z-index: 1;
}

/* حالت روشن برای starfield - استفاده از data-theme */
[data-theme="light"] #starfield {
    background-color: var(--starfield-bg);
}

[data-theme="light"] #starfield .fallback-star {
    background: var(--star-color);
}

/* انیمیشن نور مهتاب در حالت روشن */
[data-theme="light"] #starfield::before {
    opacity: var(--moonlight-opacity) !important;
    animation: lightPulse 8s ease-in-out infinite, moonlightBreathingLight 30s ease-in-out infinite !important;
}

/* هاله‌ی نور مدرن بالای صفحه با SVG - استفاده از CSS Variables */
#starfield::before {
    content: '';
    position: absolute;
    bottom: 250px; /* 250 پیکسل بالاتر از کف صفحه */
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--moonlight-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 2044 1820' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid slice'%3E%3Cg filter='url(%23filter0_f)' style='transform: translateY(-850px)'%3E%3Ccircle cx='910' cy='910' r='512' fill='%23FF6308' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f)' style='transform: translateY(-850px)'%3E%3Ccircle cx='1022' cy='910' r='512' fill='%23BDC9E6' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter2_f)' style='transform: translateY(-850px)'%3E%3Ccircle cx='1134' cy='910' r='512' fill='%2397C4FF' fill-opacity='0.9'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f' x='0.446' y='0.446' width='1819.11' height='1819.11' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='120' result='effect1_foregroundBlur'/%3E%3C/filter%3E%3Cfilter id='filter1_f' x='112.446' y='0.446' width='1819.11' height='1819.11' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='120' result='effect1_foregroundBlur'/%3E%3C/filter%3E%3Cfilter id='filter2_f' x='224.446' y='0.446' width='1819.11' height='1819.11' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='120' result='effect1_foregroundBlur'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-size: 120% 120%;
    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2; /* بالای canvas و stars */
    animation: lightPulse 8s ease-in-out infinite, moonlightBreathing 30s ease-in-out infinite;
    transition: transform var(--transition-fast);
}

/* حالت اسکرول - نور مهتاب با صفحه حرکت می‌کند */
.scroll-enabled #starfield::before {
    transform: translateY(var(--scroll-offset, 0px));
}

/* حالت ثابت - نور مهتاب ثابت می‌ماند */
.scroll-disabled #starfield::before {
    transform: translateY(0px) !important;
}


/* لوگو در مرکز نور */
/* حذف نمایش لوگو از پس‌زمینه ستاره‌ها */
#starfield::after { content: none !important; display: none !important; }


/* بهبود کیفیت نمایش */
#starfield *,
#starfield canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* دیباگ برای بررسی */
#starfield[data-debug="true"] {
    border: 2px solid red;
    background: rgba(255,0,0,0.1);
}

#starfield[data-debug="true"] canvas {
    border: 1px solid blue;
}

/* انیمیشن twinkle برای fallback */
@keyframes twinkle {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2); 
    }
}

/* انیمیشن تنفس ملایم نور مهتاب - هر 30 ثانیه */
@keyframes moonlightBreathing {
    0%, 100% { 
        opacity: 0.4; /* حالت عادی */
    }
    50% { 
        opacity: 0.1; /* خیلی ملایم و نامحصوص */
    }
}

/* انیمیشن تنفس برای حالت روشن - ملایم‌تر */
@keyframes moonlightBreathingLight {
    0%, 100% { 
        opacity: 0.15; /* حالت عادی در حالت روشن */
    }
    50% { 
        opacity: 0.05; /* خیلی خیلی ملایم */
    }
}

/* == استایل‌های عمومی با CSS Variables ========================== */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color var(--transition-normal), 
                color var(--transition-normal);
}

/* لینک‌ها */
a {
    color: var(--link-color);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--link-hover);
}

a:visited {
    color: var(--link-visited);
}

/* اجزای UI */
button, 
.btn {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

button:hover,
.btn:hover {
    background-color: var(--button-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--shadow-medium);
}

/* فرم‌ها */
input,
textarea,
select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    transition: all var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-focus);
    outline: none;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* مرزها و بخش‌بندی‌ها */
hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--spacing-lg) 0;
}

/* بلاک‌کوت‌ها */
blockquote {
    border-left: 4px solid var(--link-color);
    padding-left: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    color: var(--text-secondary);
    font-style: italic;
}

/* جدول‌ها */
table {
    border-collapse: collapse;
    width: 100%;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

th, td {
    padding: var(--spacing-sm);
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}

th {
    background-color: var(--bg-tertiary);
    font-weight: bold;
    color: var(--text-primary);
}

/* کدها */
code,
pre {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
}

code {
    padding: 2px 4px;
}

pre {
    padding: var(--spacing-md);
    overflow-x: auto;
    border: 1px solid var(--border-color);
}

/* == Theme Toggle Button ===================================== */
.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: var(--bg-overlay);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-sm);
    backdrop-filter: blur(10px);
    transition: background var(--transition-normal), 
                box-shadow var(--transition-normal), 
                transform var(--transition-normal), 
                border-color var(--transition-normal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
    width: 80px;
    color: var(--text-primary);
    box-shadow: 0 2px 10px var(--shadow-light);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.theme-toggle:hover {
    background: var(--bg-modal);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px var(--shadow-medium);
}

.theme-toggle:focus {
    outline: none !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-overlay);
    box-shadow: 0 2px 10px var(--shadow-light);
}

.theme-toggle:focus-visible {
    outline: none !important;
    border: 1px solid var(--border-color) !important;
}

.theme-toggle:active {
    background: var(--bg-modal);
    transform: translateY(0);
    box-shadow: 0 1px 5px var(--shadow-light);
    outline: none !important;
    border: 1px solid var(--border-color) !important;
}

/* حذف کامل outline در تمام حالات */
.theme-toggle,
.theme-toggle:focus,
.theme-toggle:active,
.theme-toggle:focus-visible,
.theme-toggle:focus-within {
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.theme-toggle-icon {
    font-size: 18px;
    transition: transform var(--transition-fast);
}

.theme-toggle:hover .theme-toggle-icon {
    transform: rotate(180deg);
}

.theme-toggle-text {
    margin: 0 var(--spacing-xs);
    transition: none;
    text-align: center;
    min-width: 20px;
    white-space: nowrap;
}

.theme-toggle-icon,
.theme-toggle-text {
    color: inherit;
}

/* حالت static برای اسکرول شدن با صفحه */
.theme-toggle[style*="position: static"] {
    position: static !important;
    float: right;
    margin: 20px 20px 0 0;
    top: auto;
    right: auto;
}

/* دکمه Theme Toggle برای قالب Astra - اسکرول با صفحه */
.theme-toggle-astra {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* تنظیمات ویژه برای دسکتاپ */
@media (min-width: 1025px) {
    .theme-toggle-astra {
        top: 25px !important;
        right: 25px !important;
    }
}

/* تنظیمات ویژه برای تبلت */
@media (max-width: 1024px) and (min-width: 768px) {
    .theme-toggle-astra {
        top: 15px !important;
        right: 15px !important;
        min-width: 70px !important;
        width: 70px !important;
    }
}

/* == متا تگ theme-color برای موبایل ========================= */
.theme-color-meta {
    transition: content var(--transition-normal);
}

/* == تنظیمات Theme Toggle برای موبایل و تبلت ============= */
@media (max-width: 767px) {
    .theme-toggle-astra {
        top: 10px !important;
        right: 10px !important;
        min-width: 45px !important;
        width: 45px !important;
        padding: var(--spacing-xs) !important;
        font-size: 12px !important;
    }
    
    .theme-toggle-astra .theme-toggle-text {
        display: none !important;
    }
    
    .theme-toggle-astra .theme-toggle-icon {
        font-size: 16px !important;
    }
    
    /* کاهش opacity برای موبایل */
    #starfield::before {
        opacity: calc(var(--moonlight-opacity) * 0.5);
    }
    
    /* انتقال لوگو آسترا 30 پیکسل به چپ در موبایل */
    .site-header .site-logo,
    .ast-logo-title-inline .site-logo,
    .custom-logo-link,
    .site-branding .custom-logo,
    .ast-site-header-cart .site-logo {
        transform: translateX(-30px) !important;
        transition: transform var(--transition-normal) !important;
    }
    
    /* در صورت وجود container برای لوگو */
    .site-branding,
    .ast-site-identity {
        transform: translateX(-30px) !important;
        transition: transform var(--transition-normal) !important;
    }
}

/* == Accessibility (دسترس‌پذیری) =========================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    #starfield::before {
        animation: none !important;
    }
    
    .fallback-star {
        animation: none !important;
    }
}

/* تنظیمات کنتراست بالا */
@media (prefers-contrast: high) {
    :root {
        --border-color-strong: #ffffff;
        --shadow-strong: rgba(0, 0, 0, 0.8);
    }
    
    [data-theme="light"] {
        --border-color-strong: #000000;
        --shadow-strong: rgba(0, 0, 0, 0.3);
    }
}

/* تنظیمات واکنش‌گرا برای موبایل - غیرفعال‌سازی کامل افکت‌ها */
@media (max-width: 768px) {
    /* غیرفعال‌سازی کامل starfield در موبایل */
    #starfield {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* غیرفعال‌سازی تمام انیمیشن‌ها در موبایل */
    #starfield::before,
    #starfield::after,
    #starfield canvas,
    #starfield .fallback-star {
        display: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 0 !important;
    }
    
    /* غیرفعال‌سازی CSS variables مربوط به اسکرول */
    :root {
        --scroll-offset: 0px !important;
        --stars-scroll-offset: 0px !important;
        --moonlight-opacity: 0 !important;
    }
    
    /* غیرفعال‌سازی کلاس‌های اسکرول */
    .scroll-enabled,
    .scroll-disabled {
        --scroll-offset: 0px !important;
        --stars-scroll-offset: 0px !important;
    }
}

@media (max-width: 480px) {
    /* تأکید بر غیرفعال‌سازی در موبایل‌های کوچک */
    #starfield,
    #starfield * {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        position: static !important;
        animation: none !important;
        transform: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* == Fixes after typography scale-up ============================= */
/* 1) Ensure theme toggle icon rotates around its center */
.theme-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    transform-origin: center center;
}

/* 2) Prevent footer communication buttons from jumping on hover */
.site-footer .elementor-button,
.site-footer .elementor-button .elementor-button-text,
.site-footer .wp-block-button__link,
.site-footer .ast-custom-button,
.site-footer .button,
.site-footer .btn {
    white-space: nowrap;
}

/* == WhatsApp / Telegram footer buttons ========================= */
.whatsapp-button,
.telegram-button {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    line-height: 1.25;
    min-height: 64px; /* ثابت نگه‌داشتن ارتفاع برای جلوگیری از پرش */
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.whatsapp-button img,
.telegram-button img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: contain;
}

.whatsapp-button .text-container,
.telegram-button .text-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0; /* اجازه ellipsis در صورت نیاز */
    white-space: normal; /* اجازه ۲ خط متن بدون تغییر در hover */
}

.whatsapp-button .text-container span,
.telegram-button .text-container span {
    display: block;
}

/* Hover بدون تغییر در اندازه متن/وزن تا از wrap جلوگیری شود */
.whatsapp-button:hover,
.telegram-button:hover {
    transform: none !important;
    box-shadow: 0 4px 8px var(--shadow-light);
}

/* == Footer tweaks ================================================ */
/* Remove the thin blue line above the footer (Astra/Elementor variants) */
.site-footer,
.ast-footer-wrap,
.site-below-footer-wrap,
.ast-footer-adv-overlay,
.footer-adv-overlay,
.site-footer .ast-builder-grid-row-container,
.ast-builder-grid-row-container.ast-footer-grid-row,
.ast-footer-wrapper {
    border-top: 0 !important;
    box-shadow: none !important;
}
.site-footer::before,
.site-footer::after,
.ast-footer-wrap::before,
.ast-footer-wrap::after,
.site-below-footer-wrap::before,
.site-below-footer-wrap::after {
    content: none !important;
    display: none !important;
}
/* In case a divider widget is used at the very top of footer */
.site-footer hr,
.site-footer .elementor-divider,
.site-footer .elementor-divider-separator {
    display: none !important;
    border: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* == Language Switcher (Polylang) ================================= */
.tb-lang-switcher {
    /* اجازه قرارگیری کنار منو (inline) و سازگاری با هدر آسترا */
    margin-inline-start: var(--spacing-sm);
}

.tb-lang-switcher ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tb-lang-switcher li {
    margin: 0;
}

.tb-lang-switcher a {
    display: inline-block;
    padding: 0.25rem 0.5rem; /* فشرده و سبک */
    text-decoration: none;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    line-height: 1.25;
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.tb-lang-switcher a:hover,
.tb-lang-switcher a:focus {
    background: var(--bg-overlay);
    border-color: var(--border-color);
}

.tb-lang-switcher li.is-current a {
    background: var(--bg-tertiary);
    font-weight: 600;
    border-color: var(--border-color-strong);
    cursor: default;
}

/* RTL-friendly: جهت‌گیری معکوس بدون تغییر فاصله‌ها */
[dir="rtl"] .tb-lang-switcher ul {
    flex-direction: row-reverse;
}

/* == Dropdown variant ============================================ */
.tb-lang-switcher.is-dropdown {
    position: relative;
}
.tb-lang-switcher .tb-lang-trigger {
    background: var(--bg-overlay);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-sm) var(--spacing-md);
    line-height: 1.2;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* فضا برای caret در ابتدای منطقی، تا متن دقیقا وسط باقی بماند */
    padding-inline-start: calc(var(--spacing-md) + 14px);
    gap: var(--spacing-xs);
    cursor: pointer;
    box-shadow: 0 2px 10px var(--shadow-light);
    transition: background var(--transition-normal),
                box-shadow var(--transition-normal),
                border-color var(--transition-normal),
                transform var(--transition-normal);
}
.tb-lang-switcher .tb-lang-trigger:hover {
    background: var(--bg-modal);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px var(--shadow-medium);
}
.tb-lang-switcher .tb-lang-caret {
    opacity: 0.8;
    position: absolute;
    inset-inline-start: 10px;
}
.tb-lang-switcher.is-dropdown ul.tb-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0; /* حالت انتهایی پیش‌فرض */
    min-width: 180px;
    padding: var(--spacing-xs);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 16px 40px var(--shadow-strong);
    z-index: 10000;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    max-width: min(92vw, 360px);
    max-height: min(70vh, 420px);
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-sm);
}

/* arrow */
.tb-lang-switcher.is-dropdown ul.tb-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    inset-inline-end: 18px; /* هماهنگ با حالت انتهایی */
    width: 12px; height: 12px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
    z-index: -1;
}

/* تراز شروع: منو از سمت شروع چینش باز شود */
.tb-lang-switcher.is-dropdown.align-start ul.tb-dropdown-menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
}
.tb-lang-switcher.is-dropdown.align-start ul.tb-dropdown-menu::before {
    inset-inline-start: 18px;
    inset-inline-end: auto;
}

/* باز شدن به بالا در تنگی ارتفاع */
.tb-lang-switcher.is-dropdown.drop-up ul.tb-dropdown-menu {
    top: auto;
    bottom: calc(100% + 10px);
}
.tb-lang-switcher.is-dropdown.drop-up ul.tb-dropdown-menu::before {
    top: auto;
    bottom: -6px;
    transform: rotate(225deg);
}
.tb-lang-switcher.is-dropdown ul.tb-dropdown-menu li a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.tb-lang-switcher.is-dropdown ul.tb-dropdown-menu li a:hover,
.tb-lang-switcher.is-dropdown ul.tb-dropdown-menu li a:focus {
    background: var(--bg-overlay);
    border-color: var(--border-color);
}
.tb-lang-switcher.is-dropdown ul.tb-dropdown-menu li.is-current a {
    background: var(--bg-tertiary);
    border-color: var(--border-color-strong);
}

/* Open state animation */
.tb-lang-switcher.is-dropdown.is-open ul.tb-dropdown-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Rotate caret on open */
.tb-lang-switcher.is-dropdown.is-open .tb-lang-caret { transform: rotate(180deg); transition: transform var(--transition-normal); }
.tb-lang-switcher.is-dropdown .tb-lang-caret { transition: transform var(--transition-normal); }

/* Small screens: keep things compact */
@media (max-width: 767px) {
    .tb-lang-switcher .tb-lang-trigger { padding: 6px 10px; font-size: 12px; }
    .tb-lang-switcher.is-dropdown ul { min-width: 140px; }
}

/* == Header Utility Bar: places lang switcher next to theme toggle == */
.tb-header-utility {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* ابعاد یکسان برای دکمه‌ها در utility bar */
    --utility-pill-w: 116px;
    --utility-pill-h: 40px;
}

/* When toggle is inside the utility bar, neutralize absolute positioning */
.tb-header-utility .theme-toggle,
.tb-header-utility .theme-toggle-astra {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    width: var(--utility-pill-w) !important;
    min-width: var(--utility-pill-w) !important;
    height: var(--utility-pill-h) !important;
    justify-content: center;
}

/* زبان: دکمه تریگر هم‌ابعاد با دکمه تم */
.tb-header-utility .tb-lang-trigger {
    width: var(--utility-pill-w);
    min-width: var(--utility-pill-w);
    height: var(--utility-pill-h);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1025px) {
    .tb-header-utility { top: 25px; right: 25px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .tb-header-utility { top: 15px; right: 15px; }
}

@media (max-width: 767px) {
    .tb-header-utility { top: 10px; right: 10px; gap: var(--spacing-xs); --utility-pill-w: 96px; --utility-pill-h: 36px; }
    .tb-lang-switcher a { padding: 0.25rem 0.4rem; font-size: 12px; }
}

/* Match look-and-feel with theme toggle */
.tb-lang-switcher a {
    background: var(--bg-overlay);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px var(--shadow-light);
}
.tb-lang-switcher li.is-current a {
    background: var(--bg-modal);
}

/* == Mobile header overlap fixes (do not affect desktop) =========== */
@media (max-width: 767.98px) {
    /* Reserve only necessary vertical space (avoid stacking paddings) */
    .ast-header-break-point .site-header,
    .ast-header-break-point .ast-mobile-header-wrap { padding-top: 0 !important; }
    .ast-header-break-point .ast-primary-header-bar { padding-top: 56px !important; }

    /* Pin utility group (or standalone buttons) to the top-right safely */
    .tb-header-utility {
        position: absolute !important;
        top: 10px !important;
        inset-inline-end: 10px !important;
        right: 10px !important; /* fallback for older browsers */
        z-index: 10000 !important;
    }

    /* In case the theme toggle is used without the utility wrapper */
    .theme-toggle-astra {
        position: absolute !important;
        top: 10px !important;
        inset-inline-end: 10px !important;
        right: 10px !important; /* fallback */
        z-index: 10000 !important;
    }

    /* Keep the language switcher next to the toggle without overlapping */
    .theme-toggle-astra + .tb-lang-switcher,
    .tb-header-utility .tb-lang-switcher {
        position: static !important;
    }

    /* Undo the previous logo shift on small screens to recenter it */
    .site-header .site-logo,
    .ast-logo-title-inline .site-logo,
    .custom-logo-link,
    .site-branding .custom-logo,
    .ast-site-header-cart .site-logo,
    .site-branding,
    .ast-site-identity {
        transform: none !important;
    }
}

/* == Fix Astra Mobile Menu for Dark/Light Mode ================= */
@media (max-width: 921px) {
    /* Override default Astra background for the entire menu content area */
    .ast-builder-menu-mobile .main-navigation .main-header-menu,
    .ast-mobile-popup-content {
        background-color: var(--bg-primary) !important;
    }

    /* Style individual menu links */
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
    .ast-mobile-popup-content .main-header-menu a {
        color: var(--text-primary) !important;
        background-color: transparent !important; /* Remove any item-specific background */
        text-shadow: none !important; /* Remove unwanted shadow */
    }

    /* Style the currently active menu item */
    .ast-builder-menu-mobile .main-navigation .main-header-menu .current-menu-item .menu-link,
    .ast-mobile-popup-content .main-header-menu .current-menu-item a {
        color: var(--link-color) !important;
        font-weight: bold;
    }

    /* Fix search input field styles */
    .ast-mobile-popup-drawer .search-field,
    .ast-mobile-popup-drawer input[type="search"] {
        background-color: var(--input-bg) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--input-border) !important;
        text-shadow: none !important;
    }

    .ast-mobile-popup-drawer .search-field::placeholder {
        color: var(--text-muted) !important;
    }

    /* Fix search button styles */
    .ast-mobile-popup-drawer .search-submit,
    .ast-mobile-popup-drawer button[type="submit"] {
        background: var(--button-bg) !important;
        color: var(--button-text) !important;
        text-shadow: none !important;
    }
}

/* == Mobile drawer search: dark/light friendly ==================== */
@media (max-width: 921px) {
    /* Reset container styles to avoid bright backgrounds/shadows */
    .ast-mobile-popup-drawer .wp-block-search,
    .ast-mobile-popup-drawer form.search-form {
        background: transparent !important;
        border: 0 !important;
        padding: 10px 12px !important;
        box-shadow: none !important;
    }

    /* Inner wrapper as the visual field */
    .ast-mobile-popup-drawer .wp-block-search .wp-block-search__inside-wrapper {
        background: var(--input-bg) !important;
        border: 1px solid var(--input-border) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    /* Text input */
    .ast-mobile-popup-drawer .wp-block-search__input,
    .ast-mobile-popup-drawer .search-field,
    .ast-mobile-popup-drawer input[type="search"] {
        background: transparent !important;
        color: var(--text-primary) !important;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 10px 12px !important;
        width: 100% !important;
        text-shadow: none !important;
    }

    .ast-mobile-popup-drawer .wp-block-search__input::placeholder,
    .ast-mobile-popup-drawer .search-field::placeholder,
    .ast-mobile-popup-drawer input[type="search"]::placeholder {
        color: var(--text-muted) !important;
        opacity: 1 !important;
    }

    /* Submit button */
    .ast-mobile-popup-drawer .wp-block-search__button,
    .ast-mobile-popup-drawer .search-submit,
    .ast-mobile-popup-drawer button[type="submit"] {
        background: var(--button-bg) !important;
        color: var(--button-text) !important;
        border: 0 !important;
        border-radius: 0 12px 12px 0 !important;
        padding: 10px 12px !important;
        height: 100% !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .ast-mobile-popup-drawer .wp-block-search__button:hover,
    .ast-mobile-popup-drawer .search-submit:hover,
    .ast-mobile-popup-drawer button[type="submit"]:hover {
        background: var(--button-hover) !important;
    }

    /* Remove bright focus rings within the drawer */
    .ast-mobile-popup-drawer .wp-block-search__input:focus,
    .ast-mobile-popup-drawer .search-field:focus,
    .ast-mobile-popup-drawer input[type="search"]:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}