/* =========================================================================
   AvaTrade local fix layer — image stability + section ambience + market UI
   Loaded after every page's existing CSS so it always wins.
   ========================================================================= */

/* ---- 1. Background hero/section images: never let them look broken ----- */
img[alt="background"] {
  /* The original images come from a CDN that may fail. We render a layered
     brand-coloured gradient instead so each section keeps depth and feels
     like a real trading-themed scene rather than a flat grey rectangle. */
  background:
    /* faint chart-grid so it reads as "trading" not "empty box" */
    repeating-linear-gradient(0deg,   rgba(76, 97, 255, 0.05) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg,  rgba(76, 97, 255, 0.05) 0 1px, transparent 1px 60px),
    /* coloured glows */
    radial-gradient(circle at 85% 10%, rgba(31, 224, 166, 0.22), transparent 55%),
    radial-gradient(circle at 12% 90%, rgba(76, 97, 255, 0.28), transparent 55%),
    /* base wash */
    linear-gradient(135deg, #eef2ff 0%, #e0e7ff 45%, #dbeafe 100%);
  opacity: 1;
  object-fit: cover;
  font-size: 0;
  color: transparent;
}

/* Dark-section variant — keeps the same chart-grid feel but on navy */
section[class*="bg-blue-black"] img[alt="background"],
section[class*="bg-[#101820]"] img[alt="background"],
[class*="bg-blue-black"] > img[alt="background"],
[class*="bg-[#0F1B2D]"] img[alt="background"] {
  background:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.04) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,0.04) 0 1px, transparent 1px 60px),
    radial-gradient(circle at 85% 10%, rgba(31, 224, 166, 0.18), transparent 55%),
    radial-gradient(circle at 12% 90%, rgba(76, 97, 255, 0.30), transparent 55%),
    linear-gradient(135deg, #0F1B2D 0%, #162236 50%, #0B1424 100%);
  opacity: 1;
}

/* ---- 2. Generic broken images: keep their box but stop the broken icon ---- */
img.ava-broken,
img[src*="loremflickr.com"]:not([data-ava-fixed]) {
  background: linear-gradient(135deg, #eef1ff 0%, #f7f9ff 100%);
  color: transparent;
  font-size: 0;
}

/* ---- 3. Currency / asset badges (rendered by JS) ----------------------- */
.ava-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  min-width: 35px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
  color: #fff;
  margin-inline-end: 8px;
  box-shadow: 0 2px 6px rgba(16, 24, 32, 0.12);
  flex: 0 0 auto;
  overflow: hidden;
}
.ava-badge svg { width: 60%; height: 60%; }
.ava-badge--eurusd { background: linear-gradient(135deg, #003399 0%, #00549F 50%, #1a73e8 100%); }
.ava-badge--gold   { background: linear-gradient(135deg, #f6c453 0%, #d4a017 100%); color: #4a2e00; }
.ava-badge--tesla  { background: linear-gradient(135deg, #cc0000 0%, #e82127 100%); }
.ava-badge--oil    { background: linear-gradient(135deg, #2c2c2c 0%, #4a4a4a 100%); }
.ava-badge--btc    { background: linear-gradient(135deg, #f7931a 0%, #ffaa3b 100%); }
.ava-badge--eth    { background: linear-gradient(135deg, #627eea 0%, #8aa1f0 100%); }
.ava-badge--stock  { background: linear-gradient(135deg, #4c61ff 0%, #6c7eff 100%); }
.ava-badge--index  { background: linear-gradient(135deg, #1d2741 0%, #364670 100%); }

/* ---- 4. Live market price tick highlight ------------------------------- */
.instrument-value.ava-flash-up   { color: #00a86b !important; transition: color 0.4s ease; }
.instrument-value.ava-flash-down { color: #d8463c !important; transition: color 0.4s ease; }

.ws-bind-change.text-success { color: #00a86b !important; }
.ws-bind-change.text-danger  { color: #d8463c !important; }

/* ---- 5. Show the logo on every viewport ------------------------------- */
/* The original markup gives the logo container `xl:hidden` because the
   React app rendered a desktop variant elsewhere. We stripped that, so
   force this container visible at all sizes. */
.logo-mobile {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
}
.logo-mobile img {
  height: 44px !important;
  width: auto !important;
  max-width: 320px;
}
@media (min-width: 1280px) {
  .logo-mobile img { height: 52px !important; max-width: 380px; }
}

/* ---- 6. Responsive navigation override -------------------------------- */
/* The original site relied on React to render two different navigations
   (a desktop horizontal bar, a mobile drawer). We stripped React, so the
   single source markup `.mobile-main-menu` was leaking on every screen as
   a vertical list. Replace that with proper responsive behaviour. */

/* Mobile (default, < 1024px): treat the menu as a slide-in drawer that
   only appears when body has the `menu-mobile-active` class. */
.mobile-main-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: #ffffff;
  overflow-y: auto;
  z-index: 200;
  padding: 80px 16px 32px;
  box-shadow: 0 0 40px rgba(15, 27, 45, 0.18);
}
body.menu-mobile-active { overflow: hidden; }
body.menu-mobile-active .mobile-main-menu { display: block; }

/* When the drawer is open on mobile, hide the OTHER children of the header
   (disclaimer, logo bar, hamburger) but keep the menu visible since it is a
   descendant of the same header. */
@media (max-width: 1023px) {
  body.menu-mobile-active .header-top-disclaimer,
  body.menu-mobile-active .logo-mobile,
  body.menu-mobile-active .hamburger,
  body.menu-mobile-active .ava-sticky-bar_stickyBar__kch6V { visibility: hidden; }
}

.mobile-main-menu > ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-main-menu > ul > li {
  border-bottom: 1px solid #e7e9ff;
}
.mobile-main-menu > ul > li > a,
.mobile-main-menu > ul > li > div > a {
  display: flex;
  width: 100%;
  padding: 14px 8px;
  color: #0F1B2D;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
}
.mobile-main-menu > ul > li > a:hover { color: #4C61FF; }

/* Close-X button injected by JS */
.ava-menu-close {
  position: fixed;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 210;
  background: #0F1B2D;
  color: #fff;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: none;
  line-height: 1;
}
body.menu-mobile-active .ava-menu-close { display: inline-flex; align-items: center; justify-content: center; }

/* Desktop (≥ 1024px): show the menu inline, horizontal, no drawer. */
@media (min-width: 1024px) {
  .hamburger { display: none !important; }
  .mobile-main-menu {
    display: block !important;
    position: static;
    inset: auto;
    background: transparent;
    overflow: visible;
    z-index: auto;
    padding: 0;
    box-shadow: none;
    width: 100%;
  }
  .mobile-main-menu > ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 16px;
    max-width: none;
  }
  .mobile-main-menu > ul > li {
    border: 0 !important;
    width: auto !important;
  }
  .mobile-main-menu > ul > li > a,
  .mobile-main-menu > ul > li > div > a {
    padding: 10px 14px;
    font-size: 15px;
    white-space: nowrap;
  }
  /* hide the row chevrons on desktop */
  .mobile-main-menu > ul > li > a svg,
  .mobile-main-menu > ul > li > div > a svg { display: none; }
  /* desktop: never show our close-X */
  .ava-menu-close { display: none !important; }
  /* hide the duplicate logo that some templates render in the secondary bar */
  .logo-mobile + .logo-mobile { display: none !important; }
}

/* ---- 7. Article / thumbnail placeholder when image fails -------------- */
.ava-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4c61ff 0%, #6c7eff 60%, #8a9aff 100%);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  line-height: 1.3;
  border-radius: inherit;
}

/* ---- 8. Mobile responsive hardening ----------------------------------- */
/* Current pages expose `#site-mobile-drawer`; the older `.mobile-main-menu`
   full-screen drawer rules above are kept for legacy exports only. Force the
   modern drawer path to own the mobile menu so the hamburger does not create
   mixed fixed/absolute states or hidden menu content. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.site-content,
.site-content section,
.site-content img,
.site-content video,
.site-content iframe,
.site-content svg {
  max-width: 100%;
}

.site-content iframe {
  width: 100%;
}

.site-content table {
  max-width: 100%;
}

.site-content :where(h1, h2, h3, h4, h5, h6, p, a, li, span) {
  overflow-wrap: anywhere;
}

#site-mobile-drawer .mobile-main-menu {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 16px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#site-mobile-drawer .mobile-main-menu > ul {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}

#site-mobile-drawer .mobile-main-menu > ul > li {
  width: 100% !important;
}

body.menu-mobile-active .header-top-disclaimer,
body.menu-mobile-active .logo-mobile,
body.menu-mobile-active .hamburger,
body.menu-mobile-active .ava-sticky-bar_stickyBar__kch6V {
  visibility: visible !important;
}

.ava-menu-close {
  display: none !important;
}

@media (max-width: 1023px) {
  .site-header {
    max-width: 100vw;
  }

  .header-top-disclaimer {
    padding-inline: 14px !important;
  }

  .header-top-disclaimer p {
    max-width: 100% !important;
    margin-inline: auto !important;
    line-height: 1.7 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #site-mobile-drawer.mobile-drawer-visible {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
    overscroll-behavior: contain;
  }

  #site-mobile-drawer.mobile-drawer-visible .relative,
  #site-mobile-drawer.mobile-drawer-visible .container {
    max-width: 100% !important;
  }

  #site-mobile-drawer .header-wrap,
  #site-mobile-drawer .mobile-header-cta-buttons {
    width: 100% !important;
    max-width: 100% !important;
  }

  #site-mobile-drawer .mobile-header-cta-buttons {
    display: flex !important;
    height: auto !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px !important;
  }

  #site-mobile-drawer .mobile-header-cta-buttons a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .logo-mobile {
    min-height: 54px;
  }

  .logo-mobile img {
    max-width: min(70vw, 240px) !important;
  }

  .hamburger {
    position: relative;
    align-items: center;
    justify-content: space-between !important;
    min-height: 44px;
    padding-inline: 16px !important;
  }

  .hamburger > button {
    order: 1;
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #101820 !important;
  }

  .hamburger > .btn-login {
    position: static !important;
    order: 2;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f4f7fb;
  }

  .site-content {
    overflow-x: hidden;
  }

  .site-content :where([class*="min-w-"], [class*="w-["]) {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  /* Laptop/desktop: remove the exported utility strip requested by the user
     (UAE / help / language + the duplicate small logo on the right). */
  #site-mobile-drawer > section {
    display: none !important;
  }

  #site-mobile-drawer {
    display: flex !important;
    position: relative !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  #site-mobile-drawer > .relative {
    min-height: 0 !important;
    align-items: center !important;
  }

  #site-mobile-drawer .mobile-main-menu {
    width: auto !important;
    flex: 1 1 auto;
    padding: 0 !important;
  }

  #site-mobile-drawer .mobile-main-menu > ul {
    display: flex !important;
    width: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #site-mobile-drawer .mobile-main-menu > ul > li {
    width: auto !important;
    border-bottom: 0 !important;
  }

  #site-mobile-drawer .mobile-main-menu > ul > li > a,
  #site-mobile-drawer .mobile-main-menu > ul > li > div > a {
    width: auto !important;
    padding: 10px 14px !important;
    white-space: nowrap;
  }

  #site-mobile-drawer .mobile-header-cta-buttons {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    align-items: center;
    white-space: nowrap;
  }
}

/* ---- 9. Static export slider recovery --------------------------------- */
/* Swiper normally positions slides with JS. In the static export some pages
   keep every slide in document flow, which creates the huge dark columns seen
   on laptop/desktop screenshots. Constrain those sections into usable blocks. */
.platform-slider,
.platform-slider .swiper,
.platform-slider .swiper-wrapper,
.ava-slider,
.ava-slider .swiper,
.ava-slider .swiper-wrapper {
  min-height: 0 !important;
}

.platform-slider {
  height: auto !important;
  overflow: hidden !important;
}

.platform-slider .platform-slide {
  height: clamp(320px, 34vw, 500px) !important;
  max-height: 500px !important;
  overflow: hidden !important;
}

.platform-slider .platform-slide .swiper-wrapper {
  display: block !important;
  height: 100% !important;
  transform: none !important;
}

.platform-slider .platform-slide .swiper-slide {
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.platform-slider .platform-slide .swiper-slide-active,
.platform-slider .platform-slide .swiper-slide:first-child {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.platform-slider .platform-slide img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.platform-slider .platform-slide-thumbs {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.platform-slider .platform-slide-thumbs .swiper-wrapper {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  height: auto !important;
  transform: none !important;
}

.platform-slider .platform-slide-thumbs .swiper-slide {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
}

.ava-slider,
.ava-slider .swiper {
  height: auto !important;
  overflow: hidden !important;
}

.ava-slider .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.ava-slider .swiper-slide {
  position: static !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

.ava-slider .swiper-slide:nth-child(n+13),
.ava-slider .swiper-pagination,
.ava-slider .swiper-button-prev,
.ava-slider .swiper-button-next {
  display: none !important;
}

.site-footer .overflow-auto.max-w-screen-3xl.is-style-no-padding {
  display: none !important;
}

@media (max-width: 1023px) {
  .platform-slider .platform-slide {
    height: min(78vw, 360px) !important;
  }

  .platform-slider .platform-slide-thumbs .swiper-wrapper {
    grid-template-columns: 1fr !important;
  }

  .ava-slider .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
  }

  .ava-slider .swiper-slide:nth-child(n+9) {
    display: none !important;
  }
}