/* Patch v23: mobile popup/modal topbar clearance
   Keep every app popup below the fixed mobile topbar instead of letting popup
   headers sit underneath the left/right flyout button bar. This intentionally
   targets the shared popup families rather than only one popup instance. */
@media (max-width: 780px){
  :root{
    --ccc-mobile-popup-gap: 10px;
    --ccc-mobile-popup-top: calc(var(--topbar-h, 56px) + max(var(--ccc-mobile-popup-gap), env(safe-area-inset-top, 0px)));
    --ccc-mobile-popup-bottom: calc(max(var(--ccc-mobile-popup-gap), env(safe-area-inset-bottom, 0px)));
    --ccc-mobile-popup-side: max(10px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }

  /* The dimmed layer starts under the topbar so the two flyout buttons never sit
     on top of dimmed/popup content. */
  .modal-overlay,
  .protip-popup-overlay,
  .ccc-gallery-overlay,
  html body #protipPopupOverlay.protip-popup-overlay,
  html body #protipPopupOverlay.protip-popup-overlay.open,
  html body #protipPopupOverlay.protip-popup-overlay.is-1cc-social-club-popup,
  html body #protipPopupOverlay.protip-popup-overlay.open.is-1cc-social-club-popup{
    position: fixed !important;
    top: var(--ccc-mobile-popup-top) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: var(--ccc-mobile-popup-top) 0 0 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    z-index: 2400 !important;
  }

  .modal-overlay{
    z-index: 2000 !important;
  }

  /* Shared Add/Edit/Privacy modal panel placement. */
  .modal,
  #addCardModal,
  #editCardModal,
  #privacyModal{
    position: fixed !important;
    top: var(--ccc-mobile-popup-top) !important;
    right: var(--ccc-mobile-popup-side) !important;
    bottom: var(--ccc-mobile-popup-bottom) !important;
    left: var(--ccc-mobile-popup-side) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    z-index: 2100 !important;
  }

  .modal.open,
  #addCardModal.open,
  #editCardModal.open,
  #privacyModal.open{
    display: flex !important;
    flex-direction: column !important;
  }

  .modal header,
  .modal .modal-footer{
    flex: 0 0 auto !important;
  }

  .modal .modal-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Shared Pro Tip / 1CC popup placement. Overrides the previous one-off 1CC
     z-index/top rules so this popup follows the same topbar clearance as every
     other popup. */
  .protip-popup-overlay,
  .ccc-gallery-overlay,
  html body #protipPopupOverlay.protip-popup-overlay,
  html body #protipPopupOverlay.protip-popup-overlay.open,
  html body #protipPopupOverlay.protip-popup-overlay.is-1cc-social-club-popup,
  html body #protipPopupOverlay.protip-popup-overlay.open.is-1cc-social-club-popup{
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: var(--ccc-mobile-popup-gap) !important;
    padding-right: var(--ccc-mobile-popup-side) !important;
    padding-bottom: var(--ccc-mobile-popup-bottom) !important;
    padding-left: var(--ccc-mobile-popup-side) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .protip-popup,
  html body #protipPopupOverlay #protipPopup.protip-popup,
  html body #protipPopupOverlay.is-1cc-social-club-popup #protipPopup.protip-popup{
    position: relative !important;
    width: 100% !important;
    max-width: 920px !important;
    max-height: calc(100dvh - var(--ccc-mobile-popup-top) - var(--ccc-mobile-popup-bottom) - (var(--ccc-mobile-popup-gap) * 2)) !important;
    margin: 0 auto !important;
    z-index: 2401 !important;
    overflow: hidden !important;
  }

  .protip-popup-header,
  .ccc-gallery-toolbar{
    flex: 0 0 auto !important;
  }

  .protip-popup-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Fit-screen gallery is also a popup and should honor the same header gap. */
  .ccc-gallery-modal{
    width: 100% !important;
    max-width: 920px !important;
    max-height: calc(100dvh - var(--ccc-mobile-popup-top) - var(--ccc-mobile-popup-bottom) - (var(--ccc-mobile-popup-gap) * 2)) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  .ccc-gallery-stage-wrap{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}