/*
 * styles.css — توکن‌های طراحی اختصاصی وب‌سایت تارا
 * -------------------------------------------------
 * رنگ‌ها به‌صورت کانال‌های RGB (فاصله‌دار) تعریف شده‌اند تا با
 * فرمت rgb(var(--token) / <alpha-value>) در Tailwind کار کنند و
 * امکان استفاده از شفافیت (مثل bg-brand-600/20) فراهم باشد.
 * برای تغییر رنگ اصلی سایت کافی است مقادیر زیر را ویرایش کنید.
 */

:root {
    /* رنگ اصلی برند: بنفش #3b3288 (روی پله ۶۰۰) */
    --brand-50: 245 245 249;   /* #f5f5f9 */
    --brand-100: 235 234 243;  /* #ebeaf3 */
    --brand-200: 212 210 229;  /* #d4d2e5 */
    --brand-300: 177 173 207;  /* #b1adcf */
    --brand-400: 128 122 178;  /* #807ab2 */
    --brand-500: 88 81 154;    /* #58519a */
    --brand-600: 59 50 136;    /* #3b3288 ← رنگ اصلی */
    --brand-700: 48 41 111;    /* #30296f */
    --brand-800: 38 32 88;     /* #262058 */
    --brand-900: 29 25 68;     /* #1d1944 */
    --brand-950: 19 16 43;     /* #13102b */

    /* رنگ ثانویه: #32ddbc — برای تأکیدهای محدود در کنار بنفش */
    --accent-50: 240 253 249;   /* #f0fdf9 */
    --accent-100: 204 250 241;  /* #ccfaf1 */
    --accent-200: 153 246 228;  /* #99f6e4 */
    --accent-300: 94 234 212;   /* #5eead4 */
    --accent-400: 50 221 188;   /* #32ddbc */
    --accent-500: 50 221 188;   /* #32ddbc ← رنگ ثانویه اصلی */
    --accent-600: 18 181 154;   /* #12b59a */
    --accent-700: 15 118 110;   /* #0f766e */

    /* پس‌زمینه کلی صفحه */
    --page-bg: 250 250 253;    /* #fafafd */
}

/* پس‌زمینه پایه صفحه (در صورت عدم بارگذاری Tailwind نیز اعمال می‌شود) */
html {
    font-size: calc(100% + 1px);
}

body {
    background-color: rgb(var(--page-bg));
    font-weight: 500;
}

p,
li,
input,
textarea,
select {
    font-weight: 500;
}

a,
button {
    font-weight: 600;
}

body .font-normal {
    font-weight: 500 !important;
}

body .font-medium {
    font-weight: 600 !important;
}

/* مخفی‌سازی المان‌های Alpine تا قبل از مقداردهی اولیه */
[x-cloak] {
    display: none !important;
}

/* ---------------------------------------------------------------
 * انیمیشن نمایش هنگام اسکرول (scroll reveal)
 * المان‌هایی با کلاس .reveal ابتدا محو و کمی پایین‌تر هستند و هنگام
 * ورود به نمایه (با افزودن .is-visible توسط جاوااسکریپت) ظاهر می‌شوند.
 * --------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
    /* بعد از نمایش، لایه ترکیبی را آزاد کن تا باکس‌های خیلی بلند
       (محتوای TinyMCE) در برخی مرورگرها «نامرئی» نمانند */
    will-change: auto;
}

.reveal-stagger > * {
    transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

/* انواع جهت ورود */
.reveal-right {
    transform: translateX(40px);
}

.reveal-right.is-visible {
    transform: none;
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-left.is-visible {
    transform: none;
}

.reveal-scale {
    transform: scale(0.94);
}

.reveal-scale.is-visible {
    transform: none;
}

/* احترام به ترجیح کاربر برای کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-right,
    .reveal-left,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* اسکرول‌بار ظریف هماهنگ با رنگ برند */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(var(--brand-300));
    border-radius: 9999px;
    border: 2px solid rgb(var(--page-bg));
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--brand-400));
}

/* ---------------------------------------------------------------
 * نوار متحرک نرخ ارز (marquee)
 * --------------------------------------------------------------- */
.currency-ticker {
    padding: 0.625rem 0;
}

.currency-ticker__viewport {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.currency-ticker__track {
    display: flex;
    width: max-content;
    flex-shrink: 0;
    flex-wrap: nowrap;
    direction: ltr;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.currency-ticker__track.is-ready {
    animation: currency-marquee var(--marquee-duration, 40s) linear infinite;
}

.currency-ticker__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    direction: rtl;
}

.currency-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 1.25rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    color: rgb(51 65 85);
}

.currency-ticker__name {
    font-weight: 700;
    color: rgb(var(--brand-700));
}

.currency-ticker__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--accent-600));
    letter-spacing: 0.02em;
}

.currency-ticker__flag {
    font-size: 1rem;
    line-height: 1;
}

.currency-ticker__divider {
    color: rgb(var(--accent-300));
    font-weight: 300;
    user-select: none;
}

@keyframes currency-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(var(--marquee-shift, -50%), 0, 0);
    }
}

/* بخش نمایشی — باکس‌ها عمودی وسط تصویر، بدون اسکرول داخلی */
.showcase-row {
    max-width: 100%;
    overflow: visible;
}

.showcase-image-cell,
.showcase-boxes,
.showcase-ticker-cell {
    min-width: 0;
    overflow: visible;
}

.showcase-image {
    overflow: hidden;
}

.showcase-box-wrap,
.showcase-box-wrap > .showcase-box {
    overflow: visible;
}

@media (min-width: 1024px) {
    .showcase-row {
        align-items: stretch;
    }

    .showcase-image-cell {
        display: flex;
        flex-direction: column;
        align-self: stretch;
    }

    .showcase-image {
        width: 100%;
        max-width: 100%;
        flex: 1;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .showcase-boxes {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: stretch;
        height: 100%;
        min-height: 0;
        overflow: visible;
    }

    .showcase-box-wrap {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: visible;
    }

    .showcase-box-wrap > .showcase-box {
        flex: 1;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .currency-ticker__track {
        animation: none;
    }
}

/* ---------------------------------------------------------------
 * کاروسل خدمات گمرکی
 * --------------------------------------------------------------- */
.customs-swiper-wrap {
    padding-top: 0.35rem;
    max-width: 100%;
}

.customs-swiper-wrap .customs-swiper.swiper {
    overflow: hidden;
    max-width: 100%;
}

.customs-swiper .swiper-slide {
    height: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    overflow: visible;
}

.customs-swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 80px;
}

.customs-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    background: rgb(203 213 225);
    opacity: 1;
    border-radius: 9999px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.customs-swiper-pagination .swiper-pagination-bullet-active {
    width: 28px;
    background: rgb(var(--accent-500));
}

.customs-service-card {
    min-height: 100%;
    border-radius: 2.125rem;
    background-color: rgb(255 255 255);
    overflow: visible;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.customs-service-card:hover {
    background-color: rgb(var(--page-bg));
}

.customs-service-card__media {
    border-top-left-radius: calc(2.125rem - 1px);
    border-top-right-radius: calc(2.125rem - 1px);
    overflow: hidden;
}

.projects-swiper-wrap {
    padding-top: 0.35rem;
    max-width: 100%;
}

.projects-swiper-wrap .projects-swiper.swiper {
    overflow: hidden;
    max-width: 100%;
}

.projects-swiper .swiper-slide {
    height: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    overflow: visible;
}

.projects-swiper-pagination,
.blog-swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 80px;
}

.projects-swiper-pagination .swiper-pagination-bullet,
.blog-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    background: rgb(203 213 225);
    opacity: 1;
    border-radius: 9999px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.projects-swiper-pagination .swiper-pagination-bullet-active,
.blog-swiper-pagination .swiper-pagination-bullet-active {
    width: 28px;
    background: rgb(var(--accent-500));
}

.blog-home-card {
    background-image: linear-gradient(160deg, rgb(255 255 255), rgb(var(--brand-50) / 0.4));
}

.qa-home-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}

.qa-home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 28px rgb(var(--brand-600) / 0.14);
    border-color: rgb(var(--accent-200));
}

/* ---------------------------------------------------------------
 * گرید خدمات عمومی (صفحه اصلی و لیست)
 * --------------------------------------------------------------- */
.services-grid {
    max-width: 72rem;
    margin-inline: auto;
}

.service-tile {
    display: block;
    position: relative;
    isolation: isolate;
}

.service-tile__overlay {
    z-index: 1;
}

.service-tile__title-bar {
    z-index: 2;
}

.service-tile__hover-content {
    z-index: 3;
}

.service-tile__line {
    width: 2.5rem;
    height: 2px;
    background: rgb(255 255 255 / 0.85);
    border-radius: 9999px;
}

.service-tile__cta {
    background: rgb(255 255 255 / 0.16);
    border: 1px solid rgb(255 255 255 / 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: rgb(255 255 255 / 0.95);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

/* ---------------------------------------------------------------
 * مگامنو خدمات در هدر
 * --------------------------------------------------------------- */
.nav-services-megamenu__item {
    text-decoration: none;
}

@media (max-width: 1023px) {
    .nav-services-megamenu__item span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ---------------------------------------------------------------
 * کاروسل خدمات (قدیمی — نگه‌داری برای سازگاری)
 * --------------------------------------------------------------- */
.services-swiper-wrap {
    padding-top: 0.35rem;
    overflow: visible;
}

.services-swiper-wrap .services-swiper.swiper,
.services-swiper-wrap .services-swiper .swiper-wrapper,
.services-swiper-wrap .services-swiper .swiper-slide {
    overflow: visible !important;
}

.services-swiper .swiper-slide {
    height: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.services-swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 80px;
}

.services-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    background: rgb(203 213 225);
    opacity: 1;
    border-radius: 9999px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.services-swiper-pagination .swiper-pagination-bullet-active {
    width: 28px;
    background: rgb(var(--accent-500));
}

.service-card {
    min-height: 100%;
    border-radius: 2.125rem;
    background-color: rgb(255 255 255);
    overflow: visible;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.service-card:hover {
    background-color: rgb(var(--page-bg));
}

.service-card__media {
    border-top-left-radius: calc(2.125rem - 1px);
    border-top-right-radius: calc(2.125rem - 1px);
    overflow: hidden;
}

.service-card__arrow {
    transform: none;
}

/* ---------------------------------------------------------------
 * Breadcrumb فانتزی
 * --------------------------------------------------------------- */
.breadcrumb-fancy__list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgb(255 255 255 / 0.95), rgb(var(--brand-50) / 0.9));
    border: 1px solid rgb(var(--brand-100));
    box-shadow: 0 8px 24px rgb(var(--brand-600) / 0.06);
}

.breadcrumb-fancy__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.breadcrumb-fancy__sep {
    display: inline-flex;
    color: rgb(var(--accent-400));
    opacity: 0.85;
}

.breadcrumb-fancy__link,
.breadcrumb-fancy__current {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    transition: color 0.2s ease;
}

.breadcrumb-fancy__link {
    color: rgb(var(--brand-600));
}

.breadcrumb-fancy__link:hover {
    color: rgb(var(--accent-600));
}

.breadcrumb-fancy__current {
    color: rgb(var(--brand-800));
}

.breadcrumb-fancy__item.is-current .breadcrumb-fancy__current {
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgb(var(--accent-400)), rgb(var(--accent-600)));
    color: white;
    box-shadow: 0 4px 14px rgb(var(--accent-500) / 0.35);
}

.breadcrumb-fancy__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------
 * صفحه جزئیات خدمت
 * --------------------------------------------------------------- */
.service-content-wrap {
    max-width: 75rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 1024px) {
    .service-content-wrap {
        padding-inline: 2.5rem;
    }
}

.service-content-box {
    background: white;
    border-radius: 1.5rem;
    padding: 1.75rem 1.5rem;
    border: 1px solid rgb(226 232 240);
    box-shadow: 0 10px 30px rgb(var(--brand-600) / 0.06);
}

@media (min-width: 1024px) {
    .service-content-box {
        padding: 2.25rem 2.5rem;
    }
}

.service-faq-section {
    max-width: 52rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 1024px) {
    .service-faq-section {
        padding-inline: 3rem;
    }
}

.service-faq-grid {
    direction: rtl;
}

.prose-service h2,
.prose-service h3,
.prose-service h4 {
    color: rgb(var(--brand-700));
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

.prose-service p {
    margin-bottom: 1em;
}

.prose-service ul,
.prose-service ol {
    margin-bottom: 1em;
    padding-right: 1.5em;
}

.prose-service img {
    border-radius: 1rem;
    max-width: 100%;
    height: auto;
}

/* استایل پیش‌فرض جدول‌هایی که ادمین از طریق ابزار TinyMCE اضافه می‌کند
 * از :where() استفاده شده تا specificity صفر باشد و کلاس‌های Tailwind
 * که به‌صورت دستی در محتوا درج می‌شوند همیشه در اولویت باقی بمانند. */
:where(.prose-service table) {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75em 0;
    overflow: hidden;
    border-radius: 1rem;
    font-size: 0.9rem;
    box-shadow: 0 8px 20px rgb(15 23 42 / 0.06);
}

:where(.prose-service table thead tr) {
    background: rgb(var(--brand-600));
    color: #fff;
}

:where(.prose-service table th) {
    padding: 0.85em 1.1em;
    font-weight: 700;
    text-align: right;
}

:where(.prose-service table td) {
    padding: 0.85em 1.1em;
    border-top: 1px solid rgb(226 232 240);
    color: rgb(51 65 85);
}

:where(.prose-service table tbody tr:nth-child(even)) :where(td) {
    background: rgb(var(--brand-50) / 0.5);
}

:where(.prose-service table caption) {
    caption-side: top;
    text-align: right;
    font-size: 0.8rem;
    color: rgb(100 116 139);
    margin-bottom: 0.5em;
}

.service-comment-input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240);
    background: rgb(248 250 252);
    font-size: 0.875rem;
    color: rgb(51 65 85);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.service-comment-input:focus {
    outline: none;
    border-color: rgb(var(--brand-400));
    box-shadow: 0 0 0 3px rgb(var(--brand-100) / 0.8);
    background: white;
}

.service-comment-input--tel {
    direction: rtl;
    text-align: right;
}

.service-comment-input.is-invalid {
    border-color: rgb(239 68 68);
}

#comment-form-message.is-success {
    background: rgb(var(--accent-50));
    color: rgb(var(--accent-700));
    border: 1px solid rgb(var(--accent-200));
}

#comment-form-message.is-error {
    background: rgb(254 242 242);
    color: rgb(185 28 28);
    border: 1px solid rgb(254 202 202);
}

#contact-form-message.is-success {
    background: rgb(var(--accent-50));
    color: rgb(var(--accent-700));
    border: 1px solid rgb(var(--accent-200));
}

#contact-form-message.is-error {
    background: rgb(254 242 242);
    color: rgb(185 28 28);
    border: 1px solid rgb(254 202 202);
}

#consultation-form-message.is-success {
    background: rgb(var(--accent-50));
    color: rgb(var(--accent-700));
    border: 1px solid rgb(var(--accent-200));
}

#consultation-form-message.is-error {
    background: rgb(254 242 242);
    color: rgb(185 28 28);
    border: 1px solid rgb(254 202 202);
}

#qa-form-message.is-success {
    background: rgb(var(--accent-50));
    color: rgb(var(--accent-700));
    border: 1px solid rgb(var(--accent-200));
}

#qa-form-message.is-error {
    background: rgb(254 242 242);
    color: rgb(185 28 28);
    border: 1px solid rgb(254 202 202);
}

.consultation-floating-btn {
    animation: consultation-bounce 2.2s infinite;
}

.app-modal-surface {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}

.consultation-modal-overlay {
    -webkit-overflow-scrolling: touch;
}

.consultation-modal-panel {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-block: 0.75rem;
}

@media (min-width: 1024px) {
    .consultation-modal-panel {
        max-height: calc(100vh - 3rem);
        margin-block: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qa-home-card,
    .app-modal-surface {
        transition: none !important;
        transform: none !important;
    }
}

@keyframes consultation-bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
    40%, 43% { transform: translate3d(0, -10px, 0); }
    70% { transform: translate3d(0, -5px, 0); }
    90% { transform: translate3d(0, -2px, 0); }
}

/* ---------------------------------------------------------------
 * باکس تبلیغاتی نرخ سنا (صفحه اصلی)
 * --------------------------------------------------------------- */
.sana-banner-link {
    animation: sana-banner-pulse 2.6s ease-in-out infinite;
}

.sana-banner-icon {
    animation: sana-banner-icon-wiggle 2.6s ease-in-out infinite;
}

.sana-banner-shimmer {
    background: linear-gradient(115deg, transparent 20%, rgb(255 255 255 / 0.35) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: sana-banner-shimmer 3.4s ease-in-out infinite;
}

@keyframes sana-banner-pulse {
    0%, 100% { box-shadow: 0 10px 25px rgb(var(--accent-500) / 0.3); }
    50% { box-shadow: 0 10px 30px rgb(var(--accent-500) / 0.55), 0 0 0 6px rgb(var(--accent-500) / 0.12); }
}

@keyframes sana-banner-icon-wiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-8deg) scale(1.05); }
    50% { transform: rotate(0deg) scale(1); }
    75% { transform: rotate(8deg) scale(1.05); }
}

@keyframes sana-banner-shimmer {
    0% { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .sana-banner-link,
    .sana-banner-icon,
    .sana-banner-shimmer {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------
 * هدر چسبان (sticky navbar)
 * --------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header--top {
    padding-top: 1rem;
}

@media (min-width: 1024px) {
    .site-header--top {
        padding-top: 1.5rem;
    }
}

.site-header--scrolled {
    padding-top: 0;
    background: rgb(255 255 255 / 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgb(var(--brand-100) / 1);
    box-shadow: 0 10px 40px rgb(var(--brand-900) / 0.08);
}

.site-header--scrolled .site-header__container {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 1024px) {
    .site-header--scrolled .site-header__container {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.site-nav--top {
    border-radius: 1.5rem;
}

.site-nav--scrolled {
    border-radius: 0 0 1.25rem 1.25rem;
    box-shadow: 0 12px 36px rgb(var(--brand-900) / 0.1);
    background: rgb(255 255 255 / 0.96);
}

.site-header--scrolled .site-nav {
    min-height: 4rem;
}

@media (min-width: 1200px) {
    .site-header--scrolled .site-nav .relative.flex.items-center {
        height: 4rem !important;
    }
}

/* ---------------------------------------------------------------
 * آیتم‌های سطح اول منوی دسکتاپ هدر (لینک‌های اصلی + آیتم‌های داینامیک)
 * فونت کمی کوچک‌تر و بدون شکستن خط، تا با اضافه‌شدن آیتم به هم نریزد
 * --------------------------------------------------------------- */
.nav-link-desktop {
    display: inline-block;
    padding: 0.5rem 0.5rem;
    border-radius: 1rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(71 85 105);
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-link-desktop:hover {
    color: rgb(var(--brand-600));
    background-color: rgb(var(--brand-50));
}


/* دکمه‌های عملیاتی (مشاوره / پرسش) در انتهای چپ نوار منو */
.nav-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.85rem;
    border-radius: 1rem;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25rem;
    color: #fff;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* ---------------------------------------------------------------
 * فاصله عمودی سکشن‌ها (نصف مقادیر قبلی)
 * --------------------------------------------------------------- */
main .mt-10 { margin-top: 1.25rem !important; }
main .mt-14 { margin-top: 1.75rem !important; }
main .mt-16 { margin-top: 2rem !important; }
main .mt-20 { margin-top: 2.5rem !important; }
main .mb-12 { margin-bottom: 1.5rem !important; }
main .mb-14 { margin-bottom: 1.75rem !important; }
main .mb-16 { margin-bottom: 2rem !important; }
main .py-10 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }

@media (min-width: 1024px) {
    main .lg\:mt-14 { margin-top: 1.75rem !important; }
    main .lg\:mt-20 { margin-top: 2.5rem !important; }
    main .lg\:mt-24 { margin-top: 3rem !important; }
    main .lg\:mb-16 { margin-bottom: 2rem !important; }
    main .lg\:mb-20 { margin-bottom: 2.5rem !important; }
    main .lg\:mb-24 { margin-bottom: 3rem !important; }
    main .lg\:py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    main .lg\:py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* ---------------------------------------------------------------
 * صفحه درباره ما — سه ردیف با خط عمودی پیوسته
 * --------------------------------------------------------------- */
.about-timeline-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.about-timeline-line {
    display: none;
}

.about-timeline-text,
.about-timeline-media {
    min-width: 0;
}

.about-page-content-section {
    width: 100%;
}

@media (min-width: 1024px) {
    .about-timeline-grid {
        grid-template-columns: minmax(0, 1fr) 3px minmax(0, 1fr);
        grid-template-rows: repeat(3, auto);
        column-gap: 2.5rem;
        row-gap: 2.5rem;
        align-items: stretch;
    }

    .about-timeline-line {
        display: block;
        grid-column: 2;
        grid-row: 1 / 4;
        width: 3px;
        height: 100%;
        justify-self: center;
        align-self: stretch;
        background: linear-gradient(
            to bottom,
            rgb(var(--brand-200)),
            rgb(var(--brand-400)) 15%,
            rgb(var(--brand-500)) 50%,
            rgb(var(--brand-400)) 85%,
            rgb(var(--brand-200))
        );
        border-radius: 9999px;
        box-shadow: 0 0 0 4px rgb(var(--brand-50) / 0.9);
    }

    .about-timeline-text {
        grid-column: 1;
    }

    .about-timeline-media {
        grid-column: 3;
    }

    .about-timeline-text--row-1,
    .about-timeline-media--row-1 {
        grid-row: 1;
    }

    .about-timeline-text--row-2,
    .about-timeline-media--row-2 {
        grid-row: 2;
    }

    .about-timeline-text--row-3,
    .about-timeline-media--row-3 {
        grid-row: 3;
    }
}

/* ---------------------------------------------------------------
 * آیکون‌های بخش «چرا ما» در صفحه اصلی (+۳۰٪)
 * --------------------------------------------------------------- */
.why-feature-icon svg {
    width: 1.95rem;
    height: 1.95rem;
}

/* ---------------------------------------------------------------
 * بخش پرسش‌وپاسخ صفحه اصلی
 * --------------------------------------------------------------- */
.qa-home-layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .qa-home-layout {
        flex-direction: row;
        align-items: stretch;
        gap: 1.5rem;
    }
}

.qa-home-sidebar {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    background: linear-gradient(165deg, rgb(var(--brand-600)) 0%, rgb(var(--brand-800)) 55%, rgb(var(--brand-950)) 100%);
    box-shadow: 0 20px 50px rgb(var(--brand-900) / 0.22);
    min-height: 18rem;
}

@media (min-width: 1024px) {
    .qa-home-sidebar {
        width: 17rem;
        flex-shrink: 0;
        min-height: 100%;
    }
}

.qa-home-sidebar__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgb(255 255 255 / 0.14), transparent 42%),
        radial-gradient(circle at 80% 85%, rgb(var(--accent-400) / 0.18), transparent 45%);
    pointer-events: none;
}

.qa-home-sidebar__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    height: 100%;
    padding: 1.75rem 1.5rem;
}

.qa-home-sidebar__brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qa-home-sidebar__logo {
    width: 8rem;
    height: auto;
    background: rgb(255 255 255);
    border-radius: 0.9rem;
    padding: 0.35rem;
    margin-inline: auto;
}

.qa-home-sidebar__title {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.qa-home-sidebar__subtitle {
    color: rgb(255 255 255 / 0.78);
    font-size: 0.9rem;
    line-height: 1.8;
}

.qa-home-sidebar__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.qa-home-sidebar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.qa-home-sidebar__btn:hover {
    transform: translateY(-2px);
}

.qa-home-sidebar__btn--outline {
    color: #fff;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.35);
}

.qa-home-sidebar__btn--outline:hover {
    background: rgb(255 255 255 / 0.16);
}

.qa-home-sidebar__btn--accent {
    color: rgb(var(--brand-900));
    background: linear-gradient(to left, rgb(var(--accent-400)), rgb(var(--accent-500)));
    box-shadow: 0 10px 24px rgb(var(--accent-500) / 0.35);
}

.qa-home-sidebar__btn--accent:hover {
    box-shadow: 0 14px 30px rgb(var(--accent-500) / 0.45);
}

.qa-home-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.qa-home-cards__row {
    min-width: 0;
}

/* ---------------------------------------------------------------
 * صفحه پرسش‌وپاسخ — هدر و فرم
 * --------------------------------------------------------------- */
.qa-page-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

@media (min-width: 768px) {
    .qa-page-hero {
        flex-direction: row;
        align-items: center;
        text-align: right;
        gap: 1.75rem;
        max-width: 56rem;
        margin-inline: auto;
    }
}

.qa-page-hero__logo-wrap {
    flex-shrink: 0;
    padding: 0.85rem;
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid rgb(var(--brand-100));
    box-shadow: 0 12px 32px rgb(var(--brand-900) / 0.1);
}

.qa-page-hero__logo {
    width: 5.5rem;
    height: auto;
    display: block;
}

.qa-form-panel__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgb(var(--brand-100));
}

.qa-form-panel__logo {
    width: 5rem;
    height: auto;
    background: #fff;
    border-radius: 0.85rem;
    padding: 0.3rem;
    box-shadow: 0 6px 18px rgb(var(--brand-900) / 0.08);
    flex-shrink: 0;
}

.qa-publish-name-checkbox {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
 * فوتر — با فاصله بالای اضافه برای هم‌پوشانی بخش پیام‌رسان‌ها
 * --------------------------------------------------------------- */
.site-footer {
    position: relative;
    z-index: 10;
    padding-top: 3rem;
}

@media (min-width: 1024px) {
    .site-footer {
        padding-top: 5rem;
    }
}

/* ---------------------------------------------------------------
 * بخش پیام‌رسان‌ها (بالای فوتر)
 * --------------------------------------------------------------- */
.messengers-section {
    --messenger-diamond-size: 5.5rem;
    --messenger-diamond-half: calc(var(--messenger-diamond-size) / 2);
    /* ارتفاع ناحیه برش (عمق ذوزنقه) و زاویه لبه‌های اریب آن */
    --notch-h: 4.5rem;
    --notch-skew: 12deg;
    /* نصف عرض بالای ذوزنقه مرکزی */
    --trap-half: clamp(9rem, 36vw + 2rem, 26rem);
    position: relative;
    z-index: 20;
    overflow: visible;
    background: linear-gradient(150deg, rgb(var(--brand-600)) 0%, rgb(var(--brand-800)) 55%, rgb(var(--brand-950)) 100%);
    box-shadow: 0 -20px 50px rgb(var(--brand-900) / 0.18);
    margin-bottom: -3rem;
}

@media (min-width: 1024px) {
    .messengers-section {
        --messenger-diamond-size: 6.5rem;
        --notch-h: 8rem;
        --notch-skew: 14deg;
        margin-bottom: -5rem;
    }
}

/* لایه برش‌ها: هم‌رنگ فوتر تا ذوزنقه وسط یکپارچه با فوتر دیده شود */
.messengers-section__mask {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

.messengers-section__notch {
    position: absolute;
    bottom: 0;
    height: var(--notch-h);
    width: calc(50% - var(--trap-half) + 6rem);
    background: rgb(15 23 42); /* دقیقاً هم‌رنگ bg-slate-900 فوتر */
}

.messengers-section__notch--left {
    left: -6rem;
    transform: skewX(var(--notch-skew));
    transform-origin: top;
    border-top-right-radius: 1.75rem;
    /* border-bottom-right-radius: 1.5rem; */
}

.messengers-section__notch--right {
    right: -6rem;
    transform: skewX(calc(-1 * var(--notch-skew)));
    transform-origin: top;
    border-top-left-radius: 1.75rem;
    /* border-bottom-left-radius: 1.5rem; */
}

.messengers-section__diamonds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-inline: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.messengers-section__diamonds > * {
    pointer-events: auto;
}

@media (min-width: 640px) {
    .messengers-section__diamonds {
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .messengers-section__diamonds {
        gap: 4rem;
        padding-inline: 2rem;
    }
}

.messengers-section__content {
    padding-top: calc(var(--messenger-diamond-half) + 1.75rem);
    /* در موبایل متن بالای خط برش می‌ماند تا از ذوزنقه بیرون نزند */
    padding-bottom: calc(var(--notch-h) + 1.25rem);
}

@media (min-width: 1024px) {
    .messengers-section__content {
        padding-top: calc(var(--messenger-diamond-half) + 2.25rem);
        /* در دسکتاپ عنوان و متن داخل ذوزنقه قرار می‌گیرند */
        padding-bottom: 2.75rem;
    }
}

.messengers-section__texture {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-position: center;
    background-size: 220px 110px;
    filter: invert(1);
    opacity: 0.14;
    pointer-events: none;
}

.messengers-section__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgb(255 255 255 / 0.10), transparent 55%),
        radial-gradient(circle at 15% 100%, rgb(var(--accent-400) / 0.16), transparent 45%),
        radial-gradient(circle at 85% 100%, rgb(var(--accent-400) / 0.16), transparent 45%);
    pointer-events: none;
}

.messengers-section__title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
    .messengers-section__title {
        font-size: 1.60rem;
    }
}

.messengers-section__text {
    color: rgb(255 255 255 / 0.78);
    font-size: 0.9rem;
    line-height: 1.9;
}

@media (min-width: 1024px) {
    .messengers-section__text {
        font-size: 1rem;
    }
}

.messenger-diamond-link {
    display: inline-flex;
    text-decoration: none;
}

.messenger-diamond {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--messenger-diamond-size);
    height: var(--messenger-diamond-size);
    flex-shrink: 0;
    border-radius: 1.1rem;
    background: linear-gradient(155deg, #ffffff 0%, rgb(var(--brand-50)) 100%);
    box-shadow: 0 14px 30px rgb(var(--brand-950) / 0.35), 0 0 0 1px rgb(255 255 255 / 0.25) inset;
    transform: rotate(45deg);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.messenger-diamond-link:hover .messenger-diamond {
    transform: rotate(135deg);
    box-shadow: 0 18px 40px rgb(var(--brand-950) / 0.45), 0 0 0 1px rgb(var(--accent-400) / 0.5) inset;
}

.messenger-diamond-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-45deg);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.messenger-diamond-link:hover .messenger-diamond-icon-wrap {
    transform: rotate(-135deg);
}

.messenger-diamond-icon {
    width: 2.35rem;
    height: 2.35rem;
    object-fit: contain;
    animation: messenger-icon-spin 6.4s linear infinite;
    transition: transform 0.4s ease;
}

@media (min-width: 1024px) {
    .messenger-diamond-icon {
        width: 2.75rem;
        height: 2.75rem;
    }
}

@keyframes messenger-icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .messenger-diamond-icon {
        animation: none !important;
    }
    .messenger-diamond,
    .messenger-diamond-icon-wrap,
    .messenger-diamond-icon {
        transition: none !important;
    }
}