:root {
    --carousel-bg: #3e68ff;
}

/* استایل‌های سفارشی برای Swiper */
.dmao-so-wrapper .dmao-so-box .text-muted{
    font-size: 13px !important;
}
.dmao-so-wrapper {
    position: relative;
    padding: 0 8px;
}

/* templates/carousel.php مارک‌آپش از کلاس‌های خامِ بوت‌استرپ استفاده می‌کند
   (container-xl, mx-auto, d-flex, flex-column, align-items-center,
   justify-content-center, h-100) بدونِ این‌که افزونه خودش برایشان CSS داشته باشد —
   یعنی چیدمانِ اسلایدِ پوستر/پایان فقط روی تمی که خودش بوت‌استرپ لود می‌کند درست
   می‌ایستاد. اینجا فقط زیرِ .dmao-so-wrapper (نه سراسری) شبیه‌سازی می‌شود تا چیزی
   از خودِ تم دست‌کاری نشود. */
.dmao-so-wrapper.container-xl {
    max-width: 1200px;
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}
.dmao-so-wrapper .d-flex {
    display: flex;
}
.dmao-so-wrapper .flex-column {
    flex-direction: column;
}
.dmao-so-wrapper .align-items-center {
    align-items: center;
}
.dmao-so-wrapper .justify-content-center {
    justify-content: center;
}
.dmao-so-wrapper .h-100 {
    height: 100%;
}
.dmao-so-wrapper .text-center {
    text-align: center;
}
.dmao-so-wrapper .swiper-button-next,.dmao-so-wrapper .swiper-button-prev {
    background-color: #fcf4e9;
}

.dmao-so-box {
    border-radius: 15px;
    padding: 15px;
    max-height: 580px;
    background-color: var(--carousel-bg);
    /* overflow:visible عمداً (نه hidden) — فلش‌های ناوبری با offset منفی باید بتوانند از لبه‌ی
       باکس بیرون بزنند (افکت سه‌بعدی). کلیپ‌شدنِ خودِ ترک اسلایدها همچنان با overflow پیش‌فرض
       خودِ Swiper روی .swiper انجام می‌شود، نه اینجا. */
    overflow: visible;
}

.dmao-so-wrapper .swiper-wrapper {
    display: flex;
    /* stretch (نه center) عمداً: با center هر اسلاید فقط به اندازه‌ی محتوای خودش بلند می‌شد و
       وسط ردیف قرار می‌گرفت — محصولی که سهمیه/نوارِ موجودی نداشت (پس بخشِ آخرِ کارتش رندر
       نمی‌شد) از بقیه کوتاه‌تر می‌ماند. stretch باعث می‌شه همه‌ی اسلایدهای یک ردیف هم‌ارتفاعِ
       بلندترین عضو بشن؛ .swiper-slide (height:auto + flex column) و خودِ کارت (کلاس h-100
       بوت‌استرپ در مارک‌آپ) این ارتفاع رو کامل پر می‌کنن. */
    align-items: stretch;
}

/* دکمه‌های ناوبری مستقل روی کلاس یکتای dm-nav-btn (قالب این کلاس را نمی‌شناسد → تداخلی نیست).
   کلاس swiper-button-next/prev فقط برای موقعیت‌دهی خودِ Swiper باقی می‌ماند. */
.dmao-so-wrapper .dmao-so-box .dm-nav-btn {
    background: #fcf4e9;
    color: #000;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.08);
    z-index: 5;
}
/* چون فلش‌ها از داخل .swiper (که Swiper رویش .swiper-rtl می‌زند) به .dmao-so-box منتقل شدند،
   قوانین RTL خودِ Swiper دیگر روی آن‌ها نمی‌افتد و به حالت LTR برمی‌گردند (چپ/راست جابه‌جا).
   این‌جا صریحاً چیدمانِ RTL را برمی‌گردانیم: «بعدی» سمت چپ، «قبلی» سمت راست. */
.dmao-so-wrapper .dmao-so-box .dm-nav-btn.swiper-button-next { left: 10px; right: auto; }
.dmao-so-wrapper .dmao-so-box .dm-nav-btn.swiper-button-prev { right: 10px; left: auto; }
.dmao-so-wrapper .dmao-so-box .dm-nav-btn:hover {
    transform: scale(1.08);
}
.dmao-so-wrapper .dmao-so-box .dm-nav-btn svg {
    width: var(--dm-nav-icon-size, 18px) !important;
    height: var(--dm-nav-icon-size, 18px) !important;
    fill: currentColor;
    display: block;
    flex: none;         /* جلوگیری از جمع‌شدن svg در فلکس تا min-content (باگ عرض 2px) */
}
.dmao-so-wrapper .dmao-so-box .dm-nav-btn i {
    font-size: var(--dm-nav-icon-size, 16px) !important;
    color: currentColor;
    line-height: 1;
    flex: none;
}
/* حذف فلش پیش‌فرض فونت‌آیکونِ Swiper تا با آیکون خودمان تداخل نکند */
.dmao-so-wrapper .dmao-so-box .dm-nav-btn::after,
.dmao-so-wrapper .swiper-button-next::after,
.dmao-so-wrapper .swiper-button-prev::after {
    content: none !important;
    display: none !important;
}

.dmao-so-wrapper .swiper-button-prev.swiper-button-disabled,
.dmao-so-wrapper .swiper-button-next.swiper-button-disabled {
    opacity: 0 !important;
    pointer-events: none;
}

.dmao-so-wrapper .swiper-button-next:hover, .dmao-so-wrapper .swiper-button-prev:hover {
    background-color: #d6cfc5;

}

.dmao-so-wrapper .swiper-button-next::after, .dmao-so-wrapper .swiper-button-prev::after {
    font-size: 13px;
    font-weight: bold;
}

/* --- توجه: این دو قانون تداخل داشتند، قانون پیش‌فرض سوایپر بهتر است --- */
/* .dmao-so-wrapper .swiper-button-next::after {
    content: 'prev' !important;
    color: red !important;
} */

.dmao-so-poster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.dmao-so-poster svg {
    width: 80px;
}

.dmao-so-poster .dm-poster-img {
    margin-bottom: 20px;
}

.dmao-so-poster .dm-poster-title {
    color: #fcf4e9;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.9;
    text-align: center;
}

.dmao-so-swiper .dmao-so-poster .more-svg {
    width: 18px;
}

.dmao-so-poster a {
    padding-right: 13px;
    position: relative;
    text-decoration: none;
    font-size: 14px;
    color: #fcf4e9;
}

.dmao-so-poster a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 21px;
    height: 1px;
    width: 0;
    background-color:  #fcf4e9;
    transition: width 0.4s ease;
}

.dmao-so-poster a:hover::after{
    width: 93%;
}

.dmao-so-swiper .dm-amazing-card{
    padding: 10px;
    border-radius: 15px;
    background-color: #fff;
    border: none;
    margin-bottom: 0;
}

/* ارتفاع/عرض/object-fit اینجا دیگر هارد-کد نیست: همان مقدار «ارتفاع تصویر» تنظیمات ظاهری
   (image_height) از طریق Frontend::add_carousel_style_inline_css() روی همین سلکتور هم اعمال
   می‌شود (چون این img هم‌زمان .post-card-image هم هست، هم .dmao-so-swiper .card) — این‌جا فقط
   چیزهایی می‌مونه که به تنظیمات ربطی نداره. */
.dmao-so-swiper .dm-amazing-card img {
    padding-bottom: 0;
    background: #fff;
}

.dmao-so-swiper .dm-amazing-card p {
    font-size: 13px;
    color: rgb(33, 37, 41);
    text-align: center;
    font-weight: 600;
}

.dmao-so-swiper .product-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; /* تعداد خطوط مورد نظر */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


.dmao-so-swiper .dm-amazing-card .price-wrapper {
    display: flex;
    justify-content: space-between;
}

.dmao-so-swiper .dm-amazing-card .price-wrapper .discount-badge {
    font-size: 11px;
    border-radius: 15px;
    padding: 5px 10px;
    background-color: #e6123d;
    color: #fff;
    font-weight: 600;
    line-height: 13px;
}

.dmao-so-swiper .dm-amazing-card .price-wrapper .new-price {
    font-size: 12px;
    font-weight: 700;
    color: rgb(33, 37, 41);
}

.dmao-so-swiper .dm-amazing-card .old-price {
    font-size: 11px;
    color: #616161;
}

.dmao-so-swiper .dmao-so-end a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    color: #fcf4e9;
}

.dmao-so-swiper .dmao-so-end svg {
    width: 40px;
}

.dmao-so-swiper .dm-amazing-card .countdown {
    font-size: 12px;
    text-align: left;
}
/*استایل های مجید*/
.dmao-so-swiper .swiper-slide{
    background: #fff;
    border-radius: 15px;
    padding: 0px;
}
/* اسلایدِ پوستر/پایان (بوکِ اندِ کاروسل) قبلاً در همهٔ عرض‌ها ۱۹۵px ثابت بود — روی
   موبایل که اسلایدهای واقعی هم عرضِ نسبی می‌گیرند (خطِ ۲۹۲ به پایین)، این عددِ ثابت
   هیچ‌وقت جمع نمی‌شد و ردیف را به هم می‌ریخت. حالا مثلِ اسلایدهای واقعی پلکانی است. */
.dmao-so-swiper .swiper-wrapper > .swiper-slide:first-child
,.dmao-so-swiper .swiper-wrapper > .swiper-slide:last-child {
    width: 45% !important;
    background:transparent !important;
}
@media (min-width: 576px) {
    .dmao-so-swiper .swiper-wrapper > .swiper-slide:first-child
    ,.dmao-so-swiper .swiper-wrapper > .swiper-slide:last-child {
        width: 160px !important;
    }
}
@media (min-width: 992px) {
    .dmao-so-swiper .swiper-wrapper > .swiper-slide:first-child
    ,.dmao-so-swiper .swiper-wrapper > .swiper-slide:last-child {
        width: 195px !important;
    }
}
.dmao-so-swiper .swiper-slide article > div:first-child {
    margin: 0px !important;
}
.dmao-so-swiper .swiper-slide h3{
    /* تعداد خط دیگر این‌جا هارد-کد نیست: این سلکتور h3.amazing-product-title را هم می‌گیرد
       (تیتر واقعیِ کارت داخل .swiper-slide رندر می‌شود) و چون کلاس+کلاس+المان از کلاسِ تکیِ
       .amazing-product-title مشخص‌تر است، حتی با !importantِ برابر همیشه برنده بود و تنظیمِ
       title_lines/title_lines_mobile ادمین را (در هر دو دیوایس) بی‌اثر می‌کرد. */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.dmao-so-swiper .swiper-slide article > div:nth-child(2) {
    padding: 0px !important;
}
.countdown-special-off{
    font-size: 12px;
}
.price {
    justify-content: center;
}

.amazing-product-title{
     /* تعداد خط (-webkit-line-clamp) دیگر این‌جا هارد-کد نیست — این همان کلاسی است که
        Frontend.php هم برایش استایلِ داینامیک (title_lines/title_lines_mobile) تولید
        می‌کند؛ چون این استایل‌شیت (dm-special-offers-carousel-css) روی کاروسل بعد از
        استایلِ داینامیک enqueue می‌شود، یک عددِ هارد-کدِ اینجا همیشه با !important برنده
        می‌شد و تنظیمِ ادمین را دقیقاً روی کاروسل بی‌اثر می‌کرد. */
     display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}



.dmao-so-wrapper .swiper {
    clip-path: inset(0 0 0 -100%);
    padding-right: 10px;
}

.dmao-so-wrapper .swiper-slide {
    width: 80%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .dmao-so-wrapper .swiper-slide {
        width: 315px;
    }
}

.dmao-so-wrapper .swiper-slide img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.dmao-so-wrapper .dmao-so-poster {
    width: 100%;
}