/**
 * AdsBackground - PrestaShop Front Office Stylesheet
 * Ensures pristine site layout and container isolation while displaying wallpaper / flank ads.
 */

:root {
  --adsbg-gutter-width: calc((100vw - 1140px) / 2);
  --adsbg-container-width: 1140px;
  --adsbg-container-bg: #ffffff;
  --adsbg-container-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  --adsbg-z-index: 99;
  --adsbg-top-offset: 0px;
}

/* 1. Global Reset of full-width theme wrappers so the ad is visible */
.st-pusher,
.st-wrapper,
#page.st-pusher,
#wrapper,
#page,
#content-wrapper,
main,
#main,
.main-content,
.outside-container,
.top-column-content,
.aone-homepage,
.home-blocks-top {
  background-color: transparent !important;
  background-image: none !important;
}

/* Ensure store content stays on top of wallpaper layer (z-index: 0) */
#page,
main,
.st-pusher,
#wrapper {
  position: relative !important;
  z-index: 2 !important;
}

/* 2. Container Isolation & Content Protection */
.adsbg-isolated-container,
#wrapper .container,
#page .container,
main .container,
.top-column-content .container,
.home-blocks-top .container,
.outside-container .container,
.aone-slideshow.container,
.aone-homepage .container,
#footer .container {
  position: relative !important;
  z-index: 5 !important;
  background-color: var(--adsbg-container-bg, #ffffff) !important;
  box-shadow: var(--adsbg-container-shadow, 0 8px 30px rgba(0, 0, 0, 0.12)) !important;
  border-radius: 4px;
}

.adsbg-isolated-container > * {
  position: relative;
  z-index: 5;
}

/* 2b. Header & Navigation Stacking Context (Ensures Megamenu, Cart & Search dropdowns stay in front of the slider & isolated containers) */
#header,
.desktop-header-version,
.header-main-menu,
#header-main-menu,
#amegamenu {
  position: relative !important;
  z-index: 500 !important;
}

/* Ensure off-canvas mobile drawer stays fixed out of document flow */
.st-menu {
  position: fixed !important;
}

#amegamenu .anav-top .adropdown,
.adropdown,
.cart-preview .cart-dropdown,
.ui-autocomplete {
  z-index: 1050 !important;
}

/* 2c. Header Wings Transparency (Lets flanks and wallpaper ads display at the top without being cut off) */
@media (min-width: 992px) {
  body.adsbg-active-body #header,
  body.adsbg-active-body .desktop-header-version,
  body.adsbg-active-body #header .header-nav,
  body.adsbg-active-body #header .main-header,
  body.adsbg-active-body #header .header-bottom,
  body.adsbg-active-body #header .header-banner,
  body.adsbg-active-body #header .header-event-banner,
  body.adsbg-active-body .desktop-sticky-wrapper:not(.is-sticky),
  body.adsbg-active-body #header-main-menu:not(.is-sticky) {
    background-color: transparent !important;
    background-image: none !important;
  }

  body.adsbg-active-body #header {
    pointer-events: none !important;
  }

  body.adsbg-active-body #header .container,
  body.adsbg-active-body #header [data-sticky-menu].is-sticky {
    background-color: var(--adsbg-container-bg, #ffffff) !important;
    pointer-events: auto !important;
  }

  body.adsbg-active-body #header .header-bottom .container {
    background-color: #ffffff !important;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
  }

  body.adsbg-active-body #header a,
  body.adsbg-active-body #header button,
  body.adsbg-active-body #header input,
  body.adsbg-active-body #header select,
  body.adsbg-active-body #header form,
  body.adsbg-active-body #header .adropdown,
  body.adsbg-active-body #header .cart-preview,
  body.adsbg-active-body #header .search-widget {
    pointer-events: auto !important;
  }
}

/* 3. Backdrop Wrapper (For Flanks and Gutters) */
#adsbg-backdrop-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 0 !important;
  pointer-events: none !important;
  z-index: var(--adsbg-z-index, 99) !important;
}

/* 4. Dedicated Fullscreen Wallpaper Layer (Bypasses any browser body bugs, at z-index 0) */
.adsbg-wallpaper-layer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 5. Clickable Gutters for Wallpaper Mode */
.adsbg-gutter {
  position: fixed !important;
  top: var(--adsbg-top-offset, 0px) !important;
  bottom: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  display: block !important;
  z-index: 98 !important;
  background: transparent !important;
}

.adsbg-gutter-left {
  left: 0 !important;
  width: var(--adsbg-gutter-width, calc((100vw - 1140px) / 2)) !important;
}

.adsbg-gutter-right {
  right: 0 !important;
  width: var(--adsbg-gutter-width, calc((100vw - 1140px) / 2)) !important;
}

/* 6. Flanks Mode (Left & Right Skyscraper Banners) */
.adsbg-flank {
  position: fixed;
  top: var(--adsbg-top-offset, 20px);
  cursor: pointer;
  pointer-events: auto !important;
  display: flex;
  align-items: flex-start;
  text-decoration: none !important;
  z-index: var(--adsbg-z-index, 99);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 320px;
}

.adsbg-flank:hover {
  opacity: 0.95;
  transform: translateY(-2px);
}

.adsbg-flank-sticky {
  position: fixed !important;
}

.adsbg-flank-scroll {
  position: absolute !important;
}

.adsbg-flank-left {
  left: 0;
  width: var(--adsbg-gutter-width, calc((100vw - 1140px) / 2));
  justify-content: flex-end;
  padding-right: 12px;
}

.adsbg-flank-right {
  right: 0;
  width: var(--adsbg-gutter-width, calc((100vw - 1140px) / 2));
  justify-content: flex-start;
  padding-left: 12px;
}

.adsbg-flank img {
  max-width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

/* 7. U-Shape Top Leaderboard Banner */
.adsbg-top-banner-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 15;
  background-color: transparent;
  padding: 10px 0;
}

.adsbg-top-banner-link {
  display: inline-block;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.adsbg-top-banner-link:hover {
  opacity: 0.95;
}

.adsbg-top-banner-link img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* 8. Dismiss / Close Button */
.adsbg-dismiss-btn {
  position: fixed !important;
  top: 15px !important;
  z-index: 1000 !important;
  background: rgba(16, 23, 18, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.25s ease !important;
  letter-spacing: 0.3px !important;
}

.adsbg-dismiss-btn:hover {
  background: rgba(0, 0, 0, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transform: scale(1.04) !important;
}

.adsbg-dismiss-top-right {
  right: 20px !important;
}

.adsbg-dismiss-top-left {
  left: 20px !important;
}

.adsbg-dismiss-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: bold !important;
}

.adsbg-hiding {
  opacity: 0 !important;
  transition: opacity 0.35s ease-out !important;
}

html.adsbg-dismissed #adsbg-backdrop-overlay,
html.adsbg-dismissed #adsbg-wallpaper-layer,
html.adsbg-dismissed .adsbg-dismiss-btn,
html.adsbg-dismissed #adsbg-top-banner {
  display: none !important;
}

/* 9. Hide on screens smaller than min-width */
@media (max-width: 991.98px) {
  .adsbg-gutter,
  .adsbg-flank,
  .adsbg-wallpaper-layer,
  #adsbg-backdrop-overlay,
  .adsbg-dismiss-btn {
    display: none !important;
    pointer-events: none !important;
  }
}