/* =============================================================================
   AZARNEJAT — MEDICAL BRAND LAYER  (palette v4 · Luxury Navy + Gold)
   هویت رنگی برند «گروه سلامت آذرنجات»
   -----------------------------------------------------------------------------
   فقط «ظاهر» را تغییر می‌دهد؛ هیچ متن/لینک/اسکیما/ساختار HTML دست‌کاری نمی‌شود.
   کاملاً قابل‌بازگشت (حذف enqueue از inc/theme-enqueues.php).

   پالت مصوب کارفرما:
     رنگ اصلی (سرمه‌ای لوکس) ......... #0F172A
     رنگ ثانویه ...................... #1E293B
     رنگ تأکیدی (طلایی لوکس) ......... #C8A45D   · hover #B68E45
     پس‌زمینه عمومی (سفید استخوانی) ... #F8F8F6
     متن اصلی ........................ #1A1A1A
     متن فرعی ........................ #4B5563
     فوتر ............................ #0B1120

   قاعدهٔ خوانایی (WCAG AA) — طلایی روشن روی زمینهٔ روشن خوانا نیست:
     • #C8A45D روی سرمه‌ای  → کنتراست ۷.۵:۱ ✓  (تیتر فوتر، آیکون، خط طلایی)
     • #C8A45D روی سفید     → کنتراست ۲.۱:۱ ✗  → هرگز به‌عنوان «متن» روی زمینهٔ روشن
     • --gold-ink #7C6128 روی سفید استخوانی → کنتراست ۵.۵:۱ ✓ (متن/لینک تأکیدی روشن)
     • دکمهٔ طلایی: متن سرمه‌ای (۷.۵:۱) — سفید روی طلایی فقط ۲.۳:۱ است و رد می‌شود.
   ========================================================================== */

:root {
    --brand-navy: #0F172A;       /* رنگ اصلی — هدر، دکمه‌های ثانویه، بخش‌های تیره */
    --brand-navy-2: #1E293B;     /* رنگ ثانویه — پنل‌ها، زیرمنو، عمق */
    --brand-navy-3: #0B1120;     /* عمیق‌ترین — فوتر */
    --brand-gold: #C8A45D;       /* تأکیدی — فقط روی زمینهٔ تیره یا به‌عنوان پرکنندهٔ دکمه */
    --brand-gold-hover: #B68E45; /* hover دکمهٔ طلایی */
    --brand-gold-ink: #7C6128;   /* طلاییِ خوانا برای «متن» روی زمینهٔ روشن */
    --brand-gold-tint: #F3EEE2;  /* تینت طلاییِ بسیار ملایم (badgeها) */
    --brand-bg: #F8F8F6;         /* پس‌زمینهٔ عمومی — سفید استخوانی */
    --brand-bg-alt: #F1F0EC;     /* بخش‌های متناوب */
    --brand-tint: #E8EAEE;       /* تینت سرمه‌ای روشن */
    --brand-ink: #1A1A1A;        /* متن اصلی */
    --brand-ink-2: #4B5563;      /* متن فرعی */
    --brand-card: #FFFFFF;
    --brand-border: #E4E2DC;     /* حاشیهٔ خنثیِ گرم */
    --brand-hairline: rgba(200, 164, 93, .38);  /* خط طلایی ظریف */
    --brand-on-dark: #FFFFFF;    /* متن روی سرمه‌ای */
    --brand-on-dark-2: #CBD5E1;  /* لینک/متن فرعی روی سرمه‌ای (خاکستری روشن) */
    --shadow-soft: 0 10px 28px -18px rgba(15, 23, 42, .20);
    --shadow-hover: 0 20px 42px -22px rgba(15, 23, 42, .30);
}

/* =============================================================================
   1) فونت — کل سایت با یک فونت فارسی لوکس: Yekan Bakh
   (در قالب موجود است: assets/client/fonts/yekanbakh — نیازی به دانلود نیست)
   ========================================================================== */
body,
input, select, textarea, button,
.font-rokh, .font-yekan, .font-peyda {
    font-family: "yekan", -apple-system, "Segoe UI", Tahoma, sans-serif !important;
}

h1, h2, h3, .font-rokh {
    letter-spacing: -0.01em;
}

/* =============================================================================
   2) بدنه و بخش‌ها — سفید استخوانی + بخش‌های متناوب
   ========================================================================== */
body {
    background: var(--brand-bg) !important;
    color: var(--brand-ink);
}

/* آبیِ روشنِ پزشکیِ قدیمی (ممنوع) → خنثی/گرم */
.bg-\[\#F4F9FF\],
.bg-\[\#f4f9ff\],
.bg-\[\#EFF3F8\],
.bg-\[\#eff3f8\],
.bg-\[\#EBEBF5\],
.bg-\[\#F8FAFE\],
.bg-\[\#F7F9FC\],
.bg-zircon {
    background-color: var(--brand-bg-alt) !important;
}

/* #testimonial-area عمداً اینجا نیست: از بازطراحیِ نظرات، آن بخش پس‌زمینهٔ
   سرمه‌ایِ خودش را دارد و این قانونِ !important خنثی‌اش می‌کرد. */
#request {
    background: var(--brand-bg-alt) !important;
}

/* =============================================================================
   3) نگاشت سراسری رنگ‌های قدیمی (قرمز تند / آبی پزشکی) → سرمه‌ای + طلایی
   هدر و فوتر با specificity بالاتر این‌ها را بازنویسی می‌کنند.
   ========================================================================== */

/* --- آبیِ برند قدیم → سرمه‌ای --- */
.text-ablue-500,
.text-\[\#2E3192\],
.text-\[\#313693\],
.text-\[\#071f5d\],
.text-\[\#1C224F\],
.text-\[\#3B3C72\],
.text-myblue {
    color: var(--brand-navy) !important;
}

.bg-ablue-500,
.bg-\[\#2E3192\] {
    background-color: var(--brand-navy) !important;
}

.border-ablue-500,
.border-\[\#2E3192\],
.border-\[\#2E319226\],
.border-\[\#2E319221\] {
    border-color: var(--brand-navy) !important;
}

.bg-ablue-200 {
    background-color: var(--brand-tint) !important;
}

.text-ablue-200 {
    color: var(--brand-navy) !important;
}

.hover\:bg-ablue-500:hover {
    background-color: var(--brand-navy) !important;
}

.hover\:text-ablue-500:hover {
    color: var(--brand-gold-ink) !important;
}

/* --- قرمزِ تند (ممنوع در بخش‌های عمومی) → طلاییِ خوانا --- */
/* متن/تیتر تأکیدی روی زمینهٔ روشن → طلاییِ عمیق (۵.۵:۱) */
.text-ared-500,
.text-\[\#D62121\],
.text-primary,
.text-primary-500,
.text-myred,
.text-red-500 {
    color: var(--brand-gold-ink) !important;
}

.hover\:text-ared-500:hover,
.hover\:text-red-500:hover {
    color: var(--brand-gold-hover) !important;
}

/* پرکنندهٔ طلایی + متن سرمه‌ای (۷.۵:۱).
   `.bg-ared-500.text-white` بر `.text-white` غالب است، پس متن سفیدِ قالب قدیم
   خودبه‌خود سرمه‌ای می‌شود و کنتراست ضعیف پیش نمی‌آید. */
.bg-ared-500,
.bg-primary,
.bg-primary-500,
.bg-\[\#D62121\],
.bg-red-500 {
    background-color: var(--brand-gold) !important;
    color: var(--brand-navy) !important;
}

.bg-ared-500.text-white,
.bg-primary.text-white,
.bg-red-500.text-white,
.bg-ared-500 .text-white {
    color: var(--brand-navy) !important;
}

.bg-ared-500 svg path,
.bg-primary svg path {
    fill: currentColor;
}

.bg-ared-600,
.bg-ared-700,
.hover\:bg-ared-500:hover,
.hover\:bg-ared-700:hover,
.hover\:bg-red-500:hover {
    background-color: var(--brand-gold-hover) !important;
    color: var(--brand-navy) !important;
}

.border-ared-500,
.border-\[\#D62121\],
.border-red-500,
.border-\[\#ee744f\] {
    border-color: var(--brand-gold) !important;
}

/* badgeهای قرمزِ روشن → تینت طلاییِ ملایم */
.bg-\[\#FFE3E3\],
.bg-\[\#ffe3e3\],
.bg-\[\#D6212114\],
.hover\:bg-\[\#FFE3E3\]:hover {
    background-color: var(--brand-gold-tint) !important;
}

.border-\[\#D6212126\] {
    border-color: var(--brand-hairline) !important;
}

/* SVGهای درون‌خطیِ قالب که رنگ قرمز/آبیِ قدیم را در attribute دارند.
   خطوطِ تزئینی (stroke) → طلاییِ ظریف · نمادها (fill) → سرمه‌ای خوانا. */
svg path[stroke="#D62121"],
svg path[stroke="#d62121"] {
    stroke: var(--brand-gold) !important;
}

svg path[fill="#D62121"],
svg path[fill="#d62121"] {
    fill: var(--brand-navy) !important;
}

svg path[stroke="#2E3192"] {
    stroke: var(--brand-navy) !important;
}

svg path[fill="#2E3192"] {
    fill: var(--brand-navy) !important;
}

/* ستارهٔ امتیازِ زردِ SVG → طلاییِ برند (تک‌رنگیِ پالت) */
svg path[fill="#D9A600"] {
    fill: var(--brand-gold) !important;
}

/* آیکون حلقه‌ایِ بالای کارت‌ها: عادی سرمه‌ای، hover طلایی */
.group-hover\:bg-ared-500:hover,
.group:hover .group-hover\:bg-ared-500 {
    background-color: var(--brand-gold) !important;
}

/* گزینهٔ فعالِ منو در `main-rtl.css` با `!important` قرمزِ تند می‌شود؛
   با specificity بالاتر خنثی می‌شود (هدر/فوتر: طلایی · بدنه: سرمه‌ای). */
#main-header .menu-item.current-menu-item > a,
.footer .menu-item.current-menu-item > a {
    color: var(--brand-gold) !important;
}

.menu-item.current-menu-item > a {
    color: var(--brand-navy) !important;
}

/* نوار کپی‌رایتِ فوتر (رنگش در main-rtl.css آبیِ قدیم است) */
.footer .copyright {
    color: var(--brand-on-dark-2) !important;
}

/* --- متن‌های خاکستریِ کم‌کنتراست → خاکستریِ خوانا (۷:۱) --- */
.text-\[\#556070\],
.text-\[\#5F6266\],
.text-\[\#878787\],
.text-\[\#42526B\],
.text-\[\#6B7280\],
.text-\[\#4E4E4E\],
.text-\[\#737881\],
.text-gray-400,
.text-gray-500 {
    color: var(--brand-ink-2) !important;
}

.text-black {
    color: var(--brand-ink) !important;
}

/* لینک «طراحی و توسعه» در فوتر (نارنجی) → طلایی */
.hover\:text-orange-300:hover {
    color: var(--brand-gold) !important;
}

/* =============================================================================
   4) هدر — سرمه‌ای مات، بدون هیچ شیشه/بلور/شفافیت، منوی سفید، هاور طلایی
   ========================================================================== */
#main-header {
    background: var(--brand-navy) !important;
    background-color: var(--brand-navy) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 2px 16px rgba(11, 17, 32, .30) !important;
    border-bottom: 1px solid var(--brand-hairline);
}

/* نوار منوی دسکتاپ → همان سرمه‌ای مات (نه آبیِ روشن، نه شفاف) */
#main-header .right-menu-container,
#main-header .left-menu-container {
    background: var(--brand-navy) !important;
}

/* پیل‌های سفیدِ هدر → شفاف تا سرمه‌ای یکدست دیده شود */
#main-header .bg-\[\#f4f9ff\],
#main-header .bg-\[\#F4F9FF\],
#main-header a.bg-white,
#main-header .bg-white {
    background: transparent !important;
}

/* آیکون‌های تصویریِ هدر → سفید تا روی سرمه‌ای خوانا باشند.
   `az-phone-icon` جایگزینِ سلکتورِ `img[src*="phone"]` است: آیکونِ تلفنِ موبایل
   حالا inline است (یک درخواست کمتر روی هر بازدید) و دیگر src ندارد که مطابقت کند. */
#main-header img[src*="phone"],
#main-header .az-phone-icon,
#main-header img[src*="headservice"] {
    filter: brightness(0) invert(1) !important;
}

/* تزئینات سفیدِ تم روشن (header1/shadow/pathright/pathleft) حالا از خودِ header.php
   حذف شده‌اند، نه فقط پنهان. تا وقتی که `display:none` بودند، مرورگر و گوگل‌بات
   بازهم هر چهار فایل را روی هر بازدید دانلود می‌کردند (~۵۴۸ درخواست در ماه برای
   تصویری که هیچ‌کس نمی‌بیند). این قاعده به‌عنوان تورِ ایمنی می‌ماند تا اگر جایی
   قالبِ قدیمی دوباره این نام‌ها را چاپ کرد، بریدگیِ سفید وسط هدر برنگردد. */
#main-header img[src*="header1"],
#main-header img[src*="shadow"],
#main-header img[src*="pathright"],
#main-header img[src*="pathleft"] {
    display: none !important;
}

/* نوارِ منوی دسکتاپ زیرِ هدر می‌نشیند، ولی ظرفش در y=-100 است و فرزندانش با
   `top:154px` به پایین جابه‌جا می‌شوند — پس رنگ‌دادن به ظرف بی‌فایده است و بین دو
   نوارِ منو یک شکافِ شفاف می‌ماند. این نوار را مستقیماً با ::after می‌کشیم.
   z-index منفی تا پشتِ متنِ منوها بماند (ولی هنوز داخل استکینگ‌کانتکستِ هدر). */
@media (min-width: 1024px) {
    #main-header::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 50px;
        z-index: -1;
        background: var(--brand-navy);
        border-bottom: 1px solid var(--brand-hairline);
        pointer-events: none;
    }
}

/* نشانِ سرمه‌ایِ پشتِ لوگو.
   نکته: تصویرِ `header1.svg` که به این ظرف عرض می‌داد display:none شده، و لوگو
   position:absolute است — پس ظرف باید عرض/ارتفاع صریح بگیرد و آیکونِ داخلِ
   لینکِ flex نباید shrink شود، وگرنه لوگو به عرض صفر جمع می‌شود. */
@media (min-width: 1024px) {
    #main-header .lg\:relative {
        width: 120px;
        height: 100%;
    }

    #main-header .lg\:relative>a[href]:not(.lg\:hidden) {
        width: 120px;
        background: var(--brand-navy) !important;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 12px 22px -12px rgba(11, 17, 32, .55);
    }

    #main-header .lg\:relative>a[href]:not(.lg\:hidden) img {
        flex: 0 0 auto;
        width: 96px;
        height: auto;
    }
}

/* ---------------------------------------------------------------------------
   4-ب) هدر موبایل (≤768px) — لوگو باید کاملاً داخل نوارِ ۷۵پیکسلی بماند.
   مارک‌آپ لوگوی موبایل را با ابعاد ذاتیِ 112×87 می‌فرستد؛ یعنی ۱۲ پیکسل بلندتر
   از خودِ هدر → از بالا و پایین بیرون می‌زد و نیمهٔ پایینی‌اش زیر هدر می‌افتاد
   (شبیه لوگوی دوم). ضمناً دکمهٔ واتساپِ هدر با `hidden lg:inline-flex` باید
   دسکتاپ‌تنها می‌بود، ولی `.wa-lux{display:inline-flex}` (استایل فوتر، دیرتر در
   سند) کلاس `hidden` را می‌بَرد؛ پس در موبایل هم می‌آید و ردیف را از عرض صفحه
   پهن‌تر می‌کند (overflow افقی + لهیدنِ لوگو). این‌جا دکمه را جمع‌وجور می‌کنیم
   تا لوگو/همبرگر/دکمه در یک ردیفِ هم‌تراز جا شوند.
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {

    /* ردیفِ هدر: بدون شکستن خط، با فاصلهٔ کم و اجازهٔ جمع‌شدنِ فرزندان */
    #main-header .element .container>div {
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
    }

    /* ظرفِ لوگو — بدون absolute/transform/مارجین منفی */
    #main-header .lg\:relative {
        position: static;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
        transform: none;
    }

    /* لینکِ لوگوی موبایل (نسخهٔ دسکتاپ همچنان hidden است و دست نمی‌خورد) */
    #main-header .lg\:relative>a.lg\:hidden {
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        margin: 0;
        padding: 0;
        transform: none;
        line-height: 0;
    }

    /* خودِ تصویرِ لوگو: نسبت اصلی حفظ، داخلِ ارتفاع هدر */
    #main-header .lg\:relative>a.lg\:hidden img {
        display: block;
        width: auto;
        height: auto;
        max-width: 92px;
        max-height: 56px;
        object-fit: contain;
        margin: 0;
        transform: none;
    }

    /* دکمهٔ «درخواست خدمات آنلاین» فقط داخل هدر جمع‌وجور شود
       (نسخه‌های فوتر و صفحهٔ اصلی دست‌نخورده می‌مانند) */
    #main-header .wa-lux {
        flex: 0 1 auto;
        min-width: 0;
        gap: .35rem;
        padding: .4rem .6rem;
        font-size: .72rem;
        border-radius: 10px;
        white-space: nowrap;
    }

    #main-header .wa-lux .wa-ic {
        font-size: 1rem;
    }

    /* آیکونِ تماس و همبرگر جمع نشوند */
    #main-header a[href^="tel:"],
    #main-header .hamburger {
        flex: 0 0 auto;
    }

    #main-header a[href^="tel:"] {
        padding: .5rem;
        min-width: 40px;
        min-height: 40px;
    }
}

/* گوشی‌های خیلی باریک (≤360px): متنِ دکمهٔ واتساپ جا نمی‌شود و روی لوگو/همبرگر
   می‌افتد → دکمه آیکونی می‌شود (خودش سرِ جایش می‌ماند و کار می‌کند). */
@media (max-width: 360px) {
    #main-header .wa-lux {
        gap: 0;
        padding: .45rem .55rem;
    }

    #main-header .wa-lux .wa-tx {
        display: none;
    }
}

/* لوگوی رسمی برند رنگی بماند */
#main-header a[href] img[src*="brand"],
#main-header a[href] img[src*="logo"],
#main-header img[alt="logo"] {
    filter: none !important;
}

/* خطوط تزئینیِ هدر → طلاییِ ظریف */
#main-header .element::after {
    background: linear-gradient(270deg,
            rgba(200, 164, 93, 0) -6%,
            rgba(200, 164, 93, .55) 50%,
            rgba(200, 164, 93, 0) 106%) !important;
    height: 1.5px !important;
    opacity: 1;
}

#main-header .element2::after,
#main-header .element3::after {
    background: linear-gradient(270deg,
            rgba(200, 164, 93, 0) 0%,
            rgba(200, 164, 93, .32) 50%,
            rgba(200, 164, 93, 0) 100%) !important;
}

/* متن و لینک‌های هدر → سفید خالص */
#main-header,
#main-header .text-ablue-500,
#main-header .text-myblue,
#main-header .text-black,
#main-header .text-\[\#000000\],
#main-header .main-menu > .menu-item > a,
#main-header .main-menu .menu-item a,
#main-header a[href^="tel:"],
#main-header span,
#main-header p {
    color: #ffffff !important;
}

/* هاور منوها → طلایی */
#main-header .main-menu .menu-item a:hover,
#main-header .main-menu .menu-item:hover > a {
    color: var(--brand-gold) !important;
}

/* واژه‌های تأکیدی هدر («۲۴ ساعته») → طلایی */
#main-header .text-myred,
#main-header .text-ared-500 {
    color: var(--brand-gold) !important;
}

#main-header .hamburger i {
    color: #ffffff !important;
}

#main-header svg path[stroke="#2E3192"] {
    stroke: #ffffff !important;
}

#main-header svg path[fill="#2E3192"] {
    fill: #ffffff !important;
}

/* منوی بازشوی دسکتاپ → پنل ثانویه #1E293B با حاشیهٔ طلاییِ نازک */
@media (min-width: 1024px) {
    /* ---------------------------------------------------------------------
       باز شدن زیرمنوها — فقط «فرزندِ مستقیم»
       قانونِ قدیمیِ قالب نواده‌ای بود (.menu-item:hover .sub-menu) و با hover روی
       یک گزینه، همهٔ زیرمنوهای تودرتویش را باز می‌کرد (قبلاً overflow:hidden
       پنهانشان می‌کرد). این‌جا همه را پیش‌فرض می‌بندیم و فقط زیرمنوی فرزندِ
       مستقیمِ گزینه‌ای که hover/کلیک شده را باز می‌کنیم.
       چون هر <li> داخل <li> والدش است، با hover روی سطح عمیق، کلِ مسیر باز
       می‌مانَد؛ ولی هم‌سطح‌ها و نوه‌ها بسته می‌مانند.
       --------------------------------------------------------------------- */
    #main-header .main-menu .sub-menu {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    #main-header .main-menu .sub-menu > li {
        visibility: hidden !important;
    }

    #main-header .main-menu .sub-menu > li > a {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    #main-header .main-menu .menu-item:hover > .sub-menu,
    #main-header .main-menu .menu-item.az-open > .sub-menu {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #main-header .main-menu .menu-item:hover > .sub-menu > li,
    #main-header .main-menu .menu-item.az-open > .sub-menu > li {
        visibility: visible !important;
    }

    #main-header .main-menu .menu-item:hover > .sub-menu > li > a,
    #main-header .main-menu .menu-item.az-open > .sub-menu > li > a {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    #main-header .main-menu .menu-item .sub-menu {
        background: var(--brand-navy-2) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid var(--brand-hairline) !important;
        border-radius: 12px !important;
        box-shadow: 0 18px 40px rgba(11, 17, 32, .48) !important;
        overflow: hidden;
    }

    /* زیرمنویی که خودش زیرمنوی تودرتو دارد نباید محتوایش را برش بزند */
    #main-header .main-menu .menu-item .sub-menu:has(> li > .sub-menu) {
        overflow: visible !important;
    }

    #main-header .main-menu .menu-item .sub-menu li a {
        color: #ffffff !important;
    }

    #main-header .menu-wrapper .main-menu .menu-item .sub-menu li:hover {
        background-color: rgba(200, 164, 93, .14) !important;
    }

    #main-header .menu-wrapper .main-menu .menu-item .sub-menu li:hover a {
        color: var(--brand-gold) !important;
    }
}

/* در اسکرول هم دقیقاً همان رنگ بماند */
#main-header.scrolled,
#main-header[class*="scroll"] {
    background: var(--brand-navy) !important;
}

/* =============================================================================
   5) منوی موبایل — آکاردئونِ سرمه‌ایِ مات (بدون بلور)
   مارک‌آپ از تابع az_render_mobile_menu (inc/utils.php).
   ========================================================================== */
#mobile_nav {
    background: var(--brand-navy) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    padding: 10px 18px 48px !important;
    font-family: "yekan", sans-serif !important;
}

#mobile_nav .az-mnav,
#mobile_nav .az-mnav-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobile_nav .az-mnav-sub {
    display: none;
    margin: 0 6px 6px 0;
    padding-right: 14px;
    border-right: 1.5px solid var(--brand-hairline);
}

#mobile_nav .az-mnav > .az-mnav-item {
    border-bottom: 1px solid rgba(200, 164, 93, .18);
}

#mobile_nav .az-mnav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
}

#mobile_nav .az-mnav-link {
    flex: 1 1 auto;
    display: block;
    padding: 8px 2px;
    color: var(--brand-on-dark-2) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

#mobile_nav .az-mnav > .az-mnav-item > .az-mnav-row > .az-mnav-link {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff !important;
}

#mobile_nav .az-mnav-sub > .az-mnav-item > .az-mnav-row > .az-mnav-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-on-dark) !important;
}

#mobile_nav .az-mnav-sub .az-mnav-sub .az-mnav-link {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--brand-on-dark-2) !important;
}

#mobile_nav .az-mnav-link:hover,
#mobile_nav .az-mnav-link:active,
#mobile_nav .az-mnav-item.is-open > .az-mnav-row > .az-mnav-link {
    color: var(--brand-gold) !important;
}

/* دکمهٔ +/− — با CSS رسم شده تا در همهٔ سطوح هم‌اندازه و هم‌راستا بماند */
#mobile_nav .az-mnav-toggle {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(200, 164, 93, .40);
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

#mobile_nav .az-mnav-ico {
    position: relative;
    display: block;
    width: 11px;
    height: 11px;
}

#mobile_nav .az-mnav-ico::before,
#mobile_nav .az-mnav-ico::after {
    content: "";
    position: absolute;
    background: var(--brand-gold);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease, background .2s ease;
}

#mobile_nav .az-mnav-ico::before {
    top: 50%;
    left: 0;
    width: 11px;
    height: 2px;
    transform: translateY(-50%);
}

#mobile_nav .az-mnav-ico::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 11px;
    transform: translateX(-50%);
}

#mobile_nav .az-mnav-item.is-open > .az-mnav-row > .az-mnav-toggle {
    background: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}

#mobile_nav .az-mnav-item.is-open > .az-mnav-row > .az-mnav-toggle .az-mnav-ico::before,
#mobile_nav .az-mnav-item.is-open > .az-mnav-row > .az-mnav-toggle .az-mnav-ico::after {
    background: var(--brand-navy);
}

#mobile_nav .az-mnav-item.is-open > .az-mnav-row > .az-mnav-toggle .az-mnav-ico::after {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
}

/* =============================================================================
   6) کارت‌های خدمات — سفید، گوشهٔ نرم، سایهٔ بسیار ملایم، خط طلاییِ ظریف
   ========================================================================== */
.section .group [class*="border-[#d3d4e8]"],
.section .group [class*="border-[#DBDBED]"],
.section [class*="border-[#DBDBED]"] {
    background: var(--brand-card);
    border-color: var(--brand-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-soft);
    transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}

.section .group:hover [class*="border-[#d3d4e8]"],
.section .group:hover [class*="border-[#DBDBED]"] {
    border-color: var(--brand-gold) !important;
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

/* کارت‌های خارج از .section (مثل «حوزه فعالیت» در درباره ما) */
.border-\[\#DBDBED\] {
    border-color: var(--brand-border) !important;
}

.hover\:border-ablue-500:hover {
    border-color: var(--brand-gold) !important;
}

/* حلقهٔ آیکن بالای کارت‌ها → سرمه‌ای، در hover طلایی */
.section .group .bg-ablue-500 {
    background: var(--brand-navy) !important;
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .45);
}

.section .group:hover .bg-ablue-500 {
    background: var(--brand-gold) !important;
}

.section .group .rounded-b-full.bg-ablue-500 {
    background: var(--brand-gold) !important;
}

.section .group a.text-\[\#2E3192\] {
    color: var(--brand-navy) !important;
}

.section .group:hover a.text-\[\#2E3192\] {
    color: var(--brand-gold-ink) !important;
}

/* =============================================================================
   7) دکمه‌ها — دکمهٔ اصلی: پرکنندهٔ طلایی، متن سرمه‌ای، hover طلاییِ تیره‌تر
   (متن سفید روی طلایی فقط ۲.۳:۱ کنتراست دارد و طبق قانون ۹ رد می‌شود؛
    متن سرمه‌ای روی همان طلایی ۷.۵:۱ است — ترکیب کلاسیک برندهای لوکس.)
   ========================================================================== */
.button_slide1,
.button_slide,
.brand-btn {
    background: var(--brand-gold) !important;
    color: var(--brand-navy) !important;
    border-color: var(--brand-gold) !important;
    font-weight: 800;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.button_slide1::before,
.button_slide::before {
    display: none !important;
}

.button_slide1:hover,
.button_slide:hover,
.brand-btn:hover {
    background: var(--brand-gold-hover) !important;
    color: var(--brand-navy) !important;
    border-color: var(--brand-gold-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(200, 164, 93, .75);
}

.button_slide1 svg path,
.button_slide svg path,
.button_slide1:hover svg path,
.button_slide:hover svg path {
    fill: var(--brand-navy) !important;
    stroke: none;
}

/* دکمهٔ اصلیِ هیرو هم کلاس `bg-ablue-200` دارد و قاعدهٔ پیل‌های زیر بر آن غالب
   می‌شد؛ این قاعده با specificity بالاتر طلایی نگهش می‌دارد. */
.section a.button_slide1.bg-ablue-200,
.section a.button_slide1.bg-ablue-200:hover {
    background: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    color: var(--brand-navy) !important;
}

.section a.button_slide1.bg-ablue-200:hover {
    background: var(--brand-gold-hover) !important;
    border-color: var(--brand-gold-hover) !important;
}

.section a.button_slide1.bg-ablue-200 svg path {
    fill: var(--brand-navy) !important;
}

/* پیل‌های خدماتِ هیرو → کارتِ سفید با خط طلاییِ ظریف در hover */
.section a.bg-ablue-200:not(.button_slide1) {
    background: var(--brand-card) !important;
    border: 1px solid var(--brand-border) !important;
    color: var(--brand-navy) !important;
    box-shadow: 0 8px 20px -16px rgba(15, 23, 42, .30);
    transition: all .3s ease;
}

.section a.bg-ablue-200:not(.button_slide1):hover {
    border-color: var(--brand-gold) !important;
    color: var(--brand-gold-ink) !important;
    box-shadow: 0 12px 24px -16px rgba(200, 164, 93, .55);
}

/* آیکونِ خدمتِ داخل پیل: رنگش با قاعدهٔ سراسریِ svg[fill] سرمه‌ای می‌شود؛
   اگر آیکونی رنگِ درون‌خطیِ دیگری داشت، این fallback خنثی‌اش می‌کند. */
.section a.bg-ablue-200:not(.button_slide1) > div span svg path:not([fill]):not([stroke]) {
    fill: var(--brand-navy);
}

/* فوکوس فیلدهای فرم → طلایی */
#request input:hover,
#request select:hover,
#request input:focus,
#request select:focus,
.form-input-focus {
    border-color: var(--brand-gold) !important;
}

.form-input-focus {
    box-shadow: 0 4px 14px rgba(200, 164, 93, .20) !important;
}

/* =============================================================================
   8) بخش نظرات مشتریان
   این بخش روی زمینهٔ سرمه‌ای بازطراحی شد و رنگ‌هایش را خودش در
   `components/sections/home/testimonial.php` تعریف می‌کند. قواعد قبلیِ اینجا
   مارک‌آپ قدیمی (.client-comment / .nav-btn / .fa-star) را هدف می‌گرفتند که
   دیگر وجود ندارد، و تنها اثر باقی‌مانده‌شان تیره‌کردنِ تیترِ سفیدِ روی سرمه‌ای بود.
   ========================================================================== */

/* آواتارِ پیش‌فرضِ فیروزه‌ای (user.webp) → خنثی. عکسِ واقعیِ مشتریان دست‌نخورده. */
#testimonial-area img[src*="user"] {
    filter: grayscale(1) contrast(.95) brightness(1.03);
}

/* =============================================================================
   9) کارت‌های متخصصین — گرادیانِ آبی/قرمزِ قدیم → سرمه‌ای/طلایی (تک‌رنگ و آرام)
   ========================================================================== */
.team-card .from-\[\#2E3192\],
.from-\[\#2E3192\] {
    --tw-gradient-from: var(--brand-navy) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(15, 23, 42, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.group-hover\:from-\[\#D62121\]:hover,
.group:hover .group-hover\:from-\[\#D62121\] {
    --tw-gradient-from: var(--brand-gold-ink) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(124, 97, 40, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-\[\#696bc9\] {
    --tw-gradient-from: var(--brand-navy-2) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(30, 41, 59, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-\[\#ADAFEA\] {
    --tw-gradient-to: #7c879b var(--tw-gradient-to-position) !important;
}

/* =============================================================================
   10) فوتر — #0B1120 · تیترها طلایی · متن سفید · لینک‌ها خاکستری روشن
   ========================================================================== */
.footer {
    background: var(--brand-navy-3) !important;
    color: var(--brand-on-dark) !important;
    border-top: 1px solid var(--brand-hairline);
}

/* تیترهای ستون‌های فوتر → طلایی */
.footer .text-ablue-500,
.footer h3,
.footer h4 {
    color: var(--brand-gold) !important;
}

/* لینک‌های فوتر → خاکستری روشن، هاور طلایی */
.footer a,
.footer li,
.footer li a,
.footer ul.text-\[\#3B3C72\],
.footer ul.text-\[\#556070\],
.footer nav .text-\[\#556070\] {
    color: var(--brand-on-dark-2) !important;
}

/* متن‌های فوتر (نه لینک) → سفید. بعد از قاعدهٔ لینک‌ها می‌آید و
   `p.text-[#3B3C72]` بر `.text-[#3B3C72]` غالب است. */
.footer p,
.footer p.text-\[\#3B3C72\],
.footer p.text-\[\#556070\],
.footer span,
.footer .text-black {
    color: var(--brand-on-dark) !important;
}

.footer a:hover,
.footer li a:hover,
.footer .hover\:text-ablue-500:hover,
.footer .hover\:text-orange-300:hover {
    color: var(--brand-gold) !important;
}

.footer .border-t,
.footer .border-y,
.footer .border-b,
.footer .border-\[\#E9E9E9\],
.footer .border-\[\#dbdbed\],
.footer .border-\[\#DBDBED\] {
    border-color: rgba(200, 164, 93, .18) !important;
}

/* دکمهٔ شمارهٔ تماس در فوتر */
.footer a.border-\[\#2E319226\] {
    border-color: rgba(200, 164, 93, .5) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: var(--brand-gold) !important;
}

.footer a.border-\[\#2E319226\] svg path {
    stroke: var(--brand-gold) !important;
}

.footer .bg-\[\#EBEBF5\] {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--brand-gold) !important;
}

.footer .hover\:bg-ablue-500:hover {
    background: var(--brand-gold) !important;
    color: var(--brand-navy) !important;
}

/* شبکه‌های اجتماعی */
.footer .bg-\[\#2E319221\] {
    background: rgba(200, 164, 93, .14) !important;
    border: 1px solid rgba(200, 164, 93, .28);
    transition: background .3s ease;
}

.footer .bg-\[\#2E319221\]:hover {
    background: rgba(200, 164, 93, .28) !important;
}

.footer .bg-\[\#2E319221\] svg path {
    fill: var(--brand-gold) !important;
}

.footer .text-ared-500 {
    color: var(--brand-gold) !important;
}

/* لوگوی رسمی برند در فوتر رنگی بماند (نمادِ اعتماد) */
.footer img[src*="brand"],
.footer img[src*="logo"],
.footer img[alt="logo"] {
    filter: none !important;
}

/* =============================================================================
   11) نوار تماس/واتساپ چسبانِ موبایل — «تماس فوری» مهم‌ترین عنصر
   ========================================================================== */
#mobile-sticky-cta {
    background: var(--brand-navy) !important;
    border-top: 1px solid var(--brand-hairline) !important;
}

#mobile-sticky-cta .text-ared-500,
#mobile-sticky-cta .text-ablue-500 {
    color: var(--brand-gold) !important;
}

#mobile-sticky-cta span,
#mobile-sticky-cta p {
    color: var(--brand-on-dark) !important;
}

#mobile-sticky-cta a:first-child span {
    color: var(--brand-gold) !important;
}

#mobile-sticky-cta .hover\:bg-\[\#FFE3E3\]:hover,
#mobile-sticky-cta .hover\:bg-\[\#E8F8EE\]:hover {
    background-color: rgba(255, 255, 255, .07) !important;
}

#mobile-sticky-cta .divide-\[\#dbdbed\] > * {
    border-color: rgba(200, 164, 93, .20) !important;
}

/* =============================================================================
   12) بخش‌های تیرهٔ CTA (مشکیِ قالب قدیم) → سرمه‌ای
   ========================================================================== */
.section .bg-\[\#0d0d0d\],
.section .bg-\[\#0D0D0D\],
.section .bg-\[\#111111\],
.section .bg-\[\#161616\],
.section .bg-\[\#1a1a2e\],
.section .bg-\[\#1A1A2E\],
.section .bg-\[\#0b1220\],
.section .bg-\[\#0f0f0f\],
.cta-dark,
.section .bg-neutral-900,
.section .bg-gray-900,
.section .bg-zinc-900 {
    background-color: var(--brand-navy) !important;
}

/* =============================================================================
   13) دکمهٔ شناورِ دسکتاپ — پنل سفید، جزئیات سرمه‌ای/طلایی (بدون قرمز)
   ========================================================================== */
#floating-cta .bg-red-500 {
    background-color: var(--brand-gold) !important;
}

#floating-cta .text-red-500 {
    color: var(--brand-gold-ink) !important;
}

#floating-cta .border-\[\#2E3192\] {
    border-color: var(--brand-navy) !important;
}

/* =============================================================================
   14) کلاس‌های کمکیِ برندینگ
   ========================================================================== */
.brand-btn {
    border-radius: 9999px;
}

.brand-hairline {
    height: 1px;
    background: linear-gradient(270deg, transparent, var(--brand-gold), transparent);
}

/* =============================================================================
   15) بخش «مجوزهای رسمی» (licenses.php — فعلاً در صفحه‌ای include نشده)
   ========================================================================== */
.lux-section-dark {
    background: var(--brand-navy) !important;
    position: relative;
}

.lux-gold-text {
    color: var(--brand-gold) !important;
}

.lux-frame {
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--brand-hairline);
    box-shadow: 0 14px 34px rgba(11, 17, 32, .35);
}

.lux-frame img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

/* =============================================================================
   16) بخش «چرا ما» — آیکون‌ها و دو بنر بزرگ
   هر دو فایلِ تصویری‌اند (در پنل وردپرس آپلود شده‌اند) و رنگِ قرمز/آبیِ قدیم
   دارند؛ با فیلتر به سرمه‌ای برند تبدیل می‌شوند. اگر روزی نسخهٔ سرمه‌ای/طلایی
   این تصاویر در پنل جایگزین شد، کافی است این دو قاعده حذف شوند.
   ========================================================================== */
.whyus img {
    filter: grayscale(1) brightness(.4);
}

/* دوتونِ سرمه‌ای: تصویر خاکستری می‌شود و یک پوششِ سرمه‌ای رنگش می‌زند.
   فقط فیلتر کافی نیست — روشناییِ دو عکسِ منبع فرق دارد و یکی آبیِ روشن درمی‌آمد؛
   پوششِ یکدست هر دو بنر را هم‌تُن و متنِ سفیدشان را خوانا می‌کند. */
.whyus-banner {
    background: var(--brand-navy);
}

.whyus-banner img {
    filter: grayscale(1) contrast(1.06) brightness(.88);
}

/* بدون z-index تا در ترتیبِ رسم، بعد از تصویر و پیش از لایهٔ متن قرار بگیرد. */
.whyus-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(155deg,
            rgba(15, 23, 42, .82) 0%,
            rgba(30, 41, 59, .58) 55%,
            rgba(11, 17, 32, .86) 100%);
}

.whyus-banner .show-all {
    border-color: var(--brand-hairline) !important;
    background: rgba(200, 164, 93, .16) !important;
}

.whyus-banner:hover .show-all {
    background: rgba(200, 164, 93, .30) !important;
}

/* =============================================================================
   16b) چیپ‌ها و لینکِ ثانویهٔ باکس «درخواست خدمات آنلاین»
   کلاس‌های .wa-chip/.wa-dot/.wa-ghost در online-request.php استفاده شده‌اند اما
   هیچ‌جا تعریف نشده بودند؛ متنشان رنگِ تیرهٔ بدنه را ارث می‌برد و روی باکسِ
   سرمه‌ای عملاً نامرئی بود.
   ========================================================================== */
.wa-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--brand-hairline);
    color: var(--brand-on-dark) !important;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.wa-chip.wa-gold {
    color: var(--brand-gold) !important;
    background: rgba(200, 164, 93, .10);
}

.wa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 0 rgba(200, 164, 93, .7);
    animation: wa-dot-pulse 2s ease-out infinite;
}

@keyframes wa-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200, 164, 93, .7); }
    70%  { box-shadow: 0 0 0 7px rgba(200, 164, 93, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 164, 93, 0); }
}

.wa-ghost {
    display: inline-flex;
    align-items: center;
    padding: .8rem 1.5rem;
    border-radius: 14px;
    border: 1.5px solid var(--brand-hairline);
    color: var(--brand-on-dark) !important;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.wa-ghost:hover {
    border-color: var(--brand-gold) !important;
    background: rgba(200, 164, 93, .12);
    color: var(--brand-gold) !important;
}

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

/* =============================================================================
   16c) صفحهٔ «استخدام» — پالت inline جداگانه‌ای دارد (آبی #2E3192 + قرمز #E52947)
   که با هویت برند نمی‌خواند؛ این‌جا به سرمه‌ای/طلایی نگاشت می‌شود.
   ========================================================================== */
.estekhdam-prose h2,
.estekhdam-prose strong,
.estekhdam-prose th {
    color: var(--brand-navy) !important;
}

.estekhdam-prose h3 {
    color: var(--brand-gold-ink) !important;
}

.estekhdam-prose a {
    color: var(--brand-navy) !important;
}

.estekhdam-prose a:hover {
    color: var(--brand-gold-ink) !important;
}

.estekhdam-prose p,
.estekhdam-prose ul,
.estekhdam-prose ol,
.estekhdam-prose td,
.estekhdam-prose blockquote {
    color: var(--brand-ink-2) !important;
}

.estekhdam-prose blockquote {
    border-right-color: var(--brand-gold) !important;
    background: var(--brand-gold-tint) !important;
}

.estekhdam-prose th {
    background: var(--brand-bg-alt) !important;
}

/* هیرو: گرادیانتِ آبیِ روشن + هالهٔ قرمز → سفید استخوانی ساده */
.estekhdam-hero {
    background: var(--brand-bg) !important;
}

.estekhdam-hero::before {
    display: none !important;
}

.estekhdam-stats {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--brand-bg-alt) 100%) !important;
}

/* گرادیانتِ شلوغِ سه‌ایستگاهه → سرمه‌ای یکدست */
.estekhdam-cta-final {
    background: var(--brand-navy) !important;
}

/* =============================================================================
   17) فوکوسِ کیبورد → طلایی (روی هر دو زمینهٔ روشن و تیره دیده می‌شود)
   ========================================================================== */
*:focus-visible {
    outline: 2px solid var(--brand-gold) !important;
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
    box-shadow: 0 0 0 3px rgba(200, 164, 93, .30) !important;
}

/* =============================================================================
   18) دکمه/کارت‌های «شهرهای تحت پوشش» (استایل inline در covered-cities.php)
   ========================================================================== */
.main-service-link {
    background-color: var(--brand-gold) !important;
    color: var(--brand-navy) !important;
}

.main-service-link:hover {
    background-color: var(--brand-gold-hover) !important;
}

.current-badge {
    background-color: var(--brand-gold) !important;
    color: var(--brand-navy) !important;
}

.covered-city-card {
    color: var(--brand-navy) !important;
}

.covered-city-card:hover {
    border-color: var(--brand-gold) !important;
    background-color: var(--brand-bg-alt) !important;
}

.covered-city-card.is-current {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
}

/* =============================================================================
   19) واتساپ سبز حفظ می‌شود (رنگ رسمی برند واتساپ) — دست‌نخورده
   .bg-[#25D366] / .text-[#25D366] / .bg-[#1DA851]
   ========================================================================== */

/* =============================================================================
   20) «ما را در شبکه‌های اجتماعی دنبال کنید» — ردیفِ آیکون‌های فوتر
   فوتر سرمه‌ای (#0B1120) است، پس دایره‌ها شیشه‌ایِ روشن با حاشیهٔ طلایی‌اند و
   آیکون سفید. در hover دایره طلایی‌رنگ می‌شود و آیکون رنگِ رسمیِ همان شبکه را
   می‌گیرد (--az-social-brand؛ تُنِ روشنِ هر برند تا روی تیره خوانا بماند).
   `!important`ها لازم‌اند چون `.footer a` در بخش ۱۰ رنگ را با !important می‌گیرد.
   اندازهٔ ۴۶px ≥ حداقلِ ۴۴px برای هدفِ لمسی روی موبایل.
   ========================================================================== */
.az-social {
    text-align: center;
}

@media (min-width: 768px) {
    .az-social { text-align: start; }
}

.footer .az-social__title {
    margin: 0 0 1.15rem;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.6;
    color: var(--brand-gold) !important;
    position: relative;
    display: inline-block;
}

/* خطِ طلاییِ محوشوندهٔ زیرِ عنوان */
.footer .az-social__title::after {
    content: "";
    position: absolute;
    bottom: -.45rem;
    inset-inline-start: 0;
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--brand-gold), rgba(200, 164, 93, 0));
}

.az-social__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .az-social__list { justify-content: flex-start; }
}

.footer .az-social__list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer .az-social__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--brand-on-dark) !important;
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;
    background: rgba(255, 255, 255, .06);
    border: 1.5px solid var(--brand-hairline);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-tap-highlight-color: transparent;
    transition: transform .32s cubic-bezier(.25, .46, .45, .94),
                box-shadow .32s ease,
                border-color .32s ease,
                color .32s ease,
                background-color .32s ease;
}

.footer .az-social__link i {
    position: relative;
    z-index: 1;
}

/* هالهٔ طلاییِ نرم که از مرکز باز می‌شود */
.footer .az-social__link::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 120%, rgba(200, 164, 93, .30) 0%, rgba(200, 164, 93, .06) 60%, transparent 100%);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .32s ease, transform .38s cubic-bezier(.25, .46, .45, .94);
    pointer-events: none;
}

.footer .az-social__link:hover,
.footer .az-social__link:focus-visible {
    transform: translateY(-3px) scale(1.06);
    background: rgba(255, 255, 255, .10);
    border-color: var(--brand-gold);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .38), 0 0 0 3px rgba(200, 164, 93, .14);
}

.footer .az-social__link:hover::before,
.footer .az-social__link:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.footer .az-social__link:active {
    transform: translateY(-1px) scale(.96);
}

/* رنگِ رسمیِ هر شبکه — همیشه، نه فقط در hover (دستور کارفرما ۱۴۰۵/۰۴/۲۲).
   دایره‌ی زیرِ آیکون سفیدِ شیری است تا رنگ‌های رسمی روی فوترِ سرمه‌ای خوانا بمانند
   و لوگوهای رنگیِ بله/روبیکا هم درست دیده شوند. */
.footer .az-social__link {
    background: #F5F7FA;
    border-color: rgba(200, 164, 93, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    color: var(--az-social-brand, #0F172A) !important;
}

.footer .az-social__link:hover,
.footer .az-social__link:focus-visible {
    background: #fff;
    color: var(--az-social-brand, #0F172A) !important;
}

.az-social__link--instagram { --az-social-brand: #E1306C; }
.az-social__link--telegram  { --az-social-brand: #229ED9; }
.az-social__link--linkedin  { --az-social-brand: #0A66C2; }
.az-social__link--whatsapp  { --az-social-brand: #25D366; }
.az-social__link--rubika    { --az-social-brand: #7A5AF8; }
.az-social__link--bale      { --az-social-brand: #1BA3A9; }

/* اینستاگرام تک‌رنگ نیست: گرادیانِ رسمی روی خودِ گلیف نشانده می‌شود. */
.az-social__link--instagram i,
.utta-brand-social__link--instagram i {
    background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* روبیکا و بله آیکونِ فونتی ندارند و با لوگوی رسمیِ رنگیِ خودشان نمایش داده می‌شوند.
   هیچ فیلتری روی‌شان نیست: باید دقیقاً همان رنگ و طرحِ فایلِ لوگو دیده شوند
   (دستور کارفرما ۱۴۰۵/۰۴/۲۲). فقط اندازه و ترازشان با بقیهٔ آیکون‌ها هم‌خوان است. */
.footer .az-social__link-logo {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ---- ردیف کانال‌های رسمی داخل باکس برندِ انتهای مقاله (زمینهٔ روشن) ---- */
.utta-brand-social {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.utta-brand-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dbdbed;
    /* رنگِ رسمیِ هر شبکه — همیشه، نه فقط در hover (دستور کارفرما ۱۴۰۵/۰۴/۲۲) */
    color: var(--az-social-brand, #2E3192);
    font-size: 1.05rem;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.utta-brand-social__link:hover,
.utta-brand-social__link:focus-visible {
    transform: translateY(-2px) scale(1.06);
    border-color: var(--az-social-brand, #2E3192);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
}

/* بله و روبیکا: لوگوی رسمیِ رنگی، بدون هیچ فیلتر یا کم‌رنگ‌سازی */
.utta-brand-social__link-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.utta-brand-social__link--instagram { --az-social-brand: #E1306C; }
.utta-brand-social__link--telegram  { --az-social-brand: #229ED9; }
.utta-brand-social__link--linkedin  { --az-social-brand: #0A66C2; }
.utta-brand-social__link--whatsapp  { --az-social-brand: #25D366; }
.utta-brand-social__link--rubika    { --az-social-brand: #7A5AF8; }
.utta-brand-social__link--bale      { --az-social-brand: #1BA3A9; }

@media (prefers-reduced-motion: reduce) {
    .utta-brand-social__link,
    .utta-brand-social__link:hover,
    .utta-brand-social__link:focus-visible {
        transition: none;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer .az-social__link,
    .footer .az-social__link::before {
        transition: none;
    }
    .footer .az-social__link:hover,
    .footer .az-social__link:focus-visible {
        transform: none;
    }
}

/* =============================================================================
   21) سرریزِ افقی در گوشی‌های باریک — فرمِ «ثبت درخواست»
   فرم با `w-[340px]` عرضِ ثابت می‌گیرد و ظرفش `px-6` دارد → 340+48 = 388px،
   یعنی پهن‌تر از صفحهٔ ۳۲۰/۳۷۵ پیکسلی. `body{overflow-x:hidden}` نوارِ اسکرول را
   پنهان می‌کند ولی در RTL کلِ صفحه چند پیکسل جابه‌جا دیده می‌شود.
   همان ۳۴۰px را سقف می‌گذاریم و عرض را شناور می‌کنیم (روی صفحه‌های بزرگ‌تر و
   دسکتاپ `lg:w-[700px]` دست‌نخورده می‌ماند).
   جاهای استفاده: home/tax/city request.php و پاپ‌آپِ درخواست خدمات.
   ========================================================================== */
@media (max-width: 768px) {
    .w-\[340px\] {
        width: 100%;
        max-width: 340px;
    }
}

/* ==========================================================================
   باکس‌ها و اجزای محتوایی مقالات (قابل استفاده‌ی مجدد در همه‌ی مقاله‌ها)
   نکته/هشدار، جدولِ اسکرول‌شونده در موبایل، باکس برند، کپشن، و figure.
   پالت برند: سرمه‌ای #0F172A + طلایی #C8A45D.
   ========================================================================== */
.post-content .az-note {
    position: relative;
    margin: 1.75rem 0;
    padding: 1.15rem 1.25rem 1.15rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: #F7FAFC;
    line-height: 2.05;
}
.post-content .az-note::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 14px 0 0 14px;
    background: #C8A45D;
}
.post-content .az-note--info {
    background: #F1F7FD;
    border-color: rgba(37, 99, 235, .16);
}
.post-content .az-note--info::before { background: #2563EB; }
.post-content .az-note--warning {
    background: #FEF6F2;
    border-color: rgba(217, 90, 45, .18);
}
.post-content .az-note--warning::before { background: #D9722D; }
.post-content .az-note ul { margin: .6rem 0 0; }
.post-content .az-note strong { color: #0F172A; }

/* لینک‌های داخلِ متن
   تا امروز هیچ قاعده‌ای برای `a` داخل `.post-content` وجود نداشت و لینک‌ها
   رنگ متن عادی (#37474F، بدون خط زیر) را می‌گرفتند — یعنی برای کاربر اصلاً
   شبیه لینک نبودند. این هم روی صفحات خدمت (که جدول‌هایشان پر از لینک است)
   و هم روی لینک‌های تزریقی موتور لینک داخلی (.az-ilink) صدق می‌کرد.
   عمداً بدون `:not()`ِ پیچیده نوشته شده (سافاری زیر ۱۶.۴ کل قاعده را دور
   می‌ریزد). لازم هم نیست: `.post-content .az-cta__actions a` پایین‌تر در
   همین فایل و با ویژگی بالاتر تعریف شده و خودش برنده می‌شود، و بلوک
   «خدمات و مطالب مرتبط» اصلاً بیرون از `.post-content` رندر می‌شود. */
.post-content a {
    color: #1D4ED8;
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, .35);
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.post-content a:hover,
.post-content a:focus-visible {
    color: #0F172A;
    text-decoration-color: #C8A45D;
}
/* داخل جدول، خط زیر شلوغ می‌کند؛ رنگ و وزن برای تشخیص کافی است */
.post-content table a { text-decoration: none; font-weight: 700; }
.post-content table a:hover { text-decoration: underline; }

/* جدولِ واکنش‌گرا — در موبایل به‌جای شکستن، افقی اسکرول می‌شود */
.post-content .az-table-wrap {
    margin: 1.75rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
}
.post-content .az-table-wrap table { margin: 0; min-width: 460px; }
.post-content table caption {
    caption-side: top;
    text-align: start;
    font-weight: 700;
    color: #0F172A;
    padding: 0 .25rem .7rem;
    font-size: 1.02rem;
}
.post-content .az-caption-note {
    margin-top: -.9rem;
    font-size: .9rem;
    color: #64748B;
}

/* figure و کپشن تصاویر */
.post-content figure {
    margin: 1.9rem 0;
    text-align: center;
}
.post-content figure img {
    border-radius: 16px;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .28);
}
.post-content figcaption {
    margin-top: .7rem;
    font-size: .92rem;
    color: #64748B;
    line-height: 1.9;
}

/* گالری تصاویر واکنش‌گرا — موبایل تک‌ستونی، دسکتاپ چندستونی */
.post-content .az-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 1.9rem 0;
}
@media (min-width: 640px) {
    .post-content .az-gallery--3 { grid-template-columns: repeat(3, 1fr); }
    .post-content .az-gallery--2 { grid-template-columns: repeat(2, 1fr); }
}
.post-content .az-gallery figure { margin: 0; }
.post-content .az-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .28);
}
.post-content .az-gallery figcaption { margin-top: .55rem; }
/* بنر افقی تمام‌عرض داخل متن */
.post-content .az-media-wide { margin: 1.9rem 0; }
.post-content .az-media-wide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .28);
}
/* تک‌عکس مرکز‌چین با عرض محدود (برای عکس منفرد، مخصوصاً عمودی) */
.post-content .az-figure { margin: 1.9rem auto; max-width: 680px; }
.post-content .az-figure--portrait { max-width: 460px; }
.post-content .az-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .28);
}
.post-content .az-figure figcaption { margin-top: .55rem; text-align: center; }

/* باکس برند انتهای مقاله */
.post-content .az-brandbox {
    margin: 2.5rem 0 1rem;
    padding: 1.6rem 1.6rem 1.4rem;
    border-radius: 18px;
    color: #F8FAFC;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border: 1px solid rgba(200, 164, 93, .35);
}
.post-content .az-brandbox h2 {
    margin: 0 0 .8rem;
    color: #C8A45D;
    border: 0;
    padding: 0;
}
.post-content .az-brandbox p { color: #E2E8F0; }
.post-content .az-brandbox ul { margin: .6rem 0 1rem; }
.post-content .az-brandbox li { color: #E2E8F0; }
.post-content .az-brandbox strong { color: #C8A45D; }

/* باکس تماس/اقدام داخل متن — برای مقاله‌هایی که خواننده‌شان در لحظه‌ی نیاز است.
   طلایی فقط روی زمینه‌ی سرمه‌ای می‌آید؛ روی زمینه‌ی روشن خوانا نیست. */
.post-content .az-cta {
    margin: 2rem 0;
    padding: 1.4rem 1.5rem 1.25rem;
    border-radius: 18px;
    color: #F8FAFC;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border: 1px solid rgba(200, 164, 93, .35);
}
.post-content .az-cta p { color: #E2E8F0; margin: 0 0 .8rem; }
.post-content .az-cta p:last-child { margin-bottom: 0; }
.post-content .az-cta strong { color: #C8A45D; }
.post-content .az-cta .az-cta__title {
    display: block;
    font-weight: 800;
    font-size: 1.12rem;
    color: #C8A45D;
    margin-bottom: .55rem;
}
.post-content .az-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}
.post-content .az-cta__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(200, 164, 93, .55);
    color: #C8A45D;
    background: transparent;
    transition: background-color .18s ease, color .18s ease;
    direction: ltr;
    unicode-bidi: isolate;
}
.post-content .az-cta__actions a.az-cta__primary {
    background: #C8A45D;
    color: #0F172A;
    border-color: #C8A45D;
}
.post-content .az-cta__actions a:hover,
.post-content .az-cta__actions a:focus-visible {
    background: #C8A45D;
    color: #0F172A;
}
.post-content .az-cta__actions a.az-cta__link { direction: rtl; }



/* ==========================================================================
   Touch target sizing (mobile)
   --------------------------------------------------------------------------
   A phone audit found standalone controls below the 24px minimum a finger can
   reliably hit: the testimonial slider dots render at 8x8px, and the footer's
   legal/utility links sit at 19-22px tall.

   Inline links inside running paragraphs are deliberately left alone -- their
   height is the line-height of the sentence they belong to, and padding there
   would break the text flow.

   The slider dots keep their 8px visual size: the extra area is transparent
   padding, with background-clip so the coloured dot does not grow.
   ========================================================================== */

@media (max-width: 1024px) {
    .swiper-pagination-clickable .swiper-pagination-bullet {
        box-sizing: content-box;
        padding: 8px;
        margin: 0 2px !important;
        background-clip: content-box;
    }

    footer nav[aria-label="صفحات قانونی"] a,
    footer .az-footer-utility a {
        display: inline-block;
        padding-block: 3px;
        min-height: 24px;
    }
}

/* =============================================================================
   99) رفعِ ناخوانا شدنِ متن روی hover  (باگ «پشتیبانی آنلاین» در کارت شناور فوتر)
   -----------------------------------------------------------------------------
   بخش ۳ رنگ‌های قدیمیِ برند را با !important نگاشت می‌کند
   (`.text-ablue-500` و `.text-ared-500` → سرمه‌ای/طلایی). همان !important بر
   کلاس‌های `hover:text-white` و `group-hover:text-white` تِیلویند هم غالب می‌شد؛
   نتیجه این‌که هر دکمه‌ای که hover آن زمینهٔ تیره می‌گیرد — مثل «پشتیبانی تلفنی»
   و «پشتیبانی آنلاین» در کارت شناور فوتر — هنگام hover متنِ سرمه‌ای روی زمینهٔ
   سرمه‌ای می‌شد و متن و آیکون کاملاً محو می‌شدند.

   ⚠️ استثناها (`$gold-hover`): دکمه‌هایی که hover آن‌ها زمینهٔ **طلایی** می‌گیرد
   عمداً بیرون نگه داشته شده‌اند. طبق قاعدهٔ خوانایی ابتدای همین فایل، سفید روی
   طلایی فقط ۲.۳:۱ است؛ بخش ۳ و بلوک `.button_slide` برای آن‌ها متنِ سرمه‌ای
   (۵.۹:۱) می‌گذارند و این بلوک نباید آن را خراب کند.
   ========================================================================== */
.hover\:text-white:hover:not(.hover\:bg-ared-500, .hover\:bg-ared-700, .hover\:bg-red-500, .button_slide1, .button_slide, .brand-btn),
.hover\:text-white:hover:not(.hover\:bg-ared-500, .hover\:bg-ared-700, .hover\:bg-red-500, .button_slide1, .button_slide, .brand-btn) p,
.hover\:text-white:hover:not(.hover\:bg-ared-500, .hover\:bg-ared-700, .hover\:bg-red-500, .button_slide1, .button_slide, .brand-btn) span,
.hover\:text-white:hover:not(.hover\:bg-ared-500, .hover\:bg-ared-700, .hover\:bg-red-500, .button_slide1, .button_slide, .brand-btn) i,
.group:not(.hover\:bg-ared-500, .hover\:bg-ared-700, .hover\:bg-red-500):hover .group-hover\:text-white {
    color: #ffffff !important;
}

/* svgهای درون‌خطیِ همان دکمه‌ها که با currentColor کشیده می‌شوند */
.hover\:text-white:hover:not(.hover\:bg-ared-500, .hover\:bg-ared-700, .hover\:bg-red-500, .button_slide1, .button_slide, .brand-btn) svg[stroke="currentColor"] {
    stroke: #ffffff !important;
}

.hover\:text-white:hover:not(.hover\:bg-ared-500, .hover\:bg-ared-700, .hover\:bg-red-500, .button_slide1, .button_slide, .brand-btn) svg[fill="currentColor"] {
    fill: #ffffff !important;
}

/* زمینهٔ سرمه‌ایِ group-hover هم باید !important باشد؛ وگرنه نگاشتِ !importantِ
   زمینهٔ روشن (`.bg-ablue-200` در کارت‌های «همکاری با ما») سرِ جایش می‌ماند و
   متنِ سفیدِ قاعدهٔ بالا روی زمینهٔ روشن می‌افتد. قرینهٔ همین قاعده برای طلایی
   در بخش ۳ وجود دارد. */
.group-hover\:bg-ablue-500:hover,
.group:hover .group-hover\:bg-ablue-500 {
    background-color: var(--brand-navy) !important;
}

/* روی زمینهٔ طلاییِ hover، *همهٔ* محتوای داخلِ دکمه/کارت باید سرمه‌ای شود.
   بخش ۳ فقط رنگِ خودِ عنصر را ست می‌کرد و فرزندانی که کلاس رنگیِ خودشان را
   داشتند (`.text-ared-500` ، `.text-[#556070]`) طلاییِ کم‌کنتراست روی طلایی
   باقی می‌ماندند — مثل کارت «ثبت درخواست همکاری» در صفحهٔ استخدام. */
.hover\:bg-ared-500:hover *,
.hover\:bg-ared-700:hover *,
.hover\:bg-red-500:hover * {
    color: var(--brand-navy) !important;
}

/* =============================================================================
   17) بخش «پرستار در منزل» صفحهٔ اصلی
   -----------------------------------------------------------------------------
   پنلِ تیرهٔ سرمه‌ای/طلایی، هم‌زبان با .wa-hero باکسِ «درخواست خدمات آنلاین»
   که درست بالای همین بخش می‌نشیند.

   ⚠️ اینجا عمداً از `.text-ablue-500` و `.text-ared-500` استفاده نشده: بخش ۳
   آن دو را با !important به سرمه‌ای/طلایی نگاشت می‌کند و سرمه‌ای روی زمینهٔ
   سرمه‌ای محو می‌شود (همان باگی که در بخش ۹۹ توضیح داده شده). رنگ‌ها اینجا
   صریح‌اند. به همین دلیل از `hover:text-white` تِیلویند هم استفاده نشده.
   ========================================================================== */
.nurse-hero {
    border-radius: 28px;
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(200, 164, 93, .16) 0%, transparent 52%),
        radial-gradient(120% 130% at 0% 100%, rgba(200, 164, 93, .07) 0%, transparent 50%),
        linear-gradient(150deg, var(--brand-navy) 0%, var(--brand-navy-3) 100%);
    border: 1.5px solid rgba(200, 164, 93, .30);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
}

.nurse-title { color: #FFFFFF; }
.nurse-title .nurse-accent { color: var(--brand-gold); }
.nurse-lead { color: #C9D2E3; }

.nurse-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    height: 100%;
    padding: 1.35rem 1.4rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(200, 164, 93, .22);
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.nurse-card:hover,
.nurse-card:focus-visible {
    transform: translateY(-4px);
    background: rgba(200, 164, 93, .10);
    border-color: var(--brand-gold);
}

.nurse-card-title {
    color: #FFFFFF;
    font-weight: 800;
    line-height: 1.9;
}

.nurse-card-note {
    color: #AEB9CE;
    line-height: 2;
    font-size: .93rem;
}

/* آیکون‌های این پروژه یکدست نیستند: بعضی currentColor دارند، بعضی fill ثابت و
   یکی stroke قرمز. این سه قاعده همه را به طلاییِ برند می‌آورد. */
.nurse-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(200, 164, 93, .12);
    border: 1px solid rgba(200, 164, 93, .28);
    color: var(--brand-gold);
}

.nurse-ic svg { width: 24px; height: 24px; color: var(--brand-gold); }
.nurse-ic svg [fill]:not([fill="none"]) { fill: currentColor; }
.nurse-ic svg path:not([fill]) { fill: currentColor; }
.nurse-ic svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

.nurse-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.9rem;
    border-radius: 16px;
    background: var(--brand-gold);
    color: var(--brand-navy) !important;
    font-weight: 800;
    text-decoration: none;
    transition: background .3s ease, transform .3s ease;
}

.nurse-cta:hover,
.nurse-cta:focus-visible {
    background: var(--brand-gold-hover);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .nurse-card, .nurse-cta { transition: none; }
    .nurse-card:hover, .nurse-cta:hover { transform: none; }
}

/* =============================================================================
   18) شعار برند — «زندگی، تخصص ماست»
   -----------------------------------------------------------------------------
   یک ظاهر واحد برای همهٔ جاهایی که شعار ظاهر می‌شود (هیروی صفحهٔ اصلی، لاک‌آپِ
   فوتر، صفحهٔ دربارهٔ ما). مارکاپ‌اش از `utta_slogan_line()` در inc/nap.php
   می‌آید تا متن فقط یک جا نگهداری شود.

   ⚠️ رنگ: طلاییِ روشن (#C8A45D) روی زمینهٔ روشن فقط ۲.۱:۱ کنتراست دارد و برای
   «متن» رد می‌شود (قانون بالای همین فایل). فوتر و هیرو هر دو زمینهٔ روشن
   دارند، پس اینجا از --brand-gold-ink (۵.۵:۱ ✓) استفاده شده. فقط وقتی شعار
   داخل یک بخشِ سرمه‌ای بنشیند به طلاییِ روشن سوییچ می‌کند.
   ========================================================================== */
.brand-slogan {
    display: block;
    color: var(--brand-gold-ink);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.9;
}

/* خطِ طلاییِ ظریف دو طرف شعار — فقط جایی که وسط‌چین است. */
.hero-slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    color: var(--brand-gold-ink);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: .02em;
}

@media (min-width: 1024px) {
    .hero-slogan { font-size: 1.65rem; }
}

.hero-slogan::before,
.hero-slogan::after {
    content: "";
    display: block;
    width: clamp(28px, 8vw, 74px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-gold), transparent);
    flex: 0 0 auto;
}

/* لاک‌آپ فوتر — کوچک‌تر و آرام‌تر، چون کنار نام برند می‌نشیند نه به‌جای آن. */
.footer-brand-slogan {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .015em;
}

@media (min-width: 1024px) {
    .footer-brand-slogan { font-size: 14px; }
}

/* روی زمینهٔ سرمه‌ای، طلاییِ روشن درست است (۷.۵:۱ ✓). */
.nurse-hero .brand-slogan,
.wa-hero .brand-slogan,
.bg-ablue-500 .brand-slogan {
    color: var(--brand-gold);
}

/* =============================================================================
   19) بخش «ثبت درخواست مشاوره و خدمات» صفحهٔ اصلی
   -----------------------------------------------------------------------------
   بازچینشِ شهریور ۱۴۰۵. قبلاً یک ستونِ وسط‌چینِ تخت بود: فرمِ ۷۰۰px وسطِ صفحهٔ
   ۱۵۳۶px شناور می‌ماند، دو طرفش ۴۰۰px خالی، و دکمهٔ «درخواست خدمات» جدا و بالاتر
   وسطِ یک نوارِ سفید. حالا یک «کادرِ» دوستونه است: معرفی/تعهد/تماسِ مستقیم روی
   نیمهٔ سرمه‌ای، و خودِ فرم در کارتِ سفید.

   هم‌زبان با `.nurse-hero` و `.wa-hero` — همان گرادیانِ سرمه‌ای و هیرلاینِ طلایی.

   ⚠️ مثل بخش ۱۷، رنگ‌ها این‌جا صریح‌اند و از `.text-ablue-500`/`.text-ared-500`
      استفاده نشده؛ بخش ۳ آن‌ها را با !important نگاشت می‌کند و سرمه‌ای روی
      سرمه‌ای محو می‌شود.
   ========================================================================== */
.req-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "head"
        "form"
        "side";
    gap: 1.5rem;
    padding: 1.6rem 1.25rem;
    border-radius: 24px;
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(200, 164, 93, .17) 0%, transparent 54%),
        radial-gradient(120% 130% at 0% 100%, rgba(200, 164, 93, .07) 0%, transparent 50%),
        linear-gradient(150deg, var(--brand-navy) 0%, var(--brand-navy-3) 100%);
    border: 1.5px solid rgba(200, 164, 93, .30);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
}

.req-head { grid-area: head; }
.req-side { grid-area: side; }

/* ستونِ چپ فرم است و هر دو ردیفِ ستونِ راست را می‌پوشاند (فقط روی دسکتاپ). */
.req-form-card {
    grid-area: form;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.15rem 1.5rem;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
}

/* ---------- بَج و تیتر ---------- */
.req-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .95rem;
    border-radius: 9999px;
    background: rgba(200, 164, 93, .12);
    border: 1px solid var(--brand-hairline);
    color: var(--brand-gold);
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.req-badge-pulse {
    color: var(--brand-gold);
    flex: 0 0 auto;
}

.req-title {
    margin-top: 1rem;
    font-weight: 800;
    line-height: 1.55;
    font-size: 1.65rem;
    color: #FFFFFF;
}

.req-title-accent { color: var(--brand-gold); }

.req-lead {
    margin-top: .85rem;
    color: #C9D2E3;
    line-height: 2.05;
    font-size: .95rem;
    max-width: 46ch;
}

/* ---------- سه تعهدِ کلیدی ---------- */
.req-promises {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.req-promise {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

/* آیکونِ طلایی در کاشیِ نیمه‌شفاف — همان قاعدهٔ `.nurse-ic` با ابعادِ کوچک‌تر. */
.req-promise-ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(200, 164, 93, .12);
    border: 1px solid rgba(200, 164, 93, .28);
    color: var(--brand-gold);
}

.req-promise-tx { display: block; }

.req-promise-tx strong {
    display: block;
    color: #FFFFFF;
    font-weight: 800;
    line-height: 1.9;
    font-size: .97rem;
}

.req-promise-tx span {
    display: block;
    color: #AEB9CE;
    line-height: 1.95;
    font-size: .87rem;
}

/* ---------- تماسِ مستقیم ---------- */
.req-direct {
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(200, 164, 93, .22);
}

.req-direct-note {
    color: #C9D2E3;
    font-size: .9rem;
    line-height: 1.9;
    margin-bottom: .85rem;
}

.req-direct-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .75rem;
}

/* روی گوشی دو دکمه تمام‌عرض و هم‌قد می‌شوند؛ راست‌چینِ ناهم‌اندازه بدقواره بود. */
.req-direct-actions > * { flex: 1 1 100%; }

@media (min-width: 480px) {
    .req-direct-actions > * { flex: 1 1 0; }
}

/* دکمهٔ تماس: پرکنندهٔ طلایی + متن سرمه‌ای (۷.۵:۱) — همان زبانِ `.nurse-cta`. */
.req-call {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.15rem;
    border-radius: 14px;
    background: var(--brand-gold);
    color: var(--brand-navy) !important;
    font-weight: 800;
    text-decoration: none;
    transition: background .3s ease, transform .3s ease;
}

.req-call:hover,
.req-call:focus-visible {
    background: var(--brand-gold-hover);
    transform: translateY(-2px);
}

.req-call svg { flex: 0 0 auto; }

.req-call-tx {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.req-call-label { font-size: .78rem; font-weight: 700; opacity: .78; }
.req-call-num   { font-size: 1rem;  font-weight: 800; letter-spacing: .02em; }

/* دکمهٔ واتساپ: `.wa-lux` پایه سرمه‌ای است و روی این پنلِ سرمه‌ای گم می‌شد، پس
   این‌جا شبح‌وار می‌شود. specificity دوکلاسی لازم است — تعریفِ پایهٔ `.wa-lux`
   در `<style id="wa-lux-styles">` فوتر است و در ترتیبِ سند بعد از این فایل
   می‌آید، پس با یک کلاس شکست می‌خوردیم. */
.wa-lux.req-wa {
    background: rgba(255, 255, 255, .05) !important;
    border-color: var(--brand-hairline) !important;
    color: var(--brand-on-dark) !important;
    box-shadow: none !important;
}

.wa-lux.req-wa:hover {
    background: rgba(200, 164, 93, .14) !important;
    border-color: var(--brand-gold) !important;
    color: #FFFFFF !important;
}

/* ---------- کارتِ فرم ---------- */
.req-form-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

/* روی زمینهٔ سفید، طلاییِ روشن برای «متن/آیکون» رد می‌شود (۲.۱:۱)؛ پس طلاییِ
   عمیق (--brand-gold-ink) استفاده می‌شود. */
.req-form-ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--brand-gold-tint);
    border: 1px solid var(--brand-hairline);
    color: var(--brand-gold-ink);
}

.req-form-headings {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.req-form-title {
    color: var(--brand-navy);
    font-weight: 800;
    font-size: 1.18rem;
    line-height: 1.6;
}

.req-form-sub {
    color: #64748B;
    font-size: .84rem;
    line-height: 1.7;
}

.req-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.req-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* برچسبِ دیدنی — قبلاً فقط placeholder بود، و placeholder با شروعِ تایپ ناپدید
   می‌شود و کاربر دیگر نمی‌داند در کدام فیلد است. */
.req-label {
    color: var(--brand-navy);
    font-weight: 700;
    font-size: .85rem;
    line-height: 1.7;
}

.req-star     { color: var(--brand-gold-ink); font-weight: 800; }
.req-optional { color: #94A3B8; font-weight: 600; font-size: .78rem; }

.req-submit-wrap { margin-top: 1.35rem; }

.req-privacy {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-top: .85rem;
    color: #64748B;
    font-size: .82rem;
    line-height: 1.85;
}

.req-privacy svg {
    flex: 0 0 auto;
    margin-top: .3rem;
    color: #94A3B8;
}

/* ---------- نقاط شکست ---------- */
@media (min-width: 560px) {
    .req-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 1024px) {
    /* ردیفِ اول دوستونه است (معرفی راست، فرم چپ) و ردیفِ دوم یک نوارِ تمام‌عرض.
       چراییِ این تقسیم: اگر تعهدها هم در ستونِ راست می‌ماندند، آن ستون ۵۶۵px
       بلند می‌شد و کارتِ فرم — که محتوایش ۳۰۰px است — کشیده می‌شد و ۲۵۰px
       سفیدیِ خالی زیرِ دکمه می‌ماند؛ یعنی همان چیزی که این بازچینش برای
       برطرف‌کردنش انجام شد. */
    .req-panel {
        /* در RTL ستونِ اولِ نامگذاری‌شده سمتِ راست می‌نشیند: معرفی راست، فرم چپ. */
        grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
        grid-template-areas:
            "head form"
            "side side";
        align-content: start;
        column-gap: 3rem;
        row-gap: 0;
        padding: 2.75rem 3rem;
        border-radius: 28px;
    }

    /* ستونِ معرفی از کارتِ فرم کوتاه‌تر است؛ وسط‌چین که باشد عمدی به‌نظر می‌رسد. */
    .req-head      { align-self: center; }
    .req-form-card { padding: 1.75rem 1.85rem 2rem; }
    .req-title     { font-size: 2.15rem; margin-top: 1.15rem; }
    .req-lead      { font-size: 1rem; max-width: 40ch; }

    .req-side {
        margin-top: 2.25rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(200, 164, 93, .22);
    }

    .req-promises {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem 2.25rem;
    }

    .req-direct {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1.25rem;
        margin-top: 1.85rem;
        padding-top: 1.5rem;
    }

    .req-direct-note { margin-bottom: 0; font-size: .95rem; }
    .req-direct-actions { flex: 0 0 auto; }
    .req-direct-actions > * { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .req-call { transition: none; }
    .req-call:hover { transform: none; }
}

/* =============================================================================
   20) نقشهٔ خدمات در فوتر (.az-smap)
   -----------------------------------------------------------------------------
   فهرستِ سراسریِ همهٔ صفحاتِ خدمت. تا پیش از این، زیرشاخه‌ها (آمبولانس بین‌شهری،
   پرستار سالمند و …) فقط از صفحهٔ هابِ خودشان لینک داشتند و دو پرش از هر صفحه‌ای
   که گوگل واقعاً می‌خزید فاصله داشتند. اینجا همه یک پرش فاصله دارند.

   عمداً هیچ‌چیز مخفی نیست (نه accordion، نه display:none): لینکی که کاربر نبیند،
   گوگل هم وزنِ کامل برایش قائل نمی‌شود. روی موبایل دو ستون، روی دسکتاپ چهار ستون.
   ============================================================================= */

.az-smap {
    padding-block: 1.75rem;
    border-top: 1px solid rgba(200, 164, 93, .18);
}

/* بخش ۱۰ رنگِ فوتر را با !important می‌بندد (تیتر طلایی، لینک خاکستریِ روشن).
   این بلوک با همان زبان حرف می‌زند؛ فقط تیتر h2 و تیترِ ستون‌ها — که لینک‌اند و
   قاعدهٔ `.footer a` خاکستری‌شان می‌کند — باید صراحتاً طلایی شوند. */
.az-smap__title {
    margin-bottom: 1.1rem;
    font-family: var(--font-rokh, inherit);
    font-size: .95rem;
    font-weight: 800;
    color: var(--brand-gold) !important;
}

.az-smap__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
}

.az-smap__group + .az-smap__group { margin-top: 1.1rem; }

.az-smap__head {
    margin-bottom: .5rem;
    font-size: .85rem;
    font-weight: 800;
    line-height: 1.7;
}

.az-smap__head a {
    color: var(--brand-gold) !important;
    text-decoration: none;
}

.az-smap__head a:hover { color: var(--brand-gold-hover) !important; }

.az-smap__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.az-smap__list li { margin-bottom: .35rem; }

/* رنگ لینک‌ها را عمداً ست نمی‌کنیم: قاعدهٔ `.footer a` در بخش ۱۰ خاکستریِ روشن
   (--brand-on-dark-2) می‌دهد و هاورش طلایی می‌شود — همان چیزی که می‌خواهیم. */
.az-smap__list a {
    display: inline-block;
    font-size: .8rem;
    line-height: 1.85;
    text-decoration: none;
    transition: color .18s ease;
}

@media (min-width: 1024px) {
    .az-smap { padding-block: 2.25rem; }
    .az-smap__title { font-size: 1.05rem; margin-bottom: 1.35rem; }
    .az-smap__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
    .az-smap__head { font-size: .9rem; }
    .az-smap__list a { font-size: .82rem; }
}