/* ════════════════════════════════════════
   DARK MODE STYLES — v3.0 FIXED
   باگ اصلی: body background در دارک مود تغییر نمی‌کرد
   چون background روی html/body::before/after تعریف شده بود
   در functions-background.php — این فایل همه اونا رو override می‌کنه
   ════════════════════════════════════════ */

/* ══════════════════════════════════════════
   [FIX #1] BACKGROUND — اصلی‌ترین باگ
   body و html در دارک مود باید override بشن
   با !important چون functions-background.php
   inline style داره که priority بالاتره
   ══════════════════════════════════════════ */

.dark-mode,
.dark-mode body {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
    color: #f1f5f9 !important;
}

/* گرید پس‌زمینه در دارک مود */
.dark-mode body::before {
    background-image:
        linear-gradient(to right, rgba(96, 165, 250, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(96, 165, 250, .07) 1px, transparent 1px),
        linear-gradient(to right, rgba(164, 180, 0, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(164, 180, 0, .04) 1px, transparent 1px) !important;
    opacity: .6 !important;
}

/* نور محیطی در دارک مود */
.dark-mode body::after {
    background:
        radial-gradient(circle, rgba(96, 165, 250, .12), transparent 55%),
        radial-gradient(circle at 40% 60%, rgba(164, 180, 0, .07), transparent 60%) !important;
    filter: blur(90px) !important;
}

.dark-mode html::before {
    background: radial-gradient(circle, rgba(96, 165, 250, .09), transparent 65%) !important;
    filter: blur(100px) !important;
}

/* ══════════════════════════════════════════
   [FIX #2] CSS VARIABLES — دارک مود
   ══════════════════════════════════════════ */
.dark-mode {
    --fl-primary:             #60a5fa;
    --fl-primary-dark:        #3b82f6;
    --fl-accent:              #c4d600;
    --fl-accent-hover:        #a4b400;
    --fl-text:                #f1f5f9;
    --fl-text-light:          #94a3b8;
    --fl-white:               #0f172a;
    --fl-glass-bg:            rgba(30, 41, 59, 0.72);
    --fl-glass-border:        rgba(255, 255, 255, 0.10);
    --fl-glass-blur:          42px;
    --fl-shadow:              0 12px 40px rgba(0, 0, 0, 0.35);
    --bg-gradient-start:      #0f172a;
    --bg-gradient-end:        #1e293b;
    --text-dark:              #f1f5f9;
    --text-medium:            #cbd5e1;
    --text-light:             #94a3b8;
    --gs-text:                #f1f5f9;
    --gs-muted:               #94a3b8;
    --gs-glass:               rgba(30, 41, 59, 0.72);
    --gs-border:              rgba(255, 255, 255, 0.10);
    --gs-glass-hover:         rgba(30, 41, 59, 0.90);
    --blog-glass:             rgba(30, 41, 59, 0.72);
    --blog-glass-strong:      rgba(30, 41, 59, 0.90);
    --blog-glass-border:      rgba(255, 255, 255, 0.10);
}

/* ══════════════════════════════════════════
   DARK TOGGLE BUTTON
   ══════════════════════════════════════════ */
.fl-dark-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 9px;
    color: #fff;
    transition: background 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.fl-dark-toggle:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.08);
}

.fl-dark-icon-sun,
.fl-dark-icon-moon {
    position: absolute;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.fl-dark-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    width: 14px !important;
    height: 14px !important;
}

.fl-dark-icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    width: 14px !important;
    height: 14px !important;
}

.dark-mode .fl-dark-toggle {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.32) !important;
    color: #fbbf24;
}

.dark-mode .fl-dark-icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.dark-mode .fl-dark-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #fbbf24;
}

/* ══════════════════════════════════════════
   [FIX #3] HEADER
   ══════════════════════════════════════════ */
/* [TOP] حالت floating */
.dark-mode .fl-info {
    background: linear-gradient(135deg, rgba(10, 18, 35, 0.96), rgba(20, 35, 60, 0.93)) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
}

/* [STUCK] چسبیده به بالا — کمی تیره‌تر و opaque‌تر */
.dark-mode .fl-header-group.stuck .fl-info {
    background: linear-gradient(135deg, rgba(7, 14, 28, 0.99), rgba(15, 25, 48, 0.98)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 3px 24px rgba(0, 0, 0, 0.45) !important;
}

.dark-mode .fl-info-chip {
    color: #e2e8f0 !important;
}

.dark-mode .fl-info-chip svg {
    stroke: #e2e8f0 !important;
}

.dark-mode .fl-info-chip:hover {
    color: #c4d600 !important;
}

.dark-mode .fl-info-chip:hover svg {
    stroke: #c4d600 !important;
}

.dark-mode .fl-info-sep {
    background: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .fl-bar {
    background: rgba(12, 20, 38, 0.90) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(42px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(42px) saturate(1.5) !important;
}

/* [STUCK] bar در دارک مود */
.dark-mode .fl-header-group.stuck .fl-bar {
    background: rgba(10, 17, 32, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.40) !important;
}

.dark-mode .fl-logo-name,
.dark-mode .fl-logo-sub {
    color: #f1f5f9 !important;
}

.dark-mode .fl-nav-link {
    color: #e2e8f0 !important;
}

.dark-mode .fl-nav-link:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #f1f5f9 !important;
}

.dark-mode .fl-nav-link.active {
    background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important;
    color: #fff !important;
}

.dark-mode .fl-drop-link {
    color: #e2e8f0 !important;
}

.dark-mode .fl-drop-link:hover {
    color: #f1f5f9 !important;
}

.dark-mode .fl-submenu {
    background: rgba(15, 23, 42, 0.97) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .fl-submenu-link {
    color: #cbd5e1 !important;
}

.dark-mode .fl-submenu-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f1f5f9 !important;
}

.dark-mode .fl-search-pop {
    background: rgba(15, 23, 42, 0.97) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .fl-search-field {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-mode .fl-search-field input {
    color: #f1f5f9 !important;
    background: transparent !important;
}

.dark-mode .fl-search-field input::placeholder {
    color: #64748b !important;
}

.dark-mode .fl-icon-btn {
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .fl-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
}

.dark-mode .fl-nav-arr {
    stroke: #94a3b8 !important;
}

.dark-mode .fl-drop-arrow-btn {
    color: #94a3b8 !important;
}

/* Lang Dropdown */
.dark-mode .fl-lang-toggle {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

.dark-mode .fl-lang-drop {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode .fl-lang-drop-item {
    color: #e2e8f0 !important;
}

.dark-mode .fl-lang-drop-item:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #f1f5f9 !important;
}

.dark-mode .fl-lang-drop-slug {
    color: #64748b !important;
}

/* Drawer */
.dark-mode .fl-drawer {
    background: rgba(10, 17, 32, 0.99) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .fl-drawer-head {
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .fl-drawer-link,
.dark-mode .fl-drawer-acc-link {
    color: #e2e8f0 !important;
}

.dark-mode .fl-drawer-link:hover,
.dark-mode .fl-drawer-acc-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f1f5f9 !important;
}

.dark-mode .fl-drawer-link.active,
.dark-mode .fl-drawer-acc-link.active {
    background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important;
    color: #fff !important;
}

.dark-mode .fl-drawer-sub-link {
    color: #94a3b8 !important;
}

.dark-mode .fl-drawer-sub-link:hover {
    color: #f1f5f9 !important;
}

.dark-mode .fl-drawer-sep {
    background: rgba(255, 255, 255, 0.06) !important;
}

.dark-mode .fl-drawer-search {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-mode .fl-drawer-search input {
    color: #f1f5f9 !important;
    background: transparent !important;
}

.dark-mode .fl-drawer-search input::placeholder {
    color: #64748b !important;
}

.dark-mode .fl-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
}

/* Burger */
.dark-mode .fl-burger span {
    background: #e2e8f0 !important;
}

/* ══════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════ */
.dark-mode .fl-breadcrumb-inner {
    background: rgba(15, 23, 42, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

.dark-mode .fl-bc-item {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #94a3b8 !important;
}

.dark-mode a.fl-bc-item:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important;
    border-color: transparent !important;
}

.dark-mode .fl-bc-current {
    color: #fff !important;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}

.dark-mode .fl-bc-sep svg {
    stroke: #475569 !important;
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.dark-mode .fl-ft-bg {
    background:
        radial-gradient(circle at 20% 20%, rgba(96, 165, 250, .10) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, .15) 0%, transparent 50%),
        linear-gradient(180deg, #040d1a 0%, #0a1628 100%) !important;
    background-color: #040d1a !important;
}

.dark-mode .fl-ft-wave svg {
    fill: #040d1a !important;
}

.dark-mode .fl-ft-col {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.dark-mode .fl-ft-col:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-mode .fl-ft-col-title {
    color: #f1f5f9 !important;
}

.dark-mode .fl-ft-logo-name {
    color: #f1f5f9 !important;
}

.dark-mode .fl-ft-desc {
    color: #94a3b8 !important;
}

.dark-mode .fl-ft-social {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #cbd5e1 !important;
}

.dark-mode .fl-ft-link {
    color: #94a3b8 !important;
}

.dark-mode .fl-ft-link:hover {
    color: #60a5fa !important;
}

.dark-mode .fl-ft-link-dot {
    background: #475569 !important;
}

.dark-mode .fl-ft-contact-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}

.dark-mode .fl-ft-contact-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}

.dark-mode .fl-ft-bottom {
    background: rgba(0, 0, 0, 0.40) !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .fl-ft-copy {
    color: #475569 !important;
}

.dark-mode .fl-ft-back-top {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #e2e8f0 !important;
}

.dark-mode .fl-ft-back-top:hover {
    background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-hover)) !important;
    color: #000 !important;
}

/* ══════════════════════════════════════════
   FLOATING BUTTONS
   ══════════════════════════════════════════ */
.dark-mode #fl-fab-menu .fl-fab-item {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════
   BLOG ARCHIVE
   ══════════════════════════════════════════ */
.dark-mode .jeison-blog-archive {
    background: transparent !important;
}

.dark-mode .blog-hero-section {
    background: transparent !important;
}

.dark-mode .blog-hero-badge {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #94a3b8 !important;
}

.dark-mode .blog-hero-title,
.dark-mode .blog-hero-title * {
    color: #f1f5f9 !important;
}

.dark-mode .blog-hero-desc {
    color: #94a3b8 !important;
}

.dark-mode .blog-tags-list {
    background: rgba(15, 23, 42, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .blog-tag-item {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

.dark-mode .blog-tag-item:hover {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.30) !important;
    color: #60a5fa !important;
}

.dark-mode .blog-tag-item.active {
    background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important;
    color: #fff !important;
}

.dark-mode .blog-results-bar {
    background: rgba(15, 23, 42, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .blog-results-text {
    color: #94a3b8 !important;
}

.dark-mode .blog-view-toggle {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .blog-view-btn {
    color: #64748b !important;
}

.dark-mode .blog-view-btn.active {
    background: rgba(15, 23, 42, 0.95) !important;
    color: #f1f5f9 !important;
}

.dark-mode .blog-post-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .blog-post-card:hover {
    border-color: rgba(96, 165, 250, 0.25) !important;
    background: rgba(15, 23, 42, 0.90) !important;
}

.dark-mode .blog-post-title a {
    color: #f1f5f9 !important;
}

.dark-mode .blog-post-title a:hover {
    color: #60a5fa !important;
}

.dark-mode .blog-post-excerpt {
    color: #94a3b8 !important;
}

.dark-mode .blog-post-meta {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.dark-mode .blog-post-author-name,
.dark-mode .blog-post-cat-label,
.dark-mode .blog-post-date {
    color: #e2e8f0 !important;
}

.dark-mode .blog-post-readmore {
    background: rgba(96, 165, 250, 0.10) !important;
    border-color: rgba(96, 165, 250, 0.20) !important;
    color: #60a5fa !important;
}

.dark-mode .blog-post-readmore:hover {
    background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.dark-mode .blog-pagination-container {
    background: rgba(15, 23, 42, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .blog-pagination-num,
.dark-mode .blog-pagination-num a {
    color: #94a3b8 !important;
}

.dark-mode .blog-pagination-num:hover,
.dark-mode .blog-pagination-num a:hover {
    background: rgba(96, 165, 250, 0.10) !important;
    color: #60a5fa !important;
}

/* ══════════════════════════════════════════
   COMMENTS GLASS
   ══════════════════════════════════════════ */
.dark-mode .gc-section-badge {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #60a5fa !important;
}

.dark-mode .gc-section-head h2 {
    color: #f1f5f9 !important;
}

.dark-mode .gc-section-head p {
    color: #94a3b8 !important;
}

.dark-mode .gc-count span {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
}

.dark-mode .comment-body {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .gc-name {
    color: #f1f5f9 !important;
}

.dark-mode .gc-content p,
.dark-mode .gc-content {
    color: #e2e8f0 !important;
}

.dark-mode .gc-date,
.dark-mode .gc-date * {
    color: #64748b !important;
}

.dark-mode .comment-reply-link {
    background: rgba(196, 214, 0, 0.10) !important;
    border-color: rgba(196, 214, 0, 0.20) !important;
    color: #c4d600 !important;
}

.dark-mode .comment-reply-link:hover {
    background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-hover)) !important;
    color: #000 !important;
}

.dark-mode .gc-separator span {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #64748b !important;
}

.dark-mode .gc-form-title,
.dark-mode .gc-form-title * {
    color: #f1f5f9 !important;
}

.dark-mode .comment-form {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .comment-form label {
    color: #e2e8f0 !important;
}

.dark-mode .comment-form input,
.dark-mode .comment-form textarea {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
}

.dark-mode .comment-form input:focus,
.dark-mode .comment-form textarea:focus {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

.dark-mode .comment-form input::placeholder,
.dark-mode .comment-form textarea::placeholder {
    color: #475569 !important;
}

/* ══════════════════════════════════════════
   SEARCH PAGE
   ══════════════════════════════════════════ */
.dark-mode .gs-page {
    background: transparent !important;
}

.dark-mode .gs-page::before {
    background-image:
        linear-gradient(rgba(96, 165, 250, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 165, 250, 0.05) 1px, transparent 1px) !important;
}

.dark-mode .gs-hero {
    background: rgba(15, 23, 42, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .gs-hero__eyebrow {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #60a5fa !important;
}

.dark-mode .gs-hero__title {
    color: #f1f5f9 !important;
}

.dark-mode .gs-hero__title span {
    background: linear-gradient(135deg, #60a5fa, #c4d600) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.dark-mode .gs-hero__count {
    color: #94a3b8 !important;
}

.dark-mode .gs-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .gs-card__title {
    color: #f1f5f9 !important;
}

.dark-mode .gs-card__excerpt,
.dark-mode .gs-card__meta {
    color: #94a3b8 !important;
}

.dark-mode .gs-card__link:hover .gs-card__title {
    color: #60a5fa !important;
}

.dark-mode .gs-empty {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .gs-empty h2 {
    color: #f1f5f9 !important;
}

.dark-mode .gs-empty p {
    color: #94a3b8 !important;
}

.dark-mode .gs-pagination .page-numbers {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.dark-mode .gs-pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════ */
.dark-mode .flcp-hero {
    background: linear-gradient(135deg, rgba(10, 18, 35, 0.97), rgba(20, 35, 60, 0.94)) !important;
}

.dark-mode .flcp-card {
    background: rgba(15, 23, 42, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .flcp-card-title,
.dark-mode .flcp-card h3 {
    color: #f1f5f9 !important;
}

.dark-mode .flcp-phones a {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #e2e8f0 !important;
}

.dark-mode .flcp-address {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #e2e8f0 !important;
}

.dark-mode .flcp-email {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #e2e8f0 !important;
}

.dark-mode .flcp-form-section {
    background: rgba(15, 23, 42, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .flcp-form-header h2,
.dark-mode .flcp-form-header h3 {
    color: #f1f5f9 !important;
}

.dark-mode .flcp-form-header p {
    color: #94a3b8 !important;
}

.dark-mode .flcp-field label {
    color: #e2e8f0 !important;
}

.dark-mode .flcp-field input,
.dark-mode .flcp-field textarea,
.dark-mode .flcp-field select {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
}

.dark-mode .flcp-field input:focus,
.dark-mode .flcp-field textarea:focus,
.dark-mode .flcp-field select:focus {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

.dark-mode .flcp-field input::placeholder,
.dark-mode .flcp-field textarea::placeholder {
    color: #475569 !important;
}

.dark-mode .flcp-submit {
    background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important;
}

/* ══════════════════════════════════════════
   PORTFOLIO
   ══════════════════════════════════════════ */
.dark-mode .fl-pf-page {
    background: transparent !important;
}

.dark-mode .fl-pf-panel {
    background: rgba(15, 23, 42, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .fl-pf-title {
    color: #f1f5f9 !important;
    border-bottom-color: var(--fl-accent) !important;
}

.dark-mode .fl-pf-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .fl-pf-card:hover {
    border-color: rgba(96, 165, 250, 0.25) !important;
}

.dark-mode .fl-pf-card-title a {
    color: #f1f5f9 !important;
}

.dark-mode .fl-pf-card-title a:hover {
    color: #60a5fa !important;
}

.dark-mode .fl-pf-excerpt {
    color: #94a3b8 !important;
}

.dark-mode .fl-pf-meta-item {
    color: #64748b !important;
}

.dark-mode .fl-pf-more {
    background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-hover)) !important;
    color: #000 !important;
}

.dark-mode .fl-pf-pagi a {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.dark-mode .fl-pf-pagi a:hover {
    background: rgba(59, 130, 246, 0.80) !important;
    color: #fff !important;
}

.dark-mode .fl-pf-pagi .current {
    background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════
   ELEMENTOR COMPATIBILITY
   ══════════════════════════════════════════ */
.dark-mode .elementor-widget-heading .elementor-heading-title {
    color: #f1f5f9;
}

.dark-mode .elementor-widget-text-editor {
    color: #e2e8f0;
}

.dark-mode .elementor-icon-list-item a {
    color: #e2e8f0;
}

.dark-mode .elementor-icon-list-item a:hover {
    color: #60a5fa;
}

.dark-mode .elementor-section,
.dark-mode .e-con {
    color: inherit;
}

/* ══════════════════════════════════════════
   [FIX #4] GLOBAL TRANSITION
   فقط به عناصر مشخص اعمال می‌شه — نه همه چیز
   (transition روی همه چیز باعث lag می‌شه)
   ══════════════════════════════════════════ */
body,
.fl-bar,
.fl-info,
.fl-nav-link,
.fl-logo-name,
.fl-drawer,
.fl-ft-bg,
.fl-ft-col,
.fl-pf-card,
.blog-post-card,
.comment-body,
.gs-card,
.flcp-card,
.fl-bc-item,
.fl-lang-drop,
.fl-search-pop {
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.25s ease !important;
}

/* ══════════════════════════════════════════
   REDUCE MOTION
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .fl-dark-toggle,
    .fl-dark-icon-sun,
    .fl-dark-icon-moon,
    body,
    body * {
        transition: none !important;
        animation: none !important;
    }
}