/**
 * Mobile header layout aligned with https://lebara.sa/ar/online-recharge
 * Logo on one side; quick-recharge (pink circle), login pill, hamburger on the other.
 */

#header .header-style {
  box-shadow: 0 8px 20px rgba(23, 33, 66, 0.12) !important;
}

@media screen and (max-width: 1024px) {
  #header .header-style {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
  }

  #header .header-style > .container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding-inline: 12px;
    box-sizing: border-box;
  }

  #header .flex-between.full-height-desktop {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 8px;
  }

  #header .flex-between .burger {
    flex: 0 0 auto;
    order: 3;
    z-index: 8;
  }

  /* Avoid double close icon: keep only drawer close button when menu is open */
  #header .flex-between > .burger.opened {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #header .flex-between h1 {
    order: 1;
    margin: 0 !important;
    flex: 0 0 auto;
    z-index: 8;
  }

  #header .flex-between nav#header-mobile {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    z-index: 4;
    left: auto !important;
    right: 0 !important;
  }

  #header #header-mobile,
  #header #header-mobile.opened {
    left: auto !important;
    right: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
  }

  #header #header-mobile:not(.opened) {
    pointer-events: none;
  }

  #header #header-mobile.opened {
    pointer-events: auto;
  }

  /* When drawer is open, hide top row controls behind it */
  #header .flex-between.full-height-desktop.menu-open > h1,
  #header .flex-between.full-height-desktop.menu-open > .flex-column-end {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #header .flex-between.full-height-desktop.menu-open > nav#header-mobile {
    flex: 1 1 100% !important;
  }

  /* Hard hide overlapping top controls when drawer is open */
  #header.menu-open-mobile .header-style > .container > .flex-between > h1 {
    display: none !important;
  }

  #header.menu-open-mobile .header-style > .container > .flex-column-end {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Fallback selectors for pages with slightly different header wrappers */
  #header.menu-open-mobile .flex-column-end,
  #header #header-mobile.opened ~ .flex-column-end {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #header.menu-open-mobile #header-mobile .header-mobile-wrapper {
    margin-top: 16px !important;
  }

  #header .flex-column-end {
    position: absolute;
    inset-inline-end: 48px;
    top: 50%;
    transform: translateY(-50%);
    height: auto !important;
    width: auto;
    max-width: calc(100% - 120px);
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    z-index: 10;
    pointer-events: none;
    background: transparent;
  }

  #header .flex-column-end .topBar {
    display: none !important;
  }

  #header .flex-column-end .flex-end {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    max-height: none !important;
    pointer-events: auto;
  }

  #header .flex-column-end .flex-end > * {
    pointer-events: auto;
  }

  /* Header search icon removed from top bar (available inside mobile menu drawer) */
  #header .expandable-search {
    display: none !important;
  }

  /* "اشحن" as compact pink quick-action like lebara.sa lightning */
  #header a.lebara-button.primary.small[href*="online-recharge"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #ff7eb3 0%, #e91e8c 55%, #d81b60 100%) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(233, 30, 140, 0.35);
    color: transparent !important;
    overflow: hidden;
    font-size: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0;
  }

  #header a.lebara-button.primary.small[href*="online-recharge"] img {
    width: 22px;
    height: 22px;
    margin: 0 !important;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
  }

  /* Keep the same mobile header visual order for AR and EN */
  #header .header-style > .container,
  #header .flex-between.full-height-desktop {
    direction: ltr !important;
  }

  #header .flex-between h1 {
    order: 1 !important;
  }

  #header .flex-between nav#header-mobile {
    order: 2 !important;
  }

  #header .flex-between .burger {
    order: 3 !important;
  }

  #header .header-style > .container > .flex-between > .burger,
  #header #header-mobile .burger.opened.mobile-tablet-only {
    left: auto !important;
    right: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
  }

  /* Fine-tune close icon placement in opened mobile drawer */
  #header #header-mobile .burger.opened.mobile-tablet-only {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    margin: 0 !important;
    z-index: 12 !important;
  }

  /* Hide drawer search row to match target design */
  #header #header-mobile .search-header-wrapper.mobile-only {
    display: none !important;
  }
}