.mobile-top-auth,
.mobile-bottom-nav,
.mobile-more-sheet,
.mobile-more-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    :root {
        --payava-purple: #5a189a;
        --payava-purple-dark: #3e116b;
        --payava-purple-active: #7027ae;
        --payava-purple-soft: #f1e9fb;
        --payava-orange: #f8842b;
        --payava-green: #20a94b;
        --payava-nav-height: 58px;
        --payava-nav-space: 78px;
        --payava-home-size: 43px;
        --payava-top-header-space: 108px;
    }

    body {
        padding-bottom: calc(var(--payava-nav-space) + env(safe-area-inset-bottom)) !important;
    }

    body.mobile-more-open,
    body:has(#mobileMoreSheet:target) {
        overflow: hidden !important;
        touch-action: none;
    }

    /* Mobile header: logo plus account actions; desktop navigation is untouched. */
    .custom_nav-container .navbar-toggler,
    .mobile-login-btn,
    #navbarSupportedContent {
        display: none !important;
    }

    .header_section {
        padding: 10px 0 12px !important;
    }

    .header_section .container-fluid {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .custom_nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 34px;
        padding: 0 !important;
    }

    .navbar-brand {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
    }

    .navbar-brand img {
        display: block;
        width: 136px !important;
        height: auto !important;
    }

    /* Login/register live in their own row outside .navbar. */
    .mobile-top-auth {
        width: min(330px, 100%);
        margin: 10px auto 0;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        direction: rtl;
    }

    .mobile-top-auth-btn {
        min-width: 0;
        min-height: 40px;
        padding: 8px 12px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid transparent;
        border-radius: 12px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 900;
        line-height: 1;
        text-decoration: none !important;
        box-shadow: 0 7px 18px rgba(30, 8, 50, .13);
        transition: transform .16s ease, box-shadow .16s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-top-auth-btn:active {
        transform: scale(.97);
    }

    .mobile-top-register-btn {
        color: #fff !important;
        background: linear-gradient(135deg, #27b856 0%, var(--payava-green) 100%);
        border-color: rgba(255, 255, 255, .22);
    }

    .mobile-top-login-btn,
    .mobile-top-panel-btn {
        color: var(--payava-purple-dark) !important;
        background: rgba(255, 255, 255, .98);
        border-color: rgba(90, 24, 154, .17);
    }

    .mobile-top-logout-btn {
        color: #fff !important;
        background: rgba(255, 255, 255, .13);
        border-color: rgba(255, 255, 255, .22);
    }

    .mobile-top-auth-svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .mobile-top-auth {
        position: relative;
        z-index: 40;
    }

    /*
       در همه صفحات موبایل، کل هدر (لوگو + دسترسی حساب) ثابت است.
       با اسکرول، لوگو به‌صورت نرم جمع می‌شود و دکمه‌ها باقی می‌مانند.
    */
    .has-mobile-top-auth .header_section {
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1180 !important;
        padding-top: calc(10px + env(safe-area-inset-top)) !important;
        padding-bottom: 12px !important;
        background: linear-gradient(90deg, #3e116b 0%, #5a189a 96%) !important;
        border-radius: 0 0 28px 0;
        box-shadow: 0 12px 30px rgba(36, 10, 58, .22);
        -webkit-backdrop-filter: blur(16px) saturate(145%);
        backdrop-filter: blur(16px) saturate(145%);
    }

    /* فضای رزرو شده تا محتوای صفحه زیر هدر ثابت نرود. */
    .has-mobile-top-auth .hero_area {
        padding-top: calc(var(--payava-top-header-space) + env(safe-area-inset-top)) !important;
    }

    /*
       فضای ایمن برای صفحه اصلی:
       نوبار ثابت نباید روی دکمه‌ها یا نشانگرهای اسلایدر قرار بگیرد.
    */
    .hero_area {
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
    }

    .hero_area .slider_section {
        padding-bottom: calc(var(--payava-nav-space) + 24px) !important;
    }

    /*
       در صفحه اصلی موبایل، دکمه‌های تکراری داخل بنر حذف می‌شوند.
       ورود و ثبت‌نام از هدر ثابت بالای صفحه در دسترس هستند.
    */
    body.is-home-page .slider_section .detail-box .btn-box {
        display: none !important;
    }

    /* Keep the home-page carousel indicators clear of the fixed navbar. */
    .slider_section .carousel-indicators {
        position: relative !important;
        z-index: 3 !important;
        margin-top: 30px !important;
        margin-bottom: 18px !important;
        transform: translateY(-10px);
    }

    /* Exactly five items; visual order from right: tariff, learn, home, articles, more. */
    .mobile-bottom-nav {
        position: fixed !important;
        right: 7px !important;
        bottom: calc(6px + env(safe-area-inset-bottom)) !important;
        left: 7px !important;
        z-index: 1200 !important;
        width: auto !important;
        height: var(--payava-nav-height) !important;
        min-height: var(--payava-nav-height) !important;
        padding: 4px 5px 3px !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-template-rows: 1fr !important;
        align-items: stretch !important;
        gap: 0 !important;
        direction: rtl !important;
        overflow: visible !important;
        background: rgba(255, 255, 255, .97) !important;
        border: 1px solid rgba(90, 24, 154, .15) !important;
        border-radius: 21px !important;
        box-shadow: 0 15px 36px rgba(41, 15, 62, .23), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);
    }

    .mobile-bottom-nav > .mobile-bottom-item {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 3px 1px 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: transparent !important;
        color: var(--payava-purple) !important;
        font-family: inherit !important;
        text-decoration: none !important;
        cursor: pointer;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .16s ease, background .16s ease, transform .16s ease;
    }

    .mobile-bottom-nav > .mobile-bottom-item:active {
        transform: scale(.95);
    }

    .mobile-more-trigger {
        position: relative !important;
        z-index: 3 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .mobile-bottom-icon {
        width: 27px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit;
    }

    .mobile-bottom-icon svg {
        width: 21px;
        height: 21px;
        display: block;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-bottom-icon .filled-dot {
        fill: currentColor;
        stroke: none;
    }

    .mobile-bottom-label {
        max-width: 100%;
        overflow: hidden;
        color: var(--payava-purple-dark) !important;
        font-size: 10.4px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mobile-bottom-nav > .mobile-bottom-item.active:not(.mobile-bottom-home),
    .mobile-bottom-nav > .mobile-more-trigger[aria-expanded="true"],
    body:has(#mobileMoreSheet:target) .mobile-more-trigger {
        color: var(--payava-purple-active) !important;
        background: var(--payava-purple-soft) !important;
        box-shadow: inset 0 0 0 1px rgba(90, 24, 154, .08) !important;
    }

    .mobile-bottom-nav > .mobile-bottom-item.active:not(.mobile-bottom-home)::after,
    .mobile-bottom-nav > .mobile-more-trigger[aria-expanded="true"]::after,
    body:has(#mobileMoreSheet:target) .mobile-more-trigger::after {
        content: "";
        position: absolute;
        right: 50%;
        bottom: 0;
        width: 16px;
        height: 3px;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--payava-purple-dark), var(--payava-purple-active));
        transform: translateX(50%);
    }

    /* Compact elevated home button: no collision with carousel dots. */
    .mobile-bottom-nav > .mobile-bottom-home {
        align-self: start !important;
        height: 54px !important;
        min-height: 54px !important;
        margin-top: -5px !important;
        overflow: visible !important;
    }

    .mobile-home-icon {
        width: var(--payava-home-size);
        height: var(--payava-home-size);
        flex: 0 0 var(--payava-home-size);
        padding: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 3px solid #fff;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 2px var(--payava-orange), 0 8px 18px rgba(248, 132, 43, .32);
        transition: transform .16s ease, box-shadow .16s ease;
    }

    .mobile-home-icon img {
        width: 31px !important;
        height: 31px !important;
        display: block;
        object-fit: contain;
        border-radius: 50%;
    }

    .mobile-bottom-home .mobile-bottom-label {
        margin-top: -2px;
        padding: 1px 7px;
        border-radius: 99px;
        background: rgba(90, 24, 154, .08);
    }

    .mobile-bottom-home.active .mobile-home-icon,
    .mobile-bottom-home:hover .mobile-home-icon,
    .mobile-bottom-home:focus .mobile-home-icon {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 0 0 3px var(--payava-orange), 0 10px 22px rgba(248, 132, 43, .38);
    }

    .mobile-bottom-home.active .mobile-bottom-label {
        color: #fff !important;
        background: linear-gradient(90deg, var(--payava-purple-dark), var(--payava-purple));
    }

    /* More-sheet overlay. */
    .mobile-more-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1250 !important;
        display: block !important;
        visibility: hidden;
        opacity: 0;
        background: rgba(25, 8, 39, .52);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        pointer-events: none;
        text-decoration: none !important;
        transition: opacity .22s ease, visibility .22s ease;
    }

    .mobile-more-backdrop.is-visible,
    .mobile-more-sheet:target + .mobile-more-backdrop {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-more-sheet {
        position: fixed !important;
        right: 8px !important;
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        z-index: 1300 !important;
        display: block !important;
        visibility: hidden;
        max-height: min(72vh, 620px);
        padding: 8px 14px 17px;
        direction: rtl;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: radial-gradient(circle at 92% 4%, rgba(90, 24, 154, .10), transparent 32%), linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
        border: 1px solid rgba(90, 24, 154, .15);
        border-radius: 26px;
        box-shadow: 0 24px 64px rgba(35, 12, 54, .30);
        opacity: 0;
        transform: translateY(22px) scale(.98);
        pointer-events: none;
        transition: transform .27s ease, opacity .21s ease, visibility .27s ease;
    }

    .mobile-more-sheet.is-open,
    .mobile-more-sheet:target {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .mobile-more-handle {
        width: 45px;
        height: 5px;
        margin: 2px auto 13px;
        border-radius: 99px;
        background: rgba(90, 24, 154, .23);
    }

    .mobile-more-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 15px;
    }

    .mobile-more-eyebrow {
        display: block;
        margin-bottom: 2px;
        color: #806198;
        font-size: 11px;
        font-weight: 800;
    }

    .mobile-more-header h2 {
        margin: 0;
        color: #251032;
        font-size: 19px;
        font-weight: 950;
    }

    .mobile-more-close {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(90, 24, 154, .16);
        border-radius: 14px;
        background: rgba(90, 24, 154, .09);
        color: var(--payava-purple);
        font-family: inherit;
        line-height: 1;
        cursor: pointer;
        outline: none;
        box-shadow: none;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
    }

    .mobile-more-close::before,
    .mobile-more-close::after {
        content: none !important;
        display: none !important;
    }

    .mobile-more-close-svg {
        width: 22px;
        height: 22px;
        display: block;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
    }

    .mobile-more-close:hover,
    .mobile-more-close:focus-visible {
        color: #fff;
        background: var(--payava-purple);
        border-color: var(--payava-purple);
    }

    .mobile-more-close:active {
        transform: scale(.92);
    }

    .mobile-more-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mobile-more-link {
        min-width: 0;
        min-height: 68px;
        padding: 10px 11px;
        display: flex;
        align-items: center;
        gap: 9px;
        color: #2d2034 !important;
        background: #fff;
        border: 1px solid rgba(90, 24, 154, .11);
        border-radius: 17px;
        box-shadow: 0 8px 22px rgba(38, 15, 62, .06);
        font-size: 12.7px;
        font-weight: 900;
        text-decoration: none !important;
        transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .mobile-more-link:hover,
    .mobile-more-link:focus,
    .mobile-more-link.active {
        color: var(--payava-purple-dark) !important;
        background: linear-gradient(135deg, rgba(90, 24, 154, .10), #fff);
        border-color: rgba(248, 132, 43, .48);
        box-shadow: 0 10px 26px rgba(90, 24, 154, .12);
        transform: translateY(-2px);
    }

    .mobile-more-grid > .mobile-more-link:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .mobile-more-icon {
        width: 39px;
        height: 39px;
        flex: 0 0 39px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        background: var(--payava-purple-soft);
        color: var(--payava-purple);
    }

    .mobile-more-icon svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}


/* =========================================================
   RESPONSIVE COMPACTION
   طراحی بر اساس اندازه Viewport است، نه مدل گوشی.
   هدف: عملکرد صحیح تا عرض 280px و ارتفاع 568px.
   ========================================================= */

/* موبایل‌های باریک؛ شامل دستگاه‌های 320 و 360 پیکسل */
@media (max-width: 360px) {
    :root {
        --payava-nav-height: 56px;
        --payava-nav-space: 74px;
        --payava-home-size: 41px;
        --payava-top-header-space: 102px;
    }

    .mobile-top-auth {
        width: min(310px, calc(100% - 16px));
        gap: 7px;
    }

    .mobile-top-auth-btn {
        min-height: 38px;
        padding-right: 9px;
        padding-left: 9px;
        font-size: 11.5px;
    }

    .mobile-bottom-nav {
        right: 5px !important;
        left: 5px !important;
        padding-right: 3px !important;
        padding-left: 3px !important;
        border-radius: 19px !important;
    }

    .mobile-bottom-nav > .mobile-bottom-item {
        height: 48px !important;
        min-height: 48px !important;
    }

    .mobile-bottom-icon {
        width: 25px;
        height: 23px;
    }

    .mobile-bottom-icon svg {
        width: 19px;
        height: 19px;
    }

    .mobile-bottom-label {
        font-size: 9.4px !important;
    }

    .mobile-home-icon img {
        width: 28px !important;
        height: 28px !important;
    }

    .mobile-more-sheet {
        right: 5px !important;
        left: 5px !important;
        padding-right: 11px;
        padding-left: 11px;
    }

    .mobile-more-grid {
        gap: 8px;
    }

    .mobile-more-link {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 12px;
    }
}

/*
   صفحه‌های کوتاه؛ مهم‌تر از عرض هستند، چون نوبار ممکن است
   روی CTAهای ورود و ثبت‌نام یا نشانگرهای اسلایدر قرار بگیرد.
*/
@media (max-width: 480px) and (max-height: 700px) {
    :root {
        --payava-nav-height: 56px;
        --payava-nav-space: 74px;
        --payava-home-size: 41px;
    }

    .hero_area .slider_section {
        padding-top: 18px !important;
        padding-bottom: calc(var(--payava-nav-space) + 34px) !important;
    }

    .slider_section .img-box {
        width: min(72vw, 255px);
        max-width: 255px;
        margin-right: auto;
        margin-left: auto;
    }

    .slider_section .detail-box h1 {
        margin-bottom: 10px !important;
        font-size: clamp(25px, 8vw, 31px) !important;
        line-height: 1.48 !important;
    }

    .slider_section .detail-box p {
        margin-bottom: 7px !important;
        font-size: 13px !important;
        line-height: 1.72 !important;
    }

    .slider_section .detail-box .btn-box {
        margin-top: 18px !important;
        margin-bottom: 6px !important;
    }

    .slider_section .carousel-indicators {
        margin-top: 17px !important;
        margin-bottom: 12px !important;
        transform: translateY(-5px) !important;
    }

    .mobile-bottom-nav {
        bottom: calc(5px + env(safe-area-inset-bottom)) !important;
        border-radius: 19px !important;
    }

    .mobile-bottom-nav > .mobile-bottom-item {
        height: 48px !important;
        min-height: 48px !important;
    }

    .mobile-bottom-nav > .mobile-bottom-home {
        height: 51px !important;
        min-height: 51px !important;
        margin-top: -3px !important;
    }
}

/* حالت سخت‌گیرانه: گوشی‌های بسیار باریک و کوتاه، تا حدود 280×568 */
@media (max-width: 320px) and (max-height: 620px) {
    :root {
        --payava-nav-height: 53px;
        --payava-nav-space: 70px;
        --payava-home-size: 39px;
        --payava-top-header-space: 91px;
    }

    .header_section {
        padding-top: 7px !important;
        padding-bottom: 8px !important;
    }

    .has-mobile-top-auth .header_section {
        padding-top: calc(7px + env(safe-area-inset-top)) !important;
        padding-bottom: 8px !important;
        border-radius: 0 0 22px 0;
    }

    .navbar-brand img {
        width: 122px !important;
    }

    .mobile-top-auth {
        margin-top: 7px;
    }

    .mobile-top-auth-btn {
        min-height: 35px;
        padding: 7px 6px;
        gap: 5px;
        font-size: 10.5px;
        border-radius: 10px;
    }

    .mobile-top-auth-svg {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    .hero_area .slider_section {
        padding-top: 12px !important;
        padding-bottom: calc(var(--payava-nav-space) + 38px) !important;
    }

    .slider_section .img-box {
        width: min(68vw, 215px);
        max-width: 215px;
    }

    .slider_section .detail-box h1 {
        font-size: clamp(22px, 8.4vw, 26px) !important;
        line-height: 1.42 !important;
    }

    .slider_section .detail-box p {
        font-size: 11.5px !important;
        line-height: 1.65 !important;
    }

    .slider_section .detail-box .btn-box {
        margin-top: 14px !important;
        gap: 5px;
    }

    .slider_section .detail-box .btn-box a {
        min-width: 0 !important;
        padding: 9px 8px !important;
        font-size: 11px !important;
    }

    .slider_section .carousel-indicators {
        margin-top: 13px !important;
        margin-bottom: 9px !important;
    }

    .mobile-bottom-nav {
        right: 3px !important;
        left: 3px !important;
        padding: 2px !important;
        border-radius: 17px !important;
    }

    .mobile-bottom-nav > .mobile-bottom-item {
        height: 45px !important;
        min-height: 45px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .mobile-bottom-icon {
        width: 22px;
        height: 21px;
    }

    .mobile-bottom-icon svg {
        width: 17px;
        height: 17px;
        stroke-width: 1.9;
    }

    .mobile-bottom-label {
        font-size: 8.4px !important;
    }

    .mobile-bottom-nav > .mobile-bottom-home {
        height: 48px !important;
        min-height: 48px !important;
        margin-top: -2px !important;
    }

    .mobile-home-icon {
        padding: 3px;
        border-width: 2px;
        box-shadow: 0 0 0 2px var(--payava-orange), 0 6px 14px rgba(248, 132, 43, .28);
    }

    .mobile-home-icon img {
        width: 26px !important;
        height: 26px !important;
    }

    .mobile-bottom-home .mobile-bottom-label {
        padding-right: 5px;
        padding-left: 5px;
    }

    .mobile-more-sheet {
        bottom: calc(66px + env(safe-area-inset-bottom)) !important;
        max-height: min(76vh, 560px);
        border-radius: 21px;
    }

    .mobile-more-grid {
        grid-template-columns: 1fr;
    }

    .mobile-more-grid > .mobile-more-link:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .mobile-more-link {
        min-height: 58px;
    }
}

/* ارتفاع‌های بسیار کم؛ از فشرده‌شدن عمودی جلوگیری می‌کند. */
@media (max-width: 320px) and (max-height: 568px) {
    .hero_area .slider_section {
        padding-top: 8px !important;
        padding-bottom: calc(var(--payava-nav-space) + 42px) !important;
    }

    .slider_section .img-box {
        width: min(62vw, 190px);
        max-width: 190px;
    }

    .slider_section .detail-box h1 {
        font-size: 21px !important;
    }

    .slider_section .detail-box p {
        font-size: 10.8px !important;
    }

    .slider_section .detail-box .btn-box {
        margin-top: 11px !important;
    }
}

/* =========================================================
   SMOOTH COLLAPSIBLE MOBILE AUTH HEADER
   جمع‌شدن هدر فقط با transform و opacity انجام می‌شود؛
   بنابراین هنگام اسکرول هیچ تغییر پله‌ای در height/max-height نداریم.
   ========================================================= */
@media (max-width: 991.98px) {
    .has-mobile-top-auth .header_section {
        --mobile-header-shift: 0px;
        --mobile-logo-shift: 0px;
        --mobile-logo-opacity: 1;
        --mobile-logo-scale: 1;

        overflow: visible !important;
        transform: translate3d(0, var(--mobile-header-shift), 0);
        transform-origin: top center;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        contain: paint;

        /* تغییر اندازه و max-height عمداً انیمیت نمی‌شوند. */
        transition: box-shadow .18s ease, border-radius .18s ease !important;
    }

    .has-mobile-top-auth .header_section .custom_nav-container {
        max-height: none !important;
        min-height: 34px !important;
        overflow: visible !important;
        opacity: var(--mobile-logo-opacity) !important;
        transform:
            translate3d(0, var(--mobile-logo-shift), 0)
            scale(var(--mobile-logo-scale)) !important;
        transform-origin: top center;
        pointer-events: auto;
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transition: none !important;
    }

    .has-mobile-top-auth .header_section .navbar-brand,
    .has-mobile-top-auth .header_section .navbar-brand img {
        opacity: inherit !important;
        transform: none !important;
        transition: none !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .has-mobile-top-auth .mobile-top-auth,
    .has-mobile-top-auth .mobile-top-auth-btn {
        transition: none !important;
    }

    /* فقط بعد از کامل‌شدن حرکت، لوگو از چرخه لمس خارج می‌شود. */
    .has-mobile-top-auth .header_section.mobile-header-compact .custom_nav-container {
        pointer-events: none;
    }

    .has-mobile-top-auth .header_section.mobile-header-moving {
        box-shadow: 0 10px 26px rgba(36, 10, 58, .21) !important;
    }

    .has-mobile-top-auth .header_section.mobile-header-compact {
        border-radius: 0 0 20px 0 !important;
        box-shadow: 0 8px 22px rgba(36, 10, 58, .20) !important;
    }
}

/* روی نمایشگرهای باریک، مسافت جمع‌شدن کمی کمتر می‌شود. */
@media (max-width: 360px) {
    .has-mobile-top-auth .header_section {
        --mobile-header-small-screen: 1;
    }
}

/* کاربری که کاهش حرکت را فعال کرده، تغییر حالت فوری دریافت می‌کند. */
@media (prefers-reduced-motion: reduce) {
    .has-mobile-top-auth .header_section,
    .has-mobile-top-auth .header_section .custom_nav-container,
    .has-mobile-top-auth .header_section .navbar-brand,
    .has-mobile-top-auth .header_section .navbar-brand img {
        transition: none !important;
    }
}