/**
 * D'Best Toys Gift Finder — gift-finder.css v1.4.1
 * Matches the 2026 redesign (Design/system/system.css tokens; the homepage finder chips).
 * Every token has a fallback so the widget still looks right on a page without system.css.
 */

.dbtgf-root {
  --gf-ink: var(--dbt-ink, #1a2340);
  --gf-ink-soft: var(--dbt-ink-soft, #46506e);
  --gf-pink: var(--dbt-pink, #d11375);
  --gf-pink-deep: var(--dbt-pink-deep, #a50e5c);
  --gf-blue: var(--dbt-blue, #0670a8);
  --gf-yellow: var(--dbt-yellow, #ffd200);
  --gf-soft: var(--dbt-soft, #f5f7fb);
  --gf-line: #dfe4ee;
  --gf-shadow: var(--dbt-shadow, 0 6px 18px rgba(26, 35, 64, .12));
  --gf-display: var(--dbt-display, "Baloo 2", "Nunito Sans", system-ui, sans-serif);
  --gf-text: var(--dbt-text, "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  --gf-ease: cubic-bezier(.2, .8, .2, 1);
  font-family: var(--gf-text);
  color: var(--gf-ink);
}

.dbtgf-root *, .dbtgf-root *::before, .dbtgf-root *::after { box-sizing: border-box; }

.dbtgf-loading {
  padding: 48px 16px; text-align: center; color: var(--gf-ink-soft);
  font: 700 16px/1.4 var(--gf-text);
}

.dbtgf-widget {
  max-width: 760px; margin: 0 auto; padding: 32px 32px 28px;
  background: var(--gf-soft); border-radius: 24px;
}

/* ---------- header ---------- */
.dbtgf-header { text-align: center; margin-bottom: 20px; }
/* .dbtgf-root prefix: the theme's own p rule outranks a single class */
.dbtgf-root .dbtgf-badge {
  margin: 0; font: 800 clamp(30px, 5vw, 42px)/1.05 var(--gf-display); color: var(--gf-ink); letter-spacing: -.01em;
}
.dbtgf-root .dbtgf-subtitle { margin: 6px 0 0; font: 600 16px/1.4 var(--gf-text); color: var(--gf-ink-soft); }

/* ---------- progress ---------- */
.dbtgf-progress { display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; max-width: 280px; }
.dbtgf-step-circle {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--gf-ink-soft); box-shadow: inset 0 0 0 2px var(--gf-line);
  font: 800 15px/1 var(--gf-text);
}
.dbtgf-step-circle.active-orange,
.dbtgf-step-circle.active-blue,
.dbtgf-step-circle.active-green { background: var(--gf-yellow); color: var(--gf-ink); box-shadow: inset 0 0 0 3px var(--gf-ink); }
.dbtgf-step-circle.done { background: var(--gf-ink); color: #fff; box-shadow: none; }
.dbtgf-step-connector { flex: 1; height: 3px; margin: 0 6px; border-radius: 2px; background: var(--gf-line); }
.dbtgf-step-connector.active { background: var(--gf-ink); }

/* ---------- steps ---------- */
.dbtgf-step { display: none; }
.dbtgf-step.visible { display: block; animation: dbtgf-in .3s var(--gf-ease); }
@keyframes dbtgf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dbtgf-step-title, .dbtgf-confirm-title {
  margin: 0 0 18px; text-align: center; color: var(--gf-ink);
  font: 800 clamp(22px, 3.4vw, 28px)/1.15 var(--gf-display);
}
/* headings get focus from script on each step change (for screen readers); they aren't controls, so no ring */
.dbtgf-root h2[tabindex="-1"]:focus, .dbtgf-root h2[tabindex="-1"]:focus-visible { outline: none; }
.dbtgf-step-title-green { color: var(--gf-ink); }
.dbtgf-root .dbtgf-step-subtitle { margin: -10px 0 18px; text-align: center; font: 600 15px/1.4 var(--gf-text); color: var(--gf-ink-soft); }

/* ---------- choice chips (same as the homepage finder) ---------- */
.dbtgf-age-grid, .dbtgf-gender-grid, .dbtgf-budget-grid { display: grid; gap: 12px; }
/* flex so the odd last row (7 ages) sits centred */
.dbtgf-age-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.dbtgf-age-btn { flex: 0 0 calc((100% - 36px) / 4); }
.dbtgf-gender-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dbtgf-budget-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dbtgf-age-btn, .dbtgf-gender-btn, .dbtgf-budget-btn {
  appearance: none; margin: 0; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 84px; padding: 12px 8px; border-radius: 18px;
  background: #fff; color: var(--gf-ink); box-shadow: var(--gf-shadow);
  font: 800 22px/1 var(--gf-display); text-align: center; text-transform: none; letter-spacing: 0;
  transition: transform .18s var(--gf-ease), background-color .18s, box-shadow .18s;
}
.dbtgf-age-icon { font: 800 26px/1 var(--gf-display); }
.dbtgf-age-label { font: 700 13px/1.2 var(--gf-text); color: var(--gf-ink-soft); }
.dbtgf-gender-btn { min-height: 72px; }
.dbtgf-budget-btn { min-height: 64px; font: 800 17px/1.15 var(--gf-text); }

.dbtgf-age-btn:hover, .dbtgf-gender-btn:hover, .dbtgf-budget-btn:hover {
  background: var(--gf-yellow); color: var(--gf-ink); transform: translateY(-2px);
}
.dbtgf-age-btn:hover .dbtgf-age-label { color: var(--gf-ink); }

/* ---------- selected tags ---------- */
.dbtgf-selected-tag, .dbtgf-confirm-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.dbtgf-tag {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; border-radius: 999px;
  background: #fff; color: var(--gf-ink); box-shadow: inset 0 0 0 2px var(--gf-line);
  font: 700 14px/1.2 var(--gf-text);
}

/* ---------- custom budget ---------- */
.dbtgf-slider-wrap {
  margin-top: 16px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: var(--gf-shadow); text-align: center;
}
.dbtgf-root .dbtgf-slider-title { margin: 0 0 10px; font: 700 15px/1.3 var(--gf-text); color: var(--gf-ink-soft); }
.dbtgf-slider-row { display: flex; align-items: center; gap: 12px; }
.dbtgf-slider-minmax { flex: none; font: 700 14px/1 var(--gf-text); color: var(--gf-ink-soft); }
.dbtgf-slider { flex: 1; min-width: 0; height: 28px; margin: 0; accent-color: var(--gf-pink); cursor: pointer; }
.dbtgf-slider-display { margin: 8px 0 12px; font: 800 30px/1 var(--gf-display); color: var(--gf-ink); }

/* ---------- buttons ---------- */
.dbtgf-find-btn, .dbtgf-use-budget-btn, .dbtgf-skip-btn, .dbtgf-back-btn, .dbtgf-reset-btn {
  appearance: none; margin: 0; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; text-transform: none; letter-spacing: 0; text-decoration: none;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--gf-ease);
}
.dbtgf-find-btn {
  width: 100%; min-height: 60px; padding: 14px 28px; margin: 6px 0 4px;
  background: var(--gf-pink); color: #fff; font: 800 20px/1.1 var(--gf-display);
  box-shadow: 0 10px 24px rgba(209, 19, 117, .28);
}
.dbtgf-find-btn:hover { background: var(--gf-pink-deep); transform: translateY(-1px); }
.dbtgf-find-btn svg { flex: none; }

.dbtgf-use-budget-btn {
  min-height: 48px; padding: 12px 26px; background: var(--gf-ink); color: #fff; font: 800 16px/1.1 var(--gf-text);
}
.dbtgf-use-budget-btn:hover { background: #000; transform: translateY(-1px); }

.dbtgf-skip-btn {
  display: flex; width: 100%; min-height: 52px; margin-top: 14px; padding: 12px 20px;
  background: #fff; color: var(--gf-ink); box-shadow: inset 0 0 0 2px var(--gf-ink); font: 800 16px/1.2 var(--gf-text);
}
.dbtgf-skip-btn:hover { background: var(--gf-yellow); }

.dbtgf-back-btn, .dbtgf-reset-btn {
  min-height: 44px; padding: 10px 16px; background: transparent; color: var(--gf-ink-soft); font: 700 15px/1.2 var(--gf-text);
}
.dbtgf-back-btn { display: flex; margin: 14px auto 0; }
.dbtgf-back-btn:hover, .dbtgf-reset-btn:hover { color: var(--gf-ink); background: #fff; }

/* ---------- confirm ---------- */
.dbtgf-confirm-card {
  max-width: 520px; margin: 0 auto; padding: 26px 24px 18px; border-radius: 20px; background: #fff; box-shadow: var(--gf-shadow); text-align: center;
}
.dbtgf-confirm-tags { margin-bottom: 18px; }
.dbtgf-confirm-back-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 6px; }

/* ---------- keyboard focus ---------- */
.dbtgf-root button:focus { outline: none; }
.dbtgf-root button:focus-visible,
.dbtgf-slider:focus-visible { outline: 3px solid var(--gf-blue); outline-offset: 3px; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .dbtgf-widget { padding: 22px 14px 18px; border-radius: 20px; }
  .dbtgf-age-grid { gap: 10px; }
  .dbtgf-age-btn { flex-basis: calc((100% - 20px) / 3); }
  .dbtgf-budget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dbtgf-gender-grid { gap: 10px; }
  .dbtgf-age-btn { min-height: 72px; padding: 10px 4px; }
  .dbtgf-age-icon { font-size: 22px; }
  .dbtgf-budget-btn { min-height: 56px; font-size: 16px; }
  .dbtgf-find-btn { font-size: 18px; }
  .dbtgf-slider-wrap { padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .dbtgf-root *, .dbtgf-root *::before, .dbtgf-root *::after { animation: none !important; transition: none !important; }
  .dbtgf-root button:hover { transform: none; }
}