/* MyPositiviTeas Tea Mixer. Everything is scoped to .pt-mixer so it won't fight your WordPress theme.
   Change the brand colors and fonts here. */
.pt-mixer {
  --ptm-bg: #f3f7f1;        /* sage-washed paper */
  --ptm-card: #ffffff;
  --ptm-ink: #1f3a32;       /* steeped green */
  --ptm-muted: #5b6f66;
  --ptm-line: #d9e4dc;
  --ptm-accent: #a8325e;    /* hibiscus */
  --ptm-accent-ink: #ffffff;
  --ptm-soft: #e8f0ea;
  --ptm-study: #fbf3e2;     /* honey */
  --ptm-study-line: #e7c983;
  --ptm-c0: #a8325e; --ptm-c1: #6f9a7d; --ptm-c2: #d9a33b;
  --ptm-c3: #8c7bb8; --ptm-c4: #3f7f78; --ptm-c5: #d8826b;
  --ptm-c6: #a39a3e; --ptm-c7: #5a7fa8;
  --ptm-display: "Young Serif", Georgia, "Times New Roman", serif;
  --ptm-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  font-family: var(--ptm-body);
  color: var(--ptm-ink);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.55;
  font-size: 16px;
  box-sizing: border-box;
}
.pt-mixer *, .pt-mixer *::before, .pt-mixer *::after { box-sizing: inherit; }

.pt-mixer .ptm-card {
  background: var(--ptm-bg);
  border-radius: 20px;
  padding: clamp(20px, 5vw, 40px);
  display: flex; flex-direction: column; gap: 20px;
}
.pt-mixer .ptm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-mixer .ptm-eyebrow {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ptm-accent);
}
.pt-mixer .ptm-progress { display: flex; gap: 6px; }
.pt-mixer .ptm-dot { width: 22px; height: 6px; border-radius: 3px; background: var(--ptm-line); transition: background .25s; }
.pt-mixer .ptm-dot.is-done { background: var(--ptm-c1); }
.pt-mixer .ptm-dot.is-now { background: var(--ptm-accent); }

.pt-mixer .ptm-q, .pt-mixer .ptm-result { display: flex; flex-direction: column; gap: 14px; animation: ptm-in .35s ease both; }
@keyframes ptm-in { from { transform: translateY(6px); } to { transform: none; } }

.pt-mixer .ptm-count { margin: 0; font-size: 13px; color: var(--ptm-muted); font-variant-numeric: tabular-nums; }
.pt-mixer .ptm-title, .pt-mixer .ptm-blend-name {
  font-family: var(--ptm-display); font-weight: 400; margin: 0; line-height: 1.15;
  font-size: clamp(26px, 5vw, 36px); text-wrap: balance; color: var(--ptm-ink);
}
.pt-mixer .ptm-hint, .pt-mixer .ptm-tagline { margin: -6px 0 0; color: var(--ptm-muted); }

.pt-mixer .ptm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pt-mixer .ptm-chip {
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  padding: 12px 18px; border-radius: 999px;
  border: 2px solid var(--ptm-line); background: var(--ptm-card); color: var(--ptm-ink);
  transition: border-color .15s, background .15s, transform .1s;
}
.pt-mixer .ptm-chip:hover { border-color: var(--ptm-c1); }
.pt-mixer .ptm-chip:active { transform: scale(.97); }
.pt-mixer .ptm-chip.is-on { background: var(--ptm-ink); border-color: var(--ptm-ink); color: var(--ptm-card); }
.pt-mixer .ptm-chip:focus-visible, .pt-mixer .ptm-btn:focus-visible, .pt-mixer .ptm-input:focus-visible, .pt-mixer a:focus-visible {
  outline: 3px solid var(--ptm-accent); outline-offset: 2px;
}

.pt-mixer .ptm-preg {
  align-self: flex-start; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 2px dashed var(--ptm-line);
  background: transparent; color: var(--ptm-muted);
}
.pt-mixer .ptm-preg:hover { border-color: var(--ptm-accent); color: var(--ptm-ink); }
.pt-mixer .ptm-preg.is-on { border-style: solid; border-color: var(--ptm-accent); color: var(--ptm-accent); background: var(--ptm-card); }
.pt-mixer .ptm-preg:focus-visible { outline: 3px solid var(--ptm-accent); outline-offset: 2px; }
.pt-mixer .ptm-input {
  font: inherit; font-size: 18px; padding: 14px 16px; border-radius: 12px; width: 100%; max-width: 360px;
  border: 2px solid var(--ptm-line); background: var(--ptm-card); color: var(--ptm-ink);
}

.pt-mixer .ptm-nav, .pt-mixer .ptm-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.pt-mixer .ptm-btn {
  font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none;
  padding: 12px 22px; border-radius: 999px; border: 2px solid transparent; display: inline-block;
}
.pt-mixer .ptm-btn-main { background: var(--ptm-accent); color: var(--ptm-accent-ink); }
.pt-mixer .ptm-btn-main:hover { filter: brightness(1.08); }
.pt-mixer .ptm-btn-main[disabled] { opacity: .4; cursor: not-allowed; }
.pt-mixer .ptm-btn-ghost { background: transparent; color: var(--ptm-ink); border-color: var(--ptm-line); }
.pt-mixer .ptm-btn-ghost:hover { border-color: var(--ptm-ink); }
.pt-mixer .ptm-copied { font-size: 14px; color: var(--ptm-muted); }

/* Result */
.pt-mixer .ptm-jar { display: flex; height: 28px; border-radius: 8px; overflow: hidden; gap: 3px; margin-top: 6px; }
.pt-mixer .ptm-jar-seg { display: block; min-width: 6px; }
.pt-mixer .ptm-c0 { background: var(--ptm-c0); } .pt-mixer .ptm-c1 { background: var(--ptm-c1); }
.pt-mixer .ptm-c2 { background: var(--ptm-c2); } .pt-mixer .ptm-c3 { background: var(--ptm-c3); }
.pt-mixer .ptm-c4 { background: var(--ptm-c4); } .pt-mixer .ptm-c5 { background: var(--ptm-c5); }
.pt-mixer .ptm-c6 { background: var(--ptm-c6); } .pt-mixer .ptm-c7 { background: var(--ptm-c7); }

.pt-mixer .ptm-recipe { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pt-mixer .ptm-recipe li {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--ptm-line);
}
.pt-mixer .ptm-swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; }
.pt-mixer .ptm-r-name { font-weight: 700; min-width: 0; }
.pt-mixer .ptm-r-parts { color: var(--ptm-muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-mixer .ptm-note { margin: 0; font-size: 14px; color: var(--ptm-muted); font-style: italic; }

.pt-mixer .ptm-brew {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  background: var(--ptm-ink); color: var(--ptm-bg); border-radius: 14px; padding: 16px 18px;
}
.pt-mixer .ptm-brew > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-mixer .ptm-k { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.pt-mixer .ptm-v { font-family: var(--ptm-display); font-size: 17px; line-height: 1.25; }
.pt-mixer .ptm-brew-tip { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; opacity: .9; }

.pt-mixer .ptm-sub { font-family: var(--ptm-display); font-weight: 400; font-size: 22px; margin: 12px 0 0; }
.pt-mixer .ptm-why {
  background: var(--ptm-card); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.pt-mixer .ptm-why header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pt-mixer .ptm-why h4 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ptm-ink); }
.pt-mixer .ptm-latin { color: var(--ptm-muted); font-size: 14px; }
.pt-mixer .ptm-why p { margin: 0; }
.pt-mixer .ptm-picked { font-weight: 700; color: var(--ptm-c4); }
.pt-mixer .ptm-study {
  background: var(--ptm-study); border-left: 3px solid var(--ptm-study-line);
  border-radius: 0 10px 10px 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15px;
}
.pt-mixer .ptm-study-k { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ptm-muted); }
.pt-mixer .ptm-study-meta { font-size: 13px; color: var(--ptm-muted); }
.pt-mixer .ptm-study-meta a { color: var(--ptm-accent); font-weight: 700; }
.pt-mixer .ptm-special {
  border: 1.5px solid var(--ptm-c2); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; font-size: 15px;
}
.pt-mixer .ptm-special-k {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ptm-accent-ink); background: var(--ptm-accent); padding: 2px 8px; border-radius: 999px;
}
.pt-mixer .ptm-tradition { background: var(--ptm-soft); border-left-color: var(--ptm-c1); }
.pt-mixer .ptm-study-none { font-size: 14px; color: var(--ptm-muted); font-style: italic; }

.pt-mixer .ptm-caution-box { background: var(--ptm-soft); border-radius: 14px; padding: 14px 18px; }
.pt-mixer .ptm-cautions { margin: 6px 0 0; padding-left: 18px; font-size: 15px; }
.pt-mixer .ptm-fine { font-size: 12.5px; color: var(--ptm-muted); margin: 4px 0 0; }

@media (max-width: 480px) {
  .pt-mixer .ptm-brew { grid-template-columns: 1fr 1fr; }
  .pt-mixer .ptm-chip { padding: 10px 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-mixer .ptm-q, .pt-mixer .ptm-result { animation: none; }
  .pt-mixer * { transition: none !important; }
}