/* Wedding Pricing Calculator — card UI; Elementor: --e-global-color-* hooks */

.wpc {
	--wpc-ink: var(--e-global-color-text, #2a2622);
	--wpc-muted: var(--e-global-color-secondary, #6b645a);
	--wpc-surface: #f9f6f1;
	--wpc-surface-raised: #fffef9;
	--wpc-line: #e4dcd2;
	--wpc-line-strong: #c9bfb2;
	--wpc-accent: var(--e-global-color-primary, #7a6a58);
	--wpc-accent-muted: #a89b8a;
	--wpc-shadow: 0 0.5rem 1.5rem rgba(42, 38, 34, 0.08);
	--wpc-radius: 0.4rem;
	box-sizing: border-box;
	max-width: 72rem;
	margin: 0 auto;
	color: var(--wpc-ink);
}

.wpc *,
.wpc *::before,
.wpc *::after {
	box-sizing: inherit;
}

.wpc__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: 0.875rem;
	color: #555;
}

.wpc__step {
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	background: #f0f0f0;
}

.wpc__step--active {
	background: #222;
	color: #fff;
	font-weight: 600;
}

.wpc__panel {
	margin-bottom: 2rem;
}

.wpc__panel--hidden {
	display: none !important;
}

.wpc__h {
	font-size: 1.25rem;
	margin: 0 0 1rem;
	font-weight: 600;
}

/* —— Venue & package: horizontal slider (swipe or arrows) —— */
.wpc__slider {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
	max-width: 100%;
}

.wpc__slider-viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

.wpc__slider-viewport::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.wpc__cards--slider {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1.25rem;
	margin: 0;
	padding: 0.2rem 0.1rem 0.5rem;
	list-style: none;
}

.wpc__cards--slider > .wpc__muted {
	flex: 1 1 100%;
	min-width: 100%;
	scroll-snap-align: none;
}

.wpc__cards--slider > .wpc-card {
	flex: 0 0 min(20rem, calc(100% - 2.5rem));
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

@media (min-width: 36rem) {
	.wpc__cards--slider > .wpc-card {
		flex: 0 0 min(20rem, 78%);
	}
}

@media (min-width: 48rem) {
	.wpc__cards--slider > .wpc-card {
		flex: 0 0 min(20rem, 45%);
	}
}

/* Grid / no slider: few items, or 4+ items that still fit (no overflow) */
.wpc__slider--all-visible {
	gap: 0;
}

.wpc__slider--all-visible .wpc__slider-viewport {
	overflow-x: visible;
	scroll-snap-type: none;
}

.wpc__slider--all-visible .wpc__cards--slider {
	display: grid;
	/* Cap column width (match .wpc__cards--slider flex 20rem) so 1–3 items do not grow huge */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 20rem));
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 0.2rem 0.1rem 0.5rem;
	align-items: stretch;
	justify-content: start;
	justify-items: stretch;
}

.wpc__slider--all-visible .wpc__cards--slider > .wpc-card {
	min-width: 0;
	max-width: 20rem;
	width: 100%;
	justify-self: start;
	scroll-snap-align: none;
	scroll-snap-stop: normal;
}

.wpc__slider--all-visible .wpc__cards--slider > .wpc__muted {
	grid-column: 1 / -1;
	min-width: 0;
	text-align: center;
}

/* Scoped + appearance reset so theme/Elementor “button” pinks do not win */
.wpc .wpc__slider-nav {
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	margin: 0;
	border: 1px solid var(--wpc-line) !important;
	border-radius: 0.3rem;
	background: var(--wpc-surface-raised) !important;
	background-color: var(--wpc-surface-raised) !important;
	color: var(--wpc-ink) !important;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--wpc-shadow);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpc .wpc__slider-nav:hover,
.wpc .wpc__slider-nav:focus:not(:focus-visible) {
	border-color: var(--wpc-line-strong) !important;
	background: #fffef9 !important;
	background-color: #fffef9 !important;
	color: var(--wpc-ink) !important;
	box-shadow: 0 0.4rem 1.25rem rgba(42, 38, 34, 0.1);
}

.wpc .wpc__slider-nav:active {
	background-color: var(--wpc-surface) !important;
}

.wpc .wpc__slider-nav:focus-visible {
	outline: 2px solid var(--wpc-accent);
	outline-offset: 2px;
}

.wpc .wpc__slider-nav-inner {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1;
}

/* Shown only in overflow mode; .wpc .wpc__slider-nav alone loses to this due to :not() specificity */
.wpc .wpc__slider:not(.wpc__slider--active) .wpc__slider-nav {
	display: none;
}

.wpc .wpc-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--wpc-line);
	border-radius: var(--wpc-radius);
	background: var(--wpc-surface-raised);
	cursor: pointer;
	font: inherit;
	text-align: left;
	color: var(--wpc-ink);
	box-shadow: var(--wpc-shadow);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wpc .wpc-card:hover {
	border-color: var(--wpc-line-strong);
	box-shadow: 0 0.4rem 1.25rem rgba(42, 38, 34, 0.1);
}

.wpc .wpc-card:focus {
	outline: none;
}

.wpc .wpc-card:focus-visible {
	outline: 2px solid var(--wpc-accent);
	outline-offset: 2px;
}

.wpc .wpc-card--active {
	border-color: var(--wpc-accent);
	box-shadow: 0 0 0 1px var(--wpc-accent), var(--wpc-shadow);
}

.wpc .wpc-card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(145deg, #ebe4da 0%, #ddd4c8 100%);
}

.wpc .wpc-card-image--placeholder {
	min-height: 7rem;
}

.wpc .wpc-card-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.wpc .wpc-card-content {
	padding: 1rem 1rem 1.1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.wpc .wpc-card-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.wpc .wpc-card-sub {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--wpc-muted);
	line-height: 1.35;
}

.wpc__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.wpc__lbl {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-weight: 500;
}

.wpc__select,
.wpc__input {
	font: inherit;
	padding: 0.5rem 0.65rem;
	border: 1px solid #ccc;
	border-radius: 0.35rem;
	min-width: 10rem;
}

.wpc__season {
	font-size: 0.95rem;
	color: #333;
	margin: 0.75rem 0 0;
}

/* Day of week: cream panel + sage buttons (overrides theme button colors) */
.wpc__dow {
	--wpc-dow-bg: #f9f8f3;
	--wpc-dow-surface: #adb491;
	--wpc-dow-surface-hover: #b8c19e;
	--wpc-dow-surface-active: #8f9a75;
	--wpc-dow-surface-active-hover: #818c6a;
	--wpc-dow-text: #fff;
	--wpc-dow-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
	--wpc-dow-shadow-hover: 0 0.2rem 0.55rem rgba(0, 0, 0, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.25rem 0 0;
	padding: 1rem 1.15rem;
	background-color: var(--wpc-dow-bg);
	border-radius: 0.5rem;
}

/* DOW: sage buttons, white text; theme/Elementor isolation */
.wpc .wpc__dow-btn {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-width: 3rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid #9ba185;
	border-radius: 0.5rem;
	background-color: var(--wpc-dow-surface) !important;
	color: var(--wpc-dow-text) !important;
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: var(--wpc-dow-shadow);
	cursor: pointer;
	transform: translateY(0);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.wpc .wpc__dow-btn:hover:not(:disabled):not(.wpc__dow-btn--active),
.wpc .wpc__dow-btn:focus:not(:focus-visible):not(:disabled):not(.wpc__dow-btn--active) {
	background-color: var(--wpc-dow-surface-hover) !important;
	color: var(--wpc-dow-text) !important;
	border-color: #8e9878;
	box-shadow: var(--wpc-dow-shadow-hover);
	transform: translateY(-2px);
}

.wpc .wpc__dow-btn:active:not(:disabled):not(.wpc__dow-btn--active) {
	background-color: var(--wpc-dow-surface) !important;
	color: var(--wpc-dow-text) !important;
	transform: translateY(0);
	box-shadow: var(--wpc-dow-shadow);
}

.wpc .wpc__dow-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: var(--wpc-dow-shadow), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.wpc .wpc__dow-btn--active {
	border-color: #6d7658;
	background-color: var(--wpc-dow-surface-active) !important;
	color: var(--wpc-dow-text) !important;
	font-weight: 600;
	box-shadow: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.wpc .wpc__dow-btn--active:hover:not(:disabled),
.wpc .wpc__dow-btn--active:focus:not(:focus-visible):not(:disabled) {
	background-color: var(--wpc-dow-surface-active-hover) !important;
	color: var(--wpc-dow-text) !important;
	border-color: #5f6a4c;
	box-shadow: var(--wpc-dow-shadow-hover), 0 0 0 1px rgba(255, 255, 255, 0.22);
	transform: translateY(-2px);
}

.wpc .wpc__dow-btn--active:active:not(:disabled) {
	background-color: var(--wpc-dow-surface-active) !important;
	color: var(--wpc-dow-text) !important;
	transform: translateY(0);
	box-shadow: var(--wpc-dow-shadow);
}

@media (prefers-reduced-motion: reduce) {
	.wpc .wpc__dow-btn,
	.wpc .wpc__dow-btn:hover:not(:disabled),
	.wpc .wpc__dow-btn--active:hover:not(:disabled) {
		transition: none;
		transform: none;
	}
}

.wpc__guests {
	display: grid;
	gap: 1.5rem;
	/* 14rem is too tight for [−] + 10rem-min input + [+]—last flex child was shrinking to a sliver */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}

.wpc__stepper {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
	min-width: 0;
}

/* Do not let theme flex rules collapse the + button; input absorbs shrink instead */
.wpc .wpc__stepper .wpc__input {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: 100%;
}

.wpc__btn {
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid #ccc;
	border-radius: 0.35rem;
	background: #f6f6f6;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

/* Fixed track so − / + never shrink to a strip in narrow grid columns */
.wpc .wpc__stepper .wpc__btn {
	flex: 0 0 2.5rem;
	min-width: 2.5rem;
	max-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	font-variant-numeric: tabular-nums;
}

.wpc__btn:hover {
	background: #eaeaea;
}

.wpc__btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.wpc__hint {
	font-size: 0.8rem;
	color: #666;
	margin: 0.35rem 0 0;
}

.wpc__included {
	margin-top: 2rem;
}

.wpc__included-body ul {
	margin: 0;
	padding-left: 1.25rem;
}

.wpc__summary {
	margin-top: 2rem;
	padding: 1.25rem;
	border: 1px solid #e0e0e0;
	border-radius: 0.5rem;
	background: #fafafa;
}

/* Pricing unavailable: show only the message (JS toggles .wpc__summary--pricing-unavailable) */
.wpc__summary--pricing-unavailable .wpc__h,
.wpc__summary--pricing-unavailable .wpc__total,
.wpc__summary--pricing-unavailable .wpc__breakdown,
.wpc__summary--pricing-unavailable .wpc__disclaimer {
	display: none !important;
}

.wpc__summary--pricing-unavailable .wpc__muted {
	margin: 0;
}

.wpc__total {
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.wpc__breakdown {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.95rem;
}

.wpc__breakdown li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid #eee;
}

.wpc__muted {
	color: #666;
	font-size: 0.9rem;
	margin: 0 0 0.75rem;
}

.wpc__disclaimer {
	font-size: 0.8rem;
	color: #666;
	margin: 0;
	line-height: 1.4;
}