/* ==========================================================
   Ad Budget Planner — scoped styles
   All rules live under #ad-budget-planner so they never
   affect the rest of the page.  Colours, fonts, and base
   font-size are intentionally NOT set here — they inherit
   from whatever the WordPress theme defines.
   ========================================================== */

#ad-budget-planner {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5em 1em;
}
#ad-budget-planner *, #ad-budget-planner *::before, #ad-budget-planner *::after {
  box-sizing: border-box;
}

/* Layout */
#ad-budget-planner .abp-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
#ad-budget-planner .abp-wrap.abp-wide { max-width: 740px; }

/* Fade-in */
@keyframes abpIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0);   }
}
#ad-budget-planner .abp-screen { animation: abpIn 0.3s ease; }

/* Header */
#ad-budget-planner .abp-header { text-align: center; margin-bottom: 2.2em; }
#ad-budget-planner .abp-eyebrow {
  font-size: 0.68em; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.4; margin-bottom: 0.4em;
}
#ad-budget-planner .abp-title {
  font-size: 1.65em; font-weight: 500; line-height: 1.2; margin: 0;
}

/* Progress */
#ad-budget-planner .abp-prog-row {
  display: flex; justify-content: space-between;
  font-size: 0.7em; opacity: 0.4; letter-spacing: 0.07em;
  text-transform: uppercase; margin-bottom: 0.5em;
}
#ad-budget-planner .abp-track {
  height: 2px; border-radius: 2px; margin-bottom: 2em;
  background: currentColor; opacity: 0.12;
  position: relative; overflow: hidden;
}
#ad-budget-planner .abp-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: currentColor; opacity: 1; border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
}

/* Card */
#ad-budget-planner .abp-card {
  border: 1px solid currentColor; border-radius: 10px;
  padding: 2em 2.2em; margin-bottom: 1.2em;
  background: rgba(128,128,128,0.04);
}
#ad-budget-planner .abp-q {
  font-size: 1.15em; line-height: 1.6; margin: 0 0 0.3em; font-weight: normal;
}
#ad-budget-planner .abp-hint {
  font-size: 0.8em; opacity: 0.48; font-style: italic;
  margin: 0 0 1.5em; line-height: 1.5;
}
#ad-budget-planner .abp-spacer { margin-bottom: 1.5em; }

/* Choice buttons */
#ad-budget-planner .abp-choices { display: flex; flex-direction: column; gap: 0.55em; }
#ad-budget-planner .abp-choice {
  background: transparent; border: 1px solid currentColor; border-radius: 7px;
  padding: 0.82em 1.1em; color: inherit; font: inherit; font-size: 0.95em;
  cursor: pointer; text-align: left; opacity: 0.6; line-height: 1.4;
  transition: opacity 0.15s, background 0.15s;
}
#ad-budget-planner .abp-choice:hover { opacity: 1; background: rgba(128,128,128,0.08); }

/* Number input */
#ad-budget-planner .abp-input-row { display: flex; align-items: center; gap: 0.5em; }
#ad-budget-planner .abp-sym { font-size: 1.25em; opacity: 0.38; flex-shrink: 0; }
#ad-budget-planner .abp-num {
  flex: 1; background: transparent; border: 1px solid currentColor; border-radius: 6px;
  padding: 0.72em 0.9em; color: inherit; font: inherit; font-size: 1.15em;
  outline: none; opacity: 0.85; transition: opacity 0.2s; -moz-appearance: textfield;
}
#ad-budget-planner .abp-num::-webkit-outer-spin-button,
#ad-budget-planner .abp-num::-webkit-inner-spin-button { -webkit-appearance: none; }
#ad-budget-planner .abp-num:focus { opacity: 1; }
#ad-budget-planner .abp-num:disabled { opacity: 0.18; cursor: not-allowed; }
#ad-budget-planner .abp-num::placeholder { opacity: 0.28; }

#ad-budget-planner .abp-dk {
  display: flex; align-items: center; gap: 0.6em; margin-top: 1em;
  cursor: pointer; font-size: 0.83em; opacity: 0.48; user-select: none;
  transition: opacity 0.15s;
}
#ad-budget-planner .abp-dk:hover { opacity: 0.75; }
#ad-budget-planner .abp-dk input { width: 14px; height: 14px; cursor: pointer; }

/* Nav */
#ad-budget-planner .abp-nav {
  display: flex; justify-content: space-between; align-items: center;
}
#ad-budget-planner .abp-btn-back {
  background: transparent; border: none; color: inherit; font: inherit;
  font-size: 0.87em; opacity: 0.4; cursor: pointer; padding: 0.5em 0;
  transition: opacity 0.15s;
}
#ad-budget-planner .abp-btn-back:hover { opacity: 0.85; }
#ad-budget-planner .abp-btn-back:disabled { opacity: 0.15; cursor: default; pointer-events: none; }
#ad-budget-planner .abp-btn-next {
  background: transparent; border: 1px solid currentColor; border-radius: 7px;
  padding: 0.72em 2em; color: inherit; font: inherit; font-size: 0.9em;
  opacity: 0.88; cursor: pointer; transition: opacity 0.15s, background 0.15s;
}
#ad-budget-planner .abp-btn-next:hover { background: rgba(128,128,128,0.1); opacity: 1; }
#ad-budget-planner .abp-btn-next:disabled { opacity: 0.18; cursor: default; pointer-events: none; }

/* Results — hero */
#ad-budget-planner .abp-hero {
  border: 1px solid currentColor; border-radius: 10px;
  padding: 2.5em 2em; margin-bottom: 1.8em; text-align: center;
  background: rgba(128,128,128,0.05);
}
#ad-budget-planner .abp-hero-lbl {
  font-size: 0.67em; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.4; margin-bottom: 0.5em;
}
#ad-budget-planner .abp-hero-amt {
  font-size: 3.8em; font-weight: 300; line-height: 1.05;
  margin-bottom: 0.22em; letter-spacing: -0.02em;
}
#ad-budget-planner .abp-hero-amt.abp-rng { font-size: 2.7em; }
#ad-budget-planner .abp-hero-method {
  font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.45; margin-bottom: 0.55em;
}
#ad-budget-planner .abp-hero-formula { font-size: 0.83em; font-style: italic; opacity: 0.42; }
#ad-budget-planner .abp-disclaimer {
  font-size: 0.75em; opacity: 0.45; line-height: 1.6;
  margin-top: 1.2em; padding-top: 1em;
  border-top: 1px solid currentColor;
}

/* Results — insufficient */
#ad-budget-planner .abp-insuf {
  border: 1px solid currentColor; border-radius: 10px;
  padding: 2.4em 2em; margin-bottom: 1.8em; text-align: center;
  background: rgba(128,128,128,0.04); opacity: 0.82;
}
#ad-budget-planner .abp-insuf-icon { font-size: 2em; margin-bottom: 0.45em; }
#ad-budget-planner .abp-insuf-title { font-size: 1.25em; font-weight: 500; margin-bottom: 0.4em; }
#ad-budget-planner .abp-insuf-body { font-size: 0.9em; line-height: 1.7; opacity: 0.7; }

/* Results — section label */
#ad-budget-planner .abp-sec-lbl {
  font-size: 0.67em; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.38; margin-bottom: 0.8em;
}

/* Results — methods */
#ad-budget-planner .abp-methods { margin-bottom: 1.8em; }
#ad-budget-planner .abp-method {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1em 1.2em; border: 1px solid currentColor; border-radius: 7px;
  margin-bottom: 0.5em; background: rgba(128,128,128,0.03);
}
#ad-budget-planner .abp-method-l { flex: 1; padding-right: 1.2em; }
#ad-budget-planner .abp-method-name { font-size: 0.87em; margin-bottom: 0.18em; }
#ad-budget-planner .abp-method-fml { font-size: 0.75em; font-style: italic; opacity: 0.48; }
#ad-budget-planner .abp-method-r { text-align: right; flex-shrink: 0; }
#ad-budget-planner .abp-method-amt { font-size: 1.18em; }
#ad-budget-planner .abp-method-conf {
  font-size: 0.63em; text-transform: uppercase; letter-spacing: 0.09em;
  margin-top: 0.18em; opacity: 0.45;
}

/* Results — missing cards */
#ad-budget-planner .abp-missing { margin-bottom: 1.8em; }
#ad-budget-planner .abp-miss-card {
  border: 1px solid currentColor; border-radius: 7px;
  padding: 1.15em 1.4em; margin-bottom: 0.55em;
  background: rgba(128,128,128,0.03);
}
#ad-budget-planner .abp-miss-field { font-size: 0.9em; font-weight: 600; margin-bottom: 0.35em; }
#ad-budget-planner .abp-miss-why { font-size: 0.8em; line-height: 1.65; margin-bottom: 0.28em; opacity: 0.68; }
#ad-budget-planner .abp-miss-how { font-size: 0.8em; line-height: 1.65; opacity: 0.78; }

/* Results — answers recap */
#ad-budget-planner .abp-recap {
  border: 1px solid currentColor; border-radius: 7px;
  padding: 1.15em 1.4em; margin-bottom: 1.8em;
  background: rgba(128,128,128,0.03);
}
#ad-budget-planner .abp-recap-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.42em 0; font-size: 0.82em;
  border-bottom: 1px solid currentColor; opacity: 0.72;
}
#ad-budget-planner .abp-recap-row:last-child { border-bottom: none; }
#ad-budget-planner .abp-recap-q { flex: 1; padding-right: 1em; opacity: 0.65; }
#ad-budget-planner .abp-recap-v { flex-shrink: 0; }
#ad-budget-planner .abp-recap-v.abp-unk { opacity: 0.32; font-style: italic; }

/* Restart */
#ad-budget-planner .abp-restart { text-align: center; }
#ad-budget-planner .abp-btn-restart {
  background: transparent; border: 1px solid currentColor; border-radius: 7px;
  padding: 0.68em 2.2em; color: inherit; font: inherit; font-size: 0.87em;
  opacity: 0.4; cursor: pointer; transition: opacity 0.15s;
}
#ad-budget-planner .abp-btn-restart:hover { opacity: 0.82; }

@media (max-width: 520px) {
  #ad-budget-planner .abp-card { padding: 1.4em 1.1em; }
  #ad-budget-planner .abp-hero { padding: 1.8em 1.1em; }
  #ad-budget-planner .abp-hero-amt { font-size: 2.8em; }
  #ad-budget-planner .abp-hero-amt.abp-rng { font-size: 2em; }
}