/* =========================================================
   Mobilltna UI — clean rewrite (no overlapping lines)
   ========================================================= */

:root {
  --tryit-cyan: #af0000;
  --tryit-blue: #af0000;
  --tryit-coral: #e85a5a;
  --tryit-text: #1f2937;
  --tryit-muted: #9ca3af;
  --tryit-line: #dbe1e8;
  --tryit-bg: #eef2f6;
  --tryit-white: #ffffff;
  --tryit-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  --tryit-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --tryit-radius: 999px;
}

body.tryit-ui {
  background: var(--tryit-bg);
}

/* ========== Fixed floating header (one pill, no Jannah fixed-nav clone) ==========
   NOTE: overflow-x:hidden on wrappers breaks position:sticky — use fixed instead. */

/* Kill sideways empty space — never force overflow:visible on wrappers
   (Jannah #tie-wrapper:after uses left:-50% / width:200% when menu opens) */
html.tryit-preview,
html body.tryit-ui {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Do NOT overflow-hide #tie-container — Jannah puts side-aside-open on it
   and clipping there blocks the mobile menu panel. */
body.tryit-ui #tie-wrapper,
body.tryit-ui #tie-body,
body.tryit-ui .background-overlay {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body.tryit-ui #tie-container.tie-container,
body.tryit-ui .tie-container {
  overflow-x: visible !important;
  max-width: 100% !important;
}

body.tryit-ui #theme-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* left+right span the viewport; width:100% overflows when padding is added */
  width: auto !important;
  /* Below .side-aside (111+) and .tie-popup so menu/search work */
  z-index: 1000 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Reserve space so content doesn't slide under the fixed pill */
body.tryit-ui #tie-wrapper {
  padding-top: 60px !important;
}

@media (min-width: 992px) {
  body.tryit-ui #tie-wrapper {
    padding-top: 72px !important;
  }
}

/* Preview bar offset inside local mirror */
html.tryit-preview body.tryit-ui #theme-header {
  top: 44px !important;
}
html.tryit-preview body.tryit-ui #tie-wrapper {
  padding-top: 104px !important;
}

/*
 * Disable Jannah's fixed-nav clone: it pulls #main-nav out of flow,
 * leaves a huge gap, and shows #sticky-logo beside the main logo.
 * Sticky #theme-header alone is enough for the floating pill.
 */
body.tryit-ui #theme-header #main-nav.fixed-nav,
body.tryit-ui #theme-header .main-nav.fixed-nav,
body.tryit-ui #main-nav.fixed-nav,
body.tryit-ui .main-nav.fixed-nav {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  z-index: auto !important;
}

/* Only one logo inside the pill — never show sticky clone */
body.tryit-ui #sticky-logo,
body.tryit-ui #tie-sticky-logo,
body.tryit-ui #tie-sticky-logo-inverted,
body.tryit-ui .tie-sticky-logo,
body.tryit-ui #theme-header #sticky-logo,
body.tryit-ui #theme-header .logo-sticky,
body.tryit-ui #theme-header .sticky-logo {
  display: none !important;
}

/* Kill Jannah spacer / mask that reserves empty height under fixed nav */
body.tryit-ui #sticky-nav-marker,
body.tryit-ui #sticky-nav-mask,
body.tryit-ui .fixed-nav-space,
body.tryit-ui .main-nav-fixed-space,
body.tryit-ui .tie-fixed-nav-space {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tryit-ui #theme-header .main-nav-wrapper,
body.tryit-ui #theme-header .header-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  max-width: 100% !important;
}

/* Mobile menu + search must sit above sticky header */
body.tryit-ui .side-aside,
body.tryit-ui .side-aside.tryit-mobile-menu,
body.tryit-ui #tie-container.side-aside-open .side-aside {
  z-index: 10050 !important;
  pointer-events: auto !important;
}

body.tryit-ui .tie-popup,
body.tryit-ui .tie-popup-search-wrap,
body.tryit-ui #pop-up-live-search,
body.tryit-ui .live-search-popup {
  z-index: 10060 !important;
  pointer-events: auto !important;
}

body.tryit-ui #tie-container.side-aside-open #tie-wrapper:after {
  z-index: 10040 !important;
}

/* ========== Desktop header — Shape #1 ========== */
@media (min-width: 992px) {
  body.tryit-ui #theme-header,
  body.tryit-ui #theme-header .main-nav-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  body.tryit-ui #theme-header {
    padding: 10px 0 8px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    z-index: 1000 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  /* Match site content width (970px) — same borders as blocks below */
  body.tryit-ui #theme-header .main-nav-wrapper,
  body.tryit-ui #theme-header.is-stretch-header .main-nav-wrapper {
    width: 100% !important;
    max-width: 970px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  body.tryit-ui #theme-header .top-nav,
  body.tryit-ui #theme-header .header-content {
    display: none !important;
  }

  body.tryit-ui #theme-header .main-nav,
  body.tryit-ui #theme-header #main-nav,
  body.tryit-ui #theme-header.is-stretch-header .main-nav,
  body.tryit-ui #theme-header.is-stretch-header #main-nav {
    background: var(--tryit-white) !important;
    border-radius: var(--tryit-radius) !important;
    box-shadow: var(--tryit-shadow) !important;
    border: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px;
    overflow: hidden !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
  }

  body.tryit-ui #theme-header .main-nav > .container,
  body.tryit-ui #theme-header.is-stretch-header .main-nav > .container,
  body.tryit-ui #theme-header.is-stretch-header .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
  }

  body.tryit-ui #theme-header .main-menu-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    min-height: 56px;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.tryit-ui #theme-header .header-layout-1-logo {
    flex: 0 0 auto;
    margin: 0 !important;
    max-width: 180px !important;
  }

  body.tryit-ui #theme-header #menu-components-wrap {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100% !important;
    gap: 8px;
    overflow: hidden !important;
  }

  body.tryit-ui #theme-header .main-menu {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden !important;
  }

  body.tryit-ui #theme-header #main-nav-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    max-width: 100% !important;
  }

  body.tryit-ui #theme-header #main-nav-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    color: var(--tryit-text) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 8px 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  body.tryit-ui #theme-header #main-nav-menu > li > a .fa,
  body.tryit-ui #theme-header #main-nav-menu > li > a [class*="tie-icon"],
  body.tryit-ui #theme-header #main-nav-menu > li > a .menu-item-icon {
    color: var(--tryit-cyan) !important;
    margin: 0 !important;
  }

  body.tryit-ui #theme-header .components {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  body.tryit-ui #theme-header .components .tie-icon-search,
  body.tryit-ui #theme-header .components .tie-search-icon {
    color: #111 !important;
    font-size: 18px !important;
  }

  body.tryit-ui #theme-header .components .side-aside-nav-icon a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef1f5 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ========== Mobile header — Shape #6 ========== */
@media (max-width: 991px) {
  body.tryit-ui #theme-header {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 6px 12px 4px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    z-index: 1000 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    box-sizing: border-box !important;
  }

  body.tryit-ui #theme-header .top-nav {
    display: none !important;
  }

  /*
   * Layout was tuned for a taller header (often line-height:80px from theme options).
   * Keep ONE short pill in #main-nav; hide duplicate .header-content bar so no gap.
   */
  body.tryit-ui #theme-header.header-layout-1 .header-content,
  body.tryit-ui #theme-header.header-layout-3 .header-content,
  body.tryit-ui #theme-header.header-layout-4 .header-content {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.tryit-ui #theme-header .main-nav,
  body.tryit-ui #theme-header #main-nav {
    background: var(--tryit-white) !important;
    border-radius: var(--tryit-radius) !important;
    box-shadow: var(--tryit-shadow) !important;
    border: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
  }

  body.tryit-ui #theme-header .main-nav > .container,
  body.tryit-ui #theme-header .container {
    padding: 0 14px !important;
    max-width: 100% !important;
    height: auto !important;
    line-height: normal !important;
  }

  body.tryit-ui #theme-header .main-menu-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    gap: 8px;
    line-height: 1 !important;
  }

  /* Kill leftover top spacing under the shorter sticky pill */
  body.tryit-ui #content,
  body.tryit-ui .site-content,
  body.tryit-ui #main-content-row,
  body.tryit-ui .section-item.is-first-section,
  body.tryit-ui .section-wrapper.is-first-section,
  body.tryit-ui #tie-wrapper > div.container:first-of-type,
  body.tryit-ui .has-header-bg {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.tryit-ui .section-item.first-section,
  body.tryit-ui .is-first-section > .container,
  body.tryit-ui #theme-header + #content,
  body.tryit-ui #theme-header + .site-content {
    padding-top: 8px !important;
  }

  body.tryit-ui #theme-header #main-nav-menu,
  body.tryit-ui #theme-header .main-menu {
    display: none !important;
  }

  body.tryit-ui #theme-header .header-layout-1-logo,
  body.tryit-ui #theme-header #logo {
    flex: 1 1 auto;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  body.tryit-ui #theme-header .mobile-header-components,
  body.tryit-ui #theme-header #mobile-header-components-area_1,
  body.tryit-ui #theme-header #mobile-header-components-area_2 {
    flex: 0 0 auto;
    width: auto !important;
  }

  body.tryit-ui #theme-header .mobile-header-components a,
  body.tryit-ui #theme-header #mobile-menu-icon,
  body.tryit-ui #theme-header .tie-search-icon,
  body.tryit-ui #theme-header .change-skin {
    color: var(--tryit-cyan) !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 20 !important;
    cursor: pointer !important;
  }

  body.tryit-ui #theme-header .nav-icon,
  body.tryit-ui #theme-header .nav-icon:before,
  body.tryit-ui #theme-header .nav-icon:after {
    background-color: var(--tryit-cyan) !important;
  }
}

/* ========== Mobile menu overlay (Shape #4) — full-bleed, no empty column ========== */
@media (max-width: 991px) {
  /*
   * Broken before: transparent side-aside + max-width:480px centered wrapper
   * left a giant empty half where the site logo showed through (RTL).
   */
  body.tryit-ui .side-aside.tryit-mobile-menu,
  body.tryit-ui .side-aside.is-fullwidth.tryit-mobile-menu,
  body.tryit-ui .side-aside.appear-from-right.tryit-mobile-menu,
  body.tryit-ui .side-aside.appear-from-left.tryit-mobile-menu {
    position: fixed !important;
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    background: #fff !important;
    z-index: 10050 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    /* Closed by default; open state below wins via #tie-container.side-aside-open */
    transform: translate3d(100%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.tryit-ui .side-aside.tryit-mobile-menu.appear-from-left {
    transform: translate3d(-100%, 0, 0) !important;
  }

  /* Jannah adds side-aside-open on #tie-container — not on body */
  body.tryit-ui #tie-container.side-aside-open .side-aside.tryit-mobile-menu,
  body.tryit-ui #tie-container.side-aside-open .side-aside.tryit-mobile-menu.appear-from-right,
  body.tryit-ui #tie-container.side-aside-open .side-aside.tryit-mobile-menu.appear-from-left,
  body.tryit-ui .tie-container.side-aside-open .side-aside.tryit-mobile-menu {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  body.tryit-ui .side-aside.tryit-mobile-menu .side-aside-wrapper,
  body.tryit-ui .side-aside.is-fullwidth .side-aside-wrapper {
    background: #fff !important;
    color: var(--tryit-text) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 16px 28px !important;
    min-height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Soft top sheet look without leaving empty side columns */
  body.tryit-ui #tie-container.side-aside-open .side-aside.tryit-mobile-menu .side-aside-wrapper {
    border-radius: 20px 20px 0 0 !important;
    margin-top: 12px !important;
    min-height: calc(100% - 12px) !important;
  }

  /* Hide sticky header (logo) while menu is open — stops logo bleed on the right */
  body.tryit-ui #tie-container.side-aside-open #theme-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.tryit-ui #tie-container.side-aside-open #tie-wrapper,
  body.tryit-ui #tie-container.side-aside-open .tie-container,
  body.tryit-ui #tie-container.side-aside-open #tie-body {
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  body.tryit-ui .side-aside.tryit-mobile-menu #mobile-container {
    padding: 8px 6px 20px !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.tryit-ui .side-aside.tryit-mobile-menu .close-side-aside,
  body.tryit-ui .side-aside.tryit-mobile-menu .close-side-aside.tryit-close-ready {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #af0000 !important;
    left: 18px !important;
    right: auto !important;
    top: 18px !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: auto !important;
  }

  body.tryit-ui .side-aside.tryit-mobile-menu .close-side-aside:before,
  body.tryit-ui .side-aside.tryit-mobile-menu .close-side-aside:after {
    content: none !important;
    display: none !important;
  }

  body.tryit-ui .side-aside.tryit-mobile-menu .tryit-close-x {
    color: #fff !important;
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
  }
}

/* Desktop slide-aside: keep theme defaults (don't apply mobile full-bleed) */
@media (min-width: 992px) {
  body.tryit-ui .side-aside.tryit-mobile-menu .side-aside-wrapper {
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
}

body.tryit-ui .side-aside.tryit-mobile-menu #mobile-container {
  padding: 8px 6px 20px !important;
  display: block !important;
}

body.tryit-ui .side-aside.tryit-mobile-menu .close-side-aside,
body.tryit-ui .side-aside.tryit-mobile-menu .close-side-aside.tryit-close-ready {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #af0000 !important;
  left: 18px !important;
  right: auto !important;
  top: 18px !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

body.tryit-ui .side-aside.tryit-mobile-menu .close-side-aside:before,
body.tryit-ui .side-aside.tryit-mobile-menu .close-side-aside:after {
  content: none !important;
  display: none !important;
}

body.tryit-ui .side-aside.tryit-mobile-menu .tryit-close-x {
  color: #fff !important;
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
}

body.tryit-ui #mobile-search.tryit-mobile-search,
body.tryit-ui #mobile-search {
  text-align: center;
  margin: 40px 0 18px;
}

body.tryit-ui #mobile-search:before {
  content: "بحث";
  display: block;
  color: var(--tryit-muted);
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 500;
}

body.tryit-ui #mobile-search .search-form {
  position: relative;
  overflow: visible !important;
}

body.tryit-ui #mobile-search input[type="search"],
body.tryit-ui #mobile-search input[type="text"],
body.tryit-ui #mobile-search .search-field {
  width: 100% !important;
  float: none !important;
  height: 52px !important;
  border-radius: var(--tryit-radius) !important;
  border: 1px solid #eef0f3 !important;
  box-shadow: var(--tryit-shadow-sm) !important;
  padding: 0 22px 0 52px !important;
  text-align: right !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 14px !important;
}

body.tryit-ui #mobile-search input::placeholder {
  color: #b0b6bf !important;
}

body.tryit-ui #mobile-search .search-form:after,
body.tryit-ui #mobile-search .search-submit {
  color: #111 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 40px !important;
  height: 52px !important;
  line-height: 52px !important;
  top: 0 !important;
  left: 8px !important;
  right: auto !important;
  font-size: 18px !important;
}

body.tryit-ui #mobile-search .search-submit {
  font-size: 0 !important;
  z-index: 2;
}

body.tryit-ui #mobile-menu {
  border: 0 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

body.tryit-ui #mobile-menu.tryit-mobile-grid > ul,
body.tryit-ui #mobile-menu.tryit-mobile-grid .menu,
body.tryit-ui #mobile-menu.tryit-mobile-grid #mobile-custom-menu,
body.tryit-ui #mobile-menu.tryit-mobile-grid .menu-mobile-container > .menu {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  border: 0 !important;
}

body.tryit-ui #mobile-menu.tryit-mobile-grid .menu > li,
body.tryit-ui #mobile-menu.tryit-mobile-grid #mobile-custom-menu > li {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tryit-ui #mobile-menu.tryit-mobile-grid .menu > li > a,
body.tryit-ui #mobile-menu.tryit-mobile-grid #mobile-custom-menu > li > a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 112px;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: var(--tryit-shadow-sm) !important;
  color: #111 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 18px 10px !important;
  line-height: 1.3 !important;
  border: 0 !important;
}

body.tryit-ui #mobile-menu.tryit-mobile-grid .menu > li > a:hover,
body.tryit-ui #mobile-menu.tryit-mobile-grid #mobile-custom-menu > li > a:hover {
  opacity: 1 !important;
  color: #af0000 !important;
}

body.tryit-ui #mobile-menu .tryit-menu-ico {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  line-height: 1 !important;
  position: relative;
  color: #af0000 !important;
}

body.tryit-ui #mobile-menu .tryit-menu-ico:before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: #af0000;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* grid apps */
body.tryit-ui #mobile-menu .tryit-ico-apps:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z'/%3E%3C/svg%3E");
}

/* gamepad */
body.tryit-ui #mobile-menu .tryit-ico-games:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 8h12a4 4 0 0 1 4 4v2a4 4 0 0 1-4 4h-1.2l-1.4 2.1a1 1 0 0 1-1.7 0L12.3 18H11.7l-1.4 2.1a1 1 0 0 1-1.7 0L7.2 18H6a4 4 0 0 1-4-4v-2a4 4 0 0 1 4-4zm2 3v2h2v-2H8zm1-1h2v2H9V10zm7.5 1.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zm-2.5 2.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 8h12a4 4 0 0 1 4 4v2a4 4 0 0 1-4 4h-1.2l-1.4 2.1a1 1 0 0 1-1.7 0L12.3 18H11.7l-1.4 2.1a1 1 0 0 1-1.7 0L7.2 18H6a4 4 0 0 1-4-4v-2a4 4 0 0 1 4-4zm2 3v2h2v-2H8zm1-1h2v2H9V10zm7.5 1.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zm-2.5 2.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5z'/%3E%3C/svg%3E");
}

/* tv */
body.tryit-ui #mobile-menu .tryit-ico-tv:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm4 15h8v1H8v-1zM3 8v9h18V8H3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm4 15h8v1H8v-1zM3 8v9h18V8H3z'/%3E%3C/svg%3E");
}

/* bolt / articles */
body.tryit-ui #mobile-menu .tryit-ico-docs:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2L4 14h6l-1 8 11-14h-6l-1-6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2L4 14h6l-1 8 11-14h-6l-1-6z'/%3E%3C/svg%3E");
}

body.tryit-ui #mobile-menu .tryit-ico-star:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.9 6.6L22 10l-5 4.6L18.2 22 12 18.2 5.8 22 7 14.6 2 10l7.1-1.4L12 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.9 6.6L22 10l-5 4.6L18.2 22 12 18.2 5.8 22 7 14.6 2 10l7.1-1.4L12 2z'/%3E%3C/svg%3E");
}

body.tryit-ui #mobile-menu .mobile-arrows,
body.tryit-ui #mobile-menu .sub-menu {
  display: none !important;
}

body.tryit-ui .tryit-menu-links {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

body.tryit-ui .tryit-menu-links a {
  display: block;
  background: #f7f8fa !important;
  border-radius: var(--tryit-radius) !important;
  padding: 14px 18px !important;
  color: #9aa3af !important;
  text-align: right !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  border: 0 !important;
}

body.tryit-ui .tryit-menu-links a:hover {
  color: var(--tryit-cyan) !important;
}

/* ========== Block titles ========== */

/* Centered pill style — أحدث المقالات / مقالات ذات صلة / etc. */
body.tryit-ui .mag-box-title.tryit-title-centered,
body.tryit-ui .mag-box .mag-box-title.tryit-title-centered,
body.tryit-ui .mag-box-title.tryit-wrapped-title.tryit-title-centered {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 12px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  float: none !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
}

body.tryit-ui .mag-box-title.tryit-title-centered:before,
body.tryit-ui .mag-box-title.tryit-title-centered:after {
  content: none !important;
  display: none !important;
}

body.tryit-ui .mag-box-title.tryit-title-centered .tryit-title-line,
body.tryit-ui .mag-box-title.tryit-title-centered .tryit-title-line-before,
body.tryit-ui .mag-box-title.tryit-title-centered .tryit-title-line-after {
  flex: 1 1 auto !important;
  align-self: center !important;
  height: 1px !important;
  min-width: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--brand-color, var(--tryit-cyan)) 40%, var(--tryit-line)) !important;
  border: 0 !important;
  display: block !important;
}

body.tryit-ui .mag-box-title.tryit-title-centered h3,
body.tryit-ui .mag-box-title.tryit-title-centered h2,
body.tryit-ui .mag-box-title.tryit-title-centered h4 {
  position: static !important;
  float: none !important;
  flex: 0 0 auto !important;
  max-width: min(90%, 520px) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--tryit-white) !important;
  border: 1px solid var(--tryit-line) !important;
  border-radius: var(--tryit-radius) !important;
  color: var(--brand-color, var(--tryit-cyan)) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  z-index: 1;
  box-shadow: none !important;
  text-align: center;
}

body.tryit-ui .mag-box-title.tryit-title-centered h3:before,
body.tryit-ui .mag-box-title.tryit-title-centered h3:after {
  content: none !important;
  display: none !important;
}

body.tryit-ui .related-posts .mag-box-title.tryit-title-centered,
body.tryit-ui #related-posts .mag-box-title.tryit-title-centered {
  margin-top: 10px !important;
}

/* Apps-style titles: title pill | line | more pill (games + other blocks too) */
body.tryit-ui .mag-box-title.tryit-title-apps,
body.tryit-ui .mag-box .mag-box-title.tryit-title-apps {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  float: none !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps:before,
body.tryit-ui .mag-box-title.tryit-title-apps:after,
body.tryit-ui .mag-box div.mag-box-title.tryit-title-apps:before,
body.tryit-ui .mag-box div.mag-box-title.tryit-title-apps:after,
body.tryit-ui .block-head-1 .mag-box div.mag-box-title.tryit-title-apps:before,
body.tryit-ui .block-head-1 .mag-box div.mag-box-title.tryit-title-apps:after,
body.tryit-ui .block-head-3 .mag-box div.mag-box-title.tryit-title-apps:after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps h3 {
  position: static !important;
  float: none !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--tryit-white) !important;
  border: 1px solid var(--tryit-line) !important;
  border-radius: var(--tryit-radius) !important;
  color: var(--brand-color, var(--tryit-blue)) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  z-index: 1;
  box-shadow: none !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps h3:before,
body.tryit-ui .mag-box-title.tryit-title-apps h3:after {
  content: none !important;
  display: none !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps h3 a {
  color: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps h3 .tryit-title-icon,
body.tryit-ui .mag-box-title.tryit-title-apps h3 > span[class*="fa"],
body.tryit-ui .mag-box-title.tryit-title-apps h3 > span[class*="tie-icon"] {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand-color, var(--tryit-blue)) 16%, #fff);
  color: var(--brand-color, var(--tryit-blue)) !important;
  font-size: 12px !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

body.tryit-ui .mag-box-title.tryit-title-apps .tryit-title-line {
  flex: 1 1 auto !important;
  align-self: center !important;
  height: 1px !important;
  min-width: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--brand-color, var(--tryit-blue)) 40%, var(--tryit-line)) !important;
  border: 0 !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps .tie-alignright {
  position: static !important;
  float: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps .mag-box-options {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  gap: 0;
}

body.tryit-ui .mag-box-title.tryit-title-apps .block-more-button {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  background: var(--tryit-white) !important;
  border: 1px solid var(--tryit-line) !important;
  border-radius: var(--tryit-radius) !important;
  color: var(--brand-color, var(--tryit-blue)) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps .block-more-button:after {
  content: "\2039";
  font-size: 15px;
  line-height: 1;
}

body.tryit-ui .mag-box-title.tryit-title-apps .mag-box-filter-links,
body.tryit-ui .mag-box-title.tryit-title-apps .slider-arrow-nav {
  display: none !important;
}

/* ========== Section titles (centered pill + flanking flex lines) ========== */
body.tryit-ui .section-title.section-title-centered,
body.tryit-ui .section-title-centered {
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 14px !important;
  margin: 24px 0 28px !important;
  padding: 0 !important;
  font-size: inherit !important;
  place-content: unset !important;
  overflow: visible !important;
}

body.tryit-ui .section-title.section-title-centered:before,
body.tryit-ui .section-title.section-title-centered:after,
body.tryit-ui .section-title-centered:before,
body.tryit-ui .section-title-centered:after {
  content: "" !important;
  flex: 1 1 auto !important;
  align-self: center !important;
  height: 1px !important;
  width: auto !important;
  min-width: 24px !important;
  max-width: none !important;
  background: color-mix(in srgb, var(--brand-color, var(--tryit-cyan)) 35%, var(--tryit-line)) !important;
  border: 0 !important;
  position: static !important;
  transform: none !important;
}

body.tryit-ui .section-title.section-title-centered .the-section-title,
body.tryit-ui .section-title-centered .the-section-title,
body.tryit-ui .section-title.section-title-centered > span {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--tryit-white) !important;
  border: 1px solid var(--tryit-line) !important;
  border-radius: var(--tryit-radius) !important;
  padding: 10px 18px !important;
  color: var(--brand-color, var(--tryit-cyan)) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  max-width: min(90vw, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Default (non-centered) section title — pill only, no giant text */
body.tryit-ui .section-title.section-title-default:not(.section-title-centered) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 20px 0 18px !important;
  font-size: inherit !important;
}

body.tryit-ui .section-title.section-title-default:not(.section-title-centered):before,
body.tryit-ui .section-title.section-title-default:not(.section-title-centered):after {
  content: none !important;
  display: none !important;
}

/* Extra overrides ONLY for apps-style titles — never touch tryit-title-skip */
body.tryit-ui.block-head-1 .mag-box div.mag-box-title.tryit-title-apps,
body.tryit-ui.block-head-3 .mag-box div.mag-box-title.tryit-title-apps,
body.tryit-ui .block-head-1 .mag-box div.mag-box-title.tryit-title-apps,
body.tryit-ui .block-head-3 .mag-box div.mag-box-title.tryit-title-apps {
  border: 0 !important;
  background: transparent !important;
}

body.tryit-ui.block-head-1 .mag-box div.mag-box-title.tryit-title-apps:before,
body.tryit-ui.block-head-1 .mag-box div.mag-box-title.tryit-title-apps:after,
body.tryit-ui.block-head-3 .mag-box div.mag-box-title.tryit-title-apps:before,
body.tryit-ui.block-head-3 .mag-box div.mag-box-title.tryit-title-apps:after,
body.tryit-ui .block-head-1 .mag-box div.mag-box-title.tryit-title-apps:before,
body.tryit-ui .block-head-1 .mag-box div.mag-box-title.tryit-title-apps:after,
body.tryit-ui .block-head-3 .mag-box div.mag-box-title.tryit-title-apps:before,
body.tryit-ui .block-head-3 .mag-box div.mag-box-title.tryit-title-apps:after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  position: static !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps > * {
  position: static !important;
  float: none !important;
}

body.tryit-ui .mag-box-title.tryit-title-apps h3 {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Desktop: hide sticky/top chrome that breaks the pill */
@media (min-width: 992px) {
  body.tryit-ui #theme-header.has-shadow {
    box-shadow: none !important;
  }

  body.tryit-ui #theme-header .main-nav.fixed-nav,
  body.tryit-ui #theme-header #main-nav.fixed-nav {
    border-radius: var(--tryit-radius) !important;
  }

  body.tryit-ui #theme-header #logo,
  body.tryit-ui #theme-header.header-layout-1 #logo {
    float: none !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  body.tryit-ui #theme-header #logo img {
    max-height: 36px !important;
    width: auto !important;
  }

  body.tryit-ui #theme-header .header-layout-1-logo {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
  }

  body.tryit-ui #theme-header .main-menu-wrap {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Mobile pill: apply to the visible bar only once */
@media (max-width: 991px) {
  body.tryit-ui #tie-wrapper header#theme-header {
    background: transparent !important;
    box-shadow: none !important;
  }

  body.tryit-ui #theme-header .main-nav-wrapper {
    background: transparent !important;
  }

  body.tryit-ui #theme-header #main-nav.main-nav,
  body.tryit-ui #theme-header.header-layout-1 .main-nav,
  body.tryit-ui #theme-header.header-layout-4 .main-nav {
    background: var(--tryit-white) !important;
    border-radius: var(--tryit-radius) !important;
    box-shadow: var(--tryit-shadow) !important;
    border: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    /* Theme options inject style="line-height:80px" — override or gap returns */
    line-height: normal !important;
  }

  body.tryit-ui #theme-header .main-nav > .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    height: auto !important;
    line-height: normal !important;
  }

  body.tryit-ui #theme-header .main-menu-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    gap: 8px !important;
    line-height: 1 !important;
  }

  /* RTL Shape #6: search left | logo center | menu right */
  body.tryit-ui #theme-header #mobile-header-components-area_1 {
    order: 3;
    flex: 0 0 auto;
    width: auto !important;
  }

  body.tryit-ui #theme-header .header-layout-1-logo {
    order: 2;
    flex: 1 1 auto;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  body.tryit-ui #theme-header #mobile-header-components-area_2 {
    order: 1;
    flex: 0 0 auto;
    width: auto !important;
    display: flex !important;
  }

  body.tryit-ui #theme-header.header-layout-1 .header-content {
    background: transparent !important;
    box-shadow: none !important;
  }

  body.tryit-ui #theme-header #logo,
  body.tryit-ui #theme-header.has-normal-width-logo #logo {
    float: none !important;
    text-align: center !important;
    margin: 0 !important;
  }

  body.tryit-ui #theme-header #logo img {
    max-height: 32px !important;
  }

  body.tryit-ui #theme-header .mobile-header-components {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    line-height: 1 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
  }

  body.tryit-ui #theme-header .mobile-header-components .components {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
  }

  body.tryit-ui #theme-header .mobile-header-components .components li.custom-menu-link > a {
    margin: 0 !important;
    padding: 0 !important;
    width: 28px !important;
  }

  body.tryit-ui #theme-header .tie-mobile-menu-icon,
  body.tryit-ui #theme-header .tie-search-icon,
  body.tryit-ui #theme-header .mobile-header-components a,
  body.tryit-ui #theme-header .change-skin-icon {
    color: var(--tryit-cyan) !important;
  }

  /* Keep night-mode icon next to search (do not hide) */
  body.tryit-ui #theme-header .mobile-component_skin {
    display: list-item !important;
  }

  body.tryit-ui #theme-header #mobile-header-components-area_1 .components {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
}