/* Layered important rules keep modal navigation independent of general form-button rules. */
@layer modal-controls {
  dialog.sales-lightbox[open] {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
  }
  dialog.sales-lightbox > .sales-close {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    margin: 0 0 0 auto !important;
  }
  dialog.sales-lightbox > figure {
    min-height: 0 !important;
    overflow: auto !important;
  }
  dialog.sales-lightbox > figure > img {
    max-height: min(65vh, calc(100dvh - 240px)) !important;
  }
  dialog.sales-lightbox > .sales-controls {
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: auto !important;
  }
  dialog.sales-lightbox [data-sales-prev] {
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    margin: 0 auto 0 0 !important;
  }
  dialog.sales-lightbox [data-sales-next] {
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    margin: 0 0 0 auto !important;
  }
  dialog.site-modal > .modal-close,
  dialog.urban-video-modal > .urban-video-close,
  dialog.terms-modal > .terms-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    margin: 0 !important;
    align-self: flex-end !important;
  }
  dialog.site-modal.success-modal { padding-top: 76px !important; }
  dialog.site-modal.success-modal > .success-ok {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    margin: 0 !important;
  }
  dialog.online-purchase-dialog > .purchase-close,
  dialog.report-entry-dialog > .report-entry-close,
  dialog.modal > .modal-close,
  dialog.action-share-dialog > .action-share-close {
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-end !important;
    justify-self: end !important;
  }
  dialog.action-share-dialog > .action-share-close { margin-top: 0 !important; margin-bottom: 16px !important; }
  dialog.terms-modal .terms-actions [data-terms-close] { display: none !important; }

  dialog :is(.sales-close, .purchase-close, .report-entry-close, .action-share-close, .success-ok) {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
}