/* ─────────────────────────────────────────────
   _popups.css — Modal / Popup System  (lib-modal-*)
   ─────────────────────────────────────────────
   API:
     overlay.classList.add('open');     // open
     overlay.classList.remove('open'); // close

   Variants (on .lib-modal-box):
     .is-primary  .is-success  .is-error  .is-warning  .is-info

   Sizes (on .lib-modal-box):
     .is-sm  .is-lg
───────────────────────────────────────────── */

/* ═══════════════════════════════
   OVERLAY
═══════════════════════════════ */
.lib-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: color-mix(in srgb, #000 65%, transparent);
  transition: background 0.25s;
}

.lib-modal-overlay.open { display: flex; }

/* Colored overlays — tinted by variant */
.lib-modal-overlay:has(.lib-modal-box.is-primary) {
  background: color-mix(in srgb, var(--color-primary) 20%, rgba(0,0,0,0.6));
}
.lib-modal-overlay:has(.lib-modal-box.is-success) {
  background: color-mix(in srgb, #22c55e 20%, rgba(0,0,0,0.55));
}
.lib-modal-overlay:has(.lib-modal-box.is-error) {
  background: color-mix(in srgb, #ef4444 20%, rgba(0,0,0,0.55));
}
.lib-modal-overlay:has(.lib-modal-box.is-warning) {
  background: color-mix(in srgb, #f59e0b 18%, rgba(0,0,0,0.55));
}
.lib-modal-overlay:has(.lib-modal-box.is-info) {
  background: color-mix(in srgb, #06b6d4 18%, rgba(0,0,0,0.55));
}

/* ═══════════════════════════════
   BOX
═══════════════════════════════ */
.lib-modal-box {
  --modal-accent:     var(--color-neutral-600);
  --modal-border:     color-mix(in srgb, var(--modal-accent) 22%, transparent);
  --modal-icon-bg:    color-mix(in srgb, var(--modal-accent) 12%, transparent);
  --modal-title-color: var(--color-light);

  background: var(--color-dark-secondary);
  border-radius: var(--radius-xl, 16px);
  padding: 32px;
  max-width: 480px;
  width: 90%;
  position: relative;
  border: 1px solid var(--modal-border);
  box-shadow: 0 24px 80px color-mix(in srgb, #000 50%, transparent);
  animation: modalIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);   }
}

.lib-modal-box.is-sm { max-width: 340px; padding: 24px; }
.lib-modal-box.is-lg { max-width: 620px; }

/* ═══════════════════════════════
   VARIANT TOKENS
═══════════════════════════════ */
.lib-modal-box.is-primary {
  --modal-accent:      var(--color-primary);
  --modal-title-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-dark-secondary));
}
.lib-modal-box.is-success {
  --modal-accent:      #22c55e;
  --modal-title-color: #22c55e;
  background: color-mix(in srgb, #22c55e 7%, var(--color-dark-secondary));
}
.lib-modal-box.is-error {
  --modal-accent:      #ef4444;
  --modal-title-color: #ef4444;
  background: color-mix(in srgb, #ef4444 7%, var(--color-dark-secondary));
}
.lib-modal-box.is-warning {
  --modal-accent:      #f59e0b;
  --modal-title-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 7%, var(--color-dark-secondary));
}
.lib-modal-box.is-info {
  --modal-accent:      #06b6d4;
  --modal-title-color: #06b6d4;
  background: color-mix(in srgb, #06b6d4 7%, var(--color-dark-secondary));
}

/* ═══════════════════════════════
   CLOSE BUTTON
═══════════════════════════════ */
.lib-modal-close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-neutral-600) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-600) 18%, transparent);
  color: var(--color-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s;
  line-height: 1;
}

.lib-modal-close:hover {
  background: color-mix(in srgb, var(--color-neutral-600) 24%, transparent);
  color: var(--color-light);
}

/* ═══════════════════════════════
   ICON WRAP
═══════════════════════════════ */
.lib-modal-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg, 12px);
  background: var(--modal-icon-bg);
  border: 1px solid var(--modal-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
  flex-shrink: 0;
}

/* ═══════════════════════════════
   CONTENT
═══════════════════════════════ */
.lib-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--modal-title-color);
  margin-bottom: 8px;
  line-height: 1.3;
}

.lib-modal-text {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.75;
  margin-bottom: 22px;
}

.lib-modal-divider {
  height: 1px;
  background: color-mix(in srgb, var(--color-neutral-600) 18%, transparent);
  margin: 20px -32px;
}

.lib-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lib-modal-actions.is-column {
  flex-direction: column;
}