/**
 * استایل‌های بخش عمومی (جلوی سایت)
 */

/* هاور روی کارت → تصویر شاخص محو و اولین تصویر گالری نمایان می‌شود (کراس‌فید). هر دو تصویر
   داخل .post-card-image با position:absolute روی هم می‌نشینند (همان قانون cover که در تنظیمات
   ظاهری هم اعمال می‌شود، اینجا تکرار می‌کنیم تا حتی وقتی JS/تنظیمات ظاهری فعال نباشد کار کند). */
.post-card-image .dmao-hover-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.dm-amazing-card:hover .post-card-image .dmao-hover-img {
    opacity: 1;
}

/*استایل عنوان محصول در کارت — تعداد خط (-webkit-line-clamp) دیگر این‌جا هارد-کد نیست،
  از تنظیماتِ ظاهری (title_lines/title_lines_mobile) در Frontend.php می‌آید. */
.amazing-product-title{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ---------------------------------- */
/* ۱. استایل‌های تایمر شمارش معکوس (بزرگ) */
/* ---------------------------------- */
.dm-amazing-offer-countdown {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    background-color: #f1f1f1;
    padding: 10px 15px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
    direction: ltr;
    margin-top: 5px;
}
.dm-amazing-offer-countdown.loading-timer {
    font-size: 0.8em;
    color: #555;
    padding: 10px 15px;
}
.dm-amazing-offer-countdown .countdown-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}
.dm-amazing-offer-countdown .countdown-number {
    font-size: 1.4em;
    line-height: 1.1;
    color: #111;
}
.dm-amazing-offer-countdown .countdown-label {
    font-size: 0.7em;
    color: #555;
    margin-top: 2px;
}
.dm-amazing-offer-countdown span.ended {
    color: #cc0000;
    font-size: 1.1em;
    font-weight: bold;
    direction: rtl;
}

/* ---------------------------------- */
/* ۲. استایل تایمر فشرده (کوچک) */
/* ---------------------------------- */
.dm-amazing-offer-countdown.compact-timer {
    gap: 4px;
    padding: 0;
    background: none;
    margin-top: 5px;
    font-family:"yekan-bakh";
}
.dm-amazing-offer-countdown.compact-timer.loading-timer {
    padding: 0;
    font-family:"yekan-bakh";
}
.dm-amazing-offer-countdown.compact-timer .countdown-segment {
    min-width: auto;
    font-family:"yekan-bakh";
}
.dm-amazing-offer-countdown.compact-timer .countdown-number {
    font-size: 0.9em;
    color: #333;
    font-family:"yekan-bakh";
    font-size: 16px;
}
.dm-amazing-offer-countdown.compact-timer .countdown-label {
    font-size: 0.6em;
    color: #777;
    font-family:"yekan-bakh";
    font-weight:400;
    font-size: 10px;
}

/* ---------------------------------- */
/* ۳. استایل‌های صفحه لندینگ (شورت‌کد) */
/* ---------------------------------- */

.dm-amazing-offers-shortcode {
    /* استایل‌های کانتینر لندینگ */
}

/* استایل‌های بخش قیمت */
.amazing-offer-regular-price {
    font-size: 0.85em;
    color: #888;
    text-decoration: line-through;
    display: block;
    line-height: 1;
    opacity: 0.7;
}
.amazing-offer-regular-price .text-primary > span:last-child {
  font-size: 10px;
  font-weight: normal;
}
.amazing-offer-sale-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #c00;
    display: block;
}
.amazing-offer-sale-price .text-primary > span:last-child {
  font-size: 12px;
  font-weight: normal;
}
.amazing-offer-sale-price .currency-label {
    font-size: 0.7em;
    font-weight: normal;
    color: #333;
    margin-right: 3px;
}

/* استایل بج تخفیf */
.amazing-offer-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: linear-gradient(to right, #3e68ff, #2f52d6);
    padding: 3px 10px;
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 4px;
}

/* ---------------------------------- */
/* ۴. استایل نوار پیشرفت موجودی */
/* ---------------------------------- */
.amazing-offer-stock-progress { margin-top: 10px; }
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar-inner {
    height: 100%;
    width: 0;
    background: linear-gradient(to right, #3e68ff, #2f52d6);
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}
.progress-bar-text {
    display: block;
    text-align: center;
    font-size: 0.8em;
    color: #555;
    margin-top: 4px;
    font-family: "yekan-bakh";
    font-weight: 400;
}

/* =========================================
   5-استایل باکس فیلتر دسته‌بندی (مدرن و نرم)
   ========================================= */

/* رپر اصلی که کل اسلایدر و دکمه‌ها را نگه می‌دارد */
.amazing-offers-cat-slider-wrapper {
    position: relative;
    /* همان ضامنِ بالا برای زنجیرهٔ والدها: هیچ‌کدام از این ظرف‌ها نباید از عرضِ
       جای خودشان بزرگ‌تر شوند، هر قالبی که میزبانشان باشد. */
    min-width: 0;
    max-width: 100%;
    background: #f8f9fa;
    padding: 5px 45px; /* فضای چپ و راست برای دکمه‌ها */
    border-radius: 12px; /* گردی گوشه‌ها مثل باکس مرتب‌سازی */
    border: 1px solid #f0f0f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* سایه بسیار ملایم */
    margin-bottom: 20px;
    margin-top: 20px;
}

/* کانتینر اسکرول‌شونده */
.category-filters {
    display: flex;
    gap: 10px; /* فاصله بین آیتم‌ها */
    overflow-x: auto;
    padding: 5px 2px;

    /* ⚠⚠ ریشهٔ باگِ «لندینگ عرضِ کلِ صفحه را خراب می‌کند و اسکرولِ افقیِ ناخواسته
       می‌سازد» (اندازه‌گیریِ زنده روی دیدِ ۳۹۰px: عرضِ این نوار ۱۴۴۶px و
       body.scrollWidth عددِ ۹۲۹).

       چرا: کارت‌های دسته با flex:0 0 auto و عرضِ ثابت هرگز جمع نمی‌شوند، پس
       min-content این نوار برابرِ مجموعِ همهٔ کارت‌هاست. آن min-content تا بالا
       در زنجیرهٔ والدها منتشر می‌شود؛ اگر قالبِ میزبان جایی یک آیتمِ فلکس/گرید با
       min-width:auto داشته باشد (مثلاً بلوکِ گروهِ گوتنبرگ که align-items:center
       دارد)، آن آیتم مجبور می‌شود به‌اندازهٔ همان min-content باز شود و کلِ صفحه
       سرریز می‌کند. روی قالبی که همه‌جا عرض را سخت مهار کرده اتفاق نمی‌افتد، پس
       باگ «فقط روی بعضی سایت‌ها» دیده می‌شود.

       چرا فقط overflow-x:auto کافی نبود: اسکرول‌کانتینر بودن، سهمِ min-content این
       عنصر را برای اندازه‌گیریِ والدها صفر نمی‌کند. contain:inline-size صریحاً
       اعلام می‌کند «عرضِ من به محتوایم وابسته نیست» و همان چیزی است که این
       انتشار را قطع می‌کند. نتیجهٔ اندازه‌گیریِ زنده پس از اعمال: عرضِ نوار ۳۶۸px،
       اسکرولِ افقیِ داخلیِ خودش سالم، و body.scrollWidth برابرِ ۳۹۰ (بی‌سرریز).

       min-width:0 هم برای محیط‌هایی می‌مانَد که این عنصر خودش آیتمِ فلکس باشد. */
    min-width: 0;
    contain: inline-size;
    
    /* کلید حذف لگ: اسکرول نرم CSS */
    scroll-behavior: smooth;
    
    /* مخفی کردن اسکرول‌بار در مرورگرهای مختلف */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.category-filters::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* استایل کارت‌های دسته‌بندی */
.offer-cat-card {
    flex: 0 0 auto; /* جلوگیری از جمع شدن */
    width: 111px; /* عرض ثابت و مناسب */
    padding: 3px 5px 5px 5px;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* انیمیشن هاور نرم */
    text-decoration: none !important;
    color: #555;
    cursor: pointer;
}

/* حالت هاور و اکتیو (حفظ رنگ‌بندی شما) */
.offer-cat-card:hover {
    transform: translateY(-3px); /* کمی بالا رفتن */
    box-shadow: 0 5px 12px rgba(62, 104, 255, 0.1);
    border-color: #fcf4e9;
}

.offer-cat-card.active {
    background-color: #fcf4e9; /* همان رنگ کرم شما */
    border-color: #fcf4e9;
    color: #3e68ff; /* رنگ متن زرشکی */
    box-shadow: inset 0 0 0 1px #fcf4e9, 0 4px 10px rgba(0,0,0,0.05);
}

/* تصویر/آیکون داخل کارت */
.offer-cat-card .cat-card-image {
    width: 80px; 
    height: 80px; 
    margin-bottom: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%;
    background: #fff; /* دایره سفید پشت عکس */
    overflow: hidden;
}
.offer-cat-card .cat-card-image img,
.offer-cat-card .cat-card-image svg { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: cover; 
}

/* عنوان دسته‌بندی */
.offer-cat-card .cat-name, 
.offer-cat-card .cat-card-title { 
    font-size: 12px; 
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* دکمه‌های فلش چپ و راست (مدرن) */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #777;
    transition: all 0.2s ease;
    padding: 0;
}

.slider-nav:hover {
    background: #3e68ff;
    border-color: #3e68ff;
    color: #fff;
    box-shadow: 0 5px 10px rgba(62, 104, 255, 0.3);
}

.slider-nav svg {
    width: 18px;
    height: 18px;
    fill: currentColor; /* رنگ آیکون از رنگ متن دکمه پیروی می‌کند */
}

/* چیدمان دکمه‌ها */
.slider-nav.prev {
    right: 5px; /* سمت راست برای RTL */
    
}
.slider-nav.prev svg{
transform: rotate(180deg);
}
.slider-nav.next {
    left: 5px; /* سمت چپ برای RTL */
}

/* در موبایل دکمه‌ها مزاحم نباشند (اختیاری) */
@media screen and (max-width: 576px) {
    .amazing-offers-cat-slider-wrapper {
        padding: 10px; /* فضای کمتر */
    }
    .slider-nav {
        display: none; /* در موبایل معمولاً با دست اسکرول می‌کنند */
    }
}
/* --- استایل‌های تمیز شده کارت محصول (Amazing Offers) --- */

/* ==========================================================================
   جایگزینِ کلاس‌های بوت‌استرپِ حذف‌شده از کارتِ قالبِ اول.
   ---------------------------------------------------------------------------
   قبلاً چیدمانِ کارت روی کلاس‌های utility بوت‌استرپ سوار بود (card / h-100 /
   d-flex / flex-column / justify-content-between / rounded-3 / fs-6 /
   text-center / m-0 / mt-auto / pt-2 / px-2 / text-black). همهٔ آن‌ها در
   بوت‌استرپ ۵ با !important تولید می‌شوند و شیتِ تم بعد از شیتِ افزونه لود
   می‌شود، پس در برابرِ !importantِ تنظیماتِ ظاهری (وزنِ برابر) همیشه برنده
   بودند و چند تنظیم را عملاً بی‌اثر می‌کردند.

   ⚠ هیچ‌کدام از قواعدِ زیر !important ندارد — این عمدی است: این‌ها فقط
   «پیش‌فرض» هستند و باید هر وقت ادمین در تنظیمات چیزی انتخاب کرد، جا خالی
   کنند. مقادیر عیناً همان چیزی است که بوت‌استرپ می‌داد، پس تا وقتی کسی
   تنظیمات را دست نزند ظاهر بایت‌به‌بایت همان قبلی است.
   ========================================================================== */
.dm-amazing-card {
    position: relative;          /* .card + .position-relative */
    display: flex;               /* .d-flex */
    flex-direction: column;      /* .flex-column */
    justify-content: space-between; /* .justify-content-between */
    height: 100%;                /* .h-100 */
    min-width: 0;                /* .card */
    background-color: #fff;      /* .card */
    background-clip: border-box;
    word-wrap: break-word;       /* .card */
    border-radius: 0.5rem;       /* .rounded-3 — حالا card_radius رویش می‌نشیند */
}

/* .pt-2 .px-2 */
.dmao-card-title-box {
    padding: 0.5rem 0.5rem 0;
}

/* .text-black .text-decoration-none */
.dmao-card-link {
    color: #000;
    text-decoration: none;
}

/* .stretched-link — کلِ کارت را کلیک‌پذیر می‌کند. بازسازیِ دقیقِ همان قاعده‌ی
   بوت‌استرپ؛ بدونِ آن، فقط خودِ متنِ عنوان لینک می‌شد. */
.dmao-card-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/* .fs-6 .text-center .m-0 — چینش و اندازه از این‌جا پیش‌فرض می‌گیرند و با
   تنظیماتِ title_align / title_font_size جایگزین می‌شوند. */
.amazing-product-title {
    margin: 0;
    font-size: 1rem;
    text-align: center;
}

/* .d-flex .justify-content-between .align-items-center */
.time-price-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* باکس اصلی کارت */
.dm-amazing-card {
    border: none !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px  !important;
    transform: translateY(0px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dm-amazing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dmao-so-box .dm-amazing-card:hover {
    transform: translateY(0px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* مکان‌دهی بج ویژه روی کارت */
.card-vip-badge {
    position: absolute;
    top: 45px;
    right: 10px;
    z-index: 10;
}

/* فوتر کارت — margin-top:auto جایگزینِ کلاسِ .mt-auto است و فوتر را به کفِ کارت می‌چسباند. */
.amazing-offer-footer {
    margin-top: auto;
    padding: 10px;
    border-top: 1px solid #f0f0f0;
}

/* بخش قیمت فشرده */
.dm-compact-price {
    line-height: 1.3;
    margin-bottom: -10px;
}

/* قبلاً زیر ۵۷۶px این ردیف را مجبور می‌کرد به دو خط بشکند (column) چون فونت/گپ روی موبایل
   کوچک‌تر نمی‌شد و در یک ردیف جا نمی‌شد. حالا که Frontend.php برای موبایل فونت‌سایز و گپِ
   مستقل تولید می‌کند (بخشِ @media(max-width:575px) در add_carousel_style_inline_css)،
   دیگر نیازی به شکستن نیست؛ همان‌جا flex-wrap:nowrap هم صراحتاً ست می‌شود. */

/* بخش قیمت ساده (وقتی پیشنهاد فعال نیست) */
.dm-simple-price {
    font-size: 1.1em;
    font-weight: bold;
}

/* بخش تایمر — flex-shrink دیگر ۰ نیست تا در عرض‌های کم بتواند کنارِ ستونِ قیمت جا شود */
.dm-countdown-box {
    text-align: left;
    flex-shrink: 1;
    min-width: 0;
    padding-right: 10px;
}

.dm-no-bg {
    background: none;
    padding: 0;
    justify-content: flex-end;
}
/* --- استایل‌های بج صفحه تکی محصول (Single Product) --- */

.dm-single-badge-container {
    position: absolute;
    top: 25px;
    right:44.5%;
}
@media screen and (max-width: 768px) {
    .dm-single-badge-container {
    position: absolute;
    top: 25px;
    right: auto;
    left: 10px;
}
}
.vip-badge-label.single-product-vip {
    font-size: 12px;
    padding: 4px 4px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    /* رنگ‌بندی قبلاً تعریف شده (silver, gold, platinum) اعمال می‌شود */
}
.sale-perc{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap:2px;
}
.sale-perc .vip-badge-label{
    position: static;
    margin: 0 !important;
    display: inline-block !important;
}

/* ---------------------------------- */
/* --- 6.استایل محصولات فروش رفته --- */
/* ---------------------------------- */
.dm-finished-card{
    overflow: hidden;
}
.dm-finished-overlay{
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: grayscale(100);
    background-color: #ffffff00;
    z-index: 11;
    top: 0;
    right: 0;
}
.dm-finished-badge-large{
    background: linear-gradient(to right, #3e68ffb8, #2f52d6c7);
    color: #fff;
    border-radius: 10px;
    padding: 5px 50px;
    transform: rotate(-25deg);
    margin-top: -150px;
    margin-right: -10px;
    backdrop-filter: blur(10px);
}
.dm-finished-card .amazing-offer-badge,.dm-finished-card .card-vip-badge{
    background: #ebebeb !important;
    border-color:#ebebeb;
    color: #111 !important;
    box-shadow:none;
}
.dm-finished-card .progress-bar-inner{
    width: 100% !important;
    background: #c5c5c5 !important;
}

/* --- استایل‌های اصلی بج‌های VIP (مشترک) --- */
.vip-badge-label {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 4px; /* گوشه‌های گرد */
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff; /* متن سفید */
    box-shadow: 0 3px 6px rgba(0,0,0,0.16); /* سایه نرم */
    text-align: center;
    vertical-align: middle;
    transition: all 0.3s ease;
    white-space: nowrap;
    width: fit-content;
    position: absolute;
    top: 10px;
    left: 10px;
}

.dm-single-badge-container .vip-badge-label {
    top: 25px !important;
    right: 0px;
    left: auto;
}

/* --- استایل بج در صفحه تکی محصول --- */
.dm-single-badge-container {
    position: absolute;
    top: 25px;
    right: 50%; /* تنظیم جایگاه نسبت به عکس محصول */
    z-index: 10;
}

.vip-badge-label.single-product-vip {
    /*font-size: 13px;*/
    /*padding: 5px 12px;*/
}

/* ریسپانسیو برای موبایل */
@media screen and (max-width: 768px) {
    .dm-single-badge-container {
        right: auto;
        left: 20%;
        top: 22px;
    }
}

/* --- استایل بج "تمام شد" / "فروش رفته" --- */
.single-product-finished {
    background: #6c757d; /* رنگ طوسی پیش‌فرض برای اتمام */
    cursor: default;
}

/* =========================================
   استایل اختصاصی بخش مرتب‌سازی (Sorting)
   ========================================= */

/* کانتینر اصلی که دکمه را در بر می‌گیرد */
.sort-by-container {
    display: flex;
    justify-content: flex-end; /* چسباندن به سمت چپ (در حالت RTL) */
    align-items: center;
    border-top: 1px solid #f0f0f0; /* خط جداکننده بالا */
    margin-top: 15px;
    padding-top: 15px;
}

/* فرمی که لیبل و سلکت داخلش هستند */
.amazing-offers-sort-form {
    display: flex;
    align-items: center;
    gap: 10px; /* فاصله بین لیبل و سلکت */
    background-color: #f8f9fa; /* رنگ زمینه ملایم دور باکس */
    padding: 6px 12px;
    border-radius: 8px; /* گردی دور باکس */
    border: 1px solid #e9ecef;
}

/* متن "مرتب‌سازی:" */
.sort-label {
    font-size: 13px;
    color: #555;
    margin: 0;
    white-space: nowrap;
    font-weight: 500;
}

/* خودِ منوی کشویی */
.sort-select {
    border: 1px solid #ddd;
    border-radius: 6px; /* گردی گوشه‌ها */
    padding: 6px 30px 6px 10px; /* فضای داخلی (سمت چپ بیشتر برای فلش) */
    font-size: 13px;
    color: #333;
    background-color: #fff;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px; /* عرض حداقل */
    
    /* حذف ظاهر پیش‌فرض زشت مرورگر */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* افزودن فلش سفارشی (چون فلش پیش‌فرض را حذف کردیم) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center; /* فلش سمت چپ (برای سایت فارسی) */
}

/* افکت وقتی موس روی آن می‌رود یا کلیک می‌شود */
.sort-select:hover, .sort-select:focus {
    border-color: #3e68ff; /* رنگ برند */
    box-shadow: 0 0 0 3px rgba(62, 104, 255, 0.1); /* سایه رنگی ملایم */
}

/* تنظیمات ریسپانسیو برای موبایل */
@media screen and (max-width: 576px) {
    .sort-by-container {
        justify-content: center; /* وسط چین */
    }
    .amazing-offers-sort-form {
        width: 100%;
        justify-content: space-between; /* پخش کردن در عرض */
    }
    .sort-select {
        flex-grow: 1; /* پر کردن فضای خالی */
    }
}

/* ---------------------------------- */
/* گریدِ لندینگِ کلاسیک (قالبِ اول) — مستقل از بوت‌استرپِ تم */
/* ---------------------------------- */
/* render_landing_shortcode() مارک‌آپ را با کلاس‌های خامِ بوت‌استرپ چاپ می‌کند
   (.row.row-cols-2.row-cols-lg-3.row-cols-xl-4.g-3)، ولی افزونه خودش هیچ CSSای
   برای این کلاس‌ها نداشت — یعنی گرید فقط روی تمی که خودش بوت‌استرپ لود می‌کند درست
   می‌افتاد و روی بقیهٔ تم‌ها (به‌خصوص موبایل) کاملاً می‌ریخت. اینجا با CSS Grid مستقل
   جایگزین می‌شود؛ !important عمداً هست تا حتی اگر تم واقعاً بوت‌استرپ هم داشته باشد،
   بازهم قاعدهٔ خودِ افزونه برنده بماند (رفتارِ یکسان صرف‌نظر از تم). */
/* سلکتورها عمداً تک‌کلاسه و بدونِ !important‌اند: بعد از حذفِ کلاس‌های بوت‌استرپ و
   product-grid از مارک‌آپ، دیگر هیچ رقیبی برای این قواعد وجود ندارد.
   ⚠ برای دورهٔ گذار (تا وقتی کشِ صفحه پاک شود و HTMLِ قدیمی از بین برود) قواعدِ ستون
   با `> *` نوشته شده‌اند تا هم روی مارک‌آپِ جدید (.dmao-landing-col) و هم روی
   مارک‌آپِ کهنهٔ داخلِ کش (.col) کار کنند. */
.dm-amazing-landing-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 0.5rem;
    margin-inline: 0;
}
@media (min-width: 992px) {
    .dm-amazing-landing-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}
@media (min-width: 1200px) {
    .dm-amazing-landing-wrapper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* ستونِ گرید باید بتواند از محتوایش کوچک‌تر شود، وگرنه عکس/متنِ داخلش گرید را عریض نگه می‌دارد.
   width:100% هم اجباری است: کلاسِ .col از بوت‌استرپ می‌آید و عرضش را از flex می‌گیرد
   (flex:1 0 0%)، ولی والد اینجا گرید است نه فلکس — پس آن flex بی‌اثر می‌شود و ستون به
   عرضِ auto (اندازهٔ محتوا) جمع می‌شود، نه عرضِ سلولِ گرید. نتیجه‌اش کارتِ باریکِ «نصفه»
   بود؛ min-width:0 به‌تنهایی این را حل نمی‌کند چون مشکل کوچک‌نشدن نیست، پُرنکردنِ سلول است. */
.dm-amazing-landing-wrapper > * {
    position: relative;
    min-width: 0;
    width: 100%;
    /* صفرکردنِ پدینگ/مارجین فقط برای HTMLِ کهنه‌ای معنا دارد که هنوز کلاس‌های بوت‌استرپ
       را دارد (کشِ صفحه). روی مارک‌آپِ جدید بی‌اثر ولی بی‌ضرر است. */
    padding-inline: 0;
    margin-bottom: 0;
}

/* ---------------------------------- */
/* استایل‌های تایمر تک محصول (Shortcode) */
/* ---------------------------------- */

.amazing-timer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    background: #fcf4e9; /* یک پس‌زمینه روشن پیش‌فرض */
    /*border: 1px solid #e5e5e5;*/
    border-radius: 8px;
    padding: 5px 10px 5px 5px;
    /*margin: 16px 60px 0 0;*/
    gap: 15px;
    direction: rtl;
    width: 100%;
}

/*.amazing-timer .first-column {*/
/*    flex: 1;*/
/*}*/

.amazing-timer .second-column {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amazing-timer .second-column img,
.amazing-timer .second-column svg {
    max-width: 300px;
    width: 180px;
    height: auto;
    display: block;
}

/* بازنویسی استایل تایمر برای نمایش بهتر داخل این باکس */
.amazing-timer .dm-amazing-offer-countdown {
    margin-top: 0;
    background: transparent; /* حذف پس‌زمینه خاکستری پیش‌فرض */
    padding: 0;
    justify-content: flex-start; /* راست‌چین */
}

.amazing-timer .dm-amazing-offer-countdown .countdown-segment {
    background: transparent;
    padding: 0;
    border-radius: 6px;
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.05);*/
    min-width: 25px;
}

.amazing-timer .dm-amazing-offer-countdown .value {
    font-size: 1.4em;
    color: #3e68ff; /* رنگ اصلی برند */
    margin-bottom: -9px;
}

.amazing-timer .dm-amazing-offer-countdown .label {
    font-size: 0.7em;
    color: #777;
    margin-top: 2px;
    font-weight: 400;
}

.amazing-timer .dm-amazing-offer-countdown{
    align-items: center;
}

/* جداکننده دو نقطه (:) */
.amazing-timer .dm-amazing-offer-countdown > span:not(.countdown-segment) {
    display: none; /* مخفی کردن جداکننده‌های متنی اگر لازم است، یا استایل دهی به آنها */
}

/* ریسپانسیو */
@media (max-width: 990px) {
    .amazing-timer {
        flex-direction: row-reverse;
        text-align: center;
        margin: 0px;
        top: 102%;
        left: 12px;
        gap: 8px;
        direction: rtl;
        /*width: 95%;*/
        border-radius: 16px 16px 8px 8px;
        margin-bottom: 12px;
    }
    
    .amazing-timer .dm-amazing-offer-countdown {
        justify-content: center;
        gap: 2px !important;
    }
    .amazing-timer .second-column img, .amazing-timer .second-column svg {
    width: 90px !important;
    }
    .amazing-timer .dm-amazing-offer-countdown .value {
    font-size: 0.9em !important;
    margin-bottom: -5px;
    }
    .amazing-timer .dm-amazing-offer-countdown .label {
    font-size: 0.5em !important;
    }
}


.amazing-timer-wrapper {
    position: relative;
    overflow: hidden;
}

/*progress bar start*/

.amazing-progress-bar-container {
    position: absolute;
    top: 1%;
    left: 0.5%;
    width: 99%;
    height: 4px;
    background: #3e68ff26;
    overflow: hidden;
    border-top-left-radius: 500px;
    border-top-right-radius: 500px;
}

.amazing-progress-bar-fill {
    height: 100%;
    background: #3e68ff;
    transition: width 1s linear;
}

.amazing-timer {
    padding-top: 10px;
    overflow: hidden;
}

/*شگفت انگیز شد خبرم کن*/
.container {
    max-width: 1400px;
    margin: 0 auto;
}

.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

@media (min-width: 992px) {
    .px-lg-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.dm-amazing-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 60%);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dm-amazing-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.dm-amazing-modal-overlay .dm-amazing-modal-box {
    background: var(--dm-amz-btn-bg, #ffffff);
    width: 90%;
    max-width: 450px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.dm-amazing-modal-overlay.active .dm-amazing-modal-box {
    transform: translateY(0);
}

.dm-amazing-modal-overlay .dm-amazing-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eeeeee;
}

.dm-amazing-modal-overlay .dm-amazing-modal-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--dm-amz-btn-text, #333333);
}

.dm-amazing-modal-overlay .dm-amazing-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888888;
    line-height: 1;
}

.dm-amazing-modal-overlay .dm-amazing-modal-body {
    padding: 15px;
}

.dm-amazing-modal-overlay .dm-amazing-modal-desc {
    font-size: 14px;
    color: #666666;
    margin-bottom: 15px;
    line-height: 1.6;
}

.dm-amazing-modal-overlay .dm-amazing-input-group {
    margin-bottom: 15px;
}

.dm-amazing-modal-overlay .dm-amazing-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    text-align: left;
    direction: ltr;
    font-family: inherit;
}

.dm-amazing-modal-overlay .dm-amazing-submit-btn {
    width: 100%;
    padding: 12px;
    background: #3e68ff;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.dm-amazing-modal-overlay .dm-amazing-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.dm-amazing-modal-overlay .dm-amazing-msg-container {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

.dm-amazing-modal-overlay .dm-amazing-msg-container.success {
    background: #e6f4ea;
    color: #1e8e3e;
}

.dm-amazing-modal-overlay .dm-amazing-msg-container.error {
    background: #fce8e6;
    color: #d93025;
}

/*استایل جدول حساب کاربری*/
.woocommerce-orders-table.woocommerce-MyAccount-orders.shop_table.shop_table_responsive.my_account_orders.account-orders-table{
    width:100%;
}