/* PhotoTag v2.01.82 - modal close buttons are anchored to the modal CARD */

@media(max-width:760px){
  /*
    Card modals become a one-column grid. The close button is explicitly
    placed in grid row 1 / right edge, so its DOM position does not matter.
    Sticky positioning keeps it pinned to the CARD scrollport, not the viewport.
  */
  .maintenance-modal-card:has(.update-close),
  .edit-panel-card:has(.update-close){
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 44px!important;
    grid-auto-flow:row!important;
    overflow-y:auto!important;
  }

  .maintenance-modal-card:has(.update-close) > :not(.update-close),
  .edit-panel-card:has(.update-close) > :not(.update-close){
    grid-column:1 / -1!important;
    min-width:0!important;
  }

  .maintenance-modal .update-close,
  .edit-panel .update-close{
    grid-column:2!important;
    grid-row:1!important;
    align-self:start!important;
    justify-self:end!important;
    position:sticky!important;
    top:10px!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    z-index:1000!important;
    float:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    margin:0!important;
    transform:none!important;
  }

  /* The first heading shares row 1 visually; reserve the X corner. */
  .maintenance-modal-card:has(.update-close) > h3,
  .edit-panel-card:has(.update-close) > h3{
    grid-row:1!important;
    padding-right:56px!important;
  }

  /* Full-screen image viewers are not card modals and remain viewport-anchored. */
  .lightbox-close,
  .upload-lightbox-close,
  .personal-close{
    position:fixed!important;
    top:calc(var(--pt-modal-safe-top) + 10px)!important;
    right:calc(var(--pt-modal-edge) + 10px)!important;
    left:auto!important;
    bottom:auto!important;
    z-index:1000!important;
    margin:0!important;
    transform:none!important;
  }
}
