/* ==========================================================================
   Add to my trip — button (hero + card), header icon, and the /my-trip/
   page. Grids here reuse the fixed 1/2/3-column breakpoint pattern (not
   auto-fit/minmax) plus min-width:0 on every grid item established
   earlier on this project (webcams grid, GPX quick-facts button) — the
   same overflow class of bug is possible anywhere a grid item can't
   shrink below its own content's intrinsic size.
   ========================================================================== */

/* ---- Add-to-trip button: shared icon swap (suitcase -> check) ---- */
.se-trip-btn__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.se-trip-btn__icon svg {
	width: 16px;
	height: 16px;
}

.se-trip-btn__check {
	display: none;
}

.se-trip-btn.is-added .se-trip-btn__suitcase {
	display: none;
}

.se-trip-btn.is-added .se-trip-btn__check {
	display: block;
}

/* ---- Hero variant: pill, top-right of the article hero photo.
   backdrop-filter added for a genuine frosted-glass read instead of just
   a flat translucent fill -- by direct request, applied to both variants
   for a consistent look now that cards use the same pill shape. ---- */
.se-trip-btn--hero {
	position: absolute;
	top: var(--se-space-4);
	right: var(--se-space-4);
	z-index: 2;
	box-sizing: border-box;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--se-space-2);
	padding: var(--se-space-2) var(--se-space-4);
	border-radius: var(--se-radius-pill);
	border: 1.5px solid rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, transform 0.15s ease;
}

.se-trip-btn--hero:hover {
	background: rgba(255, 255, 255, 0.36);
}

.se-trip-btn--hero.is-added {
	background: var(--se-accent);
	border-color: var(--se-accent);
}

@media (max-width: 480px) {
	.se-trip-btn--hero .se-trip-btn__label {
		display: none;
	}

	.se-trip-btn--hero {
		padding: var(--se-space-2);
	}
}

/* ---- Card variant: pill with icon + label, top-right of the thumbnail
   -- was icon-only, unified with the hero pill by direct request so a
   first-time visitor immediately understands what the icon does without
   having to open an article first. Kept on cards at every width,
   including mobile (the 1-column mobile grid gives each card its full
   ~330-340px, plenty of room). Sits inside .se-card's own <a> --
   trip-planner.js stops the click from also triggering navigation to
   the article. .se-card needs position:relative for this (added
   alongside its other base rules).
   Kadence's own button{} rule (real element-selector specificity, not
   just a UA default) sets padding ~7px/18px on every <button> that
   doesn't declare its own -- explicit padding below overrides that by
   specificity, no need for the box-sizing pin this used when it was an
   icon-only circle with fixed width/height. */
.se-trip-btn--card {
	position: absolute;
	top: var(--se-space-3);
	right: var(--se-space-3);
	z-index: 2;
	/* Shrink-to-fit pill like the hero variant, not a full-width band --
	   capped so a long translated label (German especially) wraps onto a
	   second line inside the pill instead of overflowing past the card's
	   left edge. */
	max-width: calc(100% - var(--se-space-3) * 2);
	box-sizing: border-box;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--se-space-2);
	padding: var(--se-space-2) var(--se-space-3);
	border-radius: var(--se-radius-pill);
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--se-text);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	white-space: normal;
	text-align: center;
	line-height: 1.25;
	box-shadow: 0 2px 8px rgba(20, 14, 8, 0.2);
	transition: background 0.15s ease, transform 0.15s ease;
}

.se-trip-btn--card:hover {
	background: rgba(255, 255, 255, 0.65);
}

.se-trip-btn--card.is-added {
	background: var(--se-accent);
	border-color: var(--se-accent);
	color: #fff;
}

/* ---- Header icon + count badge (next to the language selector).
   Icon-only under 1440px (matches the site's mobile-header breakpoint --
   see .se-header__bar in base.css) to keep the row from crowding once
   the hamburger, language selector, trip icon and search share one
   narrow bar; a text label appears next to the icon at desktop widths,
   by direct request -- icon alone read as ambiguous
   ("непонятно пользователю"). ---- */
.se-trip-icon {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--se-space-2);
	height: 38px;
	padding: 0 var(--se-space-2);
	border-radius: var(--se-radius-pill);
	color: var(--se-text);
	transition: background 0.15s ease;
	/* .se-header (this icon's sticky ancestor) is position:sticky with a
	   backdrop-filter blur -- iOS Safari has a known class of bugs where
	   descendants of a sticky + backdrop-filter element fail to paint on
	   the very first frame and only catch up once a touch/scroll forces
	   a repaint. Promoting this element to its own compositing layer up
	   front sidesteps that path entirely; a no-op everywhere else. */
	transform: translateZ(0);
}

.se-trip-icon:hover {
	background: var(--se-bg-alt);
}

.se-trip-icon__icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	/* iOS Safari fix: this wrapper's size was never a problem, but the
	   bare <svg viewBox="0 0 24 24"> inside it (se_render_trip_icon()
	   calls se_trip_suitcase_svg() with no class, so nothing sized the
	   <svg> itself) had no explicit width/height anywhere -- unlike the
	   button variant, which does (.se-trip-btn__icon svg below). A
	   viewBox-only replaced element with no intrinsic size, centered in
	   a flexbox, can resolve to a zero/undefined box on the very first
	   layout pass and only get corrected on a later reflow -- which any
	   tap near it forces, matching the reported "invisible on hard
	   reload, appears after a tap" symptom exactly. Sizing the <svg>
	   itself here (not just its wrapper) removes the ambiguity outright,
	   the same fix already applied on .se-trip-btn__icon svg. */
}

.se-trip-icon__icon-wrap svg {
	display: block;
	width: 22px;
	height: 22px;
}

.se-trip-icon__label {
	display: none;
	white-space: nowrap;
	font-size: 0.8rem;
	font-weight: 600;
}

/* Threshold matches .se-header__bar's own mobile/desktop breakpoint in
   base.css (raised 999->1440px 2026-08-28, see the v1-v5 comment there
   for the full history -- short version: the header bar's max-width was
   capped sitewide at 1180px by the .se-container class it also
   carries, which is the real reason nav+utils kept not fitting no
   matter how high earlier passes raised this number; desktop now
   uncaps that width directly, and 1440px is the real, verified minimum
   once it's uncapped). Below this width the mobile hamburger layout
   (where this icon is icon-only, no label, same as always) runs
   instead. */
@media (min-width: 1440px) {
	.se-trip-icon__label {
		display: inline;
	}

	.se-trip-icon {
		padding: 0 var(--se-space-3) 0 var(--se-space-2);
	}
}

.se-trip-icon__badge {
	position: absolute;
	top: -8px;
	right: -9px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	/* was var(--se-accent) (#B9723F) -- white on it is only ~3.4:1, fails
	   WCAG for this 10px text. --se-primary (dark chocolate) is ~10:1. */
	background: var(--se-primary);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
}

@keyframes seTripWobble {
	0%, 100% { transform: rotate(0deg); }
	15% { transform: rotate(-14deg); }
	30% { transform: rotate(10deg); }
	45% { transform: rotate(-8deg); }
	60% { transform: rotate(5deg); }
	75% { transform: rotate(-3deg); }
	90% { transform: rotate(2deg); }
}

.se-trip-icon.is-wobbling {
	animation: seTripWobble 0.6s ease-in-out;
	transform-origin: 50% 80%;
}

/* ==========================================================================
   /my-trip/ page
   ========================================================================== */
.se-trip-page-hero {
	padding-block: var(--se-space-8) var(--se-space-6);
	text-align: center;
}

.se-trip-page-hero h1 {
	margin: 0 0 var(--se-space-3);
}

.se-trip-page-hero p {
	color: var(--se-text-muted);
	max-width: 560px;
	margin-inline: auto;
}

.se-trip-count {
	margin-top: var(--se-space-3);
	font-weight: 600;
	color: var(--se-accent);
}

.se-trip-empty {
	text-align: center;
	padding: var(--se-space-8) var(--se-space-5);
	max-width: 620px;
	margin-inline: auto;
}

.se-trip-empty__icon {
	width: 56px;
	height: 56px;
	color: var(--se-accent);
	margin-bottom: var(--se-space-4);
}

.se-trip-empty h2 {
	margin: 0 0 var(--se-space-3);
}

.se-trip-empty > p {
	color: var(--se-text-muted);
	margin-bottom: var(--se-space-6);
}

/* Numbered steps -- same visual language as the numbered push-card lists
   elsewhere on the site (se-route-push-grid) and the item badges in the
   trip email, just simpler (no photo). Left-aligned unlike the rest of
   this centered empty-state block -- a wall of centered body text reads
   worse than a left-aligned list once there's this much of it. */
.se-trip-empty__steps {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--se-space-5);
	margin: 0 0 var(--se-space-7);
	padding: var(--se-space-5);
	background: var(--se-surface);
	border-radius: var(--se-radius-card);
	box-shadow: var(--se-shadow-soft);
}

.se-trip-empty__step {
	display: flex;
	align-items: flex-start;
	gap: var(--se-space-4);
}

.se-trip-empty__step-num {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--se-accent);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
}

.se-trip-empty__step strong {
	display: block;
	color: var(--se-text);
	margin-bottom: var(--se-space-1);
}

.se-trip-empty__step p {
	margin: 0;
	color: var(--se-text-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

.se-trip-group {
	margin-bottom: var(--se-space-7);
}

.se-trip-group__title {
	margin-bottom: var(--se-space-4);
}

.se-trip-group__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--se-space-5);
}

@media (min-width: 640px) {
	.se-trip-group__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.se-trip-group__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.se-trip-card {
	position: relative;
	min-width: 0;
	background: var(--se-surface);
	border-radius: var(--se-radius-card);
	overflow: hidden;
	box-shadow: var(--se-shadow-soft);
	display: flex;
	flex-direction: column;
}

.se-trip-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
}

.se-trip-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.se-trip-card__noimg {
	width: 100%;
	height: 100%;
	background: var(--se-bg-alt);
}

.se-trip-card__body {
	padding: var(--se-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--se-space-2);
}

.se-trip-card__title {
	font-weight: 600;
	color: var(--se-text);
	text-decoration: none;
}

.se-trip-card__title:hover {
	color: var(--se-accent);
}

.se-trip-card__excerpt {
	margin: 0;
	font-size: 0.85rem;
	color: var(--se-text-muted);
}

/* Same top-right corner spot the suitcase button occupies on every other
   card sitewide -- red minus badge instead, since an item on this page
   is already-added by definition. */
.se-trip-card__remove {
	position: absolute;
	top: var(--se-space-3);
	right: var(--se-space-3);
	z-index: 2;
	/* Same Kadence button{} padding leak as .se-trip-btn--card above --
	   pin the full box model so it can't distort into an oval. */
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	max-width: 30px;
	max-height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: var(--se-critical);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(20, 14, 8, 0.28);
	transition: background 0.15s ease, transform 0.15s ease;
}

.se-trip-card__remove svg {
	width: 16px;
	height: 16px;
}

.se-trip-card__remove:hover {
	background: #7a332a;
	transform: scale(1.08);
}

.se-trip-email-block {
	margin-top: var(--se-space-8);
	padding: var(--se-space-6);
	background: var(--se-surface-warm);
	border-radius: var(--se-radius-card);
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

.se-trip-email-block h2 {
	margin: 0 0 var(--se-space-2);
}

.se-trip-email-block p {
	color: var(--se-text-muted);
	margin-bottom: var(--se-space-4);
}

#se-trip-email-form {
	display: flex;
	gap: var(--se-space-2);
}

#se-trip-email-form input[type="email"] {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius-sm);
	padding: var(--se-space-3) var(--se-space-4);
	font: inherit;
	background: var(--se-bg);
	color: var(--se-text);
}

#se-trip-email-form button[type="submit"] {
	white-space: nowrap;
}

@media (max-width: 480px) {
	#se-trip-email-form {
		flex-direction: column;
	}
}

.se-trip-email-disclosure {
	margin: var(--se-space-3) 0 0;
	font-size: 0.78rem;
	color: var(--se-text-muted);
	opacity: 0.85;
}

.se-trip-email-status {
	margin-top: var(--se-space-3);
	font-size: 0.85rem;
}

.se-trip-email-status.is-success {
	color: #3a7d44;
}

.se-trip-email-status.is-error {
	color: var(--se-critical);
}

/* ==========================================================================
   Trip Cost Calculator — sitewide access points (header icon shares
   .se-trip-icon above wholesale via a second class on the same element, no
   extra CSS needed there). Mobile bottom tab + per-article CTA button below.
   ========================================================================== */

/* Compact bottom tab — content-sized (not full-width), flush against the
   viewport's bottom edge with rounded top corners so it visibly "protrudes"
   upward, centered. Hidden ≥1000px (desktop already has the header icon);
   also never rendered at all on the calculator's own page
   (se_render_calc_mobile_tab() returns early there — see inc/trip-calculator.php). */
.se-calc-tab {
	display: none;
}

@media (max-width: 999px) {
	.se-calc-tab {
		display: flex;
		align-items: center;
		gap: 6px;
		position: fixed;
		left: 50%;
		bottom: 0;
		z-index: 150; /* below .se-cookie-banner's 200, so a still-visible
		                 cookie banner always wins if both are on screen */
		transform: translateX(-50%);
		padding: 10px 18px 8px;
		border-radius: 14px 14px 0 0;
		background: var(--se-primary);
		color: #fff;
		font-size: 0.78rem;
		font-weight: 600;
		white-space: nowrap;
		box-shadow: 0 -2px 10px rgba(42, 36, 28, 0.18);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.se-calc-tab[hidden] {
		display: none;
	}

	.se-calc-tab.is-dismissing {
		opacity: 0;
		transform: translateX(-50%) translateY(100%);
	}
}

.se-calc-tab__icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

/* The cookie banner is bottom-anchored on mobile too (base.css,
   @media max-width:560px) with only var(--se-space-4) clearance from the
   true edge — not enough room for the tab above, which sits flush against
   that same edge. Push the banner up sitewide (the tab is present on every
   template except the calculator page itself) using a compound selector
   (body .se-cookie-banner, 0,1,1) rather than relying on source order to
   beat base.css's bare .se-cookie-banner (0,1,0) — this project has been
   bitten by that exact specificity-vs-source-order class of bug too many
   times to risk it again. A harmless few extra pixels of clearance on the
   rare page where the tab has been swiped away this session is an
   acceptable trade for not hand-wiring JS coordination between two
   independent fixed elements. */
@media (max-width: 560px) {
	body .se-cookie-banner {
		bottom: calc(var(--se-space-4) + 52px);
	}
}

/* ==========================================================================
   "Estimate this trip" promo box (se_render_trip_estimate_cta() in
   inc/trip-calculator.php — see there for exactly which article/hub types
   get it). Moved up from a plain link at the very end of the article to a
   boxed CTA near the TOP, by direct request ("подними наверх... сделай
   небольшой бокс... текст может огибать этот бокс"). Two rounds of
   iteration on HOW it sits in an article, both from direct feedback with
   screenshots:
   Round 1 tried a real CSS float (--float below, kept for reference —
   currently unused by any template) so paragraphs would wrap beside it.
   Worked when an article opened with a plain paragraph/callout, but most
   of these templates open with an <h2> ("Quick overview"), which the
   sitewide ".se-prose h2{clear:both}" rule correctly pushes below any
   float — so the box often sat alone with dead space beside it, or (once
   repositioned via JS to float beside the first list instead) visibly
   squeezed/deformed whatever callout happened to end up next to it
   ("И снова плохо! Ломает структуру").
   Round 2 (this one) is now the default for every caller: a plain
   horizontal band, no float at all — big icon, heading + text, button,
   one row — matching what page-hub.php's winter/cycling hubs already
   used, just enlarged per the explicit ask ("большая иконка"). Simpler,
   and nothing left to "break" since it doesn't interact with surrounding
   floats/callouts at all. Exact placement ("сразу после квик овервью")
   is handled by placeTripCtaBand() in trip-planner.js, not by PHP
   parsing the_content() — see that function's own comment.
   Visual language matches #se-insurance-widget's "clean card" redesign
   (base.css) rather than the dark .se-guide-promo lead-magnet band —
   deliberately: that dark card already means "free guide", reusing it
   here would read as the same offer.
   ========================================================================== */
.se-trip-cta-box {
	background: var(--se-surface);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius-card);
	box-shadow: var(--se-shadow-soft);
	padding: var(--se-space-5);
}

.se-trip-cta-box__icon {
	width: 34px;
	height: 34px;
	border-radius: var(--se-radius-pill);
	background: var(--se-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: var(--se-space-3);
}

.se-trip-cta-box__icon svg {
	width: 18px;
	height: 18px;
	color: var(--se-accent);
}

/* Double-class selectors: the sitewide ".se h1,h2,h3,h4{color:var(--se-text)}"
   and ".se-prose p{color:var(--se-text-soft)}" rules (both 0,1,1) would
   otherwise beat a single-class heading/text rule (0,1,0) here, same bug
   class documented elsewhere in this file (.se-guide-promo, etc.). */
.se-trip-cta-box .se-trip-cta-box__heading {
	font-size: 1.05rem;
	margin: 0 0 var(--se-space-2);
}

.se-trip-cta-box .se-trip-cta-box__text {
	color: var(--se-text-soft);
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0 0 var(--se-space-4);
}

.se-trip-cta-box__link {
	width: 100%;
	justify-content: center;
}

/* --float: unused by any template as of this pass (see the block comment
   above) — kept, not deleted, in case a future spot genuinely calls for
   a wrapping pull-box again. */
.se-trip-cta-box--float {
	margin: 0 0 var(--se-space-5);
}

@media (min-width: 620px) {
	.se-trip-cta-box--float {
		float: right;
		width: 260px;
		margin: 0 0 var(--se-space-5) var(--se-space-6);
	}
}

/* --band: the default now for every template. Full-width horizontal
   card — icon, heading + text, button, one row. */
.se-trip-cta-box--band {
	display: flex;
	align-items: center;
	gap: var(--se-space-5);
	max-width: var(--se-container-narrow);
	margin: var(--se-space-6) auto var(--se-space-2);
}

/* Big icon, by direct request ("большая иконка") -- noticeably larger
   than --float's small corner icon (which this variant no longer uses
   at all), since the whole point of a horizontal band is that the icon
   reads as its own visual anchor on the left, not a small decoration. */
.se-trip-cta-box--band .se-trip-cta-box__icon {
	width: 56px;
	height: 56px;
	margin-bottom: 0;
}

.se-trip-cta-box--band .se-trip-cta-box__icon svg {
	width: 28px;
	height: 28px;
}

.se-trip-cta-box--band .se-trip-cta-box__body {
	flex: 1 1 auto;
	min-width: 0;
}

.se-trip-cta-box--band .se-trip-cta-box__heading,
.se-trip-cta-box--band .se-trip-cta-box__text {
	margin-bottom: var(--se-space-1);
}

.se-trip-cta-box--band .se-trip-cta-box__link {
	width: auto;
	flex-shrink: 0;
}

@media (max-width: 620px) {
	.se-trip-cta-box--band {
		flex-direction: column;
		align-items: flex-start;
	}
	.se-trip-cta-box--band .se-trip-cta-box__icon {
		width: 48px;
		height: 48px;
	}
	.se-trip-cta-box--band .se-trip-cta-box__icon svg {
		width: 24px;
		height: 24px;
	}
	.se-trip-cta-box--band .se-trip-cta-box__link {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   "Where to base yourself" affiliate box (se_render_stay_cta() in
   inc/template-tags.php). Movement 1 of the 2026-09 affiliate-visibility
   rework — hoists the hotel-booking option from ~30% down the article to
   right after the Quick-overview block (placeTripCtaBand() in
   trip-planner.js handles the move, same as the Trip-estimate band; the
   two are mutually exclusive and never both render on a page).
   Deliberately NOT the same look as .se-trip-cta-box (neutral white
   "clean card" = "plan your budget, a tool") — this one is warm-tinted
   with an accent rule so a reader reads it as "a booking prompt", a
   different kind of thing. Lives in trip-planner.css because that
   stylesheet already loads sitewide unconditionally (functions.php:168).
   ========================================================================== */
.se-stay-cta-box {
	display: flex;
	align-items: center;
	gap: var(--se-space-5);
	max-width: var(--se-container-narrow);
	margin: var(--se-space-6) auto var(--se-space-2);
	background: var(--se-surface-warm);
	border: 1px solid var(--se-border);
	border-left: 3px solid var(--se-accent);
	border-radius: var(--se-radius-card);
	box-shadow: var(--se-shadow-soft);
	padding: var(--se-space-5);
}

.se-stay-cta-box__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--se-radius-pill);
	background: var(--se-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.se-stay-cta-box__icon svg {
	width: 26px;
	height: 26px;
	color: var(--se-accent);
}

.se-stay-cta-box__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Double-class selectors: the sitewide ".se h1,h2,h3,h4{color:var(--se-text)}"
   and ".se-prose p{color:var(--se-text-soft)}" rules (both 0,1,1) would
   otherwise beat a single-class rule here — same specificity-vs-source-order
   class of bug documented throughout this file. */
.se-stay-cta-box .se-stay-cta-box__eyebrow {
	color: var(--se-accent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 var(--se-space-1);
}

.se-stay-cta-box .se-stay-cta-box__heading {
	font-size: 1.05rem;
	margin: 0 0 var(--se-space-1);
}

.se-stay-cta-box .se-stay-cta-box__text {
	color: var(--se-text-soft);
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0 0 var(--se-space-3);
}

.se-stay-cta-box__link {
	width: auto;
	flex-shrink: 0;
}

@media (max-width: 620px) {
	.se-stay-cta-box {
		flex-direction: column;
		align-items: flex-start;
	}
	.se-stay-cta-box__icon {
		width: 48px;
		height: 48px;
	}
	.se-stay-cta-box__icon svg {
		width: 24px;
		height: 24px;
	}
	.se-stay-cta-box__link {
		width: 100%;
		justify-content: center;
	}
}