/* assets/css/ft-elementor-sticky.css */
body.admin-bar:not(.elementor-editor-active) .ft-sticky-header {
    top: 32px !important;
}

/* اصلاح موقعیت هدر در زمان لاگین بودن ادمین (حالت موبایل و تبلت کوچک) */
@media screen and (max-width: 782px) {
    body.admin-bar:not(.elementor-editor-active) .ft-sticky-header {
        top: 46px !important; /* نوار ادمین وردپرس در موبایل ضخیم‌تر است */
    }
}
/* --- تنظیمات پایه ادیتور (بدون تغییر) --- */
.elementor-editor-active .ft-sticky-header {
    position: relative !important; background-color: #444 !important; border: 2px dashed #ccc !important; padding: 20px !important; 
}
.elementor-editor-active .ft-sticky-header * { color: #fff !important; }

/* =========================================================
   1. حالت اولیه و بازگشت (Normal & Returning)
   ========================================================= */
body:not(.elementor-editor-active) .ft-sticky-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    
    background-color: transparent !important; 
    border-bottom: 1px solid var(--ft-normal-border, transparent);
    
    --padding-calc: max(0px, calc((100% - var(--ft-normal-width, 100%)) / 2));
    padding-left: calc(var(--padding-calc) + var(--ft-normal-pl, 0px));
    padding-right: calc(var(--padding-calc) + var(--ft-normal-pr, 0px));
    padding-top: var(--ft-normal-pt, 0px);
    padding-bottom: var(--ft-normal-pb, 0px);
    
    /* حذف ترنزیشن بکگراند در این حالت برای جلوگیری از سایه روشن شدن */
    transition: border-bottom 0.3s ease;
}

/* انیمیشن بازگشت هدر اصلی (شفاف) */
body:not(.elementor-editor-active) .ft-sticky-header.is-normal-returning {
    background-color: transparent !important; /* تضمین شفافیت در حین انیمیشن */
    animation: ftNormalFadeInDown 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes ftNormalFadeInDown {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* =========================================================
   2. حالت استیکی و خروج (Sticky & Hiding)
   ========================================================= */
body:not(.elementor-editor-active) .ft-sticky-header.is-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    
    /* اعمال رنگ پس‌زمینه فقط در این حالت */
    background-color: var(--ft-sticky-bg, #ffffff) !important;
    /* box-shadow: 0 5px 20px rgba(0,0,0,0.1); */
    
    animation: ftHeaderSlideDown 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    
    --padding-calc-sticky: max(0px, calc((100% - var(--ft-sticky-width, 100%)) / 2));
    padding-left: calc(var(--padding-calc-sticky) + var(--ft-sticky-pl, 0px));
    padding-right: calc(var(--padding-calc-sticky) + var(--ft-sticky-pr, 0px));
    padding-top: var(--ft-sticky-pt, 10px);
    padding-bottom: var(--ft-sticky-pb, 10px);
}

/* انیمیشن خروج (همچنان با پس‌زمینه رنگی تا وقتی که کاملاً بالا برود) */
body:not(.elementor-editor-active) .ft-sticky-header.is-hiding {
    position: fixed;
    background-color: var(--ft-sticky-bg, #ffffff) !important;
    animation: ftHeaderSlideUp 0.5s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes ftHeaderSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes ftHeaderSlideUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}

/* =========================================================
   3. رنگ‌بندی متون و فیلترها (بدون تغییر)
   ========================================================= */
body:not(.elementor-editor-active) .ft-sticky-header.is-sticky .elementor-item, 
body:not(.elementor-editor-active) .ft-sticky-header.is-sticky .ftkp-modal-trigger-btn, 
body:not(.elementor-editor-active) .ft-sticky-header.is-sticky .elementor-heading-title{ 
    color: var(--ft-sticky-text, #333333) !important; 
}

body:not(.elementor-editor-active) .ft-sticky-header.is-sticky .elementor-item, 
body:not(.elementor-editor-active) .ft-sticky-header.is-sticky .elementor-heading-title, 
body:not(.elementor-editor-active) .ft-sticky-header.is-sticky .ftkp-modal-trigger-btn, 
body:not(.elementor-editor-active) .ft-sticky-header.is-sticky a:not(.elementor-button),
body:not(.elementor-editor-active) .ft-sticky-header.is-sticky .ft-menu-toggle { 
    color: var(--ft-sticky-text, #333333) !important; 
}

/* .ftkp-modal-trigger-btn i {     color: #FFFFFF !important; } */
/* حالت عادی */
body:not(.elementor-editor-active) .ft-sticky-header.ft-logo-normal-white:not(.is-sticky) img { filter: brightness(0) invert(1) !important; }
body:not(.elementor-editor-active) .ft-sticky-header.ft-logo-normal-black:not(.is-sticky) img { filter: brightness(0) !important; }
body:not(.elementor-editor-active) .ft-sticky-header.ft-logo-normal-invert:not(.is-sticky) img { filter: invert(1) !important; }
body:not(.elementor-editor-active) .ft-sticky-header.ft-logo-normal-invert:not(.is-sticky) a { filter: invert(1) !important; }


/* حالت استیکی */
body:not(.elementor-editor-active) .ft-sticky-header.ft-logo-sticky-white.is-sticky img { filter: brightness(0) invert(1) !important; }
body:not(.elementor-editor-active) .ft-sticky-header.ft-logo-sticky-black.is-sticky img { filter: brightness(0) !important; }
body:not(.elementor-editor-active) .ft-sticky-header.ft-logo-sticky-invert.is-sticky img { filter: invert(1) !important; }
body:not(.elementor-editor-active) .ft-sticky-header.ft-logo-sticky-invert.is-sticky .ft-logo-texts { filter: invert(1) !important; }