/*!/wp-content/themes/studiare-child/style.css*//*
Theme Name:   Studiare Child (EconClinic)
Description:  Signature Edition - WCAG AA / RTL Safe / GPU Optimized
Template:     studiare
Version:      16.6.0 (Production)
Author: EconClinic Dev
*/


/* =====================================================
   0. DESIGN TOKENS
===================================================== */

:root{

--brand-primary:#07294d;
--brand-dark:#0A0830;
--brand-accent:#ffc600;
--brand-link:#3366FF;

--text-body:#333;
--text-light:#6b6c6d;

--bg-white:#fff;
--bg-light:#f9f9f9;

--border:#eaeaea;
--border-light:#f3f3f3;

--success:#00ab35;
--danger:#cc1818;

--shadow-soft:0 8px 20px rgba(0,0,0,.06);

/* منبع واحد حقیقت برای فونت — هماهنگ با functions.php (V10).
   نکته: برخلاف سرور ۱ عمداً با نسخه استاتیک شروع می‌شود (نه فونت متغیر
   تم پدر) تا دقیقاً همان دو فایل preload شده مصرف شوند و دانلود اضافه نداشته باشیم. */
--font-main:'IRANYekanXFaNum',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

/* بازتعریف متغیرهای تم/المنتور برای منو و عنوان‌ها (رفع iransansx) — از v15.1 سرور ۱ */
--font-family-title:var(--font-main);
--font-family-menu:var(--font-main);
--e-a-font-family:var(--font-main);

--header-btn-size:45px;
--header-spacing:8px;
--header-icon-size:20px;
--header-border-radius:10px;

--hamburger-line-height:2px;
--hamburger-line-width:20px;

}


/* =====================================================
   1. RESET + ACCESSIBILITY
===================================================== */

*,*::before,*::after{
box-sizing:border-box !important;
}

/* پوشش حالت RTL که تم با specificity بالاتر ست می‌کند — از v15.1 سرور ۱ */
:root .rtl{
--font-family-title:var(--font-main);
--font-family-menu:var(--font-main);
--e-a-font-family:var(--font-main);
}

html{
line-height:1.7;
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
}

body{
font-family:var(--font-main) !important;
background:var(--bg-white);
color:var(--text-body);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

::selection{
background:var(--brand-primary);
color:#fff;
}

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

a:hover{
color:var(--brand-primary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
outline:3px solid var(--brand-accent);
outline-offset:3px;
}

.search-icon {
    background: unset !important;
}

.search-form button {
    background: unset !important;
}


/* =====================================================
   2. TYPOGRAPHY
   نکته: این دو @font-face تنها تعریف معتبر IRANYekanXFaNum
   در کل سایت باید باشند. هیچ‌جای دیگر (از جمله انتهای همین فایل)
   نباید این نام بازتعریف شود، وگرنه فایل‌های woff2 زیر باطل می‌شوند.
===================================================== */

@font-face{font-family:'IRANYekanXFaNum';src:local('IRANYekanXFaNum'),
url('/wp-content/themes/studiare-child/assets/fonts/IRANYekanXFaNum-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}

@font-face{font-family:'IRANYekanXFaNum';src:local('IRANYekanXFaNum Bold'),
url('/wp-content/themes/studiare-child/assets/fonts/IRANYekanXFaNum-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}

h1,h2,h3,h4,h5,h6{
color:var(--brand-primary);
line-height:1.3;
font-weight:700;
margin-bottom:.8rem;
}

p{
line-height:1.9;
margin-bottom:1.5rem;
}


/* =====================================================
   2.5. FONT OVERRIDES (رفع فونت‌های زائد تم پدر) — از v15.1 سرور ۱
   هدف: IRANSansX کاملاً حذف شود؛ نسخه‌های قدیمی یکان
   (sc_iranyekan با .woff های legacy) دانلود نشوند.

   ⚠️ توجه: بازتعریف @font-face برای sc_iranyekan اینجا نیست —
   چون rtl-studiare-front.css ممکن است بعد از این فایل لود شود
   و آن را باطل کند. بازتعریف sc_iranyekan از طریق
   wp_add_inline_style در functions.php (بخش FONT GUARD — V10)
   انجام می‌شود تا همیشه در آبشار CSS برنده باشد.
===================================================== */

/* ویجت‌های Text Editor المنتور (منشأ IRANSansX) */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor div,
.elementor-widget-text-editor span,
.elementor-widget-text-editor li{
font-family:var(--font-main) !important;
}

/* عنوان‌ها و دکمه‌های المنتور (منشأ sc_iranyekan) */
.elementor-heading-title,
.elementor-button,
.elementor-button-text,
.elementor-button-content-wrapper,
.elementor-heading-title::before,
.elementor-heading-title::after,
.elementor-button::before,
.elementor-button::after{
font-family:var(--font-main) !important;
}

/* الیاس IRANSansX به فونت محلی (v16.1):
   نسخه قبلی با src:local بن‌بست بود و باعث fallback به فونت
   سیستم می‌شد. حالا هر خانواده به همان woff2 های محلیِ preload
   شده الیاس می‌شود — بدون هیچ دانلود اضافه‌ای.

   ⚠️ 'IRANYekanXFaNum' عمداً در این لیست نیست — بازتعریفش
   @font-face های واقعی بخش ۲ را باطل می‌کند. */

@font-face{font-family:'iransansx';src:url('/wp-content/themes/studiare-child/assets/fonts/IRANYekanXFaNum-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}

@font-face{font-family:'iransansx';src:url('/wp-content/themes/studiare-child/assets/fonts/IRANYekanXFaNum-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}

@font-face{font-family:'iransansxv';src:url('/wp-content/themes/studiare-child/assets/fonts/IRANYekanXFaNum-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}

@font-face{font-family:'iransansxv';src:url('/wp-content/themes/studiare-child/assets/fonts/IRANYekanXFaNum-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}

@font-face{font-family:'IRANSansX';src:url('/wp-content/themes/studiare-child/assets/fonts/IRANYekanXFaNum-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}

@font-face{font-family:'IRANSansX';src:url('/wp-content/themes/studiare-child/assets/fonts/IRANYekanXFaNum-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}

/* =====================================================
   3. COURSE CARD
===================================================== */

.course-item{
background:var(--bg-white);
border:1px solid var(--border-light);
border-radius:14px;
will-change:transform;
transition:transform .25s ease,box-shadow .25s ease;
}

@media(hover:hover){

.course-item:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-soft);
}

}

.course-price ins,
.course-price ins .amount{
color:var(--success);
font-weight:700;
text-decoration:none;
}

.course-price del,
.course-price del .amount{
color:var(--danger);
opacity:.75;
}


/* =====================================================
   4. BLOG CONTENT
===================================================== */

.blog-main-loop .entry-content{
font-size:1.05rem;
}

blockquote{
background:rgba(255,198,0,.12);
border-inline-start:4px solid var(--brand-primary);
padding:1.5rem;
border-radius:10px;
margin:2rem 0;
font-weight:600;
}

.entry-content iframe,
.elementor-widget-shortcode iframe{
width:100%;
aspect-ratio:16/9;
border-radius:16px;
box-shadow:var(--shadow-soft);
border:0;
}


/* =====================================================
   5. OWL CAROUSEL SAFE OVERRIDE
===================================================== */

.owl-carousel .studi_blog_card_img_block::before,
.owl-carousel .studi_blog_card_img_block::after,
.owl-carousel .studi_blog_card_img_block .studi_overlay,
.owl-carousel .studi_blog_card_img_block .overlay,
.owl-carousel .studi_blog_card_img_block .shape-divider,
.owl-carousel .studi_blog_card_img_block svg{
display:none !important;
}

.owl-carousel .studi_blog_card{

border-radius:14px;
overflow:hidden;
border:1px solid var(--border-light);
background:#fff;

will-change:transform;

transition:transform .25s ease,box-shadow .25s ease;

}

@media(hover:hover){

.owl-carousel .studi_blog_card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-soft);
}

}

.owl-carousel .studi_blog_card_img_block{
margin:0;
padding:0;
border-radius:14px 14px 0 0;
overflow:hidden;
}

.owl-carousel .studi_blog_card img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
display:block;
}

.owl-carousel .studi_blog_card_text_block{
padding:20px;
display:flex;
flex-direction:column;
text-align:start;
}

.owl-carousel .studi_blog_card_text_block h3{
font-size:1.1rem;
line-height:1.6;
margin-bottom:15px;
}


/* =====================================================
   6. HEADER & MENU
===================================================== */

.site-header .navigation-right{
display:flex;
align-items:center;
justify-content:flex-end;
height:100%;
}

.site-header .navigation-right .mobile-nav-toggle{
display:none;
}

/* -------------- اصلاح اصلی: اضافه شدن .search-toggle -------------- */

.site-header .navigation-right :is(
.search-form-opener,
.search-toggle,
.top-bar-cart a,
.header-button-link a
){
display:inline-flex;
align-items:center;
justify-content:center;

width:var(--header-btn-size);
height:var(--header-btn-size);

margin-inline-start:var(--header-spacing);

background:var(--brand-dark);
border-radius:var(--header-border-radius);

border:0;
padding:0;

transition:opacity .3s ease;
}

.site-header .navigation-right :is(
.search-form-opener,
.search-toggle,
.top-bar-cart a,
.header-button-link a
) :is(i,svg){

color:#20B2AA;
font-size:var(--header-icon-size);
fill:#20B2AA;

}

.site-header .header-button-link a{
font-size:0;
}

.site-header .header-button-link a span{
display:none;
}

.site-header .mobile-nav-toggle span,
.site-header .mobile-nav-toggle span::before,
.site-header .mobile-nav-toggle span::after{
display:block;
background:#20B2AA;
height:var(--hamburger-line-height);
width:var(--hamburger-line-width);
}

@media(max-width:1024px){

.site-header .navigation-right .mobile-nav-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:var(--header-btn-size);
height:var(--header-btn-size);
margin-inline-start:var(--header-spacing);
background:var(--brand-dark);
border-radius:var(--header-border-radius);
border:0;
padding:0;
transition:opacity .3s ease;
}

}

@media(min-width:1025px){

.site-header .navigation-right .mobile-nav-toggle{
display:none;
}

}

.site-header .navigation-right :is(
.search-form-opener,
.search-toggle,
.top-bar-cart a,
.header-button-link a
):hover{
opacity:.9;
}

.site-header .navigation-right .mobile-nav-toggle:hover{
opacity:.9;
}


/* =====================================================
   7. ELEMENTOR FORM ICON FIX
===================================================== */

.elementor-field-group{
position:relative;
}

.elementor-field-group::before{
font-family:"Font Awesome 5 Pro","Font Awesome 5 Free"; /* سایت نسخه Pro را لود می‌کند؛ Free برای سازگاری */
font-weight:900;

position:absolute;
top:50%;

inset-inline-end:15px;

transform:translateY(-50%);

color:#888;
font-size:14px;

pointer-events:none;

}

.elementor-field{
padding-inline-end:40px !important;
padding-inline-start:15px !important;
}

.elementor-field-group-name::before{content:"\f007";}
.elementor-field-group-email::before{content:"\f0e0";}
.elementor-field-group-tel::before{content:"\f095";}


/* =====================================================
   8. SIDEBAR
===================================================== */

.widget ul,
.sidebar_shop ul{
list-style:none;
margin:0;
padding:0;
}

.widget ul li{
border-bottom:1px solid var(--border-light);
}

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

.widget ul li a,
.sidebar_shop ul li a{

display:block;
padding:12px 5px;

color:var(--text-body);

transition:transform .2s ease,color .2s ease;

}

@media(hover:hover){

.widget ul li a:hover,
.sidebar_shop ul li a:hover{
color:var(--brand-primary);
transform:translateX(6px);
}

.rtl .widget ul li a:hover,
.rtl .sidebar_shop ul li a:hover{
transform:translateX(-6px);
}

}

.main-sidebar-holder .widget,
.dokan-store-widget{
margin-bottom:1rem;
}


/* =====================================================
   9. BUTTON ICON FIX
===================================================== */

.has-vorya-icon,
button:has(.vorya-icon),
.elementor-button:has(.vorya-icon),
.vorya-icon-container button{

background:#fff;
font-size:15px;
font-weight:700;

color:#000;

box-shadow:0 0 10px rgba(0,0,0,.1);
border-radius:7px;

margin-inline-start:20px;

border:0;
padding:.5em 1em;

}

.vorya-icon{
background:transparent;
}


/* =====================================================
   10. PERFORMANCE
===================================================== */

@media(prefers-reduced-motion:reduce){

*{
animation:none !important;
transition:none !important;
}

html{
scroll-behavior:auto;
}

}

.owl-carousel:not(.owl-loaded){

display:flex;
gap:20px;

min-height:250px;

overflow:hidden;

}


/* =====================================================
   11. PRINT
===================================================== */

@media print{

.header,
.footer,
.sidebar,
.btn-group-share{
display:none;
}

body{
background:#fff;
color:#000;
}

a{
color:#000;
text-decoration:underline;
}

a[href]::after{
content:" (" attr(href) ")";
font-size:.8em;
}

}


/* =====================================================
   12. ELEMENTOR COMMENT FIX
===================================================== */

.elementor-widget-theme-post-comments,
#comments.comments-area:not(.studi-comments-area),
.post-single>#comments:first-of-type{
display:none;
}

/* راه‌حل اصلاح شده با کلاس‌های صحیح از HTML صفحه شما */
.woocommerce .widget_product_categories .product-categories ul.children {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.woocommerce .widget_product_categories .product-categories ul.children li {
    width: 100% !important;
    padding-left: 15px !important;
    margin-bottom: 5px !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* تصحیح مارجین‌های اصلی صفحه (بخش سفید) */
.woocommerce .content-area {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.woocommerce .site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* استایل لایک/دیسلایک (v16.3): به‌طور کامل به خود افزونه
   vorya-like-dislide v3 منتقل شد تا تداخل دوطرفه حذف شود. */

/* =====================================================
   13. MOBILE PERF + CLS GUARDS
===================================================== */

/* Reserve icon box to prevent late SVG reflow. */
.e-font-icon-svg.e-eicon-chevron-right{
width:1em;
height:1em;
display:inline-block;
vertical-align:middle;
flex:0 0 1em;
}

/* Prevent expensive hover/transform pipelines on touch devices. */
@media (max-width:1024px){
.course-item,
.owl-carousel .studi_blog_card,
.widget ul li a,
.sidebar_shop ul li a{
transition:none !important;
transform:none !important;
}
}

/* =====================================================
   14. PRODUCT CATEGORY IMAGE ASPECT RATIO (CLS FIX)
===================================================== */

/* Reserve space for product category thumbnail images */
.woocommerce .product-category img,
.woocommerce ul.products .product-category a img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Ensure category thumbnail containers have consistent sizing */
.woocommerce .product-category a {
    display: block;
    position: relative;
    overflow: hidden;
}

/* Small thumbnails for sidebar widgets */
.woocommerce.widget_product_categories img {
    width: 60px;
    height: 40px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* =====================================================
   15. HIDE MOBILE BOTTOM NAV (زمانی که در تنظیمات قالب غیرفعال است)
===================================================== */

.sc-mobile-bottom-nav,
.mob_btm_searchbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* =====================================================
   16. COMMENT VOTES (لایک/دیس‌لایک) — از v15.1 سرور ۱
===================================================== */

/* اصلاح چیدمان و راست‌چین کردن باکس لایک/دیس‌لایک */
/* =====================================================
   رای دیدگاه‌های قالب (.studiare-comment-votes) — v16.4
   طراحی pill مدرن + شمارنده‌های همیشه‌نمایان و تیره
===================================================== */
.studiare-comment-votes {
    direction: rtl !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px !important;
    margin-top: 14px;
    font-family: inherit;
}

.studiare-comment-votes .title {
    font-size: 13px !important;
    color: #6b7280 !important;
    font-family: inherit;
}

.studiare-comment-vote-btn {
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    min-height: 34px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1 !important;
    box-shadow: 0 1px 2px rgba(20, 20, 63, .06) !important;
    transition: transform .18s ease, box-shadow .18s ease,
                border-color .18s ease, background-color .18s ease;
}

.studiare-comment-vote-btn:hover {
    background: #fafafa !important;
    border-color: #d1d5db !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(20, 20, 63, .10) !important;
}

.studiare-comment-vote-btn:focus-visible {
    outline: none;
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .35) !important;
}

.studiare-comment-vote-btn img,
.studiare-comment-vote-btn svg,
.studiare-comment-vote-btn i {
    width: 16px !important;
    height: 16px !important;
    fill: #6b7280 !important;
    color: #6b7280 !important;
    flex: 0 0 16px;
}

/* شمارنده رای — هر جا که قالب رندرش کند: داخل دکمه یا کنار آن.
   opacity/visibility عمداً فورس شده چون قالب شمارنده را تا قبل از
   رای مخفی می‌کرد و «دیده نمی‌شود» دقیقاً از همین‌جا بود. */
.studiare-comment-vote-btn span,
.studiare-comment-vote-btn b,
.studiare-comment-vote-btn .count,
.studiare-comment-votes [class*="count"],
.studiare-comment-votes .like-count,
.studiare-comment-votes .dislike-count {
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    min-width: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    text-indent: 0 !important;
}

/* حالت فعال — لایک */
.studiare-comment-vote-btn.like.active,
.studiare-comment-vote-btn.like:hover {
    background: #ecfdf3 !important;
    border-color: #86e3ac !important;
}
.studiare-comment-vote-btn.like.active svg,
.studiare-comment-vote-btn.like.active i,
.studiare-comment-vote-btn.like:hover svg,
.studiare-comment-vote-btn.like:hover i {
    fill: #16a34a !important;
    color: #16a34a !important;
}

/* حالت فعال — دیس‌لایک */
.studiare-comment-vote-btn.dislike.active,
.studiare-comment-vote-btn.dislike:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}
.studiare-comment-vote-btn.dislike.active svg,
.studiare-comment-vote-btn.dislike.active i,
.studiare-comment-vote-btn.dislike:hover svg,
.studiare-comment-vote-btn.dislike:hover i {
    fill: #dc2626 !important;
    color: #dc2626 !important;
}

/* =====================================================
   FIX: VIDEO PLAY ICON CENTERING (Desktop & Mobile)
===================================================== */
/* کلاس کانتینر تصویر دوره/ویدئو را در صورت نیاز با کلاس دقیق قالب جایگزین کنید */
.course-video-wrapper,
.woocommerce-product-gallery__image,
.studi_blog_card_img_block {
    position: relative !important;
    display: block !important;
}

/* استایل‌دهی آیکون پلی برای قرارگیری دقیق در مرکز */
.course-video-wrapper .play-btn,
.course-video-wrapper .studi-play-btn,
.video-play-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    margin: 0 !important;
}

/* =====================================================
   FIX: باکس ریسپانسیو آپارات (v16.5)
   دکمه پلیِ «جدا از تصویر» در دسکتاپ، خودِ پلیر آپارات داخل
   iframe بود که باکس ۱۶:۹ آن کلاپس شده و به یک نوار باریک زیر
   بنر تبدیل می‌شد. این بلاک ارتفاع را با aspect-ratio تثبیت
   می‌کند — مستقل از هر چیزی که باعث کلاپس شده باشد.
===================================================== */
.h_iframe-aparat_embed_frame {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.h_iframe-aparat_embed_frame > span {
    display: none !important;
}
.h_iframe-aparat_embed_frame iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* =====================================================
   FIX: دکمه پلی روی کاور صفحه محصول (v16.6)
   ریشه: CSS تم پدر موقعیت‌دهی دکمه را منوط به ancestor
   .course-single-gallery کرده، اما single_product-layout-04.php
   (قالب فعال سایت شما) این wrapper را ندارد — ۵ قالب دیگر تم
   دارند، فقط لایوت ۴ ندارد. این قانون همان رفتار تم پدر را بدون
   وابستگی به آن ancestor گمشده بازتولید می‌کند.
===================================================== */
.product-image-wrapper {
    position: relative;
}
.product-image-wrapper .video-button {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5;
}
.product-image-wrapper .video-button .cdb-video-icon {
    border: 0;
}