/*
 * Shared "Пошаговый калькулятор" component — used by /solutions/
 * (template-parts/solutions/calculator.php) and by any page using
 * page-solution-object.php (e.g. /solutions/hotels/). Split out of
 * solutions.css so pages using page-solution-object.php don't have to
 * load the rest of that page-specific stylesheet just for the
 * calculator. Loaded via is_page('solutions') OR
 * is_page_template('page-solution-object.php') (inc/enqueue.php).
 * Rules/media queries below are unchanged, only moved verbatim.
 */

/* ---------------------------------------------------------------------
 * Calculator — «Пошаговый калькулятор». Dark panel shell, form column
 * (~68%) + persistent summary column (~32%) on desktop. Before
 * .is-enhanced is added by assets/js/solutions-calculator.js, Back/Next
 * stay hidden (base HTML has no JS to drive them) and every step/the
 * real Submit button are visible — see calculator.php's docblock.
 * ------------------------------------------------------------------- */

.solutions-calculator {
	padding-block: var(--ark-space-section-lg);
	background: var(--ark-bg-900);
	/* Same convention as contacts.css/internal-pages.css — clears the
	   sticky Header (76px) plus breathing room when the success screen
	   scrolls this section to the top of the viewport. */
	scroll-margin-top: 96px;
}

.solutions-calculator__header {
	margin-bottom: clamp(24px, 2.6vw, 32px);
}

.solutions-calculator__eyebrow {
	margin: 0 0 10px;
	font-size: var(--ark-fs-meta);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ark-border-titanium);
}

.solutions-calculator__title {
	margin: 0 0 12px;
	font-size: var(--ark-fs-h2);
	max-width: 30ch;
	color: var(--ark-text-primary);
}

.solutions-calculator__description {
	margin: 0 0 6px;
	max-width: 64ch;
	color: var(--ark-text-secondary);
}

.solutions-calculator__helper-text {
	margin: 0;
	max-width: 64ch;
	font-size: 0.88rem;
	color: var(--ark-text-muted);
}

.solutions-calculator__shell {
	position: relative;
	background: var(--ark-surface-650);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-md);
	padding: clamp(20px, 2.6vw, 32px);
	overflow: hidden;
}

/* Thin Titanium Bronze line across the top — reads as a self-contained
   premium work module, not a plain content panel. */
.solutions-calculator__shell::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ark-border-titanium);
}

/* Progress */

.solutions-calculator__progress {
	margin-bottom: clamp(20px, 2.4vw, 28px);
}

.solutions-calculator__progress-mobile {
	display: none;
	flex-direction: column;
	gap: 8px;
}

.solutions-calculator__progress-mobile-label {
	font-size: 0.85rem;
	color: var(--ark-text-secondary);
}

.solutions-calculator__progress-bar {
	display: block;
	height: 3px;
	background: var(--ark-border-soft);
	border-radius: 2px;
	overflow: hidden;
}

.solutions-calculator__progress-bar-fill {
	display: block;
	height: 100%;
	background: var(--ark-border-titanium);
	width: 16.666%;
	transition: width 250ms var(--ark-ease);
}

.solutions-calculator__progress-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.solutions-calculator__progress-item {
	flex: 1 1 0;
}

.solutions-calculator__progress-button {
	appearance: none;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 8px;
	background: transparent;
	border: none;
	border-top: 2px solid var(--ark-border-soft);
	color: var(--ark-text-muted);
	text-align: left;
	cursor: pointer;
	transition: border-color 200ms var(--ark-ease), color 200ms var(--ark-ease);
}

.solutions-calculator__progress-button:disabled,
.solutions-calculator__progress-button--done {
	cursor: default;
}

.solutions-calculator__progress-button:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 2px;
}

.solutions-calculator__progress-item.is-active .solutions-calculator__progress-button,
.solutions-calculator__progress-item.is-complete .solutions-calculator__progress-button {
	border-top-color: var(--ark-border-titanium);
	color: var(--ark-text-primary);
}

.solutions-calculator__progress-index {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.solutions-calculator__progress-label {
	font-size: 0.78rem;
	line-height: 1.3;
}

/* Body layout */

/* .body and .success are never both in the DOM flow at once (plain
   [hidden] toggling, no visibility/inert overlay crutch) — only one
   panel exists at a time, so nothing forces a taller hidden form to
   keep rendering just to hold the shell's height open. Instead, right
   before switching to the success screen, showSuccess() in
   assets/js/solutions-calculator.js measures the stage's current
   rendered height and writes it into --calc-stage-min-h; min-block-size
   below reads that variable, so the shell doesn't collapse/jump even
   though .success is naturally shorter than Step 6. No px is hardcoded
   here — the value only ever comes from a live measurement. */
.solutions-calculator__stage {
	position: relative;
	min-block-size: var( --calc-stage-min-h, auto );
}

/* Root cause of a previous bug where the success screen appeared
   *below* Step 6 instead of replacing it: this class set `display:
   grid` unconditionally. An author-stylesheet declaration always wins
   over the UA [hidden]{display:none} rule regardless of matching
   specificity, so setting bodyEl.hidden = true in JS had zero visual
   effect. `display` must only ever apply :not([hidden]). */
.solutions-calculator__body {
	grid-template-columns: minmax(0, 0.68fr) minmax(240px, 0.32fr);
	gap: clamp(20px, 2.4vw, 32px);
	align-items: start;
}

.solutions-calculator__body:not([hidden]) {
	display: grid;
}

/* Success reuses the exact same 68/32 column split as the form/summary
   pair so nothing shifts in width when Step 6 hands off to "07 —
   Готово": left = eyebrow/H2/text/CTA, right = the same
   .solutions-calculator__summary card, just filled with the final
   values instead of live placeholders. */
.solutions-calculator__success {
	grid-template-columns: minmax(0, 0.68fr) minmax(240px, 0.32fr);
	gap: clamp(20px, 2.4vw, 32px);
	align-items: start;
}

.solutions-calculator__success:not([hidden]) {
	display: grid;
}

/* Tablet/mobile: a measured desktop stage height would leave a large
   empty gap once both .body and .success drop to a single column —
   never preserve it below the desktop breakpoint. */
@media (max-width: 1023px) {
	.solutions-calculator__stage {
		min-block-size: auto;
	}
}

.solutions-calculator__status {
	font-size: 0.88rem;
	color: var(--ark-text-secondary);
}

.solutions-calculator__status:empty {
	display: none;
}

/* Steps */

.solutions-calculator__step {
	margin: 0 0 clamp(20px, 2.4vw, 28px);
	padding: 0;
	border: none;
}

.solutions-calculator__step-legend {
	display: block;
	width: 100%;
	margin-bottom: 16px;
}

.solutions-calculator__step-eyebrow {
	display: block;
	margin-bottom: 6px;
	font-size: var(--ark-fs-meta);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ark-border-titanium);
}

.solutions-calculator__step-title {
	display: block;
	margin-bottom: 6px;
	font-size: 1.3rem;
	color: var(--ark-text-primary);
}

.solutions-calculator__step-title:focus-visible {
	outline: none;
}

.solutions-calculator__step-description {
	display: block;
	max-width: 60ch;
	color: var(--ark-text-secondary);
}

/* Radio/checkbox-card options */

.solutions-calculator__options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

/* 7 stages, 2 columns on desktop — a long single vertical column read as
   an admin checklist. Collapses to 1 column on mobile (media query
   below). */
.solutions-calculator__options--stage {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solutions-calculator__option {
	position: relative;
}

.solutions-calculator__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.solutions-calculator__option-label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 12px 36px 12px 14px;
	background: color-mix(in srgb, var(--ark-bg-900) 55%, var(--ark-surface-650));
	border: 1px solid var(--ark-border-medium);
	border-radius: var(--ark-radius-sm);
	color: var(--ark-text-secondary);
	cursor: pointer;
	transition: border-color 200ms var(--ark-ease), background-color 200ms var(--ark-ease), color 200ms var(--ark-ease);
}

/* Compact check marker — only appears once the option is selected, no
   heavy gradient anywhere on the card. Opacity only, no transform:scale. */
.solutions-calculator__option-label::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 12px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: var(--ark-border-titanium);
	border-radius: 2px;
	opacity: 0;
	transition: opacity 150ms var(--ark-ease);
}

.solutions-calculator__option--row .solutions-calculator__option-label {
	padding: 12px 16px;
}

.solutions-calculator__option-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: var(--ark-text-secondary);
}

.solutions-calculator__option-icon svg {
	width: 100%;
	height: 100%;
}

.solutions-calculator__option-text {
	font-size: 0.9rem;
	line-height: 1.3;
}

.solutions-calculator__option input:checked + .solutions-calculator__option-label {
	border-color: var(--ark-border-titanium);
	background: color-mix(in srgb, var(--ark-surface-650) 88%, var(--ark-border-titanium) 10%);
	color: var(--ark-text-primary);
}

.solutions-calculator__option input:checked + .solutions-calculator__option-label::after {
	opacity: 1;
}

.solutions-calculator__option input:checked + .solutions-calculator__option-label .solutions-calculator__option-icon {
	color: var(--ark-border-titanium);
}

.solutions-calculator__option input:focus-visible + .solutions-calculator__option-label {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 2px;
}

.solutions-calculator__option[aria-invalid="true"] .solutions-calculator__option-label,
.solutions-calculator__option input[aria-invalid="true"] + .solutions-calculator__option-label {
	border-color: #C7593F;
}

.solutions-calculator__option--consultation {
	grid-column: 1 / -1;
}

/* Text/select/textarea fields */

.solutions-calculator__fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

/* :not([hidden]) is required — an author-stylesheet class rule beats the
   UA [hidden]{display:none} rule at equal specificity, so without this
   guard a [data-show-if] field toggled via the `hidden` IDL property (see
   assets/js/solutions-calculator.js updateConditionalFields()) stays
   visually displayed even though it's hidden from the accessibility tree. */
.solutions-calculator__field:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.solutions-calculator__field label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ark-text-secondary);
}

.solutions-calculator__field input,
.solutions-calculator__field select,
.solutions-calculator__field textarea {
	width: 100%;
	padding: 10px 14px;
	height: 48px;
	background: var(--ark-surface-700);
	border: 1px solid var(--ark-border-medium);
	border-radius: var(--ark-radius-sm);
	color: var(--ark-text-primary);
	font: inherit;
}

.solutions-calculator__field textarea {
	height: auto;
	min-height: 100px;
	resize: vertical;
}

.solutions-calculator__field--hotel-zones {
	grid-column: 1 / -1;
	gap: 10px;
}

.solutions-calculator__field--hotel-zones fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

.solutions-calculator__field--hotel-zones legend {
	padding: 0;
	margin: 0 0 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ark-text-secondary);
}

.solutions-calculator__field-hint {
	margin: 0 0 10px;
	font-size: 0.8rem;
	color: var(--ark-text-secondary);
}

/* No light glow — a solid, slightly thicker border reads as "focused"
   without a soft box-shadow halo. */
.solutions-calculator__field input:focus-visible,
.solutions-calculator__field select:focus-visible,
.solutions-calculator__field textarea:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 1px;
	border-color: var(--ark-border-titanium);
}

.solutions-calculator__field input[aria-invalid="true"],
.solutions-calculator__field select[aria-invalid="true"],
.solutions-calculator__field textarea[aria-invalid="true"] {
	border-color: #C7593F;
}

.solutions-calculator__error {
	margin: 6px 0 0;
	font-size: 0.8rem;
	color: #C7593F;
}

.solutions-calculator__error:empty {
	display: none;
}

/* Materials step — compact upload-panel look for the button that opens
   the existing Project/ТЗ modal (no second upload mechanism). */

.solutions-calculator__upload {
	margin-bottom: 20px;
}

.solutions-calculator__upload-btn {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px;
	background: color-mix(in srgb, var(--ark-bg-900) 45%, var(--ark-surface-650));
	border: 1px dashed var(--ark-border-medium);
	border-radius: var(--ark-radius-sm);
	color: var(--ark-text-primary);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color 200ms var(--ark-ease), background-color 200ms var(--ark-ease);
}

.solutions-calculator__upload-btn:hover,
.solutions-calculator__upload-btn:focus-visible {
	border-color: var(--ark-border-titanium);
	background: color-mix(in srgb, var(--ark-surface-650) 85%, transparent);
}

.solutions-calculator__upload-btn:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 2px;
}

.solutions-calculator__upload-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	color: var(--ark-border-titanium);
}

.solutions-calculator__upload-icon svg {
	width: 100%;
	height: 100%;
}

.solutions-calculator__materials-note {
	margin: 8px 0 0;
	font-size: 0.85rem;
	color: var(--ark-text-secondary);
}

/* Consent — the checkbox itself now renders via template-parts/shared/
   consent-checkbox.php (.ark-consent, styled in base.css); this page keeps
   only its own supplementary privacy note below. */

.solutions-calculator__privacy-note {
	margin: 10px 0 0;
	font-size: 0.78rem;
	color: var(--ark-text-muted);
}

/* Navigation */

.solutions-calculator__navigation {
	display: flex;
	gap: 12px;
	margin-top: clamp(20px, 2.4vw, 28px);
}

.solutions-calculator__nav-back,
.solutions-calculator__nav-next {
	display: none;
}

/* :not([hidden]) is required here — without it this rule's specificity
   beats the UA [hidden]{display:none} rule and forces Next to stay
   visible even after JS sets nextBtn.hidden = true on the last step,
   showing "Далее" and the submit button at the same time on Step 6. */
.is-enhanced .solutions-calculator__nav-back:not([hidden]),
.is-enhanced .solutions-calculator__nav-next:not([hidden]) {
	display: inline-flex;
}

/* Success state — replaces the form + summary entirely (.body vs.
   .success, plain [hidden] toggling, never both present at once), same
   68/32 column split as Step 1-6 (see .solutions-calculator__success
   above): right = a summary card the same size/style as the live form's
   .solutions-calculator__summary. Left column (.success-main) is one
   left-aligned vertical stack — eyebrow, H3, confirmation text, CTA all
   share the same left edge, no per-element text-align/margin:auto, so
   the block reads as a single composition instead of three competing
   alignments. */

.solutions-calculator__success-main {
	padding: clamp(20px, 2.6vw, 32px) 0;
	text-align: left;
}

.solutions-calculator__success-eyebrow {
	margin: 0 0 10px;
	font-size: var(--ark-fs-meta);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ark-border-titanium);
}

.solutions-calculator__success-title {
	margin: 0 0 10px;
	font-size: 1.3rem;
	color: var(--ark-text-primary);
}

.solutions-calculator__success-title:focus-visible {
	outline: none;
}

/* success_text_line1/line2 (two explicit ACF fields, see
   inc/acf-fields-solutions.php — never split from one string at render
   time) as two left-aligned paragraphs, capped at ~540px for a readable
   line length regardless of the .success-main column's own width. No
   fixed height — height is whatever the two lines need. */
.solutions-calculator__success-text {
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-width: 540px;
}

.solutions-calculator__success-text p {
	margin: 0;
}

.solutions-calculator__success-text-line1 {
	font-weight: 600;
	color: var(--ark-text-primary);
}

.solutions-calculator__success-text-line2 {
	color: var(--ark-text-secondary);
	line-height: 1.55;
}

.solutions-calculator__success-summary {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ark-border-soft);
}

.solutions-calculator__success-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Summary */

/* No position:sticky inside the calculator — the summary just sits in
   normal flow next to the form. */
.solutions-calculator__summary {
	background: color-mix(in srgb, var(--ark-bg-900) 45%, var(--ark-surface-650));
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-md);
	padding: 18px;
}

.solutions-calculator__summary-title {
	margin: 0 0 4px;
	font-size: 0.98rem;
	color: var(--ark-text-primary);
}

.solutions-calculator__summary-progress {
	margin: 0 0 12px;
	font-size: 0.78rem;
	color: var(--ark-border-titanium);
}

.solutions-calculator__summary-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.solutions-calculator__summary-row {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-top: 8px;
	border-top: 1px solid var(--ark-border-soft);
}

.solutions-calculator__summary-row:first-child {
	padding-top: 0;
	border-top: none;
}

.solutions-calculator__summary-row dt {
	font-size: 0.68rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ark-text-muted);
}

.solutions-calculator__summary-row dd {
	margin: 0;
	font-size: 0.86rem;
	color: var(--ark-text-primary);
	word-break: break-word;
}

/* Placeholder ("Не указано") stays muted; filled-in values above use the
   default (bright) dd color for contrast. */
.solutions-calculator__summary-row dd[data-empty="true"] {
	color: var(--ark-text-muted);
}

/* "Предварительный состав решения" — a compact hotel-only subsection of
   the same aside, not a card: thin top divider only (same border token as
   .solutions-calculator__summary-row above), plain list, no icons/CTA. Its
   own margin-top provides the divider's spacing so it reads as part of the
   existing summary, not a second, separate box. Never widens the aside —
   no fixed widths, wraps normally like the dl rows above it. */
.solutions-calculator__hotel-preview {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ark-border-soft);
}

.solutions-calculator__hotel-preview-title {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ark-text-muted);
}

.solutions-calculator__hotel-preview-list {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.solutions-calculator__hotel-preview-list li {
	position: relative;
	padding-left: 14px;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--ark-text-primary);
	word-break: break-word;
}

.solutions-calculator__hotel-preview-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 1px;
	background: var(--ark-border-titanium);
}

/* Disclaimer reads as visually secondary — smaller, muted, no divider of
   its own (it's part of the same subsection as the list above it). */
.solutions-calculator__hotel-preview-disclaimer {
	margin: 0;
	font-size: 0.74rem;
	line-height: 1.4;
	color: var(--ark-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.solutions-calculator__progress-bar-fill,
	.solutions-calculator__progress-button,
	.solutions-calculator__option-label,
	.solutions-calculator__option-label::after,
	.solutions-calculator__upload-btn {
		transition: none;
	}
}

/* Calculator responsive — tablet: summary moves below the form (source
   order already places it there), option cards drop to 2 columns.
   Mobile: single column throughout, the horizontal progress list is
   replaced visually by the compact "Шаг X из Y" bar (kept in the DOM —
   and in the Tab/AT order — for screen readers, just visually hidden),
   nav buttons go full width for a comfortable touch target. */
@media (max-width: 1023px) {
	.solutions-calculator__body,
	.solutions-calculator__success:not([hidden]) {
		grid-template-columns: 1fr;
	}

	.solutions-calculator__options {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.solutions-calculator__progress-list {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.solutions-calculator__progress-mobile {
		display: flex;
	}

	.solutions-calculator__fields {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 679px) {
	.solutions-calculator__options {
		grid-template-columns: 1fr;
	}

	.solutions-calculator__navigation {
		flex-wrap: wrap;
	}

	.solutions-calculator__nav-back,
	.solutions-calculator__nav-next,
	.solutions-calculator__nav-submit {
		flex: 1 1 auto;
		min-height: 44px;
	}
}