:root {
  --content-1900: 1080px;
  --content-1500: 740px;
  --content-1024: 464px;
  --content-820: 100%;
  --content-768: 100%;

  --aside-1900: 320px;
  --aside-820: 100%;

  --lite_beige: #fcfcf5;
}

/* headers style */
.maincontainer-wrapper h1,
.maincontainer-wrapper h2,
.maincontainer-wrapper h3,
.maincontainer-wrapper h4,
.maincontainer-wrapper h5,
.maincontainer-wrapper h6 {
  background: var(
    --Gold,
    linear-gradient(70deg, #a67f20 8.88%, #ddc03b 50.56%, #a67f20 87.44%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.maincontainer-wrapper h1:before,
.maincontainer-wrapper h2:before,
.maincontainer-wrapper h3:before {
  content: " / ";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  background: var(
    --Gold,
    linear-gradient(70deg, #a67f20 8.88%, #ddc03b 50.56%, #a67f20 87.44%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.maincontainer-wrapper {
  padding: 0;
  overflow: clip;
}
.maincontainer-wrapper.full-listing .stickybg {
  position: absolute;
  background: url("/wp-content/themes/sahifa-child/builder/assets/img/full_listing_bg.png")
    no-repeat center center / cover;
  width: 100vw;
  max-width: unset;
  left: 0;
  top: 0;
  z-index: -1;
}

.maincontainer-wrapper h1 {
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
  margin-bottom: 16px !important;
  width: auto;
}
.maincontainer-wrap {
  display: flex;
  gap: 64px;
  justify-content: center;
  padding: 0 16px;
}

.maincontainer-wrap .siderbar-wrapper {
  width: var(--aside-1900);
  padding: 0;
  position: relative;
  z-index: 2;
}
.maincontainer-wrap .siderbar-wrap {
  position: sticky;
  top: 80px;
  padding: 30px 0 0;
}
.maincontainer-wrap .toc-wrap {
  display: flex;
  flex-direction: column;
}
.maincontainer-wrap .toc-wrap a {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: var(--white);
  display: flex;
  gap: 4px;
  padding: 4px 0;
  text-decoration: none;
  cursor: pointer;
}

.maincontainer-wrap .toc-wrap a p {
  margin: 0;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--Gold);
  flex: 1;
}
.maincontainer-wrap .toc-wrap a:last-child p {
  border: none;
}
.maincontainer-wrap .toc-wrap a.__active p {
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  background: var(
    --Gold,
    linear-gradient(70deg, #a67f20 8.88%, #ddc03b 50.56%, #a67f20 87.44%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.maincontainer-wrap .toc-wrap a:before {
  content: " /";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  background: var(
    --Gold,
    linear-gradient(70deg, #a67f20 8.88%, #ddc03b 50.56%, #a67f20 87.44%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: none;
}

.maincontainer-wrap .toc-placement-wrapper {
  background: #1f1f21
    url(/wp-content/themes/sahifa-child/public/img/patterns/dark-pattern.png);
  border: 1px solid var(--gold);
  padding: 16px;
}
.maincontainer-wrap .builder-breadcrumbs-wrapper span {
  color: var(--dark);
}
.maincontainer-wrap .author-placement-wrapper {
  border-top: 1px solid var(--gold);
  margin-top: 24px;
}

.maincontainer-wrap .content-wrapper {
  width: var(--content-1900);
  position: relative;
  z-index: 1;
}

.maincontainer-wrap .top-header-wrap {
  position: sticky;
  top: 80px;
  z-index: 2;
}
.maincontainer-wrap .top-header {
  padding: 8px 0 40px;
}
.maincontainer-wrap .content-wrap {
  padding: 40px 0;
  position: relative;
  z-index: 1;
}

.maincontainer-wrap .header-wrapper {
  display: flex;
}

/* listing-wrapper */
.maincontainer-wrap .listing-wrapper {
  padding-top: 40px;
}
.maincontainer-wrap .header-wrap {
  text-align: center;
  position: relative;
  padding: 16px 24px;
  flex: 1;
}

.maincontainer-wrap .header-wrap:after {
  content: "";
  position: absolute;
  height: calc(100% - 16px);
  width: 1px;
  background: var(--Gold);
  left: 0;
  top: 8px;
}

.maincontainer-wrap .header-wrap:last-child::after {
  display: none;
}

.maincontainer-wrap .header-wrap.__active {
  background: var(--beige);
}
.maincontainer-wrap .header-wrap img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.maincontainer-wrap .header-wrapper h2 {
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  margin-top: 16px;
  padding: 0;
}
.maincontainer-wrap .header-wrapper h2:after,
.maincontainer-wrap .header-wrapper h2:before {
  display: none;
}
.maincontainer-wrap .header-wrapper button {
  background: transparent;
  border: none;
  cursor: pointer;
}

.maincontainer-wrap .list-item-wrapper {
  background: var(--beige);
  padding: 40px 0;
}

.maincontainer-wrap .list-item-wrapper ::marker {
  display: none;
  font-size: 0;
}
.maincontainer-wrap .list-item-wrapper > div {
  display: none;
}
.maincontainer-wrap .list-item-wrapper > div.__active {
  display: block;
  background: var(--lite_beige);
  padding: 16px;
}

.maincontainer-wrap .list-item-wrapper a {
  color: var(--dark) !important;
  padding: 12px 0;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  background: unset;
  background-clip: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

.maincontainer-wrap .list-item-wrapper a:after {
  content: " >>";
}
/* expandable content */
.expandable-content-wrapper {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: var(--dark);
}
.expandable-content-wrapper label {
  display: flex;
  justify-content: end;
  margin-top: 16px;
  cursor: pointer;
}

.expandable-content-wrapper .collapse-content p,
.expandable-content-wrapper .expanded-content p {
  padding: 0;
  margin: 0;
}
.expandable-content-wrapper .expanded-content {
  display: none;
  padding: 16px 0;
}

.expandable-content-wrapper:has(input#expand-toggle:checked) .expanded-content {
  display: block;
}

.expandable-content-wrapper:has(input#expand-toggle:checked) span {
  font-size: 0;
}
.expandable-content-wrapper label span,
.expandable-content-wrapper label span:before {
  font-size: 15px;
  font-weight: 800;
  background: var(
    --Gold,
    linear-gradient(70deg, #a67f20 8.88%, #ddc03b 50.56%, #a67f20 87.44%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.expandable-content-wrapper:has(input#expand-toggle:checked) span:before {
  content: "اغلق النص »";
}

.listing-wrapper .sub-item header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}
.listing-wrapper .sub-item header .accordion-learn {
  background: url(/wp-content/themes/sahifa-child/builder/assets/img/gold-arrow-left.webp)
    no-repeat center / contain;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: 0.4s ease;
}
.listing-wrapper .sub-item header .accordion-learn.__active {
  transform: rotate(-90deg);
}
.listing-wrapper .sub-item header > a {
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  background: unset;
  background-clip: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

.listing-wrapper .sub-item header > a:after {
  content: "";
}

.listing-wrapper .sub-item header > a h3 {
  background: unset;
  background-clip: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  color: var(--dark);
}
.listing-wrapper .sub-item header > a h3:before {
  display: none;
}

.listing-wrapper .sub-item .learn-item {
  display: none;
}
.listing-wrapper .sub-item .learn-item.__active {
  display: block;
}
.listing-wrapper .sub-item .learn-item ul {
  margin-right: 0;
}

.mobile-toggle-toc {
  background: url(/wp-content/themes/sahifa-child/builder/assets/img/gold-arrow-left.webp)
    no-repeat center / contain;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  display: none;
}

.toc-placement-wrapper .mobile-toggle-toc {
  top: unset;
  bottom: 0px;
  transform: translateY(-50%) rotate(90deg);
}

.meta-post-wrap {
  display: flex;
  gap: 40px;
  color: var(--ash);
  margin-top: 16px;
}
.meta-post-wrap .meta-data {
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
}

.css__overflow-icon {
  display: none;
  width: 30px;
  margin: 0 0 16px;
}

.builder-author-wrapper {
  padding-bottom: 24px;
}
#floating-sorting-list .sorting-table__footer {
  display: block;
}

.meta-post-wrap .meta-data img {
  width: 22px;
  height: 22px;
}
.content-wrap.__order-main-content h2::before {
  display: none !important;
}
@media screen and (max-width: 1550px) {
  .maincontainer-wrap .content-wrapper {
    width: var(--content-1500);
  }
}
@media screen and (max-width: 1499px) {
  .meta-post-wrap {
    flex-wrap: wrap;
    gap: 12px 0;
  }
  .maincontainer-wrap .header-wrap {
    min-width: 150px;
    max-width: 150px;
    padding: 16px 0;
  }
  .maincontainer-wrap .header-wrapper h2 {
    padding: 0 8px;
    font-size: 15px;
  }
  .meta-post-wrap > div {
    width: calc(50% - 8px);
  }
  .maincontainer-wrap .header-wrap:last-child::after {
    display: block;
  }
  .maincontainer-wrap .top-header-wrap {
    position: sticky;
    top: 101px;
    z-index: 2;
  }
  .maincontainer-wrapper .stickybg {
    top: 68px;
  }
  .maincontainer-wrap .content-wrapper {
    width: var(--content-1024);
  }

  .maincontainer-wrap .header-wrapper {
    overflow-x: auto;
  }

  .css__overflow-icon {
    display: flex;
    justify-self: end;
  }
}
@media screen and (max-width: 1023px) {
  .maincontainer-wrap .toc-wrap a.__active:after {
    display: none;
  }
  .maincontainer-wrapper.full-listing .stickybg {
    height: 75px !important;
    background: #fff;
  }

  .maincontainer-wrap .list-item-wrapper {
    padding-bottom: 0;
  }
  .maincontainer-wrap .listing-wrapper {
    padding-top: 24px;
    margin-bottom: 0;
  }
  .maincontainer-wrap .header-wrap {
    flex: 1;
    width: unset;
    max-width: unset;
  }
  .meta-post-wrap {
    flex-wrap: wrap;
    align-items: start;
    gap: 16px 24px;
    margin-top: 0;
  }
  .meta-post-wrap .meta-data {
    width: auto;
  }
  .meta-post-wrapper {
    order: -1;
  }
  .full-listing .maincontainer-wrap .mobile-toggle-toc {
    display: block;
  }
  .maincontainer-wrap {
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px 16px;
  }
  .maincontainer-wrap .content-wrapper {
    width: var(--content-820);
  }
  .maincontainer-wrap .siderbar-wrapper {
    width: var(--aside-820);
  }

  .__order_top-header {
    order: 10;
  }
  .__order-breadcrumbs {
    order: 1;
    z-index: 5;
    position: sticky;
    top: 90px;
  }
  .__order-h1 {
    order: 2;
    position: sticky;
    top: 136px;
    z-index: 5;
  }
  .__order-toc {
    order: 3;
    position: fixed;
    top: 229px;
    z-index: 5;
    display: none;
  }

  .__order-toc.__active {
    display: block;
  }
  .__order_expandable-content {
    order: 4;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .__order-main-content {
    order: 5;
  }
  .__order-author {
    order: 10;
  }
  .maincontainer-wrap .siderbar-wrapper,
  .maincontainer-wrap .siderbar-wrap,
  .maincontainer-wrap .content-wrapper,
  .maincontainer-wrap .top-header-wrap,
  .maincontainer-wrap .top-header {
    display: contents;
  }
  .maincontainer-wrapper .stickybg {
    background: #fff;
    top: 68px;
    z-index: 4;
  }
  .__order-h1,
  .__order-toc,
  .__order-breadcrumbs {
    width: 100%;
  }
  .__order-breadcrumbs {
    /* position: relative; */
  }
  .__order-breadcrumbs:after {
    content: "";
    position: absolute;
    width: calc(100% + 32px);
    height: calc(100% + 48px);
    background-color: #fff;
    top: -24px;
    left: -16px;
    z-index: -1;
  }

  .builder-author-wrapper,
  .maincontainer-wrapper h1 {
    margin-bottom: 0;
  }
  .maincontainer-wrap .author-placement-wrapper {
    margin-top: 0;
  }
  .maincontainer-wrap .content-wrap {
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
    max-width: 100%;
  }
  .maincontainer-wrap .builder-breadcrumbs-wrapper {
    padding: 0;
  }
  .maincontainer-wrap .top-header-h1-wrap {
    background: #1f1f21
      url(/wp-content/themes/sahifa-child/public/img/patterns/dark-pattern.png);
    width: calc(100% + 32px);
    margin: 0 -16px;
  }
  .full-listing .maincontainer-wrap h1 {
    padding: 8px 16px;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    margin-bottom: 0 !important;
    width: 90%;
  }
}
@media screen and (max-width: 819px) {
  #floating-sorting-list:has(input[name="sort-list-label-2"])
    .tmplt-sorting-container {
    gap: 8px;
  }
  .maincontainer-wrap .builder-breadcrumbs-wrapper > nav {
    width: 100%;
  }
  .maincontainer-wrap .author-placement-wrapper {
    display: block;
    border-bottom: 1px solid var(--gold);
  }
  .builder-author-wrapper header {
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 0 16px;
  }
  .builder-author-wrapper .author-description {
    padding: 16px;
    background-color: var(--beige);
    width: calc(100% + 32px);
    margin: 0 -16px;
  }
}
/* sorting list */
.maincontainer-wrapper .broker-list-container,
.maincontainer-wrapper .broker-list-container-desktop {
  display: none !important;
}
#floating-sorting-list {
  background: url(/wp-content/themes/sahifa-child/public/img/patterns/dark-pattern.png)
    #1f1f21;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999999;
  padding: 40px 0;
}
#floating-sorting-list .tmplt-sorting-container h2 {
  display: none !important;
}

#floating-sorting-list .tmplt-sorting-container {
  width: 1000px;
  margin: 0 auto;
  background: #fff;
  max-width: 100%;
}
#floating-sorting-list .tmplt-sorting-header-wrap {
  background: transparent;
}
#floating-sorting-list .tmplt-sorting-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 16px 24px;
}
#floating-sorting-list .tmplt-sort-td {
  line-height: normal;
  margin: 0;
}
#floating-sorting-list .tmplt-sort-td p {
  background: linear-gradient(
    70deg,
    #a67f20 8.88%,
    #ddc03b 50.56%,
    #a67f20 87.44%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

#floating-sorting-list .tmplt-sorting-body-cell .sorting-toggle-wrap {
  display: none !important;
}

#floating-sorting-list .sorting-table__cell {
  text-align: center;
  padding: 8px 0 16px;
}
#floating-sorting-list .sorting-table__footer .brokerreview-full-link {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%;
  background: var(
    --Gold,
    linear-gradient(70deg, #a67f20 8.88%, #ddc03b 50.56%, #a67f20 87.44%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#floating-sorting-list .side-label-wrapper {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(calc(100% + 50px), -50%);
  max-width: 87px;
}
#floating-sorting-list .side-label-wrapper p {
  background: var(
    --Gold,
    linear-gradient(70deg, #a67f20 8.88%, #ddc03b 50.56%, #a67f20 87.44%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Cairo;
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
}
#floating-sorting-list .tmplt-sorting-body {
  position: relative;
}
#floating-sorting-list .trigger-sorting-list {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
}

#floating-sorting-list .tmplt-sorting-body-cell.link {
  transform: translateX(-8px);
  background: var(--beige);
  text-align: left;
  justify-content: end;
}

#floating-sorting-list .tmplt-sorting-body-cell.link .dr-link {
  margin-left: 16px;
  border: 1px solid var(--gold);
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1;
}
#floating-sorting-list .tmplt-sorting-body-cell p {
  font-size: 10px;
  font-weight: 500;
}

#floating-sorting-list .tmplt-sorting-body-cell.logo .broker-list-rank {
  background: url(/wp-content/themes/sahifa-child/public/img/common/basic_bg.png)
    no-repeat center / 42px 60px;
  width: 42px;
}

/* if sorting is closed */
#floating-sorting-list:has(input[name="sort-list-label-2"]) {
  padding: 16px 0;
}
#floating-sorting-list:has(input[name="sort-list-label-2"])
  .sorting-table__cell {
  margin: 0;
  padding: 0;
}
#floating-sorting-list:has(input[name="sort-list-label-2"])
  .brokerreview-full-link {
  font-size: 15px;
  font-weight: 800;
}
#floating-sorting-list:has(input[name="sort-list-label-2"])
  .tmplt-sorting-container {
  background: transparent;
  justify-content: center;
  display: flex;
  gap: 24px;
  align-items: center;
}
#floating-sorting-list:has(input[name="sort-list-label-2"]) .side-label-wrapper,
#floating-sorting-list:has(input[name="sort-list-label-2"])
  .tmplt-sorting-body-cell,
#floating-sorting-list:has(input[name="sort-list-label-2"])
  .tmplt-sorting-header {
  display: none !important;
}
#floating-sorting-list:has(input[name="sort-list-label-2"])
  .tmplt-sorting-body-cell.logo {
  display: flex !important;
  align-items: center;
  margin: 0;
  justify-content: end;
  padding-left: 10px;
}
#floating-sorting-list:has(input[name="sort-list-label-2"])
  .tmplt-sorting-body-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}

#floating-sorting-list:has(input[name="sort-list-label-2"])
  .tmplt-sorting-body-row-header {
  height: 40px;
}
#floating-sorting-list:has(input[name="sort-list-label-2"])
  .tmplt-sorting-body-row {
  width: 128px;
  margin: 0;
}
#floating-sorting-list:has(input[name="sort-list-label-2"])
  .tmplt-sorting-body-row
  span {
  font-size: 15px !important;
  font-weight: 800;
}

#floating-sorting-list:has(input[name="sort-list-label-2"])
  .tmplt-sorting-body-cell.logo
  .broker-list-rank {
  height: 40px;
  right: -45px;
}

#floating-sorting-list .trigger-sorting-list label {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .bread-placement-wrapper.__order-breadcrumbs {
    top: 90px;
  }
  .maincontainer-wrapper.full-listing .stickybg {
    z-index: 4;
  }
  #floating-sorting-list:has(input[name="sort-list-label-2"])
    .tmplt-sorting-body-cell.logo
    .broker-list-rank {
    right: -30px;
  }
  #floating-sorting-list:has(input[name="sort-list-label-2"])
    .tmplt-sorting-container,
  #floating-sorting-list:has(input[name="sort-list-label-2"])
    .tmplt-sorting-body-wrap {
    gap: 8px;
  }
  .bread-placement-wrapper.__order-breadcrumbs {
    top: 90px;
  }
  #floating-sorting-list:has(input[name="sort-list-label-2"])
    .tmplt-sorting-body-cell.logo {
    padding-left: 0;
  }
  .meta-post-wrap .meta-data {
    font-size: 12px;
    font-weight: 500;
  }
  .meta-post-wrap .meta-data img {
    width: 16px;
    height: 16px;
  }
}
@media screen and (max-width: 1160px) {
  .maincontainer-wrapper .trigger-sorting-list {
    display: none;
  }

  .maincontainer-wrapper .sorting-table__cell {
    margin: 0;
    padding: 0;
  }
  .maincontainer-wrapper .brokerreview-full-link {
    font-size: 15px;
    font-weight: 800;
  }
  .maincontainer-wrapper .tmplt-sorting-container {
    background: transparent;
    justify-content: center;
    display: flex;
    gap: 24px;
    align-items: center;
  }
  .maincontainer-wrapper .side-label-wrapper,
  .maincontainer-wrapper .tmplt-sorting-body-cell,
  .maincontainer-wrapper .tmplt-sorting-header {
    display: none !important;
  }
  .maincontainer-wrapper .tmplt-sorting-body-cell.logo {
    display: flex !important;
    align-items: center;
    margin: 0;
    justify-content: end;
    padding-left: 10px;
  }
  .maincontainer-wrapper .tmplt-sorting-body-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
  }

  .maincontainer-wrapper .tmplt-sorting-body-row-header {
    height: 40px;
  }
  .maincontainer-wrapper .tmplt-sorting-body-row {
    width: 128px;
    margin: 0;
  }
  .maincontainer-wrapper .tmplt-sorting-body-row span {
    font-size: 15px;
    font-weight: 800;
  }

  .maincontainer-wrapper .tmplt-sorting-body-cell.logo .broker-list-rank {
    height: 40px;
  }
  .maincontainer-wrapper .tmplt-sorting-container {
    flex-direction: column;
    padding: 0;
  }
  .maincontainer-wrapper .tmplt-sorting-body-wrap > :nth-child(n + 4) {
    display: none;
  }
}