: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;
}
.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;
    align-items: center;
}

/* دکمه‌های ناوبری مستقل روی کلاس یکتای 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 .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 .card img {
    padding-bottom: 0;
    background: #fff;
}

.dmao-so-swiper .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 .card .price-wrapper {
    display: flex;
    justify-content: space-between;
}

.dmao-so-swiper .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 .card .price-wrapper .new-price {
    font-size: 12px;
    font-weight: 700;
    color: rgb(33, 37, 41);
}

.dmao-so-swiper .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 .card .countdown {
    font-size: 12px;
    text-align: left;
}
/*استایل های مجید*/
.dmao-so-swiper .swiper-slide{
    background: #fff;
    border-radius: 15px;
    padding: 0px;
}
.dmao-so-swiper .swiper-wrapper > .swiper-slide:first-child
,.dmao-so-swiper .swiper-wrapper > .swiper-slide:last-child {
    width: 195px !important;
    background:transparent !important;
}
.dmao-so-swiper .swiper-slide article > div:first-child {
    margin: 0px !important;
}
.dmao-so-swiper .swiper-slide h3{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !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{
     display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !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%;
}