/* ═══════════════════════════════════════════════════════════════════
   CricBun Modal Component
   ═══════════════════════════════════════════════════════════════════ */

.cb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cb-z-modal);
  background: var(--cb-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cb-space-base);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cb-transition-base), visibility var(--cb-transition-base);
}

.cb-modal-overlay--open {
  opacity: 1;
  visibility: visible;
}

.cb-modal {
  background: var(--cb-bg);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--cb-transition-base);
}

.cb-modal-overlay--open .cb-modal {
  transform: translateY(0) scale(1);
}

.cb-modal--sm { max-width: 360px; }
.cb-modal--lg { max-width: 720px; }
.cb-modal--xl { max-width: 960px; }

.cb-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cb-space-base) var(--cb-space-lg);
  border-bottom: 1px solid var(--cb-border-light);
  flex-shrink: 0;
}

.cb-modal__title {
  font-size: var(--cb-text-lg);
  font-weight: var(--cb-weight-semibold);
  margin: 0;
}

.cb-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--cb-radius-md);
  background: transparent;
  color: var(--cb-text-secondary);
  cursor: pointer;
  font-size: var(--cb-text-xl);
  transition: background var(--cb-transition-fast);
}

.cb-modal__close:hover {
  background: var(--cb-bg-subtle);
  color: var(--cb-text);
}

.cb-modal__body {
  padding: var(--cb-space-lg);
  overflow-y: auto;
  flex: 1;
}

.cb-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cb-space-sm);
  padding: var(--cb-space-base) var(--cb-space-lg);
  border-top: 1px solid var(--cb-border-light);
  flex-shrink: 0;
}

/* ── Prevent body scroll when modal open ── */
body.cb-modal-open {
  overflow: hidden;
}