/* AlKhutaa Pro Core 1.8.6 — canonical Asharq mobile menu. */
:root {
  --alk-east-bg: #050505;
  --alk-east-surface: #0b0b0b;
  --alk-east-surface-hover: #111;
  --alk-east-line: #242424;
  --alk-east-text: #f6f6f6;
  --alk-east-muted: #aaa;
  --alk-east-accent: #ff5a1f;
  --alk-east-font-size: 17px;
  --alk-east-icon-size: 21px;
  --alk-east-logo-width: 260px;
}

html.alk-east-open,
html.alk-east-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.alk-east-menu,
.alk-east-menu *,
.alk-east-backdrop {
  box-sizing: border-box;
}

.alk-east-menu[hidden],
.alk-east-backdrop[hidden] {
  display: none !important;
}

.alk-east-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(0, 0, 0, .64);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.alk-east-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.alk-east-menu {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: flex;
  width: 100vw;
  max-width: 100%;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  background: var(--alk-east-bg);
  color: var(--alk-east-text);
  font-family: var(--khutaa-font-menu, Arial, Tahoma, sans-serif);
  font-size: var(--alk-east-font-size);
  line-height: 1.5;
  opacity: .98;
  pointer-events: none;
  transform: translateY(-104%);
  transition: transform .34s cubic-bezier(.2, .75, .2, 1), opacity .2s ease;
  isolation: isolate;
}

.alk-east-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.alk-east-head {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 136px;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  grid-template-areas: "close brand theme";
  align-items: center;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) 15px 14px;
  border-bottom: 1px solid var(--alk-east-line);
  background: var(--alk-east-bg);
}

.alk-east-close,
.alk-east-theme-toggle {
  display: inline-flex;
  width: 42px;
  min-width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #333;
  background: #111;
  color: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.alk-east-close {
  grid-area: close;
  justify-self: end;
  border-radius: 4px;
}

.alk-east-close svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alk-east-brand {
  grid-area: brand;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}

.alk-east-brand img {
  display: block;
  width: min(var(--alk-east-logo-width), 100%);
  max-width: 100%;
  height: 96px;
  max-height: 96px;
  object-fit: contain;
}

.alk-east-brand strong {
  overflow: hidden;
  color: #fff;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alk-east-theme {
  grid-area: theme;
  display: flex;
  justify-self: start;
  align-items: center;
}

.alk-east-theme-toggle {
  border-radius: 50%;
}

.alk-east-close:hover,
.alk-east-close:focus-visible,
.alk-east-theme-toggle:hover,
.alk-east-theme-toggle:focus-visible {
  border-color: var(--alk-east-accent);
  color: var(--alk-east-accent);
  outline: 0;
}

.alk-east-theme-toggle__icon,
.alk-east-theme-toggle__icon svg {
  width: 22px;
  height: 22px;
}

.alk-east-theme-toggle__icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html:not([data-khutaa-theme="dark"]) .alk-east-theme-toggle .khutaa-theme-toggle__icon--sun,
html[data-khutaa-theme="dark"] .alk-east-theme-toggle .khutaa-theme-toggle__icon--moon {
  display: inline-grid;
  visibility: visible;
  opacity: 1;
}

html:not([data-khutaa-theme="dark"]) .alk-east-theme-toggle .khutaa-theme-toggle__icon--moon,
html[data-khutaa-theme="dark"] .alk-east-theme-toggle .khutaa-theme-toggle__icon--sun {
  display: none;
}

.alk-east-quick-actions {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(108px, 220px) max-content;
  grid-template-areas: "live apps";
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 12px 14px;
  overflow: visible;
  border-bottom: 1px solid var(--alk-east-line);
  background: #080808;
  direction: ltr;
}

/* The Asharq store buttons are isolated from the reusable buttons module.
 * This avoids its mobile horizontal-scroller and RTL initial scroll offset. */
.alk-east-quick-actions .alk-east-apps {
  grid-area: apps;
  display: block;
  width: max-content;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  direction: rtl;
}

.alk-east-store-list {
  display: flex;
  width: max-content;
  min-width: max-content;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.alk-east-store-button {
  display: inline-flex;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid #3b3b3b;
  border-radius: 50%;
  background: #111;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .28);
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

.alk-east-store-button--appstore { border-color: #4b4b4b; background: #111827; }
.alk-east-store-button--googleplay { border-color: #34a853; background: #0f9d58; }
.alk-east-store-button--appgallery { border-color: #e41f2b; background: #e41f2b; }

.alk-east-store-button:hover,
.alk-east-store-button:focus-visible {
  border-color: var(--alk-east-accent);
  filter: brightness(1.08);
  transform: translateY(-1px);
  outline: 0;
}

.alk-east-store-button__icon {
  display: inline-flex;
  width: 24px;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}

.alk-east-store-button--appstore .alk-east-store-button__icon {
  width: 22px;
  min-width: 22px;
  height: 22px;
}

.alk-east-store-button--googleplay .alk-east-store-button__icon {
  width: 27px;
  min-width: 27px;
  height: 27px;
}

.alk-east-store-button--appgallery .alk-east-store-button__icon {
  width: 23px;
  min-width: 23px;
  height: 23px;
}

.alk-east-store-button__icon svg,
.alk-east-store-button__icon .alk-store-brand-icon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.alk-east-store-button__icon .alk-store-brand-icon,
.alk-east-store-button__icon .alk-store-brand-icon * {
  stroke: none;
}

.alk-east-quick-actions .alk-east-live {
  grid-area: live;
  display: block;
  width: 220px;
  max-width: 220px;
  min-width: 108px;
  direction: rtl;
}

.alk-east-live-button {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 108px;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid #ff4d57;
  border-radius: 7px;
  background: linear-gradient(135deg, #bd1019, #ed1c24);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(227, 27, 35, .28);
}

.alk-east-live-button::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.alk-east-live-button:hover,
.alk-east-live-button:focus-visible {
  filter: brightness(1.08);
  outline: 0;
}

.alk-east-live-button__pulse {
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
}

.alk-east-live-button__icon {
  display: inline-flex;
  width: 23px;
  min-width: 23px;
  height: 23px;
  align-items: center;
  justify-content: center;
}

.alk-east-live-button__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alk-east-scroll {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #444 #090909;
  -webkit-overflow-scrolling: touch;
}

.alk-east-nav,
.alk-east-list {
  width: 100%;
  margin: 0;
  padding: 0;
}

.alk-east-nav { flex: 0 0 auto; }
.alk-east-list { list-style: none; }

.alk-east-item {
  position: relative;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--alk-east-line);
}

.alk-east-item__row {
  display: flex;
  min-height: 54px;
  align-items: stretch;
}

.alk-east-item__link {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  padding: 11px 17px;
  color: var(--alk-east-text);
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.alk-east-item__link:hover,
.alk-east-item__link:focus-visible,
.alk-east-item.is-current > .alk-east-item__row > .alk-east-item__link {
  background: var(--alk-east-surface-hover);
  color: var(--alk-east-accent);
  outline: 0;
}

.alk-east-item__icon {
  display: inline-flex;
  width: var(--alk-east-icon-size);
  min-width: var(--alk-east-icon-size);
  height: var(--alk-east-icon-size);
  align-items: center;
  justify-content: center;
  color: var(--alk-east-accent);
}

.alk-east-item__icon > svg,
.alk-east-item__icon .alk-menu-item-icon,
.alk-east-item__icon .alk-menu-item-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.alk-east-item__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alk-east-item__toggle {
  display: inline-flex;
  width: 54px;
  min-width: 54px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--alk-east-line);
  background: transparent;
  color: #bdbdbd;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.alk-east-item__toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.alk-east-item.is-submenu-open > .alk-east-item__row .alk-east-item__toggle svg {
  transform: rotate(90deg);
}

.alk-east-sublist {
  display: none;
  border-top: 1px solid var(--alk-east-line);
  background: var(--alk-east-surface);
}

.alk-east-item.is-submenu-open > .alk-east-sublist { display: block; }

.alk-east-sublist .alk-east-item__link {
  min-height: 49px;
  padding-inline-start: calc(17px + 22px * var(--alk-east-depth, 1));
  color: #d5d5d5;
  font-size: .94em;
  font-weight: 500;
}

.alk-east-sublist[data-depth="1"] { --alk-east-depth: 1; }
.alk-east-sublist[data-depth="2"] { --alk-east-depth: 2; }
.alk-east-sublist[data-depth="3"] { --alk-east-depth: 3; }
.alk-east-sublist[data-depth="4"] { --alk-east-depth: 4; }

.alk-east-footer {
  display: grid;
  gap: 0;
  margin-top: auto;
  padding: 18px 15px calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--alk-east-line);
  background: #080808;
}

.alk-east-footer__title {
  display: block;
  margin: 0 0 11px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.alk-east-social .alk-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.alk-east-social .alk-social-link {
  display: inline-flex;
  width: 40px;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid #383838;
  border-radius: 50%;
  background: #111;
  color: #fff;
  box-shadow: none;
}

.alk-east-social .alk-social-link:hover,
.alk-east-social .alk-social-link:focus-visible {
  border-color: var(--alk-east-accent);
  color: var(--alk-east-accent);
  outline: 0;
}

.alk-east-social .alk-social-link svg {
  width: 19px;
  height: 19px;
}

.alk-east-social .alk-social-copy,
.alk-east-social .alk-social-label,
.alk-east-social .alk-social-count {
  display: none;
}

@media (min-width: 901px) {
  .alk-east-menu,
  .alk-east-backdrop {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .alk-east-head {
    min-height: 124px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 7px;
    padding-inline: 10px;
  }

  .alk-east-brand img {
    height: 84px;
    max-height: 84px;
  }

  .alk-east-close,
  .alk-east-theme-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .alk-east-quick-actions {
    gap: 8px;
    padding-inline: 9px;
  }

  .alk-east-store-list { gap: 7px; }

  .alk-east-store-button {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    flex-basis: 48px;
  }

  .alk-east-quick-actions { grid-template-columns: minmax(108px, 180px) max-content; }

  .alk-east-quick-actions .alk-east-live {
    width: 180px;
    max-width: 180px;
  }

  .alk-east-live-button {
    min-width: 0;
    height: 48px;
    gap: 5px;
    padding-inline: 9px;
    font-size: 11px;
  }

  .alk-east-item__link { padding-inline: 14px; }
}

@media (max-width: 340px) {
  .alk-east-quick-actions {
    gap: 7px;
    padding-inline: 7px;
  }

  .alk-east-store-list { gap: 6px; }

  .alk-east-store-button {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    flex-basis: 44px;
  }

  .alk-east-quick-actions { grid-template-columns: minmax(100px, 150px) max-content; }

  .alk-east-quick-actions .alk-east-live {
    width: 150px;
    max-width: 150px;
    min-width: 100px;
  }

  .alk-east-live-button__icon { display: none; }
  .alk-east-live-button { min-width: 0; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .alk-east-menu,
  .alk-east-backdrop,
  .alk-east-item__toggle svg,
  .alk-east-store-button {
    transition: none;
  }
}