/* ==========================================================================
   NCALab Product Details Modern Theme Stylesheet
   File: /css/productDetails.css
   ========================================================================== */

:root {
    --pd-primary: #0062eb;
    --pd-primary-dark: #004dc0;
    --pd-cyan: #00d2ff;
    --pd-navy: #091322;
    --pd-navy-surface: #0f172a;
    --pd-navy-card: #1e293b;
    --pd-green: #0d8a43;
    --pd-green-dark: #086b33;
    --pd-text-main: #0f172a;
    --pd-text-muted: #64748b;
    --pd-border: #e2e8f0;
    --pd-bg-light: #f8fafc;
    --pd-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --pd-shadow-elevated: 0 20px 40px rgba(7, 13, 24, 0.12);
}

/* ابطال رفتارهای مخرب Style.css بر روی صفحه جزئیات */
.product-page-main,
.product-page-main * {
    box-sizing: border-box !important;
}

.product-page-main {
    direction: rtl !important;
    text-align: right !important;
    font-family: 'Vazirmatn', Tahoma, sans-serif !important;
    color: var(--pd-text-main) !important;
    line-height: 1.8 !important;
    max-width: 1240px !important;
    margin: 20px auto 70px auto !important;
    padding: 0 16px !important;
    display: block !important;
    min-height: auto !important;
    width: 100% !important;
}

/* ==========================================================================
   ۱. بنر نسخه آنلاین بتا (Online Banner)
   ========================================================================== */
.online-banner-inline {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1.5px solid #bfdbfe !important;
    border-right: 6px solid var(--pd-primary) !important;
    border-radius: 16px !important;
    padding: 16px 22px !important;
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.06) !important;
}

.online-banner-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #1e3a8a !important;
    font-size: 0.96rem !important;
    font-weight: 600 !important;
}

.online-banner-icon {
    font-size: 1.7rem !important;
    flex-shrink: 0 !important;
}

.beta-badge {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd !important;
    font-size: 0.78rem !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    margin-right: 4px !important;
    display: inline-block !important;
}

.btn-online-action {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
    flex-shrink: 0 !important;
}

    .btn-online-action:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
    }

/* ==========================================================================
   ۲. هدر محصول (Hero Card with Glassmorphism)
   ========================================================================== */
.product-hero-card {
    position: relative !important;
    background: linear-gradient(135deg, #091322 0%, #0d2346 50%, #0052cc 100%) !important;
    border-radius: 22px !important;
    padding: 30px 35px !important;
    margin: 0 0 25px 0 !important;
    box-shadow: 0 15px 35px rgba(9, 19, 34, 0.15) !important;
    overflow: hidden !important;
    transition: max-height 0.5s ease-in-out !important;
    width: 100% !important;
    display: block !important;
}

.glass-hero-container {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 18px !important;
    padding: 26px !important;
}

.hero-info-column {
    text-align: right !important;
}

.test-category-tag {
    display: inline-block !important;
    background: rgba(0, 210, 255, 0.18) !important;
    border: 1px solid rgba(0, 210, 255, 0.35) !important;
    color: var(--pd-cyan) !important;
    padding: 4px 14px !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.test-hero-title {
    font-size: 1.95rem !important;
    color: #ffffff !important;
    margin: 0 0 14px 0 !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
}

.test-hero-summary {
    color: #cbd5e1 !important;
    line-height: 2 !important;
    font-size: 1.02rem !important;
    text-align: justify !important;
    margin: 0 0 18px 0 !important;
}

.extra-content-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    margin: 18px 0 !important;
}

.btn-more-info {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 9px 20px !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

    .btn-more-info:hover {
        background: rgba(255, 255, 255, 0.22) !important;
        border-color: #ffffff !important;
    }

.btn-toggle-arrow {
    font-size: 0.75rem !important;
    transition: transform 0.3s ease !important;
}

.product-hero-card.is-expanded .btn-toggle-arrow {
    transform: rotate(180deg) !important;
}

.extra-content {
    max-height: 0 !important;
    overflow-y: hidden !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0 !important;
}

.product-hero-card.is-expanded .extra-content {
    max-height: 480px !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    padding: 10px 5px !important;
}

.task-history-wrapper {
    padding: 10px 0 !important;
}

.history-title {
    color: var(--pd-cyan) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
}

.history-desc {
    color: #e2e8f0 !important;
    font-size: 0.98rem !important;
    line-height: 2 !important;
    margin-bottom: 18px !important;
    padding-right: 16px !important;
    border-right: 3px solid rgba(0, 210, 255, 0.3) !important;
    text-align: justify !important;
}

/* ==========================================================================
   ۳. نوار پیوندهای دسترسی سریع (Quick Links)
   ========================================================================== */
.quick-links-products {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
}

.nav-link-item {
    font-size: 0.88rem !important;
    color: #334155 !important;
    text-decoration: none !important;
    padding: 7px 16px !important;
    border-radius: 50px !important;
    border: 1px solid var(--pd-border) !important;
    background: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
    display: inline-block !important;
}

    .nav-link-item:hover {
        background: #0f172a !important;
        color: #ffffff !important;
        border-color: #0f172a !important;
        transform: translateY(-2px) !important;
    }

    .nav-link-item.highlight-psychometrics {
        border-color: #059669 !important;
        color: #059669 !important;
        background: #ecfdf5 !important;
        font-weight: 700 !important;
    }

    .nav-link-item.highlight-citation {
        border-color: #2563eb !important;
        color: #2563eb !important;
        background: #eff6ff !important;
        font-weight: 700 !important;
    }

.nav-link-seo {
    color: var(--pd-primary) !important;
    border-color: #93c5fd !important;
    background: #eff6ff !important;
}

/* ==========================================================================
   ۴. ساختار گرید دو ستونه (ستون اول = سایدبار قیمت در راست، ستون دوم = محتوا در چپ)
   ========================================================================== */
.product-layout-grid {
    display: grid !important;
    grid-template-columns: 340px 1fr !important; /* ستون ۳۴۰ پیکسلی در سمت راست و ستون محتوا در سمت چپ در حالت RTL */
    gap: 25px !important;
    align-items: start !important;
    margin-bottom: 35px !important;
    width: 100% !important;
}

.product-sidebar-column {
    position: sticky !important;
    top: 90px !important;
    z-index: 100 !important;
    width: 100% !important;
}

.product-main-column {
    min-width: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   ۵. شناسنامه مشخصات فنی آزمون (Specs Cards)
   ========================================================================== */
.section-heading-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--pd-border) !important;
    padding-bottom: 10px !important;
}

.heading-accent {
    width: 5px !important;
    height: 22px !important;
    background-color: var(--pd-primary) !important;
    border-radius: 4px !important;
}

    .heading-accent.dark-accent {
        background-color: var(--pd-navy) !important;
    }

.section-heading-bar h2 {
    color: var(--pd-navy) !important;
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 850 !important;
}

.specs-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 30px !important;
}

.modern-spec-card {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid var(--pd-border) !important;
    box-shadow: var(--pd-shadow-card) !important;
    transition: all 0.25s ease !important;
}

    .modern-spec-card:hover {
        border-color: #93c5fd !important;
        transform: translateY(-2px) !important;
    }

.card-inner {
    padding: 14px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
}

.card-label {
    font-size: 0.88rem !important;
    color: var(--pd-text-muted) !important;
    font-weight: 600 !important;
}

.card-value {
    font-size: 0.92rem !important;
    color: var(--pd-text-main) !important;
    font-weight: 800 !important;
}

.ltr-text {
    direction: ltr !important;
    font-family: Arial, sans-serif !important;
}

.purchase-highlight {
    border: 1.5px dashed #10b981 !important;
    background-color: #f0fdf4 !important;
}

    .purchase-highlight .card-value {
        color: #059669 !important;
    }

/* بلوک‌های متنی توضیحات */
.info-blocks-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin-bottom: 30px !important;
}

.modern-info-block {
    background: #ffffff !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    box-shadow: var(--pd-shadow-card) !important;
}

.info-block-header {
    font-size: 1rem !important;
    color: var(--pd-navy) !important;
    margin: 0 0 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 800 !important;
}

    .info-block-header::before {
        content: "" !important;
        width: 8px !important;
        height: 8px !important;
        background-color: var(--pd-primary) !border-radius: 50% !important;
    }

.info-body-content {
    line-height: 2.1 !important;
    text-align: justify !important;
    color: #334155 !important;
    font-size: 0.95rem !important;
}

/* ==========================================================================
   ۶. نمونه گزارش آزمون (Reports Section)
   ========================================================================== */
.NCALABTaskDetailsTitles {
    display: flex !important;
    align-items: center !important;
    direction: rtl !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 18px !important;
    margin: 25px 0 18px 0 !important;
    box-sizing: border-box !important;
    background: linear-gradient(90deg, #0062eb 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    border-right: 6px solid #1e3a8a !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    text-align: right !important;
}

.TestReportDivClass {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 18px 0 30px 0 !important;
    direction: rtl !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.TestReport1Class {
    background: #ffffff !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    text-align: center !important;
    box-shadow: var(--pd-shadow-card) !important;
    transition: transform 0.25s ease !important;
    min-width: 200px !important;
    display: inline-block !important;
}

    .TestReport1Class:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
        border-color: #93c5fd !important;
    }

.report-card-title {
    margin: 0 0 10px 0 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--pd-navy) !important;
}

.ReportImageCssClass {
    max-width: 130px !important;
    height: auto !important;
    margin: 8px auto !important;
    border-radius: 8px !important;
    display: block !important;
    border: 1px solid #e2e8f0 !important;
}

.report1LinkButtonCssClass {
    display: inline-block !important;
    margin-top: 8px !important;
    padding: 7px 16px !important;
    background: #eff6ff !important;
    color: var(--pd-primary) !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

    .report1LinkButtonCssClass:hover {
        background: var(--pd-primary) !important;
        color: #ffffff !important;
    }

/* ==========================================================================
   ۷. گالری اسلایدر تصاویر (نمایش تضمین‌شده و ریسپانسیو)
   ========================================================================== */
.gallery-section-container {
    margin-bottom: 30px !important;
    width: 100% !important;
}

.gallery-wrapper {
    position: relative !important;
    max-width: 100% !important;
    margin: 18px auto !important;
    direction: rtl !important;
}

.main-slider {
    position: relative !important;
    background: #091322 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--pd-shadow-soft) !important;
    min-height: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.slide {
    display: none;
    width: 100% !important;
    text-align: center !important;
}

    .slide.active-slide {
        display: block !important;
    }

    .slide.fade {
        animation: fadeEffect 0.35s ease !important;
    }

@keyframes fadeEffect {
    from {
        opacity: 0.6;
    }

    to {
        opacity: 1;
    }
}

.img-container {
    width: 100% !important;
    height: 420px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #070d18 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

    .img-container img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        transition: transform 0.25s ease !important;
        display: block !important;
        margin: 0 auto !important;
    }

        .img-container img:hover {
            transform: scale(1.02) !important;
        }

.nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(15, 23, 42, 0.75) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: all 0.25s ease !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .nav-btn:hover {
        background: var(--pd-primary) !important;
        border-color: var(--pd-primary) !important;
    }

    .nav-btn.prev {
        right: 14px !important;
    }

    .nav-btn.next {
        left: 14px !important;
    }

.caption-bar {
    text-align: center !important;
    padding: 12px !important;
    background: #0f172a !important;
    color: #cbd5e1 !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.thumbnails-container {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    flex-wrap: wrap !important;
}

.thumb-img {
    width: 75px !important;
    height: 52px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    opacity: 0.5 !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    background: #1e293b !important;
}

    .thumb-img.active,
    .thumb-img:hover {
        opacity: 1 !important;
        border-color: var(--pd-cyan) !important;
        transform: translateY(-2px) !important;
    }

/* فریم ویدیو */
.ProductDetailsVideoDivClass {
    margin-top: 25px !important;
}

.video-responsive-frame {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    background: #000 !important;
}

    .video-responsive-frame iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }

/* ==========================================================================
   ۸. سایدبار قیمت و خرید (در سمت راست دسکتاپ)
   ========================================================================== */
.DetailsPriceDiv {
    background: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: var(--pd-shadow-elevated) !important;
    border: 1px solid var(--pd-border) !important;
    overflow: hidden !important;
    direction: rtl !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
}

.product-title-box {
    padding: 18px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    text-align: center !important;
    border-bottom: 1px solid var(--pd-border) !important;
}

    .product-title-box h4 {
        margin: 0 !important;
        color: var(--pd-navy) !important;
        font-size: 1.1rem !important;
        font-weight: 850 !important;
    }

.sidebar-meta-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 14px 0 14px !important;
}

.sidebar-anchor-pill {
    font-size: 0.78rem !important;
    color: var(--pd-text-muted) !important;
    text-decoration: none !important;
    background: #f1f5f9 !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
    border: 1px solid #e2e8f0 !important;
}

    .sidebar-anchor-pill:hover {
        color: var(--pd-primary) !important;
        background: #e2e8f0 !important;
    }

    /* ⭐ بهینه‌سازی و برجسته‌سازی ویژه باتن «تفسیر و کاربرد تخصصی» ⭐ */
    .sidebar-anchor-pill.accent-pill {
        background: linear-gradient(135deg, #0284c7 0%, #0062eb 100%) !important;
        color: #ffffff !important;
        font-weight: 850 !important;
        font-size: 0.84rem !important;
        padding: 6px 14px !important;
        border-radius: 9px !important;
        border: 1px solid #38bdf8 !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        animation: pulseAccentGlow 2.5s infinite ease-in-out !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }

        .sidebar-anchor-pill.accent-pill::before {
            content: "📊" !important;
            font-size: 0.95rem !important;
            display: inline-block !important;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)) !important;
        }

        .sidebar-anchor-pill.accent-pill:hover {
            background: linear-gradient(135deg, #0369a1 0%, #004dc0 100%) !important;
            color: #ffffff !important;
            transform: translateY(-2px) scale(1.03) !important;
            box-shadow: 0 6px 18px rgba(0, 98, 235, 0.5) !important;
            border-color: #7dd3fc !important;
        }

@keyframes pulseAccentGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 98, 235, 0.45);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(0, 98, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 98, 235, 0);
    }
}

.price-container {
    padding: 20px 18px 16px 18px !important;
    text-align: center !important;
}

.price-label {
    display: block !important;
    font-size: 0.86rem !important;
    color: var(--pd-text-muted) !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
}

.price-digits-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.price-value {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    color: var(--pd-navy) !important;
    direction: ltr !important;
}

.price-unit {
    font-size: 0.95rem !important;
    color: #475569 !important;
    font-weight: 700 !important;
}

.license-term-text {
    display: block !important;
    font-size: 0.76rem !important;
    color: #10b981 !important;
    font-weight: 700 !important;
}

.action-buttons-wrapper {
    padding: 0 18px 18px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.btn-buy-desktop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #0d8a43 0%, #086b33 100%) !important;
    color: #ffffff !important;
    padding: 13px 16px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    border: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(13, 138, 67, 0.3) !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

    .btn-buy-desktop:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(13, 138, 67, 0.4) !important;
    }

.btn-buy-online {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1.5px solid #bae6fd !important;
    padding: 11px 16px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

    .btn-buy-online:hover {
        background: #e0f2fe !important;
        border-color: #38bdf8 !important;
        transform: translateY(-2px) !important;
    }

.sidebar-guarantee-badges {
    border-top: 1px solid var(--pd-border) !important;
    padding: 12px 18px !important;
    background: #f8fafc !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.guarantee-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    color: var(--pd-text-muted) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   ۹. برچسب‌ها و تگ‌های مرتبط (Tags Cloud)
   ========================================================================== */
.TagsOfwebsiteDiv {
    direction: rtl !important;
    text-align: right !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 22px 26px !important;
    margin: 25px 0 !important;
    border: 1px solid var(--pd-border) !important;
    box-shadow: var(--pd-shadow-card) !important;
    width: 100% !important;
}

.TagsOfwebsiteTitles {
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    color: var(--pd-navy) !important;
    margin: 0 0 14px 0 !important;
}

.tags-container {
    text-align: right !important;
}

.TagsOfwebsiteDiv a {
    display: inline-block !important;
    background: #f8fafc !important;
    color: #475569 !important;
    text-decoration: none !important;
    padding: 6px 14px !important;
    margin: 3px !important;
    border-radius: 50px !important;
    font-size: 0.84rem !important;
    border: 1px solid var(--pd-border) !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
}

    .TagsOfwebsiteDiv a:hover {
        background: var(--pd-primary) !important;
        color: #ffffff !important;
        border-color: var(--pd-primary) !important;
        transform: translateY(-2px) !important;
    }

/* ==========================================================================
   ۱۰. بخش مزایا و سوالات متداول (Trust & FAQ)
   ========================================================================== */
.ncalab-footer-additions {
    margin-top: 35px !important;
    width: 100% !important;
}

.trust-badges {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    margin: 18px 0 30px 0 !important;
}

.badge-card {
    background: #ffffff !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    text-align: right !important;
    box-shadow: var(--pd-shadow-card) !important;
    transition: all 0.25s ease !important;
}

    .badge-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
    }

    .badge-card.card-green-edge {
        border-right: 4px solid #059669 !important;
        text-decoration: none !important;
    }

    .badge-card.card-blue-edge {
        border-right: 4px solid var(--pd-primary) !important;
        text-decoration: none !important;
    }

.badge-icon {
    font-size: 2rem !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.badge-card h4 {
    color: var(--pd-navy) !important;
    margin: 0 0 8px 0 !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
}

.badge-card p {
    font-size: 0.88rem !important;
    color: var(--pd-text-muted) !important;
    margin: 0 !important;
    line-height: 1.8 !important;
    text-align: justify !important;
}

.badge-card-link {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    display: inline-block !important;
    margin-top: 8px !important;
}

    .badge-card-link.text-green {
        color: #059669 !important;
    }

    .badge-card-link.text-blue {
        color: var(--pd-primary) !important;
    }

/* آکاردئون سوالات متداول */
.faq-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 18px 0 35px 0 !important;
    width: 100% !important;
}

.faq-item {
    background: #ffffff !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
    box-shadow: var(--pd-shadow-card) !important;
}

    .faq-item[open] {
        border-color: #93c5fd !important;
        box-shadow: 0 4px 15px rgba(0, 98, 235, 0.08) !important;
    }

    .faq-item summary {
        padding: 15px 18px !important;
        font-weight: 750 !important;
        font-size: 0.96rem !important;
        color: var(--pd-navy) !important;
        cursor: pointer !important;
        list-style: none !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #f8fafc !important;
        transition: background 0.2s !important;
        user-select: none !important;
    }

        .faq-item summary::-webkit-details-marker {
            display: none !important;
        }

        .faq-item summary::after {
            content: "❮" !important;
            font-size: 0.8rem !important;
            color: #64748b !important;
            transition: transform 0.25s ease !important;
        }

    .faq-item[open] summary::after {
        transform: rotate(-90deg) !important;
        color: var(--pd-primary) !important;
    }

    .faq-item summary:hover {
        background: #f1f5f9 !important;
    }

.faq-content {
    padding: 16px 18px !important;
    color: #475569 !important;
    line-height: 2 !important;
    font-size: 0.92rem !important;
    background: #ffffff !important;
    border-top: 1px solid var(--pd-border) !important;
    text-align: justify !important;
}

/* ==========================================================================
   ۱۱. بخش دیدگاه‌ها و نظرات (Reviews & Feedback)
   ========================================================================== */
.reviews-section {
    margin-top: 35px !important;
    width: 100% !important;
}

.review-card {
    background: #ffffff !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 12px !important;
    padding: 18px 22px !important;
    margin-bottom: 12px !important;
    box-shadow: var(--pd-shadow-card) !important;
}

.review-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.reviewer-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.reviewer-avatar {
    font-size: 1rem !important;
    opacity: 0.8 !important;
}

.reviewer-name {
    color: var(--pd-navy) !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
}

.reviewer-stars {
    color: #f59e0b !important;
    font-size: 1.1rem !important;
    letter-spacing: 2px !important;
}

.review-text {
    color: #475569 !important;
    line-height: 2 !important;
    text-align: justify !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
}

.no-reviews-label {
    display: block !important;
    text-align: center !important;
    padding: 22px 0 !important;
    color: var(--pd-text-muted) !important;
    font-weight: 600 !important;
}

.submit-review-card {
    background: #ffffff !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: var(--pd-shadow-card) !important;
    margin-top: 22px !important;
}

.submit-review-title {
    color: var(--pd-navy) !important;
    margin: 0 0 14px 0 !important;
    font-size: 1.1rem !important;
    font-weight: 850 !important;
}

.reviewer-welcome-bar {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;
    padding: 9px 16px !important;
    margin-bottom: 16px !important;
    color: #16a34a !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

.form-group-rating {
    margin-bottom: 16px !important;
}

.form-label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

.rating-dropdown {
    padding: 9px 12px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--pd-border) !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    width: 100% !important;
    max-width: 260px !important;
    outline: none !important;
    background: #ffffff !important;
}

    .rating-dropdown:focus {
        border-color: var(--pd-primary) !important;
    }

.form-group-text {
    margin-bottom: 16px !important;
}

.review-textarea {
    width: 100% !important;
    border: 1.5px solid var(--pd-border) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    box-sizing: border-box !important;
    outline: none !important;
    line-height: 1.8 !important;
}

    .review-textarea:focus {
        border-color: var(--pd-primary) !important;
        box-shadow: 0 0 0 3px rgba(0, 98, 235, 0.1) !important;
    }

.btn-submit-review {
    background: linear-gradient(135deg, #0062eb 0%, #004dc0 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 11px 24px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 98, 235, 0.25) !important;
}

    .btn-submit-review:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0, 98, 235, 0.35) !important;
    }

.review-feedback-msg {
    margin-top: 12px !important;
}

.login-alert-box {
    background: #f8fafc !important;
    border: 1.5px dashed var(--pd-border) !important;
    border-radius: 12px !important;
    padding: 18px !important;
    text-align: center !important;
    color: var(--pd-text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    margin-top: 18px !important;
}

/* ==========================================================================
   ۱۲. بهینه‌سازی رسپانسیو (Responsive Breakpoints)
   ========================================================================== */
@media (max-width: 1024px) {
    .product-layout-grid {
        grid-template-columns: 1fr !important;
    }

    .product-sidebar-column {
        position: static !important;
        order: -1 !important; /* در موبایل و تبلت کارت خرید بالای مشخصات قرار می‌گیرد */
        margin-bottom: 25px !important;
    }

    .product-hero-card {
        padding: 22px !important;
    }

    .glass-hero-container {
        padding: 18px !important;
    }

    .main-slider {
        min-height: 330px !important;
    }

    .img-container {
        height: 330px !important;
    }
}

@media (max-width: 768px) {
    .product-page-main {
        padding: 0 10px !important;
        margin-top: 12px !important;
    }

    .online-banner-inline {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .online-banner-info {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .btn-online-action {
        width: 100% !important;
        text-align: center !important;
    }

    .test-hero-title {
        font-size: 1.5rem !important;
    }

    .test-hero-summary {
        font-size: 0.92rem !important;
    }

    .specs-grid {
        grid-template-columns: 1fr !important;
    }

    .main-slider {
        min-height: 230px !important;
    }

    .img-container {
        height: 230px !important;
    }

    .thumb-img {
        width: 55px !important;
        height: 40px !important;
    }

    .nav-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
    }

    .TestReportDivClass {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .TestReport1Class {
        width: 100% !important;
    }

    .trust-badges {
        grid-template-columns: 1fr !important;
    }

    .TagsOfwebsiteDiv {
        padding: 18px 14px !important;
    }

    .NCALABTaskDetailsTitles {
        font-size: 1rem !important;
        padding: 0 14px !important;
    }

    .submit-review-card {
        padding: 18px 14px !important;
    }

    .btn-submit-review {
        width: 100% !important;
        text-align: center !important;
    }
}