/* RG COMPANY — smooth mobile bottom sheet for Telegram Mini App / iOS WebView.
   The dialog stays at the bottom before the keyboard appears. The keyboard is
   followed with a compositor-only transform, so opening it does not re-layout
   the whole modal and switching between fields does not make the page jump. */

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  :root {
    --rg-layout-height: 100vh;
    --rg-visible-height: 100vh;
    --rg-keyboard-inset: 0px;
  }

  html,
  body.cabinet-body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  /* Prevent iOS / Telegram WebView focus zoom. */
  body.cabinet-body input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  body.cabinet-body textarea,
  body.cabinet-body select,
  body.cabinet-body .rg-md-field .custom-select-button {
    font-size: 16px !important;
  }

  html.rg-modal-open,
  body.cabinet-body.rg-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.cabinet-body #modal-root {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    height: var(--rg-layout-height) !important;
    pointer-events: none !important;
    contain: layout paint style !important;
  }

  body.cabinet-body #modal-root:not(:empty) {
    pointer-events: auto !important;
  }

  body.cabinet-body .modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--rg-layout-height) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 8px 0 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: pan-y !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 180ms ease-out, visibility 0s linear 180ms !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.cabinet-body .modal-backdrop.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 180ms ease-out, visibility 0s linear 0s !important;
  }

  body.cabinet-body .modal-backdrop.is-closing {
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  /* `transform` follows the keyboard on the compositor. `translate` is kept
     separate and is used only for the open/close animation. This avoids
     animating height/top/bottom while the OS keyboard changes the viewport. */
  body.cabinet-body .modal-backdrop > .modal,
  body.cabinet-body .modal-backdrop.is-open > .modal,
  body.cabinet-body .modal-backdrop.is-closing > .modal {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--rg-modal-max-height, calc(var(--rg-layout-height) - 8px)) !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    contain: layout paint style !important;
    border-radius: 22px 22px 0 0 !important;

    opacity: 0 !important;
    translate: 0 22px !important;
    transform: translate3d(0, calc(-1 * var(--rg-keyboard-inset)), 0) !important;
    transform-origin: center bottom !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    will-change: transform, translate, opacity !important;
    filter: none !important;
    animation: none !important;
    transition:
      opacity 180ms ease-out,
      translate 280ms cubic-bezier(.2, .8, .2, 1),
      border-color 160ms ease,
      background-color 160ms ease,
      box-shadow 160ms ease !important;
  }

  body.cabinet-body .modal-backdrop.is-open > .modal {
    opacity: 1 !important;
    translate: 0 0 !important;
  }

  body.cabinet-body .modal-backdrop.is-closing > .modal {
    opacity: 0 !important;
    translate: 0 14px !important;
  }

  body.cabinet-body .modal-head,
  body.cabinet-body .modal-foot {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }

  body.cabinet-body .modal-body {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-anchor: none !important;
    scroll-behavior: auto !important;
    touch-action: pan-y !important;
    contain: layout style !important;
  }

  body.cabinet-body .modal-body .form-grid {
    align-content: start !important;
  }

  body.cabinet-body .modal-body .field,
  body.cabinet-body .modal-body .rg-md-field,
  body.cabinet-body .modal-body input,
  body.cabinet-body .modal-body textarea,
  body.cabinet-body .modal-body select,
  body.cabinet-body .modal-body .custom-select-button {
    scroll-margin-block: 14px 24px !important;
  }

  body.cabinet-body .modal-foot {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  body.cabinet-body.rg-mobile-keyboard-open .modal-foot {
    padding-bottom: 12px !important;
  }

  /* Keep touch animations cheap on mobile. No blur/filter or hover movement. */
  body.cabinet-body .modal .btn,
  body.cabinet-body .modal .icon-btn,
  body.cabinet-body .modal .modal-close,
  body.cabinet-body .modal .custom-select-button,
  body.cabinet-body .custom-select-list {
    -webkit-tap-highlight-color: transparent !important;
    backface-visibility: hidden !important;
  }

  body.cabinet-body .modal .btn:hover:not(:disabled),
  body.cabinet-body .modal .icon-btn:hover:not(:disabled),
  body.cabinet-body .modal .modal-close:hover:not(:disabled) {
    transform: none !important;
  }

  body.cabinet-body .custom-select-list {
    will-change: transform, opacity !important;
    filter: none !important;
  }

  /* On mobile the floating caption moves only with transform. Animating top
     and left forces layout on every frame and was visible as stutter. */
  body.cabinet-body .rg-md-hint {
    top: 50% !important;
    left: 16px !important;
    will-change: transform, color !important;
    transition:
      color var(--rg-md-motion),
      background-color var(--rg-md-motion),
      padding var(--rg-md-motion),
      transform var(--rg-md-motion) !important;
  }

  body.cabinet-body .rg-md-field.rg-md-outlined:is(.has-value, .is-focused, .is-open) > .rg-md-hint {
    top: 50% !important;
    left: 16px !important;
    transform: translateY(calc(-50% - 28px)) scale(.78) !important;
  }

  body.cabinet-body .rg-md-field.rg-md-filled:is(.has-value, .is-focused, .is-open) > .rg-md-hint {
    top: 50% !important;
    left: 16px !important;
    transform: translateY(calc(-50% - 10px)) scale(.78) !important;
  }

  /* While the viewport itself is animating, only compositor properties are
     allowed to change. Material label/ripple animations remain enabled. */
  body.cabinet-body.rg-viewport-moving .modal-backdrop,
  body.cabinet-body.rg-viewport-moving .modal-backdrop > .modal,
  body.cabinet-body.rg-viewport-moving .modal-head,
  body.cabinet-body.rg-viewport-moving .modal-body,
  body.cabinet-body.rg-viewport-moving .modal-foot {
    animation: none !important;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce),
       (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  body.cabinet-body .modal-backdrop,
  body.cabinet-body .modal-backdrop > .modal {
    transition-duration: 1ms !important;
  }
}