/* =============================================================================
   WebCraft Quote Builder — Frontend Styles v1.2.0
   All selectors scoped under .wcqb-wrap to prevent theme conflicts.
   ============================================================================= */

/* Google Fonts are NOT loaded here to comply with WordPress.org policy and GDPR.
   To enable Playfair Display and DM Sans, add your own @import or use a local
   font hosting plugin (e.g. OMGF) and enqueue the stylesheet separately. */

/* =============================================================================
   CSS Custom Properties — scoped to avoid theme collisions
   ============================================================================= */
.wcqb-wrap {
	--wcqb-ink:            #1c1917;
	--wcqb-ink-deep:       #2c2620;
	--wcqb-ink-soft:       #57534e;
	--wcqb-ink-muted:      #78716c;
	--wcqb-ink-faint:      #a8a29e;
	--wcqb-ink-ghost:      #d6d3d1;

	--wcqb-cream:          #faf8f4;
	--wcqb-cream-warm:     #f5f0e8;
	--wcqb-cream-hover:    #ede8de;
	--wcqb-paper:          #ffffff;

	--wcqb-accent:         #b5854e;
	--wcqb-accent-light:   #e8d5bc;
	--wcqb-accent-warm:    #d4a867;
	--wcqb-accent-pale:    #f5ede0;
	--wcqb-accent-dark:    #8c6035;
	--wcqb-grad-start:     #c9954f;
	--wcqb-grad-end:       #9a6c35;
	--wcqb-accent-glow:    rgba(181, 133, 78, .22);

	--wcqb-success:        #2d7a4f;
	--wcqb-success-light:  #dcf0e5;
	--wcqb-success-vivid:  #3dd68c;
	--wcqb-error:          #c0392b;
	--wcqb-error-light:    #fce8e6;
	--wcqb-error-vivid:    #f87171;

	--wcqb-border:         #e8e2d9;
	--wcqb-border-dark:    #cfc8be;

	--wcqb-shadow-xs:      0 1px 2px rgba(28,25,23,.06);
	--wcqb-shadow-sm:      0 1px 4px rgba(28,25,23,.07), 0 2px 8px rgba(28,25,23,.05);
	--wcqb-shadow-md:      0 4px 16px rgba(28,25,23,.10), 0 2px 6px rgba(28,25,23,.06);
	--wcqb-shadow-lg:      0 12px 40px rgba(28,25,23,.14), 0 4px 16px rgba(28,25,23,.08);
	--wcqb-shadow-modal:   0 24px 72px rgba(28,25,23,.32), 0 8px 24px rgba(28,25,23,.16);

	--wcqb-radius-xs:      4px;
	--wcqb-radius-sm:      8px;
	--wcqb-radius:         12px;
	--wcqb-radius-lg:      20px;

	--wcqb-font-sm:        13px;

	--wcqb-ease:           cubic-bezier(.25,.46,.45,.94);
	--wcqb-spring:         cubic-bezier(.34,1.56,.64,1);
	--wcqb-t-fast:         .14s;
	--wcqb-t-base:         .20s;
	--wcqb-t-slow:         .32s;

	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wcqb-ink);
	background-color: var(--wcqb-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Scoped reset */
.wcqb-wrap *, .wcqb-wrap *::before, .wcqb-wrap *::after { box-sizing: border-box; }
.wcqb-wrap h1, .wcqb-wrap h2, .wcqb-wrap h3, .wcqb-wrap h4 { margin-top: 0; line-height: 1.25; }
.wcqb-wrap p { margin: 0; }
.wcqb-wrap button { cursor: pointer; font-family: inherit; }
.wcqb-wrap a { color: var(--wcqb-accent); }
.wcqb-wrap ul { margin: 0; padding: 0; list-style: none; }


/* =============================================================================
   HEADER
   ============================================================================= */
.wcqb-wrap .wcqb-header {
	background: var(--wcqb-ink);
	position: relative;
	overflow: hidden;
}

.wcqb-wrap .wcqb-header::before {
	content: '';
	position: absolute;
	top: -60px; right: -60px;
	width: 240px; height: 240px;
	background: radial-gradient(circle, rgba(181,133,78,.12) 0%, transparent 70%);
	pointer-events: none;
}

.wcqb-wrap .wcqb-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 32px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.wcqb-wrap .wcqb-brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.wcqb-wrap .wcqb-brand-mark {
	width: 52px; height: 52px;
	background: linear-gradient(135deg, var(--wcqb-grad-start) 0%, var(--wcqb-accent-dark) 100%);
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; color: var(--wcqb-cream); flex-shrink: 0;
	box-shadow: 0 4px 20px rgba(181,133,78,.40), 0 0 0 1px rgba(255,255,255,.08);
}

.wcqb-wrap .wcqb-studio-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	color: var(--wcqb-cream);
	margin: 0 0 2px;
	letter-spacing: -0.02em;
}

.wcqb-wrap .wcqb-tagline {
	font-size: 12px;
	color: rgba(250,248,244,.5);
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wcqb-wrap .wcqb-header-meta {
	display: flex;
	align-items: center;
	gap: 7px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 20px;
	padding: 7px 14px;
	flex-shrink: 0;
}

.wcqb-wrap .wcqb-header-live-dot {
	width: 7px; height: 7px;
	background: var(--wcqb-success-vivid);
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(61,214,140,.5);
	animation: wcqbPulse 2s ease-in-out infinite;
}

.wcqb-wrap .wcqb-header-live-text {
	font-size: 12px;
	font-weight: 500;
	color: rgba(250,248,244,.65);
	letter-spacing: .03em;
}

/* Progress bar */
.wcqb-wrap .wcqb-progress-track {
	height: 3px;
	background: rgba(255,255,255,.08);
}

.wcqb-wrap .wcqb-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wcqb-accent-dark), var(--wcqb-accent), var(--wcqb-accent-warm));
	width: 0%;
	transition: width .5s var(--wcqb-ease);
	border-radius: 0 2px 2px 0;
}


/* =============================================================================
   APP LAYOUT
   ============================================================================= */
.wcqb-wrap .wcqb-app-layout {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 24px 56px;
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 28px;
	align-items: start;
}


/* =============================================================================
   BUILDER PANEL
   ============================================================================= */
.wcqb-wrap .wcqb-builder-panel {
	background: var(--wcqb-paper);
	border: 1px solid var(--wcqb-border);
	border-radius: var(--wcqb-radius-lg);
	overflow: hidden;
	box-shadow: var(--wcqb-shadow-sm);
}

.wcqb-wrap .wcqb-panel-header {
	background: var(--wcqb-cream);
	border-bottom: 1px solid var(--wcqb-border);
	padding: 22px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.wcqb-wrap .wcqb-panel-header h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--wcqb-ink);
	margin: 0 0 3px;
}

.wcqb-wrap .wcqb-panel-header > div > p {
	font-size: 13px;
	color: var(--wcqb-ink-soft);
}

.wcqb-wrap .wcqb-sections-progress {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wcqb-accent-dark); /* dark amber on pale: ~4.7:1 contrast vs #b5854e ~2.75:1 */
	background: var(--wcqb-accent-pale);
	border: 1px solid var(--wcqb-accent-light);
	border-radius: 20px;
	padding: 5px 14px;
	white-space: nowrap;
	flex-shrink: 0;
}

.wcqb-wrap .wcqb-sections-label {
	font-weight: 400;
	color: var(--wcqb-ink-muted);
	font-size: 12px;
	margin-left: 2px;
}

.wcqb-wrap .wcqb-btn-reset-builder {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 500;
	/* ink-soft (#57534e) on cream (#faf8f4) ≈ 5.1:1 — passes WCAG AA for small text */
	color: var(--wcqb-ink-soft);
	background: transparent;
	border: 1px solid var(--wcqb-border-dark);
	border-radius: 20px;
	cursor: pointer;
	transition: color var(--wcqb-t-fast), border-color var(--wcqb-t-fast), background var(--wcqb-t-fast);
	white-space: nowrap;
}
.wcqb-wrap .wcqb-btn-reset-builder:hover {
	color: var(--wcqb-error);
	border-color: var(--wcqb-error);
	background: var(--wcqb-error-light);
}
.wcqb-wrap .wcqb-btn-reset-builder:focus-visible {
	outline: 2px solid var(--wcqb-accent);
	outline-offset: 3px;
}


/* =============================================================================
   BUILDER GROUPS
   ============================================================================= */
.wcqb-wrap .wcqb-group {
	padding: 24px 32px;
	border-bottom: 1px solid var(--wcqb-border);
	transition: background var(--wcqb-t-base) var(--wcqb-ease);
	position: relative;
}

.wcqb-wrap .wcqb-group::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--wcqb-accent);
	opacity: 0;
	transition: opacity var(--wcqb-t-base) var(--wcqb-ease);
	border-radius: 0 2px 2px 0;
}

.wcqb-wrap .wcqb-group[data-touched="true"]::before { opacity: 1; }

.wcqb-wrap .wcqb-group[data-touched="true"] {
	background: rgba(181,133,78,.025);
}

.wcqb-wrap .wcqb-group-last { border-bottom: none; }

/* Group label row */
.wcqb-wrap .wcqb-group-label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.wcqb-wrap .wcqb-group-icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
	width: 38px; height: 38px;
	background: var(--wcqb-cream-warm);
	border-radius: var(--wcqb-radius-sm);
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--wcqb-border);
	transition: background var(--wcqb-t-base), border-color var(--wcqb-t-base), transform var(--wcqb-t-base) var(--wcqb-spring);
}

.wcqb-wrap .wcqb-group:hover .wcqb-group-icon {
	transform: scale(1.08);
}

.wcqb-wrap .wcqb-group[data-touched="true"] .wcqb-group-icon {
	background: var(--wcqb-accent-pale);
	border-color: var(--wcqb-accent-light);
}

.wcqb-wrap .wcqb-group-text { flex: 1; min-width: 0; }

.wcqb-wrap .wcqb-group-text h3 {
	font-size: 15px;
	font-weight: 600;
	color: var(--wcqb-ink);
	margin: 0 0 2px;
}

.wcqb-wrap .wcqb-group-text p {
	font-size: 13px;
	color: var(--wcqb-ink-soft);
}

/* Step badge (number populated by JS) */
.wcqb-wrap .wcqb-step-badge {
	font-size: 11px;
	font-weight: 700;
	color: var(--wcqb-ink-faint);
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	min-width: 24px;
	text-align: right;
	transition: color var(--wcqb-t-base);
}

.wcqb-wrap .wcqb-group[data-touched="true"] .wcqb-step-badge {
	color: var(--wcqb-accent);
}

/* Done checkmark */
.wcqb-wrap .wcqb-done-check {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--wcqb-success);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	opacity: 0;
	transform: scale(0.6) rotate(-15deg);
	transition: opacity var(--wcqb-t-base), transform var(--wcqb-t-base) var(--wcqb-spring);
	flex-shrink: 0;
	box-shadow: 0 0 0 3px var(--wcqb-success-light);
}

.wcqb-wrap .wcqb-group[data-touched="true"] .wcqb-done-check {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}


/* =============================================================================
   RANGE SLIDER
   ============================================================================= */
.wcqb-wrap .wcqb-slider-wrap {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 10px;
}

.wcqb-wrap .wcqb-slider {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	background: linear-gradient(
		to right,
		var(--wcqb-accent) var(--slider-pct, 21%),
		var(--wcqb-border) var(--slider-pct, 21%)
	);
	border-radius: 99px;
	outline: none;
	cursor: pointer;
}

.wcqb-wrap .wcqb-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--wcqb-accent);
	border: none;
	box-shadow: 0 0 0 3px var(--wcqb-paper), 0 0 0 6px var(--wcqb-accent), 0 4px 12px rgba(181,133,78,.45);
	cursor: grab;
	transition: transform .15s var(--wcqb-spring), box-shadow .15s;
}

.wcqb-wrap .wcqb-slider::-moz-range-thumb {
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--wcqb-accent);
	border: 3px solid var(--wcqb-paper);
	box-shadow: 0 0 0 2px var(--wcqb-accent), 0 4px 12px rgba(181,133,78,.45);
	cursor: grab;
	transition: transform .15s var(--wcqb-spring);
}

.wcqb-wrap .wcqb-slider:active::-webkit-slider-thumb {
	transform: scale(1.18);
	cursor: grabbing;
	box-shadow: 0 0 0 3px var(--wcqb-paper), 0 0 0 8px var(--wcqb-accent), 0 6px 18px rgba(181,133,78,.55);
}

.wcqb-wrap .wcqb-slider:active::-moz-range-thumb {
	transform: scale(1.18);
	cursor: grabbing;
}

.wcqb-wrap .wcqb-slider:focus-visible::-webkit-slider-thumb {
	outline: 3px solid var(--wcqb-accent);
	outline-offset: 3px;
}

.wcqb-wrap .wcqb-slider:focus-visible::-moz-range-thumb {
	outline: 3px solid var(--wcqb-accent);
	outline-offset: 3px;
}

.wcqb-wrap .wcqb-slider-display {
	display: flex;
	align-items: baseline;
	gap: 5px;
	min-width: 90px;
	justify-content: flex-end;
}

.wcqb-wrap .wcqb-slider-number {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 36px;
	font-weight: 700;
	color: var(--wcqb-accent);
	line-height: 1;
	transition: color var(--wcqb-t-fast);
	font-variant-numeric: tabular-nums;
}

.wcqb-wrap .wcqb-slider-unit {
	font-size: 13px;
	color: var(--wcqb-ink-muted);
	font-weight: 500;
}

.wcqb-wrap .wcqb-slider-ticks {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--wcqb-ink-ghost);
	padding: 0 4px;
	user-select: none;
	letter-spacing: .02em;
}


/* =============================================================================
   CHIP SELECTORS
   ============================================================================= */
.wcqb-wrap .wcqb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wcqb-wrap .wcqb-chip {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 20px 11px;
	min-width: 90px;
	border: 1.5px solid var(--wcqb-border);
	border-radius: var(--wcqb-radius);
	background: var(--wcqb-cream);
	color: var(--wcqb-ink-soft);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition:
		background var(--wcqb-t-fast),
		border-color var(--wcqb-t-fast),
		color var(--wcqb-t-fast),
		transform var(--wcqb-t-base) var(--wcqb-spring),
		box-shadow var(--wcqb-t-fast);
	user-select: none;
	white-space: nowrap;
	/* outline: none intentionally omitted — rely on :focus-visible rule below */
}

.wcqb-wrap .wcqb-chip:hover,
.wcqb-wrap .wcqb-chip.active {
	will-change: transform;
}

.wcqb-wrap .wcqb-chip:hover {
	border-color: var(--wcqb-accent-light);
	background: var(--wcqb-accent-pale);
	color: var(--wcqb-ink);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(181,133,78,.22);
}

.wcqb-wrap .wcqb-chip:focus-visible {
	outline: 2px solid var(--wcqb-accent);
	outline-offset: 2px;
}

.wcqb-wrap .wcqb-chip.active:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.wcqb-wrap .wcqb-chip.active {
	border-color: var(--wcqb-accent-dark);
	background: linear-gradient(135deg, var(--wcqb-grad-start) 0%, var(--wcqb-grad-end) 100%);
	color: var(--wcqb-paper);
	box-shadow: 0 4px 18px rgba(181,133,78,.45), inset 0 1px 0 rgba(255,255,255,.18);
	transform: translateY(-2px) scale(1.01);
}

.wcqb-wrap .wcqb-chip.active:hover {
	background: linear-gradient(135deg, #ba7f3a 0%, #7d5228 100%);
	border-color: var(--wcqb-accent-dark);
	box-shadow: 0 6px 22px rgba(181,133,78,.50), inset 0 1px 0 rgba(255,255,255,.18);
}

.wcqb-wrap .wcqb-chip-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

.wcqb-wrap .wcqb-chip-price {
	font-size: 11px;
	font-weight: 600;
	color: var(--wcqb-ink-muted);
	line-height: 1;
	background: rgba(0,0,0,.06);
	border-radius: 20px;
	padding: 2px 8px;
	transition: background var(--wcqb-t-fast), color var(--wcqb-t-fast);
}

.wcqb-wrap .wcqb-chip:hover .wcqb-chip-price {
	background: rgba(181,133,78,.14);
	color: var(--wcqb-accent-dark);
}

.wcqb-wrap .wcqb-chip.active .wcqb-chip-price {
	color: rgba(255,255,255,.92);
	background: rgba(255,255,255,.18);
}

/* Popular badge — rendered via JS data-popular attribute */
.wcqb-wrap .wcqb-chip[data-popular="true"] {
	padding-top: 16px;
}

.wcqb-wrap .wcqb-chip[data-popular="true"]::before {
	content: 'Popular';
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wcqb-accent);
	color: var(--wcqb-paper);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 2px 8px;
	border-radius: 0 0 6px 6px;
	white-space: nowrap;
	text-transform: uppercase;
	pointer-events: none;
}

.wcqb-wrap .wcqb-chip.active[data-popular="true"]::before {
	background: rgba(255,255,255,.25);
}


/* =============================================================================
   BUNDLE PRESET BAR
   ============================================================================= */
.wcqb-wrap .wcqb-bundle-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 32px;
	background: var(--wcqb-cream-warm);
	border-bottom: 1px solid var(--wcqb-border);
	flex-wrap: wrap;
}

.wcqb-wrap .wcqb-bundle-bar-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--wcqb-ink-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	flex-shrink: 0;
}

.wcqb-wrap .wcqb-bundle-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.wcqb-wrap .wcqb-bundle-chip {
	padding: 6px 16px;
	border: 1.5px solid var(--wcqb-border);
	border-radius: 20px;
	background: var(--wcqb-paper);
	color: var(--wcqb-ink-soft);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--wcqb-t-fast), border-color var(--wcqb-t-fast), color var(--wcqb-t-fast), transform var(--wcqb-t-fast);
	/* outline: none intentionally omitted — rely on :focus-visible rule below */
	white-space: nowrap;
}

.wcqb-wrap .wcqb-bundle-chip:hover,
.wcqb-wrap .wcqb-bundle-chip.active {
	will-change: transform;
}

.wcqb-wrap .wcqb-bundle-chip:hover {
	border-color: var(--wcqb-accent-light);
	background: var(--wcqb-accent-pale);
	color: var(--wcqb-ink);
	transform: translateY(-1px);
}

.wcqb-wrap .wcqb-bundle-chip.active {
	background: linear-gradient(135deg, var(--wcqb-grad-start) 0%, var(--wcqb-grad-end) 100%);
	border-color: var(--wcqb-accent-dark);
	color: var(--wcqb-paper);
	box-shadow: 0 2px 10px rgba(181,133,78,.35);
}

.wcqb-wrap .wcqb-bundle-chip.active:hover {
	background: linear-gradient(135deg, #ba7f3a 0%, #7d5228 100%);
	box-shadow: 0 4px 16px rgba(181,133,78,.50);
}

.wcqb-wrap .wcqb-bundle-chip:focus-visible {
	outline: 2px solid var(--wcqb-accent);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.wcqb-wrap .wcqb-bundle-bar { padding: 12px 20px; }
}


/* =============================================================================
   TOOLTIP on chips (CSS-only, pure hover)
   ============================================================================= */
.wcqb-wrap .wcqb-chip[data-tooltip] {
	position: relative;
}

.wcqb-wrap .wcqb-chip[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--wcqb-ink);
	color: var(--wcqb-cream);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	padding: 6px 10px;
	border-radius: 6px;
	white-space: normal;
	min-width: 160px;
	max-width: 220px;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--wcqb-t-fast);
	z-index: 100;
	box-shadow: var(--wcqb-shadow-md);
}

.wcqb-wrap .wcqb-chip[data-tooltip]:hover::after,
.wcqb-wrap .wcqb-chip[data-tooltip]:focus-visible::after {
	opacity: 1;
}

/* Flip tooltip above active chips so it doesn't clip the badge */
.wcqb-wrap .wcqb-chip[data-popular="true"][data-tooltip]::after {
	bottom: calc(100% + 12px);
}


/* =============================================================================
   PROMO CODE
   ============================================================================= */
.wcqb-wrap .wcqb-promo-wrap {
	padding: 10px 28px 4px;
	border-top: 1px solid rgba(255,255,255,.055);
}

.wcqb-wrap .wcqb-promo-row {
	display: flex;
	gap: 6px;
}

/* Extra parent selector (.wcqb-quote-inner) raises specificity above theme rules
   without needing !important — safe because the promo input is always inside .wcqb-quote-inner. */
.wcqb-wrap .wcqb-quote-inner .wcqb-promo-input {
	flex: 1;
	padding: 8px 12px;
	border: 1.5px solid rgba(255,255,255,.18);
	border-radius: var(--wcqb-radius-sm);
	background: rgba(255,255,255,.10);
	color: #faf8f4;
	-webkit-text-fill-color: #faf8f4;
	caret-color: #faf8f4;
	font-family: inherit;
	font-size: 13px;
	outline: none;
	transition: border-color var(--wcqb-t-fast), box-shadow var(--wcqb-t-fast);
	min-width: 0;
}

.wcqb-wrap .wcqb-quote-inner .wcqb-promo-input::placeholder {
	color: rgba(250,248,244,.40);
	-webkit-text-fill-color: rgba(250,248,244,.40);
	opacity: 1; /* Firefox ignores color without this on ::placeholder */
}
.wcqb-wrap .wcqb-quote-inner .wcqb-promo-input:focus {
	border-color: var(--wcqb-accent-light);
	box-shadow: 0 0 0 3px rgba(181,133,78,.18);
}

.wcqb-wrap .wcqb-btn-promo {
	padding: 8px 14px;
	background: rgba(255,255,255,.10);
	color: var(--wcqb-cream);
	border: 1.5px solid rgba(255,255,255,.16);
	border-radius: var(--wcqb-radius-sm);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--wcqb-t-fast), border-color var(--wcqb-t-fast);
	white-space: nowrap;
	/* outline: none intentionally omitted — rely on :focus-visible rule below */
	flex-shrink: 0;
}

.wcqb-wrap .wcqb-btn-promo:hover {
	background: rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.28);
}

.wcqb-wrap .wcqb-btn-promo:focus-visible { outline: 2px solid var(--wcqb-accent); outline-offset: 2px; }

.wcqb-wrap .wcqb-promo-msg {
	font-size: 11px;
	margin-top: 5px;
	min-height: 16px;
	line-height: 1.4;
}

.wcqb-wrap .wcqb-promo-msg.wcqb-promo-ok { color: var(--wcqb-success-vivid); }
.wcqb-wrap .wcqb-promo-msg.wcqb-promo-err { color: var(--wcqb-error-vivid); }


/* Negative price item (promo discount in quote panel) */
.wcqb-wrap .wcqb-item-price.wcqb-item-discount {
	color: var(--wcqb-success-vivid);
}

/* Print expiry line */
.wcqb-wrap .wcqb-print-expiry {
	font-size: 11px;
	color: var(--wcqb-ink-muted);
	font-style: italic;
	margin-top: 4px;
}


/* =============================================================================
   TOGGLE ADD-ONS
   ============================================================================= */
.wcqb-wrap .wcqb-toggles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.wcqb-wrap .wcqb-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border: 1.5px solid var(--wcqb-border);
	border-radius: var(--wcqb-radius);
	background: var(--wcqb-cream);
	color: var(--wcqb-ink-soft);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition:
		background var(--wcqb-t-fast),
		border-color var(--wcqb-t-fast),
		color var(--wcqb-t-fast),
		transform var(--wcqb-t-base) var(--wcqb-spring),
		box-shadow var(--wcqb-t-fast);
	user-select: none;
	/* outline: none intentionally omitted — rely on :focus-visible rule below */
}

.wcqb-wrap .wcqb-toggle:hover,
.wcqb-wrap .wcqb-toggle.active {
	will-change: transform;
}

.wcqb-wrap .wcqb-toggle:hover {
	border-color: var(--wcqb-accent-light);
	background: var(--wcqb-accent-pale);
	color: var(--wcqb-ink);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(181,133,78,.18);
}

.wcqb-wrap .wcqb-toggle:focus-visible {
	outline: 2px solid var(--wcqb-accent);
	outline-offset: 2px;
}

.wcqb-wrap .wcqb-toggle.active {
	border-color: var(--wcqb-accent-dark);
	background: linear-gradient(135deg, var(--wcqb-grad-start) 0%, var(--wcqb-grad-end) 100%);
	color: var(--wcqb-paper);
	box-shadow: 0 4px 16px rgba(181,133,78,.40), inset 0 1px 0 rgba(255,255,255,.15);
	transform: translateY(-2px);
}

.wcqb-wrap .wcqb-toggle.active:hover {
	background: linear-gradient(135deg, #ba7f3a 0%, #7d5228 100%);
	box-shadow: 0 6px 22px rgba(181,133,78,.50), inset 0 1px 0 rgba(255,255,255,.18);
}

.wcqb-wrap .wcqb-toggle-icon {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
	display: inline-block;
	transition: transform var(--wcqb-t-base) var(--wcqb-spring);
}

.wcqb-wrap .wcqb-toggle.active .wcqb-toggle-icon {
	transform: rotate(8deg) scale(1.1);
}

.wcqb-wrap .wcqb-toggle-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wcqb-wrap .wcqb-toggle-label { font-size: 13px; font-weight: 500; }

.wcqb-wrap .wcqb-toggle-price {
	font-size: 11px;
	opacity: .7;
}

.wcqb-wrap .wcqb-toggle-check {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: rgba(255,255,255,.22);
	border: 1.5px solid rgba(255,255,255,.50);
	display: flex; align-items: center; justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--wcqb-paper);
	opacity: 0;
	transform: scale(0.6) rotate(-15deg);
	transition:
		opacity var(--wcqb-t-fast),
		transform var(--wcqb-t-base) var(--wcqb-spring);
	flex-shrink: 0;
}

.wcqb-wrap .wcqb-toggle.active .wcqb-toggle-check {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}


/* =============================================================================
   QUOTE PANEL
   ============================================================================= */
.wcqb-wrap .wcqb-quote-panel {
	position: sticky;
	top: 24px;
}

.wcqb-wrap .wcqb-quote-inner {
	background: var(--wcqb-ink);
	border-radius: var(--wcqb-radius-lg);
	overflow: hidden;
	box-shadow: var(--wcqb-shadow-lg);
}

/* Header */
.wcqb-wrap .wcqb-quote-header {
	background: linear-gradient(160deg, var(--wcqb-ink-deep) 0%, var(--wcqb-ink) 100%);
	padding: 26px 28px 22px;
	border-bottom: 1px solid rgba(255,255,255,.07);
	position: relative;
	overflow: hidden;
}

.wcqb-wrap .wcqb-quote-header::after {
	content: '◈';
	position: absolute;
	right: -16px; bottom: -24px;
	font-size: 100px;
	color: rgba(255,255,255,.025);
	pointer-events: none;
	line-height: 1;
}

.wcqb-wrap .wcqb-quote-header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.wcqb-wrap .wcqb-quote-header-top h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 17px;
	font-weight: 600;
	color: rgba(250,248,244,.75);
	margin: 0;
	letter-spacing: -0.01em;
}

.wcqb-wrap .wcqb-quote-live-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(250,248,244,.45);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wcqb-wrap .wcqb-live-dot {
	width: 6px; height: 6px;
	background: var(--wcqb-success-vivid);
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(61,214,140,.5);
	animation: wcqbPulse 2s ease-in-out infinite;
}

.wcqb-wrap .wcqb-quote-total-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.wcqb-wrap .wcqb-quote-total-wrap::after {
	content: '';
	display: block;
	height: 2px;
	width: 56px;
	background: linear-gradient(90deg, var(--wcqb-accent), rgba(181,133,78,0));
	border-radius: 2px;
}

.wcqb-wrap .wcqb-quote-total-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: rgba(250,248,244,.55);
	font-weight: 500;
}

.wcqb-wrap .wcqb-quote-total {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 44px;
	font-weight: 700;
	color: var(--wcqb-accent);
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Items list wrapper — provides the fade-out gradient when content overflows */
.wcqb-wrap .wcqb-quote-items-wrap {
	position: relative;
}
.wcqb-wrap .wcqb-quote-items-wrap::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 48px;
	background: linear-gradient(to bottom, transparent, rgba(28,25,23,.96));
	pointer-events: none;
	border-radius: 0 0 4px 4px;
	opacity: 0;
	transition: opacity .2s;
}
.wcqb-wrap .wcqb-quote-items-wrap.has-overflow::after {
	opacity: 1;
}

/* Items list */
.wcqb-wrap .wcqb-quote-items {
	padding: 16px 28px;
	min-height: 100px;
	max-height: clamp(320px, calc(100vh - 360px), 600px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(181,133,78,.45) transparent;
}

.wcqb-wrap .wcqb-quote-items::-webkit-scrollbar { width: 5px; }
.wcqb-wrap .wcqb-quote-items::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 3px; }
.wcqb-wrap .wcqb-quote-items::-webkit-scrollbar-thumb { background: rgba(181,133,78,.45); border-radius: 3px; }
.wcqb-wrap .wcqb-quote-items::-webkit-scrollbar-thumb:hover { background: rgba(181,133,78,.75); }

.wcqb-wrap .wcqb-quote-empty {
	font-size: 13px;
	color: rgba(250,248,244,.25);
	text-align: center;
	padding: 24px 0;
	font-style: italic;
}

.wcqb-wrap .wcqb-quote-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255,255,255,.055);
	animation: wcqbItemIn .22s var(--wcqb-ease) both;
}

.wcqb-wrap .wcqb-quote-item:last-child { border-bottom: none; }

.wcqb-wrap .wcqb-item-label {
	font-size: 13px;
	color: rgba(250,248,244,.72);
	flex: 1;
	line-height: 1.4;
}

.wcqb-wrap .wcqb-item-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--wcqb-cream);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Validity note */
.wcqb-wrap .wcqb-quote-validity {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 28px 10px;
	font-size: 11px;
	color: rgba(250,248,244,.28);
	border-top: 1px solid rgba(255,255,255,.055);
	letter-spacing: .01em;
}

/* Disclaimer */
.wcqb-wrap .wcqb-quote-disclaimer {
	padding: 8px 28px 12px;
	font-size: 11px;
	color: rgba(250,248,244,.25);
	line-height: 1.5;
	font-style: italic;
}

/* Actions */
.wcqb-wrap .wcqb-quote-actions {
	padding: 18px 28px 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Closed submissions notice */
.wcqb-wrap .wcqb-submissions-closed {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 16px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: var(--wcqb-radius-sm);
	font-size: 13px;
	color: rgba(250,248,244,.50);
	line-height: 1.4;
}


/* =============================================================================
   BUTTONS
   ============================================================================= */
.wcqb-wrap .wcqb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: none;
	border-radius: var(--wcqb-radius-sm);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition:
		background var(--wcqb-t-fast),
		border-color var(--wcqb-t-fast),
		color var(--wcqb-t-fast),
		transform var(--wcqb-t-fast),
		box-shadow var(--wcqb-t-fast);
	text-decoration: none;
	user-select: none;
	letter-spacing: .01em;
	/* outline: none intentionally omitted — rely on :focus-visible rule below */
}

.wcqb-wrap .wcqb-btn-full { width: 100%; }

.wcqb-wrap .wcqb-btn:focus-visible {
	outline: 2px solid var(--wcqb-accent);
	outline-offset: 3px;
}

/* Primary */
.wcqb-wrap .wcqb-btn-primary {
	background: linear-gradient(135deg, var(--wcqb-grad-start) 0%, var(--wcqb-accent) 100%);
	color: var(--wcqb-paper);
	box-shadow: 0 2px 10px rgba(181,133,78,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

.wcqb-wrap .wcqb-btn-primary:hover {
	background: linear-gradient(135deg, #b87d38 0%, var(--wcqb-accent-dark) 100%);
	box-shadow: 0 6px 22px rgba(181,133,78,.50), inset 0 1px 0 rgba(255,255,255,.12);
	transform: translateY(-2px);
}

.wcqb-wrap .wcqb-btn-primary:active {
	transform: scale(0.97);
	box-shadow: 0 1px 4px rgba(181,133,78,.25);
	transition-duration: .08s;
}

.wcqb-wrap .wcqb-btn-primary:focus-visible {
	outline-color: rgba(255,255,255,.85);
}

/* Outline (replaces old secondary in dark context) */
.wcqb-wrap .wcqb-btn-outline {
	background: rgba(255,255,255,.06);
	color: rgba(250,248,244,.70);
	border: 1px solid rgba(181,133,78,.28);
}

.wcqb-wrap .wcqb-btn-outline:hover {
	background: rgba(181,133,78,.12);
	color: var(--wcqb-cream);
	border-color: rgba(181,133,78,.45);
}

/* Booking link button */
.wcqb-wrap .wcqb-btn-booking {
	background: transparent;
	color: rgba(250,248,244,.78);
	border: 1px solid rgba(181,133,78,.30);
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}
.wcqb-wrap .wcqb-btn-booking:hover {
	background: rgba(181,133,78,.10);
	color: var(--wcqb-cream);
	border-color: rgba(181,133,78,.48);
}

/* Checkbox field in form */
.wcqb-wrap .wcqb-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: var(--wcqb-font-sm);
	color: var(--wcqb-ink-soft);
}

/* Neutral (modal context) */
.wcqb-wrap .wcqb-btn-neutral {
	background: var(--wcqb-cream-warm);
	color: var(--wcqb-ink-soft);
	border: 1px solid var(--wcqb-border);
}
.wcqb-wrap .wcqb-btn-neutral:hover {
	background: var(--wcqb-cream-hover);
	color: var(--wcqb-ink);
	border-color: var(--wcqb-border-dark);
}

/* Clipboard */
.wcqb-wrap .wcqb-btn-clipboard {
	background: var(--wcqb-cream-warm);
	color: var(--wcqb-ink-soft);
	border: 1px solid var(--wcqb-border);
}
.wcqb-wrap .wcqb-btn-clipboard:hover {
	background: var(--wcqb-cream-hover);
	color: var(--wcqb-ink);
}
.wcqb-wrap .wcqb-btn-clipboard.wcqb-copied {
	background: var(--wcqb-success-light);
	color: var(--wcqb-success);
	border-color: rgba(61,214,140,.45);
}

/* Arrow inside primary button */
.wcqb-wrap .wcqb-btn-arrow { transition: transform var(--wcqb-t-fast); }
.wcqb-wrap .wcqb-btn-primary:hover .wcqb-btn-arrow { transform: translateX(4px); }

/* Mobile bar button */
.wcqb-wrap .wcqb-mobile-bar-btn {
	padding: 10px 20px;
	font-size: 13px;
	flex-shrink: 0;
}


/* =============================================================================
   MODALS
   ============================================================================= */
.wcqb-wrap .wcqb-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(28,25,23,.68);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	padding: 20px;
	animation: wcqbOverlayIn .18s ease;
}

.wcqb-wrap .wcqb-modal-box {
	background: var(--wcqb-paper);
	border-radius: var(--wcqb-radius-lg);
	box-shadow: var(--wcqb-shadow-modal);
	width: 100%;
	max-width: 520px;
	max-height: 92vh;
	overflow-y: auto;
	animation: wcqbModalIn .24s var(--wcqb-spring);
}

.wcqb-wrap .wcqb-modal-box::-webkit-scrollbar { width: 4px; }
.wcqb-wrap .wcqb-modal-box::-webkit-scrollbar-thumb { background: var(--wcqb-border-dark); border-radius: 2px; }

/* Modal header */
.wcqb-wrap .wcqb-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 28px 32px 0;
}

.wcqb-wrap .wcqb-modal-header h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--wcqb-ink);
	margin: 0 0 3px;
}

.wcqb-wrap .wcqb-modal-header p {
	font-size: 13px;
	color: var(--wcqb-ink-soft);
}

.wcqb-wrap .wcqb-modal-close {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1.5px solid var(--wcqb-border);
	background: var(--wcqb-cream);
	color: var(--wcqb-ink-soft);
	font-size: 18px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background var(--wcqb-t-fast), color var(--wcqb-t-fast);
	flex-shrink: 0;
	align-self: flex-start;
	/* outline: none intentionally omitted — rely on :focus-visible rule below */
}

.wcqb-wrap .wcqb-modal-close:hover { background: var(--wcqb-cream-hover); color: var(--wcqb-ink); }
.wcqb-wrap .wcqb-modal-close:focus-visible { outline: 2px solid var(--wcqb-accent); outline-offset: 2px; }

/* Form inside modal */
.wcqb-wrap .wcqb-modal-box form {
	padding: 22px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wcqb-wrap .wcqb-form-row-half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.wcqb-wrap .wcqb-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wcqb-wrap .wcqb-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wcqb-ink);
}

.wcqb-wrap .wcqb-required { color: var(--wcqb-accent); }

/* Required-field legend — small explanatory note below the modal heading */
.wcqb-wrap .wcqb-required-legend {
    font-size: 12px;
    color: var(--wcqb-ink-muted);
    margin: 0 0 12px;
    line-height: 1.4;
}

.wcqb-wrap .wcqb-field input,
.wcqb-wrap .wcqb-field textarea {
	padding: 11px 14px;
	border: 1.5px solid var(--wcqb-border);
	border-radius: var(--wcqb-radius-sm);
	font-family: inherit;
	font-size: 14px;
	color: var(--wcqb-ink);
	background: var(--wcqb-cream);
	transition: border-color var(--wcqb-t-fast), box-shadow var(--wcqb-t-fast), background var(--wcqb-t-fast);
	outline: none;
	width: 100%;
}

.wcqb-wrap .wcqb-field input:focus,
.wcqb-wrap .wcqb-field textarea:focus {
	border-color: var(--wcqb-accent);
	box-shadow: 0 0 0 3px var(--wcqb-accent-glow);
	background: var(--wcqb-paper);
}

.wcqb-wrap .wcqb-field input::placeholder,
.wcqb-wrap .wcqb-field textarea::placeholder { color: var(--wcqb-ink-ghost); }

.wcqb-wrap .wcqb-field textarea { resize: vertical; min-height: 100px; }

/* Blur-triggered validation states */
.wcqb-wrap .wcqb-field input[data-valid="false"] {
	border-color: var(--wcqb-error);
	background: var(--wcqb-error-light);
	animation: wcqbShake .35s var(--wcqb-ease);
}

.wcqb-wrap .wcqb-field input[data-valid="true"] {
	border-color: var(--wcqb-success);
}

/* Character counter */
.wcqb-wrap .wcqb-char-count {
	font-size: 12px;
	color: var(--wcqb-ink-faint);
	text-align: right;
	margin-top: 3px;
	transition: color var(--wcqb-t-fast);
}

.wcqb-wrap .wcqb-char-count.wcqb-char-warn { color: var(--wcqb-accent); }
.wcqb-wrap .wcqb-char-count.wcqb-char-over { color: var(--wcqb-error); font-weight: 600; }

/* Per-field inline error (screen-reader announced, visually compact) */
.wcqb-wrap .wcqb-field-error {
	display: block;
	min-height: 1em;
	margin-top: 4px;
	font-size: 12px;
	color: var(--wcqb-error);
	line-height: 1.4;
}
.wcqb-wrap .wcqb-field-error:empty { display: none; }

/* Error box */
.wcqb-wrap .wcqb-form-error {
	padding: 11px 14px;
	background: var(--wcqb-error-light);
	border: 1px solid rgba(192,57,43,.20);
	border-radius: var(--wcqb-radius-sm);
	color: var(--wcqb-error);
	font-size: 13px;
	line-height: 1.5;
}

/* Spinner */
.wcqb-wrap .wcqb-spinner {
	width: 16px; height: 16px;
	border: 2.5px solid rgba(255,255,255,.25);
	border-top-color: var(--wcqb-paper);
	border-radius: 50%;
	animation: wcqbSpin .65s linear infinite;
}


/* =============================================================================
   SUCCESS MODAL
   ============================================================================= */
.wcqb-wrap .wcqb-modal-success {
	text-align: center;
	padding: 52px 44px 44px;
}

.wcqb-wrap .wcqb-success-icon {
	width: 76px; height: 76px;
	background: var(--wcqb-success-light);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 24px;
	color: var(--wcqb-success);
	animation: wcqbSuccessIn .5s var(--wcqb-spring);
}

.wcqb-wrap .wcqb-success-icon svg {
	width: 36px; height: 36px;
}

.wcqb-wrap .wcqb-modal-success h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 26px;
	color: var(--wcqb-ink);
	margin: 0 0 10px;
}

.wcqb-wrap .wcqb-success-sub {
	font-size: 14px;
	color: var(--wcqb-ink-soft);
	max-width: 360px;
	margin: 0 auto 24px;
	line-height: 1.6;
}

.wcqb-wrap .wcqb-success-summary {
	background: var(--wcqb-cream);
	border: 1px solid var(--wcqb-border);
	border-radius: var(--wcqb-radius);
	padding: 18px 20px;
	text-align: left;
	margin-bottom: 24px;
	font-size: 13px;
}

.wcqb-wrap .wcqb-success-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.wcqb-wrap .wcqb-btn-secondary {
	background: transparent;
	color: var(--wcqb-ink-soft);
	border: 1.5px solid var(--wcqb-border-dark);
}
.wcqb-wrap .wcqb-btn-secondary:hover {
	background: var(--wcqb-cream-hover);
	border-color: var(--wcqb-ink-soft);
}

.wcqb-wrap .wcqb-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--wcqb-border);
}

.wcqb-wrap .wcqb-summary-row:last-child { border-bottom: none; }
.wcqb-wrap .wcqb-summary-row-label { color: var(--wcqb-ink-soft); }
.wcqb-wrap .wcqb-summary-row-price { font-weight: 600; color: var(--wcqb-ink); white-space: nowrap; }

.wcqb-wrap .wcqb-summary-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--wcqb-ink);
}

.wcqb-wrap .wcqb-summary-total-amount {
	color: var(--wcqb-accent);
	font-size: 22px;
	font-family: 'Playfair Display', Georgia, serif;
}


/* =============================================================================
   PRINT MODAL
   ============================================================================= */
.wcqb-wrap .wcqb-modal-print { max-width: 620px; }

.wcqb-wrap .wcqb-print-content { padding: 28px 32px; }

.wcqb-wrap .wcqb-print-header {
	border-bottom: 2px solid var(--wcqb-border);
	padding-bottom: 18px;
	margin-bottom: 20px;
}

/* Modal-print parent added to specificity chain so WP theme h1/p rules don't bleed through */
.wcqb-wrap .wcqb-modal-print h1.wcqb-print-studio,
.wcqb-wrap .wcqb-modal-print .wcqb-print-studio {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--wcqb-ink);
	margin: 0 0 4px;
	padding: 0;
	line-height: 1.2;
	border: none;
}

.wcqb-wrap .wcqb-modal-print p.wcqb-print-subtitle,
.wcqb-wrap .wcqb-modal-print .wcqb-print-subtitle {
	font-size: 15px;
	font-weight: 400;
	color: var(--wcqb-ink-soft);
	margin: 0 0 6px;
	padding: 0;
	border: none;
}

.wcqb-wrap .wcqb-print-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.wcqb-wrap .wcqb-print-meta span {
	font-size: 12px;
	color: var(--wcqb-ink-muted);
}

.wcqb-wrap .wcqb-print-meta strong { color: var(--wcqb-ink); }

.wcqb-wrap .wcqb-print-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--wcqb-border);
	font-size: 14px;
}

.wcqb-wrap .wcqb-print-item:last-child { border-bottom: none; }
.wcqb-wrap .wcqb-print-item-label { color: var(--wcqb-ink-soft); flex: 1; }
.wcqb-wrap .wcqb-print-item-price { font-weight: 600; color: var(--wcqb-ink); white-space: nowrap; }

.wcqb-wrap .wcqb-print-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0 0;
	margin-top: 4px;
	border-top: 2.5px solid var(--wcqb-ink);
}

.wcqb-wrap .wcqb-print-total-label {
	font-size: 16px;
	font-weight: 700;
	color: var(--wcqb-ink);
}

.wcqb-wrap .wcqb-print-total-amount {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 28px;
	font-weight: 700;
	color: var(--wcqb-accent);
}

.wcqb-wrap .wcqb-print-disclaimer {
	font-size: 12px;
	color: var(--wcqb-ink-muted);
	margin-top: 18px;
	font-style: italic;
	line-height: 1.5;
}

.wcqb-wrap .wcqb-print-actions {
	padding: 16px 32px 28px;
	display: flex;
	gap: 10px;
	border-top: 1px solid var(--wcqb-border);
}


/* =============================================================================
   MOBILE FLOATING BAR
   ============================================================================= */
.wcqb-wrap .wcqb-mobile-bar { display: none; }


/* =============================================================================
   ANIMATIONS
   ============================================================================= */
@keyframes wcqbFadeIn {
	from { opacity: 0; transform: translateY(3px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes wcqbItemIn {
	from { opacity: 0; transform: translateX(8px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes wcqbOverlayIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wcqbModalIn {
	from { opacity: 0; transform: scale(.93) translateY(12px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes wcqbSuccessIn {
	from { opacity: 0; transform: scale(.5); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes wcqbSpin {
	to { transform: rotate(360deg); }
}

@keyframes wcqbPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: .6; transform: scale(.85); }
}

@keyframes wcqbShake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-5px); }
	75%      { transform: translateX(5px); }
}


/* =============================================================================
   RESPONSIVE — TABLET
   ============================================================================= */
@media (max-width: 1024px) {
	.wcqb-wrap .wcqb-app-layout {
		grid-template-columns: 1fr 340px;
		gap: 20px;
	}
}

/* =============================================================================
   RESPONSIVE — MOBILE
   ============================================================================= */
@media (max-width: 900px) {
	.wcqb-wrap .wcqb-app-layout {
		grid-template-columns: 1fr;
		padding: 20px 16px 96px; /* bottom padding for mobile bar */
	}

	.wcqb-wrap .wcqb-quote-panel {
		position: static;
		order: -1; /* Quote panel above builder on mobile */
	}

	.wcqb-wrap .wcqb-header-inner { padding: 20px 20px 18px; }

	.wcqb-wrap .wcqb-studio-name { font-size: 22px; }

	/* Mobile floating bar */
	.wcqb-wrap .wcqb-mobile-bar {
		display: flex;
		position: fixed;
		bottom: 0; left: 0; right: 0;
		background: var(--wcqb-ink);
		padding: 12px 20px max(12px, env(safe-area-inset-bottom));
		gap: 16px;
		align-items: center;
		z-index: 9900;
		box-shadow: 0 -6px 24px rgba(28,25,23,.30);
		border-top: 1px solid rgba(255,255,255,.08);
	}

	.wcqb-wrap .wcqb-mobile-bar-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.wcqb-wrap .wcqb-mobile-bar-label {
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: .07em;
		color: rgba(250,248,244,.45);
		font-weight: 500;
	}

	.wcqb-wrap .wcqb-mobile-bar-total {
		font-family: 'Playfair Display', Georgia, serif;
		font-size: 26px;
		font-weight: 700;
		color: var(--wcqb-accent);
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}
}

@media (max-width: 640px) {
	.wcqb-wrap .wcqb-group { padding: 20px 20px; }
	.wcqb-wrap .wcqb-panel-header { padding: 18px 20px; }
	.wcqb-wrap .wcqb-toggles { grid-template-columns: 1fr; }
	.wcqb-wrap .wcqb-form-row-half { grid-template-columns: 1fr; }
	.wcqb-wrap .wcqb-modal-box form { padding: 18px 20px 26px; }
	.wcqb-wrap .wcqb-modal-header { padding: 22px 20px 0; }
	.wcqb-wrap .wcqb-modal-success { padding: 40px 24px 32px; }
	.wcqb-wrap .wcqb-print-content { padding: 20px; }
	.wcqb-wrap .wcqb-print-actions { padding: 12px 20px 24px; flex-wrap: wrap; border-top: 1px solid var(--wcqb-border); }
	.wcqb-wrap .wcqb-print-actions .wcqb-btn { flex: 1; min-width: 0; }
	.wcqb-wrap .wcqb-quote-header { padding: 20px 22px 18px; }
	.wcqb-wrap .wcqb-quote-items { padding: 14px 22px; max-height: clamp(260px, 50vh, 480px); }
	.wcqb-wrap .wcqb-quote-actions { padding: 14px 22px 22px; }
	.wcqb-wrap .wcqb-quote-validity,
	.wcqb-wrap .wcqb-quote-disclaimer { padding-left: 22px; padding-right: 22px; }
	.wcqb-wrap .wcqb-quote-total { font-size: 36px; }
	.wcqb-wrap .wcqb-header-meta { display: none; }
	.wcqb-wrap .wcqb-chips { gap: 8px; }
	.wcqb-wrap .wcqb-chip { padding: 9px 14px 10px; font-size: 13px; }
	.wcqb-wrap .wcqb-chip-price { font-size: 10px; padding: 1px 6px; }
	.wcqb-wrap .wcqb-slider::-webkit-slider-thumb { width: 32px; height: 32px; }
	.wcqb-wrap .wcqb-slider::-moz-range-thumb { width: 28px; height: 28px; }
}


/* =============================================================================
   LOADING SKELETON — chip containers before JS populates them
   ============================================================================= */
@keyframes wcqbSkeletonPulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .55; }
}

.wcqb-wrap .wcqb-chips:empty::before,
.wcqb-wrap .wcqb-chips:empty::after {
	content: '';
	display: inline-block;
	height: 38px;
	background: linear-gradient(90deg, var(--wcqb-cream-warm) 0%, var(--wcqb-border) 50%, var(--wcqb-cream-warm) 100%);
	border-radius: 50px;
	animation: wcqbSkeletonPulse 1.2s ease infinite;
}

.wcqb-wrap .wcqb-chips:empty::before {
	width: 110px;
}

.wcqb-wrap .wcqb-chips:empty::after {
	width: 155px;
	animation-delay: .18s;
}


/* =============================================================================
   ACCESSIBILITY — respect user motion preferences
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
	.wcqb-wrap *,
	.wcqb-wrap *::before,
	.wcqb-wrap *::after {
		animation-duration:        .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:       .01ms !important;
	}
}


/* =============================================================================
   PRINT STYLES
   ============================================================================= */
@media print {
	.wcqb-wrap .wcqb-header,
	.wcqb-wrap .wcqb-builder-panel,
	.wcqb-wrap .wcqb-quote-panel,
	.wcqb-wrap .wcqb-mobile-bar { display: none !important; }

	.wcqb-wrap .wcqb-modal-overlay { position: static !important; background: transparent !important; }
	.wcqb-wrap .wcqb-no-print { display: none !important; }
	.wcqb-wrap .wcqb-modal-box { box-shadow: none; border-radius: 0; max-height: none; overflow: visible; }
	.wcqb-wrap .wcqb-print-content { padding: 0; }
	.wcqb-wrap .wcqb-quote-total { color: var(--wcqb-accent) !important; -webkit-print-color-adjust: exact; }
}