/* PRECEDENCE V56 — reliable full-screen mobile modal shell */

.profile-modal[hidden],
.offer-modal[hidden],
.sell-modal[hidden] {
  display: none !important;
}

/* Direct body children and above every site/header stacking context. */
body > .profile-modal,
body > .offer-modal,
body > .sell-modal {
  z-index: 2147483000 !important;
  isolation: isolate;
}

body.offer-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

@media (max-width: 780px) {
  body > .profile-modal,
  body > .offer-modal,
  body > .sell-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    place-items: initial !important;
    background: rgba(13, 22, 29, 0.68) !important;
    touch-action: pan-y !important;
  }

  body > .profile-modal > .offer-modal-backdrop,
  body > .offer-modal > .offer-modal-backdrop,
  body > .sell-modal > .offer-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: rgba(13, 22, 29, 0.68) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  body > .profile-modal > .profile-dialog,
  body > .offer-modal > .offer-dialog,
  body > .sell-modal > .sell-dialog,
  body > .offer-modal > .offer-contact-dialog-v48 {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding:
      calc(max(12px, env(safe-area-inset-top)) + 64px)
      max(12px, env(safe-area-inset-right))
      calc(max(28px, env(safe-area-inset-bottom)) + 20px)
      max(12px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: auto !important;
    scroll-padding-top: 80px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    touch-action: pan-y !important;
  }

  /* The close control is pinned to the viewport, not the scrolling content. */
  body > .profile-modal .offer-close,
  body > .offer-modal .offer-close,
  body > .sell-modal .offer-close {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    left: auto !important;
    z-index: 2147483646 !important;
    display: grid !important;
    place-items: center !important;
    float: none !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 3px solid #10110f !important;
    border-radius: 4px !important;
    background: #fff8e9 !important;
    color: #10110f !important;
    box-shadow: 4px 4px 0 rgba(16, 17, 15, 0.94) !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  body > .profile-modal .offer-close:active,
  body > .offer-modal .offer-close:active,
  body > .sell-modal .offer-close:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 rgba(16, 17, 15, 0.94) !important;
  }

  /* Remove old right padding hacks now that the X occupies its own fixed layer. */
  body > .profile-modal .profile-modal-heading,
  body > .offer-modal .offer-dialog h2,
  body > .sell-modal .sell-dialog h2 {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  /* Let long profile content expand naturally inside the one scroll container. */
  body > .profile-modal .profile-modal-app,
  body > .profile-modal .profile-progress,
  body > .profile-modal .profile-form,
  body > .profile-modal .step-panel,
  body > .sell-modal .sell-modal-grid,
  body > .offer-modal .offer-contact-options-v48 {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body > .profile-modal .profile-app {
    overflow: visible !important;
  }

  body > .profile-modal .form-actions,
  body > .sell-modal .sell-contact-actions,
  body > .offer-modal .offer-contact-note-v48 {
    margin-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
}