/* Meetzen — Wishlist component (used by /wishlist.html and the room overlay) */

.wishlist-root { display: flex; flex-direction: column; gap: var(--s-4); }

.wl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.wl-title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.wl-filter { display: flex; gap: 4px; }
.wl-chip {
  padding: 6px 12px; border-radius: 999px;
  background: var(--c-surface-2, #eef0f6); border: 1px solid var(--c-line, #e1e4ed);
  color: var(--c-text-soft, #4a4d5e); font-size: 12px; font-weight: 600; cursor: pointer;
}
.wl-chip:hover { color: var(--c-text); }
.wl-chip.active {
  background: var(--c-brand-500); color: #fff; border-color: var(--c-brand-500);
}

.wl-form {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-4); border-radius: var(--r-lg);
  background: var(--c-surface, #fff); border: 1px solid var(--c-line, #e1e4ed);
}
.wl-form-row { display: grid; grid-template-columns: 2fr 200px auto; gap: 6px; }
.wl-form-row-2 { grid-template-columns: 1fr 1fr; }
.wl-form .input { min-width: 0; }
.wl-add { white-space: nowrap; }
@media (max-width: 700px) {
  .wl-form-row { grid-template-columns: 1fr; }
  .wl-form-row-2 { grid-template-columns: 1fr; }
}

.wl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wl-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--c-surface, #fff); border: 1px solid var(--c-line-soft, #ebedf3);
  transition: border-color .12s;
}
.wl-item:hover { border-color: var(--c-brand-300, #c8d0ff); }
.wl-item.done { opacity: 0.65; }
.wl-item.done .wl-title-text { text-decoration: line-through; color: var(--c-text-mute); }
.wl-item.past .wl-due-chip { background: rgba(239,68,68,.14); color: var(--c-err); }

.wl-check {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; border: 1.5px solid var(--c-line);
  background: transparent; cursor: pointer;
  display: grid; place-items: center; color: transparent; padding: 0;
}
.wl-check svg { width: 14px; height: 14px; }
.wl-item.done .wl-check { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }

.wl-meta { min-width: 0; }
.wl-row1 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.wl-title-text {
  font-weight: 600; font-size: var(--fs-md); color: var(--c-text);
}
.wl-link {
  font-size: 12px; color: var(--c-brand-600);
  text-decoration: none; padding: 1px 8px; border-radius: 999px;
  background: var(--c-brand-50); border: 1px solid var(--c-brand-100);
}
.wl-link:hover { background: var(--c-brand-100); }
.wl-note { margin-top: 4px; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }
.wl-due {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--c-text-mute);
}
.wl-due-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: rgba(245,158,11,.14); color: #b45309;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
}

.wl-del {
  width: 30px; height: 30px; flex: 0 0 auto;
  background: transparent; border: 0; color: var(--c-text-mute);
  cursor: pointer; display: grid; place-items: center;
}
.wl-del svg { width: 14px; height: 14px; }
.wl-del:hover { color: var(--c-err); }

.wl-empty {
  padding: var(--s-7); text-align: center; font-size: var(--fs-sm);
  border-radius: var(--r-md); background: var(--c-surface-2);
}

/* Compact variant (room overlay) — tighter spacing, darker palette via vars */
.wishlist-compact { color: var(--rm-text, var(--c-text)); }
.wishlist-compact .wl-title { font-size: var(--fs-md); }
.wishlist-compact .wl-form,
.wishlist-compact .wl-item {
  background: var(--rm-panel, var(--c-surface));
  border-color: var(--rm-line-soft, var(--c-line-soft));
}
.wishlist-compact .wl-link {
  background: rgba(139,92,246,.14); color: #c4b5fd; border-color: rgba(139,92,246,.32);
}
.wishlist-compact .wl-due-chip {
  background: rgba(245,158,11,.18); color: #f59e0b;
}
.wishlist-compact .wl-item.past .wl-due-chip {
  background: rgba(239,68,68,.2); color: #fca5a5;
}
.wishlist-compact .wl-chip {
  background: var(--rm-panel, var(--c-surface-2));
  border-color: var(--rm-line, var(--c-line));
  color: var(--rm-text-soft, var(--c-text-soft));
}
.wishlist-compact .wl-chip.active {
  background: var(--rm-purple, var(--c-brand-500));
  color: #fff;
  border-color: var(--rm-purple, var(--c-brand-500));
}
.wishlist-compact .wl-empty {
  background: var(--rm-panel-2, var(--c-surface-2));
  color: var(--rm-text-mute, var(--c-text-mute));
}
.wishlist-compact .wl-check { border-color: var(--rm-line, var(--c-line)); }
.wishlist-compact .wl-item.done .wl-check {
  background: var(--rm-green, var(--c-ok));
  border-color: var(--rm-green, var(--c-ok));
}