/* ==========================================================================
   هدر — چیدمان LearnFav
   ==========================================================================

   ⚠️ اینجا عمداً هیچ رنگی هاردکد نشده.

   رنگ پس‌زمینه، رنگ لینک‌ها، رنگ hover و active و اندازه لوگو همگی از
   تنظیمات پیشخوان مگالرن می‌آیند. آن تنظیمات را includes/style-functions.php
   قالب پدر به‌صورت <style> در wp_head چاپ می‌کند و چون این فایل قبل از آن
   لود می‌شود، مقادیر پیشخوان همیشه برنده‌اند.

   یعنی اگر فردا رنگ سبز سایت را در پیشخوان عوض کنی، اینجا لازم نیست چیزی
   تغییر کند. تنها چیزی که این فایل تعیین می‌کند «چیدمان» است، نه «رنگ».

   دو استثنا که رنگ دارند و دلیلش نوشته شده:
     ۱. حاشیه پایین هدر و کادر جستجو — خاکستری خنثی، در تنظیمات مگالرن
        معادلی ندارند.
     ۲. دکمه جستجو — از --hmt-primary-color استفاده می‌کند که style-functions
        آن را تعریف می‌کند، پس باز هم از تنظیمات می‌آید.
   ========================================================================== */

/* ---------- اسکلت سه‌ستونی ---------- */

#main-header .lf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 80px;
    padding: 0;
    flex-wrap: nowrap;
}

#main-header .lf-header__right {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
}

#main-header .lf-header__left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* ---------- لوگو ---------- */

/*
 * ⚠️ max-width اینجا نوشته نشده: آن را style-functions.php از تنظیمات
 * header/styles/logo_size می‌گیرد (الان ۱۱۰px، موبایل ۵۰px).
 */
#main-header .lf-header .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

#main-header .lf-header .navbar-brand img {
    height: auto;
    object-fit: contain;
}

/* ---------- منوی اصلی ---------- */

/*
 * 🐛 flex-direction: row اینجا حیاتی است و نباید حذف شود.
 *
 * بوت‌استرپ برای .navbar-nav مقدار flex-direction: column می‌گذارد و فقط داخل
 * .navbar-expand-lg آن را در بریک‌پوینت lg به row تبدیل می‌کند. ما آن کلاس را
 * عمداً برداشته‌ایم (توضیحش در header.php)، پس ستونی بودن به‌صورت پیش‌فرض
 * می‌ماند: هشت آیتم منو زیر هم می‌چیدند و ارتفاع هدر روی دسکتاپ به چند برابر
 * می‌رسید. صرفِ display:flex این را حل نمی‌کند چون جهت را عوض نمی‌کند.
 */
#main-header .lf-header__menu > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* به همین دلیل خودِ نوار هم نباید بشکند */
#main-header .lf-header {
    flex-wrap: nowrap;
}

#main-header .lf-header__menu .nav-link {
    padding: 0.5rem 0;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- زیرمنو ---------- */

/*
 * 🐛 position: absolute اینجا حیاتی است.
 *
 * بوت‌استرپ دو قانون دارد:
 *     .navbar-nav .dropdown-menu               { position: static }
 *     .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute }
 *
 * ما navbar-expand-lg را برداشته‌ایم (توضیحش در header.php)، پس قانون اول
 * برنده می‌شد و زیرمنو به‌جای شناور شدن، داخل جریان صفحه می‌نشست: با هاور
 * روی «منابع رایگان» یا «آزمون»، آیتم‌ها زیر هم چیده می‌شدند و ارتفاع کل
 * هدر باد می‌کرد.
 *
 * باز شدن با هاور را خود مگالرن دارد (megalearn.css خط ۵۹۴، بالای ۷۶۸px)،
 * پس اینجا فقط جای‌گیری اصلاح می‌شود نه رفتار.
 */
#main-header .lf-header__menu .dropdown-menu {
    position: absolute;
    top: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 0.5rem;
    margin-top: 0;
}

/*
 * پل نامرئی بین دکمه و زیرمنو.
 *
 * زیرمنو با فاصله از دکمه باز می‌شود؛ بدون این، کاربر وسط راه از روی عنصر
 * خارج می‌شود و منو قبل از رسیدن ماوس بسته می‌شود.
 */
#main-header .lf-header__menu .dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    right: 0;
    left: 0;
    height: 12px;
}

/* آیتم‌های زیرمنو زیر هم می‌آیند — این طبیعی است، ولی جهت باید صریح باشد */
#main-header .lf-header__menu .dropdown-menu > li {
    width: 100%;
}

#main-header .lf-header__menu .dropdown-item {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
}

/* ---------- جعبه جستجوی وسط ---------- */

#main-header .lf-header__search {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    padding: 0 1.5rem;
    min-width: 0;
}

#main-header .lf-header__search form {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    overflow: hidden;
    max-width: 22rem;
    width: 100%;
}

#main-header .lf-header__search input {
    height: 40px;
    width: 100%;
    min-width: 0;
    padding: 0 1rem;
    font-size: 0.875rem;
    border: none;
    outline: none;
    background: transparent;
}

#main-header .lf-header__search button {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: #fff;
    background-color: var(--hmt-primary-color);
    transition: background-color 0.2s ease;
}

#main-header .lf-header__search button:hover {
    background-color: var(--hmt-primary-hover-color);
}

#main-header .lf-header__search button svg {
    width: 1rem;
    height: 1rem;
}

/* ---------- سبد ---------- */

#main-header .lf-header .megalearn-minicart {
    position: relative;
}

/*
 * 🐛 پنل مینی‌کارت از صفحه بیرون می‌زد.
 *
 * ⚠️ لنگر عمداً همان left:0 مگالرن مانده و برنگشته به right:0.
 *
 * سایت RTL است، پس آیکون سبد در نوار سمت «چپ» می‌نشیند. اول لنگر را به راست
 * بردم و نتیجه بدتر شد: در دسکتاپ ۱۴۴۰ پنل از x=-90 شروع می‌شد، یعنی از لبه
 * چپ بیرون می‌زد. با left:0 پنل از آیکون به سمت داخل صفحه باز می‌شود که در
 * همه عرض‌های متوسط و بزرگ درست است.
 *
 * مشکل واقعی فقط در صفحه‌های باریک بود (اندازه‌گیری روی ۳۹۰: از ۱۳۲ تا ۴۸۲)
 * و راه‌حلش پایین‌تر آمده: آنجا پنل از حالت چسبیده به آیکون خارج و به یک
 * کشوی تمام‌عرض زیر هدر تبدیل می‌شود.
 */
#main-header .lf-header .megalearn-minicart .widget_shopping_cart {
    max-width: calc(100vw - 24px);
}

/*
 * روی صفحه‌های باریک، چسباندن پنل به آیکون به هیچ شکلی جواب نمی‌دهد: آیکون
 * وسط نوار است و پنل ۳۵۰ پیکسلی از هر طرف بچسبد، از طرف دیگر بیرون می‌زند.
 * پس اینجا از جریان خارج می‌شود و تمام‌عرض زیر هدر می‌نشیند.
 */
@media (max-width: 575.98px) {
    #main-header .lf-header .megalearn-minicart .widget_shopping_cart {
        position: fixed;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    #main-header .lf-header .megalearn-minicart:hover .widget_shopping_cart {
        top: 68px;
    }

    #main-header .lf-header .megalearn-minicart .widget_shopping_cart:after {
        display: none;
    }
}

/* ---------- زنگ اطلاعیه‌ها ---------- */

#main-header .lf-notif {
    position: relative;
    display: flex;
    align-items: center;
}

#main-header .lf-notif__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

#main-header .lf-notif__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

#main-header .lf-notif__count {
    position: absolute;
    top: -2px;
    left: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background-color: #df4759;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

#main-header .lf-notif__panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: auto;
    width: min(320px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    z-index: 999;
    overflow: hidden;
}

#main-header .lf-notif__panel[hidden] {
    display: none;
}

#main-header .lf-notif__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
}

#main-header .lf-notif__title {
    font-weight: 800;
    font-size: 0.875rem;
}

#main-header .lf-notif__badge {
    font-size: 0.6875rem;
    font-weight: 800;
    color: #df4759;
}

#main-header .lf-notif__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-header .lf-notif__item a {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f9fafb;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

#main-header .lf-notif__item a:hover {
    background-color: #f9fafb;
}

/* اطلاعیه خوانده‌نشده با یک نوار رنگی در لبه راست متمایز می‌شود */
#main-header .lf-notif__item.is-unread a {
    border-right: 3px solid var(--hmt-primary-color);
    background-color: #f9fefb;
}

#main-header .lf-notif__item-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

#main-header .lf-notif__item-meta {
    display: block;
    font-size: 0.6875rem;
    color: #9ca3af;
}

#main-header .lf-notif__all {
    display: block;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--hmt-primary-color);
    text-decoration: none;
}

#main-header .lf-notif__empty {
    padding: 1.5rem 1rem;
    margin: 0;
    text-align: center;
    font-size: 0.8125rem;
    color: #6b7280;
}

/* روی موبایل کشو تمام‌عرض زیر هدر */
@media (max-width: 575.98px) {
    #main-header .lf-notif__panel {
        position: fixed;
        top: 68px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* ---------- کشوی سبد (سبک LearnFav، با کلیک) ---------- */

#main-header .lf-header .megalearn-cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/*
 * 🐛 flex-shrink: 0 لازم است.
 *
 * آیکون داخل یک فلکس‌کانتینر است و بدون این، مرورگر عرضش را جمع می‌کرد:
 * اندازه‌گیری شد ۱۰×۲۴ به‌جای ۲۴×۲۴ — یعنی سبد خرید کشیده و باریک دیده می‌شد.
 * ارتفاع درست بود چون فقط محور افقی جمع می‌شود.
 */
#main-header .lf-header .lf-cart-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

#main-header .lf-header .lf-cart-count {
    position: absolute;
    top: -2px;
    left: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background-color: var(--hmt-accent-color);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* وقتی سبد خالی است بج بی‌معنا می‌شود */
#main-header .lf-header .lf-cart-count.is-empty {
    display: none;
}

/*
 * ⚠️ این پنل جایگزین .widget_shopping_cart مگالرن است و قوانین آن (که با
 * hover کار می‌کرد) اینجا اثری ندارند، چون مارک‌آپ دیگری است.
 * لنگر چپ است چون آیکون سبد در RTL سمت چپ نوار می‌نشیند و پنل باید به
 * سمت داخل صفحه باز شود — همان درسی که برای پنل قبلی گرفتیم.
 */
#main-header .lf-header .lf-cart-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: auto;
    width: min(330px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    z-index: 999;
    overflow: hidden;
}

#main-header .lf-header .lf-cart-panel[hidden] {
    display: none;
}

#main-header .lf-cart-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
}

#main-header .lf-cart-panel__title {
    font-weight: 800;
    font-size: 0.875rem;
}

#main-header .lf-cart-panel__count {
    font-size: 0.75rem;
    color: #9ca3af;
}

#main-header .lf-cart-panel__empty {
    padding: 2rem 1rem;
    text-align: center;
}

#main-header .lf-cart-panel__empty svg {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    color: #e5e7eb;
    display: block;
}

#main-header .lf-cart-panel__empty p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1rem;
}

#main-header .lf-cart-panel__shop {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    background-color: var(--hmt-primary-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

#main-header .lf-cart-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
}

#main-header .lf-cart-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    transition: opacity 0.2s ease;
}

/* در حین درخواست AJAX ردیف کم‌رنگ و غیرقابل کلیک می‌شود */
#main-header .lf-cart-item.is-busy {
    opacity: 0.45;
    pointer-events: none;
}

#main-header .lf-cart-item__thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #f3f4f6;
    background: #f9fafb;
}

#main-header .lf-cart-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#main-header .lf-cart-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

#main-header .lf-cart-item__name {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    margin-bottom: 0.375rem;
    line-height: 1.5;
}

#main-header .lf-cart-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

#main-header .lf-qty {
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

#main-header .lf-qty__btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
}

#main-header .lf-qty__btn:hover {
    background-color: #f9fafb;
}

#main-header .lf-qty__btn svg {
    width: 12px;
    height: 12px;
}

#main-header .lf-qty__num {
    width: 28px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
}

#main-header .lf-cart-item__price {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--hmt-primary-color);
    white-space: nowrap;
}

#main-header .lf-cart-item__remove {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #d1d5db;
    transition: color 0.15s ease;
}

#main-header .lf-cart-item__remove:hover {
    color: #ef4444;
}

#main-header .lf-cart-item__remove svg {
    width: 16px;
    height: 16px;
}

#main-header .lf-cart-panel__foot {
    padding: 1rem;
    border-top: 1px solid #f3f4f6;
}

#main-header .lf-cart-panel__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
}

#main-header .lf-cart-panel__sum {
    font-weight: 800;
    color: #111827;
}

#main-header .lf-cart-panel__actions {
    display: flex;
    gap: 0.5rem;
}

#main-header .lf-cart-panel__view,
#main-header .lf-cart-panel__checkout {
    flex: 1 1 0;
    text-align: center;
    padding: 0.625rem 0;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.15s ease;
}

#main-header .lf-cart-panel__view {
    border: 1px solid #e5e7eb;
    color: #374151;
}

#main-header .lf-cart-panel__view:hover {
    border-color: var(--hmt-primary-color);
    color: var(--hmt-primary-color);
}

#main-header .lf-cart-panel__checkout {
    background-color: var(--hmt-primary-color);
    color: #fff;
}

#main-header .lf-cart-panel__checkout:hover {
    background-color: var(--hmt-primary-hover-color);
}

/* روی صفحه باریک، کشو تمام‌عرض زیر هدر می‌نشیند */
@media (max-width: 575.98px) {
    #main-header .lf-header .lf-cart-panel {
        position: fixed;
        top: 68px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* ---------- دکمه ورود / ثبت‌نام ---------- */

#main-header .lf-header__account {
    white-space: nowrap;
    font-weight: 700;
}

/* ---------- منوی کاربر وارد‌شده ---------- */

/*
 * ⚠️ هیچ آیکون فونتی و هیچ تصویر خارجی اینجا نیست — آواتار یا حرف اول نام
 * است یا SVG درون‌خطی. با قطع شدن اینترنت بین‌الملل هم دقیقاً همین شکل
 * باقی می‌ماند.
 */
#main-header .lf-usermenu {
    position: relative;
    display: flex;
    align-items: center;
}

#main-header .lf-usermenu__toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

#main-header .lf-usermenu__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--hmt-accent-color);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
    overflow: hidden;
}

#main-header .lf-usermenu__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#main-header .lf-usermenu__avatar svg {
    width: 22px;
    height: 22px;
}

/*
 * نام کنار آواتار — مثل LearnFav. روی عرض کم حذف می‌شود تا فقط آواتار بماند
 * و نوار جا شود (پایین‌تر در مدیاکوئری).
 */
#main-header .lf-usermenu__label {
    font-size: 0.8125rem;
    font-weight: 800;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main-header .lf-usermenu__chevron svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

#main-header .lf-usermenu.is-open .lf-usermenu__chevron svg {
    transform: rotate(180deg);
}

/*
 * 🐛 لنگر عمداً چپ است، نه راست.
 *
 * سایت RTL است و منوی کاربر چپ‌ترین عنصر نوار است. با لنگر راست، پنل از لبه
 * راستِ دکمه شروع می‌شد و ۲۶۰ پیکسل به چپ کشیده می‌شد؛ روی ۳۹۰ یعنی تا x=-196
 * بیرون از قاب. با لنگر چپ، پنل به سمت داخل صفحه باز می‌شود.
 * (همین اشتباه یک‌بار برای پنل مینی‌کارت هم رخ داد — توضیحش بالاتر آمده.)
 */
#main-header .lf-usermenu__panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: auto;
    width: min(260px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    z-index: 999;
}

/*
 * ⚠️ اسکرول عمداً ندارد.
 *
 * قبلاً max-height:70vh و overflow-y:auto داشت. با ۱۱ تا ۱۶ آیتم (بسته به
 * نقش) نوار اسکرول ظاهر می‌شد و ظاهر منو را خراب می‌کرد. حالا منو کامل باز
 * می‌شود؛ اگر نقشی آن‌قدر آیتم داشت که از صفحه بیرون بزند، راه‌حل درست
 * کوتاه‌کردن فهرست در افزونه است، نه پنهان‌کردنش پشت اسکرول.
 */
#main-header .lf-usermenu__panel[hidden] {
    display: none;
}

#main-header .lf-usermenu__head {
    padding: 0.5rem 0.75rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.25rem;
}

#main-header .lf-usermenu__name {
    font-weight: 800;
    font-size: 0.875rem;
}

#main-header .lf-usermenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-header .lf-usermenu__item a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

#main-header .lf-usermenu__item a:hover {
    background-color: #f3f4f6;
}

#main-header .lf-usermenu__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.75;
}

/*
 * خروج از حساب همیشه آخرین آیتم است (ووکامرس customer-logout را انتهای فهرست
 * می‌گذارد) و با رنگ قرمز و یک خط جداکننده از بقیه متمایز می‌شود.
 */
#main-header .lf-usermenu__item--customer-logout {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid #f3f4f6;
}

#main-header .lf-usermenu__item--customer-logout a {
    color: #df4759;
}

#main-header .lf-usermenu__item--customer-logout a:hover {
    background-color: #fef2f2;
}

/* روی موبایل فقط آواتار می‌ماند تا نوار جا شود */
@media (max-width: 767.98px) {
    #main-header .lf-usermenu__label {
        display: none;
    }
}

/* ---------- دکمه همبرگر ---------- */

/*
 * ⚠️ آیکون با سه خط CSS ساخته شده، نه با فونت‌اوسام.
 *
 * دلیلش این است که این دکمه در «هر» بارگذاری صفحه روی موبایل دیده می‌شود؛
 * وابسته کردنش به فونت یعنی تا رسیدن فایل فونت، دکمه منو نامرئی است.
 * با border خالص از اولین فریم دیده می‌شود.
 */
#main-header .lf-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

#main-header .lf-header__burger-bars,
#main-header .lf-header__burger-bars::before,
#main-header .lf-header__burger-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
}

#main-header .lf-header__burger-bars {
    position: relative;
}

#main-header .lf-header__burger-bars::before,
#main-header .lf-header__burger-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

#main-header .lf-header__burger-bars::before { top: -7px; }
#main-header .lf-header__burger-bars::after  { top: 7px; }

/* آیکون جستجو فقط وقتی که جعبه وسط جا نشود */
#main-header .lf-header__search-toggle {
    display: none;
}

/* ---------- واکنش‌گرایی ---------- */

/* زیر ۱۲۸۰px جعبه جستجوی وسط جا نمی‌شود؛ جایش آیکون می‌نشیند */
@media (max-width: 1279.98px) {
    #main-header .lf-header__search {
        display: none;
    }

    #main-header .lf-header__search-toggle {
        display: inline-flex;
        align-items: center;
    }
}

/* زیر ۹۹۲px منوی افقی جای خود را به کشوی offcanvas می‌دهد */
@media (max-width: 991.98px) {
    #main-header .lf-header__menu {
        display: none;
    }

    #main-header .lf-header__burger {
        display: inline-flex;
    }

    #main-header .lf-header {
        min-height: 64px;
        gap: 0.5rem;
    }

    /*
     * روی موبایل ترتیب LearnFav حفظ می‌شود (راست به چپ: همبرگر، لوگو،
     * سبد، دکمه حساب) ولی فاصله‌ها جمع می‌شوند تا در ۳۹۰px هم جا شود.
     *
     * 🐛 باگی که این بلوک رفع می‌کند: با فاصله‌های دسکتاپ، مجموع عرض عناصر
     * ۳۹۵ پیکسل می‌شد در حالی که نوار فقط ۳۶۶ پیکسل جا داشت. چون هدر
     * flex-wrap:nowrap است، ۲۹ پیکسل اضافه از لبه بیرون می‌زد و دقیقاً
     * همبرگر و لوگو — که در RTL انتهای نوارند — از کادر خارج می‌شدند و
     * دیده نمی‌شدند.
     */
    #main-header .lf-header__right,
    #main-header .lf-header__left {
        gap: 0.5rem;
        min-width: 0;
    }

    #main-header .lf-header__account {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
        font-size: 0.8125rem;
    }

    /*
     * آیکون جستجوی مستقل روی موبایل حذف می‌شود، نه از سر صرفه‌جویی بلکه چون
     * تکراری است: کشوی offcanvas خودش یک جعبه جستجوی کامل دارد. همین ۵۲
     * پیکسل، بخش عمده سرریز بالا بود.
     */
    #main-header .lf-header__search-toggle {
        display: none !important;
    }
}

/* زیر ۵۷۶px لوگو کوچک‌تر می‌شود تا نوار در باریک‌ترین گوشی هم جا شود */
@media (max-width: 575.98px) {
    #main-header .lf-header .navbar-brand img {
        max-width: 90px;
    }

    #main-header .lf-header__account {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/*
 * ⚠️ این قانون، قانونِ قالب پدر را خنثی می‌کند.
 *
 * megalearn.css خط ۷۸۲ بلوک .mobile-header را بالای ۹۹۲px مخفی می‌کند. ما آن
 * بلوک را کلاً حذف کرده‌ایم و یک هدر واحد داریم، ولی اگر روزی افزونه یا کدی
 * دوباره .mobile-header را چاپ کند، نباید کنار هدر ما ظاهر شود.
 */
#main-header .mobile-header {
    display: none !important;
}