/**
 * Popup Component Styles
 * Uses the existing Warbarons ornate border style (pop-border-*, pop-header-box, etc.)
 * Only adds minimal styling for overlay and close button positioning
 */

/* Overlay - dark semi-transparent background */
.wb-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

/* Container - uses existing battle-popup-container styles */
.wb-popup-container {
  position: relative;
}

/* Content area - ensure it's above decorative borders */
.wb-popup-content {
  padding: 10px 5px;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

/* Body inner - where the actual content goes */
.wb-popup-body-inner {
  color: #3a1e00;
  font-size: 13px;
  line-height: 1.4;
  position: relative;
  z-index: 5;
}

/* Decorative borders should not block clicks */
.wb-popup-container .pop-border {
  pointer-events: none;
}

/* Header box should not block clicks on content below */
.wb-popup-container .pop-header-box {
  pointer-events: none;
}

/* Close X button - positioned on top-right corner of border */
.wb-popup-close-btn {
  position: absolute;
  top: 6px;
  right: 5px;
  width: 22px;
  height: 22px;
  background: url('/interface4/basepopup.png') -666px -31px;
  background-size: auto;
  cursor: pointer;
  z-index: 10;
}

.wb-popup-close-btn:hover {
  background-position: -666px -7px;
}

/* Footer - positioned on bottom border */
.wb-popup-footer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

/* Remove default focus outline for mouse users on all popup buttons */
.wb-popup-footer button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ============================================= */
/* Common content styles inside popups           */
/* ============================================= */

.wb-popup-body-inner h4 {
  color: #3a1e00;
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #8a7649;
  padding-bottom: 4px;
}

.wb-popup-body-inner p {
  margin: 8px 0;
  color: #522e00;
}

.wb-popup-body-inner .popup-section {
  margin-bottom: 16px;
  background: none;
  padding: 10px;
  border-radius: 4px;
}

.wb-popup-body-inner .popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.wb-popup-body-inner .popup-row:last-child {
  border-bottom: none;
}

.wb-popup-body-inner .popup-label {
  color: #6b4510;
}

.wb-popup-body-inner .popup-value {
  color: #3a1e00;
  font-weight: bold;
}

.wb-popup-body-inner .popup-value.positive {
  color: #2a6a2a;
}

.wb-popup-body-inner .popup-value.negative {
  color: #8a2a2a;
}

/* ============================================= */
/* Small popup variant (misc_gpopstyle)          */
/* ============================================= */

.wb-popup-small {
  width: 560px;
  min-height: 320px;
  max-height: 450px;
  font-size: 14px;
  font-weight: bold;
  color: #3a1e00;
  display: flex;
  flex-direction: column;
}

.wb-popup-small-header {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #3a1e00;
  padding: 8px 8px 4px 8px;
  border-bottom: 1px solid #8a7649;
  margin: 0 8px;
}

.wb-popup-small .wb-popup-body-inner {
  overflow-y: auto;
  flex: 1;
  text-align: left;
}

.wb-popup-small-footer {
  clear: both;
}