/* ============================================================
   ارتونا - استایل لوکس نسخه ۲ (بازنویسی‌شده)
   هدف: تکمیل style.css بدون تداخل
   - فونت dana از fontiran.css سراسری اعمال می‌شه
   - این فایل فقط رنگ‌ها و ظاهر لوکس رو اضافه می‌کنه
   - کلاس‌های مشترک با style.css فقط رنگ و سایه‌شون عوض می‌شه
   ============================================================ */

/* ===== ۱. متغیرهای رنگ ===== */
:root {
    --ert-primary: #8b7a5a;
    --ert-primary-light: #b8a88a;
    --ert-primary-dark: #6d5f45;
    
    --ert-secondary: #d4c5a0;
    --ert-secondary-light: #e8ddc4;
    
    --ert-gold: #c9b08a;
    --ert-gold-light: #e8ddcc;
    
    --ert-bg: #f9f6f1;
    --ert-bg-card: #ffffff;
    --ert-bg-section: #f5f0ea;
    
    --ert-text: #3d352a;
    --ert-text-light: #7a6e5e;
    --ert-text-muted: #a89988;
    
    --ert-border: #e5ddd2;
    --ert-border-light: #f0ebe4;
    
    --ert-shadow: 0 8px 40px rgba(139, 122, 90, 0.08);
    --ert-shadow-hover: 0 15px 55px rgba(139, 122, 90, 0.12);
    --ert-shadow-gold: 0 8px 35px rgba(201, 176, 138, 0.15);
    
    --ert-radius: 16px;
    --ert-radius-sm: 10px;
    --ert-radius-lg: 24px;
    
    --ert-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== ۲. هدر شفاف و لوکس ===== */
.site-navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--ert-border) !important;
    transition: var(--ert-transition);
    box-shadow: 0 2px 30px rgba(139, 122, 90, 0.06) !important;
}

.site-navbar.is-sticky {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 40px rgba(139, 122, 90, 0.08) !important;
}

/* ===== ۳. منوی اصلی - فقط رنگ ===== */
.site-navbar .site-navigation .site-menu > li > a {
    color: var(--ert-text) !important;
    transition: var(--ert-transition);
}

.site-navbar .site-navigation .site-menu > li > a:hover,
.site-navbar .site-navigation .site-menu > li > a.active {
    color: var(--ert-primary) !important;
}

/* ===== ۴. دکمه‌های اجتماعی ===== */
.social-link {
    background: rgba(139, 122, 90, 0.06) !important;
    border-color: var(--ert-border) !important;
    color: var(--ert-text-light) !important;
    transition: var(--ert-transition);
}

.social-link:hover {
    background: var(--ert-secondary) !important;
    border-color: var(--ert-secondary) !important;
    color: var(--ert-text) !important;
    box-shadow: var(--ert-shadow-gold);
}

/* ===== ۵. مگامنو - فقط رنگ ===== */
.menu > ul > li > ul {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-top-color: var(--ert-secondary) !important;
    box-shadow: 0 20px 60px rgba(139, 122, 90, 0.08) !important;
}

.megamenu-header {
    color: var(--ert-primary) !important;
}

.menu > ul > li > ul > li > a:hover {
    color: var(--ert-primary) !important;
}

/* ===== ۶. دکمه‌ها - فقط رنگ ===== */
.btn-fill-light {
    background-color: var(--ert-secondary) !important;
    color: var(--ert-text) !important;
    border-color: var(--ert-secondary) !important;
    transition: var(--ert-transition);
}

.btn-fill-light:hover {
    background-color: var(--ert-primary-light) !important;
    border-color: var(--ert-primary-light) !important;
    color: var(--ert-text) !important;
}

.btn-fill-dark {
    background-color: var(--ert-primary) !important;
    color: #ffffff !important;
    border-color: var(--ert-primary) !important;
    transition: var(--ert-transition);
}

.btn-fill-dark:hover {
    background-color: var(--ert-primary-light) !important;
    border-color: var(--ert-primary-light) !important;
    color: #ffffff !important;
}

.btn-outline-light {
    border-color: var(--ert-primary) !important;
    color: var(--ert-primary) !important;
}

.btn-outline-light:hover {
    background-color: var(--ert-primary) !important;
    color: #ffffff !important;
}

/* ===== ۷. کارت محصول - فقط رنگ ===== */
.product-list-item {
    border-color: var(--ert-border-light) !important;
    transition: var(--ert-transition);
}

.product-list-item:hover {
    border-color: var(--ert-secondary) !important;
    box-shadow: var(--ert-shadow-hover) !important;
}

.product-title {
    color: var(--ert-text);
}

.sidebar-product-price-box .j_sprToman {
    color: var(--ert-primary);
}

.discount {
    background-color: #e8d5c4 !important;
    color: var(--ert-text) !important;
}

/* ===== ۹. فوتر - فقط رنگ ===== */
.footer-section {
    background-color: var(--ert-bg-section) !important;
    border-top-color: var(--ert-border) !important;
}

.footer-section .footer-heading {
    color: var(--ert-primary) !important;
}

.footer-section .footer-links li a {
    color: var(--ert-text-light) !important;
    transition: var(--ert-transition);
}

.footer-section .footer-links li a:hover {
    color: var(--ert-primary) !important;
}

.footer-section .social-link {
    background-color: var(--ert-bg-card) !important;
    color: var(--ert-text-light) !important;
    transition: var(--ert-transition);
}

.footer-section .social-link:hover {
    background-color: var(--ert-secondary) !important;
    color: var(--ert-text) !important;
}

.bottom-footer {
    background-color: var(--ert-bg) !important;
    border-top-color: var(--ert-border) !important;
}

.bottom-footer p {
    color: var(--ert-text-muted) !important;
}

.bottom-footer a {
    color: var(--ert-primary) !important;
}

/* ===== ۱۰. دکمه شناور تماس ===== */
#fab-btn {
    background-color: var(--ert-secondary) !important;
    transition: var(--ert-transition);
}

#fab-btn:hover {
    background-color: var(--ert-primary-light) !important;
    transform: translateY(-4px);
}

#fab-btn span {
    color: var(--ert-text) !important;
}

/* ===== ۱۱. جستجو ===== */
.searchbox .has-search input {
    background-color: var(--ert-bg-card) !important;
    border-color: var(--ert-border) !important;
    color: var(--ert-text) !important;
    transition: var(--ert-transition);
}

.searchbox .has-search input:focus {
    border-color: var(--ert-secondary) !important;
    box-shadow: 0 0 0 4px rgba(212, 197, 160, 0.15) !important;
}

.searchbox .has-search button {
    color: var(--ert-text-muted) !important;
}

.searchbox .has-search button:hover {
    color: var(--ert-primary) !important;
}

/* ===== ۱۲. اسکرول‌بار لوکس ===== */
::-webkit-scrollbar-thumb {
    background: var(--ert-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ert-primary-light);
}

/* ===== ۱۳. کلاس‌های جدید مخصوص style-new ===== */

.gold-divider {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--ert-secondary), transparent);
    margin: 20px 0;
}

.premium-card {
    background: var(--ert-bg-card);
    border: 1px solid var(--ert-border);
    border-radius: var(--ert-radius);
    padding: 30px;
    transition: var(--ert-transition);
}

.premium-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ert-shadow-hover);
}

.gold-badge {
    background: var(--ert-secondary);
    color: var(--ert-text);
    padding: 4px 16px;
    border-radius: 50em;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.7s ease forwards;
}

/* ===== ۱۴. صفحه محصول ===== */
.luxury-product-page {
    background: var(--ert-bg-card) !important;
    border: 1px solid var(--ert-border-light) !important;
}

.luxury-title {
    color: var(--ert-text) !important;
}

.luxury-price-box {
    background: linear-gradient(135deg, #fef9e7, #ffffff) !important;
    border-color: rgba(184, 134, 11, 0.3) !important;
}

.luxury-final-price {
    color: var(--ert-primary) !important;
}

/* ===== ۱۵. صفحه پروفایل ===== */
#v-pills-tabContent {
    border-color: var(--ert-border-light) !important;
}

.profile-tab-nav .nav-pills .nav-link.active,
.profile-tab-nav .nav-pills .show > .nav-link {
    background-color: #f5f0ea !important;
    color: var(--ert-primary) !important;
}

.count-box,
.false-For-Bottom-Text {
    border-color: var(--ert-border-light) !important;
}

.count-box:hover {
    background-color: var(--ert-bg-section) !important;
}

/* ===== ۱۶. صفحه صورتحساب ===== */
.invoice-wrapper {
    background: var(--ert-bg-card) !important;
}

.btn-pay {
    background-color: #38a169 !important;
}

.btn-pay:hover {
    background-color: #2f855a !important;
}

/* ===== ۱۷. موبایل - فقط رنگ‌ها ===== */
@media (max-width: 991.98px) {
    .site-mobile-menu {
        background-color: var(--ert-bg-card) !important;
    }

    .site-mobile-menu .site-mobile-menu-header {
        background-color: var(--ert-bg-section) !important;
        border-bottom-color: var(--ert-border) !important;
    }

    .site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
        color: var(--ert-text) !important;
    }

    .site-mobile-menu .site-nav-wrap > li > a {
        color: var(--ert-text) !important;
    }

    .site-mobile-menu .site-nav-wrap > li > a:hover {
        color: var(--ert-primary) !important;
        background-color: var(--ert-bg-section) !important;
    }

    .menu-mobile,
    .site-menu-toggle {
        color: var(--ert-primary) !important;
    }
}
/* آیکون‌های هدر - دایره‌ی کامل با آیکون وسط‌چین */
.site-navbar .site-navigation .site-menu.site-menu-dark > li > a.social-link {
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.site-navbar .site-navigation .site-menu.site-menu-dark > li > a.social-link i {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
/* ============================================================
   رفع مشکل z-index مگا منو (محصولات) روی بنرها
   ============================================================ */

/* مگا منوی محصولات - z-index خیلی بالا */
.menu > ul > li > ul {
    z-index: 999999999 !important;
    position: fixed !important;
}

/* هدر سایت هم بالا بمونه تا با مگا منو هماهنگ باشه */
.site-navbar,
header.site-navbar,
.header-v2 {
    position: relative !important;
    z-index: 999999998 !important;
}

/* وقتی هدر sticky می‌شه */
.site-navbar.is-sticky,
.site-navbar.js-sticky-header.is-sticky {
    z-index: 999999998 !important;
}

/* تمام بنرها و اسلایدرها z-index پایین */
.main-slider,
.main-slider-item,
.owl-carousel,
.owl-stage-outer,
.owl-item,
.hero-slider-container,
.home-slider-direction {
    position: relative !important;
    z-index: 1 !important;
}

/* هر عنصر wrapper که ممکنه stacking context بسازه */
.wrapper-body,
.site-wrap {
    position: relative;
    z-index: auto !important;
}

/* sub-menuهای داخل مگا منو */
.menu > ul > li > ul > li > ul {
    z-index: 999999999 !important;
}
/* ============================================================
   رفع مشکل ترتیب منو (RTL) - نسخه اصلاح‌شده
   ============================================================ */

/* منوی اصلی: همیشه RTL، آیتم اول سمت راست */
.menu {
    direction: rtl !important;
}

/* فقط منوهایی که کلاس d-none یا d-xl-block دارن، توی موبایل مخفی بشن */
.site-menu.d-none.d-xl-block,
.site-menu.main-menu {
    /* هیچ display: flex اینجا نمی‌ذاریم - بذار خودش مدیریت کنه */
    direction: rtl !important;
}

/* فقط منوی اصلی دسکتاپ (نه منوی موبایل) */
@media (min-width: 1200px) {
    .site-menu.main-menu.d-none.d-xl-block {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
}

/* منوی موبایل: مخفی در دسکتاپ */
@media (max-width: 1199.98px) {
    .site-menu.d-none.d-xl-block {
        display: none !important;
    }
}

/* بقیه استایل‌های RTL بدون display: flex */
.site-menu.main-menu > li {
    direction: rtl !important;
    text-align: right !important;
}

.site-menu.main-menu > li > a {
    direction: rtl !important;
    text-align: right !important;
}

.menu > ul > li > ul {
    direction: rtl !important;
    text-align: right !important;
}

.menu > ul > li > ul > li {
    direction: rtl !important;
    text-align: right !important;
}

.menu > ul > li > ul > li a {
    direction: rtl !important;
    text-align: right !important;
}

.menu-container,
.menu-container * {
    direction: rtl !important;
}

.menu-mobile,
.menu > ul > li > ul.normal-sub,
.menu .show-on-mobile {
    direction: rtl !important;
    text-align: right !important;
}
/* ============================================================
   اصلاح RTL و text-align سراسری
   این بلاک تمام مشکلات text-align و direction رو حل می‌کنه
   ============================================================ */

/* ۱. body باید text-align: right باشه */
html,
body {
    text-align: right !important;
}

/* ۲. مترادف‌سازی کلاس‌ها - هر دو dr-rtl و dir-rtl */
.dr-rtl,
.dir-rtl {
    direction: rtl !important;
    text-align: right !important;
}

/* ۳. مترادف‌سازی کلاس‌ها - هر دو ltr و dir-ltr */
.ltr,
.dir-ltr {
    direction: ltr !important;
    text-align: left !important;
}

/* ۴. عناصر اصلی سایت باید text-align رو از body به ارث ببرن */
.site-wrap,
.wrapper-body,
.site-navbar,
.container,
.container-fluid,
.row,
section,
header,
footer,
main,
article,
aside {
    text-align: inherit;
}

/* ۵. اما عناصری که در RTL باید راست‌چین باشن */
.site-logo,
.site-menu,
.navbar-nav,
.product-title,
.product-list-item,
.sidebar-product h5,
.summary-spec .spec-item,
.luxury-title,
.luxury-intro,
.luxury-info-box {
    text-align: right !important;
}

/* ۶. عناصری که باید چپ‌چین بمونن */
.text-left,
[dir="ltr"],
input[type="tel"],
input[type="email"],
input[type="number"],
.price,
.j_separatorToman,
.j_separator,
.j_sprToman,
.pscope {
    direction: ltr !important;
    text-align: left !important;
}

/* ۷. اصلاح sidebar ها */
.sidebar-content,
.sidebar-product,
.sidebar-footer,
.price-box {
    text-align: right !important;
}

/* ۸. اصلاح اسلایدر */
.main-slider,
.main-slider-item,
.owl-carousel,
.owl-stage,
.owl-item {
    text-align: right !important;
}

/* ۹. اصلاح فوتر */
.footer-section,
.bottom-footer,
.feature-icon,
.footer-links li a,
.footer-download {
    text-align: right !important;
}

/* ۱۰. اصلاح تب‌های محصول */
.luxury-tabs,
.luxury-tabs .nav-link,
.tab-content,
.tab-pane,
.tab-pane p,
.tab-pane li {
    text-align: right !important;
}

.tab-pane p {
    text-align: justify !important;
}
/* ============================================================ */
/* مخفی کردن بج دسکتاپ در موبایل و برعکس */
/* ============================================================ */
@media (max-width: 768px) {
    #shopping-count {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
    }
    #shopping-count-mobile {
        display: flex !important;
        visibility: visible !important;
    }
}

@media (min-width: 769px) {
    #shopping-count-mobile {
        display: none !important;
        visibility: hidden !important;
    }
}
/* ============================================================
   راه‌حل قطعی چسبیدن نوار پایین و باکس خرید در موبایل
   نسخه نهایی - فایرفاکس-فرندلی (بدون transform روی المان‌های fixed)
   تست‌شده برای اسنپ‌پی، دیجی‌پی، تارا، کروم، فایرفاکس و مرورگرهای in-app
   ============================================================ */

@media (max-width: 768px) {

    /* ============================================================
       ۱. پاک‌سازی Stacking Contextهای مزاحم
       ============================================================ */
    
    html, body {
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-perspective: none !important;
        perspective: none !important;
        -webkit-filter: none !important;
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        will-change: auto !important;
        contain: none !important;
        overflow-x: hidden !important;
        position: relative !important;
        text-align: right !important;
    }

    .site-wrap,
    .wrapper-body,
    .site-wrap > .wrapper-body {
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-perspective: none !important;
        perspective: none !important;
        will-change: auto !important;
        contain: none !important;
    }

    .site-navbar,
    .site-navbar.is-sticky,
    header.site-navbar,
    .header-v2 {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-perspective: none !important;
        perspective: none !important;
        will-change: auto !important;
    }

    .like,
    .product-direction,
    .product-direction button,
    .luxury-product-images,
    .luxury-product-info {
        -webkit-transform: none !important;
        transform: none !important;
    }

    /* ============================================================
       ۲. نوار پایین (bottom-navigation) - نسخه فایرفاکس-فرندلی
       ============================================================ */
    
    html body .bottom-navigation,
    html body .bottom-navigation.show-xs.d-flex,
    .bottom-navigation {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        
        z-index: 2147483647 !important;
        
        background: #ffffff !important;
        border-top: 1px solid #e0e0e0 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important;
        
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        will-change: auto !important;
        contain: none !important;
        box-sizing: border-box !important;
        overscroll-behavior: none !important;
        
        padding-bottom: 10px !important;
    }

    @supports (padding: env(safe-area-inset-bottom)) {
        html body .bottom-navigation {
            padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        }
    }

    html body .bottom-navigation > a {
        flex: 1 1 25% !important;
        max-width: 25% !important;
        text-align: center !important;
        text-decoration: none !important;
        font-size: 0.7rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 6px 2px !important;
        box-sizing: border-box !important;
        position: relative !important;
        -webkit-transform: none !important;
        transform: none !important;
    }

    html body .bottom-navigation > a i {
        font-size: 1.4rem !important;
        line-height: 1 !important;
        display: block !important;
        color: inherit !important;
    }

    html body .bottom-navigation > a span {
        line-height: 1.4 !important;
        white-space: nowrap !important;
        display: block !important;
        margin-top: 2px !important;
        color: inherit !important;
    }

    html body #shopping-count-mobile {
        position: absolute !important;
        top: 2px !important;
        right: 20% !important;
        background: #e74c3c !important;
        height: 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        font-size: 12px !important;
        text-align: center !important;
        line-height: 1 !important;
        padding: 0 !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: 'dana', 'Dana', 'Dana FaNum', Tahoma, sans-serif !important;
    }

    /* ============================================================
       ۳. باکس خرید محصول - نسخه فایرفاکس-فرندلی
       ============================================================ */
    
    html body .luxury-buy-box {
        position: fixed !important;
        bottom: 85px !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        
        z-index: 2147483646 !important;
        
        background: #ffffff !important;
        padding: 8px 10px !important;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.08) !important;
        border-top: 1px solid #f0f0f0 !important;
        height: 62px !important;
        
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        
        will-change: auto !important;
        contain: none !important;
        overscroll-behavior: none !important;
    }

    @supports (padding: env(safe-area-inset-bottom)) {
        html body .luxury-buy-box {
            bottom: calc(85px + env(safe-area-inset-bottom)) !important;
        }
    }

    html body .luxury-buy-box .luxury-buy-box {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        z-index: auto !important;
    }

    html body .luxury-buy-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 46px !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #d4af37, #b8860b) !important;
        color: #1a1a2e !important;
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        margin: 0 !important;
        padding: 0 15px !important;
        border: none !important;
        box-shadow: 0 3px 10px rgba(184, 134, 11, 0.25) !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }

    /* ============================================================
       ۴. فاصله انتهای body
       ============================================================ */
    
    html body {
        padding-bottom: 160px !important;
        min-height: 100vh !important;
    }

    @supports (padding: env(safe-area-inset-bottom)) {
        html body {
            padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
        }
    }

    @supports (height: 100dvh) {
        html body {
            min-height: 100dvh !important;
        }
    }

    /* ============================================================
       ۵. سایدبارها و مودال‌ها
       ============================================================ */
    
    html body #sidebar,
    html body #userProfiler {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        -webkit-transform: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    @supports (height: 100dvh) {
        html body #sidebar,
        html body #userProfiler {
            height: 100dvh !important;
        }
    }

    html body .modal,
    html body .modal-dialog {
        position: fixed !important;
        -webkit-transform: none !important;
        transform: none !important;
    }

    /* ============================================================
       ۶. رفع مشکل backdrop-filter هدر
       ============================================================ */
    
    .site-navbar,
    .site-navbar.is-sticky {
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ============================================================
   ۷. دسکتاپ: مخفی کردن نوار پایین
   ============================================================ */
@media (min-width: 769px) {
    html body .bottom-navigation,
    html body .bottom-navigation.show-xs.d-flex {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -99999px !important;
    }
}