/* HOLIDAYS v1.9.0 — MV phone/button alignment */

/* PLAY ME is part of the tilted phone and inherits its angle and motion. */
.phone-stage {
  padding-bottom: 58px !important;
}

.phone-frame > .phone-label {
  align-items: center;
  background: var(--yellow);
  border: 3px solid var(--navy);
  border-radius: 999px;
  bottom: -27px !important;
  box-shadow: 0 8px 16px rgba(22, 38, 79, .22) !important;
  color: var(--navy);
  display: inline-flex;
  font-size: 13px;
  font-weight: 1000;
  gap: 8px;
  justify-content: center;
  left: 50% !important;
  letter-spacing: .08em;
  min-height: 46px;
  min-width: 154px;
  padding: 9px 20px;
  position: absolute;
  right: auto !important;
  text-decoration: none;
  transform: translateX(-50%) !important;
  transition: background-color .2s ease, box-shadow .2s ease, translate .2s ease;
  white-space: nowrap;
  z-index: 8;
}

.phone-frame > .phone-label:hover,
.phone-frame > .phone-label:focus-visible {
  background: #fff1a8;
  box-shadow: 0 11px 20px rgba(22, 38, 79, .27) !important;
  outline: 3px solid white;
  outline-offset: 3px;
  translate: 0 -2px;
}

.phone-frame > .phone-label span {
  font-size: 11px;
}

@media (max-width: 760px) {
  .phone-stage {
    padding-bottom: 66px !important;
  }

  .phone-frame > .phone-label {
    bottom: -25px !important;
    font-size: 12px;
    min-height: 44px;
    min-width: 146px;
    padding: 8px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-frame > .phone-label {
    transition: none;
  }
}