/* =========================================================
   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 — smooth dropdown under header (not full overlay) ========== */
@media (max-width: 991px) {
  /*
   * WANT: vertical list that opens beneath the hamburger / pill header.
   * NOT: full-screen panel with search + 2×2 cards.
   * Toggle still uses Jannah's #tie-container.side-aside-open.
   */
  body.tryit-ui .side-aside.tryit-mobile-menu,
  body.tryit-ui .side-aside.tryit-mobile-dropdown,
  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,
  body.tryit-ui .side-aside.appear-from-right.tryit-mobile-dropdown,
  body.tryit-ui .side-aside.appear-from-left.tryit-mobile-dropdown {
    position: fixed !important;
    top: 58px !important; /* under fixed pill header */
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 10050 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition:
      max-height 0.35s ease,
      opacity 0.28s ease,
      visibility 0.28s ease !important;
  }

  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-dropdown,
  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-dropdown.appear-from-right,
  body.tryit-ui #tie-container.side-aside-open .side-aside.tryit-mobile-dropdown.appear-from-left,
  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-dropdown {
    max-height: min(70vh, 520px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow: hidden !important;
  }

  body.tryit-ui .side-aside.tryit-mobile-menu .side-aside-wrapper,
  body.tryit-ui .side-aside.tryit-mobile-dropdown .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: 10px 10px 12px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(70vh, 520px) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep header visible — dropdown sits under it */
  body.tryit-ui #tie-container.side-aside-open #theme-header {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* No page shove / no giant dim overlay from Jannah slide */
  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 #tie-container.side-aside-open #tie-wrapper:after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
  }

  body.tryit-ui .side-aside.tryit-mobile-menu #mobile-container,
  body.tryit-ui .side-aside.tryit-mobile-dropdown #mobile-container {
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Dropdown: no big red close circle (tap hamburger / outside) */
  body.tryit-ui .side-aside.tryit-mobile-menu .close-side-aside,
  body.tryit-ui .side-aside.tryit-mobile-dropdown .close-side-aside {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    background: transparent !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,
  body.tryit-ui .side-aside.tryit-mobile-dropdown .close-side-aside:before,
  body.tryit-ui .side-aside.tryit-mobile-dropdown .close-side-aside:after {
    content: none !important;
    display: none !important;
  }

  /* Hide search / social / old footer extras in dropdown */
  body.tryit-ui .side-aside.tryit-mobile-menu #mobile-search,
  body.tryit-ui .side-aside.tryit-mobile-dropdown #mobile-search,
  body.tryit-ui .side-aside.tryit-mobile-menu #mobile-social-icons,
  body.tryit-ui .side-aside.tryit-mobile-dropdown #mobile-social-icons,
  body.tryit-ui .side-aside .tryit-menu-links {
    display: none !important;
  }
}

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

/* Vertical nav list (mobile dropdown) */
body.tryit-ui #mobile-menu {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tryit-ui #mobile-menu.tryit-mobile-dropdown-list > ul,
body.tryit-ui #mobile-menu.tryit-mobile-dropdown-list .menu,
body.tryit-ui #mobile-menu.tryit-mobile-dropdown-list #mobile-custom-menu,
body.tryit-ui #mobile-menu.tryit-mobile-dropdown-list .menu-mobile-container > .menu,
body.tryit-ui #mobile-menu > ul,
body.tryit-ui #mobile-menu #mobile-custom-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  grid-template-columns: none !important;
}

body.tryit-ui #mobile-menu.tryit-mobile-dropdown-list .menu > li,
body.tryit-ui #mobile-menu.tryit-mobile-dropdown-list #mobile-custom-menu > li,
body.tryit-ui #mobile-menu #mobile-custom-menu > li {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.tryit-ui #mobile-menu.tryit-mobile-dropdown-list .menu > li > a,
body.tryit-ui #mobile-menu.tryit-mobile-dropdown-list #mobile-custom-menu > li > a,
body.tryit-ui #mobile-menu #mobile-custom-menu > li > a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
  width: 100% !important;
  border-radius: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1f2937 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
  line-height: 1.35 !important;
  border: 0 !important;
  text-align: right !important;
  text-decoration: none !important;
}

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

/* Active / current item — red pill like reference */
body.tryit-ui #mobile-menu .menu > li.current-menu-item > a,
body.tryit-ui #mobile-menu .menu > li.current_page_item > a,
body.tryit-ui #mobile-menu .menu > li.current-menu-ancestor > a,
body.tryit-ui #mobile-menu .menu > li.current-category-ancestor > a,
body.tryit-ui #mobile-menu #mobile-custom-menu > li.current-menu-item > a,
body.tryit-ui #mobile-menu #mobile-custom-menu > li.current_page_item > a,
body.tryit-ui #mobile-menu #mobile-custom-menu > li.current-menu-ancestor > a,
body.tryit-ui #mobile-menu #mobile-custom-menu > li.current-category-ancestor > a,
body.tryit-ui #mobile-menu .menu > li.current-menu-item > a:hover,
body.tryit-ui #mobile-menu #mobile-custom-menu > li.current-menu-item > a:hover {
  background: #af0000 !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.tryit-ui #mobile-menu .menu > li.current-menu-item > a .fa,
body.tryit-ui #mobile-menu .menu > li.current-menu-item > a [class*="tie-icon"],
body.tryit-ui #mobile-menu #mobile-custom-menu > li.current-menu-item > a .fa,
body.tryit-ui #mobile-menu #mobile-custom-menu > li.current-menu-item > a [class*="tie-icon"] {
  color: #fff !important;
}

/* Kill leftover grid-card icons from older CSS/JS */
body.tryit-ui #mobile-menu .tryit-menu-ico {
  display: none !important;
}

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

body.tryit-ui .tryit-menu-links {
  display: none !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;
  }
}


/* Fix non-composited animation */
a.close-side-aside,
a.close-side-aside:before,
a.close-side-aside:after,
.side-aside a.close-side-aside,
.side-aside .close-side-aside {
  transition: none !important;
  animation: none !important;
}