/* /css/modal.css – CoupleIt Modal (נגיש, רספונסיבי, ללא תלות חיצונית) */

:root {
  --ci-modal-backdrop: rgba(0,0,0,0.5);
  --ci-modal-bg: #fff;
  --ci-modal-radius: 16px;
  --ci-modal-shadow: 0 10px 30px rgba(0,0,0,0.15);
  --ci-modal-title: #111;
  --ci-modal-text: #333;
  --ci-modal-accent: #e31b23; /* אפשר לשנות לצבע המותג */
  --ci-modal-maxw: 560px; /* ברירת מחדל לרוחב */
}

.ci-modal__backdrop {
  position: fixed; inset: 0; z-index: 99990;
  background: var(--ci-modal-backdrop);
  display: none; opacity: 0; transition: opacity .18s ease-out;
}

.ci-modal__backdrop--open { display: block; opacity: 1; }

.ci-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  pointer-events: none;
}

.ci-modal__panel {
  width: calc(100% - 32px);
  max-width: var(--ci-modal-maxw);
  background: var(--ci-modal-bg);
  border-radius: var(--ci-modal-radius);
  box-shadow: var(--ci-modal-shadow);
  pointer-events: auto;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
  display: flex; flex-direction: column; overflow: hidden;
}

.ci-modal__panel--open {
  transform: translateY(0); opacity: 1;
}

.ci-modal__header {
  padding: 14px 18px; border-bottom: 1px solid #eee;
  display: flex; align-items: center; gap: 12px;
}

.ci-modal__title {
  font: 600 18px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--ci-modal-title); margin: 0; flex: 1;
}

.ci-modal__close {
  border: 0; background: transparent; cursor: pointer;
  font: 500 14px/1 system-ui;
  color: #666; padding: 8px; border-radius: 10px;
}
.ci-modal__close:hover { background: #f5f5f5; }

.ci-modal__body {
  padding: 16px 18px; color: var(--ci-modal-text);
  max-height: min(70vh, 560px);
  overflow: auto;
}

.ci-modal__footer {
  padding: 12px 18px; border-top: 1px solid #eee; display: flex; gap: 8px; justify-content: flex-end;
}

.ci-btn {
  border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer;
  font: 600 14px/1 system-ui; background: #f2f2f2; color: #222;
}
.ci-btn:hover { background: #e9e9e9; }

.ci-btn--primary {
  background: var(--ci-modal-accent); color: #fff;
}
.ci-btn--primary:hover { filter: brightness(0.95); }

/* מובייל ידידותי יותר ללחיצה מחוץ למודאל */
@media (hover: none) {
  .ci-modal__panel { width: calc(100% - 24px); }
}