/**
 * Echoholics Wishlist.
 *
 * Hardcoded hex, dark by default. Rules competing with the button reset
 * are scoped so they outrank it.
 */

.ech-wl-list, .ech-wl-empty, .ech-wl-demand {
  font-family: "Just Sanz", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.ech-wl-list *, .ech-wl-demand * { box-sizing: border-box; }

/* ---------- Save button ---------- */
button.ech-wl-btn {
  all: unset !important; box-sizing: border-box !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-family: "Just Sanz", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  padding: 10px 18px !important; border-radius: 999px !important;
  border-width: 1px !important; border-style: solid !important; line-height: 1.2 !important;
  transition: border-color 0.15s ease, color 0.15s ease !important;
}
button.ech-wl-btn:disabled { opacity: 0.6 !important; }
.ech-wl-icon { display: inline-flex; }
.ech-wl-label { display: inline-block; }
.ech-wl-icon svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
button.ech-wl-btn.is-saved .ech-wl-icon svg { transform: scale(1.1) !important; }
.ech-wl-count {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
}

/* ---------- List ---------- */
.ech-wl-list { display: flex; flex-direction: column; gap: 8px; }
.ech-wl-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px; align-items: center; padding: 15px 18px;
  border-radius: 10px; border-width: 1px; border-style: solid;
}
.ech-wl-item.is-gone { opacity: 0.55; }
.ech-wl-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ech-wl-item-title {
  font-size: 14.5px; font-weight: 600; text-decoration: none !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ech-wl-item-meta { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 10.5px; }
.ech-wl-item-price { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.ech-wl-price, .ech-wl-now { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 600; }
.ech-wl-was { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; text-decoration: line-through; }
.ech-wl-gone { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.ech-wl-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ech-wl-mini-btn {
  font-size: 12.5px; padding: 8px 15px; border-radius: 6px;
  text-decoration: none !important; border-width: 1px; border-style: solid;
}
.ech-wl-list button.ech-wl-remove {
  all: unset !important; cursor: pointer !important;
  font-size: 20px !important; line-height: 1 !important; padding: 4px 8px !important;
  border-radius: 6px !important;
}

/* ---------- Empty ---------- */
.ech-wl-empty { border-radius: 10px; border-width: 1px; border-style: dashed; padding: 36px 26px; text-align: center; }
.ech-wl-empty-mark { display: inline-flex; margin-bottom: 12px; }
.ech-wl-empty-mark svg { width: 36px; height: 36px; stroke: currentColor; }
.ech-wl-empty-title { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.ech-wl-empty-text { font-size: 13px; line-height: 1.6; margin: 0 auto; max-width: 360px; }

/* ---------- Demand ---------- */
.ech-wl-demand-note { font-size: 12.5px; line-height: 1.6; margin: 0 0 16px; }
.ech-wl-demand-rows { display: flex; flex-direction: column; gap: 6px; }
.ech-wl-demand-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px; align-items: center; padding: 12px 16px;
  border-radius: 8px; border-width: 1px; border-style: solid;
}
.ech-wl-demand-row.is-gone { opacity: 0.55; }
.ech-wl-demand-count {
  font-family: "Gunterz", Georgia, serif; font-weight: 600;
  font-size: 22px; text-align: center; line-height: 1;
}
.ech-wl-demand-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ech-wl-demand-title {
  font-size: 14px; font-weight: 600; text-decoration: none !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ech-wl-demand-meta { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 10.5px; }

@media (max-width: 600px) {
  .ech-wl-item { grid-template-columns: minmax(0, 1fr) auto; }
  .ech-wl-item-price { grid-column: 1 / -1; }
}

/* Dark — the default */
html:not(.psk-theme-light) button.ech-wl-btn { background: transparent !important; border-color: #3A3A3A !important; color: #9A9A9A !important; }
html:not(.psk-theme-light) button.ech-wl-btn:hover { border-color: #4B9BD5 !important; color: #83BDE7 !important; }
html:not(.psk-theme-light) .ech-wl-icon svg { fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; }
html:not(.psk-theme-light) button.ech-wl-btn.is-saved { border-color: #F87171 !important; color: #F87171 !important; }
html:not(.psk-theme-light) button.ech-wl-btn.is-saved .ech-wl-icon svg { fill: #F87171 !important; stroke: #F87171 !important; }
html:not(.psk-theme-light) .ech-wl-count { background: rgba(255,255,255,0.08); color: #9A9A9A; }
html:not(.psk-theme-light) .ech-wl-item,
html:not(.psk-theme-light) .ech-wl-demand-row { background: #161616; border-color: #2A2A2A; }
html:not(.psk-theme-light) .ech-wl-item-title,
html:not(.psk-theme-light) .ech-wl-demand-title { color: #E3E3E3; }
html:not(.psk-theme-light) .ech-wl-item-meta,
html:not(.psk-theme-light) .ech-wl-demand-meta { color: #6B6B6B; }
html:not(.psk-theme-light) .ech-wl-price { color: #E3E3E3; }
html:not(.psk-theme-light) .ech-wl-now { color: #4ADE80; }
html:not(.psk-theme-light) .ech-wl-was { color: #6B6B6B; }
html:not(.psk-theme-light) .ech-wl-gone { color: #F5B93B; }
html:not(.psk-theme-light) .ech-wl-mini-btn { background: #1E1E1E; border-color: #3A3A3A; color: #E3E3E3; }
html:not(.psk-theme-light) .ech-wl-remove { color: #6B6B6B !important; }
html:not(.psk-theme-light) .ech-wl-remove:hover { color: #F87171 !important; background: rgba(248,113,113,0.1) !important; }
html:not(.psk-theme-light) .ech-wl-empty { border-color: #2A2A2A; }
html:not(.psk-theme-light) .ech-wl-empty-mark { color: #3A3A3A; }
html:not(.psk-theme-light) .ech-wl-empty-title { color: #E3E3E3; }
html:not(.psk-theme-light) .ech-wl-empty-text,
html:not(.psk-theme-light) .ech-wl-demand-note { color: #6B6B6B; }
html:not(.psk-theme-light) .ech-wl-demand-count { color: #83BDE7; }

/* Light — explicit override */
html.psk-theme-light button.ech-wl-btn { background: transparent !important; border-color: #D1D1CE !important; color: #4A4A4A !important; }
html.psk-theme-light button.ech-wl-btn:hover { border-color: #33769F !important; color: #33769F !important; }
html.psk-theme-light .ech-wl-icon svg { fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; }
html.psk-theme-light button.ech-wl-btn.is-saved { border-color: #DC2626 !important; color: #DC2626 !important; }
html.psk-theme-light button.ech-wl-btn.is-saved .ech-wl-icon svg { fill: #DC2626 !important; stroke: #DC2626 !important; }
html.psk-theme-light .ech-wl-count { background: rgba(0,0,0,0.07); color: #4A4A4A; }
html.psk-theme-light .ech-wl-item,
html.psk-theme-light .ech-wl-demand-row { background: #FFFFFF; border-color: #E3E3E3; }
html.psk-theme-light .ech-wl-item-title,
html.psk-theme-light .ech-wl-demand-title { color: #0E0E0E; }
html.psk-theme-light .ech-wl-item-meta,
html.psk-theme-light .ech-wl-demand-meta { color: #6B6B6B; }
html.psk-theme-light .ech-wl-price { color: #0E0E0E; }
html.psk-theme-light .ech-wl-now { color: #16A34A; }
html.psk-theme-light .ech-wl-was { color: #6B6B6B; }
html.psk-theme-light .ech-wl-gone { color: #B45309; }
html.psk-theme-light .ech-wl-mini-btn { background: #F7F7F5; border-color: #D1D1CE; color: #0E0E0E; }
html.psk-theme-light .ech-wl-remove { color: #6B6B6B !important; }
html.psk-theme-light .ech-wl-remove:hover { color: #DC2626 !important; }
html.psk-theme-light .ech-wl-empty { border-color: #D1D1CE; }
html.psk-theme-light .ech-wl-empty-mark { color: #D1D1CE; }
html.psk-theme-light .ech-wl-empty-title { color: #0E0E0E; }
html.psk-theme-light .ech-wl-empty-text,
html.psk-theme-light .ech-wl-demand-note { color: #6B6B6B; }
html.psk-theme-light .ech-wl-demand-count { color: #33769F; }