/**
 * Popup Manager Styles
 * 
 * Base modal styling comes from Modal.scss via Modal.jsx
 * reactjs-popup appends -overlay and -content to the className
 */

/* Ensure popup-manager modals center properly */
.popup-manager-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Apply admin-set overlay styles via CSS custom properties */
/* This ensures they override default Modal.scss styles */
.popup-manager-modal-overlay[style*="--popup-overlay-bg"] {
  background-color: var(--popup-overlay-bg) !important;
}

.popup-manager-modal-overlay[style*="--popup-overlay-border"] {
  border: var(--popup-overlay-border) !important;
}

.popup-manager-modal-overlay[style*="--popup-overlay-margin"] {
  margin: var(--popup-overlay-margin) !important;
}

.popup-manager-modal-overlay[style*="--popup-overlay-padding"] {
  padding: var(--popup-overlay-padding) !important;
}

/* popup-content: width and position */
.popup-manager-modal-content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  /* Reset width constraints from Modal.scss to allow inline styles */
  width: auto !important;
  /* Override reactjs-popup default margin: auto which centers content */
  margin: 0 !important;
  max-height: 90vh;
  overflow: auto;
  /* Reset background/border - let inner content div handle these */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Default max-width only when no inline style is set */
.popup-manager-modal-content:not([style*="--popup-content-max-width"]) {
  max-width: 90vw;
}

/* Apply admin-set width/position styles on popup-content */
.popup-manager-modal-content[style*="--popup-content-width"] {
  width: var(--popup-content-width) !important;
}

.popup-manager-modal-content[style*="--popup-content-height"] {
  height: var(--popup-content-height) !important;
}

.popup-manager-modal-content[style*="--popup-content-max-width"] {
  max-width: var(--popup-content-max-width) !important;
}

.popup-manager-modal-content[style*="--popup-content-margin"] {
  margin: var(--popup-content-margin) !important;
}

.popup-manager-modal-content[style*="--popup-content-margin-top"] {
  margin-top: var(--popup-content-margin-top) !important;
}

/* ===========================================================================
   popup__modal--content-popup-manager: background, border, padding, etc.
   =========================================================================== */
.popup__modal--content-popup-manager {
  position: relative;
}

/* Close button positioned within the content padding */
.popup__modal--content-popup-manager .popup__modal--close {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 100;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  text-decoration: none;
  font-size: 16px;
  color: #333;
  transition: background 0.2s ease;
}

.popup__modal--content-popup-manager .popup__modal--close:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #000;
}

/* Apply admin-set visual styles via CSS custom properties */
.popup-manager-modal-content[style*="--popup-content-bg"] .popup__modal--content-popup-manager {
  background: var(--popup-content-bg) !important;
}

.popup-manager-modal-content[style*="--popup-content-border"] .popup__modal--content-popup-manager {
  border: var(--popup-content-border) !important;
}

.popup-manager-modal-content[style*="--popup-content-border-radius"] .popup__modal--content-popup-manager {
  border-radius: var(--popup-content-border-radius) !important;
}

.popup-manager-modal-content[style*="--popup-content-padding"] .popup__modal--content-popup-manager {
  padding: var(--popup-content-padding) !important;
}

/* Box-shadow needs to be applied directly since attribute selector doesn't reliably detect CSS custom properties */

/* ===========================================================================
   Position overrides - controlled via flexbox on the overlay
   Higher specificity to override base .popup-manager-modal-overlay styles
   reactjs-popup appends -overlay to each class in the className
   So popup-position-bottom-right becomes popup-position-bottom-right-overlay
   
   Note: Top positions get paddingTop via inline styles to account for admin toolbar
   =========================================================================== */

/* Center-center (explicit, though default) */
.popup-manager-modal-overlay.popup-position-center-center-overlay {
  justify-content: center !important;
  align-items: center !important;
}

/* Top positions */
.popup-manager-modal-overlay.popup-position-top-center-overlay {
  justify-content: center !important;
  align-items: flex-start !important;
}

.popup-manager-modal-overlay.popup-position-top-left-overlay {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.popup-manager-modal-overlay.popup-position-top-right-overlay {
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

/* Bottom positions */
.popup-manager-modal-overlay.popup-position-bottom-center-overlay {
  justify-content: center !important;
  align-items: flex-end !important;
}

.popup-manager-modal-overlay.popup-position-bottom-left-overlay {
  justify-content: flex-start !important;
  align-items: flex-end !important;
}

.popup-manager-modal-overlay.popup-position-bottom-right-overlay {
  justify-content: flex-end !important;
  align-items: flex-end !important;
}

/* Side positions */
.popup-manager-modal-overlay.popup-position-left-center-overlay {
  justify-content: flex-start !important;
  align-items: center !important;
}

.popup-manager-modal-overlay.popup-position-right-center-overlay {
  justify-content: flex-end !important;
  align-items: center !important;
}

/* "Don't show again" checkbox - uses theme styling */
.no-show {
  margin-top: 1rem;
}

.no-show label span {
  padding-left: 4px;
}