/*
 * ARABIDS 1.2.119 — photographic typography, no giant reading boxes.
 * Warm directional shadows sit only where text is placed, preserving the
 * original photo colour and the visual focus of every brand image.
 */

/* Home: remove the hero's opaque rectangle. A directional shadow makes the
   heading readable above the full-width, quietly cycling photographs. */
html body:is(.home,[data-page="home"]) .hero {
  overflow: hidden !important;
}
html body:is(.home,[data-page="home"]) .hero::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(270deg,rgba(3,18,13,.90) 0%,rgba(3,18,13,.65) 34%,rgba(3,18,13,.12) 72%,transparent 94%) !important;
  opacity: 1 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .hero::before {
  background: linear-gradient(90deg,rgba(3,18,13,.90) 0%,rgba(3,18,13,.65) 34%,rgba(3,18,13,.12) 72%,transparent 94%) !important;
}
html body:is(.home,[data-page="home"]) .hero .container > .flex > .left,
html[data-language="en"] body.home .hero .left,
html[lang="en"] body.home .hero .left {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: clamp(22px,3vw,42px) clamp(12px,3.6vw,52px) !important;
}
html body:is(.home,[data-page="home"]) .hero .arabids-hero-copy {
  background: transparent !important;
  box-shadow: none !important;
}
html body:is(.home,[data-page="home"]) .hero h1.title,
html[data-language="ar"] body.home .hero .arabids-hero-copy h1.title,
html[data-language="ar"] body[data-page="home"] .hero .arabids-hero-copy h1.title,
html[lang="ar"] body.home .hero .arabids-hero-copy h1.title,
html[data-language="en"] body.home .hero .arabids-hero-copy h1.title,
html[data-language="en"] body[data-page="home"] .hero .arabids-hero-copy h1.title,
html[lang="en"] body.home .hero .arabids-hero-copy h1.title {
  color: #fff6e9 !important;
  -webkit-text-fill-color: #fff6e9 !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.35) !important;
}
html body:is(.home,[data-page="home"]) .hero .subtitle,
html body:is(.home,[data-page="home"]) .hero .left .subtitle {
  color: #fff9ef !important;
  -webkit-text-fill-color: #fff9ef !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.5) !important;
}

/* Home chapters: keep the first half of each photograph untouched. Use only
   a low-lying shadow for the details, plus a shadow on the heading side. */
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) {
  position: relative !important;
  isolation: isolate !important;
  background-image: none !important; /* restored separately for each photo */
  overflow: hidden !important;
  box-shadow: none !important;
}
html body:is(.home,[data-page="home"]) .core_benefits_section {
  background-image: url('../images/brand-atmospheres/support-camera.jpg') !important;
}
html body:is(.home,[data-page="home"]) .what_is_section {
  background-image: url('../images/brand-atmospheres/heritage-frame.jpg') !important;
}
html body:is(.home,[data-page="home"]) .who_its_for_section {
  background-image: url('../images/brand-atmospheres/app-gallery.jpg') !important;
}
html body:is(.home,[data-page="home"]) .faq_section {
  background-image: url('../images/brand-atmospheres/account-coins.jpg') !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(0deg,rgba(3,18,13,.88) 0%,rgba(3,18,13,.67) 27%,rgba(3,18,13,.24) 58%,transparent 84%),
    linear-gradient(90deg,rgba(3,18,13,.66) 0%,rgba(3,18,13,.32) 34%,transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) > .container {
  position: relative !important;
  z-index: 2 !important;
}

/* Headline is true photographic type: no cream rectangle, rounded panel,
   blur, border or floating card. The small gold rule is editorial punctuation. */
html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-heading {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: clamp(22px,3vw,40px) clamp(8px,2vw,24px) !important;
  width: min(650px,59%) !important;
  flex: 0 1 650px !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-heading::before {
  background: #e7ca96 !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.25) !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) .arabids-editorial-heading > h2.title {
  color: #fff9ed !important;
  -webkit-text-fill-color: #fff9ed !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.55) !important;
  font-weight: 800 !important;
}

/* No oversized white cards covering the photographs. Each piece of copy
   becomes a clean typographic entry, with just a fine gold separator. */
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item,
html body:is(.home,[data-page="home"]) :is(.what_is_section,.who_its_for_section,.faq_section) .flex-wrap > .item {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(239,230,216,.45) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  color: #fff9ef !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.38) !important;
  padding: clamp(15px,2vw,26px) clamp(12px,2vw,25px) !important;
}
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item:hover,
html body:is(.home,[data-page="home"]) :is(.what_is_section,.who_its_for_section,.faq_section) .flex-wrap > .item:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) .item :is(.title,.subtitle,.content-in,.content,.how-it-works-title) {
  color: #fff9ef !important;
  -webkit-text-fill-color: #fff9ef !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.5) !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) .item .subtitle {
  color: #f3e9d8 !important;
  -webkit-text-fill-color: #f3e9d8 !important;
}
/* The original FAQ and audience components used unusually specific green
   text declarations. Explicitly supersede them in both language layouts. */
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item :is(.title,.subtitle),
html body:is(.home,[data-page="home"]) :is(.what_is_section,.who_its_for_section,.faq_section) .flex-wrap > .item :is(.title,.subtitle) {
  color: #fff9ef !important;
  -webkit-text-fill-color: #fff9ef !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.5) !important;
}
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .subtitle,
html body:is(.home,[data-page="home"]) :is(.what_is_section,.who_its_for_section,.faq_section) .flex-wrap > .item .subtitle {
  color: #f3e9d8 !important;
  -webkit-text-fill-color: #f3e9d8 !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section
) .item .image {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section
) .item .image img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(10%) saturate(500%) hue-rotate(353deg) !important;
}
html body:is(.home,[data-page="home"]) .faq_section .flex-wrap .item::before {
  background: #d4af74 !important;
  opacity: .9 !important;
}

/* Support: replace the oversized floating text card with a genuine brand
   picture. The existing real support copy remains alongside this photograph. */
html body[data-page="support"] .as-hero,
html body.arabids-support-page .as-hero {
  background: #f7f1e8 !important;
  background-image: none !important;
}
html body[data-page="support"] .as-hero-stage,
html body.arabids-support-page .as-hero-stage {
  position: relative !important;
  display: block !important;
  min-height: clamp(310px,33vw,470px) !important;
  background: #420b07 url('../images/brand-atmospheres/heritage-frame.jpg') 76% center / cover no-repeat !important;
  border: 0 !important;
  border-radius: 100px 20px 20px 20px !important;
  box-shadow: 0 18px 44px rgba(20,51,40,.16) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
html body[data-page="support"] .as-hero-stage :is(.as-stage-card,.as-orb),
html body.arabids-support-page .as-hero-stage :is(.as-stage-card,.as-orb) {
  display: none !important;
}
html body[data-page="support"] .as-hero-stage::after,
html body.arabids-support-page .as-hero-stage::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid rgba(164,134,93,.23) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
/* The old green support link panel also receives an original photo detail. */
html body[data-page="support"] .as-links-panel-modern,
html body.arabids-support-page .as-links-panel-modern {
  background: linear-gradient(90deg,rgba(20,51,40,.96),rgba(20,51,40,.72)),url('../images/brand-atmospheres/support-camera.jpg') 70% center / cover no-repeat !important;
}

/* Auctions: replace the artificial logo/ring visual and the split green card
   with an antiques photograph and open editorial text on its dark left edge. */
html body[data-page="auctions"] .auctions-hero-card {
  display: flex !important;
  flex-flow: row nowrap !important;
  direction: ltr !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: clamp(370px,39vw,520px) !important;
  gap: 0 !important;
  padding: clamp(35px,5vw,68px) !important;
  background: #143328 url('../images/brand-atmospheres/auctions-antiques.jpg') 70% center / cover no-repeat !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 19px 44px rgba(20,51,40,.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body[data-page="auctions"] .auctions-hero-card::before {
  content: none !important;
  display: none !important;
}
html body[data-page="auctions"] .auctions-hero-card::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  left: 0 !important;
  bottom: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg,rgba(3,18,13,.9) 0%,rgba(3,18,13,.66) 42%,rgba(3,18,13,.12) 76%,transparent 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
html body[data-page="auctions"] .auctions-hero-visual {
  display: none !important;
}
html body[data-page="auctions"] .auctions-hero-copy {
  z-index: 2 !important;
  direction: rtl !important;
  text-align: right !important;
  width: min(650px,62%) !important;
  max-width: 100% !important;
  margin: 0 !important;
}
html[dir="ltr"] body[data-page="auctions"] .auctions-hero-copy,
html[data-language="en"] body[data-page="auctions"] .auctions-hero-copy {
  direction: ltr !important;
  text-align: left !important;
}
html body[data-page="auctions"] .auctions-hero-copy h1 {
  color: #fff9ed !important;
  -webkit-text-fill-color: #fff9ed !important;
  text-shadow: 0 3px 15px rgba(0,0,0,.35) !important;
}
html body[data-page="auctions"] .auctions-hero-copy .auctions-hero-lede {
  color: #f2e8d8 !important;
  -webkit-text-fill-color: #f2e8d8 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
}
html body[data-page="auctions"] .auctions-hero-copy .auctions-eyebrow,
html body[data-page="auctions"] .auctions-hero-points > span {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f4e3c7 !important;
}
html body[data-page="auctions"] .auctions-hero-points b {
  color: #f4e3c7 !important;
}

/* Phone layouts: keep the original photo full-width at the top, then blend
   into forest/burgundy. Typography flows on a solid dark tone, never over
   washed images or cramped white cards. */
@media (max-width: 991px) {
  html body:is(.home,[data-page="home"]) .hero::before,
  html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .hero::before {
    background: linear-gradient(180deg,transparent 0%,rgba(3,18,13,.13) 22%,rgba(3,18,13,.92) 58%,rgba(3,18,13,.92) 100%) !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  )::after {
    background: none !important;
  }
  html body:is(.home,[data-page="home"]) .core_benefits_section {
    background-color: #143328 !important;
    background-image: linear-gradient(180deg,transparent 0%,rgba(20,51,40,.28) 37vw,#143328 64vw),url('../images/brand-atmospheres/support-camera.jpg') !important;
  }
  html body:is(.home,[data-page="home"]) .what_is_section {
    background-color: #420b07 !important;
    background-image: linear-gradient(180deg,transparent 0%,rgba(66,11,7,.30) 37vw,#420b07 64vw),url('../images/brand-atmospheres/heritage-frame.jpg') !important;
  }
  html body:is(.home,[data-page="home"]) .who_its_for_section {
    background-color: #143328 !important;
    background-image: linear-gradient(180deg,transparent 0%,rgba(20,51,40,.27) 37vw,#143328 64vw),url('../images/brand-atmospheres/app-gallery.jpg') !important;
  }
  html body:is(.home,[data-page="home"]) .faq_section {
    background-color: #420b07 !important;
    background-image: linear-gradient(180deg,transparent 0%,rgba(66,11,7,.30) 37vw,#420b07 64vw),url('../images/brand-atmospheres/account-coins.jpg') !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) {
    background-size: 100% 100%,100% auto !important;
    background-position: center top,center top !important;
    background-repeat: no-repeat !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-heading {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item,
  html body:is(.home,[data-page="home"]) :is(.what_is_section,.who_its_for_section,.faq_section) .flex-wrap > .item {
    border-bottom: 1px solid rgba(239,230,216,.32) !important;
    padding: 19px 9px !important;
  }
  html body[data-page="support"] .as-hero-stage,
  html body.arabids-support-page .as-hero-stage {
    min-height: clamp(240px,45vw,400px) !important;
    width: 100% !important;
    margin-inline: auto !important;
    border-radius: 60px 18px 18px 18px !important;
  }
  html body[data-page="auctions"] .auctions-hero-card {
    padding: 180px 24px 32px !important;
    min-height: 480px !important;
    background-size: cover !important;
    background-position: 72% center !important;
  }
  html body[data-page="auctions"] .auctions-hero-card::after {
    background: linear-gradient(180deg,rgba(3,18,13,.05) 0%,rgba(3,18,13,.52) 34%,rgba(3,18,13,.95) 74%,rgba(3,18,13,.95) 100%) !important;
  }
  html body[data-page="auctions"] .auctions-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 540px) {
  html body:is(.home,[data-page="home"]) .hero .container > .flex > .left,
  html[data-language="en"] body.home .hero .left {
    padding: 22px 4px !important;
  }
  html body[data-page="support"] .as-hero-stage,
  html body.arabids-support-page .as-hero-stage {
    min-height: 245px !important;
  }
  html body[data-page="auctions"] .auctions-hero-card {
    padding: 160px 17px 26px !important;
    border-radius: 19px !important;
    min-height: 480px !important;
  }
}