/* ============================================================
   AuthorWings Cost Calculator v5
   Stylesheet — extracted from the original inline styles.
   No changes to selectors, colors, breakpoints, or behavior.
============================================================ */

.aw-calc,
.aw-calc * {
	box-sizing: border-box;
}

/* Visually-hidden utility for screen-reader-only content like the aria-live
   announcement region. Standard "sr-only" pattern: positioned off-screen but
   readable by assistive tech. */
.aw-calc .aw-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Suppress the focus outline on the question heading when it's only being
   focused programmatically (after step transition). Keyboard users tabbing
   in get a real focus ring on interactive controls below. */
.aw-calc #aw-questions h3:focus {
	outline: none;
}

.aw-calc {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding: 24px 12px;
	color: #1C2439;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

.aw-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.aw-progress-bar { flex: 1; height: 6px; background: #DCE5DE; border-radius: 3px; overflow: hidden; }
.aw-progress-fill { height: 100%; background: #5C7A6B; border-radius: 3px; transition: width 300ms ease; }
.aw-progress-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #5C7A6B; white-space: nowrap; }

.aw-q { background: #fff; border: 1px solid #DCE5DE; border-radius: 12px; padding: 24px 18px; margin-bottom: 16px; }
.aw-q-num { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #5C7A6B; margin: 0 0 6px 0; }
.aw-q h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px 0; color: #1C2439; line-height: 1.35; }
.aw-q-help { font-size: 13px; color: #5C7A6B; margin: 0 0 18px 0; line-height: 1.5; }
.aw-options { display: grid; gap: 10px; }

.aw-calc .aw-opt {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: #fff !important;
	border: 2px solid #DCE5DE;
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: all 0.15s ease;
	font-family: inherit;
	color: #1C2439 !important;
	outline: none;
	box-shadow: none;
}
.aw-calc .aw-opt:hover { border-color: #5C7A6B; background: #F6F9F7 !important; }
.aw-calc .aw-opt:focus,
.aw-calc .aw-opt:focus-visible,
.aw-calc .aw-opt:active {
	background: #F6F9F7 !important;
	color: #1C2439 !important;
	outline: none;
	box-shadow: none;
}
.aw-calc .aw-opt.aw-selected,
.aw-calc .aw-opt.aw-selected:hover,
.aw-calc .aw-opt.aw-selected:focus,
.aw-calc .aw-opt.aw-selected:focus-visible,
.aw-calc .aw-opt.aw-selected:active {
	border-color: #5C7A6B !important;
	background: #DCE5DE !important;
	color: #1C2439 !important;
}

.aw-calc .aw-opt-marker {
	width: 22px;
	height: 22px;
	border: 2px solid #B5C9BC;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	background: #fff;
}
.aw-calc .aw-opt.aw-checkbox .aw-opt-marker { border-radius: 4px; }
.aw-calc .aw-opt.aw-selected .aw-opt-marker { border-color: #5C7A6B !important; background: #5C7A6B !important; }
.aw-calc .aw-opt.aw-selected .aw-opt-marker::after {
	content: '\2713';
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* "Already included in Marketing Authority" disabled state */
.aw-calc .aw-opt.aw-opt-included {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	background: #F0F4F1 !important;
	border-color: #B5C9BC !important;
}
.aw-calc .aw-opt.aw-opt-included .aw-opt-title {
	color: #5C7A6B !important;
	text-decoration: line-through;
}
.aw-calc .aw-opt.aw-opt-included .aw-opt-marker {
	background: #5C7A6B !important;
	border-color: #5C7A6B !important;
}
.aw-calc .aw-opt.aw-opt-included .aw-opt-marker::after {
	content: '\2713';
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* "Already Included" summary block in results */
.aw-included-block {
	background: #DCE5DE;
	border: 2px solid #5C7A6B;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}
.aw-included-block h4 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #1C2439;
	margin: 0 0 10px 0;
}
.aw-included-block p { font-size: 13px; color: #1C2439; margin: 0 0 10px 0; }
.aw-included-block ul { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; color: #1C2439; }
.aw-included-block li { margin-bottom: 4px; }

.aw-calc .aw-opt-content { flex: 1; }
.aw-calc .aw-opt-title { font-size: 15px; font-weight: 600; color: #1C2439 !important; line-height: 1.35; }
.aw-calc .aw-opt-sub { font-size: 12px; color: #5C7A6B !important; margin-top: 2px; line-height: 1.4; }

.aw-cat { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #DCE5DE; }
.aw-cat:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.aw-cat-title { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5C7A6B; margin: 0 0 10px 0; }
.aw-cat-help { font-size: 12px; color: #5C7A6B; font-style: italic; margin: 0 0 10px 0; }

/* === Collapsible category cards (Step 5) ===
   Each selectable tier category on Step 5 — Illustrations, Cover, Formatting,
   Publishing — is wrapped in one of these so the page reads as a compact menu
   instead of a long scroll. The locked spine cards (Ghostwriting / Coaching /
   Editing) keep the plain .aw-cat styling above; they're informational and
   shouldn't be hideable.
*/
.aw-cat-collapsible {
	border: 1px solid #DCE5DE;
	border-radius: 8px;
	margin-bottom: 10px;
	background: #fff;
	overflow: hidden;
}
.aw-cat-collapsible:last-child { margin-bottom: 0; }
.aw-cat-collapsible.aw-open { border-color: #5C7A6B; }

.aw-calc .aw-cat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	background: #F6F9F7;
	border: none;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	user-select: none;
	outline: none;
	color: #1C2439;
	transition: background-color 0.15s ease;
}
.aw-calc .aw-cat-header:hover { background: #ECF1EE; }
.aw-calc .aw-cat-header:focus-visible {
	box-shadow: inset 0 0 0 2px #5C7A6B;
}
.aw-cat-collapsible.aw-open .aw-cat-header {
	background: #ECF1EE;
}

.aw-cat-header-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #5C7A6B;
	flex: 1;
	min-width: 0;
}
.aw-cat-header-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.aw-cat-header-summary {
	font-size: 12px;
	font-weight: 600;
	color: #1C2439;
	background: #DCE5DE;
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}
.aw-cat-header-summary.aw-empty {
	background: transparent;
	color: #5C7A6B;
	font-weight: 400;
	font-style: italic;
	padding: 4px 0;
}
.aw-cat-header-chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: #5C7A6B;
	transition: transform 0.2s ease;
}
.aw-cat-collapsible.aw-open .aw-cat-header-chevron { transform: rotate(180deg); }

.aw-cat-body {
	padding: 14px 16px 16px 16px;
	border-top: 1px solid #DCE5DE;
}
.aw-cat-collapsible:not(.aw-open) .aw-cat-body { display: none; }
/* The body wraps the existing .aw-tier-row + help/info-note markup, which
   each carry their own bottom margins; squash the body's last child so the
   card doesn't end with an awkward double gap. */
.aw-cat-body > *:last-child { margin-bottom: 0; }

/* Warn banner above the header — used when a section has a "must-see" alert
   the customer would miss with the section collapsed (e.g. children's
   illustration count mismatch). Sits flush with the header below it. */
.aw-cat-warn-banner {
	background: #FDF2F0;
	border-bottom: 1px solid #C44536;
	padding: 10px 14px;
	font-size: 12px;
	color: #1C2439;
	line-height: 1.5;
}
.aw-cat-warn-banner strong { color: #1C2439; }

@media (prefers-reduced-motion: reduce) {
	.aw-cat-header,
	.aw-cat-header-chevron { transition: none; }
}

/* === Edit-shortcut affordances ===
   Small "Change [X] →" buttons that jump state.step directly to an earlier
   step. Used on Step 5's locked spine cards, the children's illustration
   warn-banner, and the per-section disabled-tier notices. Sits as inline
   text-link styling (underlined, slightly weighted) so it reads as a link
   without competing visually with the primary tier cards / submit button.
*/
.aw-calc .aw-edit-shortcut {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: none;
	padding: 0;
	margin: 10px 0 0 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: #5C7A6B;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	line-height: 1.4;
}
.aw-calc .aw-edit-shortcut:hover { color: #1C2439; }
.aw-calc .aw-edit-shortcut:focus-visible {
	outline: 2px solid #5C7A6B;
	outline-offset: 2px;
	border-radius: 2px;
}
.aw-edit-shortcut-arrow {
	font-weight: 700;
	text-decoration: none;
}

/* When the edit-shortcut sits inline inside a warn-banner or a disabled-
   format notice, drop the top margin — the surrounding container already
   provides spacing. */
.aw-cat-warn-banner .aw-edit-shortcut,
.aw-disabled-format-notice .aw-edit-shortcut {
	margin: 0;
}
.aw-cat-warn-banner .aw-edit-shortcut {
	margin-left: 4px;
}

/* === Disabled-format notice (Cover / Formatting / Publishing) ===
   Renders at the top of a category's collapsible body when at least one tier
   in that section is locked out by Step 4's format picks. The badge on each
   disabled tier card already tells the customer "Not available for your
   formats"; this notice tells them why and how to fix it. */
.aw-disabled-format-notice {
	background: #F6F9F7;
	border: 1px dashed #B5C9BC;
	border-radius: 6px;
	padding: 8px 12px;
	margin: 0 0 12px 0;
	font-size: 12px;
	color: #5C7A6B;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	line-height: 1.4;
}
.aw-disabled-format-notice > span {
	flex: 1;
	min-width: 180px;
}

@media (max-width: 480px) {
	.aw-calc .aw-cat-header { padding: 12px 12px; gap: 8px; }
	.aw-cat-header-title { font-size: 11px; letter-spacing: 0.8px; }
	.aw-cat-header-summary { font-size: 11px; padding: 3px 6px; max-width: 130px; }
	.aw-cat-body { padding: 12px; }
	.aw-cat-warn-banner { padding: 9px 12px; font-size: 11px; }
}

.aw-tier-row {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
	gap: 8px;
	align-items: stretch;
}

.aw-calc .aw-tier {
	border: 2px solid #DCE5DE !important;
	border-radius: 6px;
	padding: 12px;
	background: #fff !important;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: #1C2439 !important;
	transition: all 0.15s ease;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 90px;
	user-select: none;
	outline: none;
}
.aw-calc .aw-tier:hover:not(.aw-disabled):not(.aw-locked) {
	border-color: #5C7A6B !important;
	background: #F6F9F7 !important;
}
.aw-calc .aw-tier.aw-selected,
.aw-calc .aw-tier.aw-selected:hover,
.aw-calc .aw-tier.aw-selected:focus,
.aw-calc .aw-tier.aw-selected:focus-visible,
.aw-calc .aw-tier.aw-selected:active {
	background: #DCE5DE !important;
	border-color: #5C7A6B !important;
	color: #1C2439 !important;
}
.aw-calc .aw-tier.aw-selected .aw-tier-name,
.aw-calc .aw-tier.aw-selected .aw-tier-price,
.aw-calc .aw-tier.aw-selected .aw-tier-desc {
	color: #1C2439 !important;
}
/* Locked auto-selected tier — Step 5's "spine" card (ghostwriting tier, coaching
   tier, or editing tier carried over from earlier steps). It looked visually
   identical to the optional cover/format/publish cards below it, which buried
   the most important card on the screen. These rules give it noticeable extra
   weight: thicker border, slightly deeper background tint, larger price font,
   gentle elevation shadow. Listed after .aw-selected so it wins the cascade
   (locked cards carry both .aw-selected and .aw-locked). */
.aw-calc .aw-tier.aw-locked {
	cursor: default;
	border-width: 3px !important;
	background: #CFDED4 !important;
	box-shadow: 0 1px 3px rgba(28, 36, 57, 0.08);
	padding: 14px;
	min-height: 100px;
}
.aw-calc .aw-tier.aw-locked .aw-tier-name { font-size: 14px; }
.aw-calc .aw-tier.aw-locked .aw-tier-price { font-size: 18px; }
.aw-calc .aw-tier.aw-disabled { opacity: 0.55; cursor: not-allowed; background: #F5F5F5 !important; }
.aw-calc .aw-tier.aw-disabled .aw-tier-name,
.aw-calc .aw-tier.aw-disabled .aw-tier-price,
.aw-calc .aw-tier.aw-disabled .aw-tier-desc { color: #999 !important; }
.aw-calc .aw-tier.aw-disabled .aw-tier-price { text-decoration: line-through; }

.aw-tier-disabled-badge {
	display: inline-block;
	background: #C44536;
	color: #fff !important;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 3px 6px;
	border-radius: 3px;
	margin-bottom: 4px;
}
.aw-auto-badge {
	display: inline-block;
	background: #5C7A6B;
	color: #fff !important;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 3px;
	margin-bottom: 6px;
	align-self: flex-start;
}
.aw-tier-name { font-size: 13px; font-weight: 700; color: #1C2439; }
.aw-tier-price { font-size: 15px; font-weight: 700; color: #5C7A6B; margin: 4px 0; }
.aw-tier-desc { font-size: 11px; color: #5C7A6B; line-height: 1.4; flex: 1; }

.aw-overage-note {
	background: #FDF8E8;
	border: 1px solid #E8D08A;
	border-radius: 6px;
	padding: 10px 12px;
	margin-top: 10px;
	font-size: 12px;
	color: #6B5A1B;
	line-height: 1.5;
}
.aw-overage-note strong { color: #4A3F11; }

.aw-info-note {
	background: #F6F9F7;
	border-left: 3px solid #5C7A6B;
	border-radius: 4px;
	padding: 10px 12px;
	margin: 12px 0;
	font-size: 12px;
	color: #1C2439;
	line-height: 1.5;
}
.aw-info-note a { color: #5C7A6B; font-weight: 600; }

.aw-illustration-warn {
	background: #FDF2F0;
	border: 1px solid #C44536;
	border-radius: 6px;
	padding: 14px 16px;
	margin: 12px 0;
	font-size: 13px;
	color: #1C2439;
	line-height: 1.6;
}
.aw-illustration-warn strong { color: #1C2439; }
.aw-illustration-warn a {
	color: #C44536 !important;
	font-weight: 700;
	text-decoration: underline;
}
.aw-illustration-warn ul { margin: 8px 0 0 0; padding-left: 18px; }
.aw-illustration-warn li { margin-bottom: 4px; }

.aw-yesno {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 8px;
}
@media (max-width: 480px) {
	.aw-yesno { grid-template-columns: 1fr; }
}

.aw-wc-input {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 12px;
	background: #F6F9F7;
	border: 1px solid #DCE5DE;
	border-radius: 6px;
	flex-wrap: wrap;
}
.aw-wc-input label { font-size: 13px; color: #1C2439; flex-shrink: 0; }
.aw-wc-input input {
	width: 110px;
	padding: 8px 10px;
	border: 1px solid #DCE5DE;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
}
.aw-wc-input input:focus { outline: none; border-color: #5C7A6B; }
.aw-calc .aw-wc-apply {
	padding: 8px 16px;
	background: #5C7A6B !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	min-height: 38px;
	transition: background 0.15s ease;
}
.aw-calc .aw-wc-apply:hover { background: #4A6357 !important; }
.aw-calc .aw-wc-apply.aw-applied { background: #B5C9BC !important; color: #1C2439 !important; }
.aw-wc-hint { width: 100%; font-size: 11px; color: #5C7A6B; font-style: italic; margin-top: 4px; }
/* Confirmation line shown below the exact-count input after Apply. Surfaces
   the applied number so the customer can verify Step 3's bucket auto-aligned
   to the right range without having to walk forward to Step 5. */
.aw-wc-status {
	width: 100%;
	font-size: 12px;
	color: #1C2439;
	background: #ECF1EE;
	border-left: 3px solid #5C7A6B;
	padding: 6px 10px;
	margin-top: 8px;
	border-radius: 0 4px 4px 0;
}
.aw-wc-status strong { color: #1C2439; }

.aw-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.aw-calc .aw-btn {
	padding: 12px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	border: 2px solid;
	transition: all 0.15s ease;
	min-height: 44px;
}
.aw-calc .aw-btn-primary { background: #5C7A6B !important; color: #fff !important; border-color: #5C7A6B !important; flex: 1; }
.aw-calc .aw-btn-primary:hover { background: #4A6357 !important; border-color: #4A6357 !important; }
.aw-calc .aw-btn-primary:disabled { background: #B5C9BC !important; border-color: #B5C9BC !important; cursor: not-allowed; }
.aw-calc .aw-btn-back { background: #fff !important; color: #5C7A6B !important; border-color: #DCE5DE !important; }
.aw-calc .aw-btn-back:hover { border-color: #5C7A6B !important; }

.aw-results { display: none; }
.aw-results.aw-active { display: block; animation: aw-q-enter 240ms ease-out; }

/* Step-to-step transition. The wrapper element is recreated on every render
   (innerHTML rebuild), but the .aw-q-enter class is only added by JS when
   state.step actually changed — so within-step re-renders (toggling a tier,
   checking an add-on) don't flicker. The keyframe is identical to the results
   reveal so the whole flow feels consistent. */
@keyframes aw-q-enter {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.aw-q-enter { animation: aw-q-enter 220ms ease-out; }

/* Respect user-level motion preferences. Anyone who's set "Reduce motion" in
   their OS settings gets instant swaps with no fade or slide. */
@media (prefers-reduced-motion: reduce) {
	.aw-q-enter,
	.aw-results.aw-active { animation: none !important; }
	.aw-calc .aw-opt,
	.aw-calc .aw-tier,
	.aw-progress-fill { transition: none !important; }
}
.aw-result-section { background: #fff; border: 1px solid #DCE5DE; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.aw-result-section h4 { font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5C7A6B; margin: 0 0 14px 0; }
.aw-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F0F4F1; font-size: 14px; }
.aw-line:last-child { border-bottom: none; }
.aw-line-name { color: #1C2439; flex: 1; }
.aw-line-price { color: #1C2439; font-weight: 700; white-space: nowrap; }
.aw-line-note { display: block; font-size: 11px; color: #5C7A6B; font-style: italic; margin-top: 2px; }
.aw-subtotal { display: flex; justify-content: space-between; padding: 14px 0 0 0; margin-top: 8px; border-top: 2px solid #1C2439; font-size: 16px; font-weight: 700; color: #1C2439; }

.aw-bundle { background: #DCE5DE; border: 2px solid #5C7A6B; border-radius: 12px; padding: 20px; margin-bottom: 16px; position: relative; }
.aw-bundle-pill { position: absolute; top: -10px; left: 16px; background: #5C7A6B; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
.aw-bundle h4 { font-size: 17px; font-weight: 700; margin: 4px 0 8px 0; color: #1C2439; }
.aw-bundle-price { display: flex; align-items: baseline; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.aw-bundle-price-main { font-size: 24px; font-weight: 700; color: #1C2439; }
.aw-bundle-savings { font-size: 13px; color: #5C7A6B; font-weight: 600; }
.aw-bundle-link { display: inline-block; background: #5C7A6B !important; color: #fff !important; text-decoration: none; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; margin-top: 8px; }

.aw-pay-plans { display: grid; gap: 8px; }
.aw-pay-plan { display: flex; justify-content: space-between; padding: 10px 12px; background: #F6F9F7; border: 1px solid #DCE5DE; border-radius: 6px; font-size: 13px; }
.aw-pay-plan-name { color: #1C2439; font-weight: 600; }
.aw-pay-plan-amount { color: #5C7A6B; font-weight: 700; }

.aw-cta-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 20px 0 16px 0; }
.aw-calc .aw-cta-primary {
	background: #5C7A6B !important;
	color: #fff !important;
	text-decoration: none;
	padding: 16px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	border: 2px solid #5C7A6B !important;
	cursor: pointer;
	font-family: inherit;
	display: block;
}
.aw-calc .aw-cta-primary:hover { background: #4A6357 !important; border-color: #4A6357 !important; }

.aw-foot-note { font-size: 11px; color: #5C7A6B; font-style: italic; text-align: center; line-height: 1.6; margin-top: 16px; padding: 12px 0; }

.aw-calc .aw-restart {
	display: block;
	text-align: center;
	margin-top: 14px;
	color: #5C7A6B !important;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	background: none !important;
	border: none !important;
	font-family: inherit;
	width: 100%;
	padding: 8px;
}

.aw-disclaim-block { background: #FDF8E8; border: 1px solid #E8D08A; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; font-size: 12px; color: #6B5A1B; line-height: 1.6; }
.aw-disclaim-block strong { color: #4A3F11; }
.aw-disclaim-block ul { margin: 6px 0 0 0; padding-left: 18px; }
.aw-disclaim-block li { margin-bottom: 3px; }

.aw-next-block { background: #F6F9F7; border: 1px solid #DCE5DE; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.aw-next-block h4 { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5C7A6B; margin: 0 0 10px 0; }
.aw-next-block ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; color: #1C2439; }
.aw-next-block li { margin-bottom: 4px; }

/* Running-subtotal strip — Steps 5 & 6, above the Continue/Back action row.
   Visually quiet (no heavy borders, muted background) so it stays informational
   rather than competing with the service cards for attention. */
.aw-subtotal-strip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	margin-top: 18px;
	background: #F6F9F7;
	border: 1px solid #B5C9BC;
	border-radius: 8px;
	font-size: 14px;
	flex-wrap: wrap;
	font-variant-numeric: tabular-nums;
}
.aw-subtotal-strip-label { color: #1C2439; font-weight: 600; }
.aw-subtotal-strip-count { color: #5C7A6B; font-weight: 400; font-size: 12px; margin-left: 4px; }
.aw-subtotal-strip-amount { color: #1C2439; font-weight: 700; font-size: 18px; }
.aw-subtotal-strip-empty .aw-subtotal-strip-amount { color: #5C7A6B; }

/* Step 6 soft bundle hint — appears below the subtotal strip when getBundle()
   returns non-null. Intentionally low-contrast so it reads as helpful rather
   than as a CTA; the actual bundle pitch lives on the results screen. */
.aw-subtotal-strip-bundle {
	margin-top: 8px;
	padding: 10px 14px;
	background: #EEF4EF;
	border: 1px dashed #B5C9BC;
	border-radius: 6px;
	font-size: 13px;
	color: #1C2439;
	line-height: 1.5;
}
.aw-subtotal-strip-bundle strong { color: #1C2439; }
.aw-subtotal-strip-bundle-icon { margin-right: 4px; }

/* "Your selections so far" pre-quote preview — Step 7 only. Replaces the
   subtotal strip on that step; the panel already shows the subtotal alongside
   each line item, so there's no need for a duplicate strip. */
.aw-prequote {
	background: #F6F9F7;
	border: 1px solid #B5C9BC;
	border-radius: 8px;
	padding: 16px 18px;
	margin-top: 22px;
}
.aw-prequote-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #5C7A6B;
	margin: 0 0 6px 0;
}
.aw-prequote-help {
	font-size: 12px;
	color: #5C7A6B;
	font-style: italic;
	margin: 0 0 12px 0;
}
.aw-prequote-lines { margin-bottom: 10px; }
.aw-prequote-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid #DCE5DE;
	font-size: 13px;
}
.aw-prequote-line:last-child { border-bottom: none; }
.aw-prequote-name { color: #1C2439; flex: 1; }
.aw-prequote-price { color: #1C2439; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aw-prequote-total {
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	margin-top: 4px;
	border-top: 2px solid #1C2439;
	font-size: 15px;
	font-weight: 700;
	color: #1C2439;
	font-variant-numeric: tabular-nums;
}

/* Bundle pitch inside the Step 7 prequote — mirrors the results-screen bundle
   block at a smaller scale. The savings line gets the brand accent; the
   "Combined total" row is bolded to anchor the customer's eye. */
.aw-prequote-bundle {
	margin-top: 14px;
	padding: 12px 14px;
	background: #EEF4EF;
	border: 1px solid #B5C9BC;
	border-radius: 6px;
	font-size: 13px;
}
.aw-prequote-bundle-head { margin-bottom: 8px; color: #1C2439; }
.aw-prequote-bundle-head strong { color: #1C2439; }
.aw-prequote-bundle-line {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	color: #1C2439;
	font-variant-numeric: tabular-nums;
}
.aw-prequote-bundle-savings { color: #5C7A6B; font-weight: 600; }
.aw-prequote-bundle-combined { border-top: 1px solid #B5C9BC; margin-top: 4px; padding-top: 8px; }

/* Payment plans preview inside the Step 7 prequote. Same data the results
   screen shows, presented as a compact preview so the customer knows what
   options will be available before submitting. */
.aw-prequote-plans {
	margin-top: 14px;
	padding: 12px 14px;
	background: #FFFFFF;
	border: 1px solid #DCE5DE;
	border-radius: 6px;
	font-size: 13px;
}
.aw-prequote-plans-head {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #5C7A6B;
	margin-bottom: 8px;
}
.aw-prequote-plan-line {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	color: #1C2439;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.aw-calc { padding: 16px 8px; }
	.aw-q { padding: 18px 14px; }
	.aw-q h3 { font-size: 16px; }
	.aw-tier-row { grid-template-columns: 1fr !important; }
	.aw-actions { flex-direction: column-reverse; }
	.aw-calc .aw-btn-back,
	.aw-calc .aw-btn-primary { width: 100%; }
	.aw-wc-input input { width: 100%; }
	.aw-calc .aw-wc-apply { width: 100%; margin-top: 8px; }
	.aw-subtotal-strip { padding: 10px 12px; font-size: 13px; }
	.aw-subtotal-strip-amount { font-size: 16px; }
	.aw-prequote { padding: 14px; }
}