/**
 * Elementor Compatibility Styles - Sarv Studio
 * این فایل را در assets/css/ قرار دهید و در functions.php enqueue کنید
 * ──────────────────────────────────────────────────────────────────
 * هدف: اطمینان از اینکه ویجت‌های Elementor با طراحی قالب سرو هماهنگ هستند
 */

/* ══════════════════════════════════════════════════
   ۱. ریست پایه برای صفحات Elementor
   ══════════════════════════════════════════════════ */

.elementor-page-wrap {
    min-height: 60vh;
}

/* وقتی Elementor صفحه را مدیریت می‌کند، پدینگ اضافه نگیرد */
.elementor-page .site-main {
    padding: 0 !important;
}

/* حذف margin اضافه بین هدر و صفحه Elementor */
.elementor-page .page-hero {
    display: none;
}

/* ══════════════════════════════════════════════════
   ۲. هماهنگی Container المنتور با Container قالب
   ══════════════════════════════════════════════════ */

/* عرض container المنتور = عرض container قالب */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
}

/* اگر کاربر Container جدید المنتور (Flexbox) استفاده کرد */
.e-container {
    max-width: 1200px !important;
}

/* ══════════════════════════════════════════════════
   ۳. تطبیق Typography المنتور با قالب
   ══════════════════════════════════════════════════ */

.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget p {
    font-family: 'Vazirmatn', sans-serif !important;
    direction: rtl;
}

/* عناوین المنتور با استایل قالب */
.elementor-widget-heading .elementor-heading-title {
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════
   ۴. دکمه‌های المنتور — هماهنگ با دکمه‌های قالب
   ══════════════════════════════════════════════════ */

.elementor-button.elementor-button-sarv-primary,
.elementor-widget-button .elementor-button.sarv-btn {
    background: var(--color-primary, #F5C518);
    color: #111 !important;
    border: none;
    border-radius: 50px;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 700;
    padding: 12px 28px;
    transition: all 0.3s ease;
}

.elementor-button.elementor-button-sarv-primary:hover,
.elementor-widget-button .elementor-button.sarv-btn:hover {
    background: var(--color-primary-dark, #d4aa10);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 197, 24, 0.3);
}

/* دکمه outline سرو */
.elementor-widget-button .elementor-button.sarv-btn-outline {
    background: transparent;
    color: var(--color-text, #e0e0e0) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 600;
}

.elementor-widget-button .elementor-button.sarv-btn-outline:hover {
    border-color: var(--color-primary, #F5C518) !important;
    color: var(--color-primary, #F5C518) !important;
}

/* ══════════════════════════════════════════════════
   ۵. Section / Background المنتور
   ══════════════════════════════════════════════════ */

/* سکشن‌های تاریک با پس‌زمینه قالب */
.elementor-section.sarv-section-dark,
.elementor-container.sarv-section-dark {
    background-color: var(--color-dark, #0d0d0d);
    color: var(--color-text, #e0e0e0);
}

.elementor-section.sarv-section-dark-2 {
    background-color: var(--color-dark-2, #1a1a1a);
}

/* گلو اثر نور طلایی بالای سکشن */
.elementor-section.sarv-gold-glow::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 300px;
    background: radial-gradient(ellipse at 50% 0%, rgba(245, 197, 24, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════════════════
   ۶. Image Widget المنتور
   ══════════════════════════════════════════════════ */

.elementor-widget-image img {
    border-radius: var(--radius, 12px);
}

/* استایل تصویر با بوردر طلایی */
.elementor-widget-image.sarv-image-bordered img {
    border: 2px solid var(--color-primary, #F5C518);
    padding: 4px;
    background: var(--color-dark-2, #1a1a1a);
}

/* ══════════════════════════════════════════════════
   ۷. Divider Widget
   ══════════════════════════════════════════════════ */

.elementor-widget-divider.sarv-divider .elementor-divider-separator {
    border-color: var(--color-primary, #F5C518);
    border-width: 2px;
}

/* ══════════════════════════════════════════════════
   ۸. Icon Box و Icon List
   ══════════════════════════════════════════════════ */

.elementor-widget-icon-box.sarv-icon-box .elementor-icon {
    color: var(--color-primary, #F5C518);
    background: rgba(245, 197, 24, 0.1);
    border: 1px solid rgba(245, 197, 24, 0.2);
    border-radius: var(--radius, 12px);
    padding: 16px;
}

.elementor-widget-icon-list.sarv-icon-list .elementor-icon-list-icon i {
    color: var(--color-primary, #F5C518);
}

/* ══════════════════════════════════════════════════
   ۹. Testimonial / Review
   ══════════════════════════════════════════════════ */

.elementor-widget-testimonial .elementor-testimonial-content {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    text-align: right;
}

/* ══════════════════════════════════════════════════
   ۱۰. هماهنگی با حالت روشن قالب
   ══════════════════════════════════════════════════ */

body.light-mode .elementor-widget-heading .elementor-heading-title,
body.light-mode .elementor-widget-text-editor,
body.light-mode .elementor-widget p {
    color: #111;
}

body.light-mode .elementor-section.sarv-section-dark {
    background-color: #f5f5f5;
    color: #111;
}

/* ══════════════════════════════════════════════════
   ۱۱. Fullwidth Template — حذف padding هدر/فوتر
   ══════════════════════════════════════════════════ */

.elementor-fullwidth .elementor-section.elementor-section-full_width {
    padding-left: 0;
    padding-right: 0;
}

/* ══════════════════════════════════════════════════
   ۱۲. انیمیشن‌های ورودی
   ══════════════════════════════════════════════════ */

.elementor-invisible {
    visibility: hidden;
}

/* ══════════════════════════════════════════════════
   ۱۳. رسپانسیو
   ══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 960px;
    }
}

@media (max-width: 768px) {
    .elementor-section.elementor-section-boxed > .elementor-container,
    .e-container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}