/*
 * AH ROAS Calculator. White slider card next to a navy result panel; one column on tablets.
 * Bars, amounts and sliders read left to right in both languages (numbers are LTR).
 */
.ah-calc {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	overflow: hidden;
	border: 1px solid var(--ah-card-line);
	border-radius: var(--ah-r-lg);
	background: var(--ah-card);
	color: var(--ah-ink);
	font-family: var(--ah-f-body);
	font-size: 17px;
	line-height: 1.75;
	box-shadow: var(--ah-shadow-hi);
}

/* sliders */
.ah-calc .ah-calc__form {
	display: grid;
	align-content: start;
	gap: 22px;
	margin: 0;
	padding: 30px;
	border-inline-end: 1px solid var(--ah-line);
}
.ah-calc .ah-calc__fld { display: grid; gap: 8px; }
.ah-calc .ah-calc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.ah-calc .ah-calc__label {
	margin: 0;
	padding: 0;
	font-family: var(--ah-f-body);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--ah-ink);
	cursor: pointer;
}
.ah-calc .ah-calc__out {
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--ah-f-mono);
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	color: var(--ah-ink-gold);
	white-space: nowrap;
}
.ah-calc .ah-calc__hint { font-size: .8rem; line-height: 1.6; color: var(--ah-soft); }

/* range: a navy fill up to the thumb (--p is set on the server and by the script) */
.ah-calc .ah-calc__range.ah-calc__range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	direction: ltr;
	cursor: pointer;
	touch-action: pan-y;
	--ah-calc-fill: linear-gradient(90deg, var(--ah-navy) 0 var(--p, 50%), var(--ah-line) var(--p, 50%) 100%);
}
.ah-calc .ah-calc__range:focus { outline: none; }
.ah-calc .ah-calc__range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--ah-calc-fill); }
.ah-calc .ah-calc__range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--ah-line); }
.ah-calc .ah-calc__range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--ah-navy); }
.ah-calc .ah-calc__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -8px;
	border: 3px solid var(--ah-paper);
	border-radius: 50%;
	background: var(--ah-navy);
	box-shadow: 0 0 0 1px var(--ah-navy), 0 6px 14px -4px rgba(9, 18, 42, .55);
	transition: transform .25s var(--ah-spring), box-shadow .25s;
}
.ah-calc .ah-calc__range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 3px solid var(--ah-paper);
	border-radius: 50%;
	background: var(--ah-navy);
	box-shadow: 0 0 0 1px var(--ah-navy), 0 6px 14px -4px rgba(9, 18, 42, .55);
	transition: transform .25s var(--ah-spring), box-shadow .25s;
}
.ah-calc .ah-calc__range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.ah-calc .ah-calc__range:hover::-moz-range-thumb { transform: scale(1.12); }
.ah-calc .ah-calc__range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.18); }
.ah-calc .ah-calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ah-navy), 0 0 0 6px rgba(197, 165, 114, .55); }
.ah-calc .ah-calc__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--ah-navy), 0 0 0 6px rgba(197, 165, 114, .55); }
.ah-calc .ah-calc__fld:focus-within .ah-calc__out { color: var(--ah-ink); }

/* result panel */
.ah-calc .ah-calc__res {
	display: grid;
	align-content: start;
	gap: 18px;
	padding: 30px;
	background: var(--ah-navy);
	color: var(--ah-on-navy);
}
.ah-calc .ah-calc__sum { display: grid; gap: 2px; }
.ah-calc .ah-calc__lbl { font-size: .85rem; line-height: 1.6; color: var(--ah-on-navy-muted); }
.ah-calc .ah-calc__big {
	justify-self: start;
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--ah-gold-hi);
}

.ah-calc .ah-calc__big span { white-space: nowrap; }
/* when the range wraps on a phone, keep both lines on the reading side of the RTL panel */
[dir="rtl"] .ah-calc .ah-calc__big { text-align: right; }
.ah-calc .ah-calc__bars { display: grid; gap: 12px; direction: ltr; }
.ah-calc .ah-calc__bar {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	font-family: var(--ah-f-mono);
	font-size: .74rem;
	line-height: 1.4;
	color: var(--ah-on-navy-muted);
}
.ah-calc .ah-calc__bname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-calc .ah-calc__track { position: relative; height: 16px; border-radius: 3px; background: rgba(255, 255, 255, .06); }
.ah-calc .ah-calc__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	border-radius: 3px;
	background: var(--ah-on-navy-muted);
	transition: width .6s var(--ah-ease), inset-inline-start .6s var(--ah-ease);
}
.ah-calc .ah-calc__bar--rev .ah-calc__fill { background: linear-gradient(90deg, var(--ah-gold), var(--ah-gold-hi)); }
.ah-calc .ah-calc__mark {
	position: absolute;
	inset-block: -5px;
	width: 2px;
	margin-inline-start: -1px;
	border-radius: 1px;
	background: #FF8D73;
	box-shadow: 0 0 10px rgba(255, 141, 115, .55);
	transition: inset-inline-start .6s var(--ah-ease);
}

.ah-calc .ah-calc__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ah-calc .ah-calc__kpi { display: grid; align-content: start; padding-top: 10px; border-top: 1px solid var(--ah-line-navy); }
.ah-calc .ah-calc__val {
	justify-self: start;
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--ah-f-mono);
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	color: var(--ah-on-navy);
	transition: color .3s;
}
.ah-calc .ah-calc__val.is-over { color: #FF8D73; }
.ah-calc .ah-calc__kpi span { font-size: .78rem; line-height: 1.55; color: var(--ah-on-navy-muted); }
.ah-calc .ah-calc__note { margin: 0; color: rgba(180, 187, 204, .78); }
.ah-calc .ah-calc__cta { margin-top: 2px; }
.ah-calc .ah-calc__cta .ah-btn:focus-visible { outline: 2px solid var(--ah-gold-hi); outline-offset: 3px; }
.ah-calc .ah-calc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ah-calc .ah-calc__fill,
	.ah-calc .ah-calc__mark,
	.ah-calc .ah-calc__val,
	.ah-calc .ah-calc__range::-webkit-slider-thumb { transition: none; }
}

@media (max-width: 1024px) {
	.ah-calc { grid-template-columns: minmax(0, 1fr); }
	.ah-calc .ah-calc__form { border-inline-end: 0; border-bottom: 1px solid var(--ah-line); }
}
@media (max-width: 767px) {
	.ah-calc { font-size: 16.5px; }
	.ah-calc .ah-calc__form,
	.ah-calc .ah-calc__res { padding: 22px 18px; }
	.ah-calc .ah-calc__range.ah-calc__range { height: 36px; }
	.ah-calc .ah-calc__range::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
	.ah-calc .ah-calc__range::-moz-range-thumb { width: 20px; height: 20px; }
	.ah-calc .ah-calc__bar { grid-template-columns: 64px minmax(0, 1fr); }
	.ah-calc .ah-calc__meta { grid-template-columns: minmax(0, 1fr); }
	.ah-calc .ah-calc__cta .ah-btn { width: 100%; justify-content: center; }
}