/* ========================================================================
   JALA PLATFORM - PREMIUM & LUXURY SYSTEM ARCHITECTURE (v22.0)
   Feature: Integrated Base64 WebP Composite Layers & Flawless Visual Comfort
   Design Language: Apple Minimalist x Porsche Kinetic
   Update: Procedural Velvet Obsidian Stone & Golden Hairline Veins
========================================================================== */

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
    --bg-main: #070A13; /* Deep Velvet Obsidian */
    --bg-card: #12171E; /* Slate Carbon */
    --gold-premium: #D4AF37; /* Brushed Champagne Gold */
    --gold-hover: #F3E5AB; /* Light Silk Gold */
    --gold-glow: rgba(212, 175, 55, 0.25);
    --text-primary: #F5F5F7; /* Apple Off-White */
    --text-muted: #8E8E93; /* Apple Muted Gray */
    --border-color: rgba(255, 255, 255, 0.06);
    --bezier-apple: cubic-bezier(0.16, 1, 0.3, 1);
    --bezier-porsche: cubic-bezier(0.25, 1, 0.5, 1);
}

body {
    font-family: 'Vazirmatn', -apple-system, sans-serif !important;
    background-color: var(--bg-main) !important;
    color: var(--text-primary);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* اسکرول‌بار مینی‌مال پلتفرم VIP */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-premium); }

/* --- ۲. کلاس‌های کاربردی لوکس، گلس‌مورفیسم و شبیه‌سازی بافت دیوار مات --- */
.text-champagne { color: var(--gold-premium) !important; }
.border-champagne { border-color: var(--gold-premium); }
.accent-bronze { accent-color: var(--gold-premium); }
.bg-obsidian {
    background-color: #070A12 !important;
    background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 80%), radial-gradient(ellipse at 80% 80%, rgba(13, 17, 28, 0.9) 0%, #070A13 100%) !important;
}
.glass-premium {
    background: rgba(18, 23, 30, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* انیمیشن پالس رادار وضعیت کارشناسی زنده */
@keyframes radarPulse {
    0% { transform: scale(0.95); opacity: 1; box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
    70% { transform: scale(1.2); opacity: 0.3; box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); }
    100% { transform: scale(0.95); opacity: 1; box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}
.radar-pulse-indicator {
    width: 8px; height: 8px;
    background-color: var(--gold-premium);
    border-radius: 50%;
    position: relative;
    display: inline-block;
    animation: radarPulse 2s infinite ease-in-out;
}

/* ریتم زنده حرکتی ملایم سیستم */
@keyframes pulseSlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}
.animate-pulse-slow { animation: pulseSlow 6s infinite ease-in-out; }

/* --- ۳. مهندسی ساختار هیرو سکشن و تزریق مستقیم تصویر مونوکروم جلا (v18.5) --- */
#heroSection, .hero-section-container {
    position: relative !important;
    overflow: hidden !important;
    background-color: #070A13 !important;
}

/* progressive enhancement: در مرورگرهایی که dvh را پشتیبانی می‌کنند، به‌جای vh (که با UI پویا مرورگر موبایل تداخل دارد) از dvh استفاده کن */
#heroSection {
    min-height: 95vh;
}
@supports (min-height: 95dvh) {
    #heroSection {
        min-height: 95dvh;
    }
}

/* المان بوم نوری گرادیان سیال (جاوااسکریپت کینتیک زنده) */
#jala-fluid-canvas {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 105vh !important;
    display: block !important;
    pointer-events: none;
    z-index: 2 !important;
    mix-blend-mode: screen;
}

/* لایه اورلی گرادیان تیره: تضمین ایجاد تاریکی مطلق در سمت راست جهت خوانایی بی‌نقص حروف */
#heroSection::after, .hero-section-container::after {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(to left, #070A13 0%, rgba(7, 10, 19, 0.85) 50%, transparent 100%) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* کانتینر متن‌های مقتدر و لایه فرم برای قرارگیری در بالاترین لایه نوری */
.hero-right-content, #leadForm, .glass-premium-container, .hero-content-wrapper {
    position: relative !important;
    z-index: 10 !important;
}

/* قفل وب‌فونت منظم و تیز وزیرمتن و بهینه‌سازی خوانایی حروف استخوانی */
.hero-main-title, .hero-right-content h1 {
    font-family: 'Vazirmatn', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0px !important;
    word-spacing: 2px !important;
    color: #F5F5F7 !important;
    display: block !important;
    width: 100% !important;
    position: relative;
    z-index: 25 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.hero-right-content h1 span.gold {
    color: var(--gold-premium);
    background: linear-gradient(135deg, var(--gold-premium) 30%, var(--gold-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* اصلاح فواصل پاراگراف توضیحات و فضای تنفس عمیق خطوط */
.hero-main-title + p, .hero-right-content p {
    font-family: 'Vazirmatn', sans-serif !important;
    font-weight: 200 !important;
    font-size: 0.9rem !important;
    line-height: 2.3 !important;
    letter-spacing: 0px !important;
    color: var(--text-muted) !important;
    margin-top: 1.5rem !important;
    text-align: justify;
    position: relative;
    z-index: 25 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* --- ۳-الف. SVG بلوپرینت هندسی هیرو (.jala-blueprint-svg) ---
   بین canvas انیمیشنی (z-0) و لایه‌ی گرادیانت تیره‌ی محافظ (z-10) قرار می‌گیرد:
   زیر متن هیرو می‌ماند و توسط گرادیانت خوانایی متن حفظ می‌شود.
   نکته: اگر ساختار واقعی HTML مقادیر z-index دیگری برای canvas/گرادیانت
   استفاده می‌کند، این مقدار را متناسب با آن‌ها تنظیم کنید. */
.jala-blueprint-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5; /* بین canvas (z-0) و گرادیانت تیره (z-10) */
    pointer-events: none; /* تزئینی است، نباید مانع کلیک شود */
}

/* براکت‌های گوشه و نماد الماس: عناصر هویتی بلوپرینت — باید همیشه واضح
   دیده شوند، حتی در روشنایی بالای صفحه‌نمایش. تفکیک‌شده از خطوط شبکه. */
.jala-blueprint-svg .corner-bracket,
.jala-blueprint-svg .diamond-symbol,
.jala-blueprint-svg [data-blueprint="corner-bracket"],
.jala-blueprint-svg [data-blueprint="diamond-symbol"] {
    opacity: 0.38;
}

/* خطوط شبکه: صرفاً بافت پس‌زمینه‌اند و نباید با متن هیرو رقابت کنند */
.jala-blueprint-svg .grid-line,
.jala-blueprint-svg [data-blueprint="grid-line"] {
    opacity: 0.07;
}
/* توجه: طبق برند، هیچ box-shadow، blur یا افکت گرادیانتی روی خود SVG
   اعمال نشده — عناصر باید flat و دقیق بمانند. */

/* --- ۴. کارت‌های ۵گانه ارزش‌آفرینی --- */
.pillar-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px 32px !important;
    transition: all 0.4s var(--bezier-apple);
    position: relative;
    overflow: hidden;
}
.pillar-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.04);
}
.pillar-card .number {
    font-family: 'Futura', 'Helvetica', sans-serif;
    color: var(--gold-premium);
    font-size: 1.2rem;
    opacity: 0.8;
    font-weight: 600;
}

/* --- ۵. بهینه‌سازی اختصاصی بخش بنتو گرید (Bento Values Grid) --- */
#bento-values .grid > div {
    background: linear-gradient(135deg, #0E121A 0%, #070A12 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02), 0 4px 24px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#bento-values .grid > div:hover {
    border-color: rgba(212, 175, 55, 0.2) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 32px rgba(212, 175, 55, 0.03) !important;
}
#bento-values .grid > div span.font-serif {
    color: #161C28 !important;
    opacity: 0.4;
    letter-spacing: -0.05em;
    transition: color 0.4s ease, opacity 0.4s ease !important;
}
#bento-values .grid > div:hover span.font-serif { color: rgba(212, 175, 55, 0.15) !important; opacity: 1; }
#bento-values h3 { color: #F5F5F7 !important; letter-spacing: -0.01em; }
#bento-values p { color: #8E8E93 !important; line-height: 1.75 !important; }
#bento-values .blur-3xl { filter: blur(60px) !important; mix-blend-mode: plus-lighter; }

/* --- ۶. لایه‌بندی مشکی مات و ویترین پورتفولیو جلا --- */
.portfolio-card {
    position: relative;
    border-radius: 24px !important;
    height: 480px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background-size: 100% cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px !important;
    cursor: pointer;
    background-color: #0D111C !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, background-size 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.portfolio-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, #070A13 0%, rgba(7, 10, 19, 0.4) 60%, rgba(7, 10, 19, 0.1) 100%) !important;
    z-index: 2;
    transition: background 0.4s ease;
}
.dynamic-texture-layer {
    position: absolute; inset: 0;
    z-index: 1;
    opacity: 0.35;
    mix-blend-mode: overlay;
    transition: transform 0.2s ease-out, opacity 0.4s ease;
}
.portfolio-card:hover .dynamic-texture-layer { opacity: 0.7; }
.portfolio-card-content {
    position: relative; z-index: 3;
    text-align: right;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.portfolio-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    background-size: 108% cover;
}
.portfolio-card:hover .portfolio-card-content { transform: translateY(-2px); }

.card-patinart svg path, .card-engineered-painting svg line {
    stroke: url(#gold-metallic-gradient) !important;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.2));
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: drawLine 3s ease-in-out infinite alternate;
}
@keyframes drawLine {
    0% { stroke-dashoffset: 20; opacity: 0.6; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}
.water-drop-mock {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    border-radius: 50%;
    box-shadow: inset 3px 5px 6px rgba(0,0,0,0.6), inset -3px -3px 5px rgba(255,255,255,0.15), 2px 3px 5px rgba(0,0,0,0.4);
}

.card-engineered-painting { background-image: url('assets/images/engineered-painting-macro.jpg'); }
.card-microcement { background-image: url('assets/images/microcement-minimal-floor.jpg'); }
.card-patinart { background-image: url('assets/images/patina-gold-leaf-texture.jpg'); }

/* --- ۷. سامانه استعلام و تخمین قیمت هوشمند --- */
.estimator-wrapper {
    background: linear-gradient(135deg, #12171E 0%, #0A0D10 100%);
    border: 1px solid rgba(212, 175, 55, 0.12);
    border-radius: 24px;
    padding: 48px !important;
}
.estimator-result-box {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-radius: 16px; padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.estimator-result-box .title { color: var(--text-primary) !important; font-size: 1.1rem; font-weight: 500; }
.estimator-result-box .disclaimer { color: var(--text-muted) !important; font-size: 0.85rem; line-height: 1.7; margin-top: 20px; opacity: 0.85; }
.estimator-select {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
    padding: 16px 24px !important;
    border-radius: 12px; font-weight: 500;
    transition: all 0.3s var(--bezier-apple);
}
/* پیشنهاد ظریف مشاوره‌ی رایگان زیر نتیجه‌ی محاسبه‌گر: پیش‌فرض مخفی و بدون فضا،
   فقط با اضافه‌شدن .is-shown (توسط app.js) نمایان و با .is-visible محو-ظاهر می‌شود.
   دو کلاس جدا (نه یک کلاس) لازم است چون display:none نمی‌تواند transition بگیرد؛
   ابتدا display باز می‌شود (is-shown)، فریم بعد opacity/transform انیمیشن می‌گیرد (is-visible). */
#consultationNudge {
    display: none;
    position: relative;
    width: 100%;
    max-width: 20rem;
    margin-top: 1.25rem;
    padding: 1rem 1.5rem 1rem 1rem;
    border-radius: 14px;
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.18);
    text-align: right;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.7s var(--bezier-apple), transform 0.7s var(--bezier-apple);
}
#consultationNudge.is-shown {
    display: block;
}
#consultationNudge.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.consultation-nudge-close {
    position: absolute;
    top: 0.4rem;
    left: 0.5rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}
.consultation-nudge-close:hover {
    color: var(--gold-premium);
}
.consultation-nudge-text {
    font-size: 11px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-muted) !important;
    padding-left: 1.25rem;
}
.consultation-nudge-cta {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(90deg, #8C7853 0%, var(--gold-premium) 100%);
    color: var(--bg-main);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.2s ease;
}
.consultation-nudge-cta:hover {
    opacity: 0.92;
}
.consultation-nudge-cta:active {
    transform: scale(0.98);
}

.estimator-select:focus {
    outline: none;
    border-color: var(--gold-premium) !important;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
    background-color: rgba(10, 13, 16, 0.8) !important;
}

/* --- ۸. مدیریت گام‌های فرم و اسلایدرها --- */
.step-form {
    display: none;
    opacity: 0;
    transform: translateY(12px) scale(0.995);
    transition: opacity 0.5s var(--bezier-apple), transform 0.5s var(--bezier-apple);
}
.step-form.active { display: block !important; opacity: 1; transform: translateY(0) scale(1); }

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8C7853 0%, var(--gold-premium) 100%);
    box-shadow: 0 0 15px var(--gold-glow);
    transition: width 0.6s var(--bezier-porsche);
}

input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: rgba(255, 255, 255, 0.08); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0%, var(--gold-premium) 80%);
    cursor: pointer; border: 2px solid var(--bg-main);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.8);
    margin-top: -6px;
    transition: transform 0.2s var(--bezier-apple);
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.3); }

/* --- ۹. مدیاکوئری ریسپانسیو برای مانیتورهای کوچک و تبلت --- */
@media (max-width: 768px) {
    .pillar-card { padding: 32px 24px !important; }
    .estimator-wrapper { padding: 24px !important; }
    .portfolio-card { height: 420px; padding: 24px !important; background-size: cover !important; }

    /* بلوپرینت هیرو در موبایل: خطوط شبکه مخفی می‌شوند تا صفحه شلوغ نشود،
       اما براکت‌های گوشه و نماد الماس (هویت بصری اصلی) باقی می‌مانند */
    .jala-blueprint-svg .grid-line,
    .jala-blueprint-svg [data-blueprint="grid-line"] {
        display: none;
    }
}

/* --- ۱۰. انیمیشن نوسان نوری رگه‌های متالیک طلا --- */
@keyframes goldGlow {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 2px 4px rgba(212,175,55,0.2)); }
    50% { opacity: 1; filter: drop-shadow(0 4px 16px rgba(253,240,205,0.5)); }
}
.animate-gold-glow { animation: goldGlow 5s infinite ease-in-out; }

/* ========================================================================
   JALA MOBILE MENU — SLIDE-IN DRAWER + ACCORDION (v23.0)
   بازطراحی ساختاری: به‌جای overlay تمام‌صفحه‌ی مسدودکننده، یک Panel کشویی
   محدود از سمت راست باز می‌شود و هیرو (+ بلوپرینت) پشت آن با blur قابل مشاهده
   می‌ماند — کاربر حس می‌کند «یک لایه از همان ساختمان باز شده»، نه اینکه به
   صفحه‌ای جدا پرتاب شده باشد.
========================================================================== */

/* ظرف نگه‌دارنده: چون بک‌دراپ و دراور خودشان با opacity/transform مخفی و
   آشکار می‌شوند (بدون پرش display)، دیگر خود overlay نیازی به
   display:none/flex ندارد؛ فقط با pointer-events فعال/غیرفعال می‌شود. */
#mobile-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999998 !important;
    pointer-events: none;
}
#mobile-menu-overlay.active {
    pointer-events: auto;
}

/* بک‌دراپ: هیرو پشت آن دیده می‌شود (نه تیرگی مطلق) — یک لایه‌ی blur متوسط
   (نه تودرتو، برای سلامت فریم‌ریت موبایل) + تیرگی نیمه‌شفاف روی آن */
#mobile-menu-overlay .mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    background: rgba(7, 10, 18, 0.6);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    transition: opacity 0.5s var(--bezier-apple);
    -webkit-tap-highlight-color: transparent;
}
#mobile-menu-overlay.active .mobile-menu-backdrop {
    opacity: 1;
}

/* پنل کشویی: عرض محدود (نه تمام‌صفحه)، از لبه‌ی راست وارد می‌شود —
   هم‌جهت با جریان خواندن راست‌به‌چپ و دسترس دست راست کاربر */
#mobile-menu-overlay .mobile-menu-drawer {
    /* صریحاً border-box: چون padding این پنل زیاد است (۷rem بالا)، اگر فقط به
       box-sizing سراسری Tailwind (که به‌صورت غیرمستقیم لود می‌شود) متکی باشیم،
       عرض واقعی از ۸۴٪ درخواستی بیشتر می‌شود */
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    height: 100dvh;
    width: 84%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #070A12;
    background-image: radial-gradient(ellipse 140% 90% at 82% 6%, #070A13 0%, #070A12 62%);
    border-left: 1px solid rgba(212, 175, 55, 0.12);
    box-shadow: -32px 0 60px rgba(0, 0, 0, 0.55);
    padding: 7rem 1.75rem 2.5rem 1.75rem;
    transform: translateX(100%);
    transition: transform 0.5s var(--bezier-porsche);
}
#mobile-menu-overlay.active .mobile-menu-drawer {
    transform: translateX(0);
}

/* پژواک کم‌رنگ بلوپرینت هیرو روی خود دراور — پیوستگی هویتی بین هیرو و منو */
#mobile-menu-overlay .mobile-menu-drawer::before {
    content: '';
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.045;
    background-image:
        linear-gradient(#D4AF37 1px, transparent 1px),
        linear-gradient(90deg, #D4AF37 1px, transparent 1px);
    background-size: 130px 130px;
    transform: rotate(9deg) scale(1.25);
    transform-origin: center;
}
#mobile-menu-overlay .mobile-menu-drawer > * {
    position: relative;
    z-index: 1;
}

#mobile-menu-overlay nav a,
#mobile-menu-overlay nav button {
    color: #F5F5F7;
}

/* استایل تغییر وضعیت خودکار آیکون اصلی هدر به ضربدر لوکس با ویژگی d: path */
header:has(#mobile-menu-overlay.active) #mobile-menu-btn path {
    d: path('M6 18L18 6M6 6l12 12') !important;
}

/* استقلال دکمه بستن منو از stacking context محلی: اگر در آینده والدی transform/filter بگیرد، دکمه دوباره زیر overlay نرود */
header:has(#mobile-menu-overlay.active) #mobile-menu-btn {
    position: fixed !important;
    z-index: 2147483647 !important;
}

/* ========================================================================
   ۱۱. دسترس‌پذیری: حداقل ناحیه لمسی طبق WCAG 2.2 AA (بدون تغییر ظاهر بصری رنگ‌ها)
   توجه: نام‌گذاری زیر بر اساس نام‌های ذکرشده در بریف پروژه است. اگر ساختار
   واقعی index.html این سلکتورها را با نام دیگری صدا می‌زند، لطفاً فایل
   index.html را هم ارسال کنید تا سلکتورها با دقت کامل تطبیق داده شوند.
========================================================================== */
.mobile-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

#p-1, #p-2, #p-3, #p-4 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    min-height: 32px !important;
}

/* ========================================================================
   ۱۲. بازخورد بصری انتخاب کارت سرویس در استپ ۱ فرم (:has())
   دامنه به .step-form محدود شده تا فقط روی کارت‌های انتخاب سرویس اثر کند
   و رفتار سایر رادیوهای احتمالی سایت را تغییر ندهد.
========================================================================== */
.step-form label:has(input[type="radio"]:checked) {
    border-color: var(--gold-premium) !important;
    background-color: rgba(212, 175, 55, 0.08) !important;
}


/* ========================================================================
   ۱۳. گروه‌های آکاردئونی + کارت‌های زیرخدمت دوستونی داخل دراور
========================================================================== */

/* ورود ملایم سه ردیف اصلی (گروه ۱، گروه ۲، بلوک اکشن‌ها) هم‌زمان با سر
   خوردن دراور — نه یک لیست طولانی پلکانی مثل نسخه‌ی overlay قبلی */
#mobile-menu-overlay .mobile-menu-drawer > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s var(--bezier-apple), transform 0.4s var(--bezier-apple);
}
#mobile-menu-overlay.active .mobile-menu-drawer > * {
    opacity: 1;
    transform: translateY(0);
}
#mobile-menu-overlay .mobile-menu-drawer > *:nth-child(1) { transition-delay: 0.12s; }
#mobile-menu-overlay .mobile-menu-drawer > *:nth-child(2) { transition-delay: 0.17s; }
#mobile-menu-overlay .mobile-menu-drawer > *:nth-child(3) { transition-delay: 0.22s; }

#mobile-menu-overlay .mobile-menu-group {
    display: flex;
    flex-direction: column;
}
#mobile-menu-overlay .mobile-menu-group + .mobile-menu-group {
    margin-top: 0.3rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* عنوان گروه = دکمه‌ی آکاردئون؛ باز/بسته بودن با aria-expanded مدیریت می‌شود
   (توسط mobileMenuAccordion در app.js)، نه با کلاس یا style مستقیم */
#mobile-menu-overlay .mobile-accordion-trigger {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.65rem;
    background: none;
    border: none;
    margin: 0;
    padding: 0.85rem 0.15rem;
    font: inherit;
    text-align: right;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
#mobile-menu-overlay .mobile-accordion-trigger .mobile-menu-index {
    flex-shrink: 0;
}
#mobile-menu-overlay .mobile-accordion-trigger .mobile-accordion-title {
    flex: 1;
    /* کنتراست شدید وزن تایپوگرافی (بخش ۳-الف): سنگین و مطمئن، ولی جمع‌تر از
       نسخه‌ی قبلی (۲۸px) — لوکس‌بودن از فضای اطراف می‌آید نه از سایز متن */
    font-weight: 800;
    font-size: 21px;
    line-height: 1.3;
    color: #F5F5F7;
}

/* آیکون +/- خالص CSS، فقط با aria-expanded کنترل می‌شود (بدون کلاس اضافه در JS) */
#mobile-menu-overlay .mobile-accordion-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
#mobile-menu-overlay .mobile-accordion-icon::before,
#mobile-menu-overlay .mobile-accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(212, 175, 55, 0.7);
    transform: translate(-50%, -50%);
}
#mobile-menu-overlay .mobile-accordion-icon::before {
    width: 12px;
    height: 1.5px;
}
#mobile-menu-overlay .mobile-accordion-icon::after {
    width: 1.5px;
    height: 12px;
    transition: transform 0.35s var(--bezier-apple);
}
#mobile-menu-overlay .mobile-accordion-trigger[aria-expanded="true"] .mobile-accordion-icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

/* شماره‌های مونوی سطح گروه (۰۱ / ۰۲) */
#mobile-menu-overlay .mobile-menu-index {
    font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 11px;
    color: #D4AF37;
    opacity: 0.6;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

/* خط پتینه‌ی زنده (بخش ۴): در قالب آکاردئون، این خط علاوه بر جداکننده، حالا
   نشانگر باز/بسته بودن گروه هم هست — یک‌بار با ورود دراور «کشیده» می‌شود
   (stroke-dashoffset) و هر بار که گروه باز می‌شود کمی ضخیم‌تر می‌شود
   (stroke-width) تا فیدبک وضعیت بدهد، نه فقط تزئین ثابت باشد. */
#mobile-menu-overlay .mobile-menu-divider {
    display: block;
    width: 100%;
    height: 4px;
    margin: 0 0 0.15rem 0;
    overflow: visible;
}
#mobile-menu-overlay .mobile-menu-divider line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    stroke-width: 2;
    transition: stroke-dashoffset 0.6s var(--bezier-apple) 0.15s, stroke-width 0.4s var(--bezier-apple);
}
#mobile-menu-overlay.active .mobile-menu-divider line {
    stroke-dashoffset: 0;
}
#mobile-menu-overlay .mobile-accordion-trigger[aria-expanded="true"] + .mobile-menu-divider line {
    stroke-width: 3.5;
}

/* بدنه‌ی آکاردئون: جمع‌شده با تکنیک grid-template-rows (بدون نیاز به اندازه‌گیری
   جاوااسکریپتی ارتفاع)، پیش‌فرض بسته — فقط عنوان گروه + شماره دیده می‌شود */
#mobile-menu-overlay .mobile-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--bezier-apple);
}
#mobile-menu-overlay .mobile-accordion-trigger[aria-expanded="true"] + .mobile-menu-divider + .mobile-submenu {
    grid-template-rows: 1fr;
}
#mobile-menu-overlay .mobile-submenu-inner {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-height: 0;
    padding-bottom: 0.5rem;
}

/* کارت‌های زیرخدمت: چیدمان افقی دوستونی با flex-wrap تطبیقی (بخش ۳-ب کانسپت) —
   در عرض‌های خیلی کم (~۳۶۰px) خودش به یک ستون می‌شکند به‌جای overflow زشت */
#mobile-menu-overlay .mobile-subcard {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: auto !important;
    flex: 1 1 130px;
    min-width: 130px !important;
    gap: 0.35rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.025);
    min-height: 44px !important;
    -webkit-tap-highlight-color: transparent;
}
#mobile-menu-overlay .mobile-subcard .mobile-submenu-index {
    display: block;
    font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 10px;
    color: #D4AF37;
    opacity: 0;
    letter-spacing: 0.08em;
    transform: translateY(4px);
    transition: opacity 0.2s var(--bezier-porsche), transform 0.2s var(--bezier-porsche);
}
#mobile-menu-overlay .mobile-subcard .mobile-subcard-label {
    display: block;
    font-size: 12.5px;
    font-weight: 200;
    line-height: 1.6;
    color: rgba(245, 245, 247, 0.6);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.32s var(--bezier-apple), transform 0.32s var(--bezier-apple);
    transition-delay: 0.06s;
}
#mobile-menu-overlay .mobile-accordion-trigger[aria-expanded="true"] + .mobile-menu-divider + .mobile-submenu .mobile-submenu-index,
#mobile-menu-overlay .mobile-accordion-trigger[aria-expanded="true"] + .mobile-menu-divider + .mobile-submenu .mobile-subcard-label {
    opacity: 1;
    transform: translateY(0);
}

/* دو لینک مستقیم به‌عنوان بلوک بصری جدا، شبیه دکمه نه لینک متنی ساده (بخش ۳-ج) */
#mobile-menu-overlay .mobile-menu-actions {
    margin-top: 0.5rem;
    padding: 1.3rem 0.9rem 0.9rem 0.9rem;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    background: rgba(212, 175, 55, 0.015);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
#mobile-menu-overlay .mobile-action-btn {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    background: rgba(255, 255, 255, 0.02);
    font-weight: 700;
    font-size: 14px;
    color: #F5F5F7;
    min-height: 44px !important;
    transition: transform 0.25s var(--bezier-apple), border-color 0.3s ease, background-color 0.3s ease;
}
#mobile-menu-overlay .mobile-action-btn-highlight {
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.07);
}
#mobile-menu-overlay .mobile-action-btn:active {
    transform: translateX(-4px);
}

/* ========================================================================
   ۱۴. جزئیات ریز طلایی — رگه‌ی لمس (حفظ‌شده از نسخه‌ی قبلی)
   با لمس یک آیتم، یک رگه‌ی نور طلایی ظریف از نقطه‌ی لمس پخش می‌شود؛ سبک و ارزان
   (radial-gradient ساده، بدون blur)، توسط luxuryMenuEngine مدیریت می‌شود.
========================================================================== */
#mobile-menu-overlay .mobile-accordion-trigger,
#mobile-menu-overlay .mobile-subcard,
#mobile-menu-overlay .mobile-action-btn {
    position: relative;
    overflow: hidden;
}
#mobile-menu-overlay .mobile-accordion-trigger::after,
#mobile-menu-overlay .mobile-subcard::after,
#mobile-menu-overlay .mobile-action-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 60px at var(--touch-x, 50%) var(--touch-y, 50%), rgba(212, 175, 55, 0.25), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
#mobile-menu-overlay .mobile-accordion-trigger.touch-glow::after,
#mobile-menu-overlay .mobile-subcard.touch-glow::after,
#mobile-menu-overlay .mobile-action-btn.touch-glow::after {
    opacity: 1;
}

/* ========================================================================
   ۱۵. دسترس‌پذیری حرکتی: prefers-reduced-motion
   تمام انیمیشن‌های جدید (سر خوردن دراور، بلور بک‌دراپ، باز شدن آکاردئون،
   خط پتینه، شمارش عدد، مغناطیسی) برای کاربرانی که حرکت کم ترجیح می‌دهند،
   غیرفعال و جایگزین یک نسخه‌ی ساده/بی‌حرکت می‌شوند.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
    #mobile-menu-overlay .mobile-menu-backdrop,
    #mobile-menu-overlay .mobile-menu-drawer,
    #mobile-menu-overlay .mobile-menu-drawer > *,
    #mobile-menu-overlay .mobile-accordion-icon::after,
    #mobile-menu-overlay .mobile-submenu,
    #mobile-menu-overlay .mobile-subcard .mobile-submenu-index,
    #mobile-menu-overlay .mobile-subcard .mobile-subcard-label,
    #mobile-menu-overlay .mobile-action-btn {
        transition: none !important;
        animation: none !important;
    }
    #mobile-menu-overlay .mobile-menu-drawer > * {
        opacity: 1 !important;
        transform: none !important;
    }
    #mobile-menu-overlay .mobile-menu-divider line {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }
    #mobile-menu-overlay .mobile-accordion-trigger[aria-expanded="true"] + .mobile-menu-divider + .mobile-submenu .mobile-submenu-index,
    #mobile-menu-overlay .mobile-accordion-trigger[aria-expanded="true"] + .mobile-menu-divider + .mobile-submenu .mobile-subcard-label {
        opacity: 1 !important;
        transform: none !important;
    }
    #mobile-menu-overlay .mobile-accordion-trigger::after,
    #mobile-menu-overlay .mobile-subcard::after,
    #mobile-menu-overlay .mobile-action-btn::after {
        transition: none !important;
    }
}