/* public/assets/css/pages/catalog-home-modals.css
 *
 * Modal styling for Catalog Home — both the Modal component CHROME (overlay,
 * backdrop, frame) and the content of the three Phase 4.1 modals.
 *
 * Visual language (per export-dialog reference): airy card, centered hero
 * icon, centered title + muted subtitle, full-width primary action, and a
 * quiet text-link secondary below it. Class names are unchanged so no JS
 * edits are needed.
 */

/* =============================================================
 * MODAL CHROME — for window.Components.Modal
 * ============================================================= */

#modal-container:empty { display: none; }

#modal-container:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 18, 25, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  animation: modal-backdrop-in 120ms ease-out;
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--color-surface, #fff);
  color: var(--color-text, #0F1729);
  border-radius: var(--radius-xl, 18px);
  box-shadow: 0 24px 70px rgba(15, 23, 41, 0.22);
  width: 100%;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  animation: modal-pop-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal--sm { max-width: 400px; }
.modal--md { max-width: 460px; }
.modal--lg { max-width: 620px; }

@keyframes modal-pop-in {
  from { transform: translateY(10px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Header: no divider, generous top padding, close button floats top-right.
 * The title is centered as part of the body hero, so we keep the header
 * minimal — it exists mainly to host the close button and a11y title id. */
.modal__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 28px 0;
  border-bottom: 0;
}

.modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text, #0F1729);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  flex-shrink: 0;
}

.modal__body {
  padding: 16px 28px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Footer: no muted band, no border. Becomes a vertical stack so the primary
 * button is full-width and the secondary sits beneath it as a text link. */
.modal__footer {
  padding: 0 28px 24px;
  border-top: 0;
  background: transparent;
}

[data-theme="dark"] #modal-container:not(:empty) {
  background: rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .modal {
  background: var(--color-surface, #1c1f26);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

/* =============================================================
 * SHARED FOOTER ACTION STACK
 * Primary button full-width on top; secondary as a quiet link below.
 * (Applies to the Request + Interests modals, which pass a footer.)
 * ============================================================= */
.modal-interests__actions,
.modal__footer-actions {
  display: flex;
  flex-direction: column-reverse; /* DOM order is [cancel, submit]; show submit on top */
  align-items: stretch;
  gap: 4px;
}

/* Primary (dark/accent) button — full width, taller, rounded. */
.modal-interests__actions .btn--dark,
.modal__footer-actions .btn--dark,
.modal-interests__actions .btn--primary,
.modal__footer-actions .btn--primary {
  width: 100%;
  justify-content: center;
  padding: 13px 16px;
  font-weight: 600;
  border-radius: var(--radius-lg, 14px);
}

/* Secondary becomes a centered text link (no border/background). */
.modal-interests__actions .btn--secondary,
.modal__footer-actions .btn--secondary {
  width: 100%;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted, #6B7280);
  font-weight: 600;
  padding: 11px 16px;
}
.modal-interests__actions .btn--secondary:hover,
.modal__footer-actions .btn--secondary:hover {
  background: transparent;
  color: var(--color-text, #0F1729);
}

/* =============================================================
 * HERO ICON — shared across modals.
 * Modal bodies don't currently emit an icon element; this rule is here so
 * that when an element with .modal-hero-icon is added it lands centered.
 * Existing modals simply center their title + intro, which already reads
 * cleanly without an icon.
 * ============================================================= */
.modal-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: var(--color-text-muted, #6B7280);
}
.modal-hero-icon svg { width: 32px; height: 32px; }

/* =============================================================
 * HOW IT WORKS
 * ============================================================= */
.modal-howitworks__intro {
  margin: 0 0 24px;
  color: var(--color-text-muted, #6B7280);
  line-height: 1.55;
  text-align: center;
}
.modal-howitworks__steps {
  list-style: none;
  counter-reset: hiw-step;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.modal-howitworks__step {
  counter-increment: hiw-step;
  padding-left: 3rem;
  position: relative;
}
.modal-howitworks__step::before {
  content: counter(hiw-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent, #425FE9);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.modal-howitworks__step-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #0F1729);
}
.modal-howitworks__step-body {
  margin: 0;
  color: var(--color-text-muted, #6B7280);
  line-height: 1.5;
}

/* =============================================================
 * EDIT INTERESTS
 * ============================================================= */
.modal-interests__prompt {
  margin: 0 0 20px;
  color: var(--color-text-muted, #6B7280);
  line-height: 1.5;
  text-align: center;
}
.modal-interests__chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
.modal-interests__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-border, #E9EBF1);
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  user-select: none;
  font-size: 0.875rem;
  transition: background 0.12s, border-color 0.12s;
}
.modal-interests__chip:hover {
  background: var(--color-surface-muted, #F4F5F8);
}
.modal-interests__chip.is-selected {
  background: var(--color-accent-soft, #ECF0FF);
  border-color: var(--color-accent, #425FE9);
  color: var(--color-accent-text, #3D64E5);
  font-weight: 600;
}
.modal-interests__chip-input {
  margin: 0;
  accent-color: var(--color-accent, #425FE9);
}
.modal-interests__chip-label { line-height: 1.2; }