/*
 * The budget price configurator and the support packages under it.
 *
 * Two columns on a desktop: the choices on the left, what they add up to on
 * the right, held in view while the choosing happens. One column on a phone,
 * with the running total after the controls rather than before them.
 */

.sx-budget__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 28px;
	margin-top: 32px;
}

@media ( min-width: 901px ) {
	.sx-budget__grid {
		grid-template-columns: minmax( 0, 1fr ) 340px;
		gap: 40px;
		align-items: start;
	}
}

/* ---- The choices ---- */

.sx-budget__options {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sx-budget__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sx-budget__label {
	font-size: 0.9375rem;
	font-weight: 600;
}

.sx-budget__select,
.sx-budget__number {
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-btn );
	background: var( --sx-white );
	color: var( --sx-text );
	font-family: inherit;
	font-size: 1rem;
}

/*
 * The count sits beside its own name rather than under it, at every width.
 *
 * On its own line a 120px box left most of that line empty, and widening it to
 * fill the line was worse — a field stretched to hold two digits. The hint is
 * pushed to a line of its own by giving it the full row.
 */
.sx-budget__field--qty {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 2px;
}

.sx-budget__field--qty .sx-budget__label {
	grid-column: 1;
	grid-row: 1;
}

/* Under the name it belongs to rather than across the whole row: "1 500 ₴ за
   кожен" explains the field above it, and a line of small grey text running
   the full width read as a note about the section. */
.sx-budget__field--qty .sx-budget__hint {
	grid-column: 1;
	grid-row: 2;
}

/* Beside both of them, centred against the pair. */
.sx-budget__field--qty .sx-stepper {
	grid-column: 2;
	grid-row: 1 / span 2;
}

/*
 * Once there is room for two, the count and the extension share a row.
 *
 * Both are short — a name with a small box after it, and a checkbox with a
 * sentence — and each on its own full-width line left a band of empty page
 * beside it. The selects above stay whole: their options are long enough to
 * need the width.
 *
 * 600px is where the pair still reads as two things rather than two columns
 * squeezed together; below it they go back to one under the other.
 */
@media ( min-width: 600px ) {
	.sx-budget__options {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 16px;
		align-items: start;
	}

	.sx-budget__field:not( .sx-budget__field--qty ) {
		grid-column: 1 / -1;
	}
}

.sx-budget__select:focus-visible,
.sx-budget__number:focus-visible,
.sx-budget__check input:focus-visible {
	outline: 2px solid var( --sx-brand );
	outline-offset: 2px;
}

.sx-budget__hint {
	color: var( --sx-text-secondary );
	font-size: 0.875rem;
	line-height: 1.5;
}

.sx-budget__field--qty .sx-budget__hint {
	margin-top: -2px;
}

/*
 * The box and its name on the first line, the sentence under both of them.
 *
 * As a flex row the whole text block sat in the second column, so every line
 * of the description carried the checkbox's own indent and the space beneath
 * the box stayed empty — a column of nothing about thirty pixels wide running
 * down the card, at the very place where the text was running out of room.
 * Only the name has to line up with the box; the sentence has no reason to.
 *
 * display:contents on the wrapper is what makes this possible without touching
 * the markup: it takes the wrapper out of the layout and hands the grid its two
 * children directly, so the title and the sentence can be placed separately.
 */
.sx-budget__check {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	column-gap: 12px;
	row-gap: 4px;
	align-items: start;
	padding: 16px;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	cursor: pointer;
}

.sx-budget__check > span {
	display: contents;
}

.sx-budget__check input {
	grid-column: 1;
	grid-row: 1;
	/* Optical, not geometric: aligned to the cap height of the name beside it
	   rather than to the top of its line box. */
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var( --sx-brand-text );
}

.sx-budget__check-title {
	grid-column: 2;
	grid-row: 1;
	display: block;
	font-weight: 600;
}

.sx-budget__check .sx-budget__hint {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* ---- What it comes to ---- */

.sx-budget__summary {
	padding: 24px;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	background: var( --sx-surface );
}

@media ( min-width: 901px ) {
	.sx-budget__summary {
		position: sticky;
		top: calc( var( --sx-sticky-top ) + 12px );
	}
}

.sx-budget__summary-title {
	margin: 0 0 14px;
	font-size: 1rem;
	font-weight: 600;
}

.sx-budget__lines {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sx-budget__line {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.875rem;
	line-height: 1.4;
}

.sx-budget__line b {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.sx-budget__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 14px;
	border-top: 1px solid var( --sx-border );
	font-size: 1.0625rem;
}

.sx-budget__total b {
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.sx-budget__add {
	width: 100%;
	min-height: 48px;
	margin-top: 18px;
	border: 0;
	border-radius: var( --sx-radius-btn );
	background: var( --sx-brand );
	color: var( --sx-white );
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var( --sx-transition-fast ) var( --sx-ease );
}

.sx-budget__add:hover,
.sx-budget__add.is-added {
	background: var( --sx-brand-hover );
}

.sx-budget__note {
	margin: 14px 0 0;
	color: var( --sx-text-secondary );
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* ---- Support packages ----
 *
 * The cards themselves are the tariff page's: pricing-plans.css draws them,
 * and only what this screen adds on top lives here — the term selector and
 * the line that says what the chosen term comes to.
 */

.sx-budget-support__term {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	margin: 16px 0 4px;
	color: var( --sx-text-secondary );
	font-size: 0.875rem;
}

.sx-budget-support__term select {
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-btn );
	background: var( --sx-white );
	color: var( --sx-text );
	font-family: inherit;
	font-size: 0.9375rem;
}

.sx-budget-support__term select:disabled {
	opacity: 0.55;
}

/*
 * The reset for button.softextheme-pricing__cta used to live here. It has
 * moved to pricing-plans.css, next to the rules it completes: the plans block
 * itself renders a <button> whenever a plan has no URL, so a page that used
 * the block without also loading this stylesheet got the browser's own bevel.
 * That is exactly what happened on /poslugy/kompleksnyj-suprovid/.
 */

.sx-budget-support__sum {
	margin: 10px 0 0;
	color: var( --sx-text );
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

.sx-budget-support__extra {
	margin: 20px 0 0;
	max-width: 70ch;
	color: var( --sx-text-secondary );
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ---- On a phone ----

   Nothing here overflowed; the block was simply taller than the screen — 941px
   of it against 844 — so choosing an option and reading what it cost were two
   different views. Measured, the height went on spacing rather than on
   anything anyone reads, so this takes the spacing back and leaves every word
   and control where it was.

   The number field stops being the one narrow control in a column of full
   width ones. Two digits never needed 350px, but a lone 120px box in a stack
   of wide ones reads as something half filled in, and the ragged right edge is
   the first thing the eye finds in an otherwise tidy column. */

@media ( max-width: 900px ) {
	.sx-budget__grid {
		gap: 20px;
		margin-top: 24px;
	}

	.sx-budget__options {
		gap: 14px;
	}

	.sx-budget__field {
		gap: 6px;
	}


	/* The sentence beside the checkbox is the tallest thing in the column.
	   Tighter leading and a little less padding take 20px off it without
	   touching a word of it. */
	.sx-budget__check {
		padding: 14px;
	}

	.sx-budget__check-text {
		line-height: 1.45;
	}

	.sx-budget__summary {
		padding: 20px;
	}
}