/*
      theme-bridge.css — پل بین کلاس‌های استاتیک Tailwind (که در tailwind.css کامپایل شده)
      و رنگ‌های داینامیک هر Tenant.

      چرا این فایل لازم است؟
      چون کلاس‌های Tailwind با مقدار دلخواه مثل bg-[#32c98a] در زمان build به یک قانون CSS با
      رنگ ثابت (هگز) تبدیل می‌شوند. برای این‌که رنگ برند هر مشتری در Tenant.PrimaryColor بدون
      build مجدد Tailwind اعمال شود، همان کلاس‌های پرکاربردِ رنگ برند را اینجا با var(--brand)
      بازنویسی می‌کنیم. اگر بعداً پایپ‌لاین Tailwind (npm run build) راه‌اندازی شد، بهتر است این
      رنگ‌ها به‌صورت توکن در input.css (@theme) تعریف شوند و این فایل حذف/ساده شود.
    */

    :root {
        --brand: #32c98a;       /* رنگ اصلی - از Tenant.PrimaryColor ست می‌شود */
        --brand-dark: #11d68b;  /* رنگ اصلی تیره‌تر - برای گرادینت */
        --brand-darker: #0da75f;
    }

    @font-face {
        font-family: YekanBakh;
        src: url(../fonts/YekanBakhFaNum-VF.ttf);
        font-display: swap;
    }

    body, h1, h2, h3, h4, h5, h6, p, span, a, li, ul, b, strong, button, input, textarea, label, select, option {
        font-family: YekanBakh, Tahoma, sans-serif;
    }

    [x-cloak] { display: none !important; }

    *::selection { background-color: var(--brand); color: white; }

    ::-webkit-scrollbar { width: 4px; height: 2px; }
    ::-webkit-scrollbar-track { background-color: #F4F9F7; }
    ::-webkit-scrollbar-thumb { background-color: var(--brand); border-radius: 20px; }

    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    .scrollbar-hide::-webkit-scrollbar { display: none; }

    .max-w-8xl { max-width: 96rem; }

    .product-card {
        transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1), border-color .6s cubic-bezier(.22,1,.36,1) !important;
    }
    .product-card:hover { transform: translateY(-8px) !important; }

    /* --- نگاشت رنگ برند: کلاس‌های Tailwind کامپایل‌شده با هگز ثابت --> متغیر داینامیک Tenant --- */
    .bg-\[\#32c98a\], .hover\:bg-\[\#32c98a\]:hover { background-color: var(--brand) !important; }
    .text-\[\#32c98a\], .hover\:text-\[\#32c98a\]:hover { color: var(--brand) !important; }
    .border-\[\#32c98a\] { border-color: var(--brand) !important; }
    .from-\[\#32c98a\] { --tw-gradient-from: var(--brand) !important; }
    .to-\[\#32c98a\] { --tw-gradient-to: var(--brand) !important; }
    .to-\[\#11d68b\] { --tw-gradient-to: var(--brand-dark) !important; }
    .hover\:from-\[\#2ab77d\]:hover { --tw-gradient-from: var(--brand-darker) !important; }
    .hover\:to-\[\#0fc580\]:hover { --tw-gradient-to: var(--brand-darker) !important; }

    a {
        text-decoration:none !important;
        color:inherit !important;
    }
    p{
        margin-bottom:0 !important;
    }

    #bodyQuillEditor {
        min-height: 320px;
    }

    #bodyHtmlSource {
        width: 100%;
        min-height: 360px;
        padding: 1rem;
        border: 1px solid var(--border, #e5edf6);
        border-radius: 10px;
        background: #172033;
        color: #d8e2f0;
        font-family: Consolas, Monaco, monospace;
        font-size: .85rem;
        line-height: 1.8;
        direction: ltr;
        text-align: left;
        resize: vertical;
        outline: none;
    }

        #bodyHtmlSource:focus {
            border-color: var(--brand, #1f4d8c);
            box-shadow: 0 0 0 3px rgba(31, 77, 140, .12);
        }

    #bodyHtmlToggle.active {
        color: #fff;
        background: var(--brand, #1f4d8c);
        border-color: var(--brand, #1f4d8c);
    }

    /* کلاس‌های پس‌زمینه دسته‌بندی - باید در site.css باشند تا Tailwind purge آن‌ها را حذف نکند */
    /* در _Categories.cshtml با paletteBg استفاده می‌شود */
    .cat-bg-blue {
        background-color: #EFF6FF;
    }

    .cat-bg-green {
        background-color: #F0FDF4;
    }

    .cat-bg-orange {
        background-color: #FFF7ED;
    }

    .cat-bg-indigo {
        background-color: #EEF2FF;
    }

    .cat-bg-yellow {
        background-color: #FEFCE8;
    }

    .cat-bg-teal {
        background-color: #F0FDFA;
    }

    .cat-bg-red {
        background-color: #FEF2F2;
    }

    /* اسلایدر هیرو */
    .hero-swiper .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.6);
        opacity: 1;
    }

    .hero-swiper .swiper-pagination-bullet-active {
        background: #32c98a;
        width: 24px;
        border-radius: 4px;
    }
    /* پیک-اسلایدر با بریدگی پازلی بین کارت‌ها */
    .hero-swiper-outer {
        --notch-size: 34px;
        --notch-bg: #f6f8fc; /* رنگ پس‌زمینه صفحه پشت اسلایدر - اگر بک‌گراند بخش فرق دارد این را عوض کن */
    }

    .hero-swiper .hero-slide {
        height: 420px;
        border-radius: 28px;
        overflow: hidden;
        position: relative;
    }

    @media (min-width: 768px) {
        .hero-swiper .hero-slide {
            height: 500px;
        }
    }

    /* نیم‌دایره‌های بریدگی روی لبه‌ی مشترک دو اسلاید کنار هم */
    .hero-swiper .hero-slide:not(:last-child)::after,
    .hero-swiper .hero-slide:not(:first-child)::before {
        content: "";
        position: absolute;
        width: var(--notch-size);
        height: var(--notch-size);
        background: var(--notch-bg);
        border-radius: 50%;
        z-index: 3;
        pointer-events: none;
    }

    .hero-swiper .hero-slide:not(:last-child)::after {
        right: calc(var(--notch-size) / -2);
        top: 30%;
        transform: translateY(-50%);
    }

    .hero-swiper .hero-slide:not(:first-child)::before {
        left: calc(var(--notch-size) / -2);
        top: 70%;
        transform: translateY(-50%);
    }

    .hero-swiper .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.6);
        opacity: 1;
    }

    .hero-swiper .swiper-pagination-bullet-active {
        background: #32c98a;
        width: 24px;
        border-radius: 4px;
    }

h2 {
    font-size: 16px !important;
}
/* صرف‌نظر از width/height هاردکدشده‌ی خود کد iframe نقشه (که از نشان/بله کپی می‌شه)،
   عرض رو کامل و ارتفاع رو ثابت و هماهنگ با ظاهر قالب نگه می‌داریم */
.map-embed-wrap iframe {
    width: 100% !important;
    height: 300px !important;
    border: 0;
    display: block;
}

/* ---------------------------------------------------------------------------
   جایگزین سبک برای چند کلاس ساده‌ی بوت‌استرپ که فقط توی صفحات حساب کاربری/سفارش‌ها
   (Account/*, Orders/Index) استفاده می‌شدن. بوت‌استرپ کامل از سایت اصلی حذف شد چون
   داشت روی استایل‌های Tailwind (مثل سایز فونت عنوان محصولات و اسلایدرها) اثر می‌ذاشت -
   این چند صفحه‌ی کوچیک به کل بوت‌استرپ نیازی نداشتن، فقط همین چندتا کلاس ساده.
   --------------------------------------------------------------------------- */
.card {
    background: #fff;
    border: 1px solid #E7EAF0;
    border-radius: 12px;
}

.form-control {
    display: block;
    width: 100%;
    padding: .5rem .85rem;
    font-size: 14px;
    border: 1px solid #E7EAF0;
    border-radius: 10px;
    background: #fff;
    outline: none;
    transition: border-color .15s;
}

    .form-control:focus {
        border-color: var(--brand);
    }

    .form-control:disabled {
        background: #F6F8FC;
        color: #67788E;
    }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
    text-decoration: none !important;
}

.btn-primary {
    background: var(--brand);
    color: #fff !important;
}

    .btn-primary:hover {
        background: var(--brand-dark);
    }

.btn-outline-secondary {
    background: #fff;
    border-color: #E7EAF0;
    color: #384656 !important;
}

    .btn-outline-secondary:hover {
        background: #F6F8FC;
    }

.btn-outline-danger {
    background: #fff;
    border-color: #FECACA;
    color: #EF4444 !important;
}

    .btn-outline-danger:hover {
        background: #FEF2F2;
    }

.w-100 {
    width: 100%;
}

/* بلوک بیرونیِ ماژول‌های صفحه اصلی (قبل/بعد، خدمات، ویدئو، گالری، FAQ، تصویر ثابت، ویژگی‌ها، تصویر+متن) -
   عمداً یه کلاس CSS دستیه، نه از کلاس‌های Tailwind (max-w-[90%]/my-16) که توی output.css
   (باندل از‌قبل‌کامپایل‌شده) وجود نداشتن چون هیچ‌جای دیگه‌ی پروژه قبل از این استفاده نشده بودن -
   یعنی هیچ قانونی براشون تولید نشده بود و کاملاً بی‌اثر می‌موندن. */
.home-section-wrap {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 64px;
    margin-bottom: 64px;
}
@media (min-width: 1280px) {
    .home-section-wrap {
        max-width: 80rem; /* همون xl:max-w-7xl */
    }
}