/* Modern Product Page Styles - Only affects product pages */
body.single-product .modern-product-page {
    width: 100%;
    margin: 0;
    padding: 20px 80px;
    font-family: 'IRANYekan', sans-serif;
}

/* Breadcrumb */
.modern-product-breadcrumb {
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
}

.modern-product-breadcrumb a {
    color: #667eea;
    text-decoration: none;
}

.modern-product-breadcrumb a:hover {
    text-decoration: underline;
}

/* Product Title */
.modern-product-title {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Product Developer */
.modern-product-developer {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

.modern-product-developer i {
    margin-left: 8px;
    color: #667eea;
}

.modern-product-content {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* image a bit smaller than box */
    gap: 10px; /* فاصله دقیق بین عکس و باکس مستطیلی */
    align-items: stretch; /* هم‌ارتفاع شدن دو ستون */
    margin-bottom: 40px;
}

/* Product Gallery */
.modern-product-gallery {
    display: flex;
    flex-direction: column;
}

.modern-product-image-container {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.modern-product-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

/* Preview Buttons Row */
.modern-preview-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.modern-preview-btn,
.modern-gallery-btn {
    background: white;
    color: #666;
    border: 2px solid #e9ecef;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    min-width: 120px;
}

.modern-preview-btn:hover,
.modern-gallery-btn:hover {
    background: #f8f9fa;
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

/* Product Sidebar */
.modern-product-sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Product Details Box */
.modern-product-details-box {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.modern-product-name {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: right;
}

.modern-divider {
    height: 1px;
    background: #e9ecef;
    margin: 20px 0;
}

.modern-top-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.modern-seller-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modern-seller-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e9ecef;
}

.modern-seller-name {
    color: #4a5568; /* خاکستری تیره */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

.modern-seller-name:hover {
    color: #2d3748; /* خاکستری تیره‌تر */
    text-decoration: none; /* بدون خط زیر */
}

.modern-details-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.modern-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

.modern-detail-item i {
    font-size: 12px;
    flex-shrink: 0;
}


.modern-cart-btn {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border: none;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}

.modern-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
    color: white;
    text-decoration: none;
}

/* Original theme button states */
.modern-cart-btn.disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: none !important;
}

.modern-cart-btn.mlm-login-error {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

.modern-cart-btn:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: none !important;
}

.modern-preview-btn,
.modern-gallery-btn {
    background: white;
    color: #666;
    border: 2px solid #e9ecef;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modern-preview-btn:hover,
.modern-gallery-btn:hover {
    background: #f8f9fa;
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

/* Product Medals (row, next to seller) */
.modern-product-medals{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
}
.modern-medal-item{
    width:28px;
    height:28px;
    border-radius:50%;
    background:linear-gradient(135deg,#667eea,#764ba2);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:12px;
    box-shadow:0 2px 8px rgba(102,126,234,.3);
    transition:transform .2s ease, box-shadow .2s ease;
    margin:0;
    cursor:pointer;
    border:2px solid #fff;
}


.modern-medal-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    z-index: 10;
}

.modern-medal-item:last-child {
    margin-bottom: 0;
}

/* Rating Section */
.modern-rating-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modern-star-rating {
    display: flex;
    align-items: center;
}

.modern-sales-price-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.modern-sales-count {
    font-size: 12px;
    color: #666;
}

.modern-price-value {
    font-size: 18px;
    font-weight: 700;
    color: #e74c3c;
}

/* Action Buttons Row */
.modern-action-buttons-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.modern-action-buttons-row .modern-cart-btn,
.modern-action-buttons-row .modern-preview-btn,
.modern-action-buttons-row .modern-gallery-btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 15px;
    font-size: 14px;
}


/* Product Details Tabs */
.modern-product-details {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.modern-tabs-nav{
    display:flex;
    gap:16px;
    margin:0;                  /* دیگر فاصله زیرِ نوار نداریم */
    border:0;                  /* خط زیر را خودِ .modern-tabs-bar می‌کشد */
}

/* دکمه‌های تب: بدون پس‌زمینه؛ فقط خط زیر */
.modern-tab-btn{
    background:transparent !important;
    border:0;
    padding:14px 10px;
    font-size:16px;
    font-weight:700;
    color:#6b7280;
    cursor:pointer;
    border-radius:0;                 /* گردی برداشته شد */
    transition:color .2s ease;
    position:relative;
    display:flex; align-items:center; gap:8px;
}

/* خط نارنجی زیر تب (غیرفعال: مخفی) */
.modern-tab-btn::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom:-2px;                    /* دقیقاً روی خط خاکستری می‌نشیند */
    height:3px;
    background:#ff9800;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .2s ease;
    border-radius:2px;
}

/* هاور: فقط رنگ متن تیره‌تر شود؛ بدون پس‌زمینه */
.modern-tab-btn:hover{
    color:#111827;
}

/* فعال: متن پررنگ‌تر و خط نارنجی نمایان */
.modern-tab-btn.active{
    color:#111827;
}
.modern-tab-btn.active::after{
    transform:scaleX(1);
}

.modern-tab-content {
    display: none;
    line-height: 1.8;
    color: #555;
    font-size: 16px;
}

.modern-tab-content.active {
    display: block;
}

/* Gallery Modal */
.modern-gallery-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modern-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.modern-gallery-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.modern-gallery-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    z-index: 10001;
}

.modern-gallery-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.modern-gallery-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.modern-gallery-slide:first-child {
    display: block;
}

.modern-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.modern-gallery-prev,
.modern-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    z-index: 10001;
}

.modern-gallery-prev {
    left: -70px;
}

.modern-gallery-next {
    right: -70px;
}

.modern-gallery-prev:hover,
.modern-gallery-next:hover,
.modern-gallery-close:hover {
    background: rgba(255,255,255,0.3);
}

/* Related Products */
.modern-related-products {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.modern-related-title {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center;
}

.modern-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Style for related product items */
.modern-related-products .mlm-product {
    background: #f8f9fa;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.modern-related-products .mlm-product:hover {
    transform: translateY(-5px);
    color: inherit;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.modern-related-products .mlm-product .item-header {
    height: 150px;
    border-radius: 15px 15px 0 0;
}

.modern-related-products .mlm-product .item-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px 15px 0 0;
}

.modern-related-products .mlm-product .item-title {
    padding: 15px;
    background: white;
}

.modern-related-products .mlm-product .item-title h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.modern-related-products .mlm-product .item-title a {
    color: #2c3e50;
    text-decoration: none;
}

.modern-related-products .mlm-product .item-title a:hover {
    color: #667eea;
}

.modern-related-products .mlm-product .item-footer {
    padding: 15px;
    background: white;
    border-radius: 0 0 15px 15px;
}

.modern-related-products .mlm-product .item-meta {
    font-size: 12px;
    margin: 2px;
}

.modern-related-products .mlm-product .item-purchase {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
}

.modern-related-products .mlm-product .item-purchase:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    color: white;
}

/* Widget Area */
.modern-product-widgets {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-top: 30px;
}

.modern-product-widgets .widget {
    margin-bottom: 30px;
}

.modern-product-widgets .widget:last-child {
    margin-bottom: 0;
}

.modern-product-widgets .widget-title {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* Responsive Design */
@media (max-width: 768px) {
    body.single-product .modern-product-page {
        padding: 15px 40px;
    }

    .modern-product-title {
        font-size: 24px;
    }

    .modern-product-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .modern-product-image {
        height: 250px;
    }

    .modern-preview-buttons {
        flex-direction: column;
    }

    .modern-preview-btn,
    .modern-gallery-btn {
        min-width: auto;
    }

    .modern-top-section {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .modern-rating-section {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .modern-action-buttons-row {
        flex-direction: column;
    }

    .modern-action-buttons-row .modern-cart-btn,
    .modern-action-buttons-row .modern-preview-btn,
    .modern-action-buttons-row .modern-gallery-btn {
        flex: none;
        min-width: auto;
    }

    .modern-tabs-nav{
        display:flex;
        gap:8px;
        flex-wrap: nowrap;           /* جلوی شکستن را بگیر */
        overflow-x: auto;            /* اسکرول افقی */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* اسکرول نرم iOS */
        touch-action: pan-x;         /* درگ افقی در اولویت */
        overscroll-behavior-x: contain;
        min-width: 0;                /* اجازه جمع شدن ظرف */
        scrollbar-width: thin;       /* فایرفاکس: اسکرول‌بار نازک و قابل‌دیدن */
        scrollbar-color: #cbd5e1 #f1f3f7; /* thumb / track */
    }

    /* دکمه‌ها فشرده و بدون شکستن خط */
    .modern-tab-btn{
        flex: 0 0 auto;              /* اندازه ثابت؛ نکش */
        min-width: auto;
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 13px;
        line-height: 1.2;
    }

    .modern-gallery-prev {
        left: 10px;
    }

    .modern-gallery-next {
        right: 10px;
    }

    .modern-gallery-close {
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    .modern-product-title {
        font-size: 20px;
    }

    .modern-product-image {
        height: 200px;
    }

    .modern-price-value {
        font-size: 24px;
    }

    .modern-circular-cart-btn {
        width: 70px;
        height: 70px;
        font-size: 20px;
    }

    .modern-medal-item {
        width: 22px;
        height: 22px;
        font-size: 10px;
        margin-bottom: -6px;
    }
}
/* ====== Summary Grid (features + price meta) ====== */
.modern-product-details-box .modern-summary-grid{
    display:grid;
    grid-template-columns: 320px 1fr;
    gap:24px;
    align-items:start;
}
@media (max-width: 992px){
    .modern-product-details-box .modern-summary-grid{
        grid-template-columns: 1fr;
    }
}

/* Features panel */
.modern-features-panel{
    background:#fafafa;
    border:1px solid #f0f0f0;
    border-radius:14px;
    padding:16px 18px;
}
.modern-features-head{
    font-weight:700;
    color:#2c3e50;
    font-size:16px;
    margin-bottom:12px;
}

/* Price + Sales + Rating block */
.modern-price-meta{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.modern-price-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#fff7ee;
    border:1px solid #ffe3c7;
    border-radius:14px;
    padding:12px 16px;
}
.modern-price-wrap .new-price{
    font-size:28px;
    font-weight:800;
    color:#333;
    line-height:1;
}
.modern-price-wrap .old-price{
    text-decoration:line-through;
    font-size:14px;
    color:#b5b5b5;
}
.modern-price-wrap .currency-label{
    font-size:12px;
    color:#888;
}
.discount-badge{
    position:absolute;
    top:-10px;
    left:-10px;
    background:#ffb74d;
    color:#fff;
    font-weight:700;
    font-size:12px;
    padding:4px 8px;
    border-radius:10px;
    box-shadow:0 6px 16px rgba(255,183,77,.35);
}

/* Stats (sales + rating) */
.modern-meta-stats{
    display:flex;
    gap:28px;
    align-items:center;
    flex-wrap:wrap;
}
.stat-item{
    display:flex;
    align-items:center;
    gap:8px;
}
.stat-item.sales .stat-value{ font-weight:700; }
.stat-item .rating-text{
    font-size:13px;
    color:#666;
}
/* Fix RTL order: put features on the LEFT */
.modern-product-details-box .modern-summary-grid { direction: ltr; }
.modern-summary-grid > .modern-features-panel,
.modern-summary-grid > .modern-price-meta { direction: rtl; }
/* Middle features column */
.modern-features-column { align-self: start; }
.modern-features-panel{
    background:#fff;
    border:1px solid #eef0f4;
    border-radius:16px;
    padding:18px 20px;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.modern-features-head{
    font-weight:800;
    font-size:17px;
    color:#1f2937;
    margin-bottom:12px;
}

/* Countdown (sale) */
.deal-countdown{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#fff7e6;
    border:1px solid #ffe4bf;
    border-radius:12px;
    padding:8px 12px;
    margin-bottom:6px;
}
.deal-countdown .dc-label{
    font-weight:700;
    color:#ff9800;
    font-size:13px;
}
.deal-countdown .dc-time b{
    font-variant-numeric: tabular-nums;
    font-size:14px;
    color:#374151;
}
.deal-countdown.expired{ opacity:.6; }
/* ستون‌ها هم‌ارتفاع شوند */
.modern-product-gallery{ display:flex; flex-direction:column; }
.modern-product-image-container{ flex:1 1 auto; }
.modern-product-details-box{ height:100%; }

/* شمارش‌معکوس بالای عکس */
.deal-countdown--over-gallery{ align-self:flex-start; margin-bottom:8px; }

/* باکس مستطیلی: تقسیم 34% | 1px | 66% */
.modern-rect-split{ display:grid; grid-template-columns:34% 1px 66%; height:100%; }
.split-left-features{ padding:14px 16px; }
.split-vline{ background:#e9edf3; }
.split-right-info{ padding:14px 16px; }

/* ردیف افقی (ستاره | فروش | قیمت) */
.meta-three-cols{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; margin:12px 0 16px;
}
.meta-three-cols .meta-item{ display:flex; align-items:center; gap:8px; }
.meta-three-cols .meta-item.price .new-price{ font-weight:800; font-size:20px; }

/* دکمه‌ها کنار هم */
.modern-action-buttons-row{ display:flex; gap:12px; margin-top:auto; }

/* واکنش‌گرا */
@media (max-width: 992px){
    .modern-product-content{ grid-template-columns:1fr; gap:16px; }
    .modern-rect-split{ grid-template-columns:1fr; }
    .split-vline{ display:none; }
}
/* دکمه‌ها کفِ باکس */
.modern-action-buttons-row{
    display:flex; gap:12px; flex-wrap:wrap;
    margin-top: auto;              /* این خط دکمه‌ها را به پایین می‌چسباند */
}
/* ===== Price card (like sample screenshot) ===== */
.meta-three-cols .meta-item.price{
    display:flex;
    justify-content:flex-end; /* باکس قیمت سمت راست این ستون قرار بگیرد */
}

.price-card{
    position: relative;
    display: inline-flex;
    flex-direction: column;
    background: #fff3e6;            /* کرم روشن */
    border: 1px solid #ffe0c2;       /* حاشیه خیلی ملایم */
    border-radius: 14px 0 0 14px;
    padding: 12px 16px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(255,153,0,.12);
}

.price-card .old-price{
    text-decoration: line-through;
    color: #b6b6b6;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.price-card .new-price{
    font-weight: 800;
    font-size: 28px;                 /* بزرگ و خوانا */
    color: #2d2d2d;
    line-height: 1;
    font-variant-numeric: tabular-nums; /* اعداد هم‌عرض */
    letter-spacing: .5px;            /* کمی فاصله بین ارقام شبیه نمونه */
}

/* برچسب درصد تخفیف که روی گوشه باکس می‌نشیند */
/* ===== Price card (exact like sample) ===== */
.meta-three-cols .meta-item.price{
    display:flex;
    justify-content:flex-start;    /* باکس سمت چپ ستون قرار بگیره */
}

.price-card{
    position: relative;
    display: inline-grid;
    grid-template-rows: auto auto auto; /* old, new, currency */
    row-gap: 6px;
    background: #fff7ee;                  /* کرم روشن */
    border: 1px solid #ffe3c7;
    border-radius: 16px;
    padding: 12px 16px 14px;
    min-width: 190px;
    box-shadow: 0 10px 24px rgba(255,153,0,.10);
    text-align: left;                     /* همه چیز چپ‌چین */
    direction: ltr;                       /* اعداد هم‌راستای چپ */
}
.price-card *{ direction: ltr; }        /* اطمینان از جهت اعداد */

.price-card .old-price{
    text-decoration: line-through;
    color: #ba9f8b;
    font-size: 13px;
    line-height: 1;
    margin-bottom: 2px;
}

.price-card .new-price{
    font-weight: 800;
    font-size: 28px;
    color: #2d2d2d;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
}

.price-card .price-currency{
    margin-top: 2px;
    font-size: 12px;
    color: #b3b3b3;
    line-height: 1;
}

/* برچسب درصد: وسطِ لبه راست و نیمه‌اش بیرون از باکس */
.price-card .discount-badge{
    position: absolute;
    top: 50%;
    right: -12px;        /* بیرون بزنـد */
    left: auto;          /* مطمئن شو کش نمیاد */
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 8px;
    background: #ffa73a;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(255,167,58,.35);
}

/* هاله‌ی نارنجی زیر باکس برای چسبندگی به بدنه */
.price-card::after{
    content:"";
    position:absolute;
    inset: 6px 0 -6px 0;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(180deg, rgba(255,167,58,.08), rgba(255,167,58,0));
    pointer-events:none;
}

/* اگر راست‌به‌چپ هستی ولی می‌خوای چپ‌چین بمونه */
[dir="rtl"] .price-card{ text-align:left; }
/* چسباندن باکس قیمت به خط عمودی ستون چپ و یکپارچه‌کردن خط */
.meta-three-cols .meta-item.price .price-card{
    /* مقدار 16px باید برابر با padding-left ستون راست باشد */
    margin-left: -40px;              /* کارت را زیر padding ببَر تا به خط بچسبد */
    border-left-color: transparent;  /* خط چپ کارت حذف شود تا با split-vline یکی به نظر برسد */
}
/* ===== Deal banner over right box ===== */
.deal-banner{
    background: #fff7ee;
    border: 1px solid #ffe3c7;
    border-radius: 12px;
    padding: 10px 12px 12px;
    margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(255,153,0,.08);
}
.deal-banner-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 8px;
}
.deal-title{
    display:flex; align-items:center; gap:8px;
    color:#ff9800; font-weight:800; font-size:14px;
}
.deal-time b{
    font-variant-numeric: tabular-nums;
    font-weight:700; color:#374151; font-size:14px;
}

/* Draining progress line (خالی‌شونده) */
.deal-progress{
    position:relative;
    height:8px;
    border-radius:999px;
    overflow:hidden;
    background: linear-gradient(90deg,#ffb157,#ffa33f 55%,#ff8f2e);
}
.deal-progress-empty{
    position:absolute; inset:0 auto 0 0; /* از چپ بزرگ می‌شود */
    width:0%;
    background: #fff; opacity:.8;
}
.deal-banner.expired .deal-progress-empty{ width:100%; }
/* === Successful Sales (wreath style) === */
.meta-three-cols .meta-item.sales.sales-wreath{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 96px;         /* عرض معقول برای جاگیری عدد و متن */
    padding: 10px 6px;
    text-align: center;
}

.meta-three-cols .meta-item.sales.sales-wreath .sales-num{
    font-weight: 800;
    font-size: 28px;         /* عدد بزرگ مثل نمونه */
    line-height: 1;
    color: #2c3e50;
    font-variant-numeric: tabular-nums;
}

.meta-three-cols .meta-item.sales.sales-wreath .sales-caption{
    font-size: 12px;         /* متن کوچک پایین */
    color: #6b7280;
    line-height: 1.2;
}

/* واکنش‌گرا: عدد کمی کوچک‌تر شود */
@media (max-width: 480px){
    .meta-three-cols .meta-item.sales.sales-wreath .sales-num{ font-size: 24px; }
}
/* --- Sales wreath background as <img> --- */
.meta-three-cols .meta-item.sales.sales-wreath{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.meta-three-cols .meta-item.sales.sales-wreath .sales-num,
.meta-three-cols .meta-item.sales.sales-wreath .sales-caption{
    position: relative;
    z-index: 1; /* متن و عدد روی تصویر بمانند */
}

.meta-three-cols .meta-item.sales.sales-wreath .sales-wreath-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* کل ظرف را بدون کشیدگی پر کند */
    /* opacity: 1;  عمداً حذف شد چون گفتی خود SVG کم‌رنگ است */
    pointer-events: none;
    z-index: 0;            /* پشت متن/عدد */
}
/* === Medal stack: each medal in its own circle, overlapped neatly === */
.modern-product-medals,
.modern-medal-stack{
    display:flex;
    align-items:center;
    gap:0;                 /* فاصله صفر؛ روی‌هم می‌افتند */
}

.modern-product-medals .modern-medal-item,
.modern-medal-stack .modern-medal-item{
    width:36px;
    height:36px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg,#e8f7e8,#fff); /* پس‌زمینه لطیف؛ می‌تونی عوض کنی */
    border:2px solid #fff;                            /* رینگ سفید بین دایره‌ها */
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    margin-inline-start:-10px;                        /* نیمه‌روی‌هم */
    position:relative;
    z-index:1;                                        /* هر کدوم روی قبلی */
    color:#3b3b3b;
    font-size:16px;                                   /* اگر آیکون فونتیه */
}

/* اولین مدال فاصله منفی نداشته باشد */
.modern-product-medals .modern-medal-item:first-child,
.modern-medal-stack .modern-medal-item:first-child{
    margin-inline-start:0;
}

/* هاور: بالا بیاد و سایه پررنگ‌تر شود */
.modern-product-medals .modern-medal-item:hover,
.modern-medal-stack .modern-medal-item:hover{
    z-index:10;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* اگر خروجی مدال‌ها <img> یا <svg> هست، اندازه و چینش داخل دایره */
.modern-product-medals .modern-medal-item img,
.modern-medal-stack .modern-medal-item img,
.modern-product-medals .modern-medal-item svg,
.modern-medal-stack .modern-medal-item svg{
    width:18px; height:18px;
    display:block;
}
.modern-product-medals,
.modern-medal-stack{
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* --- Medals: reset <ul>/<li> and circle items overlapped --- */

/* 1) حذف بولت‌ها و چینش افقی UL */
.mlm-product-medals-widget ul,
.modern-product-medals ul,
.modern-medal-stack ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

/* 2) صفر کردن مارجین پیش‌فرض LI */
.mlm-product-medals-widget li{ margin: 0; padding: 0; }

/* 3) خود مدال: دایره، رینگ سفید، نیمه‌روی‌هم */
.mlm-product-medals-widget li.modern-medal-item,
.modern-product-medals .modern-medal-item,
.modern-medal-stack .modern-medal-item{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg,#e8f7e8,#fff);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: -10px;   /* نیمه‌روی‌هم */
    position: relative;
    z-index: 1;
}

/* اولین مدال فاصله منفی نداشته باشد */
.mlm-product-medals-widget li.modern-medal-item:first-child,
.modern-product-medals .modern-medal-item:first-child,
.modern-medal-stack .modern-medal-item:first-child{
    margin-inline-start: 0;
}

/* 4) اگر داخل LI لینک/آیکون هست، وسط‌چین و اندازه‌گذاری */
.mlm-product-medals-widget li.modern-medal-item > a,
.modern-product-medals .modern-medal-item > a,
.modern-medal-stack .modern-medal-item > a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
}

.mlm-product-medals-widget li.modern-medal-item img,
.mlm-product-medals-widget li.modern-medal-item svg,
.modern-product-medals .modern-medal-item img,
.modern-product-medals .modern-medal-item svg,
.modern-medal-stack .modern-medal-item img,
.modern-medal-stack .modern-medal-item svg{
    width: 18px; height: 18px; display: block;
}

/* هاور بهتر */
.mlm-product-medals-widget li.modern-medal-item:hover,
.modern-product-medals .modern-medal-item:hover,
.modern-medal-stack .modern-medal-item:hover{
    z-index: 10;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* پس‌زمینهٔ رَپر شفاف بماند (برای جلوگیری از بیضی) */
.mlm-product-medals-widget,
.modern-product-medals,
.modern-medal-stack{
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* ===== Product medals (UL from print_product_medals) ===== */
/* UL که کلاس سفارشی می‌گیرد (ما الان 'modern-medal-item' پاس می‌دهیم) */
.modern-product-medals .modern-medal-item{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;                  /* روی‌هم بیفتند */
}

/* LIهای بوت‌استرپی */
.modern-product-medals .modern-medal-item > li.nav-item{
    margin: 0;
    padding: 0;
    margin-inline-start: -10px;   /* نیمه‌روی‌هم */
    position: relative;
    z-index: 1;
}
.modern-product-medals .modern-medal-item > li.nav-item:first-child{
    margin-inline-start: 0;
}

/* خود مدال واقعی: span.product-medal + medal-KEY */
.modern-product-medals .modern-medal-item .product-medal{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;       /* رینگ سفید */
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    background-color: #fff;       /* بک سفید داخل دایره */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;   /* اندازه خود آیکون داخل دایره */
    padding: 0;                   /* padding های nav-link را خنثی کند */
}

/* هاور کمی بالا بیاید */
.modern-product-medals .modern-medal-item > li.nav-item:hover{
    z-index: 10;
    transform: translateY(-2px);
}

/* ===== آدرس آیکون‌های هر مدال =====
   اگر پوشه‌ات متفاوت است، فقط مسیر را اصلاح کن.
   مسیر پیشنهادی: /wp-content/themes/marketmlm/assets/img/medals/
*/
/* از css/ تا img/ یک سطح بالاتر می‌رویم ⇒ ../img/medals/ */
.product-medal.medal-featured{ background-image: url('../img/badges/featured.svg'); }
.product-medal.medal-free    { background-image: url('../img/badges/free.svg'); }
.product-medal.medal-license { background-image: url('../img/badges/license.svg'); }
.product-medal.medal-original{ background-image: url('../img/badges/original.svg'); }
.product-medal.medal-sale    { background-image: url('../img/badges/sale.svg'); }
.product-medal.medal-iran    { background-image: url('../img/badges/iran.svg'); }

/* Force square right corners on price card */
.meta-three-cols .meta-item.price .price-card{
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.meta-three-cols .meta-item.price .price-card::after{
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* اطمینان از اینکه چیزی روش را گرد نمی‌کند */
.meta-three-cols .meta-item.price{ overflow: visible !important; }
/* --- Medals: push to right edge, increase overlap, keep inside box --- */

/* ردیف بالایی باکس راست: فروشنده | مدال‌ها */
.split-right-info .modern-top-section{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* خود بلوک مدال‌ها برود چسبیده به سمت راست ردیف */
.split-right-info .modern-product-medals{
    margin-left: auto;          /* هل بده به سمت راست */
    margin-inline-end: 40px;   /* در RTL هم مطمئن شو */
    display: flex;
    align-items: center;
}

/* UL مدال‌ها (کلاسی که به print_product_medals می‌دهیم) */
.split-right-info .modern-product-medals .modern-medal-item{
    display: flex;
    align-items: center;
    gap: 0;
    padding-inline-start: 6px;  /* یک ذره حائل تا اولین مدال به لبه نچسبد */
}

/* هر LI یک مدال: روی‌هم‌افتادن بیشتر */
.split-right-info .modern-product-medals .modern-medal-item > li.nav-item{
    margin-inline-start: -16px; /* قبلاً -10px بود → بیشتر روی هم بیفتند */
    position: relative;
    z-index: 1;
}
.split-right-info .modern-product-medals .modern-medal-item > li.nav-item:first-child{
    margin-inline-start: 0;     /* اولین مدال منفی نداشته باشد */
}

/* خود دایره‌ی مدال (span.product-medal) همان قبلی، فقط اطمینان از اندازه */
.split-right-info .modern-product-medals .modern-medal-item .product-medal{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* ===== Vendor Popover (hover/click on seller name) ===== */

.vendor-has-popover{ position:relative; }

.modern-seller-info{ position:relative; display:flex; align-items:center; gap:12px; }
.modern-seller-trigger{
    display:flex; align-items:center; gap:10px;
    background:transparent; border:none; cursor:pointer; padding:0;
}
.modern-seller-trigger .modern-seller-name{
    color:#4a5568; /* خاکستری تیره */
    font-weight:700; 
    font-size:16px;
    text-decoration:none;
}
.modern-seller-trigger:hover .modern-seller-name{ 
    color:#2d3748; /* خاکستری تیره‌تر */
    text-decoration:none; /* بدون خط زیر */
}

/* خود پاپاور */
.vendor-popover{
    position:absolute;
    top: calc(100% + 10px);
    right: 0;                /* سمت راست باکس */
    width: 420px;
    background:#fff;
    border:1px solid #eef0f4;
    border-radius:16px;
    box-shadow:0 16px 40px rgba(15,23,42,.14);
    padding:14px;
    z-index: 50;
    display:none;            /* پیش‌فرض مخفی */
}
.vendor-popover::before{
    content:""; position:absolute; top:-8px; right:28px;
    width:16px; height:16px; background:#fff;
    border:1px solid #eef0f4; border-bottom:none; border-right:none;
    transform: rotate(45deg);
}

/* هدر کارت */
.vp-header{
    display:grid;
    grid-template-columns: 64px 1fr auto;
    gap:12px; align-items:center; margin-bottom:10px;
}
.vp-avatar img{ width:64px; height:64px; border-radius:50%; border:2px solid #eef0f4; }
.vp-name{ font-weight:800; color:#1f2937; }
.vp-tagline{ font-size:12px; color:#6b7280; margin-top:2px; }

/* مدال‌های فروشنده در هدر */
.vp-badges{ display:flex; align-items:center; gap:0; }
.vp-badges .modern-medal-stack{ gap:0; }
.vp-badges .modern-medal-stack .modern-medal-item{ margin-inline-start:-10px; }
.vp-badges .modern-medal-stack .modern-medal-item:first-child{ margin-inline-start:0; }

/* آمار سه‌ستونه با جداکنندهٔ نقطه‌چین */
.vp-stats{
    display:grid; grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items:center; margin:8px 0 12px;
}
.vp-stat{ text-align:center; }
.vp-stat-value{ font-weight:800; font-size:20px; color:#2c3e50; }
.vp-stat-label{ font-size:12px; color:#6b7280; }
.vp-sep{ width:1px; height:28px; background:linear-gradient(#e5e7eb,#f3f4f6); }

/* دکمه انتهایی */
.vp-actions{ display:flex; justify-content:flex-start; }
.vp-shop-btn{
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#667eea,#764ba2);
    color:#fff; padding:10px 14px; border-radius:10px;
    font-weight:700; text-decoration:none; box-shadow:0 8px 20px rgba(102,126,234,.25);
}
.vp-shop-btn:hover{ transform: translateY(-2px); color:#fff; }

/* نمایش/عدم‌نمایش */
.vendor-popover.is-open{ display:block; }

/* اگر فضای راست کم بود، با media query کمی جمع‌وجور شود */
@media (max-width: 480px){
    .vendor-popover{ width: 92vw; right: -6px; }
}
/* ===== Vendor medals (output of print_user_medals) ===== */

/* خود UL که از print_user_medals می‌آید (ما کلاس modern-medal-stack را پاس داده‌ایم) */
.modern-medal-stack{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;                /* برای هم‌پوشانی فاصله را صفر نگه می‌داریم */
}

/* هر LI یک مدال است؛ نیمه‌روی‌هم */
.modern-medal-stack > li{
    margin: 0;
    padding: 0;
    margin-inline-start: -14px; /* میزان هم‌پوشانی، اگر کم/زیاد خواستی عدد را عوض کن */
    position: relative;
    z-index: 1;
}
.modern-medal-stack > li:first-child{ margin-inline-start: 0; }

/* خود مدال واقعی که span.medal … است */
.modern-medal-stack .medal{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;           /* رینگ سفید بین دایره‌ها */
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center;
    background-size:18px 18px;
    padding: 0;
}

/* هاور بهتر */
.modern-medal-stack > li:hover{
    z-index: 10;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
/* تعریف تصاویر مدال‌ها برای همه حالت‌ها با !important */
.medal.medal-approved,
.vp-badge-item .medal.medal-approved,
.vp-badges-grid .medal.medal-approved    { background-image: url('../img/medals/medal-approved.svg') !important; }

.medal.medal-author,
.vp-badge-item .medal.medal-author,
.vp-badges-grid .medal.medal-author      { background-image: url('../img/medals/medal-author.svg') !important; }

.medal.medal-comments,
.vp-badge-item .medal.medal-comments,
.vp-badges-grid .medal.medal-comments    { background-image: url('../img/medals/medal-comments.svg') !important; }

.medal.medal-is-vendor,
.vp-badge-item .medal.medal-is-vendor,
.vp-badges-grid .medal.medal-is-vendor   { background-image: url('../img/medals/medal-is-vendor.svg') !important; }

.medal.medal-network-20,
.vp-badge-item .medal.medal-network-20,
.vp-badges-grid .medal.medal-network-20  { background-image: url('../img/medals/medal-network-20.svg') !important; }

.medal.medal-networker,
.vp-badge-item .medal.medal-networker,
.vp-badges-grid .medal.medal-networker   { background-image: url('../img/medals/medal-networker.svg') !important; }

.medal.medal-profile,
.vp-badge-item .medal.medal-profile,
.vp-badges-grid .medal.medal-profile     { background-image: url('../img/medals/medal-profile.svg') !important; }

.medal.medal-purchaser,
.vp-badge-item .medal.medal-purchaser,
.vp-badges-grid .medal.medal-purchaser   { background-image: url('../img/medals/medal-purchaser.svg') !important; }

.medal.medal-referrer,
.vp-badge-item .medal.medal-referrer,
.vp-badges-grid .medal.medal-referrer    { background-image: url('../img/medals/medal-referrer.svg') !important; }

.medal.medal-referrer-50,
.vp-badge-item .medal.medal-referrer-50,
.vp-badges-grid .medal.medal-referrer-50 { background-image: url('../img/medals/medal-referrer-50.svg') !important; }

.medal.medal-vendor,
.vp-badge-item .medal.medal-vendor,
.vp-badges-grid .medal.medal-vendor      { background-image: url('../img/medals/medal-vendor.svg') !important; }

.medal.medal-vendor-500,
.vp-badge-item .medal.medal-vendor-500,
.vp-badges-grid .medal.medal-vendor-500  { background-image: url('../img/medals/medal-vendor-500.svg') !important; }

.medal.medal-verified,
.vp-badge-item .medal.medal-verified,
.vp-badges-grid .medal.medal-verified    { background-image: url('../img/medals/medal-verified.svg') !important; }

.medal.medal-vip-product,
.vp-badge-item .medal.medal-vip-product,
.vp-badges-grid .medal.medal-vip-product { background-image: url('../img/medals/medal-vip-product.svg') !important; }

.medal.medal-withdraws,
.vp-badge-item .medal.medal-withdraws,
.vp-badges-grid .medal.medal-withdraws   { background-image: url('../img/medals/medal-withdraws.svg') !important; }
/* ===== Vendor medals grid (2 rows under stats) ===== */
.vp-badges-grid-wrap{ margin: 8px 0 12px; }

.vp-badges-grid{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 36px); /* 6 ستون دایره‌ای */
    grid-auto-rows: 36px;                   /* ارتفاع هر ردیف */
    gap: 10px 12px;                         /* فاصله عمودی/افقی */
    justify-content: start;
}

/* هر LI یک خانه؛ بدون هم‌پوشانی */
.vp-badges-grid > li{ margin:0; padding:0; }

/* خود مدالِ span (دایره) */
.vp-badges-grid .medal{
    display:inline-flex; 
    align-items:center; 
    justify-content:center;
    width:36px; 
    height:36px; 
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    /* Background properties - تصویر بعداً با کلاس‌های خاص اضافه می‌شه */
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center;
    background-size:18px 18px;
}


/* تعریف تصاویر مدال‌ها برای .vp-badges-grid - باید بعد از تعریف کلاس باشه */
/* مدال‌های واقعی از کد PHP */
.vp-badges-grid .medal.medal-vendor          { background-image: url('../img/medals/medal-vendor.svg') !important; }
.vp-badges-grid .medal.medal-subset-income   { background-image: url('../img/medals/medal-networker.svg') !important; }
.vp-badges-grid .medal.medal-sale-income     { background-image: url('../img/medals/medal-vendor-500.svg') !important; }
.vp-badges-grid .medal.medal-ref-income      { background-image: url('../img/medals/medal-referrer-50.svg') !important; }
.vp-badges-grid .medal.medal-valid-ref       { background-image: url('../img/medals/medal-referrer.svg') !important; }
.vp-badges-grid .medal.medal-valid-post      { background-image: url('../img/medals/medal-author.svg') !important; }
.vp-badges-grid .medal.medal-valid-product   { background-image: url('../img/medals/medal-vip-product.svg') !important; }
.vp-badges-grid .medal.medal-valid-subset    { background-image: url('../img/medals/medal-network-20.svg') !important; }
.vp-badges-grid .medal.medal-valid-purchase  { background-image: url('../img/medals/medal-purchaser.svg') !important; }
.vp-badges-grid .medal.medal-valid-withdraw  { background-image: url('../img/medals/medal-withdraws.svg') !important; }
.vp-badges-grid .medal.medal-valid-comment   { background-image: url('../img/medals/medal-comments.svg') !important; }
.vp-badges-grid .medal.medal-vip-product     { background-image: url('../img/medals/medal-vip-product.svg') !important; }
.vp-badges-grid .medal.medal-profile-ok      { background-image: url('../img/medals/medal-profile.svg') !important; }
.vp-badges-grid .medal.medal-account-ok      { background-image: url('../img/medals/medal-verified.svg') !important; }

/* ریسپانسیو: اگر عرض کم شد، ستون‌ها کمتر شوند */
@media (max-width: 480px){
    .vp-badges-grid{ grid-template-columns: repeat(5, 36px); }
}
/* === Vendor medals with labels (icon + text) === */
.vp-badges-grid.with-labels{
    grid-template-columns: repeat(2, minmax(180px, 1fr)); /* دو ستون، هر کدام جا برای آیکون+متن */
    grid-auto-rows: auto;
    gap: 10px 16px;
}

.vp-badge-item{
    display: grid;
    grid-template-columns: 36px 1fr;  /* آیکون 36px + متن */
    align-items: center;
    gap: 10px;
    min-height: 36px;
}

.vp-badge-item .medal{
    display: inline-block; /* تغییر به inline-block برای نمایش بهتر background */
    width: 36px; 
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    /* Background properties */
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center;
    background-size:18px 18px;
    flex-shrink: 0; /* جلوگیری از کوچک شدن */
}

.vp-badge-item .medal-label{
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* تعریف تصاویر مدال‌ها - باید بعد از .vp-badge-item .medal باشه تا override بشه */
/* مدال‌های واقعی از کد PHP */
.vp-badge-item .medal.medal-vendor          { background-image: url('../img/medals/medal-vendor.svg') !important; }
.vp-badge-item .medal.medal-subset-income   { background-image: url('../img/medals/medal-networker.svg') !important; }
.vp-badge-item .medal.medal-sale-income     { background-image: url('../img/medals/medal-vendor-500.svg') !important; }
.vp-badge-item .medal.medal-ref-income      { background-image: url('../img/medals/medal-referrer-50.svg') !important; }
.vp-badge-item .medal.medal-valid-ref       { background-image: url('../img/medals/medal-referrer.svg') !important; }
.vp-badge-item .medal.medal-valid-post      { background-image: url('../img/medals/medal-author.svg') !important; }
.vp-badge-item .medal.medal-valid-product   { background-image: url('../img/medals/medal-vip-product.svg') !important; }
.vp-badge-item .medal.medal-valid-subset    { background-image: url('../img/medals/medal-network-20.svg') !important; }
.vp-badge-item .medal.medal-valid-purchase  { background-image: url('../img/medals/medal-purchaser.svg') !important; }
.vp-badge-item .medal.medal-valid-withdraw  { background-image: url('../img/medals/medal-withdraws.svg') !important; }
.vp-badge-item .medal.medal-valid-comment   { background-image: url('../img/medals/medal-comments.svg') !important; }
.vp-badge-item .medal.medal-vip-product     { background-image: url('../img/medals/medal-vip-product.svg') !important; }
.vp-badge-item .medal.medal-profile-ok      { background-image: url('../img/medals/medal-profile.svg') !important; }
.vp-badge-item .medal.medal-account-ok      { background-image: url('../img/medals/medal-verified.svg') !important; }

/* موبایل: ستون‌ها یکی */
@media (max-width: 480px){
    .vp-badges-grid.with-labels{ grid-template-columns: 1fr; }
}
/* Second custom button (زیر تصویر کنار گالری) */
.modern-second-btn{
    background: white;
    color: #666;
    border: 2px solid #e9ecef;
    padding: 12px 20px;
    border-radius: 12px;          /* گردی کمتر مثل بقیه */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    min-width: 120px;
}
.modern-second-btn:hover{
    background: #f8f9fa;
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

/* دکمه‌های ردیف زیر تصویر به صورت ستونیِ مساوی تقسیم شوند */
.modern-preview-buttons .modern-preview-btn,
.modern-preview-buttons .modern-gallery-btn,
.modern-preview-buttons .modern-second-btn{
    flex: 1;
}
/* === Variation Modal === */
.variation-modal{
    display:none; position:fixed; inset:0;
    background: rgba(0,0,0,.85);
    z-index: 10000;
    align-items: center; justify-content: center;
}
.variation-overlay{ position:absolute; inset:0; cursor:pointer; }
.variation-box{
    position: relative; z-index: 1;
    width: min(720px, 92vw);
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(15,23,42,.25);
    padding: 18px 18px 20px;
}
.variation-close{
    position:absolute; top:10px; inset-inline-end:10px;
    width:36px; height:36px; border-radius:50%;
    border:none; background: rgba(0,0,0,.06); color:#111; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; /* برای <a> لازم است */
    text-decoration:none;
}
.variation-close:hover{ background: rgba(0,0,0,.1); }

.variation-title{ font-weight:800; font-size:18px; color:#111827; margin: 0 0 12px; }

/* فرم اتریبیوت‌ها */
.variation-form{ display:flex; flex-direction: column; gap:14px; }
.variation-attributes{
    display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px;
}
@media (max-width: 560px){ .variation-attributes{ grid-template-columns: 1fr; } }
.variation-attr label{ display:block; font-weight:700; color:#374151; font-size:13px; margin-bottom:6px; }
.variation-attr select{
    width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px;
    background:#fff; font-size:14px; color:#374151;
}

/* نمایش قیمت وارییشن */
.variation-price{
    display:flex; align-items:baseline; gap:10px;
    background:#fff7ee; border:1px solid #ffe3c7; border-radius:12px;
    padding:10px 12px;
}
.variation-price .vp-old{
    text-decoration: line-through; color:#ba9f8b; font-size:13px;
}
.variation-price .vp-new{
    font-weight:800; font-size:26px; color:#2d2d2d; line-height:1;
    font-variant-numeric: tabular-nums;
}
.variation-price .vp-currency{
    font-size:12px; color:#b3b3b3;
}

/* تایمر و Progress مخصوص وارییشن */
.variation-deal{
    background:#fff7ee; border:1px solid #ffe3c7; border-radius:12px;
    padding:8px 10px; box-shadow: 0 6px 18px rgba(255,153,0,.08);
}
.variation-deal-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.variation-deal-title{ display:flex; align-items:center; gap:8px; color:#ff9800; font-weight:800; font-size:14px; }
.variation-deal-time b{ font-variant-numeric:tabular-nums; font-weight:700; color:#374151; font-size:14px; }

.variation-progress{
    position:relative; height:8px; border-radius:999px; overflow:hidden;
    background: linear-gradient(90deg,#ffb157,#ffa33f 55%,#ff8f2e);
}
.variation-progress-empty{
    position:absolute; inset:0 auto 0 0; width:0%; background:#fff; opacity:.8;
}

/* دکمه‌ها */
.variation-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px; }
/* === Variation Modal : open via :target (no-JS fallback) === */
.variation-modal:target{
    display: flex !important;
}
/* دکمه داخل فرم هم مثل بقیه تمام‌عرضِ ستون شود */
.modern-action-buttons-row form.cart{ flex:1; }
.modern-action-buttons-row form.cart .modern-cart-btn{ width:100%; }
/* فرم دکمه‌‌ی خرید در ردیف عملیات، مثل یک آیتم فلکس رفتار کند */
.modern-action-buttons-row form.cart{
    display: flex;
    flex: 1 1 auto;
    margin: 0;           /* هر مارجین پیش‌فرض قالب/بوت‌استرپ خنثی شود */
}

/* خود دکمه داخل فرم، تمام‌عرض و هم‌قد با بقیه */
.modern-action-buttons-row form.cart .modern-cart-btn{
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    line-height: 1;
}

/* جلوگیری از درهم‌ریختگی ارتفاع دکمه نسبت به همسایه‌ها */
.modern-action-buttons-row .modern-cart-btn,
.modern-action-buttons-row .modern-preview-btn,
.modern-action-buttons-row .modern-gallery-btn{
    min-height: 44px;
}
/* حذف خط آبیِ فوکِس و یکدست‌سازی گردی */
.modern-cart-btn{
    border-radius:10px;               /* گوشه‌ها 10px */
    outline:none;
}
.modern-cart-btn:focus,
.modern-cart-btn:focus-visible,
.modern-cart-btn:active{
    outline:none !important;
    box-shadow:none !important;
}

/* نسخه داخل مودال هم همین رفتار را داشته باشد */
.variation-actions .modern-cart-btn{
    border-radius:10px;
    outline:none;
}
.variation-actions .modern-cart-btn:focus,
.variation-actions .modern-cart-btn:focus-visible,
.variation-actions .modern-cart-btn:active{
    outline:none !important;
    box-shadow:none !important;
}

/* اگر دکمه به صورت <a> باشد (برای برخی تم‌ها) */
a.modern-cart-btn:focus,
a.modern-cart-btn:focus-visible{
    outline:none !important;
    box-shadow:none !important;
}
/* ==== FIX: cart button focus ring + exact 10px radius ==== */
/* دکمه اصلی و دکمه داخل مودال – هم <button> هم <a> */
.modern-action-buttons-row .modern-cart-btn,
.variation-actions .modern-cart-btn,
a.modern-cart-btn,
button.modern-cart-btn{
    border-radius: 10px !important;
}

/* تمام حالات فوکِس را خاموش کن (خط آبی/هاله بوت‌استرپ) */
.modern-action-buttons-row .modern-cart-btn:focus,
.modern-action-buttons-row .modern-cart-btn:focus-visible,
.modern-action-buttons-row .modern-cart-btn:active,
.variation-actions .modern-cart-btn:focus,
.variation-actions .modern-cart-btn:focus-visible,
.variation-actions .modern-cart-btn:active,
a.modern-cart-btn:focus,
a.modern-cart-btn:focus-visible,
button.modern-cart-btn:focus,
button.modern-cart-btn:focus-visible{
    outline: 0 !important;
    box-shadow: none !important;      /* هاله آبی بوت‌استرپ */
    -webkit-tap-highlight-color: transparent; /* موبایل */
    border-color: transparent !important;     /* اگر قالب باکس شَدویی می‌زند */
}

/* فایرفاکس: حذف حاشیه داخلی پیش‌فرض روی دکمه‌ها */
button.modern-cart-btn::-moz-focus-inner{
    border: 0 !important;
}

/* اگر دکمه داخل فرم است، باز هم تمام‌عرض و هم‌قد بماند */
.modern-action-buttons-row form.cart{
    display:flex; flex:1 1 auto; margin:0;
}
.modern-action-buttons-row form.cart .modern-cart-btn{
    width:100%; line-height:1; -webkit-appearance:none; appearance:none;
}
/* ===== Tabs bar (detached, white, edge-to-edge) ===== */
.modern-tabs-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 14px;           /* کمی فاصله از باکس پایین */
    padding:12px 0;            /* پدینگ عمودی؛ افقی صفر تا به دیواره‌ی کانتینر بچسبد */
    background:#fff;           /* نوار سفید */
    border-bottom:2px solid #f0f0f0;
}


/* محتوای تب‌ها بدون فاصله‌ی اضافی شروع شود */
.modern-tabs-content{ margin-top:0; padding-top:10px; } /* کمی نفس برای متن */

.modern-tabs-bar .modern-tabs-nav{ display:flex; gap:10px; }

.modern-tabs-actions{
    display:flex; align-items:center; gap:10px; position:relative;
}

/* Pills (مثل اسکرین‌شات، مربع با گوشه 12px و پس‌زمینه لطیف) */
.modern-tabs-actions .share-toggle,
.mlm-bookmark a, /* دکمه‌ای که فایل bookmark قالب تولید می‌کند */
.mlm-bookmark button{
    width:44px; height:44px; border-radius:12px;
    background:#f7f8fb; border:1px solid #eceff3;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; outline:0; box-shadow:none;
}
.mlm-bookmark a:hover, .mlm-bookmark button:hover,
.modern-tabs-actions .share-toggle:hover{ background:#f1f3f7; }

/* آیکون share/x */
.st-icon{ width:20px; height:20px; display:block; background-repeat:no-repeat; background-position:center; background-size:20px 20px; }
/* آیکون سه‌نقطه متصل (share network) */
.st-share{
    background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23555" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">\
<circle cx="4" cy="10" r="2"/><circle cx="16" cy="4" r="2"/><circle cx="16" cy="16" r="2"/>\
<path d="M6 9l8-4M6 11l8 4"/>\
</svg>');
}

.st-close{   background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" stroke="%23555" fill="none" stroke-width="2"><path d="M4 4l12 12M16 4L4 16"/></svg>'); }

/* پنل آیکون‌های اشتراک‌گذاری */
.share-panel{
    position:absolute; inset-inline-start:0; top:calc(100% + 10px);
    display:flex; gap:8px; padding:6px; background:#fff; border:1px solid #eef0f4; border-radius:12px;
    box-shadow:0 16px 40px rgba(15,23,42,.12);
    transform-origin: top left;
    transform: scale(.9) translateY(-6px); opacity:0; pointer-events:none;
    transition: transform .18s ease, opacity .18s ease;
    z-index:40;
}
.modern-tabs-actions.is-open .share-panel{
    transform: scale(1) translateY(0); opacity:1; pointer-events:auto;
}
.share-item{
    width:40px; height:40px; border-radius:10px; background:#f7f8fb; border:1px solid #eceff3;
    display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
    transition: transform .15s ease, background .15s ease;
}
.share-item:hover{ background:#eef1f6; transform: translateY(-2px); }

/* آیکون‌های شبکه‌ها */
.share-item::before{ content:""; width:20px; height:20px; display:block; background-repeat:no-repeat; background-position:center; background-size:20px 20px; }
.si-x::before        { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23111" viewBox="0 0 24 24"><path d="M18.2 3H21l-6.6 7.5L22 21h-6.9l-4.3-5-5 5H3.1l7.1-7.5L2 3h7l4 4.6 5.1-4.6z"/></svg>'); }
.si-telegram::before { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2300a1e9" viewBox="0 0 24 24"><path d="M9.04 15.46l-.38 5.33c.54 0 .78-.23 1.06-.51l2.55-2.46 5.29 3.87c.97.54 1.66.26 1.9-.91l3.45-16.21h.01c.31-1.46-.53-2.03-1.47-1.68L1.7 9.46c-1.42.55-1.4 1.35-.24 1.71l5.34 1.67L19.45 6.5c.59-.39 1.12-.18.68.25"/></svg>'); }
.si-whatsapp::before { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2325D366" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163A11.867 11.867 0 0 1 0 11.994C0 5.373 5.373 0 11.994 0 18.616 0 23.99 5.373 23.99 11.994c0 6.622-5.374 11.996-11.996 11.996-2.062 0-3.998-.508-5.708-1.402L.057 24zM6.6 19.568c1.676.995 3.29 1.591 5.392 1.591 5.448 0 9.887-4.438 9.887-9.885 0-5.448-4.439-9.887-9.887-9.887-5.447 0-9.885 4.439-9.885 9.887 0 2.225.728 4.293 1.957 5.98l-.61 2.228 2.146-.911zm12.12-5.89c-.074-.124-.27-.198-.563-.347-.294-.149-1.74-.86-2.01-.957-.27-.1-.466-.149-.662.149-.198.296-.76.957-.93 1.155-.171.198-.342.223-.635.074-.294-.15-1.24-.456-2.366-1.454-.875-.78-1.466-1.742-1.637-2.036-.171-.296-.018-.456.13-.605.134-.133.296-.347.445-.52.149-.171.198-.296.298-.495.1-.198.05-.372-.025-.521-.074-.148-.662-1.593-.907-2.187-.239-.575-.482-.497-.662-.505l-.566-.01c-.198 0-.52.074-.792.372-.27.296-1.04 1.016-1.04 2.481 0 1.465 1.064 2.879 1.213 3.074.149.198 2.095 3.2 5.077 4.487.71.306 1.264.489 1.697.626.712.226 1.36.194 1.872.118.571-.085 1.74-.711 1.987-1.398.247-.688.247-1.278.173-1.402z"/></svg>'); }
.si-linkedin::before { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%230077b5" viewBox="0 0 24 24"><path d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8.5h4V24h-4V8.5zM8.5 8.5h3.8v2.1h.1c.5-.9 1.8-2.1 3.8-2.1 4.1 0 4.9 2.7 4.9 6.1V24h-4v-7.1c0-1.7 0-3.9-2.4-3.9-2.4 0-2.8 1.9-2.8 3.8V24h-4V8.5z"/></svg>'); }

/* وقتی باز است، آیکون share به ضربدر تبدیل شود */
.modern-tabs-actions.is-open .st-icon{ background-image:none; }
.modern-tabs-actions.is-open .st-icon.st-share{ background-image:none; }
.modern-tabs-actions.is-open .st-icon{ background-image:none; }
.modern-tabs-actions.is-open .st-share{ background-image:none; }
.modern-tabs-actions.is-open .share-toggle .st-icon{ background-image:none; }
.modern-tabs-actions.is-open .share-toggle .st-icon.st-share{ background-image:none; }
.modern-tabs-actions.is-open .share-toggle .st-icon{ background-image:none; }
.modern-tabs-actions.is-open .share-toggle .st-icon::before{ content:""; }

.modern-tabs-actions.is-open .share-toggle .st-icon{ background:none; }
.modern-tabs-actions.is-open .share-toggle{ position:relative; }
.modern-tabs-actions.is-open .share-toggle::before{
    content:""; position:absolute; inset:0; display:block;
    background-repeat:no-repeat; background-position:center; background-size:20px;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" stroke="%23555" fill="none" stroke-width="2"><path d="M4 4l12 12M16 4L4 16"/></svg>');
}

/* موبایل: اکشن‌ها زیر تب‌ها بیفتند */
@media (max-width: 768px){
    /* تب‌بار در موبایل افقی بماند + پس‌زمینه سفید و فشرده‌تر شود */
    .modern-tabs-bar{
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        background: #fff;
        border-radius: 12px;
        padding: 6px 8px;   /* فشرده‌تر از دسکتاپ */
        gap: 8px;           /* فاصله کمتر بین بخش‌ها */
    }
    /* اگر حالت detached داری، سفید و گرد بماند */
    .modern-tabs-bar.is-detached{
        background:#fff;
        border-radius:12px;
        box-shadow:none;
        border-bottom:0;   /* خط پایین را از این حالت بردار اگر داشتی */
    }

    /* تب‌ها یک خطی و اسکرول‌پذیر افقی (سوایپ کاملاً فعال) */
    .modern-tabs-nav{
        flex: 1 1 auto;
        display:flex;
        gap: 8px;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* اسکرول نرم iOS */
        touch-action: pan-x;               /* سوایپ افقی را در اولویت بگذار */
        overscroll-behavior-x: contain;    /* اسکرول والد دخالت نکند */
        scroll-snap-type: x proximity;     /* اسنپ ملایم هنگام اسکرول */
        min-width: 0;                      /* اجازه‌ی جمع شدن ظرف */
    }
    .modern-tabs-nav::-webkit-scrollbar{ display:none; } /* نوار اسکرول مخفی؛ سوایپ فعال است */


    /* خود دکمه‌های تب: ریزتر و بدون شکستن خط */
    .modern-tab-btn{
        flex: 0 0 auto !important;
        white-space: nowrap;
        font-size: 13px;
        padding: 10px 8px;
        line-height: 1.2;
        scroll-snap-align: start; /* با اسنپ هماهنگ شود */
    }

    /* اکشن‌ها (اشتراک/علاقه‌مندی) انتهای ردیف بمانند */
    .modern-tabs-actions{
        flex: 0 0 auto;
        align-self: auto !important;
    }
}

/* ——— آیکونی‌کردن علاقه‌مندی ——— */
.modern-tabs-actions .bookmark-slot .mlm-bookmark a,
.modern-tabs-actions .bookmark-slot .mlm-bookmark button{
    width:44px; height:44px; border-radius:12px;
    background:#f7f8fb; border:1px solid #eceff3;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; outline:0; box-shadow:none;
    /* متن داخل لینک/دکمه مخفی شود */
    font-size:0; line-height:0; color:transparent;
    position:relative;
}
.modern-tabs-actions .bookmark-slot .mlm-bookmark a:hover,
.modern-tabs-actions .bookmark-slot .mlm-bookmark button:hover{
    background:#f1f3f7;
}

/* آیکون قلب (استایل نمونه پیوست) */
.modern-tabs-actions .bookmark-slot .mlm-bookmark a::before,
.modern-tabs-actions .bookmark-slot .mlm-bookmark button::before{
    content:""; width:20px; height:20px; display:block;
    background-repeat:no-repeat; background-position:center; background-size:20px 20px;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23555" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 4.8c-1.7-1.3-4.1-1-5.5.8-1.4-1.8-3.8-2.1-5.5-.8-1.9 1.4-2.1 4.2-.4 5.9l5.9 5.7 5.9-5.7c1.7-1.7 1.5-4.5-.4-5.9z"/></svg>');
}

/* اگر بوکمارک «فعال» شد (کلاس قالب‌ات ممکن است .active یا .added باشد)، رنگ دلخواه: */
.modern-tabs-actions .bookmark-slot .mlm-bookmark .active::before,
.modern-tabs-actions .bookmark-slot .mlm-bookmark .added::before{
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ff5a6b" stroke="%23ff5a6b" stroke-width="0"><path d="M10.5 16.7l-6-5.8c-1.7-1.7-1.5-4.5.4-5.9 1.7-1.3 4.1-1 5.5.8 1.4-1.8 3.8-2.1 5.5-.8 1.9 1.4 2.1 4.2.4 5.9l-5.8 5.8z"/></svg>');
}
/* ===== Detached tabs bar (full-width strip) ===== */
.modern-tabs-bar{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
    margin:0 0 14px;          /* فاصله‌ی معقول از باکس پایین */
    padding:0;                 /* بدون پدینگ تا از چپ/راست به دیواره بچسبد */
    border-bottom:2px solid #f0f0f0;
}
.modern-tabs-bar.is-detached{
    border-radius:0;
    box-shadow:none;
}

/* باکس سفید محتوای تب‌ها مستقل بماند */
.modern-product-details{ margin-top:0; }

/* برای شروع سریعِ محتوا بعد از خط تب‌ها */
.modern-tabs-content{ margin-top:0; padding-top:0; }
/* ===== Course tab layout ===== */
#course .course-about-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:16px;
    margin-bottom:18px;
}
@media (max-width: 768px){
    #course .course-about-grid{ grid-template-columns: 1fr; }
}

/* Intro video */
#course .course-intro-video iframe,
#course .course-intro-video video{
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    display:block;
    border-radius:12px;
    box-shadow: 0 10px 30px rgba(15,23,42,.08);
}

/* Syllabus wrapper */
#course .course-syllabus{ margin-top:8px; }
/* پیام: این دوره قبلاً خریداری شده */
.course-owned-note{
    margin-top:10px;
    background:#ecfdf5;
    border:1px solid #a7f3d0;
    color:#065f46;
    border-radius:12px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    box-shadow:0 6px 14px rgba(16,185,129,.08);
}
.course-owned-note .con-icon{
    width:18px; height:18px; display:inline-block;
    background-repeat:no-repeat; background-position:center; background-size:18px 18px;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23065f46" viewBox="0 0 24 24"><path d="M12 22C6.48 22 2 17.52 2 12S6.48 2 12 2s10 4.48 10 10-4.48 10-10 10zm-1.2-6.2l6.6-6.6-1.4-1.4-5.2 5.2-2.2-2.2-1.4 1.4 3.6 3.6z"/></svg>');
}
/* ==== FIX: ستاره‌ها در موبایل زیرِ هم نیفتند (افقی و یک‌خطی) ==== */
.meta-three-cols .meta-item.rating .stars,
.meta-three-cols .meta-item.rating .woocommerce-product-rating,
.meta-three-cols .meta-item.rating .star-rating{
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;       /* اجازه‌ی رفتن به خط بعد نده */
}

/* هرچی داخل .stars هست (li, span, i, svg …) افقی شود */
.meta-three-cols .meta-item.rating .stars ul{
    display: flex !important;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.meta-three-cols .meta-item.rating .stars li,
.meta-three-cols .meta-item.rating .stars span,
.meta-three-cols .meta-item.rating .stars i,
.meta-three-cols .meta-item.rating .stars svg{
    display: inline-block !important;
    line-height: 1;
}

/* استایل پیشفرض ووکامرس: ستاره‌ها با فونتِ ستاره رسم می‌شوند */
.meta-three-cols .meta-item.rating .star-rating{
    float: none !important;
    line-height: 1;
    font-size: 18px;
}
.meta-three-cols .meta-item.rating .star-rating span,
.meta-three-cols .meta-item.rating .star-rating:before{
    float: none !important;      /* از چیدمان ستونی جلوگیری کن */
    display: inline-block !important;
}

@media (max-width: 480px){
    .meta-three-cols .meta-item.rating .star-rating{ font-size: 16px; }
}
/* ===== Mobile: show rating ABOVE preview buttons; hide original rating row ===== */

/* نسخه‌ی داخل گالری (درج‌شده در مرحله 1) فقط روی موبایل دیده شود */
@media (max-width: 768px){
    .mobile-rating-inline{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin: 10px 0 14px;
    }
    /* ستاره‌ها یک‌خطی و وسط‌چین */
    .mobile-rating-inline .stars,
    .mobile-rating-inline .woocommerce-product-rating,
    .mobile-rating-inline .star-rating{
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        white-space: nowrap;
        float: none !important;
        line-height: 1;
    }
    .mobile-rating-inline .star-rating span,
    .mobile-rating-inline .star-rating:before{
        float: none !important;
        display: inline-block !important;
    }

    /* نسخه‌ی اصلیِ ستاره‌ها (داخل meta-three-cols) روی موبایل مخفی شود */
    .meta-three-cols .meta-item.rating{
        display: none !important;
    }
}

/* روی دسکتاپ/تبلت این بلاک نمایش داده نشود (فقط نسخه‌ی اصلی بماند) */
@media (min-width: 769px){
    .mobile-rating-inline{ display: none; }
}