/* اسلایدرِ حرفه‌ای (ماژولِ richslider) — Views/Shared/Components/MainSlider/RichSlider.cshtml.
   رنگ‌ها متغیرند تا هر قالب بتواند روی .rs-wrap بازنویسی‌شان کند. فونت از قالب ارث می‌رسد. */
.rs-wrap {
    --rs-primary: #1e293b;
    --rs-accent: #c86d51;
    --rs-accent-hover: #b0573c;
    --rs-gold: #d4a373;
    --rs-bg: #f8f6f2;
    --rs-text: #0f172a;
    --rs-muted: #64748b;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 12px;
    direction: rtl;
}
.rs-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 480;
    max-height: 480px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--rs-bg);
    box-shadow: 0 20px 40px -18px rgba(15, 23, 42, .35);
}
.rs-slide {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1), visibility .8s;
}
.rs-slide.active { opacity: 1; visibility: visible; transform: scale(1); }

.rs-banner, .rs-banner picture, .rs-banner img { display: block; width: 100%; height: 100%; }
.rs-banner img { object-fit: cover; }

.rs-content {
    position: relative;
    z-index: 2;
    width: 52%;
    height: 100%;
    /* راست: فلشِ «قبلی» (۲۰px + ۴۸px) نباید روی متن بیفتد. */
    padding: clamp(20px, 3.5vw, 50px) 92px clamp(20px, 2.8vw, 40px) clamp(20px, 2.8vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(100deg, var(--rs-bg) 85%, rgba(248, 246, 242, 0) 100%);
}
.rs-media { position: relative; width: 48%; height: 100%; overflow: hidden; box-sizing: border-box; padding: 14px; }
.rs-media picture, .rs-media img { display: block; width: 100%; height: 100%; }
/* contain، نه cover: عکسِ کالا عمودی یا مربع است (۸۹۶×۱۱۹۵، ۵۰۰×۵۰۰) و قابِ دسکتاپ افقی (~۶۷۰×۴۶۷)؛
   cover نیمهٔ پایینِ لباس و سرِ مدل را می‌برید. padding جای زومِ ۴٪ است تا لبهٔ عکس بریده نشود. */
.rs-media img { object-fit: contain; object-position: center; transform-origin: center; transition: transform 6s ease-out; }
/* زوم فقط بعد از rs-ready (rich-slider.js): اسلایدِ اول با کلاسِ active رندر می‌شود، پس بدونِ آن
   transition اجرا نمی‌شد و عکس از همان لحظهٔ اول بزرگ‌شده دیده می‌شد. */
.rs-slider.rs-ready .rs-slide.active .rs-media img { transform: scale(1.04); }

.rs-watermark {
    position: absolute;
    bottom: 20px;
    right: 40px;
    font-size: clamp(48px, 7.6vw, 110px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 12px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .03);
    pointer-events: none;
    font-family: sans-serif;
    white-space: nowrap;
}
.rs-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(8px, 1.1vw, 16px); }
.rs-brand {
    background: var(--rs-primary);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 30px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.rs-badge {
    background: rgba(200, 109, 81, .15);
    color: var(--rs-accent);
    border: 1px solid rgba(200, 109, 81, .3);
    font-weight: 600;
    font-size: 13px;
    padding: 4px 14px;
    border-radius: 30px;
}
.rs-title {
    margin: 0 0 clamp(8px, 1vw, 14px);
    font-size: clamp(20px, 2.65vw, 38px);
    font-weight: 800;
    line-height: 1.35;
    color: var(--rs-text);
}
.rs-highlight { position: relative; z-index: 0; display: inline-block; color: var(--rs-accent); }
.rs-highlight::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 4px;
    z-index: -1;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(200, 109, 81, .2);
}
.rs-subtitle {
    max-width: 520px;
    margin: 0 0 clamp(12px, 2vw, 28px);
    font-size: clamp(13px, 1.12vw, 16px);
    line-height: 1.7;
    color: var(--rs-muted);
}
.rs-features { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 clamp(12px, 2vw, 30px); padding: 0; list-style: none; }
.rs-features li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #334155; }
.rs-features svg { width: 15px; height: 15px; fill: var(--rs-accent); flex: 0 0 auto; }
.rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.rs-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(10px, 1vw, 14px) clamp(20px, 2.2vw, 32px);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rs-accent), var(--rs-accent-hover));
    color: #fff;
    font-weight: 700;
    font-size: clamp(13px, 1.05vw, 15px);
    text-decoration: none;
    box-shadow: 0 10px 20px -5px rgba(200, 109, 81, .4);
    transition: transform .3s ease, box-shadow .3s ease;
}
.rs-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 24px -5px rgba(200, 109, 81, .5); }
.rs-btn-primary svg { width: 14px; height: 14px; fill: currentColor; }
.rs-btn-secondary {
    padding: clamp(8px, .9vw, 12px) clamp(16px, 1.7vw, 24px);
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    color: var(--rs-text);
    font-weight: 600;
    font-size: clamp(12px, 1vw, 14px);
    text-decoration: none;
    transition: all .3s ease;
}
.rs-btn-secondary:hover { border-color: var(--rs-primary); background: var(--rs-primary); color: #fff; }

.rs-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    color: var(--rs-text);
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
    transition: all .3s ease;
}
.rs-nav:hover { background: #fff; color: var(--rs-accent); transform: translateY(-50%) scale(1.1); }
.rs-nav svg { width: 16px; height: 16px; fill: currentColor; }
.rs-prev { right: 20px; }
.rs-next { left: 20px; }
.rs-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(15, 23, 42, .4);
    backdrop-filter: blur(10px);
    transform: translateX(-50%);
}
.rs-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: all .3s ease;
}
.rs-dot.active { width: 32px; border-radius: 10px; background: var(--rs-accent); }
.rs-progress { position: absolute; right: 0; bottom: 0; z-index: 10; width: 100%; height: 4px; background: rgba(0, 0, 0, .05); }
.rs-progress-bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--rs-gold), var(--rs-accent)); }

@media (max-width: 1024px) {
    .rs-features { display: none; }
    .rs-nav { width: 40px; height: 40px; }
    .rs-prev { right: 12px; }
    .rs-next { left: 12px; }
    .rs-content { padding-right: 68px; }
}
@media (max-width: 768px) {
    .rs-slider { aspect-ratio: auto; max-height: none; height: 540px; border-radius: 16px; }
    .rs-slide { flex-direction: column-reverse; }
    .rs-content { width: 100%; height: 58%; padding: 20px 20px 56px; justify-content: flex-start; background: var(--rs-bg); }
    .rs-media { width: 100%; height: 42%; }
    .rs-watermark { display: none; }
    .rs-nav { display: none; }
    .rs-dots { bottom: 14px; }
}