:root {
    --primary-green: #3fc06b;
    --primary-blue: #0b6bd6;
    --light-bg: #f8f9fa;
    --text-dark: #1a1a1a;
    --text-grey: #555;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
}

/* Helpers */
.text-blue { color: var(--primary-blue); }
.text-green { color: var(--primary-green); }
.bg-blue-light { background-color: #eaf3fa; }

/* Buttons */
.btn-green {
    background-color: var(--primary-green);
    color: white;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    transition: transform 0.2s;
}
.btn-green:hover {
    background-color: #36a85d;
    color: white;
    transform: translateY(-2px);
}

/* Header */
.top-bar {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    font-size: 0.9rem;
}
.logo { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.5px; }

/* Hero Section */
.hero-section { padding: 60px 0; }
.hero-title { font-weight: 800; font-size: 3rem; line-height: 1.2; margin-bottom: 20px; }
.feature-list li { margin-bottom: 12px; font-weight: 500; }
.check-icon { color: var(--primary-blue); margin-right: 10px; }

/* Trust Strip */

.trust-strip {
    background-color: var(--primary-blue);
    color: white;          /* رنگ متن */
    padding: 10px 0;
    overflow: hidden;          /* مخفی کردن بخش‌های بیرون زده */
    white-space: nowrap;       /* جلوگیری از شکستن متن */
    border-bottom: 1px solid #dbeafe;
    position: relative;
}

/* نگهدارنده متن‌ها */
.marquee-wrapper {
    display: flex;
    width: 100%;
    justify-content: center; /* در حالت پیش‌فرض (دسکتاپ) وسط‌چین */
}

/* استایل هر واحد متن */
.marquee-text {
    padding: 0 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- حالت دسکتاپ (بزرگتر از 992 پیکسل) --- */
@media (min-width: 992px) {
    /* متن دوم را مخفی کن تا تکراری دیده نشود */
    .marquee-text:nth-child(2) {
        display: none;
    }
}

/* --- حالت تبلت و موبایل (کوچکتر از 991 پیکسل) --- */
@media (max-width: 991px) {
    .marquee-wrapper {
        display: inline-flex;  /* اجازه می‌دهد عرض محتوا بیشتر از صفحه باشد */
        justify-content: flex-start;
        /* انیمیشن: نام - مدت زمان - نوع حرکت - تکرار */
        animation: scroll-left 15s linear infinite;
        /* عرض را روی fit-content می‌گذاریم تا جا برای حرکت باشد */
        width: auto;
    }

    /* متن دوم حتما نمایش داده شود تا لوپ کامل شود */
    .marquee-text:nth-child(2) {
        display: inline-block;
    }
}

/* تعریف انیمیشن حرکت به چپ */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* حرکت به اندازه 50% (چون دو تا متن داریم، وقتی نصفش رد شد یعنی اولی تمام شده و دومی جایگزین شده) */
        transform: translateX(-50%);
    }
}


/* Comparison Section */
.comparison-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 15px;
}
.badge-red { background-color: #ffebee; color: #d32f2f; }
.badge-green { background-color: #e8f5e9; color: var(--primary-green); }

/* Before/After Slider Container */
.ba-slider {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 12px;
    cursor: col-resize;
}
.ba-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
/* Using placeholder colors/images for demonstration */
.img-before { background-image: url('https://placehold.co/600x400/e0e0e0/555?text=Bad+Posture'); }
.img-after {
    background-image: url('https://placehold.co/600x400/3fc06b/fff?text=Correct+Alignment');
    width: 50%; /* Initial state */
    border-right: 3px solid white;
}
.slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Testimonials */
.testimonial-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
}
.stars { color: var(--primary-blue); margin-bottom: 10px; }

/* Comparison Table */
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.comparison-table th, .comparison-table td { padding: 15px; text-align: center; border-bottom: 1px solid #eee; }
.comparison-table th { background: #f8f9fa; }
.col-belvoro { background-color: #eaf3fa; border: 2px solid var(--primary-blue); border-bottom: none; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.cell-belvoro { background-color: #eaf3fa; border-left: 2px solid var(--primary-blue); border-right: 2px solid var(--primary-blue); }
.cell-belvoro-bottom { border-bottom: 2px solid var(--primary-blue); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

/* Product Section */
.product-price-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.product-price-box.active {
    border: 2px solid var(--primary-green);
    background-color: #f0fdf4;
}
.strike-price { text-decoration: line-through; color: #999; }
.final-price { font-weight: 700; font-size: 1.1rem; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-title { font-size: 2rem; }
    .ba-slider { height: 250px; }
}

/* حذف آیکون پیش‌فرض بوت‌استرپ */
.accordion-button::after {
    background-image: none !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f067"; /* کد آیکون مثبت (+) */
    transform: none !important; /* جلوگیری از چرخش */
    color: #999;
}

/* آیکون وقتی منو باز است */
.accordion-button:not(.collapsed)::after {
    content: "\f068"; /* کد آیکون منفی (-) */
    color: #333;
}

/* تنظیم فاصله متن سوال */
.accordion-button {
    justify-content: space-between;
}
.hover-white:hover {
    color: #fff !important;
    padding-left: 5px; /* Small movement effect */
}
.transition-all {
    transition: all 0.3s ease;
}
.hover-primary:hover {
    color: var(--primary-blue) !important; /* Uses the blue defined in header */
}
.hover-white:hover {
    color: #fff !important;
    padding-left: 5px; /* افکت حرکت کوچک */
}
.hover-primary:hover {
    color: var(--primary-blue, #0d6efd) !important;
}
.transition-all {
    transition: all 0.3s ease;
}


/* استایل کوچک برای دکمه‌های ناوبری Swiper */
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

/* استایل بردر سبز برای تامنیل فعال */
.thumb-trigger {
    border: 2px solid transparent;
    transition: all 0.3s;
}
.thumb-trigger.active-thumb {
    border-color: #198754 !important; /* سبز */
    opacity: 1;
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
        display: inline-block !important; /* برای اطمینان از قرارگیری صحیح */
    }
}
.swiper-button-next{
    color: #198754;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    right: 10px;
}

.swiper-button-prev{
    color: #198754; width: 40px; height: 40px; border-radius: 50%; left: 10px;
}
/* Comparison Section Styles */
.section-subtitle {
    letter-spacing: 1px;
    font-size: 0.75rem;
}

.text-relaxed {
    line-height: 1.7;
}

.link-brand {
    color: #0b6bd6;
}
/* Testimonials Section Styles */
.testimonial-avatar {
    object-fit: cover;
}

.testimonial-title {
    font-size: 0.95rem;
}

.testimonial-text {
    line-height: 1.6;
}

/* Utility for star rating color if not already defined */
.text-blue {
    color: #0b6bd6; /* Or your brand primary color */
}
/* Desk Pain & Stats Section Styles */
.bg-pale-blue {
    background-color: #F0F6FF;
}

.stat-circle {
    width: 60px;
    height: 60px;
    border-width: 2px;
    border-style: solid;
    font-weight: 700;
    font-size: 1.1rem;
    /* Center content flex settings are in HTML (d-flex),
       but strictly style-related attributes are here */
}

.stat-circle-danger {
    border-color: #dc3545;
    color: #dc3545;
}

.stat-circle-brand {
    border-color: #0b6bd6;
    color: #0b6bd6;
}

.stat-label {
    font-size: 0.75rem;
}
/* Science & Expert Section Styles */
.expert-subtitle {
    letter-spacing: 1px;
}

.expert-avatar {
    object-fit: cover;
}

.expert-quote-text {
    line-height: 1.6;
}
/* Biomechanics & Specs Section Styles */
.bg-soft-blue {
    background-color: #F4F9FF;
}

/* Typography Colors */
.text-brand-blue {
    color: #0b6bd6;
}

.text-brand-green {
    color: #3fc06b;
}

/* Slider Components */
.slider-track-wrapper {
    height: 20px;
}

.slider-track {
    height: 4px;
}

/* Common Dot Styles */
.slider-dot-base {
    width: 14px;
    height: 14px;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Specific Dot Variations (Position & Color) */
.slider-dot-blue {
    left: 25%; /* Hardness Position */
    box-shadow: 0 0 0 2px #0b6bd6;
}

.slider-dot-green {
    left: 60%; /* Height Position */
    box-shadow: 0 0 0 2px #3fc06b;
}

/* Tiny Labels */
.text-tiny {
    font-size: 10px;
}

/* Benefits Section Styles */
.bg-benefits {
    background-color: #F0F6FF;
}

.benefit-title {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.icon-zzz-small {
    font-size: 0.8rem;
}

.icon-slash-overlay {
    font-size: 2rem;
    opacity: 0.5;
}
/* Product Section Custom Styles */

/* تنظیمات نگهدارنده چسبان گالری */
.gallery-sticky-top {
    top: 20px;
    z-index: 1;
}

/* تنظیمات تصویر اصلی اسلایدر */
.product-main-img {
    height: 450px;
    object-fit: cover;
}

/* تنظیمات تصاویر کوچک (Thumbnails) */
.product-thumb-img {
    cursor: pointer;
    height: 60px;
    object-fit: cover;
    width: 100%;
}

/*
   نکته: کلاس‌های زیر در HTML شما استفاده شده بودند اما استاندارد بوت‌استرپ نیستند.
   برای اینکه ظاهر دقیقاً حفظ شود، من استایل‌های احتمالی آن‌ها را هم اضافه کردم.
   اگر این‌ها را در فایل CSS دیگری دارید، می‌توانید این بخش پایین را حذف کنید.
*/
.text-green {
    color: #198754; /* رنگ سبز استاندارد موفقیت */
}

.btn-green {
    background-color: #198754;
    color: white;
    border: none;
}
.btn-green:hover {
    background-color: #157347;
    color: white;
}

.product-price-box {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.product-price-box.active {
    border-color: #198754;
    background-color: #f8fffb;
    box-shadow: 0 0 0 1px #198754;
}

.strike-price {
    text-decoration: line-through;
    color: #6c757d;
}
/* Custom Background Color */
.bg-soft-blue {
    background-color: #F0F6FF;
}

/*
   نکته اضافی برای بهبود جزئیات:
   تصاویر شما کلاس shadow-sm دارند. اگر بخواهید دقیقاً طبق دیزاین‌های مدرن
   سایه نرم‌تری داشته باشید، می‌توانید این کلاس را هم اضافه کنید (اختیاری):
*/
.shadow-soft {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.05) !important;
}
/* Feature Diagram Image */
.feature-diagram-img {
    object-fit: cover;
}

/* Video Testimonial Card Wrapper */
.testimonial-video-card {
    height: 450px;
    /* این کلاس جایگزین style="height: 450px;" شده است */
}

/* Play Button Overlay Container */
.play-btn-container {
    z-index: 10;
    /* این کلاس جایگزین style="z-index: 10;" شده است */
}

/* Play Icon Style */
.play-btn-icon {
    opacity: 0.9;
    /* این کلاس جایگزین style="opacity: 0.9;" شده است */
}
/* محدود کردن عرض بخش نظرات برای خوانایی بهتر */
.reviews-limit-container {
    max-width: 900px;
}

/* استایل خاص برای تاریخ ثبت نظر */
.review-date {
    font-size: 0.85rem;
}

/* استایل تصاویر بندانگشتی کاربران */
.review-thumb-img {
    width: 80px;
    height: 80px;
    /* اطمینان از اینکه عکس دفرمه نمی‌شود (اگر کلاس بوت‌استرپ کار نکرد) */
    object-fit: cover;
}
/* رنگ پس‌زمینه آبی خیلی روشن مخصوص بخش FAQ */
.section-bg-light {
    background-color: #F4F9FF;
}

/* محدود کردن عرض کانتینر برای خوانایی بهتر پرسش و پاسخ‌ها */
.container-narrow {
    max-width: 800px;
}

/* رنگ خاص متن برای دکمه‌های آکاردئون (خاکستری تیره) */
.accordion-btn-custom {
    color: #333;
}

/* دکمه سبز رنگ CTA (دعوت به اقدام) */
.btn-green-cta {
    background-color: #5cb85c;
    border: none;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

/* هاور دکمه سبز (اختیاری برای تعامل بهتر) */
.btn-green-cta:hover {
    background-color: #4cae4c; /* کمی تیره‌تر هنگام هاور */
    color: #fff;
}