/**
 * Site Nitro: Estimator — Front-end calculator and card styles.
 *
 * All visual values use CSS custom properties (--sne-*) so the active
 * theme or Site Nitro: Local can override without touching this file.
 *
 * @since 1.0.0
 */

/* =================================================================
 * CSS Custom Properties
 *
 * All --sne-* variables are output by PHP in a <style id="sne-appearance-vars">
 * block in wp_head from the Appearance settings. The values below are
 * hardcoded fallbacks that apply if the PHP block is not present
 * (e.g. the page is cached without the inline style, or during dev).
 * They match sne_get_default_settings()['appearance'].
 * ============================================================== */

/* Fallback :root — overridden by the inline <style> block output by PHP. */

/* =================================================================
 * Calculator Container
 * ============================================================== */

.sne-calculator {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	color: var(--sne-text);
	max-width: 900px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
	overflow-x: hidden;
}

/* =================================================================
 * Input Fields
 * ============================================================== */

.sne-field {
	margin-bottom: 20px;
}

.sne-field__label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 6px;
	color: var(--sne-primary);
}

.sne-calculator__inputs {
	width: 100%;
	box-sizing: border-box;
}

.sne-field__input {
	display: block;
	width: 100%;
	max-width: 300px;
	padding: 10px 14px;
	font-size: 16px;
	line-height: 1.4;
	border: 2px solid var(--sne-input-border);
	border-radius: var(--sne-radius);
	background: var(--sne-card-bg);
	color: var(--sne-text);
	transition: border-color 0.15s ease;
	box-sizing: border-box;
	-moz-appearance: textfield;
}

.sne-field__input:focus {
	outline: none;
	border-color: var(--sne-input-focus);
}

.sne-field__input--error {
	border-color: var(--sne-error);
}

/* Hide number input spinners. */
.sne-field__input::-webkit-inner-spin-button,
.sne-field__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sne-field__error {
	color: var(--sne-error);
	font-size: 13px;
	margin-top: 6px;
}

/* =================================================================
 * Condition Checkboxes
 * ============================================================== */

.sne-conditions {
	margin-bottom: 20px;
}

.sne-conditions__label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
	color: var(--sne-text-muted);
}

.sne-conditions__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sne-conditions__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--sne-input-border);
	border-radius: var(--sne-radius);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	user-select: none;
}

.sne-conditions__item:hover {
	border-color: var(--sne-accent);
}

.sne-conditions__item:has(input:checked) {
	border-color: var(--sne-accent);
	background-color: var(--sne-accent-light);
}

.sne-conditions__item input[type="checkbox"] {
	accent-color: var(--sne-accent);
	margin: 0;
}

/* =================================================================
 * Quantity Steppers (per-item and capture)
 * ============================================================== */

.sne-steppers {
	margin-bottom: 20px;
}

.sne-stepper-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--sne-card-border);
}

.sne-stepper-row:last-child {
	border-bottom: none;
}

.sne-stepper-row__label {
	font-size: 15px;
	font-weight: 500;
	color: var(--sne-text);
}

.sne-stepper {
	display: inline-flex;
	align-items: center;
	border: 2px solid var(--sne-input-border);
	border-radius: var(--sne-radius);
	overflow: hidden;
}

.sne-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	font-size: 20px;
	font-weight: 600;
	color: var(--sne-text);
	cursor: pointer;
	user-select: none;
	transition: background-color 0.1s ease;
	line-height: 1;
}

.sne-stepper__btn:hover {
	background-color: rgba(0, 0, 0, 0.04);
}

.sne-stepper__btn:active {
	background-color: rgba(0, 0, 0, 0.08);
}

.sne-stepper__input {
	width: 48px;
	height: 40px;
	border: none;
	border-left: 1px solid var(--sne-input-border);
	border-right: 1px solid var(--sne-input-border);
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--sne-text);
	background: var(--sne-card-bg);
	-moz-appearance: textfield;
	padding: 0;
}

.sne-stepper__input:focus {
	outline: none;
}

.sne-stepper__input::-webkit-inner-spin-button,
.sne-stepper__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sne-stepper-error {
	margin-bottom: 12px;
}

/* =================================================================
 * Capture Notice
 * ============================================================== */

.sne-capture-notice {
	padding: 12px 16px;
	margin: 12px 0 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sne-text);
	background: var(--sne-accent-light);
	border-left: 3px solid var(--sne-accent);
	border-radius: var(--sne-radius);
}

.sne-capture-notice__icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
	color: var(--sne-accent);
}

/* =================================================================
 * Capture Actions (Book Now without cards)
 * ============================================================== */

.sne-capture-actions {
	margin-top: 8px;
}

.sne-capture-book-btn {
	display: inline-block;
	max-width: 300px;
	width: 100%;
	box-sizing: border-box;
}

.sne-capture-no-booking {
	display: block;
	padding: 12px 0;
	font-size: 14px;
	color: var(--sne-text-muted);
	font-style: italic;
}

/* =================================================================
 * Also Interested In (Pro)
 * ============================================================== */

.sne-interests {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--sne-card-border);
}

.sne-interests__label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 10px;
	color: var(--sne-primary);
}

.sne-interests__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sne-interests__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--sne-input-border);
	border-radius: var(--sne-radius);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	user-select: none;
}

.sne-interests__item:hover {
	border-color: var(--sne-accent);
}

.sne-interests__item:has(input:checked) {
	border-color: var(--sne-accent);
	background-color: var(--sne-accent-light);
}

.sne-interests__item input[type="checkbox"] {
	accent-color: var(--sne-accent);
	margin: 0;
}

/* =================================================================
 * Calculate Button
 * ============================================================== */

.sne-actions {
	margin-bottom: 24px;
}

.sne-calculate-btn {
	display: inline-block;
	padding: 12px 32px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: var(--sne-button-text);
	background-color: var(--sne-button-bg);
	border: none;
	border-radius: var(--sne-radius);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.sne-calculate-btn:hover {
	opacity: 0.9;
}

.sne-calculate-btn:active {
	opacity: 0.8;
}

/* =================================================================
 * Tier Cards
 * ============================================================== */

.sne-cards {
	display: flex;
	gap: 20px;
	align-items: stretch;
}

.sne-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--sne-card-bg);
	border: 2px solid var(--sne-card-border);
	border-radius: var(--sne-radius);
	padding: 28px 24px;
	text-align: center;
	position: relative;
	cursor: pointer;

	/* Animation: starts invisible and shifted down. */
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sne-card--visible {
	opacity: 1;
	transform: translateY(0);
}

.sne-card--recommended {
	border-color: var(--sne-card-recommended-border);
	box-shadow: 0 0 0 1px var(--sne-card-recommended-border);
}

/* Recommended badge. */
.sne-card__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 16px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sne-button-text);
	background: var(--sne-accent);
	border-radius: 100px;
	white-space: nowrap;
}

/* Tier name. */
.sne-card__tier-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--sne-primary);
	margin-bottom: 8px;
}

/* Rate per unit. */
.sne-card__rate {
	font-size: 13px;
	color: var(--sne-text-muted);
	margin-bottom: 16px;
}

/* Price output. */
.sne-card__price {
	font-size: 28px;
	font-weight: 700;
	color: var(--sne-primary);
	margin-bottom: 24px;
	line-height: 1.2;
}

/* Card hover and selected states — cards are clickable selection UI. */
.sne-card:hover {
	border-color: var(--sne-accent);
	transform: translateY(-2px);
}

/* Selected card — full opacity, slight scale lift. */
.sne-card--selected {
	border-color: var(--sne-accent);
	box-shadow: 0 0 0 3px var(--sne-accent-light);
	opacity: 1;
	transform: scale(1.01);
}

.sne-card--selected .sne-card__tier-name {
	color: var(--sne-accent);
}

/* When a card is selected, hide its Recommended badge — Selected takes precedence. */
.sne-card--selected .sne-card__badge {
	display: none;
}

/* Unselected cards — dimmed when another card is actively selected. */
.sne-card--unselected {
	opacity: 0.55;
	transform: scale(0.98);
}

.sne-card--unselected:hover {
	opacity: 0.75;
	transform: scale(1.0);
}

/* Selected badge — mirrors Recommended badge position and style. */
.sne-card__selected-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--sne-accent);
	color: var(--sne-button-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 4px 12px;
	border-radius: 20px;
	white-space: nowrap;
	text-transform: uppercase;
}

/* Selection helper text — hidden once a card is selected. */
.sne-cards-helper {
	text-align: center;
	font-size: 13px;
	color: var(--sne-text-muted);
	margin-top: 12px;
}

.sne-cards--selection-made + .sne-cards-helper {
	display: none;
}

/* Selected tier label in Book Online panel. */
.sne-book-online__selected-label {
	font-size: 13px;
	color: var(--sne-text-muted);
	margin: 0 0 12px;
}

.sne-book-online__selected-label strong {
	color: var(--sne-accent);
}

/* Tier features list — checkmark bullets inside each card. */
.sne-card__features {
	list-style: none;
	margin: 0 0 20px;
	padding: 0 0 0 4px;
	text-align: left;
}

.sne-card__features li {
	position: relative;
	padding-left: 22px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sne-text);
	margin-bottom: 4px;
}

.sne-card__features li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--sne-accent);
	font-weight: 700;
}

/* =================================================================
 * Estimate Message & Effective Area Notice
 * ============================================================== */

.sne-estimate-message {
	font-style: italic;
	font-size: 13px;
	color: var(--sne-text-muted);
	margin: 0 0 12px;
	line-height: 1.5;
}

.sne-effective-area {
	font-size: 13px;
	color: var(--sne-text-muted);
	margin: 0 0 16px;
	line-height: 1.5;
}

/* =================================================================
 * Coverage Selector (area-based calculators)
 * ============================================================== */

.sne-coverage {
	margin-bottom: 20px;
}

.sne-coverage__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--sne-text);
	margin-bottom: 10px;
}

.sne-coverage__pills {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.sne-coverage__pill {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 14px;
	border: 2px solid var(--sne-card-border);
	border-radius: var(--sne-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.sne-coverage__pill:has(input:checked) {
	border-color: var(--sne-accent);
	background: var(--sne-accent-light);
}

.sne-coverage__pill input[type="radio"] {
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--sne-accent);
}

.sne-coverage__pill-text {
	display: block;
}

.sne-coverage__pill-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--sne-text);
}

.sne-coverage__pill-hint {
	display: block;
	font-size: 12px;
	color: var(--sne-text-muted);
	margin-top: 2px;
}

/* =================================================================
 * Per-Item Calculator (two-option layout)
 * ============================================================== */

/* Option pills */
.sne-option-pills {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	margin-bottom: 20px;
}

.sne-option-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 2px solid var(--sne-card-border);
	border-radius: var(--sne-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.sne-option-pill:has(input:checked) {
	border-color: var(--sne-accent);
	background: var(--sne-accent-light);
}

.sne-option-pill input[type="radio"] {
	accent-color: var(--sne-accent);
}

.sne-option-pill__text {
	font-size: 14px;
	font-weight: 600;
	color: var(--sne-text);
}

/* Item list */
.sne-per-item-list {
	margin-bottom: 20px;
}

.sne-item-row-ui {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sne-card-border);
}

.sne-item-checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	cursor: pointer;
}

.sne-item-checkbox-label input[type="checkbox"] {
	accent-color: var(--sne-accent);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.sne-item-name {
	flex: 1;
	font-size: 14px;
	color: var(--sne-text);
}

.sne-item-price {
	font-size: 14px;
	font-weight: 600;
	color: var(--sne-text-muted);
	min-width: 60px;
	text-align: right;
}

.sne-item-qty {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Result card */
.sne-per-item-result {
	background: var(--sne-card-bg);
	border: 2px solid var(--sne-accent);
	border-radius: var(--sne-radius);
	padding: 24px;
	margin-bottom: 20px;
}

.sne-per-item-result__option {
	font-size: 13px;
	font-weight: 700;
	color: var(--sne-accent);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}

.sne-per-item-result__line {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--sne-card-border);
	color: var(--sne-text);
}

.sne-per-item-result__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
	margin-top: 4px;
	font-size: 15px;
	color: var(--sne-text-muted);
}

.sne-per-item-result__total strong {
	font-size: 28px;
	color: var(--sne-text);
}

.sne-minimum-warning {
	margin-top: 12px;
	padding: 10px 14px;
	background: var(--sne-accent-light);
	border-left: 3px solid var(--sne-accent);
	border-radius: 4px;
	font-size: 13px;
	color: var(--sne-text-muted);
}

.sne-minimum-warning__icon {
	margin-right: 4px;
}

/* =================================================================
 * Below-Cards Area (populated in Steps 10–12)
 * ============================================================== */

.sne-calculator__below-cards {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 2px solid var(--sne-card-border);
	position: relative;
}

/* Accent line above the section. */
.sne-calculator__below-cards::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: 60px;
	height: 2px;
	background: var(--sne-accent);
}

/* Section header — shown when Reserve Your Spot is the only CTA. */
.sne-booking-section-header {
	margin-bottom: 24px;
}

.sne-booking-section-header__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--sne-text);
	margin: 0 0 6px;
}

.sne-booking-section-header__sub {
	font-size: 14px;
	color: var(--sne-text-muted);
	margin: 0;
}

/* Interests inside the callback panel — visual separator before form fields. */
.sne-cta-callback-panel .sne-interests {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sne-card-border);
}

/* =================================================================
 * Tabbed CTA Layout
 * ============================================================== */

.sne-cta-tabs {
	margin-bottom: 20px;
}

.sne-cta-tab-bar {
	display: flex;
	border-bottom: 2px solid var(--sne-card-border);
	margin-bottom: 20px;
	gap: 0;
}

.sne-cta-tab-btn {
	padding: 10px 20px;
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--sne-text-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.sne-cta-tab-btn:hover {
	color: var(--sne-text);
}

.sne-cta-tab-btn--active {
	color: var(--sne-accent);
	border-bottom-color: var(--sne-accent);
}

.sne-cta-tab-panel {
	display: none;
}

.sne-cta-tab-panel--active {
	display: block;
}

/* Book Online panel */

.sne-book-online {
	text-align: center;
	padding: 20px 0;
}

.sne-book-online__copy {
	color: var(--sne-text-muted);
	font-size: 14px;
	margin: 0 0 16px;
}

.sne-book-online__btn {
	display: inline-block;
	padding: 12px 32px;
	background: var(--sne-button-bg);
	color: var(--sne-button-text);
	border-radius: var(--sne-radius);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	transition: opacity 0.15s ease;
}

.sne-book-online__btn:hover {
	opacity: 0.9;
	color: var(--sne-button-text);
	text-decoration: none;
}

/* Tertiary CTA (in-home estimate) */

.sne-tertiary-cta {
	text-align: center;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--sne-card-border);
	font-size: 13px;
	color: var(--sne-text-muted);
}

.sne-tertiary-cta__link {
	color: var(--sne-accent);
	text-decoration: none;
	font-weight: 600;
}

.sne-tertiary-cta__link:hover {
	text-decoration: underline;
}

/* =================================================================
 * Lead Capture Form (Pro)
 * ============================================================== */

.sne-lead-capture {
	margin-top: 0;
}

.sne-lead-capture__form {
	max-width: 400px;
}

.sne-lead-field {
	margin-bottom: 14px;
}

.sne-lead-field__label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 4px;
	color: var(--sne-primary);
}

.sne-lead-required {
	color: var(--sne-error);
}

.sne-lead-field__input {
	display: block;
	width: 100%;
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.4;
	border: 2px solid var(--sne-input-border);
	border-radius: var(--sne-radius);
	background: var(--sne-card-bg);
	color: var(--sne-text);
	transition: border-color 0.15s ease;
	box-sizing: border-box;
}

.sne-lead-field__input:focus {
	outline: none;
	border-color: var(--sne-input-focus);
}

.sne-lead-field__input--error {
	border-color: var(--sne-error);
}

.sne-lead-field__error {
	color: var(--sne-error);
	font-size: 13px;
	margin-top: 4px;
}

.sne-lead-actions {
	margin-top: 16px;
}

.sne-lead-submit-btn {
	display: inline-block;
	padding: 12px 32px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: var(--sne-button-text);
	background-color: var(--sne-button-bg);
	border: none;
	border-radius: var(--sne-radius);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.sne-lead-submit-btn:hover {
	opacity: 0.9;
}

.sne-lead-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.sne-lead-form-error {
	color: var(--sne-error);
	font-size: 14px;
	margin-top: 12px;
}

.sne-lead-capture__success {
	padding: 16px;
	font-size: 15px;
	color: var(--sne-success);
	background: var(--sne-card-bg);
	border: 1px solid var(--sne-success);
	border-radius: var(--sne-radius);
}

.sne-lead-success-icon {
	font-size: 18px;
	width: 18px;
	height: 18px;
	vertical-align: text-bottom;
}

/* =================================================================
 * 3-Step Booking Flow
 * ============================================================== */

.sne-booking-flow {
	margin-top: 0;
}

/* Step indicator */

.sne-booking-steps {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sne-card-border);
}

.sne-booking-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.sne-booking-step__num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sne-card-border);
	color: var(--sne-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}

.sne-booking-step--active .sne-booking-step__num,
.sne-booking-step--complete .sne-booking-step__num {
	background: var(--sne-accent);
	color: var(--sne-button-text);
}

.sne-booking-step__label {
	font-size: 11px;
	color: var(--sne-text-muted);
	text-align: center;
}

.sne-booking-step--active .sne-booking-step__label {
	color: var(--sne-accent);
	font-weight: 600;
}

.sne-booking-step-divider {
	flex: 1;
	height: 1px;
	background: var(--sne-card-border);
	margin-bottom: 18px;
}

/* Booking flow navigation */

/* Address step — city / state / zip row layout. */
.sne-booking-address-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.sne-lead-field--city  { flex: 2; min-width: 120px; }
.sne-lead-field--state { flex: 0 0 60px; }
.sne-lead-field--zip   { flex: 1; min-width: 80px; }

.sne-address-skip {
	text-align: right;
	font-size: 13px;
	margin-top: 8px;
}

.sne-skip-address {
	color: var(--sne-text-muted);
	text-decoration: underline;
}

.sne-booking-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
}

.sne-booking-continue-btn {
	display: inline-block;
	padding: 12px 28px;
	background: var(--sne-button-bg);
	color: var(--sne-button-text);
	border: none;
	border-radius: var(--sne-radius);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.sne-booking-continue-btn:hover {
	opacity: 0.9;
}

.sne-booking-back-link {
	font-size: 14px;
	color: var(--sne-text-muted);
	text-decoration: none;
}

.sne-booking-back-link:hover {
	color: var(--sne-accent);
}

/* Booking pills — time preference and day selectors */

.sne-booking-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.sne-booking-pill {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

.sne-booking-pill input[type="radio"],
.sne-booking-pill input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.sne-booking-pill__text {
	display: inline-block;
	padding: 8px 16px;
	font-size: 13px;
	line-height: 1;
	border: 1px solid var(--sne-card-border);
	border-radius: 100px;
	color: var(--sne-text);
	background: var(--sne-card-bg);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.sne-booking-pill input:checked + .sne-booking-pill__text {
	background: var(--sne-accent);
	color: var(--sne-button-text);
	border-color: var(--sne-accent);
}

.sne-booking-pill--day .sne-booking-pill__text {
	padding: 8px 12px;
	min-width: 36px;
	text-align: center;
}

.sne-lead-field__desc {
	font-size: 12px;
	color: var(--sne-text-muted);
	margin: 4px 0 0;
}

/* Booking summary card */

.sne-booking-summary {
	background: var(--sne-card-bg);
	border: 1px solid var(--sne-card-border);
	border-radius: var(--sne-radius);
	padding: 20px;
	margin-bottom: 20px;
}

.sne-booking-summary h3 {
	font-size: 15px;
	margin: 0 0 16px;
	color: var(--sne-text);
}

.sne-booking-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--sne-card-border);
	font-size: 14px;
}

.sne-booking-summary__row:last-child {
	border-bottom: none;
}

.sne-booking-summary__row span {
	color: var(--sne-text-muted);
}

.sne-booking-summary__row--deposit strong {
	color: var(--sne-accent);
	font-size: 18px;
}

.sne-deposit-note {
	font-size: 12px;
	color: var(--sne-text-muted);
	margin: 4px 0 0;
	text-align: right;
}

/* Next steps block */

.sne-booking-next-steps {
	margin-bottom: 20px;
	padding: 16px;
	background: var(--sne-accent-light);
	border-radius: var(--sne-radius);
	border-left: 3px solid var(--sne-accent);
}

.sne-booking-next-steps p {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--sne-text);
}

.sne-booking-next-steps ul {
	margin: 0;
	padding-left: 16px;
	font-size: 13px;
	color: var(--sne-text-muted);
}

.sne-booking-next-steps li {
	margin-bottom: 4px;
}

/* Payment button */

.sne-booking-pay-btn {
	display: block;
	width: 100%;
	padding: 14px 20px;
	background: var(--sne-accent);
	color: var(--sne-button-text);
	text-align: center;
	border-radius: var(--sne-radius);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 12px;
	box-sizing: border-box;
	transition: opacity 0.15s ease;
}

.sne-booking-pay-btn:hover {
	opacity: 0.9;
	color: var(--sne-button-text);
	text-decoration: none;
}

.sne-booking-pay-note {
	font-size: 12px;
	color: var(--sne-text-muted);
	text-align: center;
	margin: 0;
}

/* Post-payment confirmation state */

.sne-booking-confirmed {
	text-align: center;
	padding: 32px 20px;
}

.sne-booking-confirmed__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sne-accent);
	color: var(--sne-button-text);
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.sne-booking-confirmed h3 {
	font-size: 18px;
	margin: 0 0 8px;
	color: var(--sne-text);
}

.sne-booking-confirmed p {
	font-size: 14px;
	color: var(--sne-text-muted);
	margin: 0;
}

/* =================================================================
 * Pro Required Placeholder
 * ============================================================== */

.sne-pro-required {
	text-align: center;
	padding: 40px 20px;
	color: var(--sne-text-muted);
	font-size: 15px;
	background: var(--sne-card-bg);
	border: 1px dashed var(--sne-card-border);
	border-radius: var(--sne-radius);
}

.sne-pro-required a {
	color: var(--sne-accent);
	text-decoration: none;
	font-weight: 600;
}

.sne-pro-required a:hover {
	text-decoration: underline;
}

/* =================================================================
 * Mobile: Cards Stack Below 640px
 * ============================================================== */

@media (max-width: 640px) {
	.sne-calculator {
		padding: 0 16px;
	}

	/* Input fields: full width, no overflow. */
	.sne-field__input {
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	/* Cards: row wrap so recommended is full-width, other two sit side by side. */
	.sne-cards {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
		width: 100%;
		box-sizing: border-box;
	}

	/* Non-recommended cards: two side by side at 50% minus half the gap. */
	.sne-card {
		flex: 0 0 calc(50% - 6px);
		width: calc(50% - 6px);
		min-width: 0;
		box-sizing: border-box;
		padding: 20px 14px;
	}

	/* Recommended card: full width, displayed first. */
	.sne-card--recommended {
		flex: 0 0 100%;
		width: 100%;
		order: -1;
	}

	/* Scale down card content to fit narrower width. */
	.sne-card__tier-name {
		font-size: 15px;
	}

	.sne-card__price {
		font-size: 22px;
		margin-bottom: 16px;
	}

	.sne-card__rate {
		font-size: 12px;
	}

	.sne-lead-capture__form {
		max-width: 100%;
	}

	/* Coverage cards: tighter padding on mobile. */
	.sne-coverage__pill {
		padding: 8px 10px;
	}

	.sne-coverage__pill-label {
		font-size: 13px;
	}

	/* Features list: tighter on mobile. */
	.sne-card__features li {
		font-size: 12px;
	}
}

/* =================================================================
 * Hero Overlay Layout (display="hero")
 *
 * Desktop: floating card with shadow.
 * Mobile: compact teaser + full-screen drawer.
 * ============================================================== */

.sne-hero-layout {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
}

/* Desktop: Calculator card — base styles shared across all positions. */
.sne-calculator-card {
	background: var(--sne-hero-card-bg, #ffffff);
	border-radius: 12px;
	box-shadow: var(--sne-hero-card-shadow, 0 8px 40px rgba(0,0,0,0.18));
	padding: 28px;
	box-sizing: border-box;
	width: 420px;
}

/* Position: center (default) — centered block. */
.sne-hero-position--center {
	display: block;
}

.sne-hero-position--center .sne-calculator-card {
	margin: 0 auto;
	max-width: 480px;
	width: auto;
	float: none;
}

/* Position: right — float alongside text content. */
.sne-hero-position--right {
	display: block;
}

.sne-hero-position--right .sne-calculator-card {
	float: right;
	margin-left: 24px;
	margin-bottom: 16px;
}

/* Position: float-right — absolute for page-builder hero containers. */
.sne-hero-position--float-right {
	position: relative;
}

.sne-hero-position--float-right .sne-calculator-card {
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

/* Desktop: teaser and drawer hidden. */
.sne-hero-teaser {
	display: none;
}

.sne-drawer {
	display: none !important;
}

/* =================================================================
 * Hero Teaser (mobile compact button)
 * ============================================================== */

.sne-hero-teaser__label {
	font-size: 16px;
	font-weight: 700;
	color: var(--sne-button-text);
	margin-bottom: 2px;
}

.sne-hero-teaser__sub {
	font-size: 12px;
	color: var(--sne-button-text);
	opacity: 0.85;
	margin-bottom: 10px;
}

.sne-hero-teaser__btn {
	display: inline-block;
	padding: 10px 24px;
	background: rgba(255,255,255,0.2);
	color: var(--sne-button-text);
	border: 2px solid rgba(255,255,255,0.5);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sne-hero-teaser__btn:hover {
	background: rgba(255,255,255,0.3);
}

/* =================================================================
 * Drawer (mobile full-screen bottom sheet)
 * ============================================================== */

.sne-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.sne-drawer__panel {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--sne-hero-card-bg, #ffffff);
	border-radius: 16px 16px 0 0;
	max-height: 90vh;
	overflow-y: auto;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.sne-drawer[aria-hidden="false"] .sne-drawer__panel {
	transform: translateY(0);
}

.sne-drawer__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--sne-card-border);
	position: sticky;
	top: 0;
	background: var(--sne-hero-card-bg, #ffffff);
	z-index: 1;
}

.sne-drawer__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--sne-text);
}

.sne-drawer__close {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--sne-text-muted);
	padding: 4px 8px;
}

.sne-drawer__body {
	padding: 20px;
}

/* =================================================================
 * Hero Mobile Responsive (768px)
 *
 * Below 768px: card hidden, teaser and drawer visible.
 * ============================================================== */

@media (max-width: 768px) {
	.sne-hero-layout {
		flex-direction: column;
	}

	.sne-calculator-card {
		display: none;
	}

	.sne-hero-teaser {
		display: block;
		background: var(--sne-accent);
		border-radius: var(--sne-radius);
		padding: 16px 20px;
		text-align: center;
	}

	.sne-drawer {
		display: block !important;
		position: fixed;
		inset: 0;
		z-index: 99999;
	}

	.sne-drawer[aria-hidden="true"] {
		display: none !important;
	}
}