/* PWA install promotion and device-specific installation guide. */
.ss-app-install-promotion[hidden],
.ss-app-install-guide[hidden] {
  display: none !important;
}

.ss-app-install-promotion {
  position: fixed;
  left: max(24px, var(--ss-safe-area-left));
  bottom: max(24px, var(--ss-safe-area-bottom));
  z-index: calc(var(--ss-layer-toast, 10040) - 1);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: min(430px, calc(100vw - 48px));
  min-height: 82px;
  padding: 10px 12px;
  border: 1px solid var(--ss-surface-border, rgba(255, 255, 255, .08));
  border-radius: 18px;
  background: var(--ss-surface-bg-elevated, #202020);
  color: #f5f5f5;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .36);
  direction: rtl;
  text-align: right;
  isolation: isolate;
  animation: ssAppInstallPromotionIn 260ms var(--ss-surface-ease-enter, cubic-bezier(.22, 1, .36, 1)) both;
}

body.ss-mini-visible .ss-app-install-promotion {
  bottom: max(106px, calc(var(--ss-safe-area-bottom) + 106px));
}

body.ss-full-player-open .ss-app-install-promotion,
body.ss-player-sheet-open .ss-app-install-promotion,
body.ss-offline-visible .ss-app-install-promotion,
body.ss-pjax-loading .ss-app-install-promotion {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.ss-app-install-promotion__icon,
.ss-app-install-guide__icon {
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: #222;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

.ss-app-install-promotion__copy {
  min-width: 0;
  align-self: center;
}

.ss-app-install-promotion__title,
.ss-app-install-promotion__text {
  display: block;
}

.ss-app-install-promotion__title {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.ss-app-install-promotion__text {
  margin-top: 1px;
  color: #aaa;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
}

.ss-app-install-promotion__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.ss-app-install-promotion__action,
.ss-app-install-guide__done {
  border: 0;
  background: #2a2a2a;
  color: #f2f2f2;
  font-family: inherit;
  font-weight: 850;
  cursor: pointer;
  box-shadow: none;
  transform: scale(1);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease;
}

.ss-app-install-promotion__action {
  min-width: 64px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.ss-app-install-promotion__action:hover,
.ss-app-install-promotion__action:focus-visible {
  background: #fbcb07;
  color: #111;
  outline: 0;
  transform: scale(1.03);
}

.ss-app-install-promotion__action:active {
  background: #fbcb07;
  color: #111;
  transform: scale(.97);
}

.ss-app-install-promotion__action:disabled {
  opacity: .58;
  cursor: wait;
}

.ss-app-install-promotion__dismiss {
  position: absolute;
  top: -8px;
  right: auto;
  left: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  background: #202020;
  color: #9a9a9a;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
  z-index: 3;
}

.ss-app-install-promotion__dismiss::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.ss-app-install-promotion__dismiss:hover,
.ss-app-install-promotion__dismiss:focus-visible {
  background: #2a2a2a;
  color: #eee;
}

.ss-app-install-promotion :is(button):focus-visible,
.ss-app-install-guide :is(button):focus-visible {
  outline: 2px solid #fbcb07;
  outline-offset: 3px;
}

.ss-app-install-promotion__action:focus-visible,
.ss-app-install-guide__done:focus-visible {
  outline: 0;
}

.ss-app-install-guide__backdrop {
  position: fixed;
  inset: 0;
  display: none;
  background: var(--ss-surface-backdrop-dialog, rgba(8, 8, 8, .32));
  opacity: 0;
  pointer-events: none;
}

#ss-surface-host > .ss-app-install-guide__backdrop[data-ss-surface-stack-index] {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.ss-app-install-guide {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: max(18px, var(--ss-safe-area-top)) max(18px, var(--ss-safe-area-right)) max(18px, var(--ss-safe-area-bottom)) max(18px, var(--ss-safe-area-left));
  pointer-events: none;
}

.ss-app-install-guide__surface {
  position: relative;
  box-sizing: border-box;
  width: min(440px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 36px));
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 22px;
  background: #1b1b1b;
  color: #f5f5f5;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .46);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.985);
  transition:
    opacity var(--ss-surface-duration-fast, 180ms) var(--ss-surface-ease-enter, cubic-bezier(.22, 1, .36, 1)),
    transform var(--ss-surface-duration-enter, 260ms) var(--ss-surface-ease-enter, cubic-bezier(.22, 1, .36, 1));
  direction: rtl;
  text-align: right;
  pointer-events: auto;
}

.ss-app-install-guide.is-open .ss-app-install-guide__surface {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.ss-app-install-guide.is-closing .ss-app-install-guide__surface {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(.99);
  transition-timing-function: var(--ss-surface-ease-exit, cubic-bezier(.4, 0, .2, 1));
}

.ss-app-install-guide__handle {
  display: none;
}

.ss-app-install-guide__close {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #777;
  font-size: 16px;
  cursor: pointer;
}

.ss-app-install-guide__close:hover,
.ss-app-install-guide__close:focus-visible {
  background: rgba(255, 255, 255, .055);
  color: #fff;
}

.ss-app-install-guide__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 34px;
}

.ss-app-install-guide__icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow: none;
}

.ss-app-install-guide__eyebrow {
  display: block;
  margin-bottom: 1px;
  color: #d8af0b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.ss-app-install-guide h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: -.01em;
}

.ss-app-install-guide__steps {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.ss-app-install-guide__step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 0;
  padding: 11px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ss-app-install-guide__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 41px;
  right: 15px;
  bottom: -11px;
  z-index: 0;
  width: 1px;
  background: rgba(255, 255, 255, .1);
}

.ss-app-install-guide__step-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #2a2a2a;
  color: #f2f2f2;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .1px;
}

.ss-app-install-guide__step-copy {
  min-width: 0;
}

.ss-app-install-guide__step-title,
.ss-app-install-guide__step-text {
  display: block;
}

.ss-app-install-guide__step-title {
  margin: 0;
  color: #f3f3f3;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.65;
}

.ss-app-install-guide__step-text {
  margin-top: 2px;
  color: #858585;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.75;
}

.ss-app-install-guide__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 22px 0 0;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1;
}

.ss-app-install-guide__done:hover,
.ss-app-install-guide__done:focus-visible {
  background: #fbcb07;
  color: #111;
  transform: scale(1.018);
}

.ss-app-install-guide__done:active {
  background: #fbcb07;
  color: #111;
  transform: scale(.985);
}

@media (min-width: 760px) {
  .ss-app-install-guide__done {
    width: 220px;
    margin: 24px 0 0 auto;
  }
}

@media (max-width: 759.98px) {
  .ss-app-install-promotion {
    right: max(12px, var(--ss-safe-area-right));
    left: max(12px, var(--ss-safe-area-left));
    bottom: calc(var(--ss-mobile-tabbar-height, 80px) + var(--ss-safe-area-bottom) + 12px);
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    width: auto;
    min-height: 82px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  body.ss-mini-visible .ss-app-install-promotion {
    bottom: calc(var(--ss-mobile-tabbar-height, 80px) + var(--ss-mini-player-content-reserve, 94px) + var(--ss-safe-area-bottom) + 12px);
  }

  .ss-app-install-promotion__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .ss-app-install-promotion__action {
    min-width: 64px;
    min-height: 40px;
    padding: 8px 12px;
  }

  .ss-app-install-guide {
    align-items: flex-end;
    padding: 0;
  }

  .ss-app-install-guide__surface {
    width: 100%;
    max-height: var(--ss-surface-mobile-max-height, calc(100dvh - 64px));
    padding: 10px 18px max(18px, var(--ss-safe-area-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--ss-surface-radius-sheet, 18px 18px 0 0);
    box-shadow: var(--ss-surface-shadow-sheet, 0 -18px 42px rgba(0, 0, 0, .32));
    transform: translate3d(0, 18px, 0);
  }

  .ss-app-install-guide.is-open .ss-app-install-guide__surface {
    transform: translate3d(0, var(--ss-app-install-motion-y, 0px), 0);
  }

  .ss-app-install-guide.is-closing .ss-app-install-guide__surface {
    transform: translate3d(0, 18px, 0);
  }

  .ss-app-install-guide__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin: -2px -4px 7px;
    touch-action: none;
  }

  .ss-app-install-guide__handle span {
    width: var(--ss-surface-handle-width, 42px);
    height: var(--ss-surface-handle-height, 4px);
    border-radius: var(--ss-surface-handle-radius, 999px);
    background: var(--ss-surface-handle-color, rgba(255, 255, 255, .26));
  }

  .ss-app-install-guide__close {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  .ss-app-install-guide__close:focus-visible {
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  .ss-app-install-guide__header {
    padding-left: 0;
  }

  .ss-app-install-guide__steps {
    margin-top: 10px;
  }

  .ss-app-install-guide__step {
    padding: 10px 0;
  }
}

@media (max-width: 380px) {
  .ss-app-install-promotion {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ss-app-install-promotion__icon {
    width: 42px;
    height: 42px;
  }

  .ss-app-install-promotion__text {
    font-size: 11px;
  }

  .ss-app-install-promotion__action {
    min-width: 58px;
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-app-install-promotion,
  .ss-app-install-guide__surface {
    animation: none !important;
    transition-duration: 0ms !important;
  }
}

@keyframes ssAppInstallPromotionIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(.99);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}