/* modal-ux-v3.css */
.rate-modal-overlay,
.rate-sheet-overlay {
  top: var(--rate-viewport-top, 0px);
  bottom: auto;
  height: var(--rate-viewport-height, 100dvh);
  animation: rateOverlayIn 160ms ease-out backwards;
}

.rate-modal {
  max-height: calc(var(--rate-viewport-height, 100dvh) - 40px);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 20px;
  touch-action: pan-y;
  animation: rate-dialog-enter 220ms ease-out backwards;
}

.rate-modal-country-menu {
  position: relative;
  top: auto;
  margin-top: 8px;
  max-height: min(300px, 40dvh);
}

.rate-sheet {
  max-height: calc(var(--rate-viewport-height, 100dvh) - 12px);
  min-height: 0;
  animation: rate-dialog-enter 220ms ease-out backwards;
}

.rate-sheet.rate-sheet--country {
  position: relative;
  height: auto;
  max-height: min(620px, calc(var(--rate-viewport-height, 100dvh) - 12px));
}

.rate-sheet--country .rate-modal-country-list {
  flex: 0 1 auto;
}

.rate-sheet--country .rate-modal-close {
  top: 12px;
  right: 16px;
}

.rate-modal-country-list {
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.rate-modal-edit-number {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 0 0 12px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--rate-gold);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.rate-modal-edit-number:disabled {
  opacity: .5;
  cursor: default;
}

.rate-modal-stage {
  animation: rate-stage-enter 180ms ease-out backwards;
}

.rate-modal:focus-within,
.rate-sheet:focus-within,
.rate-modal-stage:focus-within {
  animation: none;
}

@keyframes rate-stage-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rate-dialog-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rate-dialog-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 560px) {
  .rate-modal-overlay,
  .rate-sheet-overlay {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .rate-modal,
  .rate-sheet {
    flex: 0 1 auto;
    max-height: calc(var(--rate-viewport-height, 100dvh) - 12px);
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    will-change: auto;
    animation: rate-dialog-enter 220ms ease-out backwards;
  }
}

.rate-modal.rate-modal--closing,
.rate-sheet.rate-sheet--closing {
  animation: rate-dialog-exit 180ms ease-in both;
}

.rate-modal-overlay.rate-modal-overlay--closing,
.rate-sheet-overlay.rate-sheet-overlay--closing {
  animation: rateOverlayOut 180ms ease-in both;
}

@media (prefers-reduced-motion: reduce) {
  .rate-modal,
  .rate-modal-stage,
  .rate-sheet,
  .rate-modal-overlay,
  .rate-sheet-overlay {
    animation: none !important;
  }
}

/* The auth portal inherits the same theme outside the animated landing page. */
.rate-modal-overlay,
.rate-sheet-overlay {
  --rate-gold: #e7c26a;
  --rate-gold-light: #f6e6b2;
  --rate-text: #f5f2ea;
  --rate-muted: #a7a29a;
  --rate-border: #e7c26a21;
  color: var(--rate-text);
  line-height: 1.55;
  font-size: 16px;
}
.rate-modal-overlay *, .rate-modal-overlay *::before, .rate-modal-overlay *::after,
.rate-sheet-overlay *, .rate-sheet-overlay *::before, .rate-sheet-overlay *::after {
  box-sizing: border-box;
}
.rate-modal-overlay :where(button, input),
.rate-sheet-overlay :where(button, input) { font: inherit; }
.rate-modal-overlay a, .rate-sheet-overlay a { color: inherit; text-decoration: none; }
/* Render every auth step immediately, even while native UI pauses animations. */
.rate-modal-stage { animation: none; }
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .rate-modal-overlay, .rate-sheet-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(8, 8, 10, .88);
    animation: none;
  }
  .rate-modal:not(.rate-modal--closing), .rate-sheet:not(.rate-sheet--closing) {
    animation: none;
  }
  html.rate-scroll-locked .rate-page * { animation-play-state: paused !important; }
}