/* 🌟 تزریق اجباری فونت قالب به کل سیستم، دکمه‌ها و فرم‌ها (بدون خرابی آیکون‌ها) */
.vt-spa-wrapper, .vt-spa-wrapper *, .vt-modal-overlay, .vt-modal-overlay *, .vt-lightbox-overlay, .vt-lightbox-overlay * { font-family: inherit !important; }
.vt-spa-wrapper button, .vt-spa-wrapper input, .vt-spa-wrapper select, .vt-spa-wrapper textarea, .vt-modal-overlay button, .vt-modal-overlay input { font-family: inherit !important; }
.vt-spa-wrapper .dashicons, .vt-modal-overlay .dashicons { font-family: dashicons !important; }

.vt-spa-wrapper {
    background-color: transparent !important; /* حذف خاکستری و اعمال رنگ قالب شما */
    padding: 10px 0 !important;
}

/* ساختار شبکه ۳ باکسی هدر بالایی */
.vt-app-header-grid {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 15px;
    margin-bottom: 15px;
}

/* ساختار شبکه ۳ باکسی بدنه اصلی */
.vt-app-grid {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 15px;
    align-items: stretch;
}

/* مهندسی ۶ باکس تفکیک شده کاملاً سفید رنگ و مستقل */
.vt-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* سایه نرم و جذاب */
    border: 1px solid #f0f0f0;
    overflow: visible !important;
}

.vt-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #edf0f5;
}

.vt-history-btn {
    background: #f1f3f7; border: none; padding: 6px 12px;
    border-radius: 4px; font-size: 12px; font-weight: 600; color: #555;
    cursor: pointer; display: flex; align-items: center; gap: 5px; transition: 0.2s;
}
.vt-history-btn:hover, .vt-history-btn.active { background: #1e1e2d; color: #ffba00; }

.vt-search-box { padding: 12px 20px; position: relative; border-bottom: 1px solid #edf0f5; }
.vt-search-box input { width: 100%; padding: 10px 10px 10px 35px; border: 1px solid #dfe3e8; border-radius: 6px; font-size: 13px; }
.vt-search-icon { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); color: #a0aabf; font-size: 16px; }

/* تب‌های متای پایینی */
.vt-meta-tab-btn {
    background: none; border: none; padding: 10px 20px; font-size: 14px;
    font-weight: 700; color: #7e8299; cursor: pointer; transition: 0.2s;
}
.vt-meta-tab-btn.active { color: #1e1e2d; border-bottom: 2px solid #d49a2a; }

/* ستاره‌های امتیازدهی ستاره‌ای */
.vt-stars-row span { font-size: 18px; color: #cbd4e1; cursor: pointer; transition: 0.2s; }
.vt-stars-row span.filled { color: #ffba00; }

.vt-accordion-header { display: flex; justify-content: space-between; padding: 14px 20px; cursor: pointer; font-weight: 600; font-size: 14px; border-bottom: 1px solid #f9f9f9; }
.vt-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fcfcfc; }
/* محدود کردن ارتفاع لیست مدارک و فعال‌سازی کپسول اسکرول */
.vt-doc-list { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    max-height: 350px; /* 🔴 حداکثر ارتفاع: اگر مدارک از این حد بیشتر شد اسکرول می‌شود */
    overflow-y: auto;  /* 🔴 اسکرول عمودی خودکار */
}

/* ==========================================
   جادوی شخصی‌سازی اسکرول‌بار (Scrollbar UI)
   ========================================== */
/* عرض کلی نوار اسکرول */
.vt-doc-list::-webkit-scrollbar {
    width: 5px; 
}

/* مسیرِ زیرین اسکرول (Track) */
.vt-doc-list::-webkit-scrollbar-track {
    background: #f1f3f7; 
    border-radius: 4px;
}

/* خودِ دستگیره اسکرول (Thumb) */
.vt-doc-list::-webkit-scrollbar-thumb {
    background-color: #d49a2a; /* 🔴 رنگ طلایی اختصاصی شما */
    border-radius: 4px;
}

/* افکت هنگام بردن موس روی اسکرول‌بار */
.vt-doc-list::-webkit-scrollbar-thumb:hover {
    background-color: #1e1e2d; /* تغییر به رنگ سورمه‌ای قالب برای جذابیت بیشتر */
}
.vt-doc-item { padding: 12px 20px 12px 45px; border-bottom: 1px solid #f4f4f4; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 12px; }
.vt-doc-item:hover, .vt-doc-item.active { background: #fffbef; color: #d49a2a; border-right: 3px solid #d49a2a; }
.vt-flag { width: 24px; height: 18px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-radius: 2px; }

#vt-form-workspace { padding: 30px; min-height: 380px; display: flex; flex-direction: column; }
.vt-empty-state { text-align: center; color: #a0aabf; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.vt-preview-canvas { background: #f8f9fa; border: 1px dashed #cbd4e1; border-radius: 8px; min-height: 350px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; }
.vt-preview-canvas img { max-width: 100%; height: auto; }

/* سیستم پاپ‌آپ‌ها مودال */
.vt-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 99999; }
.vt-modal-card { background: #ffffff; padding: 35px; border-radius: 12px; width: 100%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.vt-modal-tabs { display: flex; border-bottom: 2px solid #edf0f5; margin-bottom: 25px; }
.vt-modal-tab-btn { flex: 1; background: none; border: none; padding: 12px; font-size: 15px; font-weight: 600; color: #999; cursor: pointer; }
.vt-modal-tab-btn.active { color: #1e1e2d; border-bottom: 2px solid #d49a2a; margin-bottom: -2px; }
.vt-modal-card input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #dfe3e8; border-radius: 6px; }
.vt-modal-submit-btn { width: 100%; background: #1e1e2d; color: #ffba00; padding: 14px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; margin-bottom: 10px; }
.vt-modal-cancel-btn { width: 100%; background: none; border: none; color: #7e8299; font-size: 13px; cursor: pointer; }

/* واکنش‌گرایی و هندل ریسپانسیو موبایل */
@media (max-width: 1024px) {
    .vt-app-header-grid, .vt-app-grid { grid-template-columns: 1fr !important; gap: 15px; }
    .vt-box-logo, .vt-box-title-node, .vt-box-wallet { text-align: center; justify-content: center !important; }
}

/* ==========================================
   سیستم Tooltip راهنمای فیلدها (علامت ؟)
   ========================================== */
.vt-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: #d49a2a; /* رنگ طلایی قالب شما */
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
    margin-left: 8px; /* فاصله از متن لیبل */
    cursor: help;
    position: relative;
    font-family: Arial, sans-serif;
}

.vt-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #1e1e2d; /* پس‌زمینه تیره هماهنگ با قالب */
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: normal;
    white-space: pre-wrap;
    min-width: 250px;
    max-width: 400px;
    text-align: center;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    pointer-events: none;
}

/* فلشِ کوچکِ پایینِ باکس */
.vt-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border-width: 7px;
    border-style: solid;
    border-color: #1e1e2d transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    pointer-events: none;
}

/* اجرای افکت پاپ‌آپ هنگامِ Hover */
.vt-tooltip:hover::after,
.vt-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}



/* ==========================================
   تراز کردن و کششِ محتوای داخلی ستون‌ها
   ========================================== */

/* تبدیل ستون فرم و ستون نتیجه به فلکس‌باکس */
.vt-main-area, 
.vt-result-area {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* کشیدنِ فضای فرم تا پایینِ باکس */
#vt-form-workspace {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* کشیدنِ باکسِ نقطه‌چینِ پیش‌نمایش (Result) تا پایین صفحه */
.vt-preview-canvas {
    flex-grow: 1; /* 🔴 این دستور باعث می‌شود باکس تا انتهای ستون کش بیاید */
    /* استایل‌های قبلی این کلاس سر جای خودشان می‌مانند */
    background: #f8f9fa; 
    border: 1px dashed #cbd4e1; 
    border-radius: 8px; 
    min-height: 350px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    cursor: zoom-in;
}


/* ==========================================
   گالری تصاویر محصول (Smart Image Gallery UI)
   ========================================== */
.vt-gallery-container {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding: 5px 2px 10px 2px;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
    /* استایل‌دهی مدرن به اسکرول‌بار افقی گالری */
    scrollbar-width: thin;
    scrollbar-color: #d49a2a transparent;
}
.vt-gallery-container::-webkit-scrollbar {
    height: 5px;
}
.vt-gallery-container::-webkit-scrollbar-track {
    background: transparent;
}
.vt-gallery-container::-webkit-scrollbar-thumb {
    background: #e4e6ef;
    border-radius: 4px;
}
.vt-gallery-container::-webkit-scrollbar-thumb:hover {
    background: #d49a2a;
}

.vt-gallery-thumb {
    width: 65px;
    height: 65px;
    min-width: 65px;
    object-fit: cover;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.vt-gallery-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.08);
}

.vt-gallery-thumb.active {
    opacity: 1;
    border-color: #d49a2a; /* رنگ طلایی قالب */
    box-shadow: 0 4px 15px rgba(212, 154, 42, 0.2);
    transform: translateY(-2px);
}

/* ==========================================
   🔴 Elementor Accordion SPA Fixes
   ========================================== */

/* ۱. ایجاد فاصله استاندارد بین آیتم‌های اکوردیون (دقیقاً مثل خود المنتور) */
.vt-meta-tab-content-node .elementor-accordion-item {
    margin-bottom: 12px !important;
}

/* ۲. در حالت عادی: آیکون باز (منها/بالا) مخفی باشد */
.vt-meta-tab-content-node .elementor-tab-title .elementor-accordion-icon-opened {
    display: none !important;
}

/* ۳. وقتی تب باز است: آیکون بسته (به‌علاوه/پایین) مخفی شود */
.vt-meta-tab-content-node .elementor-tab-title.elementor-active .elementor-accordion-icon-closed {
    display: none !important;
}

/* ۴. وقتی تب باز است: آیکون باز (منها/بالا) نمایش داده شود */
.vt-meta-tab-content-node .elementor-tab-title.elementor-active .elementor-accordion-icon-opened {
    display: inline-block !important;
}


/* ==========================================
   🔴 Elementor Accordion UI Overrides (Modern Look)
   ========================================== */

/* ۱. تنظیم عرض فیلدها به صورت تمام‌صفحه */
.vt-meta-tab-content-node .elementor-accordion {
    width: 100% !important;
    max-width: 100% !important;
}

/* ۲. استایل‌دهی به هر آیتم (فاصله و بک‌گراند زیرین) */
.vt-meta-tab-content-node .elementor-accordion-item {
    margin-bottom: 15px !important;
    border: none !important;
    border-radius: 8px !important; /* گرد کردن گوشه‌ها دور کل باکس */
    overflow: hidden !important; /* جلوگیری از بیرون زدن بک‌گراند از گوشه‌های گرد */
    box-shadow: none !important;
}

/* ۳. استایل‌دهی به تایتل (بک‌گراند، گوشه‌های گرد، و انتقال آیکون به راست) */
.vt-meta-tab-content-node .elementor-tab-title {
    background-color: #f4f5f7 !important; /* رنگ خاکستری روشن دقیقاً مثل عکس اول */
    padding: 18px 25px !important; /* افزایش ارتفاع و فضای تنفس فیلد */
    border: none !important;
    color: #333333 !important; /* رنگ متن تیره‌تر و خواناتر */
    font-weight: 700 !important;
    font-size: 15px !important;
    
    /* 🔴 جادوی فلکس‌باکس برای انتقال آیکون به سمت راست */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; 
}

/* جابجایی ترتیب قرارگیری آیکون و متن در المنتور */
.vt-meta-tab-content-node .elementor-tab-title .elementor-accordion-icon {
    order: 2 !important; /* هل دادن آیکون به آخر خط */
    margin-left: 15px !important;
    margin-right: 0 !important;
    color: #1e1e2d !important; /* رنگ تیره برای آیکون باز و بسته */
}

.vt-meta-tab-content-node .elementor-tab-title .elementor-accordion-title {
    order: 1 !important; /* قرار دادن متن در ابتدای خط */
    margin: 0 !important;
}

/* ۴. استایل‌دهی به باکسِ پاسخ (محتوای باز شده) */
.vt-meta-tab-content-node .elementor-tab-content {
    background-color: #ffffff !important; /* بک‌گراند سفید برای خوانایی متن طولانی */
    padding: 25px 25px 30px 25px !important;
    border: none !important;
    border-top: 1px solid #f0f0f0 !important; /* یک خط جداکننده محو بین سوال و جواب */
    color: #555555 !important;
    line-height: 1.8 !important; /* فاصله بین خطوط برای خوانایی بهتر */
    font-size: 14px !important;
}

/* حذف حاشیه‌های اضافی که خود المنتور می‌سازد */
.vt-meta-tab-content-node .elementor-accordion .elementor-accordion-item:first-child,
.vt-meta-tab-content-node .elementor-accordion .elementor-accordion-item:last-child {
    border: none !important;
}

/* ==========================================
   🔴 Astra & Theme Compatibility Fixes (Force Full Width)
   ========================================== */

/* ۱. باز کردنِ فنرِ کانتینرهای مخفیِ قالب آسترا و گرفتن ۱۰۰٪ عرض صفحه */
body.single-verif_template .site-content > div, 
body.tax-vt_category .site-content > div,
body.single-verif_template .ast-container, 
body.tax-vt_category .ast-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* ۲. قفل کردن عرض بومِ اپلیکیشن روی ۱۲۰۰ پیکسل (وسط‌چین) */
.vt-isolated-canvas,
.vt-spa-wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ۳. قفل کردنِ ستون وسط برای جلوگیری از مچاله شدن (Smart Grid) */
@media (min-width: 1025px) {
    .vt-app-header-grid,
    .vt-app-grid {
        width: 100% !important;
        display: grid !important;
        /* رازِ حل مشکل: استفاده از minmax(0, 1fr) باعث می‌شود ستون وسط دقیقاً فضای خالی را پر کند و مچاله نشود */
        grid-template-columns: 280px minmax(0, 1fr) 300px !important;
        gap: 15px !important;
        align-items: stretch !important;
    }
}

/* ۴. حفظ واکنش‌گرایی برای موبایل و تبلت */
@media (max-width: 1024px) {
    .vt-app-header-grid, 
    .vt-app-grid {
        grid-template-columns: 1fr !important;
    }
}