/* ShopSmart storefront splash — Shopee/Lazada-style interstitial.
   A dimmed, opaque backdrop with the promo image floating on top. Dismiss by
   tapping anywhere on it, the close button, or Esc — see splash-modal.js for
   why every way out is wired and why the page lock goes through
   SSScrollLock rather than document.body.style.overflow. */

.ss-splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 20, 48, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
  /* The whole surface dismisses, so say so on a mouse. */
  cursor: pointer;
  /* Don't hand a scroll that starts on the backdrop to the page behind. */
  overscroll-behavior: contain;
}

/* The moment it starts fading it stops taking input: for the ~0.2s it is still
   in the DOM it is invisible, and an invisible layer that still swallows taps
   is exactly what "the page is frozen" feels like. */
.ss-splash-overlay.ss-splash-hiding {
  pointer-events: none;
}

/* Blurring a full-screen backdrop over a 5,000px storefront costs a whole-page
   composite on a phone GPU. The 72% dim already separates the artwork, so
   touch devices get the dim without the blur. */
@media (hover: none), (max-width: 480px) {
  .ss-splash-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.ss-splash-overlay.ss-splash-show {
  opacity: 1;
}
.ss-splash-overlay.ss-splash-hiding {
  opacity: 0;
}

/* Promo art is drawn for a white page. The 11-09 Early Bird sticker had a
   wobbly white outline cut flat at the file's edges, which read as rough
   floated on the navy dim; the 11-10 art has a navy logo on transparency that
   would vanish into it. So the art sits on a white card, the way it looks in
   its source, and the card's
   rounded edge is the silhouette. */
.ss-splash-box {
  --ss-splash-pad: 14px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: var(--ss-splash-pad);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  /* The promo is portrait (600×750, 4:5). Cap the card so the art inside it
     is never taller than the overlay's padded height (a landscape phone is
     ~390px tall), and stop the art at 400px wide on a desktop (500px tall).
     0.8 = 600 / 750. */
  max-width: min(calc(400px + 2 * var(--ss-splash-pad)), 92vw, calc((100vh - 40px - 2 * var(--ss-splash-pad)) * 0.8 + 2 * var(--ss-splash-pad)));
  max-width: min(calc(400px + 2 * var(--ss-splash-pad)), 92vw, calc((100dvh - 40px - 2 * var(--ss-splash-pad)) * 0.8 + 2 * var(--ss-splash-pad)));
  transform: scale(0.94);
  transition: transform 0.2s ease;
}
.ss-splash-overlay.ss-splash-show .ss-splash-box {
  transform: scale(1);
}

/* The card carries the shadow; a drop-shadow filter on an animated image would
   also be re-rasterised on every frame. */
.ss-splash-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.ss-splash-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #0d2b55;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, background 0.12s ease;
  z-index: 1;
}
.ss-splash-close:hover {
  transform: scale(1.1);
  background: #143a70;
}
.ss-splash-close:focus-visible {
  outline: 3px solid #29baff;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .ss-splash-box {
    --ss-splash-pad: 10px;
    border-radius: 16px;
  }
  /* A 44px target, the smallest a thumb hits reliably. It overhangs the card's
     corner by 10px, which the overlay's 20px padding keeps inside the
     viewport. */
  .ss-splash-close {
    top: -10px;
    right: -10px;
    width: 44px;
    height: 44px;
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-splash-overlay,
  .ss-splash-box {
    transition: none;
  }
}