/* ==========================================================================
   Medical VIP Header - GPU Accelerated & Pixel-Perfect
   ========================================================================== */
:root {
    --hdr-text-dark: #1e293b;
    --hdr-accent: #DF6B5A;
    --hdr-bg-scrolled: #ffffff;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: inherit; }

/* ----------------------------------------------------
   حالت اولیه هدر
   ---------------------------------------------------- */
.medical-vip-header {
    background-color: transparent; 
    box-shadow: none;              
    border-bottom: 0.5px solid rgba(223, 107, 90, 0.25);
    position: sticky;
    top: 0;
    z-index: 1000;
    direction: rtl;
    /* شتاب‌دهنده GPU برای انیمیشن‌های نرم اسکرول بدون درگیر کردن CPU */
    will-change: background-color, box-shadow, border-color;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* ----------------------------------------------------
   حالت اسکرول شده
   ---------------------------------------------------- */
.medical-vip-header.scrolled {
    background-color: var(--hdr-bg-scrolled);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); 
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}

.hdr-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 4%;
}
.hdr-flexbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 85px; 
    will-change: height;
    transition: height 0.4s ease;
}
.medical-vip-header.scrolled .hdr-flexbox { height: 75px; }

/* --- نواحی هدر --- */
.hdr-right { flex: 1; display: flex; align-items: center; justify-content: flex-start; } 
.hdr-center { flex: 2; display: flex; align-items: center; justify-content: center; } 
.hdr-left { flex: 1; display: flex; align-items: center; justify-content: flex-end; } 

.mobile-item { display: none !important; }
.desktop-item { display: flex; }

/* --- لوگو (جلوگیری از Layout Shift) --- */
.brand-logo-img { 
    max-height: 55px; 
    width: auto; 
    display: block; 
    object-fit: contain; 
    will-change: max-height;
    transition: max-height 0.4s ease; 
}
.medical-vip-header.scrolled .brand-logo-img { max-height: 48px; } 
.brand-text-link { color: var(--hdr-text-dark); font-size: 22px; font-weight: 800; text-decoration: none; display: block; }

/* --- شورت‌کد ناحیه چپ --- */
.hdr-shortcode-wrap { background: transparent; display: flex; align-items: center; }

/* ==========================================================================
   Desktop Menu (تک ردیف با فونت ۱۴)
   ========================================================================== */
.d-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 25px !important;
}
.d-nav-list > li {
    display: inline-block !important;
    margin: 0 !important;
}
.d-nav-list > li > a {
    color: var(--hdr-text-dark);
    text-decoration: none;
    font-size: 14px; 
    font-weight: 600;
    padding: 10px 0;
    display: block;
    position: relative;
    transition: color 0.3s;
}
.d-nav-list > li > a:hover { color: var(--hdr-accent); }
.d-nav-list > li > a::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px; background-color: var(--hdr-accent); transition: width 0.3s ease;
}
.d-nav-list > li > a:hover::after { width: 100%; }

/* ==========================================================================
   Mobile Offcanvas Menu
   ========================================================================== */
/* دکمه همبرگر: رنگ اصلی کورال، هاور تیره */
.hamburger-btn {
    background: transparent !important; 
    border: none; 
    padding: 4px; 
    margin: 0;
    color: var(--hdr-accent); /* در حالت عادی کورال است */
    cursor: pointer; 
    display: flex; 
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}
.hamburger-btn:hover { background: transparent !important; color: var(--hdr-text-dark); /* در هاور تیره می‌شود */ }
.hamburger-btn svg { width: 28px; height: 28px; stroke-width: 1.2px; }

.vip-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
    z-index: 99998; opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.vip-overlay.active { opacity: 1; visibility: visible; }

.vip-offcanvas {
    position: fixed; top: 0; right: -320px; width: 300px; height: 100vh;
    background-color: #ffffff; border-left: 1px solid rgba(0,0,0,0.05);
    z-index: 99999; 
    /* GPU Acceleration برای اسلاید نرم بدون لگ در موبایل */
    will-change: right;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; overflow-y: auto;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}
.vip-offcanvas.active { right: 0; }

.offcanvas-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px; 
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.offcanvas-logo .brand-logo-img { max-height: 40px; }

/* دکمه ضربدر مینیمال */
.close-btn { 
    background-color: transparent !important; 
    border: none; 
    padding: 4px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--hdr-text-dark); 
    cursor: pointer; 
    transition: opacity 0.3s ease, color 0.3s ease;
}
.close-btn svg { width: 26px; height: 26px; stroke-width: 1.2px; }
.close-btn:hover { background-color: transparent !important; color: var(--hdr-accent); transform: none; opacity: 0.7; }

.offcanvas-body { padding: 0; flex-grow: 1; display: flex; flex-direction: column; }

.m-nav-list { list-style: none; padding: 0; margin: 0; }
.m-nav-list li { border-bottom: 1px solid #f1f5f9; } 
.m-nav-list a {
    display: block; 
    padding: 16px 20px; 
    color: var(--hdr-text-dark);
    text-decoration: none; 
    font-size: 12px; 
    font-weight: 600; 
    transition: all 0.3s ease;
}
.m-nav-list a:hover { 
    color: var(--hdr-accent); 
    padding-right: 25px; 
    background-color: rgba(223, 107, 90, 0.04); 
}

.offcanvas-custom-links { margin-top: auto; }
.custom-offcanvas-item {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #f1f5f9; 
    color: var(--hdr-text-dark); text-decoration: none;
    font-size: 12px; font-weight: 600; transition: all 0.3s ease;
}
.custom-offcanvas-item:hover { 
    color: var(--hdr-accent); 
    padding-right: 25px; 
    background-color: rgba(223, 107, 90, 0.04);
}
.co-icon { display: flex; align-items: center; color: var(--hdr-accent); }
.co-icon svg { width: 18px; height: 18px; stroke-width: 1px; }

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 991px) {
    .desktop-item { display: none !important; }
    .mobile-item { display: flex !important; }
    
    .hdr-flexbox { height: 75px; }
    .medical-vip-header.scrolled .hdr-flexbox { height: 65px; }
    
    .hdr-right { flex: 1; justify-content: flex-start; } 
    .hdr-center { flex: 2; justify-content: center; }    
    .hdr-left { flex: 1; justify-content: flex-end; }    
}