/* Shared alert look, used by overlay.html (live) and editor.html (preview).
   applySettings() in alert.js drives the variables. */

:root {
  --accent: #7c5cff; --money: #7dffb2; --text: #fff;
  --card-bg: linear-gradient(135deg, rgba(20, 22, 34, 0.94), rgba(38, 24, 60, 0.94));
  --item-bg: rgba(255, 255, 255, 0.07);
  --min-w: 340px; --max-w: 460px; --radius: 14px; --scale: 1;
  --font: "Segoe UI", Roboto, Arial, sans-serif;
}

.toast {
  zoom: var(--scale);
  min-width: var(--min-w); max-width: var(--max-w); padding: 14px 16px; color: var(--text);
  background: var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
  border-left: 5px solid var(--accent); border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  font-family: var(--font);
}
.toast.no-bar { border-left: 1px solid color-mix(in srgb, var(--text) 15%, transparent); }
.toast.no-shadow { box-shadow: none; }

.header { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--text)); margin-bottom: 6px; }
.total { font-size: 19px; font-weight: 700; color: var(--money); margin-bottom: 10px; }

.item { display: flex; align-items: center; gap: 10px; background: var(--item-bg); border-radius: calc(var(--radius) * 0.7); padding: 7px 10px; margin-top: 6px; }
.thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.qty { min-width: 34px; text-align: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 3px 8px; }
.name { font-size: 16px; font-weight: 600; }
.desc { font-size: 12.5px; color: color-mix(in srgb, var(--text) 65%, transparent); }