/* ============================================================================
   OLD QUARTER COFFEE QUIZ — STYLES
   Brand tokens are set as CSS variables by quiz.js from quiz-config.js.
   Everything is scoped under .oqq to avoid fighting the theme's CSS.
   ============================================================================ */

.oqq {
  --oqq-accent: #2c737f;
  --oqq-accent-hover: #235c66;
  --oqq-dark: #000000;
  --oqq-brown: #8a4d36;
  --oqq-cream: #fdfcf7;
  --oqq-paper: #ffffff;
  --oqq-sale: #ba2323;
  --oqq-heading-font: 'Graduate', cursive;
  --oqq-body-font: 'Nunito Sans', sans-serif;

  font-family: var(--oqq-body-font);
  color: #1c1c1c;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  box-sizing: border-box;
}
.oqq *, .oqq *::before, .oqq *::after { box-sizing: border-box; }
.oqq img { max-width: 100%; display: block; }
.oqq button { font-family: inherit; cursor: pointer; }

/* ---- progress ---- */
.oqq-progress { height: 5px; background: #ececec; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.oqq-progress-bar { height: 100%; background: var(--oqq-accent); border-radius: 3px; width: 0; transition: width .35s ease; }
.oqq-step-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8b8b8b; margin-bottom: 28px; }

/* ---- headings ---- */
.oqq-title {
  font-family: var(--oqq-heading-font);
  font-weight: 400;
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.25;
  text-align: center;
  color: #14225c;
  margin: 0 0 6px;
}
.oqq-subtitle { text-align: center; color: #6f6f6f; font-size: 15px; margin: 0 0 26px; }
.oqq-intro-text { text-align: center; color: #4a4a4a; font-size: 17px; line-height: 1.6; max-width: 560px; margin: 0 auto 28px; }

/* ---- choice buttons ---- */
.oqq-choices { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 0 auto; }
.oqq-choice {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 15px 20px;
  background: #e9e9ef; border: 2px solid transparent; border-radius: 8px;
  font-size: 16px; font-weight: 600; color: #1c1c1c; text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.oqq-choice:hover { background: #dfe7e8; border-color: var(--oqq-accent); }
.oqq-choice:active { transform: scale(.99); }
.oqq-choice[aria-pressed="true"] { background: #dfe7e8; border-color: var(--oqq-accent); }
.oqq-choice[aria-pressed="true"] .oqq-choice-dot {
  border-color: var(--oqq-accent);
  background: var(--oqq-accent);
  box-shadow: inset 0 0 0 3px #fff;
}
.oqq-choice-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid #c4c4c4; flex: 0 0 auto;
}
.oqq-choice:hover .oqq-choice-dot { border-color: var(--oqq-accent); }

/* ---- primary buttons / nav ---- */
.oqq-cta {
  display: inline-block; padding: 14px 34px;
  background: var(--oqq-accent); color: #fff; border: 0; border-radius: 6px;
  font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.oqq-cta:hover { background: var(--oqq-accent-hover); }
.oqq-cta:disabled { background: #c2c2c2; cursor: not-allowed; }
.oqq-center { text-align: center; }
.oqq-nav { margin-top: 26px; text-align: center; }
.oqq-back {
  background: none; border: 0; color: #8b8b8b; font-size: 14px;
  text-decoration: underline; padding: 8px 12px;
}
.oqq-back:hover { color: var(--oqq-dark); }

/* ---- results ---- */
.oqq-results-head { text-align: center; margin-bottom: 10px; }
.oqq-results-intro { text-align: center; color: #4a4a4a; margin: 0 auto 6px; max-width: 620px; }
.oqq-size-note {
  background: var(--oqq-cream); border: 1px solid #efe9d8; border-radius: 8px;
  padding: 14px 18px; font-size: 14.5px; line-height: 1.55; color: #4a4a4a;
  max-width: 620px; margin: 18px auto 8px; text-align: center;
}
.oqq-fallback-note {
  color: var(--oqq-brown); font-size: 14.5px; text-align: center;
  max-width: 620px; margin: 10px auto 0;
}
.oqq-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px; margin-top: 26px;
}
.oqq-card {
  background: var(--oqq-paper); border: 1px solid #ececec; border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s ease;
}
.oqq-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.oqq-card-img { aspect-ratio: 1/1; background: var(--oqq-cream); }
.oqq-card-img img { width: 100%; height: 100%; object-fit: cover; }
.oqq-card-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.oqq-card-title { font-size: 15.5px; font-weight: 700; line-height: 1.35; margin: 0; }
.oqq-card-title a { color: inherit; text-decoration: none; }
.oqq-card-title a:hover { color: var(--oqq-accent); }
.oqq-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.oqq-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--oqq-cream); color: var(--oqq-brown);
  border: 1px solid #eadfce; border-radius: 4px; padding: 3px 7px;
}
.oqq-badge--hot { background: var(--oqq-accent); color: #fff; border-color: var(--oqq-accent); }
.oqq-method-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.oqq-method-chip {
  font-size: 11.5px; font-weight: 700; color: var(--oqq-accent);
  border: 1px solid var(--oqq-accent); border-radius: 999px; padding: 3px 9px;
  background: rgba(44, 115, 127, .06);
}
.oqq-price { font-size: 16px; font-weight: 800; color: #1c1c1c; }
.oqq-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.oqq-size-btn {
  padding: 6px 12px; border-radius: 5px; border: 1.5px solid #d8d8d8;
  background: #fff; font-size: 13px; font-weight: 600; color: #444; position: relative;
}
.oqq-size-btn[aria-pressed="true"] { border-color: var(--oqq-accent); background: var(--oqq-accent); color: #fff; }
.oqq-size-btn:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.oqq-size-rec {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--oqq-accent); margin-top: 1px;
}
.oqq-size-btn[aria-pressed="true"] .oqq-size-rec { color: #d8f0ee; }
.oqq-atc {
  margin-top: auto; width: 100%; padding: 12px 10px;
  background: var(--oqq-dark); color: #fff; border: 0; border-radius: 6px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; text-decoration: none; display: inline-block;
}
.oqq-atc:hover { background: #333; }
.oqq-atc[data-state="added"] { background: var(--oqq-accent); }
.oqq-atc:disabled { background: #bbb; cursor: not-allowed; }
.oqq-card-links { text-align: center; }
.oqq-card-links a { font-size: 13px; color: #6f6f6f; text-decoration: underline; }
.oqq-card-links a:hover { color: var(--oqq-accent); }

/* ---- states ---- */
.oqq-loading, .oqq-error { text-align: center; padding: 48px 12px; color: #6f6f6f; font-size: 15px; }
.oqq-spinner {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid #e3e3e3; border-top-color: var(--oqq-accent);
  animation: oqq-spin .8s linear infinite;
}
@keyframes oqq-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .oqq { padding: 16px 10px 40px; }
  .oqq-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .oqq-card-body { padding: 10px 10px 12px; }
}