/* ═══════════════════════════════════════════════════════════════════════════
   PetMarket — Mini App Styles
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #635CFB;
  --btn-bg: #EEEDFF;
  --btn-bg-hover: #DBD9FF;
  --text-dark: #1A1A2E;
  --text-secondary: #8E8EA0;
  --text-btn: #635CFB;
  --radius-btn: 14px;
  --font: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  /* v47 */
}

/* Мигающая каретка во всех полях ввода — фирменный фиолетовый.
   (.sms-digit сохраняет свой caret-color: transparent — класс специфичнее) */
input,
textarea,
[contenteditable] {
  caret-color: var(--primary);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font);
  background: #FFFFFF;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.screen {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Неактивные экраны убираем из отрисовки, а не только гасим прозрачностью:
     иначе на iOS при быстром инерционном скролле композитор мельком показывает
     нижележащий экран (visibility выключаем после того, как opacity догас) */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  z-index: 1;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
  z-index: 10;
}