/*
Theme Name: Academic Balochi
Theme URI: https://balochiacademy.ir/
Author: Balochi Academy of Sarbaz
Author URI: https://balochiacademy.ir/
Description: A premium, minimalist, and highly-optimized multilingual theme for the Balochi Academy. Supports customizable fonts for Arabic script (Persian/Balochi) and Latin script (English), responsive layouts, clean hamburger menu, dark/light mode toggle, dynamic header search bar, customizable footer links, social media integrations, bbPress forums, WooCommerce e-commerce support, and customizable footer details.
Version: 1.9.0
License: GNU GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: academic-balochi
Tags: right-to-left, translation-ready, dark-mode, custom-colors, custom-menu, custom-logo, post-thumbnails, threaded-comments, grid-layout, education, college, blog, sidebar
*/

/* ==========================================================================
   1. Typography & Global CSS Variables (Light Theme Default)
   ========================================================================== */
:root {
    --primary-color: #0f4c5c;     /* Deep Academic Teal */
    --primary-light: #1b6d82;
    --primary-dark: #082d37;
    --secondary-color: #d4a373;   /* Elegant Gold/Sand */
    --text-dark: #2c3e50;
    --text-muted: #64748b;
    --text-light: #ffffff;
    --bg-color: #fcfbfa;          /* Soft paper/parchment tone */
    --card-bg: #ffffff;
    --border-color: rgba(15, 76, 92, 0.08);
    
    /* Simplified Font Families (Set dynamically via customizer) */
    --font-arabic: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
    --font-latin: "Plus Jakarta Sans", sans-serif;
    
    /* Global Roundness & Shadows */
    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-sm: 6px;
    --shadow-subtle: 0 8px 30px rgba(15, 76, 92, 0.03);
    --shadow-hover: 0 15px 35px rgba(15, 76, 92, 0.1);
}

/* ==========================================================================
   2. Dark Mode CSS Variables Override
   ========================================================================== */
:root.dark-mode {
    --bg-color: #121824;          /* Dark Slate Page Background */
    --card-bg: #1e293b;           /* Lighter grey-blue for blocks */
    --text-dark: #f8fafc;         /* Bright text */
    --text-muted: #94a3b8;        /* Light grey muted text */
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-subtle: 0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   3. Global HTML & Body Resets & Absolute Font Override (Specificity Fix)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body {
    background-color: var(--bg-color);
    color: var(--text-dark);
    font-family: var(--font-arabic);
    font-size: 1rem;
    line-height: 1.8;
    overflow-x: hidden;
}

/* 
   قانون سخت‌گیرانه اورراید فونت (Font Specificity Override):
   تضمین می‌کند که فونت‌های انتخابی ادمین روی تمام تگ‌های جزیی (سربرگ‌ها، فرم‌ها، دکمه‌ها و جداول) 
   به طور کامل و بدون تداخل افزونه‌ها اعمال می‌شود.
*/
html[lang="fa"] body, html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4, html[lang="fa"] h5, html[lang="fa"] h6, html[lang="fa"] input, html[lang="fa"] button, html[lang="fa"] select, html[lang="fa"] textarea, html[lang="fa"] table, html[lang="fa"] th, html[lang="fa"] td,
html[lang="bc"] body, html[lang="bc"] h1, html[lang="bc"] h2, html[lang="bc"] h3, html[lang="bc"] h4, html[lang="bc"] h5, html[lang="bc"] h6, html[lang="bc"] input, html[lang="bc"] button, html[lang="bc"] select, html[lang="bc"] textarea, html[lang="bc"] table, html[lang="bc"] th, html[lang="bc"] td,
html[lang="ba"] body, html[lang="ba"] h1, html[lang="ba"] h2, html[lang="ba"] h3, html[lang="ba"] h4, html[lang="ba"] h5, html[lang="ba"] h6, html[lang="ba"] input, html[lang="ba"] button, html[lang="ba"] select, html[lang="ba"] textarea, html[lang="ba"] table, html[lang="ba"] th, html[lang="ba"] td,
body.rtl, body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6, body.rtl input, body.rtl button, body.rtl select, body.rtl textarea, body.rtl table, body.rtl th, body.rtl td,
.rtl, .rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6, .rtl input, .rtl button, .rtl select, .rtl textarea, .rtl table, .rtl th, .rtl td {
    font-family: var(--font-arabic) !important;
    direction: rtl;
}

html[lang="en"] body, html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6, html[lang="en"] input, html[lang="en"] button, html[lang="en"] select, html[lang="en"] textarea, html[lang="en"] table, html[lang="en"] th, html[lang="en"] td,
body.lang-en, body.lang-en h1, body.lang-en h2, body.lang-en h3, body.lang-en h4, body.lang-en h5, body.lang-en h6, body.lang-en input, body.lang-en button, body.lang-en select, body.lang-en textarea, body.lang-en table, body.lang-en th, body.lang-en td,
.lang-en, .lang-en h1, .lang-en h2, .lang-en h3, .lang-en h4, .lang-en h5, .lang-en h6, .lang-en input, .lang-en button, .lang-en select, .lang-en textarea, .lang-en table, .lang-en th, .lang-en td,
.ltr, .ltr h1, .ltr h2, .ltr h3, .ltr h4, .ltr h5, .ltr h6, .ltr input, .ltr button, .ltr select, .ltr textarea, .ltr table, .ltr th, .ltr td {
    font-family: var(--font-latin) !important;
    direction: ltr;
}

/* تنظیم ویژه برای بهینه‌سازی اندازه متون بلوچی در تگ امیری */
html[lang="bc"] body p, html[lang="bc"] .entry-content, .lang-bc p, .lang-bc .entry-content {
    font-size: 1.18rem;
    line-height: 1.9;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

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

/* ==========================================================================
   4. Sticky Header & Menu Styling
   ========================================================================== */
.site-header {
    background-color: var(--card-bg);
    border-bottom: 3px solid var(--secondary-color);
    box-shadow: var(--shadow-subtle);
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Minimalist logo wrapper */
.brand-section a.custom-logo-link,
.brand-section .custom-logo-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid var(--secondary-color) !important;
    background-color: var(--card-bg) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(15, 76, 92, 0.05);
    flex-shrink: 0;
}

.brand-section img.custom-logo,
.brand-section .brand-logo-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
}

.site-title-h1 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.3;
}

.site-title-h1 a {
    color: var(--primary-color);
}

.site-description-p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Main Navigation Menu */
.main-navigation {
    transition: all 0.3s ease;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 15px;
}

.main-navigation ul li a {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
    color: var(--primary-color);
    background-color: rgba(15, 76, 92, 0.04);
}

/* Header Action Controls */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Header Buttons styling */
.dark-mode-toggle-btn,
.header-search-toggle-btn,
.hamburger-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    background-color: rgba(15, 76, 92, 0.04);
}

.dark-mode-toggle-btn:hover,
.header-search-toggle-btn:hover,
.hamburger-toggle-btn:hover {
    background-color: rgba(15, 76, 92, 0.08);
}

.dark-mode-toggle-btn svg,
.header-search-toggle-btn svg,
.hamburger-toggle-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Sun/Moon visibility in dark mode toggles */
.dark-mode-toggle-btn .sun-icon { display: none; }
:root.dark-mode .dark-mode-toggle-btn .moon-icon { display: none; }
:root.dark-mode .dark-mode-toggle-btn .sun-icon { display: block; }

/* Dynamic Header Search Dropdown bar */
.header-search-dropdown {
    position: absolute;
    top: 100%;
    right: 24px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hover);
    padding: 15px;
    width: 320px;
    display: none;
    animation: slideDown 0.3s ease-out;
    z-index: 100;
}

html[lang="fa"] .header-search-dropdown, body.rtl .header-search-dropdown {
    right: auto;
    left: 24px;
}

.header-search-dropdown.active {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hamburger Sandwich Button styling - Hidden by default on large screens */
.hamburger-toggle-btn {
    display: none;
}

/* Hamburger line bars representation */
.hamburger-icon-bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
}

.hamburger-icon-bars span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    border-radius: 1px;
}

/* ==========================================================================
   4b. Always Hamburger Sandwich Menu Customizer Override Style
   ========================================================================== */
body.always-hamburger .hamburger-toggle-btn {
    display: flex !important;
}

body.always-hamburger .main-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    border-bottom: 2px solid var(--border-color);
    box-shadow: var(--shadow-hover);
    padding: 15px 24px;
    z-index: 99;
}

body.always-hamburger .main-navigation.active {
    display: block !important;
}

body.always-hamburger .main-navigation ul {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

body.always-hamburger .main-navigation ul li a {
    display: block;
    padding: 10px 15px;
}

/* ==========================================================================
   5. WordPress Theme Post Loop & Grid
   ========================================================================= */
.main-layout {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 40px;
}

/* Cards representing individual blog posts (List/Grid page) */
.post-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-subtle);
    padding: 30px;
    margin-bottom: 35px;
    position: relative;
    overflow: hidden;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(15, 76, 92, 0.12);
}

.post-thumbnail-wrapper {
    margin: -30px -30px 25px -30px;
    height: 250px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 76, 92, 0.04) 0%, rgba(212, 163, 115, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
}

.post-thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 
   قالب پیشرفته نمایش کامل تصاویر در تک‌نوشته و برگه‌ها (No-Crop Single Thumbnail)
*/
.single-post-thumbnail-wrapper {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: none !important;
    border: none !important;
    margin-bottom: 30px;
    display: block !important;
    text-align: center;
}

.single-post-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: inline-block !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--border-color);
}

.post-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}

.post-title h2, h1.entry-title {
    color: var(--primary-color);
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.post-title h2 a {
    color: var(--primary-color);
}

.post-title h2 a:hover {
    color: var(--secondary-color);
}

.post-excerpt {
    color: var(--text-muted);
    margin-bottom: 25px;
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--text-light) !important;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(15, 76, 92, 0.12);
}

.read-more-btn:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 76, 92, 0.2);
}

/* ==========================================================================
   6. Sidebar & Widget Styling
   ========================================================================== */
.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.widget {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 25px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-subtle);
}

.widget-title {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(15, 76, 92, 0.08);
    position: relative;
}

.widget-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    width: 50px;
    height: 2px;
    background-color: var(--secondary-color);
}

html[lang="fa"] .widget-title::after, body.rtl .widget-title::after { right: 0; left: auto; }
html[lang="en"] .widget-title::after, body.ltr .widget-title::after { left: 0; right: auto; }

.widget ul {
    list-style: none;
}

.widget ul li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
}

.widget ul li:last-child {
    border: none;
}

.widget ul li a {
    color: var(--text-dark);
    font-weight: 700;
}

.widget ul li a:hover {
    color: var(--primary-color);
}

/* ==========================================================================
   7. Form Controls
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
    width: 100%;
    padding: 10px 15px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    border-radius: var(--radius-md);
    outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.1);
}

input[type="submit"],
button[type="submit"] {
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    cursor: pointer;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--primary-light);
}

/* ==========================================================================
   8. Premium Academic Footer
   ========================================================================== */
.site-footer {
    background-color: var(--primary-dark);
    color: rgba(255, 255, 255, 0.7);
    border-top: 5px solid var(--secondary-color);
    padding: 50px 24px 30px 24px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 40px;
    margin-bottom: 30px;
}

.footer-widget-col h3 {
    color: var(--text-light);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-widget-col p {
    font-size: 0.95rem;
    line-height: 1.7;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
}

/* Social icons layout styles */
.footer-social-icons {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.footer-social-icons a.social-icon {
    color: rgba(255, 255, 255, 0.6) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.footer-social-icons a.social-icon:hover {
    color: var(--secondary-color) !important;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.footer-social-icons a.social-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ==========================================================================
   10. Typographical Elements & Gutenberg Core Blocks Styling (Academic-Grade)
   ========================================================================== */

/* لینک‌های خام و تنیِ داخل بدنه پست‌ها و برگه‌ها */
.entry-content a,
.post-excerpt a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1.5px dashed var(--secondary-color);
    padding-bottom: 1px;
    font-weight: 600;
}

.entry-content a:hover,
.post-excerpt a:hover {
    color: var(--primary-light);
    border-bottom-style: solid;
    border-bottom-color: var(--primary-color);
}

/* نقل‌قول‌های شیک دانشگاهی (Blockquotes) */
blockquote,
.wp-block-quote {
    background-color: rgba(15, 76, 92, 0.03);
    border-left: 4px solid var(--primary-color);
    padding: 20px 25px;
    margin: 25px 0;
    font-style: italic;
    color: var(--text-dark);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* تنظیم جهت حاشیه نقل قول بر اساس متن‌های راست‌چین */
html[lang="fa"] blockquote, html[lang="bc"] blockquote, html[lang="ba"] blockquote,
body.rtl blockquote, body.rtl .wp-block-quote {
    border-left: none;
    border-right: 4px solid var(--secondary-color);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

blockquote p,
.wp-block-quote p {
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* لیست‌های مرتب و نامرتب داخلی */
.entry-content ul,
.entry-content ol {
    margin: 20px 0;
    padding-left: 20px;
}

body.rtl .entry-content ul,
body.rtl .entry-content ol {
    padding-left: 0;
    padding-right: 20px;
}

.entry-content ul li,
.entry-content ol li {
    padding: 4px 0;
}

/* فرمت‌های کدنویسی و کپی‌های آماده */
code, pre {
    font-family: Consolas, Monaco, monospace;
    background-color: rgba(15, 76, 92, 0.05);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

/* ==========================================================================
   11. Ultra-Premium Academic & Database Tables (Breathtaking Modern Design)
   ========================================================================== */
.wp-block-table,
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 35px 0;
    box-shadow: 0 10px 30px rgba(15, 76, 92, 0.06) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(15, 76, 92, 0.1) !important;
    background-color: var(--card-bg) !important;
}

/* 
   قانون سخت‌گیرانه برای تضمین اجرای فونت‌های داینامیک انتخاب شده آکادمی روی کل اجزای جداول:
   این خط تضمین می‌کند جداول و خانه‌های آن ها از فونت بدنه ارث‌بری کامل داشته باشند.
*/
table,
.wp-block-table table,
table th,
table td,
.wp-block-table table th,
.wp-block-table table td {
    font-family: inherit !important;
}

table,
.wp-block-table table {
    width: 100%;
    border-collapse: separate !important; /* الزامی برای اعمال گوشه‌های گرد زیبا روی جدول */
    border-spacing: 0 !important;
    font-size: 0.95rem;
    overflow: hidden;
    border: none !important;
}

/* هدر لوکس جدول با گرادیان رنگی و خط زرین زیرین */
table th,
.wp-block-table table th {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    color: var(--text-light) !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 20px !important;
    border-bottom: 3px solid var(--secondary-color) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* سلول‌ها و داده‌های جدول */
table td,
.wp-block-table table td {
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(15, 76, 92, 0.05) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: var(--text-dark) !important;
    font-weight: 500;
}

/* حذف خط حاشیه ردیف آخر برای حفظ تمیزی کار */
table tr:last-child td,
.wp-block-table table tr:last-child td {
    border-bottom: none !important;
}

/* خطوط زبرا (راه راه ملایم کله‌غازی برای تمرکز بهتر چشم) */
table tr:nth-child(even) td,
.wp-block-table table tr:nth-child(even) td {
    background-color: rgba(15, 76, 92, 0.015) !important;
}

/* ردیف‌های تعاملی با افکت طلایی متحرک در سمت راست/چپ ردیف فعال */
table tr {
    position: relative;
}

table tr:hover td,
.wp-block-table table tr:hover td {
    background-color: rgba(212, 163, 115, 0.05) !important;
    color: var(--primary-color) !important;
}

/* ایجاد خط تزیینی عمودی متحرک طلایی در سمت چپ سلول اول هنگام هاور کردن ماوس */
table tr:hover td:first-child,
.wp-block-table table tr:hover td:first-child {
    border-left: 4px solid var(--secondary-color) !important;
    padding-left: 16px !important;
}

/* تراز چپ و راست خط طلایی متحرک بر اساس زبان راست‌چین سایت */
body.rtl table tr:hover td:first-child,
body.rtl .wp-block-table table tr:hover td:first-child {
    border-left: none !important;
    border-right: 4px solid var(--secondary-color) !important;
    padding-right: 16px !important;
    padding-left: 20px !important;
}

/* انطباق ۱۰۰٪ جداول فوق حرفه‌ای با حالت تاریک (Dark Mode) */
:root.dark-mode .wp-block-table,
:root.dark-mode .table-responsive {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

:root.dark-mode table tr:nth-child(even) td,
:root.dark-mode .wp-block-table table tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.01) !important;
}

:root.dark-mode table tr:hover td,
:root.dark-mode .wp-block-table table tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-light) !important;
}

:root.dark-mode table td,
:root.dark-mode .wp-block-table table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   12. WooCommerce E-Commerce Integration (Branded Styles)
   ========================================================================== */
.woocommerce span.onsale {
    background-color: var(--secondary-color) !important;
    color: var(--text-light) !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    padding: 4px 12px !important;
    font-size: 0.8rem !important;
}

.woocommerce ul.products li.product {
    background-color: var(--card-bg) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-color) !important;
    padding: 20px !important;
    box-shadow: var(--shadow-subtle) !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover) !important;
    border-color: rgba(15, 76, 92, 0.12) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--secondary-color) !important;
    font-weight: 800 !important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
    border-radius: 30px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(15, 76, 92, 0.15) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--secondary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(212, 163, 115, 0.25) !important;
}

/* ==========================================================================
   13. bbPress Forums Integration (Branded Styles)
   ========================================================================== */
#bbpress-forums .bbp-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    color: var(--text-light) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    border-bottom: 3px solid var(--secondary-color) !important;
    padding: 12px 18px !important;
}

#bbpress-forums li.bbp-header {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-topics {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background-color: var(--card-bg) !important;
    box-shadow: var(--shadow-subtle) !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
}

#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 15px 18px !important;
}

#bbpress-forums li.bbp-body ul:last-child {
    border-bottom: none !important;
}

#bbpress-forums .bbp-forum-title,
#bbpress-forums .bbp-topic-permalink {
    color: var(--primary-color) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
}

#bbpress-forums .bbp-forum-title:hover,
#bbpress-forums .bbp-topic-permalink:hover {
    color: var(--secondary-color) !important;
}

div.bbp-template-notice,
div.indicator-hint {
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(15, 76, 92, 0.1) !important;
    background-color: rgba(15, 76, 92, 0.03) !important;
}