/* Trip Cost Calculator (page-trip-calculator.php) */

/* Full-bleed hero, same se_render_hub_hero() component every hub page
   uses (page-trip-calculator.php) -- "как во всех хабах", per direct
   user feedback 2026-08-27, replacing an earlier contained-width
   720x340 banner with the title baked into the image (removed
   entirely, including the image asset it pointed at -- real <h1> now
   sits over the photo like every other hero on the site).
   se_render_hub_hero()'s own default is min-height:720px (750px+ media
   query un-styled) -- explicitly "стать узкой" (stay narrow) here, so
   both the desktop rule and its own mobile breakpoint are overridden.
   This stylesheet only loads on this one template, so scoping bare
   .se-hub-hero here is safe -- it can't leak onto real hub pages.
   Heights: 220/170 * 1.3 (first +30% pass) * 1.3 (second +30% pass,
   2026-08-27) = 286/221 -> 372/287. User first asked to widen the
   hero, then corrected to height ("верни как было" on width -- the
   __content max-width override was reverted back to base.css's own
   890px and stayed reverted through this second height increase). */
.se-hub-hero {
	min-height: 372px;
}
@media (max-width: 749px) {
	.se-hub-hero {
		min-height: 287px;
	}
}

.se-calc__hero {
	max-width: var(--se-container-narrow);
	margin: 0 auto var(--se-space-7);
	text-align: center;
}
.se-calc__eyebrow {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--se-accent);
	margin: 0 0 var(--se-space-3);
}
.se-calc__lead {
	color: var(--se-text-soft);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Disclaimer callout -- reuses the sitewide .se-callout component
   (base.css), just constrained to a readable paragraph width and
   centered under the (also centered) hero, unlike .se-callout's usual
   home inside left-aligned article prose. */
.se-calc__disclaimer {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}
.se-calc__disclaimer p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
}

/* Two-column layout on desktop -- minmax(0, 1fr), not a bare 1fr, on
   both tracks: a bare 1fr track refuses to shrink below its content's
   intrinsic width (long labels/selects inside .se-calc__form, wide
   number totals inside .se-calc__results), which is exactly the class
   of grid-overflow bug already hit earlier in this project (GPX button
   in a narrow quick-facts column). minmax(0, 1fr) lets both tracks
   actually shrink to fit the row. */
.se-calc__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--se-space-7);
	align-items: start;
}
@media (min-width: 960px) {
	.se-calc__layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}
	.se-calc__results {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--se-space-6));
	}
}

.se-calc__block {
	background: var(--se-surface);
	border-radius: var(--se-radius-card);
	box-shadow: var(--se-shadow-soft);
	padding: var(--se-space-5) var(--se-space-6);
	margin-bottom: var(--se-space-5);
}
.se-calc__block h2 {
	margin: 0 0 var(--se-space-4);
	font-size: 1.05rem;
}

.se-calc__row {
	margin-bottom: var(--se-space-4);
}
.se-calc__row:last-child {
	margin-bottom: 0;
}
/* auto-fit needs a REAL non-zero minimum to actually force wrapping --
   with minmax(0, 1fr) (the earlier version here), auto-fit sees every
   0-width track as "fits" and packs all fields into one row of tiny
   slivers instead of wrapping to fewer/wider columns on narrow screens
   (caught live at 375px, 2026-08-27 -- text overflowing 23px-wide
   columns). minmax(90px, 1fr) gives it a floor to wrap against. */
.se-calc__row--split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: var(--se-space-4);
}
/* auto-fit's column COUNT is decided purely from the container width and
   the 90px floor above -- it has nothing to do with label text, so this
   isn't actually a translation bug (confirmed: EN breaks the exact same
   way at the exact same width). Below ~620px, 4 items (the Extras/addons
   row specifically -- id="calc-addons-row") no longer fit 4-per-row at a
   90px floor, and auto-fit wraps the leftover 4th item alone onto its own
   row, left-aligned at 1/3 width instead of a clean 2x2 -- on EVERY
   language, but only reported once translated labels made someone look
   at this row on a phone. Force an explicit, always-tidy 2-column grid
   below that width instead of leaving it to auto-fit's row math; auto-fit
   above 620px already gives a clean 4-across (verified live at 700px+).
   User-caught 2026-08-27 (misread as a translation bug in the report). */
@media (max-width: 619px) {
	#calc-addons-row.se-calc__row--split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.se-calc__field {
	display: flex;
	flex-direction: column;
	gap: var(--se-space-1);
	min-width: 0;
}
/* The 2x2/4-across grid fix above only forces the COLUMN widths to line
   up -- it does nothing about each column's own INTERNAL stacking. Grid
   only guarantees a shared row height (stretch); inside each item, the
   label/input/note still stack from that item's own top with no shared
   baseline, so a 2-line label in one column ("Аренда велосипеда") pushes
   its <input> down while a 1-line label next to it ("eSIM") doesn't --
   the "0" boxes visibly land at different Y positions column to column
   even though the row itself is aligned. Reserving a fixed 2-line slot
   for the label (and the note below the input) means every field's
   input/note sit at the exact same offset regardless of how many lines
   that field's own translated text happens to wrap to. User-caught
   2026-08-27 ("текст верхний открепить от цифрового бокса... чтоб они
   не прыгали"). */
.se-calc__field span {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	min-height: calc( 1.3em * 2 );
	color: var(--se-text-muted);
}
.se-calc__field input[type="number"] {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: var(--se-space-3);
	border: 1.5px solid var(--se-border);
	border-radius: var(--se-radius-sm);
	font-size: 1rem;
	font-family: var(--se-font-body);
	background: var(--se-bg);
	color: var(--se-text);
}
/* Spells out what each Extras number actually multiplies by (bike/eSIM
   -- per adult; insurance/luggage -- per traveler) -- previously silent,
   flagged by the user as genuinely ambiguous ("это один байк на семью
   или на каждого?"). */
.se-calc__field-note {
	display: block;
	font-size: 0.7rem;
	line-height: 1.3;
	min-height: calc( 1.3em * 2 );
	color: var(--se-text-muted);
	opacity: 0.85;
}
.se-calc__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--se-text-muted);
	margin-bottom: var(--se-space-2);
}

/* Segmented control */
.se-calc-segmented {
	display: flex;
	flex-wrap: wrap;
	gap: var(--se-space-2);
	background: var(--se-bg-alt);
	border-radius: var(--se-radius-pill);
	padding: var(--se-space-1);
	/* A pill radius on a container whose content can wrap to 2 lines
	   (long labels + narrow mobile width) stops looking like a pill and
	   starts looking like an odd stretched oval -- and without
	   overflow:hidden, a wrapped/tall active button's square-ish
	   background could visually poke past the container's own rounded
	   corners ("подсвеченные поля вылазят"). Clipping here is the fix
	   for both; the label-shortening below (page-trip-calculator.php)
	   is what actually prevents the 2-line wrap in the first place.
	   User-caught 2026-08-27. */
	overflow: hidden;
}
.se-calc-segmented__opt {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	border-radius: var(--se-radius-pill);
	padding: var(--se-space-3) var(--se-space-4);
	font-family: var(--se-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--se-text-soft);
	cursor: pointer;
	white-space: normal;
	line-height: 1.3;
	transition: background 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.se-calc-segmented__opt.is-active {
	background: var(--se-primary);
	color: var(--se-on-primary);
}
.se-calc-segmented__opt:hover:not(.is-active) {
	background: var(--se-surface);
}
.se-calc-segmented__opt:focus {
	outline: none;
}
.se-calc-segmented__opt:focus-visible {
	outline: 2px solid var(--se-accent);
	outline-offset: -2px;
}

/* Mobile: the pill CONTAINER above (rounded, overflow:hidden) was built
   for options that all fit on one line -- adding a 3rd "Own transport"
   option (2026-08-28) broke that on real phone widths: "Public
   transport" + "Own transport" don't both fit next to "Car", the 3rd
   button wraps to its own row, and its own rounded background gets
   clipped against the OUTER pill's curve -- exactly the "один овал, в
   нём коричневые овалы, которые не влазят" screenshot the user sent.
   Stacking vertically instead of trying to keep everything on one
   wrapped row sidesteps the clipping entirely (container's radius
   shrinks to a normal card radius, not a pill, and overflow is no
   longer relied on to hide anything) -- also fixes the same
   already-existing wrap issue on the 3-button Trip style row (Budget/
   Mid-range/Comfort), which shares this same class. */
@media (max-width: 620px) {
	.se-calc-segmented {
		flex-direction: column;
		align-items: stretch;
		border-radius: var(--se-radius-sm);
		overflow: visible;
	}

	.se-calc-segmented__opt {
		width: 100%;
		text-align: center;
	}
}
.se-calc__row-note {
	margin: var(--se-space-2) 0 0;
	font-size: 0.78rem;
	color: var(--se-text-muted);
	line-height: 1.5;
}

/* Ski/Spa -- back to the original fixed checkbox+select+day-count rows
   (2026-08-27, restored the same day after a merged Activities+
   Attractions version was tried and the user asked to keep Ski/Spa as
   they were: "Активности вроде Скиинг и Термы оставь как было до
   этого" -- only Attractions moved to the new dynamic pattern below). */
.se-calc__row--checkline {
	display: flex;
	align-items: center;
	gap: var(--se-space-4);
	flex-wrap: wrap;
}
.se-calc__row--checkline label {
	display: flex;
	align-items: center;
	gap: var(--se-space-2);
	font-weight: 600;
	font-size: 0.92rem;
}
/* Desktop was still "crooked" after the mobile stacking fix -- "Skiing"
   and "Thermal spa" are different lengths, so with the label sized to
   its own text (the default), the select+day-count controls after it
   started at a different X on each row -- the two rows never lined up
   even though each row's OWN internal math was fine. A fixed label
   width makes both rows' controls start at the identical X position.
   150px comfortably fits "Thermal spa" + checkbox + gap at this
   font-size. User-caught 2026-08-27 ("на десктопе кривое"). */
@media (min-width: 481px) {
	.se-calc__row--checkline > label.se-calc-check {
		flex: 0 0 150px;
	}
}
/* Groups the select + day-count field together so flex-wrap treats
   them as ONE unit relative to the checkbox label, not three
   independent items that can each land on their own line -- that's
   what produced the "crooked"/asymmetric 3-line stack the user
   flagged (label, then select, then day-count each wrapping
   separately whenever the row ran out of room). Below 480px this
   becomes its own row under the checkbox instead, deliberately, not
   accidentally. */
.se-calc__row--checkline-controls {
	display: flex;
	align-items: center;
	gap: var(--se-space-3);
	flex: 1 1 auto;
	min-width: 0;
}
@media (max-width: 480px) {
	.se-calc__row--checkline {
		flex-direction: column;
		align-items: stretch;
	}
	.se-calc__row--checkline-controls {
		width: 100%;
	}
	.se-calc__row--checkline select {
		/* Free to grow again here -- on this narrow single-column
		   layout it's no longer sharing the row with the label, only
		   with the fixed-width day-count field beside it, so growing
		   to fill the remaining space is exactly right (unlike the
		   wider-viewport case above, where growth is what caused the
		   Skiing/Thermal-spa width mismatch in the first place). */
		flex: 1 1 auto;
	}
}
.se-calc__row--checkline select {
	/* flex-grow:0, not 1 -- with grow:1 the select stretches to fill
	   whatever room is left in the row after the label, so a shorter
	   label ("Skiing") let its select grow wider than a longer one
	   ("Thermal spa") got to -- the two rows looked mismatched even
	   though they share this exact rule. flex-basis alone (220px) now
	   governs the width on both rows equally; still allowed to shrink
	   on narrow viewports. User-caught 2026-08-27. */
	flex: 0 1 220px;
	min-width: 0;
	padding: var(--se-space-2) var(--se-space-3);
	border: 1.5px solid var(--se-border);
	border-radius: var(--se-radius-sm);
	background: var(--se-bg);
	font-family: var(--se-font-body);
	font-size: 0.9rem;
	color: var(--se-text);
}
.se-calc__row--checkline select:disabled {
	opacity: 0.45;
}
/* "How many days" field for Ski/Spa -- a fixed narrow basis (not
   flex:1) so it never competes with the select for the row's growth
   budget; the row's own flex-wrap:wrap (above) already lets it drop to
   its own line on narrow screens without any auto-fit/minmax(0,...)
   involved. */
.se-calc__daycount-field {
	display: flex;
	align-items: center;
	gap: var(--se-space-2);
	flex: 0 0 auto;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--se-text-muted);
}
.se-calc__daycount {
	width: 4.2em;
	box-sizing: border-box;
	padding: var(--se-space-2) var(--se-space-3);
	border: 1.5px solid var(--se-border);
	border-radius: var(--se-radius-sm);
	font-family: var(--se-font-body);
	font-size: 0.9rem;
	background: var(--se-bg);
	color: var(--se-text);
}
.se-calc__daycount:disabled {
	opacity: 0.45;
}

/* Custom animated checkbox for Ski/Spa -- replaces the bare native
   square (flagged by the user as "boring and ugly, want something in
   the site palette, animated, that pops out bigger than the box"). The
   real <input> stays in the DOM (visually hidden via 1x1px+opacity:0,
   not display:none, so it keeps keyboard focus / screen reader
   behavior and the wrapping <label> still toggles it on click) and a
   sibling span draws the visible box; input:checked + box flips the
   fill color, and the checkmark inside animates in with a bouncy
   keyframe that overshoots past its final size before settling back. */
.se-calc-check {
	display: flex;
	align-items: center;
	gap: var(--se-space-2);
	cursor: pointer;
	position: relative;
}
.se-calc-check input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
}
.se-calc-check__box {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 1.5px solid var(--se-border);
	background: var(--se-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s ease, border-color 0.18s ease;
}
.se-calc-check input:focus-visible + .se-calc-check__box {
	outline: 2px solid var(--se-accent);
	outline-offset: 2px;
}
.se-calc-check__box::after {
	content: "";
	width: 13px;
	height: 13px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 4.6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 4.6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transform: scale(0);
	transform-origin: center;
	transition: transform 0.18s ease;
}
.se-calc-check input:checked + .se-calc-check__box {
	background: var(--se-primary);
	border-color: var(--se-primary);
}
.se-calc-check input:checked + .se-calc-check__box::after {
	animation: se-calc-check-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes se-calc-check-pop {
	0%   { transform: scale(0); }
	55%  { transform: scale(1.35); }
	80%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.se-calc-check input:checked + .se-calc-check__box::after {
		animation: none;
		transform: scale(1);
	}
}

/* Generic "add a row, pick from what's left" picker -- shared by
   Attractions (#calc-attraction-rows) AND Accommodation
   (#calc-accommodation-rows, added 2026-08-27 right after this pattern
   proved itself on Attractions). Adding a new Price Table entry (a new
   attraction, a new city) just makes it appear in the relevant
   add-another <select> automatically -- no template/CSS change needed
   per item. Generalized from a single .se-calc-attraction-* set once a
   second instance of the exact same widget existed -- see
   trip-calculator.js's renderAttractionRows()/renderAccommodationRows(),
   which both build this same markup shape. */
.se-calc__picker-rows {
	display: flex;
	flex-direction: column;
	gap: var(--se-space-3);
}
.se-calc-picker-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--se-space-3);
	min-width: 0;
	padding: var(--se-space-3) var(--se-space-4);
	background: var(--se-bg);
	border: 1.5px solid var(--se-border);
	border-radius: var(--se-radius-sm);
}
.se-calc-picker-row__label {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--se-text);
}
/* Round ghost button, not a filled/bordered one -- reads as a quiet
   "undo" affordance next to a row someone already committed to, not a
   competing call to action. Red only on hover/focus (var(--se-critical),
   the same "danger" semantic My Trip's own remove control already
   established elsewhere on the site), not at rest. */
.se-calc-picker-row__remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--se-text-muted);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.se-calc-picker-row__remove:hover {
	background: var(--se-critical-soft);
	color: var(--se-critical);
}
.se-calc-picker-row__remove:focus {
	outline: none;
}
.se-calc-picker-row__remove:focus-visible {
	outline: 2px solid var(--se-accent);
	outline-offset: 2px;
}
/* The trailing "+ Add..." row -- dashed border instead of solid
   distinguishes "not yet a real choice" from the solid-bordered rows
   above it at a glance. */
.se-calc-picker-row--add {
	border-style: dashed;
	padding: 0;
}
.se-calc-picker-select {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: var(--se-space-3) var(--se-space-4);
	border: none;
	border-radius: inherit;
	background: transparent;
	font-family: var(--se-font-body);
	font-size: 0.9rem;
	color: var(--se-text-soft);
	cursor: pointer;
}
.se-calc-picker-select:focus {
	outline: none;
}
.se-calc-picker-select:focus-visible {
	outline: 2px solid var(--se-accent);
	outline-offset: -2px;
}

/* Results column */
.se-calc__results {
	background: var(--se-surface);
	border-radius: var(--se-radius-card);
	box-shadow: var(--se-shadow-card);
	padding: var(--se-space-6);
}

.se-calc-total {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--se-space-4);
	padding-bottom: var(--se-space-5);
	margin-bottom: var(--se-space-5);
	border-bottom: 1px solid var(--se-border);
}
.se-calc-total__group,
.se-calc-total__person {
	display: flex;
	flex-direction: column;
	gap: var(--se-space-1);
	min-width: 0;
}
.se-calc-total__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--se-text-muted);
}
.se-calc-total__value {
	font-family: var(--se-font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	color: var(--se-text);
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

.se-calc-bars {
	display: flex;
	flex-direction: column;
	gap: var(--se-space-4);
	margin-bottom: var(--se-space-5);
}
.se-calc-bar-row__head {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--se-text);
	margin-bottom: var(--se-space-2);
	gap: var(--se-space-2);
}
.se-calc-bar-row__amount {
	font-variant-numeric: tabular-nums;
}

/* Brief glow pulse when a tweened number (trip-calculator.js's
   animateNumberTo()) finishes landing on its new value -- reinforces
   the count-up motion instead of the number just quietly sitting there
   once it's done. rgb(185, 114, 63) is --se-accent's hex (#B9723F)
   spelled out as a triplet for rgba() -- same pattern already used
   elsewhere in this project for a glow color with no dedicated -rgb
   token to draw from. */
.se-calc-total__value.is-updated,
.se-calc-sticky-total__value.is-updated {
	animation: se-calc-value-pulse 0.5s ease;
}
.se-calc-bar-row__amount.is-updated {
	animation: se-calc-value-pulse-sm 0.5s ease;
}
@keyframes se-calc-value-pulse {
	0%   { text-shadow: 0 0 0 rgba(185, 114, 63, 0); }
	35%  { text-shadow: 0 0 16px rgba(185, 114, 63, 0.45); }
	100% { text-shadow: 0 0 0 rgba(185, 114, 63, 0); }
}
@keyframes se-calc-value-pulse-sm {
	0%   { text-shadow: 0 0 0 rgba(185, 114, 63, 0); }
	35%  { text-shadow: 0 0 8px rgba(185, 114, 63, 0.5); }
	100% { text-shadow: 0 0 0 rgba(185, 114, 63, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.se-calc-total__value.is-updated,
	.se-calc-sticky-total__value.is-updated,
	.se-calc-bar-row__amount.is-updated {
		animation: none;
	}
}
.se-calc-bar-row__track {
	background: var(--se-bg-alt);
	border-radius: var(--se-radius-pill);
	height: 10px;
	overflow: hidden;
}
.se-calc-bar-row__fill {
	height: 100%;
	border-radius: var(--se-radius-pill);
	background: var(--se-accent);
	transition: width 0.25s ease;
}
.se-calc-bar-row__fill[data-cat="accommodation"] { background: var(--se-primary); }
.se-calc-bar-row__fill[data-cat="food"] { background: var(--se-accent); }
.se-calc-bar-row__fill[data-cat="transport"] { background: var(--se-difficulty-moderate); }
.se-calc-bar-row__fill[data-cat="activities"] { background: var(--se-info); }
.se-calc-bar-row__fill[data-cat="extras"] { background: var(--se-text-muted); }

/* Accommodation map (2026-08-27) -- full width of the calculator's own
   content column on desktop (just a normal block, no special CSS needed
   there), edge-to-edge full SCREEN width on mobile -- an explicit,
   deliberate distinction the user drew, not the same "full-bleed
   everywhere" treatment. Text (heading/intro) stays within the
   container's normal padding on both; only .se-calc-map itself (the
   iframe wrapper) breaks out on mobile, same negative-margin technique
   already used for the mobile full-bleed article hero in base.css
   (negate .se-container's own padding-inline exactly, not a 100vw trick). */
.se-calc-map-section {
	margin-top: var(--se-space-8);
	text-align: center;
}
.se-calc-map-section h2 {
	margin-bottom: var(--se-space-2);
}
.se-calc-map-section p {
	color: var(--se-text-muted);
	max-width: 640px;
	margin: 0 auto var(--se-space-5);
}
.se-calc-map {
	border-radius: var(--se-radius-card);
	overflow: hidden;
	box-shadow: var(--se-shadow-card);
}
.se-calc-map iframe {
	display: block;
	width: 100%;
	height: 560px;
	border: 0;
}
@media (max-width: 749px) {
	.se-calc-map {
		width: calc(100% + 2 * var(--se-space-5));
		margin-left: calc(-1 * var(--se-space-5));
		margin-right: calc(-1 * var(--se-space-5));
		border-radius: 0;
	}
	.se-calc-map iframe {
		height: 420px;
	}
}

/* Coffee/Beer toggle removed 2026-08-27, replaced by one fixed kremšnita
   comparison line -- circular real photo + text side by side, no control
   to choose between ("более простой и цельный образ, не нужно
   выбирать"). */
.se-calc-fun {
	display: flex;
	align-items: center;
	gap: var(--se-space-4);
	background: var(--se-bg-alt);
	border-radius: var(--se-radius-sm);
	padding: var(--se-space-4);
	margin-bottom: var(--se-space-5);
	text-align: left;
}
.se-calc-fun__photo {
	/* Was 144px (2x the original 72px); reduced ~30% (2026-08-28, direct
	   request) to 101px, on both desktop and mobile. Source switched from
	   WP's 150x150 'thumbnail' to the 300x300 'medium' size in the same
	   pass (page-trip-calculator.php) -- roughly 3x oversampled relative
	   to this display size now, fixing a separate direct complaint about
	   the photo looking blurry/pixelated even at the small on-page size. */
	flex: 0 0 auto;
	width: 101px;
	height: 101px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--se-surface);
	box-shadow: var(--se-shadow-soft);
}
.se-calc-fun__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 0.95rem;
	color: var(--se-text);
	min-height: 1.3em;
}
@media (max-width: 560px) {
	/* Raised from 420px to 560px when the photo doubled to 144px -- the
	   text column would otherwise squeeze down to almost nothing next to
	   a circle nearly as wide as the results column itself on most
	   phones. Stacks instead. */
	.se-calc-fun {
		flex-direction: column;
		text-align: center;
	}
}

.se-calc-share {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--se-space-3);
	margin-bottom: var(--se-space-6);
}
/* Sitewide .se-button never defines its own :focus/tap-highlight
   (only .se-button--outline does), so Copy Link/Share could show the
   browser-default blue ring here -- see
   feedback_no_blue_focus_highlights.md. Scoped to this page rather
   than editing the sitewide class. */
.se-calc-share .se-button {
	-webkit-tap-highlight-color: transparent;
}
.se-calc-share .se-button:focus {
	outline: none;
}
.se-calc-share .se-button:focus-visible {
	outline: 2px solid var(--se-accent);
	outline-offset: 2px;
}
.se-calc-share__feedback {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--se-info);
}

.se-calc-email {
	border-top: 1px solid var(--se-border);
	padding-top: var(--se-space-5);
}
.se-calc-email h3 {
	margin: 0 0 var(--se-space-3);
	font-size: 1rem;
}
.se-calc-email__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--se-space-3);
}
.se-calc-email__row input[type="email"] {
	flex: 1 1 220px;
	min-width: 0;
	box-sizing: border-box;
	padding: var(--se-space-3);
	border: 1.5px solid var(--se-border);
	border-radius: var(--se-radius-sm);
	font-family: var(--se-font-body);
	font-size: 0.95rem;
	background: var(--se-bg);
	color: var(--se-text);
}
.se-calc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.se-calc-email__disclaimer {
	margin: var(--se-space-2) 0 0;
	font-size: 0.75rem;
	color: var(--se-text-muted);
}
.se-calc-email__status {
	margin: var(--se-space-2) 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--se-info);
	min-height: 1.2em;
}

@media (max-width: 599px) {
	.se-calc__block,
	.se-calc__results {
		padding: var(--se-space-4);
	}
	.se-calc-total {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--se-space-3);
	}
}

/* Sticky mobile total bar -- see page-trip-calculator.php's comment for
   why this exists (results panel loses its position:sticky behavior
   once the layout collapses to one column below 960px). Hidden by
   default; the media query below is the only place that turns it on,
   so there's no flash-of-fixed-bar before JS/CSS settle. */
.se-calc-sticky-total {
	display: none;
}
@media (max-width: 959px) {
	.se-calc-sticky-total {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--se-space-4);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		width: 100%;
		border: none;
		border-top: 1px solid var(--se-border);
		background: var(--se-surface);
		box-shadow: 0 -8px 24px rgba(42, 36, 28, 0.14);
		padding: var(--se-space-3) var(--se-space-5);
		padding-bottom: calc(var(--se-space-3) + env(safe-area-inset-bottom, 0px));
		cursor: pointer;
		font-family: var(--se-font-body);
		-webkit-tap-highlight-color: transparent;
	}
	/* No blue browser-default focus ring on tap -- see
	   feedback_no_blue_focus_highlights.md. Keyboard focus still gets a
	   real, visible outline, just in the site's own accent color. */
	.se-calc-sticky-total:focus {
		outline: none;
	}
	.se-calc-sticky-total:focus-visible {
		outline: 2px solid var(--se-accent);
		outline-offset: -3px;
	}
	.se-calc-sticky-total__col {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 0;
	}
	.se-calc-sticky-total__label {
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--se-text-muted);
	}
	.se-calc-sticky-total__value {
		font-family: var(--se-font-display);
		font-weight: 700;
		font-size: 1.15rem;
		color: var(--se-text);
		font-variant-numeric: tabular-nums;
	}
	.se-calc-sticky-total__divider {
		width: 1px;
		height: 28px;
		background: var(--se-border);
		flex: 0 0 auto;
	}
	.se-calc-sticky-total__arrow {
		color: var(--se-accent);
		font-size: 1.1rem;
		flex: 0 0 auto;
	}
	/* So the fixed bar never covers the email form/CTA at the bottom of
	   the page once scrolled all the way down. ~64px covers the bar's
	   own height (padding + one line of label + one line of value). */
	.se-calc__results {
		padding-bottom: calc(64px + var(--se-space-5));
	}
	/* The sitewide cookie-consent banner (base.css, footer.php) sits
	   bottom-right with a small margin -- on this page specifically it
	   would land right on top of the new sticky total bar. This
	   stylesheet only loads on the calculator template, so this override
	   is naturally scoped without needing :has() or a body class. */
	.se-cookie-banner {
		bottom: calc(64px + var(--se-space-4) + env(safe-area-inset-bottom, 0px));
	}
}

/* Mobile wheel picker -- replaces every number input's native spinner
   with a scroll-snap "wheel" on mobile only, per direct user request
   ("выбор дней или любого другого числа колесом"). The wheel is built
   entirely in JS (trip-calculator.js's buildWheel()) as a sibling right
   after each <input type="number">; hidden on desktop (default rule
   below, unconditional) so nothing here needs its own >=750px guard.
   .se-wheel-source is the class the JS adds to the now-visually-hidden
   original input -- it's still the real source of truth for
   readFormIntoState(), just not the visible control on mobile. */
.se-wheel {
	display: none;
}
@media (max-width: 749px) {
	.se-wheel-source {
		display: none;
	}
	/* Redesigned minimal 2026-08-27 -- the first version (boxed:
	   border+background+shadow, 36px rows) read as "громоздкий",
	   especially wedged into the already-compact Activities rows next
	   to a select+"days" label. No box at all now -- just a fading
	   number column with two thin hairlines marking the selected row,
	   closer to a native iOS/Android picker than a widget with its own
	   visible container. Item height lives ONLY here in CSS now (not
	   also duplicated as a JS constant) -- buildWheel() measures the
	   real rendered item height off the DOM instead, so this and the
	   compact day-count variant below can use different sizes without
	   anything needing to be kept in sync by hand. */
	.se-wheel {
		display: block;
		position: relative;
		height: 84px; /* 3 * 28px */
		overflow-y: auto;
		overflow-x: hidden;
		scroll-snap-type: y mandatory;
		-webkit-overflow-scrolling: touch;
		cursor: grab;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, black 35%, black 65%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, black 35%, black 65%, transparent 100%);
	}
	.se-wheel::-webkit-scrollbar {
		display: none;
	}
	.se-wheel {
		scrollbar-width: none;
	}
	.se-wheel:focus-visible {
		outline: 2px solid var(--se-accent);
		outline-offset: 2px;
		border-radius: var(--se-radius-sm);
	}
	.se-wheel.is-disabled {
		opacity: 0.4;
		pointer-events: none;
	}
	.se-wheel__track {
		padding: 28px 0; /* (84px - 28px) / 2 -- lets the first/last item scroll to center */
	}
	.se-wheel__item {
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		scroll-snap-align: center;
		font-family: var(--se-font-display);
		font-size: 0.9rem;
		color: var(--se-text-muted);
		font-variant-numeric: tabular-nums;
		transition: color 0.15s ease, font-weight 0.15s ease;
	}
	.se-wheel__item.is-selected {
		color: var(--se-text);
		font-weight: 700;
	}
	/* Two hairlines across the middle row, marking the "selected" slot --
	   no fill, no box -- purely decorative (aria-hidden), the real
	   selection state lives on .se-wheel__item.is-selected and the
	   wheel's own aria-valuenow. */
	.se-wheel__highlight {
		position: absolute;
		left: 8%;
		right: 8%;
		top: 28px;
		height: 28px;
		border-top: 1px solid var(--se-border);
		border-bottom: 1px solid var(--se-border);
		pointer-events: none;
	}

	/* Extra-compact variant for the Ski/Spa day-count wheels -- the spot
	   the user singled out as most "громоздко" (inline next to a
	   select + "days" label, not its own dedicated section like Days/
	   Adults/Children get). Narrower, shorter rows; everything else
	   (fade mask, hairline highlight, disabled/focus states) inherited
	   from .se-wheel above. */
	.se-calc__daycount-field .se-wheel {
		width: 4.6em;
		height: 66px; /* 3 * 22px */
	}
	.se-calc__daycount-field .se-wheel__track {
		padding: 22px 0;
	}
	.se-calc__daycount-field .se-wheel__item {
		height: 22px;
		font-size: 0.8rem;
	}
	.se-calc__daycount-field .se-wheel__highlight {
		top: 22px;
		height: 22px;
	}
}