/* Dukhoon V99 — mobile header: anchor brand to far LEFT and menu + bell to far RIGHT.
   Minimal override after V98; no impact on notification logic or desktop layout. */
@media screen and (max-width: 760px) {
  html body header.top .wrap.nav {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 6px 0 !important;
    display: block !important;
  }
  html body header.top .dk95-header-inner,
  html body header.top .dk96-heading-cluster {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  /* Exact placement, independent of older RTL flex order/margin rules. */
  html body header.top .dk96-heading-cluster > .brand {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 148px) !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    direction: rtl !important;
    white-space: nowrap !important;
  }
  html body header.top .dk96-heading-cluster > .dk96-action-cluster {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    direction: rtl !important;
  }
  html body header.top .dk96-heading-cluster > .brand .brand-logo {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    flex: 0 0 34px !important;
    object-fit: contain !important;
  }
  html body header.top .dk96-heading-cluster > .brand .brand-text {
    min-width: 0 !important;
    max-width: 110px !important;
  }
  html body header.top .dk96-heading-cluster > .brand .brand-text strong {
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: right !important;
  }
  html body header.top .dk96-heading-cluster > .brand .brand-text small { display: none !important; }
  /* Keep the dropdown anchored to the viewport, not clipped by the header. */
  html body header.top .dk96-action-cluster .dk94-menu > .nav-links {
    position: fixed !important;
    top: 54px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 66px) !important;
    overflow-y: auto !important;
  }
}
@media screen and (max-width: 360px) {
  html body header.top .dk96-heading-cluster > .brand { max-width: calc(100% - 132px) !important; gap: 3px !important; }
  html body header.top .dk96-heading-cluster > .brand .brand-logo { width: 28px !important; height: 28px !important; min-width: 28px !important; flex-basis: 28px !important; }
  html body header.top .dk96-heading-cluster > .brand .brand-text strong { font-size: 10px !important; }
}