/* ===========================
   PWA Banner & Toaster Styles
   Only styles that DON'T exist in
   base.css / utilities.css / sdsRebrand.css
   =========================== */

/* Shared background layer */
.pwa-bg {
  inset: 0;
  pointer-events: none;
}

.pwa-bg-base {
  inset: 0;
  background: var(--semantic-background-surface-4, #1a1a1a);
  mix-blend-mode: saturation;
}
/* ===========================
   PWA Menu Banner (258×160)
   =========================== */
.pwa-menu-banner {
  height: 160px;
}

.pwa-menu-banner-content {
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 140px;
}

.pwa-menu-banner-title {
  font-family: var(--sds-typeface-font-family-headers);
  font-weight: 900;
  font-size: var(--sds-typeface-size-h5, 20px);
  line-height: 1;
}

.pwa-menu-banner-subtitle {
  font-family: var(--sds-typeface-font-family-headers);
  font-weight: 800;
  font-size: var(--sds-typeface-size-caption, 12px);
  line-height: 1;
}

/* ===========================
   PWA Toaster (358×62)
   =========================== */
.pwa-toaster-wrapper {
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (min-width: 701px) {
  .pwa-toaster-wrapper {
    top: 95px;
    left: auto;
    right: 16px;
    transform: none;
  }
}

.pwa-toaster {
  width: 358px;
  max-width: calc(100vw - 32px);
  height: 62px;
  box-shadow: 0px 4px 9.3px 1px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: pwa-toaster-slide-in 0.35s ease-out;
  background-color: rgb(27, 9, 44);
}

.pwa-toaster.pwa-toaster-exit {
  animation: pwa-toaster-slide-out 0.3s ease-in forwards;
}

.pwa-toaster-content {
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
}

.pwa-toaster-text {
  font-family: var(--sds-typeface-font-family-headers);
  font-weight: 800;
  font-size: var(--sds-typeface-size-caption);
  line-height: 1.2;
}

/* Animations */
@keyframes pwa-toaster-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pwa-toaster-slide-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* ===========================
   PWA Home Banner (carousel slide)
   =========================== */

.pwa-home-banner-content {
  inset: 0;
  padding-inline: 17vw;
}

.pwa-home-banner-text-col {
  justify-content: center;
  max-width: 39vw;
}
.pwa-home-banner-title {
  font-family: var(--sds-typeface-font-family-headers);
  font-weight: 900;
  font-size: 6.6vw;
  line-height: 1;
}

.pwa-home-banner-subtitle {
  font-family: var(--sds-typeface-font-family-headers);
  font-weight: 800;
  line-height: 1.2;
  font-size: 3vw;
}

.pwa-home-banner {
  cursor: pointer;
}

.pwa-home-banner-bg {
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ≤701px: mobile */
@media (min-width: 700px) {
  .pwa-home-banner-content {
    padding-inline: 9vw;
  }
  .pwa-home-banner-text-col {
    max-width: 26vw;
  }

  .pwa-home-banner-title {
    font-size: 4.2vw;
  }

  .pwa-home-banner-subtitle {
    font-size: 1.7vw;
    line-height: 1.2;
  }
}

/* 701px–950px medium screens */
@media (min-width: 950px) {
  .pwa-home-banner-content {
    padding-inline: 9vw;
  }

  .pwa-home-banner-text-col {
    max-width: 380px;
  }

  .pwa-home-banner-title {
    font-size: calc(min(32px, 2.4vw));
  }

  .pwa-home-banner-subtitle {
    font-size: calc(min(14px, 1vw));
  }
}