/*
 * Aval Pardakht price calculator.
 *
 * Underlined tabs, one horizontal strip of fields ending in the order button,
 * and the final price underneath. Everything is scoped under `.avalcalc` so it
 * can drop into any theme or Elementor page without leaking styles — and, as
 * the reset further down handles, without the theme leaking in.
 */

/*
 * Colours come from Elementor's global palette, so changing a colour in
 * «تنظیمات سراسری ← رنگ‌ها» reaches the widget without touching this file.
 * Each `var()` carries the same value as its fallback, which is what a page
 * rendered outside Elementor — or a kit whose variable names changed — falls
 * back to.
 */
.avalcalc {
	--ac-brand: var(--e-global-color-0e5283e, #2cb1a9);
	--ac-brand-ink: var(--e-global-color-4ef586b, #ffffff);
	--ac-brand-soft: var(--e-global-color-7773015, #009b8733);
	--ac-brand-deep: var(--e-global-color-96daee2, #053b3a);
	--ac-brand-hover: var(--e-global-color-d89df1f, #238e87);

	/* The order button is the darkest thing on the strip, which is what makes
	   it read as the primary action next to the lighter brand teal of the
	   tabs. Both come from the same palette. */
	--ac-cta: var(--ac-brand-deep);
	--ac-cta-hover: var(--ac-brand-hover);
	--ac-cta-ink: var(--ac-brand-ink);

	--ac-card: var(--e-global-color-4ef586b, #ffffff);
	--ac-text: var(--e-global-color-d7ad755, #2a353b);
	/* Field labels and the tab row: the deep brand rather than the body grey,
	   so the headings inside the strip belong to the palette. Remapped under
	   `--dark` below, where #053b3a on a dark field would be unreadable. */
	--ac-ink: var(--ac-brand-deep);
	--ac-muted: var(--e-global-color-1053bd6, #707e87);

	/* Tints of the brand rather than neutral grey, so the fields sit in the
	   palette instead of beside it. */
	--ac-field: #f1f7f6;
	--ac-border: #e2ecea;

	--ac-danger: #c0392b;
	--ac-shadow: 0 18px 55px var(--ac-brand-soft);
	--ac-radius: 22px;
	--ac-field-radius: 12px;

	box-sizing: border-box;
	direction: rtl;
	/* The wrapper carries no surface of its own. The tab bar and the panel are
	   each a card, the way the reference design has them — one white box
	   nested inside another white box reads as a rendering mistake. */
	background: transparent;
	color: var(--ac-text);
	font-family: inherit;
	line-height: 1.7;
	/* Reserved height: the strip must not jump when the first quote lands. */
	min-height: 230px;
}

/*
 * Dark styling is opt-in (`theme="dark"`) or follows the visitor's system when
 * asked for (`theme="auto"`). It is deliberately not the default: on a
 * light-only site a widget that turns dark because of an OS setting reads as
 * broken, not as a feature.
 */
.avalcalc--dark,
.avalcalc--auto {
	--ac-dark-card: #14201f;
	--ac-dark-text: #eef3f2;
	--ac-dark-muted: #93a3a1;
	--ac-dark-field: #1b2a29;
	--ac-dark-border: #263a38;
}

.avalcalc--dark {
	--ac-card: var(--ac-dark-card);
	--ac-text: var(--ac-dark-text);
	--ac-ink: var(--ac-dark-text);
	--ac-muted: var(--ac-dark-muted);
	--ac-field: var(--ac-dark-field);
	--ac-border: var(--ac-dark-border);
	--ac-cta: var(--ac-brand);
}

@media (prefers-color-scheme: dark) {
	.avalcalc--auto {
		--ac-card: var(--ac-dark-card);
		--ac-text: var(--ac-dark-text);
		--ac-ink: var(--ac-dark-text);
		--ac-muted: var(--ac-dark-muted);
		--ac-field: var(--ac-dark-field);
		--ac-border: var(--ac-dark-border);
		--ac-cta: var(--ac-brand);
	}
}

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

/*
 * The site's font, everywhere.
 *
 * `font-family: inherit` on the wrapper is not enough: a browser gives
 * `button`, `input` and `select` its own UI font by default, and that default
 * beats an inherited value because it is set on the element itself. Naming the
 * elements is what makes the widget read as part of the page rather than as an
 * embed.
 */
.avalcalc button,
.avalcalc input,
.avalcalc select,
.avalcalc textarea {
	font-family: inherit;
}

/*
 * Defensive reset.
 *
 * The widget lands inside a theme that already has opinions about buttons and
 * inputs, and those opinions arrive with equal specificity and sometimes win.
 * The red border and the crimson blocks over the labels were exactly that: a
 * theme focus ring and a theme `::selection` colour reaching in. These few
 * declarations are forced because they are structural rather than decorative —
 * the `--ac-*` tokens above stay the place to change how the widget looks.
 */
.avalcalc .avalcalc__control,
.avalcalc .avalcalc__tab,
.avalcalc .avalcalc__cta,
.avalcalc .avalcalc__combo-toggle,
.avalcalc .avalcalc__input,
.avalcalc .avalcalc__search {
	box-shadow: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	outline-color: var(--ac-brand) !important;
}

/* …except the selected tab, whose lift is a shadow. Stated after the blanket
   rule above, and forced for the same reason that rule is forced. */
.avalcalc .avalcalc__tab[aria-selected='true'] {
	box-shadow: var(--ac-shadow), inset 0 -3px 0 var(--ac-brand) !important;
}

.avalcalc .avalcalc__control,
.avalcalc .avalcalc__tab,
.avalcalc .avalcalc__combo-toggle {
	border-color: transparent;
}

/*
 * Interaction colours, forced.
 *
 * A theme that paints `button:hover` — red, in this one's case — wins on equal
 * specificity and turns every field crimson under the cursor. Hover and active
 * belong to the widget, so they are stated here and not left to chance.
 */
.avalcalc .avalcalc__tab:hover,
.avalcalc .avalcalc__tab:active,
.avalcalc .avalcalc__tab:focus {
	background: var(--ac-field) !important;
	border-color: var(--ac-border) !important;
	color: var(--ac-ink) !important;
}

.avalcalc .avalcalc__combo-toggle:hover,
.avalcalc .avalcalc__combo-toggle:active,
.avalcalc .avalcalc__combo-toggle:focus {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--ac-ink) !important;
}

.avalcalc .avalcalc__control:hover,
.avalcalc .avalcalc__control:active,
.avalcalc .avalcalc__control:focus {
	background: var(--ac-field) !important;
	border-color: var(--ac-border) !important;
	color: var(--ac-text) !important;
}

.avalcalc .avalcalc__option:hover,
.avalcalc .avalcalc__option:focus {
	background: var(--ac-field) !important;
	color: var(--ac-text) !important;
}

/* A button's label is not text to select. Dragging across one used to paint it
   in the theme's selection colour, which is where the crimson blocks came from. */
.avalcalc .avalcalc__control,
.avalcalc .avalcalc__tab,
.avalcalc .avalcalc__cta,
.avalcalc .avalcalc__option,
.avalcalc .avalcalc__combo-toggle {
	-webkit-user-select: none;
	user-select: none;
}

.avalcalc ::selection {
	background: var(--ac-brand-soft);
	color: var(--ac-text);
}

.avalcalc .avalcalc__title {
	margin: 0 0 1.25rem;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
}

/* --------------------------------------------------------------------- *
 * Tabs
 * --------------------------------------------------------------------- */

.avalcalc .avalcalc__tabs {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 0.25rem;
	margin-bottom: 1.25rem;
	padding: 20px;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--ac-card);
	border: 1px solid var(--ac-brand-soft);
	border-radius: var(--ac-radius);
	box-shadow: var(--ac-shadow);
}

.avalcalc .avalcalc__tabs::-webkit-scrollbar {
	display: none;
}

.avalcalc .avalcalc__tab {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px;
	/* Square and transparent, so the row reads as a set of tabs rather than a
	   set of chips: only the selected one is painted, and it is the tint that
	   marks it, not a shape every tab shares.
	   `background: none` is stated rather than left out — a `<button>` with no
	   background of its own falls back to the UA's `buttonface` grey, which is
	   the one thing this must not be. */
	border: 1px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--ac-ink);
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * The selected tab is the only one painted: a field-tinted fill, black bold
 * label, and the brand underline.
 *
 * That underline is the second shadow layer — an inset one — rather than a
 * border, because a 3px bottom border would move the whole row by three pixels
 * the moment a tab is picked. Drawn as a shadow it costs no layout at all.
 */
.avalcalc .avalcalc__tab[aria-selected='true'],
.avalcalc .avalcalc__tab[aria-selected='true']:hover,
.avalcalc .avalcalc__tab[aria-selected='true']:focus {
	border-color: transparent;
	/* Forced, and matched on `:hover`/`:focus` too, because the interaction
	   block further up carries `!important` — without this, moving the cursor
	   over the tab that is already selected repainted its label. */
	background: var(--ac-field) !important;
	color: #000 !important;
	font-weight: 700;
}

/* --------------------------------------------------------------------- *
 * The field strip
 * --------------------------------------------------------------------- */

.avalcalc .avalcalc__panel {
	padding: 20px;
	background: var(--ac-card);
	border: 1px solid var(--ac-brand-soft);
	border-radius: var(--ac-radius);
	box-shadow: var(--ac-shadow);
}

.avalcalc .avalcalc__row {
	display: flex;
	align-items: stretch;
	/* Every field carries a real flex-basis below, so when the row runs out of
	   room the fields wrap onto a second line instead of all being squeezed.
	   The wrap point falls out of the bases themselves — no breakpoint to keep
	   in sync with the field count, which changes per service. */
	flex-wrap: wrap;
	gap: 0.75rem;
}

/*
 * The strip is sized by what each field actually has to hold.
 *
 * A basis of 0 across the board — what this was — shares the row equally, and
 * equal is wrong here: «تعداد» holds «۱» and «نوع خدمات» holds a plan name
 * that runs to two lines, so an equal split starves the one field that needs
 * room and hands the space to the one that does not.
 *
 * `flex-grow` sets who takes the slack, `flex-basis` sets where the row gives
 * up and wraps.
 */
.avalcalc .avalcalc__field {
	position: relative;
	flex: 1 1 11rem;
	min-width: 0;
}

/* The widest text on the strip: a service name, and the row's anchor. */
.avalcalc .avalcalc__field[data-field='service'] {
	flex: 1.4 1 16rem;
}

/* Plan names are the longest single string the widget renders. */
.avalcalc .avalcalc__field[data-field='plan'] {
	flex: 1.2 1 14rem;
}

/* A single digit. It should never take space from the two beside it. */
.avalcalc .avalcalc__field[data-field='qty'] {
	flex: 0 1 7rem;
}

.avalcalc .avalcalc__dynamic {
	display: contents;
}

/* The grey box. Label on the right, value on the left —
   one shape for both the dropdowns and the text inputs, so the strip reads as
   a single control rather than a form. */
.avalcalc .avalcalc__control {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	/* Without this the box refuses to shrink below the width of its own text,
	   which is how a long plan name pushed the whole field out over the order
	   button instead of wrapping inside it. */
	min-width: 0;
	min-height: 64px;
	padding: 0.7rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--ac-field-radius);
	background: var(--ac-field);
	color: var(--ac-text);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.avalcalc .avalcalc__control:hover {
	border-color: var(--ac-border);
}

.avalcalc .avalcalc__field.is-open .avalcalc__control {
	border-color: var(--ac-brand);
}

.avalcalc .avalcalc__label {
	flex: 0 0 auto;
	color: var(--ac-ink);
	font-weight: 700;
	font-size: 0.92rem;
	white-space: nowrap;
}

.avalcalc .avalcalc__value {
	flex: 1 1 auto;
	min-width: 0;
	/* `start`, not `end`: the value sits against the label rather than against
	   the far edge of the box. Written logically to match the rest of the rule
	   — and it is exactly `right` either way, because this element pins its own
	   `direction: rtl` a few lines below. */
	text-align: start;
	color: var(--ac-muted);
	font-size: 0.92rem;
	/* A plan name like «چت جی پی تی بیزنس دو کاربره — ۶۳ دلار ویزا و مستر» is
	   longer than any box it will ever sit in, so it wraps to two lines and
	   only then gives up with an ellipsis. Kept to two so the strip's height
	   stays predictable, and `anywhere` so a long unbroken token breaks rather
	   than widening the field over the order button. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.45;
	direction: rtl;
	margin-inline-start: auto;
	padding-inline-start: 0.75rem;
}

.avalcalc .avalcalc__input {
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--ac-text);
	padding: 0;
	width: 100%;
}

.avalcalc .avalcalc__input:focus {
	outline: none;
}

.avalcalc .avalcalc__cta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	min-height: 64px;
	padding: 0.7rem 1.25rem;
	border-radius: var(--ac-field-radius);
	background: var(--ac-cta);
	/* Forced: a theme's link colour otherwise repaints the label, and this one
	   has to stay legible against the dark button. */
	color: var(--ac-cta-ink) !important;
	-webkit-text-fill-color: var(--ac-cta-ink);
	font-weight: 700;
	font-size: 0.95rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.avalcalc .avalcalc__cta:hover,
.avalcalc .avalcalc__cta:focus {
	background: var(--ac-cta-hover);
	color: var(--ac-cta-ink) !important;
}

/* --------------------------------------------------------------------- *
 * Amount + currency, in one box
 *
 * The label sits at the start, the number takes the middle, and the currency
 * toggle is pinned to the far end behind a divider — one field answering
 * "how much of what" instead of two.
 * --------------------------------------------------------------------- */

.avalcalc .avalcalc__control--combo {
	cursor: text;
}

.avalcalc .avalcalc__control--combo .avalcalc__input {
	flex: 1 1 auto;
	min-width: 3ch;
	text-align: start;
	direction: ltr;
}

.avalcalc .avalcalc__combo-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 55%;
	margin-inline-start: auto;
	padding: 0.35rem 0 0.35rem 0.75rem;
	border: 0;
	border-inline-start: 1px solid var(--ac-border);
	background: transparent;
	color: var(--ac-text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.avalcalc .avalcalc__combo-value {
	color: var(--ac-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------------------------- *
 * Dropdown menu
 * --------------------------------------------------------------------- */

.avalcalc .avalcalc__menu {
	position: absolute;
	z-index: 20;
	inset-inline-start: 0;
	inset-inline-end: 0;
	top: calc(100% + 0.5rem);
	padding: 0.75rem;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-field-radius);
	background: var(--ac-card);
	box-shadow: 0 18px 40px rgba(18, 26, 48, 0.12);
}

.avalcalc--dark .avalcalc__menu {
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.avalcalc .avalcalc__search {
	width: 100%;
	min-height: 46px;
	margin-bottom: 0.5rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--ac-border);
	border-radius: 10px;
	background: var(--ac-card);
	color: var(--ac-text);
	font: inherit;
	font-size: 0.9rem;
}

.avalcalc .avalcalc__search[hidden] {
	display: none;
}

.avalcalc .avalcalc__options {
	max-height: 260px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.avalcalc .avalcalc__option {
	padding: 0.7rem 0.9rem;
	border-radius: 8px;
	font-size: 0.92rem;
	cursor: pointer;
}

.avalcalc .avalcalc__option:hover,
.avalcalc .avalcalc__option:focus {
	background: var(--ac-field);
	outline: none;
}

.avalcalc .avalcalc__option.is-selected {
	background: var(--ac-brand-soft);
	color: var(--ac-brand);
	font-weight: 600;
}

.avalcalc .avalcalc__option[hidden] {
	display: none;
}

/* --------------------------------------------------------------------- *
 * Shimmer
 *
 * Shown while a request is in flight. The placeholder takes the shape and the
 * height of whatever it stands in for, so nothing moves when the real content
 * replaces it.
 * --------------------------------------------------------------------- */

.avalcalc .avalcalc__shimmer {
	display: block;
	border-radius: 8px;
	background: linear-gradient(
		90deg,
		var(--ac-border) 0%,
		var(--ac-field) 45%,
		var(--ac-border) 90%
	);
	background-size: 300% 100%;
	animation: avalcalc-shimmer 1.3s ease-in-out infinite;
}

.avalcalc .avalcalc__control .avalcalc__shimmer {
	width: 100%;
	height: 1.1rem;
}

.avalcalc .avalcalc__shimmer--total {
	width: 9rem;
	height: 1.1rem;
	vertical-align: -0.15rem;
}

@keyframes avalcalc-shimmer {
	from { background-position: 300% 0; }
	to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.avalcalc .avalcalc__shimmer {
		animation: none;
		background: var(--ac-border);
	}
}

/* --------------------------------------------------------------------- *
 * Final price
 * --------------------------------------------------------------------- */

.avalcalc .avalcalc__final {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 1.1rem 0 0;
	transition: opacity 0.15s ease;
}

.avalcalc .avalcalc__final.is-busy {
	opacity: 0.5;
}

.avalcalc .avalcalc__final-label {
	color: var(--ac-text);
	font-size: 0.95rem;
}

.avalcalc .avalcalc__final-value {
	font-size: 1.05rem;
	font-weight: 700;
}

.avalcalc .avalcalc__final.is-error .avalcalc__final-value {
	color: var(--ac-danger);
	font-size: 0.9rem;
	font-weight: 400;
}

.avalcalc .avalcalc__note {
	margin: 0.75rem 0 0;
	font-size: 0.78rem;
	color: var(--ac-muted);
}

/* --------------------------------------------------------------------- *
 * Optional crawlable service list
 * --------------------------------------------------------------------- */

.avalcalc .avalcalc__links {
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--ac-border);
}

.avalcalc .avalcalc__links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.avalcalc .avalcalc__links a {
	font-size: 0.82rem;
	color: var(--ac-muted);
	text-decoration: none;
}

.avalcalc .avalcalc__links a:hover {
	color: var(--ac-brand);
}

.avalcalc--down {
	padding: 1.25rem;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius);
	color: var(--ac-muted);
}

/* --------------------------------------------------------------------- *
 * Focus
 * --------------------------------------------------------------------- */

.avalcalc .avalcalc__tab:focus-visible,
.avalcalc .avalcalc__control:focus-visible,
.avalcalc .avalcalc__combo-toggle:focus-visible,
.avalcalc .avalcalc__search:focus-visible,
.avalcalc .avalcalc__option:focus-visible {
	outline: 2px solid var(--ac-brand);
	outline-offset: 2px;
}

.avalcalc .avalcalc__cta:focus-visible {
	outline: 2px solid var(--ac-cta);
	outline-offset: 2px;
}

.avalcalc .avalcalc__control--input:focus-within {
	border-color: var(--ac-brand);
}

/* --------------------------------------------------------------------- *
 * Narrow screens
 *
 * The strip becomes a stack. Below the tablet breakpoint a seven-field row
 * would either overflow the page or squeeze each label past legibility.
 * --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- *
 * Narrow screens
 *
 * The strip becomes a stack and the tabs wrap into a grid of pills. Underlined
 * tabs are a single-row idea: once they wrap onto three rows the underlines
 * read as a list of headings rather than as one control, so on narrow screens
 * each tab goes back to being a filled pill.
 * --------------------------------------------------------------------- */

@media (max-width: 900px) {
	.avalcalc .avalcalc__tabs,
	.avalcalc .avalcalc__panel {
		padding: 14px;
	}

	.avalcalc .avalcalc__tabs {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		margin-bottom: 0.9rem;
		overflow-x: visible;
	}

	.avalcalc .avalcalc__tab {
		/* Two per row, and an odd last one centres itself. */
		flex: 1 1 calc(50% - 0.5rem);
		min-width: calc(50% - 0.5rem);
		padding: 0;
		border-radius: 1rem;
		font-size: 12px;
		white-space: normal;
		text-align: center;
	}

	/* On a phone the selected tab fills with the brand instead of carrying an
	   underline — at this size two pills a row, one of them tinted, is easier
	   to read at a glance than a three-pixel line. */
	.avalcalc .avalcalc__tab[aria-selected='true'],
	.avalcalc .avalcalc__tab[aria-selected='true']:hover,
	.avalcalc .avalcalc__tab[aria-selected='true']:focus {
		background: var(--ac-brand) !important;
		color: var(--ac-brand-ink) !important;
		box-shadow: var(--ac-shadow) !important;
	}

	.avalcalc .avalcalc__row {
		flex-direction: column;
		gap: 0.6rem;
	}

	/*
	 * The bases above have to be given back here.
	 *
	 * `flex-basis` is measured along the main axis, and the main axis just
	 * became vertical — so the 16rem that makes «نوع خدمات» the widest field
	 * on a desktop row would make it a 256-pixel-tall box on a phone. Each
	 * field goes back to its content height; the column gives them their
	 * width already.
	 */
	.avalcalc .avalcalc__field,
	.avalcalc .avalcalc__field[data-field='service'],
	.avalcalc .avalcalc__field[data-field='plan'],
	.avalcalc .avalcalc__field[data-field='qty'] {
		flex: 0 0 auto;
	}

	.avalcalc .avalcalc__dynamic {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.avalcalc .avalcalc__control,
	.avalcalc .avalcalc__cta {
		min-height: 60px;
	}

	.avalcalc .avalcalc__cta {
		min-width: 0;
		width: 100%;
	}

	/*
	 * The two halves go to opposite edges: «قابل پرداخت نهایی» stays against
	 * the right, the number and its unit against the left.
	 *
	 * `space-between` rather than a margin, so it reads the same way in either
	 * direction — the label is simply first in the source and the value last,
	 * and the row puts first at the start edge and last at the end edge.
	 */
	.avalcalc .avalcalc__final {
		justify-content: space-between;
		gap: 0.5rem;
		margin-top: 0.9rem;
	}

	/* The number must not be broken across lines to make room for the label. */
	.avalcalc .avalcalc__final-value {
		white-space: nowrap;
	}
}

/* =========================================================
 * Glassmorphism - Aval Calculator
 * ========================================================= */

.avalcalc .avalcalc__tabs,
.avalcalc .avalcalc__panel {
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow:
        0 18px 45px rgba(5, 59, 58, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.avalcalc .avalcalc__tabs,
.avalcalc .avalcalc__panel {
    border-radius: 22px;
}

.avalcalc .avalcalc__control,
.avalcalc .avalcalc__control--input {
    background: rgba(241, 247, 246, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

.avalcalc .avalcalc__control:hover,
.avalcalc .avalcalc__control:focus,
.avalcalc .avalcalc__field.is-open .avalcalc__control {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(44, 177, 169, 0.22) !important;
}

.avalcalc .avalcalc__menu {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 38px rgba(5, 59, 58, 0.12) !important;
}

.avalcalc .avalcalc__cta {
    background: var(--ac-cta) !important;
    color: var(--ac-cta-ink) !important;
}

.avalcalc .avalcalc__final {
    background: transparent;
}

/* Strong glass effect */
.avalcalc .avalcalc__tabs,
.avalcalc .avalcalc__panel {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow:
        0 20px 50px rgba(5, 59, 58, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.avalcalc .avalcalc__control,
.avalcalc .avalcalc__control--input {
    background: rgba(255, 255, 255, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
}

.avalcalc .avalcalc__control:hover,
.avalcalc .avalcalc__control:focus,
.avalcalc .avalcalc__field.is-open .avalcalc__control {
    background: rgba(255, 255, 255, 0.48) !important;
}

.avalcalc .avalcalc__menu {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

/* Fix calculator dropdown stacking over next section */
.avalcalc,
.avalcalc__panel,
.avalcalc__row,
.avalcalc__field,
.avalcalc__control {
    position: relative;
    overflow: visible !important;
}

.avalcalc {
    z-index: 1000 !important;
}

.avalcalc__panel {
    z-index: 1000 !important;
}

.avalcalc__menu {
    position: absolute !important;
    z-index: 99999 !important;
}