/*
 * Colors/radii below mirror Taybl's brand tokens (packages/ui/src/tokens.css)
 * as sensible defaults - they're not the source of truth for a live page
 * though. The Elementor widget's Style tab (class-widget-price-calculator.php)
 * generates its own higher-specificity rules for color, typography, dropdown
 * padding, and container background, so anything set there overrides what's
 * written here. Font falls back to system sans if Figtree isn't loaded on
 * the marketing site - it doesn't self-host the font here to avoid double
 * loading if the theme already does.
 */
.taybl-price-calc {
	--tpc-terracotta: #fa815e;
	--tpc-terracotta-dark: #b8623f;
	--tpc-ember-text: #8f4a2e;
	--tpc-cream-50: #fffdfa;
	--tpc-cream-100: #fbf6ed;
	--tpc-cream-200: #f3ead9;
	--tpc-ink: #2b2620;
	--tpc-border: #e8dfd0;
	--tpc-ok: #4f9d69;
	--tpc-radius-card: 0.875rem;
	--tpc-radius-field: 0.625rem;

	container-type: inline-size;
	container-name: taybl-price-calc;
	width: 100%;
	max-width: 100%;
	padding: 2.5rem 1.5rem;
	background: var(--tpc-cream-100);
	border: 1px solid var(--tpc-border);
	border-radius: var(--tpc-radius-card);
	font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
	color: var(--tpc-ink);
	text-align: center;
	box-sizing: border-box;
}

.taybl-price-calc *,
.taybl-price-calc *::before,
.taybl-price-calc *::after {
	box-sizing: inherit;
}

.taybl-price-calc__heading {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.taybl-price-calc__subheading {
	margin: 0 auto 2rem;
	max-width: 40em;
	color: var(--tpc-ember-text);
	font-size: 1rem;
}

.taybl-price-calc__modules {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
	text-align: left;
}

/*
 * Reflows on the widget's own rendered width (via container-type: inline-size
 * above), not the viewport - it can sit in a narrow column on a wide desktop
 * screen and still stack correctly. @supports guards a viewport-based
 * fallback for browsers without container query support.
 */
@container taybl-price-calc (max-width: 800px) {
	.taybl-price-calc__modules {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container taybl-price-calc (max-width: 480px) {
	.taybl-price-calc__modules {
		grid-template-columns: 1fr;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 800px) {
		.taybl-price-calc__modules {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 480px) {
		.taybl-price-calc__modules {
			grid-template-columns: 1fr;
		}
	}
}

.taybl-price-calc__label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 0.4rem;
	text-align: center;
}

/*
 * A native <select>'s open list can't be styled cross-browser, so the
 * dropdown is a custom button+listbox combobox instead (see render() and
 * price-calculator.js). `.taybl-price-calc__select-wrap` is now that
 * trigger <button>, and `.taybl-price-calc__select` is a plain <span>
 * holding its text - both class names carry over unchanged from the old
 * native-select markup so the Elementor Style tab's existing Background/
 * Border/Text Color/Padding controls (class-widget-price-calculator.php)
 * keep applying without needing new selectors.
 */
.taybl-price-calc__combobox {
	position: relative;
}

.taybl-price-calc__select-wrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	background: #ffffff;
	border: 1px solid var(--tpc-border);
	border-radius: var(--tpc-radius-field);
	padding: 0 0.75rem;
	font: inherit;
	cursor: pointer;
	transition: border-color 160ms ease-out;
}

.taybl-price-calc__select-wrap:focus-visible,
.taybl-price-calc__select-wrap[aria-expanded="true"] {
	outline: none;
	border-color: var(--tpc-terracotta);
}

.taybl-price-calc__logo {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	background: var(--tpc-cream-200);
	color: var(--tpc-ember-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
	overflow: hidden;
	margin-right: 0.4rem;
}

.taybl-price-calc__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.taybl-price-calc__select {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.95rem 0.5rem 0.95rem 0.25rem;
	font: inherit;
	font-size: 0.9rem;
	color: var(--tpc-ink);
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.taybl-price-calc__arrow {
	flex: 0 0 auto;
	width: 10px;
	height: 6px;
	margin-left: 0.25rem;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238f4a2e'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 160ms ease-out;
}

.taybl-price-calc__select-wrap[aria-expanded="true"] .taybl-price-calc__arrow {
	transform: rotate(180deg);
}

.taybl-price-calc__listbox {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.35rem);
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	max-height: none;
	overflow-y: visible;
	background: #ffffff;
	border: 1px solid var(--tpc-border);
	border-radius: var(--tpc-radius-field);
	box-shadow: 0 12px 28px rgba(43, 38, 32, 0.14);
}

.taybl-price-calc__listbox[hidden] {
	display: none;
}

.taybl-price-calc__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.6rem;
	border-radius: calc(var(--tpc-radius-field) - 0.2rem);
	font-size: 0.9rem;
	color: var(--tpc-ink);
	cursor: pointer;
	scroll-margin: 0.35rem;
}

.taybl-price-calc__option-logo {
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 999px;
	background: var(--tpc-cream-200);
	color: var(--tpc-ember-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6rem;
	font-weight: 700;
	overflow: hidden;
}

.taybl-price-calc__option-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.taybl-price-calc__option[aria-selected="true"] {
	background: var(--tpc-cream-100);
	font-weight: 600;
}

.taybl-price-calc__option:hover,
.taybl-price-calc__option[data-taybl-active="true"] {
	background: var(--tpc-cream-200);
}

.taybl-price-calc__module-note {
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	color: var(--tpc-ember-text);
}

.taybl-price-calc__results {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@container taybl-price-calc (max-width: 640px) {
	.taybl-price-calc__results {
		grid-template-columns: 1fr;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.taybl-price-calc__results {
			grid-template-columns: 1fr;
		}
	}
}

.taybl-price-calc__result {
	background: var(--tpc-cream-50);
	border: 1px solid var(--tpc-border);
	border-radius: var(--tpc-radius-card);
	padding: 1.5rem 1rem;
}

.taybl-price-calc__result--highlight {
	background: var(--tpc-terracotta);
	border-color: var(--tpc-terracotta);
}

.taybl-price-calc__result-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.taybl-price-calc__result--highlight .taybl-price-calc__result-label,
.taybl-price-calc__result--highlight .taybl-price-calc__result-caption {
	color: var(--tpc-cream-50);
}

.taybl-price-calc__result-value {
	display: block;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	transition: opacity 160ms ease-out;
}

.taybl-price-calc__result--highlight .taybl-price-calc__result-value {
	color: var(--tpc-cream-50);
}

.taybl-price-calc__result-value--saving {
	color: var(--tpc-ok);
}

.taybl-price-calc__result-caption {
	display: block;
	font-size: 0.75rem;
	color: var(--tpc-ember-text);
	margin-top: 0.25rem;
}