/* ==========================================================================
   Campaignchi — Campaign Slider frontend styles
   --------------------------------------------------------------------------
   Completely self-contained: the public frontend never loads the admin
   design-system file (base.css), so every custom property used here has
   its own sensible fallback. Per-instance colors/radius are still injected
   inline by SliderRenderer via --cmc-s-primary / --cmc-s-accent / --cmc-s-radius.

   ⚠️ HARDENING — every visual declaration below is marked !important.
   Themes and other plugins frequently ship broad, unscoped selectors
   (e.g. `a{...}`, `img{...}`, `button{...}`, `ul,li{...}`) that would
   otherwise leak into this slider and silently break its layout, spacing,
   or colors. Since normal cascade order alone is not a reliable enough
   guarantee (some themes enqueue their CSS with tricks of their own,
   including their own !important rules), !important here is what
   actually guarantees every Campaignchi slider looks identical regardless
   of the active theme or any other plugin's CSS.

   Markup reference (kept in sync with the 5 SliderTemplateInterface skins):
     Flux:    .cmc-slide--flux > __media(a,bg-img > __badge) + __body(__name,__price,__stock-track>__stock-fill,__cta)
     Minimal: .cmc-slide--minimal > __media(a,bg-img > __badge) + __body(__name,__price,__cta)
     Glass:   .cmc-slide--glass > __inner(__media(a,bg-img), __badge, __name, __price, __cta)
     Bold:    .cmc-slide--bold > __media(a,bg-img) + __body(div>__percent(span),__name,__price | __cta)
     Compact: .cmc-slide--compact > __media(a,bg-img > __badge) + __body(__name, __row(__price,__cta))
   ========================================================================== */

.cmc-slider {
    --cmc-font: 'Vazirmatn', Tahoma, sans-serif;
    direction: rtl !important;
    font-family: var(--cmc-font) !important;
    box-sizing: border-box !important;
    margin: 24px 0 !important;
    position: relative !important;
}

.cmc-slider * {
    box-sizing: border-box !important;
}

/* -------------------------------------------------------------------- */
/* ISOLATION — defend against generic theme/global CSS leaking in.       */
/* Every property a theme is likely to reset (text-decoration, list      */
/* styles, button cursor/font, heading margins, image sizing) is locked  */
/* down with !important so a bare `a{...}`/`ul,li{...}`/`button{...}`    */
/* theme rule can never visually break the slider.                       */
/* -------------------------------------------------------------------- */

.cmc-slider a {
    text-decoration: none !important;
    color: inherit !important;
}

.cmc-slider img {
    max-width: 100% !important;
    height: auto !important;
    border: none !important;
    vertical-align: middle !important;
}

.cmc-slider button {
    font-family: var(--cmc-font) !important;
    cursor: pointer !important;
}

.cmc-slider ul,
.cmc-slider ol,
.cmc-slider li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.cmc-slider h1,
.cmc-slider h2,
.cmc-slider h3,
.cmc-slider h4,
.cmc-slider p {
    margin: 0 !important;
    font-family: var(--cmc-font) !important;
}

/* -------------------------------------------------------------------- */
/* Header: type badge, title, countdown, navigation                    */
/* -------------------------------------------------------------------- */

.cmc-slider__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.cmc-slider__head-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Campaign-type badge — its TEXT is now admin-customizable via
   settings['type_badge_text'] (see SliderRenderer::render()); this rule
   only controls its visual style, not its content. */
.cmc-slider__type-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: var(--cmc-s-primary, #6C47FF) !important;
}

.cmc-slider__type-badge--amazing_offer {
    background: var(--cmc-s-accent, #FF6B35) !important;
}

.cmc-slider__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #1a1d24 !important;
}

.cmc-slider--dark .cmc-slider__title {
    color: #f3f4f7 !important;
}

.cmc-slider__countdown {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    /* ⚠️ FIX: force LTR layout for the countdown blocks. `.cmc-slider`
       above sets `direction: rtl`, which — with no override — places the
       FIRST DOM child (day) on the RIGHT and the LAST DOM child (second)
       on the LEFT, so reading left → right you'd see Second, Minute,
       Hour, Day (reversed). Forcing `direction: ltr` here makes the
       natural DOM order (day, hour, minute, second) render in that same
       order from left to right — the standard "biggest unit first"
       digital-countdown convention. The Persian unit labels (روز/ساعت/...)
       still render correctly inside, since Unicode bidi handles RTL text
       runs correctly even inside an LTR-direction container — this is the
       exact same technique already used for the time picker in
       datepicker.css (`.cmc-dp__time-fields`). */
    direction: ltr !important;
}

.cmc-cd-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 38px !important;
    background: #1a1d24 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 4px 6px !important;
}

.cmc-slider--dark .cmc-cd-block {
    background: rgba(255, 255, 255, 0.08) !important;
}

.cmc-cd-num {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.cmc-cd-label {
    font-size: 9px !important;
    opacity: 0.7 !important;
}

.cmc-cd-sep {
    font-weight: 700 !important;
    color: #1a1d24 !important;
}

.cmc-slider--dark .cmc-cd-sep {
    color: #f3f4f7 !important;
}

.cmc-slider__countdown.is-ended .cmc-cd-block {
    background: #9aa0ac !important;
}

.cmc-slider__nav {
    display: flex !important;
    gap: 8px !important;
}

.cmc-slider__nav-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid #e3e5ea !important;
    background: #fff !important;
    color: #1a1d24 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.cmc-slider__nav-btn:hover {
    background: var(--cmc-s-primary, #6C47FF) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.cmc-slider--dark .cmc-slider__nav-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f3f4f7 !important;
}

/* -------------------------------------------------------------------- */
/* Swiper container                                                     */
/* -------------------------------------------------------------------- */

.cmc-slider__swiper {
    overflow: hidden !important;
    padding-bottom: 4px !important;
}

.cmc-slider__swiper .swiper-wrapper {
    align-items: stretch !important;
}

/* ⚠️ EQUAL-HEIGHT FIX: with `slidesPerView: 'auto'`, Swiper does not
   always resolve a definite height on `.swiper-slide` by itself, which
   can prevent the flex "stretch" cross-axis alignment above from doing
   its job. Forcing `height: auto` + `align-self: stretch` here makes
   every slide stretch to match the TALLEST slide in its row — so all
   product cards always end up exactly the same height, regardless of
   how much or how little text/content each individual product has. Each
   skin's own root element (e.g. .cmc-slide--flux) then fills that height
   via its own `height: 100%`. */
.cmc-slider__swiper .swiper-slide {
    height: auto !important;
    align-self: stretch !important;
}

.cmc-slider__swiper .swiper-pagination {
    position: static !important;
    margin-top: 14px !important;
}

.cmc-slider__swiper .swiper-pagination-bullet {
    background: var(--cmc-s-primary, #6C47FF) !important;
    opacity: 0.3 !important;
}

.cmc-slider__swiper .swiper-pagination-bullet-active {
    opacity: 1 !important;
}

/* Shared link-reset for every skin's anchors. */
.cmc-slide a {
    text-decoration: none !important;
}

/* ==========================================================================
   Skin: Flux — full-bleed image, neon gradient badge, glow accents
   ========================================================================== */

.swiper-slide.cmc-slide--flux {
    width: 240px !important;
}

.cmc-slide--flux {
    border-radius: var(--cmc-s-radius, 16px) !important;
    overflow: hidden !important;
    background: #11151c !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.cmc-slide--flux__media {
    display: block !important;
    height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
}

.cmc-slide--flux__badge {
    position: absolute !important;
    top: 10px !important;
    inset-inline-start: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--cmc-s-primary, #6C47FF), var(--cmc-s-accent, #FF6B35)) !important;
    box-shadow: 0 0 16px var(--cmc-s-accent, #FF6B35) !important;
}

.cmc-slide--flux__body {
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 !important;
}

.cmc-slide--flux__name {
    color: #f3f4f7 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.cmc-slide--flux__price {
    color: #e7e9ee !important;
    font-size: 14px !important;
}

.cmc-slide--flux__price del {
    opacity: 0.5 !important;
}

.cmc-slide--flux__price ins {
    color: var(--cmc-s-accent, #FF6B35) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.cmc-slide--flux__stock-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
}

.cmc-slide--flux__stock-fill {
    height: 100% !important;
    background: var(--cmc-s-accent, #FF6B35) !important;
}

.cmc-slide--flux__cta {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px !important;
    border-radius: 10px !important;
    background: var(--cmc-s-primary, #6C47FF) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Skin: Minimal — clean white commercial card
   ========================================================================== */

.swiper-slide.cmc-slide--minimal {
    width: 220px !important;
}

.cmc-slide--minimal {
    border-radius: var(--cmc-s-radius, 16px) !important;
    border: 1px solid #e9eaee !important;
    background: #fff !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.cmc-slide--minimal__media {
    display: block !important;
    height: 150px !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #f4f5f7 !important;
    position: relative !important;
}

.cmc-slide--minimal__badge {
    position: absolute !important;
    top: 10px !important;
    inset-inline-start: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--cmc-s-primary, #6C47FF) !important;
    background: #fff !important;
    border: 1px solid var(--cmc-s-primary, #6C47FF) !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
}

.cmc-slide--minimal__body {
    padding: 12px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
}

.cmc-slide--minimal__name {
    color: #1a1d24 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.cmc-slide--minimal__price {
    font-size: 14px !important;
    color: #1a1d24 !important;
}

.cmc-slide--minimal__price del {
    color: #9aa0ac !important;
}

.cmc-slide--minimal__price ins {
    color: var(--cmc-s-primary, #6C47FF) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.cmc-slide--minimal__cta {
    margin-top: auto !important;
    text-align: center !important;
    padding: 8px !important;
    border-radius: 10px !important;
    border: 1px solid var(--cmc-s-primary, #6C47FF) !important;
    color: var(--cmc-s-primary, #6C47FF) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Skin: Glass — glassmorphism / backdrop blur over a soft color gradient
   ========================================================================== */

.swiper-slide.cmc-slide--glass {
    width: 230px !important;
}

.cmc-slide--glass {
    border-radius: var(--cmc-s-radius, 16px) !important;
    overflow: hidden !important;
    height: 100% !important;
    padding: 10px !important;
    background: linear-gradient(150deg, var(--cmc-s-primary, #6C47FF) 0%, var(--cmc-s-accent, #FF6B35) 100%) !important;
}

.cmc-slide--glass__inner {
    height: 100% !important;
    border-radius: calc(var(--cmc-s-radius, 16px) - 4px) !important;
    background: color-mix(in srgb, #fff 18%, transparent) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid color-mix(in srgb, #fff 30%, transparent) !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.cmc-slide--glass__media {
    display: block !important;
    height: 120px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 10px !important;
}

.cmc-slide--glass__badge {
    align-self: flex-start !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: color-mix(in srgb, #000 25%, transparent) !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
}

.cmc-slide--glass__name {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.cmc-slide--glass__price {
    color: #fff !important;
    font-size: 13px !important;
}

.cmc-slide--glass__price ins {
    color: #fff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.cmc-slide--glass__price del {
    opacity: 0.6 !important;
}

.cmc-slide--glass__cta {
    margin-top: auto !important;
    text-align: center !important;
    padding: 8px !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, #fff 90%, transparent) !important;
    color: #1a1d24 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   Skin: Bold — high-contrast banner card, oversized percent-off number
   ========================================================================== */

.swiper-slide.cmc-slide--bold {
    width: 260px !important;
}

.cmc-slide--bold {
    border-radius: var(--cmc-s-radius, 16px) !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    background: linear-gradient(160deg, var(--cmc-s-primary, #FF6B35) 0%, color-mix(in srgb, var(--cmc-s-primary, #FF6B35) 60%, #000) 100%) !important;
    color: #fff !important;
}

.cmc-slide--bold__media {
    display: block !important;
    flex-shrink: 0 !important;
    width: 90px !important;
    background-size: cover !important;
    background-position: center !important;
}

.cmc-slide--bold__body {
    flex: 1 !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.cmc-slide--bold__percent {
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: var(--cmc-s-accent, #6C47FF) !important;
    margin-bottom: 4px !important;
}

.cmc-slide--bold__percent span {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 0.85 !important;
}

/* ⚠️ CLEANUP: the original rule declared `display` twice (`block` then
   `-webkit-box`) — the first was dead code, always overridden by the
   second. Removed for clarity; behavior is unchanged. */
.cmc-slide--bold__name {
    display: -webkit-box !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.cmc-slide--bold__price {
    font-size: 13px !important;
}

.cmc-slide--bold__price ins {
    color: #fff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.cmc-slide--bold__price del {
    opacity: 0.55 !important;
}

.cmc-slide--bold__cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    padding: 9px !important;
    border-radius: 10px !important;
    background: var(--cmc-s-accent, #6C47FF) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   Skin: Compact — small, dense catalog card
   ========================================================================== */

.swiper-slide.cmc-slide--compact {
    width: 160px !important;
}

.cmc-slide--compact {
    border-radius: var(--cmc-s-radius, 16px) !important;
    border: 1px solid #e9eaee !important;
    background: #fff !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.cmc-slide--compact__media {
    display: block !important;
    height: 110px !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #f4f5f7 !important;
    position: relative !important;
}

.cmc-slide--compact__badge {
    position: absolute !important;
    top: 6px !important;
    inset-inline-start: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--cmc-s-primary, #6C47FF) !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
}

.cmc-slide--compact__body {
    padding: 8px 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

.cmc-slide--compact__name {
    color: #1a1d24 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.cmc-slide--compact__row {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

.cmc-slide--compact__price {
    font-size: 12px !important;
    color: #1a1d24 !important;
}

.cmc-slide--compact__price ins {
    color: var(--cmc-s-primary, #6C47FF) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.cmc-slide--compact__price del {
    color: #9aa0ac !important;
}

.cmc-slide--compact__cta {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: var(--cmc-s-primary, #6C47FF) !important;
    color: #fff !important;
    font-size: 13px !important;
}

/* -------------------------------------------------------------------- */
/* Responsive — narrower slide widths on small screens                  */
/* -------------------------------------------------------------------- */

@media (max-width: 640px) {
    .swiper-slide.cmc-slide--flux    { width: 200px !important; }
    .swiper-slide.cmc-slide--minimal { width: 180px !important; }
    .swiper-slide.cmc-slide--glass   { width: 190px !important; }
    .swiper-slide.cmc-slide--bold    { width: 220px !important; }
    .swiper-slide.cmc-slide--compact { width: 130px !important; }

    .cmc-slider__head {
        align-items: flex-start !important;
    }
}