/* ═══════════════════════════════════════════
   Header1
   ═══════════════════════════════════════════ */
#header1 { font-family: inherit; }

#header1 .h1-topbar { padding: 8px 0; }
#header1 .h1-topbar .container { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
[dir="rtl"] #header1 .h1-topbar .container { flex-direction: row-reverse; }

#header1 .h1-search { position: relative; flex: 1; max-width: 320px; }
#header1 .h1-search input { width: 100%; border: 1px solid #ddd; border-radius: 20px; height: 36px; font-size: 13px; outline: none; background: #fff; }
[dir="rtl"] #header1 .h1-search input { padding: 0 40px 0 14px; }
[dir="ltr"] #header1 .h1-search input { padding: 0 14px 0 40px; }
#header1 .h1-search-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #999; cursor: pointer; font-size: 13px; }
[dir="rtl"] #header1 .h1-search-btn { right: 13px; }
[dir="ltr"] #header1 .h1-search-btn { left: 13px; }

#header1 .h1-lang { height: 32px; padding: 0 14px; border: 1.5px solid var(--default-color); border-radius: 16px; color: var(--default-color) !important; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none !important; white-space: nowrap; flex-shrink: 0; }

#header1 .h1-navbar { background: var(--bg-default); border-radius: 50px; padding: 6px 16px; margin-bottom: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.06); flex-wrap: nowrap; }
#header1 .h1-pill { display: flex; align-items: center; flex-shrink: 0; gap: 10px; }

#header1 .h1-toggler { width: 36px; height: 36px; border-radius: 8px; background: var(--default-color); color: #fff; border: none; display: none; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

#header1 .h1-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 18px; border-radius: 20px; font-size: 13px; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: opacity .2s; border: 1.5px solid transparent; }
#header1 .h1-btn:hover { opacity: .85; }
#header1 .h1-btn--ghost { color: var(--default-color) !important; border-color: var(--default-color); background: transparent; }
#header1 .h1-btn--solid { background: var(--default-color); color: #fff !important; border-color: var(--default-color); }

#header1 .h1-bell { color: var(--default-color) !important; font-size: 17px; position: relative; text-decoration: none !important; }
#header1 .h1-bell .h1-badge { position: absolute; top: -5px; inset-inline-end: -6px; background: #e74c3c; color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; display: flex; align-items: center; justify-content: center; }

#header1 .h1-nav-item { border-bottom: 1px solid rgba(0,0,0,.06); }

@media (max-width: 991px) {
    #header1 { overflow-x: hidden; }
    #header1 .h1-topbar { padding: 8px 12px; }
    #header1 .h1-topbar .container { padding: 0; max-width: 100%; }
    #header1 .h1-topbar .h1-search { max-width: 100%; }
    #header1 .h1-navbar { background: transparent; border-radius: 0; box-shadow: none; flex-wrap: wrap; padding: 0; margin: 0 8px 8px; }
    #header1 .h1-pill { width: 100%; justify-content: space-between; background: var(--bg-default); border-radius: 14px; padding: 6px 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
    #header1 .h1-toggler { display: flex; }
    #header1 .navbar-collapse { width: 100%; background: #fff; border-radius: 14px; margin-top: 6px; padding: 4px 10px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
    #header1 .h1-auth { padding: 12px 4px 4px; border-top: 1px solid rgba(0,0,0,.08); display: flex; gap: 8px; justify-content: center; }
    #header1 .h1-btn { flex: 1; }
}
@media (min-width: 992px) {
    #header1 .h1-nav-item { border-bottom: none; }
    #header1 .h1-auth { display: flex; align-items: center; gap: 8px; }
    #header1 .dropdown:hover > .dropdown-menu { display: block; }
    #header1 .navbar-nav .nav-item { position: relative; }
    #header1 .navbar-nav .dropdown-menu { position: absolute; top: 100%; min-width: 180px; }
    [dir="rtl"] #header1 .navbar-nav .dropdown-menu { right: 0; left: auto; }
    [dir="ltr"] #header1 .navbar-nav .dropdown-menu { left: 0; right: auto; }
    #header1 .h1-auth .dropdown { position: relative; }
    [dir="rtl"] #header1 .h1-auth .dropdown-menu { right: 0; left: auto; }
    [dir="ltr"] #header1 .h1-auth .dropdown-menu { left: 0; right: auto; }
}


/* ═══════════════════════════════════════════
   Header2
   ═══════════════════════════════════════════ */
#header2 { font-family: inherit; }

#header2 .h2-topbar { background: var(--default-color); padding: 10px 0; }
#header2 .h2-topbar .container { display: flex; align-items: center; gap: 8px; }

#header2 .h2-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 20px; border-radius: 20px; font-size: 13px; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: opacity .2s; border: 1.5px solid transparent; }
#header2 .h2-btn:hover { opacity: .85; }
#header2 .h2-btn--outline { border-color: rgba(255,255,255,.8); color: #fff !important; background: transparent; }
#header2 .h2-btn--fill { background: #fff; color: var(--default-color) !important; font-weight: 600; border-color: #fff; }

#header2 .h2-notif { color: #fff !important; font-size: 18px; position: relative; text-decoration: none !important; margin-inline-start: auto; }
#header2 .h2-notif .h2-badge { position: absolute; top: -5px; inset-inline-end: -6px; background: #e74c3c; color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; display: flex; align-items: center; justify-content: center; }

#header2 .h2-nav { background: #fff; padding: 6px 0; box-shadow: 0 2px 8px rgba(0,0,0,.05); }

#header2 .h2-lang { height: 32px; padding: 0 12px; border: 1.5px solid var(--default-color); border-radius: 16px; color: var(--default-color) !important; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none !important; white-space: nowrap; flex-shrink: 0; }

#header2 .h2-toggler { width: 36px; height: 36px; border-radius: 8px; background: var(--default-color); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

#header2 .h2-mobile-ctrls { display: none; align-items: center; gap: 6px; }
[dir="rtl"] #header2 .h2-mobile-ctrls { margin-right: auto; }
[dir="ltr"] #header2 .h2-mobile-ctrls { margin-left: auto; }

#header2 .h2-search { position: relative; }
#header2 .h2-search input { border: 1px solid #ddd; border-radius: 20px; height: 36px; font-size: 13px; width: 180px; outline: none; }
[dir="rtl"] #header2 .h2-search input { padding: 0 40px 0 14px; }
[dir="ltr"] #header2 .h2-search input { padding: 0 14px 0 40px; }
#header2 .h2-search .h2-search-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #999; cursor: pointer; font-size: 13px; }
[dir="rtl"] #header2 .h2-search .h2-search-btn { right: 13px; }
[dir="ltr"] #header2 .h2-search .h2-search-btn { left: 13px; }

#header2 .h2-desktop-tools { display: flex; align-items: center; gap: 10px; }
#header2 .h2-mobile-tools { display: none; }
#header2 .h2-nav-item { border-bottom: 1px solid #f0f0f0; }

@media (max-width: 991px) {
    #header2 .h2-topbar { padding: 12px 16px; }
    #header2 .h2-topbar .container { padding: 0; }
    #header2 .h2-topbar .dropdown { flex: 1; }
    #header2 .h2-topbar .dropdown > a { width: 100%; }
    #header2 .h2-topbar .h2-btn--fill { flex: 1; }
    #header2 .h2-topbar .h2-btn { font-size: 12px; padding: 6px 10px; }
    #header2 .h2-mobile-ctrls { display: flex; }
    #header2 .h2-desktop-tools { display: none; }
    #header2 .h2-mobile-tools { display: block; padding: 10px 4px 14px; }
    #header2 .h2-mobile-tools .h2-search input { width: 100%; }
    #header2 .h2-mobile-tools .h2-search { width: 100%; }
    #header2 .navbar-brand { padding: 0 !important; }
}
@media (min-width: 992px) {
    #header2 .h2-nav-item { border-bottom: none; }
    #header2 .dropdown:hover > .dropdown-menu { display: block; }
    #header2 .navbar-nav .nav-item { position: relative; }
    #header2 .navbar-nav .dropdown-menu { position: absolute; top: 100%; min-width: 180px; }
    [dir="rtl"] #header2 .navbar-nav .dropdown-menu { right: 0; left: auto; }
    [dir="ltr"] #header2 .navbar-nav .dropdown-menu { left: 0; right: auto; }
    #header2 .h2-topbar .dropdown { position: relative; }
    [dir="rtl"] #header2 .h2-topbar .dropdown-menu { right: 0; left: auto; }
    [dir="ltr"] #header2 .h2-topbar .dropdown-menu { left: 0; right: auto; }
}