/*
 * Seasonal Planner for Apple Ads (MAR-846) — native apptweak.com skin.
 * Served raw (plugin CSS is never Tailwind-compiled). Every selector is
 * `.sbp .x` (two classes) so it outranks Elementor kit rules such as
 * `.elementor-kit-NNN h2` (0,1,1). Headings keep the kit's font family.
 */
.sbp {
  --sbp-brand: #C82C46;
  --sbp-dear: #93323E;
  --sbp-ink: #11100F;
  --sbp-ink-2: #2A2825;
  --sbp-muted: #7C7F74;
  --sbp-line: #E2DACA;
  --sbp-soft: #F9F7F3;
  --sbp-beige: #EDEDE5;
  --sbp-radius: 16px;
  max-width: 1040px;
  margin: 0 auto;
  color: var(--sbp-ink-2);
}
.sbp *,
.sbp *::before,
.sbp *::after { box-sizing: border-box; }
.sbp [hidden] { display: none !important; }

/* Cards + type */
.sbp .sbp-card { background: #fff; border: 1px solid var(--sbp-line); border-radius: var(--sbp-radius); padding: 24px; }
.sbp .sbp-results > .sbp-card + .sbp-card { margin-top: 24px; }
.sbp .sbp-h2 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--sbp-ink); letter-spacing: 0; }
.sbp .sbp-h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--sbp-ink); letter-spacing: 0; }
.sbp .sbp-hint,
.sbp .sbp-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--sbp-muted); }
.sbp .sbp-section-title { margin-bottom: 12px; }
.sbp .sbp-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.sbp .sbp-card__head .sbp-section-title { margin-bottom: 0; flex: 1 1 320px; }
.sbp .sbp-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sbp-muted); }
.sbp .sbp-headline { margin: 12px 0 0; font-size: 24px; line-height: 1.35; font-weight: 500; color: var(--sbp-ink); }
.sbp .sbp-num { font-weight: 700; }
.sbp .is-brand { color: var(--sbp-brand); }
.sbp .sbp-warn { display: inline-block; margin: 8px 0 0; padding: 4px 10px; border-radius: 8px; background: #FBEFD9; color: #7A4A00; font-size: 13px; }
.sbp .sbp-explainer { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--sbp-soft); font-size: 14px; line-height: 1.5; color: var(--sbp-ink-2); }
.sbp .sbp-error { margin: 6px 0 0; font-size: 13px; color: var(--sbp-dear); }
.sbp .sbp-link { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--sbp-brand); text-decoration: underline; cursor: pointer; }

/* Hero + form, side by side as in PA Input.tsx, but closer to even so the
   form is wide enough for its budget label and the hero column isn't mostly
   empty. Sized by the widget's own width, not the viewport: they share a row
   only when both minimums fit, and the hero fills the row once the form
   collapses into the summary bar. */
.sbp .sbp-intro { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 48px; }
.sbp .sbp-hero { display: flex; flex: 1 1 400px; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; padding-top: 16px; }
.sbp .sbp-form-zone { flex: 1 1 470px; min-width: 0; }
.sbp .sbp-hero__title { margin: 0; font-size: 40px; line-height: 1.15; font-weight: 400; letter-spacing: 0; color: var(--sbp-ink); text-wrap: balance; }
.sbp .sbp-hero__intro { margin: 0; max-width: 620px; font-size: 18px; line-height: 1.5; color: var(--sbp-muted); }
.sbp .sbp-hero__badge { display: block; width: auto; max-width: none; height: 40px; }
/* Results stack under the intro; with the form open the summary is hidden. */
.sbp .sbp-intro ~ .sbp-summary,
.sbp .sbp-intro ~ .sbp-capture { margin-top: 40px; }
.sbp .sbp-summary:not([hidden]) + .sbp-capture { margin-top: 24px; }

/* Form */
.sbp .sbp-form { display: flex; flex-direction: column; gap: 20px; box-shadow: 0 8px 24px rgba(17, 16, 15, 0.06); }
.sbp .sbp-form__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
/* Fields pair up when the card fits two 240px columns, never more than two. */
.sbp .sbp-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, calc(50% - 10px)), 1fr)); gap: 20px; }
.sbp .sbp-field__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sbp .sbp-field__row .sbp-label { margin: 0; }
.sbp .sbp-label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sbp-ink-2); }
.sbp .sbp-select,
.sbp .sbp-input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--sbp-line); border-radius: 12px; background: #fff; color: var(--sbp-ink); font: inherit; font-size: 16px; }
.sbp .sbp-select:focus-visible,
.sbp .sbp-input:focus-visible,
.sbp .sbp-seg__btn:focus-visible,
.sbp .sbp-pill:focus-visible,
.sbp .sbp-compare__toggle:focus-visible { outline: 2px solid var(--sbp-brand); outline-offset: 2px; }
.sbp .sbp-select:disabled,
.sbp .sbp-input:disabled { background: var(--sbp-soft); color: var(--sbp-muted); cursor: not-allowed; }
.sbp .sbp-compare { border: 1px solid var(--sbp-line); border-radius: 12px; }
.sbp .sbp-compare__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--sbp-ink); text-align: left; cursor: pointer; }
.sbp .sbp-compare__toggle svg { flex: none; color: var(--sbp-muted); transition: transform 0.15s; }
.sbp .sbp-compare__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sbp .sbp-compare__panel { padding: 14px; border-top: 1px solid var(--sbp-line); }
.sbp .sbp-submit { display: block; width: 100%; text-align: center; font-size: 16px; }
.sbp .sbp-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.sbp .sbp-footnote { margin: 0; text-align: center; font-size: 12px; color: var(--sbp-muted); }

/* Segmented control + pills */
.sbp .sbp-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--sbp-beige); }
.sbp .sbp-seg__btn { padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13px; line-height: 1.4; color: var(--sbp-muted); cursor: pointer; }
.sbp .sbp-seg__btn.is-on { background: #fff; color: var(--sbp-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.sbp .sbp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sbp .sbp-pill { padding: 6px 14px; border: 1px solid var(--sbp-line); border-radius: 999px; background: #fff; font: inherit; font-size: 14px; color: var(--sbp-ink-2); cursor: pointer; }
.sbp .sbp-pill.is-on { border-color: var(--sbp-ink-2); background: var(--sbp-ink-2); color: #fff; }

/* Summary bar */
.sbp .sbp-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px; border: 1px solid var(--sbp-line); border-radius: var(--sbp-radius); background: var(--sbp-soft); }
.sbp .sbp-badge { padding: 4px 10px; border: 1px solid var(--sbp-line); border-radius: 999px; background: #fff; font-size: 12px; color: var(--sbp-ink-2); }
.sbp .sbp-summary__text { font-size: 14px; font-weight: 600; color: var(--sbp-ink); }
.sbp .sbp-summary__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }
.sbp .sbp-png { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; }
.sbp .sbp-png:disabled { opacity: 0.6; cursor: progress; }

/* Charts, legends, tables, tips */
.sbp .sbp-chart { display: block; max-width: 100%; height: auto; overflow: visible; }
.sbp .sbp-chart text { font-family: inherit; }
.sbp .sbp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--sbp-muted); }
.sbp .sbp-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.sbp .sbp-legend__swatch { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.sbp .sbp-legend__swatch.is-bar { width: 10px; height: 10px; border-radius: 2px; }
/* Chart hover: sbp-main.js marks the month .is-on and places one tooltip in .sbp-results */
.sbp .sbp-results { position: relative; }
.sbp .sbp-hover.is-on { visibility: visible; }
.sbp .sbp-charttip { position: absolute; z-index: 20; min-width: 140px; padding: 8px 10px; border: 1px solid var(--sbp-line); border-radius: 8px; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); font-size: 12px; line-height: 1.45; color: var(--sbp-ink-2); white-space: nowrap; pointer-events: none; }
.sbp .sbp-charttip[hidden] { display: none; }
.sbp .sbp-charttip__label { margin: 0 0 4px; font-weight: 600; color: var(--sbp-ink); }
.sbp .sbp-charttip ul { margin: 0; padding: 0; list-style: none; }
.sbp .sbp-charttip li { display: flex; align-items: center; gap: 6px; margin: 0; padding: 1px 0; }
.sbp .sbp-charttip__swatch { flex: none; width: 8px; height: 8px; border-radius: 999px; }
.sbp .sbp-charttip__value { margin-left: auto; padding-left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sbp-ink); }
.sbp .sbp-table { margin-top: 12px; }
.sbp .sbp-table > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--sbp-brand); }
.sbp .sbp-table__scroll { margin-top: 8px; overflow-x: auto; border: 1px solid var(--sbp-line); border-radius: 12px; }
.sbp .sbp-table table { width: 100%; margin: 0; border-collapse: collapse; border: 0; font-size: 13px; }
.sbp .sbp-table th,
.sbp .sbp-table td { padding: 8px 12px; border: 0; border-bottom: 1px solid var(--sbp-beige); text-align: left; white-space: nowrap; }
.sbp .sbp-table th { background: var(--sbp-soft); font-weight: 600; color: var(--sbp-ink); }
.sbp .sbp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sbp .sbp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sbp .sbp-tip { position: relative; display: inline-flex; margin-left: 4px; vertical-align: middle; }
.sbp .sbp-tip__btn { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--sbp-muted); border-radius: 999px; background: #fff; font: inherit; font-size: 9px; font-weight: 600; line-height: 1; color: var(--sbp-muted); cursor: help; }
.sbp .sbp-tip__text { display: none; position: absolute; top: 100%; left: 0; z-index: 20; width: 224px; margin-top: 6px; padding: 10px; border: 1px solid var(--sbp-line); border-radius: 8px; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--sbp-ink-2); text-align: left; white-space: normal; }
.sbp .sbp-tip.is-right .sbp-tip__text { right: 0; left: auto; }
.sbp .sbp-tip:hover .sbp-tip__text,
.sbp .sbp-tip:focus-within .sbp-tip__text { display: block; }

/* Campaign Manager section */
.sbp .sbp-cm { margin-top: 40px; }
.sbp .sbp-cm__intro { max-width: 640px; margin: 0 auto; text-align: center; }
.sbp .sbp-cm__intro p { margin: 8px 0 0; font-size: 15px; color: var(--sbp-muted); }
.sbp .sbp-cm__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.sbp .sbp-cm__block svg { color: var(--sbp-brand); }
.sbp .sbp-cm__block .sbp-h3 { margin: 16px 0 0; font-size: 18px; color: var(--sbp-brand); }
.sbp .sbp-cm__block p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--sbp-muted); }
.sbp .sbp-cm__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.sbp .sbp-footer { margin: 24px 0 0; text-align: center; font-size: 12px; color: var(--sbp-muted); }

/* PNG export chrome (PA's `exporting` state) */
.sbp .sbp-export { display: none; }
.sbp.is-exporting .sbp-export { display: block; margin-bottom: 16px; }
.sbp .sbp-export__top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sbp-line); }
.sbp .sbp-export__title { font-size: 14px; font-weight: 600; color: var(--sbp-ink); }
.sbp .sbp-export__date { font-size: 12px; color: var(--sbp-muted); }
.sbp .sbp-export__meta { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--sbp-ink); }
.sbp .sbp-export-foot { display: none; }
.sbp.is-exporting .sbp-export-foot { display: block; margin-top: 24px; }
.sbp .sbp-export__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--sbp-line); font-size: 12px; color: var(--sbp-muted); }
.sbp .sbp-export__url { font-weight: 600; color: var(--sbp-ink); }
/* The image is the whole beige zone minus what only works on screen: controls and the (unclickable) CTAs. */
.sbp.is-exporting .sbp-screen-only,
.sbp.is-exporting .sbp-table > summary,
.sbp.is-exporting .sbp-tip,
.sbp.is-exporting .sbp-charttip,
.sbp.is-exporting .sbp-cm__ctas { display: none !important; }

@media (min-width: 782px) {
  .sbp .sbp-cm__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 781px) {
  .sbp .sbp-hero__title { font-size: 32px; }
  .sbp .sbp-hero__intro { font-size: 16px; }
  .sbp .sbp-card { padding: 16px; }
  .sbp .sbp-headline { font-size: 20px; }
  .sbp .sbp-summary__actions { width: 100%; margin-left: 0; }
}