/* Scoped, theme-resistant styles for the Potion Finder Quiz shortcode */

.pfq-root {
  --pfq-slate: #1a1a1a !important;
  --pfq-cream: #f9f9f6 !important;
  --pfq-ink: #1f2024 !important;
  --pfq-blue: #2563eb !important;
  --pfq-pink: #ec0f5e !important;
  --pfq-green: #5ec93b !important;
  --pfq-gold: #c9a227 !important;
  --pfq-steel: #5b6b7b !important;

  all: initial;
  display: block !important;
  box-sizing: border-box !important;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif !important;
  color: var(--pfq-cream) !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
}

.pfq-root *,
.pfq-root *::before,
.pfq-root *::after {
  box-sizing: border-box !important;
}

.pfq-shell {
  background: var(--pfq-slate) !important;
  color: var(--pfq-cream) !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Hero */
.pfq-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 7rem 1.5rem 6rem !important;
}

.pfq-hero-bg {
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.pfq-hero-circle {
  position: absolute !important;
  border-radius: 9999px !important;
  border: 2px solid transparent !important;
}

.pfq-hero-circle--green {
  left: -10rem !important;
  top: 2.5rem !important;
  width: 32.5rem !important;
  height: 32.5rem !important;
  border-color: color-mix(in srgb, var(--pfq-green) 25%, transparent) !important;
}

.pfq-hero-circle--blue {
  right: -8rem !important;
  top: -6rem !important;
  width: 28.75rem !important;
  height: 28.75rem !important;
  border-color: color-mix(in srgb, var(--pfq-blue) 25%, transparent) !important;
}

.pfq-hero-circle--pink {
  right: -5rem !important;
  bottom: -10rem !important;
  width: 26.25rem !important;
  height: 26.25rem !important;
  border-color: color-mix(in srgb, var(--pfq-pink) 20%, transparent) !important;
}

.pfq-hero-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 56rem !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.pfq-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.pfq-logo {
  display: block !important;
  width: auto !important;
  height: 2.75rem !important;
  max-width: min(220px, 70vw) !important;
  object-fit: contain !important;
}

@media (min-width: 768px) {
  .pfq-logo {
    height: 3.25rem !important;
    max-width: 260px !important;
  }
}

.pfq-title {
  margin: 2rem 0 0 !important;
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  color: var(--pfq-cream) !important;
}

@media (min-width: 768px) {
  .pfq-title {
    font-size: 60px !important;
  }
}

@media (max-width: 767px) {
  .pfq-title-br {
    display: none !important;
  }
}

.pfq-pink { color: var(--pfq-pink) !important; }
.pfq-blue { color: var(--pfq-blue) !important; }
.pfq-green { color: var(--pfq-green) !important; }

.pfq-lead {
  margin: 1.75rem auto 0 !important;
  max-width: 42rem !important;
  font-size: clamp(1rem, 2vw, 1.125rem) !important;
  line-height: 1.65 !important;
  color: color-mix(in srgb, var(--pfq-cream) 65%, transparent) !important;
}

/* Quiz section */
.pfq-quiz {
  padding: 0 1.5rem 7rem !important;
}

.pfq-quiz-inner {
  max-width: 42rem !important;
  margin: 0 auto !important;
}

/* Card */
.pfq-card {
  background: var(--pfq-cream) !important;
  color: var(--pfq-ink) !important;
  border-radius: 28px !important;
  padding: 1.75rem !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6) !important;
}

@media (min-width: 640px) {
  .pfq-card { padding: 2.5rem !important; }
}

.pfq-card--quiz {
  overflow: hidden !important;
}

.pfq-card-body {
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.pfq-card-body--leaving {
  opacity: 0 !important;
  transform: translateY(6px) !important;
  pointer-events: none !important;
}

.pfq-card-body--enter {
  opacity: 0 !important;
  transform: translateY(-6px) !important;
}

.pfq-card--result {
  text-align: center !important;
  padding: 2rem !important;
  animation: pfq-fade-in 0.35s ease-out !important;
}

@media (min-width: 640px) {
  .pfq-card--result { padding: 3rem !important; }
}

@keyframes pfq-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.pfq-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.pfq-tube {
  width: 1.5rem !important;
  height: 3.5rem !important;
  flex-shrink: 0 !important;
}

.pfq-tube-fill {
  transition: y 0.5s ease, height 0.5s ease !important;
}

.pfq-sample {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--pfq-blue) !important;
}

.pfq-status {
  margin: 0.25rem 0 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--pfq-ink) !important;
}

.pfq-question {
  margin: 2rem 0 0 !important;
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 1.875rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--pfq-ink) !important;
}

.pfq-label {
  margin: 0.5rem 0 0 !important;
  font-size: 0.875rem !important;
  color: var(--pfq-blue) !important;
}

.pfq-options {
  margin-top: 1.75rem !important;
  display: grid !important;
  gap: 0.75rem !important;
}

.pfq-option {
  all: unset;
  display: block !important;
  width: 100% !important;
  cursor: pointer !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #fff !important;
  padding: 1rem 1.5rem !important;
  text-align: left !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--pfq-ink) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.pfq-option:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--pfq-blue) 40%, transparent) !important;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5) !important;
}

.pfq-back {
  all: unset;
  display: inline-block !important;
  margin-top: 1.5rem !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  color: color-mix(in srgb, var(--pfq-ink) 50%, transparent) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pfq-back:hover {
  color: var(--pfq-ink) !important;
  background: transparent !important;
}

/* Buttons */
.pfq-btn {
  all: unset;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 9999px !important;
  padding: 1rem 2rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.pfq-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.875rem !important;
  margin-top: 2.5rem !important;
}

.pfq-btn--primary {
  margin-top: 0 !important;
  background: var(--pfq-pink) !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.pfq-btn--primary:hover {
  transform: scale(1.03) !important;
}

.pfq-btn--lab {
  margin-top: 0 !important;
  background: #62bd19 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.pfq-btn--lab:hover {
  transform: scale(1.03) !important;
  color: #fff !important;
}

.pfq-btn--accent {
  color: #fff !important;
}

.pfq-btn--accent:hover {
  transform: scale(1.02) !important;
}

.pfq-btn--outline {
  border: 2px solid var(--pfq-ink) !important;
  color: var(--pfq-ink) !important;
}

.pfq-btn--outline:hover {
  background: var(--pfq-ink) !important;
  color: var(--pfq-cream) !important;
}

/* Result */
.pfq-icon {
  width: 4rem !important;
  height: 4rem !important;
}

.pfq-result-accent {
  color: var(--pfq-pink) !important;
}

.pfq-result-cta {
  background-color: var(--pfq-pink) !important;
}

.pfq-result-eyebrow {
  margin: 1.5rem 0 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: var(--pfq-blue) !important;
}

.pfq-result-title {
  margin: 0.75rem 0 0 !important;
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(1.875rem, 4vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--pfq-ink) !important;
}

.pfq-result-tagline {
  margin: 0.5rem 0 0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.pfq-result-body {
  margin: 1.5rem auto 0 !important;
  max-width: 36rem !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: color-mix(in srgb, var(--pfq-ink) 80%, transparent) !important;
}

.pfq-result-highlight {
  margin: 1.5rem auto 0 !important;
  max-width: 36rem !important;
  padding: 1rem 1.5rem !important;
  border-left: 4px solid var(--pfq-pink) !important;
  border-radius: 1rem !important;
  background: #fff !important;
  text-align: left !important;
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--pfq-ink) !important;
}

.pfq-result-peers {
  margin: 1.25rem 0 0 !important;
  font-size: 0.875rem !important;
  color: color-mix(in srgb, var(--pfq-ink) 55%, transparent) !important;
}

.pfq-result-actions {
  margin: 2rem auto 0 !important;
  max-width: 28rem !important;
  display: grid !important;
  gap: 0.75rem !important;
}

.pfq-retake {
  all: unset;
  display: block !important;
  width: 100% !important;
  margin: 1rem auto 0 !important;
  padding: 0.5rem 0 !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  text-align: center !important;
  color: color-mix(in srgb, var(--pfq-ink) 55%, transparent) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.pfq-root .pfq-retake:hover,
.pfq-root .pfq-retake:focus,
.pfq-root .pfq-retake:active {
  color: var(--pfq-ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.pfq-footnote {
  margin: 1.5rem 0 0 !important;
  text-align: center !important;
  font-size: 0.75rem !important;
  line-height: 1.55 !important;
  color: color-mix(in srgb, var(--pfq-cream) 40%, transparent) !important;
}

/* Reset common theme overrides inside the widget */
.pfq-root a.pfq-btn {
  text-decoration: none !important;
}

.pfq-root h1,
.pfq-root h2,
.pfq-root p,
.pfq-root button {
  font-family: inherit !important;
}

.pfq-root button:focus-visible,
.pfq-root a:focus-visible {
  outline: 2px solid var(--pfq-blue) !important;
  outline-offset: 2px !important;
}

.pfq-root button.pfq-retake:focus-visible {
  outline: 2px solid var(--pfq-blue) !important;
  outline-offset: 2px !important;
  background: transparent !important;
}