/*
 * Room IPTV Pro — interaction & motion layer.
 * Loaded on the front end only (not the editor), so entrance states never hide
 * content in the editor. Entrance hiding is gated behind `.fk-js` so the page
 * is fully visible if JavaScript is unavailable, and all motion is disabled
 * under prefers-reduced-motion.
 */

/* Smooth in-page anchor scrolling (hero CTAs jump to #services / #contact). */
html {
	scroll-behavior: smooth;
}

/* --- Layout: stack header / sections / footer flush (no blockGap strips) --- */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Subtle hairline dividers between stacked full-width sections for definition. */
.fk-divide {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Separate the (dark) header and footer from adjacent (dark) sections. */
.wp-site-blocks > header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-site-blocks > footer {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand: footer links are white, no underline (column links get an animated underline below). */
.wp-site-blocks > footer a {
	color: var(--wp--preset--color--white, #FFFFFF);
	background-image: none;
	text-decoration: none;
}

.wp-site-blocks > footer a:hover {
	color: var(--wp--preset--color--primary, #0057D9);
}

/* Footer column lists: drop the bullets. */
.wp-site-blocks > footer .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Column links get the same animated underline as the header nav (white text, purple line). */
.wp-site-blocks > footer .wp-block-list a {
	position: relative;
	display: inline-block;
}

.wp-site-blocks > footer .wp-block-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--primary, #0057D9);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-site-blocks > footer .wp-block-list a:hover,
.wp-site-blocks > footer .wp-block-list a:focus-visible {
	color: var(--wp--preset--color--white, #FFFFFF);
}

.wp-site-blocks > footer .wp-block-list a:hover::after,
.wp-site-blocks > footer .wp-block-list a:focus-visible::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > footer .wp-block-list a::after {
		transition: none;
	}
}

/* Hero: tall, vertically-centred, with a faint Room Blue glow from top-centre.
   Padding/height live here (not inline) so they can shrink on mobile. */
.fk-hero {
	min-height: clamp( 560px, 82vh, 900px );
	padding-block: var( --wp--preset--spacing--70 );
	background-image: radial-gradient( 120% 75% at 50% 0%, rgba(0, 87, 217, 0.1 ), rgba(0, 87, 217, 0 ) 60% );
}

/* Belt-and-braces: never let a full-bleed child cause horizontal page scroll. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Sticky footer: footer always anchors to the bottom, so no page background shows
   below it on short pages — the footer's last band is the page's bottom edge. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Shorter, tighter hero on phones. */
@media (max-width: 600px) {
	.fk-hero {
		min-height: 64vh;
		padding-block: var( --wp--preset--spacing--50 );
	}
}

/* Tablet & phone: keep the header on one line — hide the CTA button (still reachable
   in the menu) and cap the logo so logo + menu toggle always fit. !important beats the
   block-library `.wp-block-buttons { display:flex }` rule. */
@media (max-width: 781.98px) {
	.fk-header-cta {
		display: none !important;
	}

	.wp-site-blocks > header .wp-block-site-logo,
	.wp-site-blocks > header .wp-block-site-logo img {
		max-width: 150px;
	}
}

/* Trust bar / header top-strip: one cohesive line with thin dividers between items. */
.fk-trustbar > * {
	margin: 0;
	padding-inline: 1.25rem;
}

.fk-trustbar > * + * {
	border-inline-start: 1px solid rgba(1, 5, 24, 0.28 );
}

@media (max-width: 600px) {
	.fk-trustbar > * + * {
		border-inline-start: 0;
	}
}

/* --- Premium dark surfaces & depth --- */
.fk-card {
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.fk-card:hover {
	border-color: rgba(0, 87, 217, 0.45);
}

/* Clickable affordances. */
a,
.wp-block-button__link,
.wp-block-navigation-item__content {
	cursor: pointer;
}

/* --- Hover micro-interactions (150–300ms, color shift + subtle lift) --- */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	will-change: transform;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 87, 217, 0.28);
}

.wp-block-navigation-item__content {
	transition: color 0.2s ease, opacity 0.2s ease;
}

.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary, #0057D9);
}

/* Cards (service / feature / product columns get .fk-card). */
.fk-card {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fk-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(1, 5, 24, 0.22);
}

/* Image zoom-on-hover containers get .fk-zoom. */
.fk-zoom {
	overflow: hidden;
}

.fk-zoom img {
	transition: transform 0.4s ease;
	will-change: transform;
}

.fk-zoom:hover img {
	transform: scale(1.05);
}

/* --- Entrance animations (gated by .fk-js, revealed by IntersectionObserver) --- */
.fk-js .fk-animate {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fk-js .fk-animate.is-visible {
	opacity: 1;
	transform: none;
}

/* Stagger children of a .fk-stagger container as it enters. */
.fk-js .fk-stagger > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.fk-js .fk-stagger.is-visible > * {
	opacity: 1;
	transform: none;
}

.fk-js .fk-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.fk-js .fk-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.fk-js .fk-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }

/* When GSAP drives the reveals, disable the CSS transitions so they don't fight it. */
.fk-gsap .fk-animate,
.fk-gsap .fk-stagger > * {
	transition: none !important;
}

/* --- Respect users who prefer reduced motion: kill all motion. --- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.fk-js .fk-animate,
	.fk-js .fk-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.wp-block-button__link,
	.fk-card,
	.fk-zoom img {
		transition: none !important;
	}

	.wp-block-button__link:hover,
	.fk-card:hover {
		transform: none !important;
	}

	.fk-zoom:hover img {
		transform: none !important;
	}
}

/* --- Reviews: click-and-drag horizontal scroll (testimonials) --- */
.fk-reviews {
	overflow: hidden;
	cursor: grab;
	padding-block: 20px; /* room for the card hover-lift + shadow */
	touch-action: pan-y; /* horizontal gesture = drag (JS); vertical = page scroll */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 4%, #000 96%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 4%, #000 96%, transparent );
}

.fk-reviews.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.fk-reviews-track {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
	width: max-content;
	will-change: transform;
}

.fk-slide {
	flex: 0 0 auto;
	width: min(296px, 82vw);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background-color: var(--wp--preset--color--surface, #0E1526);
	color: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.fk-stars {
	color: #8CC4F2;
	letter-spacing: 3px;
	font-size: 1.05rem;
	line-height: 1;
}

.fk-quote {
	margin: 0;
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.fk-reviewer {
	margin: 0;
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.fk-reviewer-name {
	color: var(--wp--preset--color--primary, #0057D9);
}

/* --- Hero: shorter so the device-logos marquee sits within the first viewport --- */
.fk-hero {
	min-height: clamp( 420px, 66vh, 680px );
	padding-block: var( --wp--preset--spacing--60 );
}

/* --- Device logos: infinite marquee (under hero) --- */
.fk-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 7%, #000 93%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 7%, #000 93%, transparent );
}

.fk-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: fk-marquee 60.7s linear infinite;
}

.fk-marquee:hover .fk-marquee-track {
	animation-play-state: paused;
}

.fk-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-right: 3.5rem; /* trailing margin (not flex gap) keeps the -50% loop seamless */
	flex: 0 0 auto;
}

.fk-logo img {
	height: 26px;
	width: auto;
	opacity: 0.8;
	flex: 0 0 auto;
}

.fk-logo span {
	font-family: var( --wp--preset--font-family--urbanist );
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var( --wp--preset--color--white );
	opacity: 0.85;
	white-space: nowrap;
}

@keyframes fk-marquee {
	from { transform: translateX( 0 ); }
	to { transform: translateX( -50% ); }
}

/* --- Header nav: animated underline on hover/focus --- */
.wp-site-blocks > header .wp-block-navigation-item__content {
	position: relative;
}

.wp-site-blocks > header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 100%;
	height: 2px;
	background: var( --wp--preset--color--primary );
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.25s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.wp-site-blocks > header .wp-block-navigation-item__content:hover,
.wp-site-blocks > header .wp-block-navigation-item__content:focus-visible {
	color: var( --wp--preset--color--white );
}

.wp-site-blocks > header .wp-block-navigation-item__content:hover::after,
.wp-site-blocks > header .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX( 1 );
}

/* --- Header CTA: 20% smaller than the default button --- */
.fk-header-cta .wp-block-button__link {
	font-size: 0.85rem;
	padding: 0.68rem 1.48rem;
}

@media (prefers-reduced-motion: reduce) {
	.fk-marquee-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}

	.wp-site-blocks > header .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* --- FAQ accordions (core/details) --- */
.fk-faq.wp-block-details {
	background-color: var(--wp--preset--color--surface, #0E1526);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
}

.fk-faq.wp-block-details > summary {
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--h6);
	color: var(--wp--preset--color--white, #FFFFFF);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* Padding lives on the summary so the entire header row is clickable. */
	padding: var(--wp--preset--spacing--40);
	transition: background-color 0.25s ease;
}

.fk-faq.wp-block-details > summary:hover,
.fk-faq.wp-block-details[open] > summary {
	background-color: rgba(255, 255, 255, 0.04);
}

.fk-faq.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* Plus / minus affordance that flips when open. */
.fk-faq.wp-block-details > summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--primary, #0057D9);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fk-faq.wp-block-details[open] > summary::after {
	transform: rotate(135deg); /* "+" rotates into a close "x" */
}

.fk-faq.wp-block-details > summary:hover,
.fk-faq.wp-block-details > summary:focus-visible {
	color: var(--wp--preset--color--primary, #0057D9);
}

.fk-faq.wp-block-details > *:not(summary) {
	margin-top: 0;
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted-text, #AEB3C2);
}

/* Smooth reveal of the answer when an item opens. */
.fk-faq.wp-block-details[open] > *:not(summary) {
	animation: fk-faq-open 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fk-faq-open {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fk-faq.wp-block-details > summary::after {
		transition: none;
	}

	.fk-faq.wp-block-details[open] > *:not(summary) {
		animation: none;
	}
}

/* --- Device pills (linked chips under the devices copy) --- */
.fk-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--40);
}

.fk-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface, #0E1526);
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.fk-pill:hover,
.fk-pill:focus-visible {
	background-color: var(--wp--preset--color--primary, #0057D9);
	border-color: var(--wp--preset--color--primary, #0057D9);
	color: var(--wp--preset--color--white, #FFFFFF);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.fk-pill {
		transition: none;
	}
}

/* --- Footer payment icons (in the gradient copyright bar) --- */
.fk-payments {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.1rem;
}

.fk-payments img {
	height: 24px;
	width: auto;
	opacity: 0.95;
}

/* --- Pricing cards (pricing page) --- */
.fk-price-card {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Highlight the most-popular plan with a gradient ring and a slight lift. */
.fk-price-card--featured {
	background:
		linear-gradient(var(--wp--preset--color--surface, #0E1526), var(--wp--preset--color--surface, #0E1526)) padding-box,
		linear-gradient(85deg, #0057D9 0%, #002D85 100%) border-box;
	border: 1.5px solid transparent;
	box-shadow: 0 22px 50px rgba(1, 5, 24, 0.35);
}

@media (min-width: 782px) {
	.fk-price-card--featured {
		transform: translateY(-12px);
	}

	.fk-price-card--featured:hover {
		transform: translateY(-18px);
	}
}

.fk-price-head {
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.fk-badge {
	display: inline-block;
	margin-bottom: 0.9rem;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand, linear-gradient(85deg, #0057D9 0%, #002D85 100%));
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.fk-price-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 700;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--white, #FFFFFF);
}

.fk-price-amount {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 3.25rem);
	line-height: 1;
	color: var(--wp--preset--color--white, #FFFFFF);
}

.fk-price-per {
	margin: 0.35rem 0 0;
	color: var(--wp--preset--color--primary, #0057D9);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.fk-price-note {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--muted-text, #AEB3C2);
	font-size: 0.95rem;
}

.fk-check-list {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	flex: 1 0 auto;
}

.fk-check {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: var(--wp--preset--color--white, #FFFFFF);
	font-size: 1rem;
	line-height: 1.4;
}

.fk-check-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 1px;
}

.fk-price-cta {
	margin-top: auto;
}

.fk-price-cta .wp-block-button,
.fk-price-cta .wp-block-button__link {
	width: 100%;
}

.fk-price-cta .wp-block-button__link {
	text-align: center;
}

/* --- Stats row (about / channels pages) --- */
.fk-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
	text-align: center;
}

.fk-stat__num {
	display: block;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 1.875rem);
	line-height: 1.15;
	text-wrap: balance;
	background: var(--wp--preset--gradient--brand, linear-gradient(85deg, #0057D9 0%, #002D85 100%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wp--preset--color--primary, #0057D9);
}

.fk-stat__label {
	display: block;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--muted-text, #AEB3C2);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

@media (max-width: 781px) {
	.fk-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* --- Numbered step badge (free-trial / setup-guides "how it works") --- */
.fk-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand, linear-gradient(85deg, #0057D9 0%, #002D85 100%));
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 800;
	font-size: 1.25rem;
}

/* --- Contact method cards --- */
.fk-contact-card .fk-icon {
	display: inline-flex;
	margin-bottom: 0.5rem;
}

.fk-contact-card a {
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 1.0625rem;
	word-break: break-word;
}

/* --- Setup-guide device cards --- */
.fk-guide-card {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.85rem;
}

.fk-guide-card img {
	height: 40px;
	width: auto;
}

.fk-guide-card .fk-guide-name {
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.fk-guide-card .fk-guide-link {
	color: var(--wp--preset--color--primary, #0057D9);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* --- Long-form prose (legal pages + single blog posts) --- */
/* Site is dark (navy bg / white text), so body copy stays white on navy. */
.fk-legal,
.fk-prose {
	color: var(--wp--preset--color--white, #FFFFFF);
}

.fk-legal p,
.fk-legal li,
.fk-prose p,
.fk-prose li {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.fk-legal h2,
.fk-prose h2 {
	font-family: var(--wp--preset--font-family--urbanist);
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 2.75rem;
	margin-bottom: 0.75rem;
}

.fk-legal h3,
.fk-prose h3 {
	font-family: var(--wp--preset--font-family--urbanist);
	font-size: var(--wp--preset--font-size--h6);
	font-weight: 600;
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

/* First block shouldn't push a big gap under the title band. */
.fk-legal .wp-block-post-content > :first-child,
.fk-prose .wp-block-post-content > :first-child {
	margin-top: 0;
}

.fk-legal ul,
.fk-legal ol,
.fk-prose ul,
.fk-prose ol {
	padding-left: 1.35rem;
	margin: 0.75rem 0 1.25rem;
}

.fk-legal li,
.fk-prose li {
	margin-bottom: 0.5rem;
}

.fk-legal a,
.fk-prose a {
	color: var(--wp--preset--color--primary, #0057D9);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.fk-legal a:hover,
.fk-legal a:focus-visible,
.fk-prose a:hover,
.fk-prose a:focus-visible {
	color: #8CC4F2;
}

.fk-legal hr,
.fk-prose hr {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin: 2.5rem 0;
}

/* --- Blog post grid: equal-height cards --- */
/* The grid stretches each <li> to the tallest in its row; make the card
   fill that height and pin the date to the bottom so cards line up. */
.fk-blog-grid > li {
	display: flex;
}

.fk-blog-grid > li > .fk-card {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.fk-blog-grid .wp-block-post-date {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* --- Blog pagination: branded buttons --- */
.fk-pagination {
	gap: 0.5rem;
	flex-wrap: wrap;
}

.fk-pagination .page-numbers,
.fk-pagination .wp-block-query-pagination-previous,
.fk-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	background-color: var(--wp--preset--color--surface, #0E1526);
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fk-pagination a.page-numbers:hover,
.fk-pagination a.page-numbers:focus-visible,
.fk-pagination .wp-block-query-pagination-previous:hover,
.fk-pagination .wp-block-query-pagination-previous:focus-visible,
.fk-pagination .wp-block-query-pagination-next:hover,
.fk-pagination .wp-block-query-pagination-next:focus-visible {
	border-color: var(--wp--preset--color--primary, #0057D9);
	background-color: var(--wp--preset--color--surface-2, #16203A);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 87, 217, 0.25);
}

/* Current page — brand gradient fill. */
.fk-pagination .page-numbers.current {
	background: var(--wp--preset--gradient--brand, linear-gradient(85deg, #0057D9 0%, #002D85 100%));
	border-color: transparent;
	color: var(--wp--preset--color--white, #FFFFFF);
}

/* Ellipsis between number ranges — plain, not a button. */
.fk-pagination .page-numbers.dots {
	min-width: auto;
	padding: 0.5rem 0.35rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--muted-text, #AEB3C2);
}

@media (prefers-reduced-motion: reduce) {
	.fk-pagination .page-numbers,
	.fk-pagination .wp-block-query-pagination-previous,
	.fk-pagination .wp-block-query-pagination-next {
		transition: none;
	}
}

/* --- Single post comments (legible on the dark theme) --- */
.fk-comments .wp-block-comment-template {
	list-style: none;
	padding-left: 0;
}

.fk-comments .comment-author .fn,
.fk-comments .wp-block-comment-author-name a {
	color: var(--wp--preset--color--white, #FFFFFF);
}

.fk-comments label {
	color: var(--wp--preset--color--muted-text, #AEB3C2);
	font-size: 0.9rem;
}

.fk-comments input[type="text"],
.fk-comments input[type="email"],
.fk-comments input[type="url"],
.fk-comments textarea {
	width: 100%;
	max-width: 100%;
	margin-top: 0.35rem;
	padding: 0.7rem 0.9rem;
	background-color: var(--wp--preset--color--surface, #0E1526);
	color: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--hanken);
}

.fk-comments input[type="text"]:focus,
.fk-comments input[type="email"]:focus,
.fk-comments input[type="url"]:focus,
.fk-comments textarea:focus {
	border-color: var(--wp--preset--color--primary, #0057D9);
	outline: none;
}

.fk-comments input[type="submit"],
.fk-comments .form-submit .submit {
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--gradient--brand, linear-gradient(85deg, #0057D9 0%, #002D85 100%));
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fk-comments input[type="submit"]:hover,
.fk-comments .form-submit .submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 87, 217, 0.28);
}

/* --- Category eyebrow (single post): styled, not a default underlined link --- */
.fk-eyebrow a {
	text-decoration: none;
}

.fk-eyebrow a:hover,
.fk-eyebrow a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Reading time (single post meta, next to the date) --- */
.fk-reading-time {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--muted-text, #AEB3C2);
	font-size: 0.875rem;
}

.fk-reading-time__icon {
	flex: 0 0 auto;
}

/* --- Single post hero: subtle depth so it reads apart from the content --- */
/* A soft brand glow over the navy + a hairline divider separate the title
   band from the (plain navy) content/featured-image area below it. */
.fk-post-hero {
	background-image: radial-gradient(120% 130% at 50% 0%, rgba(0, 87, 217, 0.18) 0%, rgba(1, 5, 24, 0) 58%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Breadcrumbs (single post) --- */
.fk-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--urbanist);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.fk-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--muted-text, #AEB3C2);
}

.fk-breadcrumbs__item:not(:last-child)::after {
	content: "/";
	color: rgba(255, 255, 255, 0.3);
}

.fk-breadcrumbs__item a {
	color: var(--wp--preset--color--muted-text, #AEB3C2);
	text-decoration: none;
	transition: color 0.2s ease;
}

.fk-breadcrumbs__item a:hover,
.fk-breadcrumbs__item a:focus-visible {
	color: var(--wp--preset--color--white, #FFFFFF);
}

.fk-breadcrumbs__item[aria-current="page"] {
	color: var(--wp--preset--color--white, #FFFFFF);
}

/* --- Key Takeaways callout (single post) --- */
.fk-takeaways {
	margin: 0;
	padding: 1.5rem 1.75rem;
	border: 1px solid rgba(0, 87, 217, 0.3);
	border-left: 4px solid var(--wp--preset--color--primary, #0057D9);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(0, 87, 217, 0.12) 0%, rgba(0, 87, 217, 0.04) 100%);
}

.fk-takeaways__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--white, #FFFFFF);
}

.fk-takeaways__icon {
	flex: 0 0 auto;
}

.fk-takeaways__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.fk-takeaways__list li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--wp--preset--color--white, #FFFFFF);
	font-size: 1rem;
	line-height: 1.5;
}

.fk-takeaways__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand, linear-gradient(85deg, #0057D9 0%, #002D85 100%));
}

/* --- Author box (single post) --- */
.fk-author .wp-block-post-author {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.fk-author .wp-block-post-author__avatar img {
	border-radius: 999px;
	display: block;
}

.fk-author .wp-block-post-author__byline {
	margin: 0;
	color: var(--wp--preset--color--primary, #0057D9);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.fk-author .wp-block-post-author__name {
	margin: 0.1rem 0;
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 700;
	font-size: 1.15rem;
}

.fk-author .wp-block-post-author__bio {
	margin: 0;
	color: var(--wp--preset--color--muted-text, #AEB3C2);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Product mockups (hero, player) — lift them off the Midnight ground. */
.fk-hero-mockup img {
	filter: drop-shadow(0 24px 60px rgba(0, 87, 217, 0.28));
}

/* =========================================================================
   Content pages (AEO): tables, quick-answer callout, prose rhythm.
   Professional dark-surface styling using brand tokens.
   ========================================================================= */

/* Quick-answer callout — lift it slightly and tighten inner rhythm. */
.fk-callout {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* Tables: rounded dark card, blue-accented header, zebra rows, tabular figures. */
.wp-block-table {
	overflow-x: auto;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: var(--wp--preset--color--surface, #0E1526);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	margin-inline: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table th,
.wp-block-table thead td {
	background: var(--wp--preset--color--surface-2, #16203A);
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left;
	padding: 0.9rem 1.15rem;
	border: 0;
}

.wp-block-table td {
	color: var(--wp--preset--color--white, #FFFFFF);
	padding: 0.85rem 1.15rem;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 1rem;
}

/* First column reads as a row label. */
.wp-block-table tbody td:first-child {
	font-weight: 600;
}

/* Zebra striping for scanability. */
.wp-block-table tbody tr:nth-child(even) td {
	background: rgba(255, 255, 255, 0.02);
}

.wp-block-table a {
	color: var(--wp--preset--color--blue-light, #8CC4F2);
}

.wp-block-table a:hover {
	color: var(--wp--preset--color--white, #FFFFFF);
}

/* Anchored H2s in content: don't hide under the sticky header on jump. */
.wp-block-post-content h2 {
	scroll-margin-top: 90px;
}

/* Content prose lists get comfortable spacing and branded markers. */
.wp-block-post-content .wp-block-list {
	line-height: 1.75;
}

.wp-block-post-content .wp-block-list li::marker {
	color: var(--wp--preset--color--primary, #0057D9);
}

/* =========================================================================
   Smarters Subscriptions Manager — Room IPTV Pro branding for the order popup + trial
   form. Overrides the plugin's default navy-blue dark theme with Room IPTV Pro tokens
   (Midnight / Surface / Room Blue, Poppins + Inter).
   ========================================================================= */

/* Backdrop = Midnight, not old navy. */
.ssm-modal-overlay { background: rgba(1, 5, 24, 0.82) !important; }

/* Modal card = Surface on Midnight. */
.ssm-modal-overlay.ssm-theme-dark .ssm-modal,
.ssm-modal { background: var(--wp--preset--color--surface, #0E1526) !important; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; }

/* Summary band (plan name + price) sits on Midnight for contrast. */
.ssm-modal .ssm-summary { background: var(--wp--preset--color--navy, #010518) !important; }
.ssm-modal .ssm-summary h3,
.ssm-modal-body h3,
.ssm-thankyou h3 { font-family: var(--wp--preset--font-family--urbanist, Poppins), sans-serif !important; color: #fff !important; }
.ssm-modal .ssm-price { color: var(--wp--preset--color--primary, #0057D9) !important; font-family: var(--wp--preset--font-family--urbanist, Poppins), sans-serif !important; }

/* Labels. */
.ssm-theme-dark .ssm-field label,
.ssm-theme-dark .ssm-radio label { color: #E7EAF0 !important; font-family: var(--wp--preset--font-family--hanken, Inter), sans-serif; font-weight: 500; }

/* Inputs & selects = Midnight fields with Room Blue border, Room Blue focus. */
.ssm-theme-dark .ssm-field input,
.ssm-theme-dark .ssm-field select {
	background: var(--wp--preset--color--navy, #010518) !important;
	color: #fff !important;
	border: 1px solid #16203A !important;
	border-radius: 8px !important;
	font-family: var(--wp--preset--font-family--hanken, Inter), sans-serif !important;
}
.ssm-theme-dark .ssm-field input:focus,
.ssm-theme-dark .ssm-field select:focus {
	border-color: var(--wp--preset--color--primary, #0057D9) !important;
	outline: 2px solid rgba(0, 87, 217, 0.35) !important;
	outline-offset: 1px;
}
.ssm-theme-dark .ssm-field input::placeholder { color: #7E8699 !important; }
.ssm-theme-dark .ssm-field select option { background: var(--wp--preset--color--surface, #0E1526) !important; color: #fff !important; }

/* Submit / action button = Room Blue, Poppins uppercase like the site buttons. */
.ssm-btn {
	background: var(--wp--preset--color--primary, #0057D9) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 6px !important;
	font-family: var(--wp--preset--font-family--urbanist, Poppins), sans-serif !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding: 0.85rem 1.85rem !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ssm-btn:hover { background: var(--wp--preset--color--blue-deep, #002D85) !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 87, 217, 0.28); }

/* Close button + WhatsApp / success accents. */
.ssm-modal-close { color: #fff !important; opacity: 0.8; }
.ssm-modal-close:hover { opacity: 1; }
.ssm-trial-form.ssm-theme-dark .ssm-form-message.ssm-success,
.ssm-modal-overlay.ssm-theme-dark .ssm-thankyou p { color: #C9CBD6 !important; }

/* Footer payment methods (Bank transfer · Remitly · Crypto). */
.fk-payments { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
.fk-pay { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--wp--preset--font-family--hanken, Inter), sans-serif; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.fk-pay img { display: block; opacity: 0.95; }


/* --- Ordered step rows (setup "fix buffering"). Reuses the .fk-step-num badge
   visual via a CSS counter so the block stays a semantic <ol> for search and
   AI parsers, while matching the surface/border treatment of .fk-card. --- */
.fk-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	counter-reset: fk-step;
	text-align: left;
}

.fk-steps > li {
	counter-increment: fk-step;
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-radius: 12px;
	background: var(--wp--preset--color--surface, #0E1526);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.fk-steps > li::before {
	content: counter(fk-step);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand, linear-gradient(85deg, #0057D9 0%, #002D85 100%));
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1;
}

.fk-step-body {
	flex: 1 1 auto;
}

.fk-step-title {
	display: block;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 700;
	color: var(--wp--preset--color--white, #FFFFFF);
	margin-bottom: 0.25rem;
}

.fk-step-desc {
	display: block;
	color: var(--wp--preset--color--muted-text, #AEB3C2);
	line-height: 1.6;
}

.fk-steps a {
	color: var(--wp--preset--color--primary, #0057D9);
}

@media (max-width: 600px) {
	.fk-steps > li {
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--30);
	}
}

/* Check-list as a standalone card (contact "before you contact us"): drop the
   trailing margin that the pricing-card variant relies on. */
.fk-checks-card .fk-check-list {
	margin-bottom: 0;
}


/* Heading directly above a check-list (free-trial "What you get in your trial").
   WP's blockGap rule `:root :where(.is-layout-constrained) > *` is specificity
   0,1,0 — an exact tie with .fk-check-list, so the later-loading theme rule wins
   and its `margin: 0 0 …` cancels the list's margin-block-start, while the same
   WP rule zeroes the heading's margin-block-end. That collapses the gap to zero.
   Restore it to spacing--40 (1.5rem), the blockGap value that was intended.
   Scoped to a heading sibling so pricing cards (list follows .fk-price-per) are
   untouched. */
:is(h2, h3, h4) + .fk-check-list {
	margin-top: var(--wp--preset--spacing--40);
}


/* --- SSM forms: keep every control on a common baseline ---
   .ssm-order-form is a two-up flex-wrap grid (`> .ssm-field { width: calc(50% - 8px) }`)
   and each field stacks a block <label> above its control. If one label in a row wraps
   to two lines and its partner does not, the two controls start at different heights and
   the grid looks broken. Making each field a flex column and pushing the control to the
   bottom aligns the controls in a row whatever the label height. Field boxes already
   stretch to equal height (the container's default `align-items: stretch`), so this is
   purely a within-field correction — no widths or spacing change.

   Radio fields are excluded: .ssm-field-radio lays its Yes/No `.ssm-radio` spans out
   inline, and a flex column would stack them vertically. reCAPTCHA is excluded too —
   it holds a widget div, not a control. */
.ssm-order-form > .ssm-field:not(.ssm-field-radio):not(.ssm-field-recaptcha),
.ssm-trial-form > .ssm-field:not(.ssm-field-radio):not(.ssm-field-recaptcha) {
	display: flex;
	flex-direction: column;
}

.ssm-order-form > .ssm-field:not(.ssm-field-radio) > input,
.ssm-order-form > .ssm-field:not(.ssm-field-radio) > select,
.ssm-trial-form > .ssm-field:not(.ssm-field-radio) > input,
.ssm-trial-form > .ssm-field:not(.ssm-field-radio) > select {
	margin-top: auto;
}


/* Modal order summary: drop the duration line — it restates the plan name.
   The plugin prints `name`, then `durationLabel(duration_months)`, so every plan
   showed the same fact twice ("3 Months" above "3 Months", "1 Year" above
   "12 Months"). The plan name carries the term, and the description now carries
   the per-month figure and how payment works. Revisit if plans are ever renamed
   to something that does not state its own term (e.g. "Starter"). */
.ssm-modal .ssm-summary .ssm-duration {
	display: none;
}

/* The description is doing real work now (price-per-month + payment note), so
   give it readable contrast rather than the plugin's 0.9 opacity fine print. */
.ssm-modal .ssm-summary .ssm-desc {
	opacity: 1;
	color: #C9CBD6;
	line-height: 1.5;
	margin-top: 8px;
}


/* Order confirmation: hide the plan summary once the thank-you replaces the form.
   showThankYou() in ssm-popup.js only swaps `.ssm-modal-body`, so `.ssm-summary`
   (its earlier sibling) stays on screen and the plan/price block sits above the
   confirmation. `:has()` is the only way to match a preceding sibling in CSS; if
   a browser lacks it the summary simply remains, as it does today — no breakage. */
.ssm-modal:has(.ssm-thankyou) .ssm-summary {
	display: none;
}

/* With the summary gone the confirmation is the whole modal — give it room. */
.ssm-modal:has(.ssm-thankyou) .ssm-modal-body {
	padding-top: 32px;
}


/* --- Order popup guard: confirm / notice panel (assets/js/ssm-popup-guard.js) ---
   Appended to .ssm-modal-overlay, which is `position: fixed; inset: 0`. An
   absolutely-positioned child is removed from that flex flow, so it covers the
   modal instead of sitting beside it. Styled from the same tokens as the modal
   so it reads as part of the form, not a browser dialog. */
.ssm-ask {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(1, 5, 24, 0.72);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.ssm-ask__box {
	width: 100%;
	max-width: 380px;
	padding: 28px 24px 24px;
	border-radius: 14px;
	text-align: center;
	background: var(--wp--preset--color--surface, #0E1526);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ssm-ask__msg {
	margin: 0;
	font-family: var(--wp--preset--font-family--urbanist, Poppins), sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: #fff;
}

.ssm-ask__note {
	margin: 8px 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #C9CBD6;
}

.ssm-ask__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
}

/* Same shape as .ssm-btn so the panel matches the form's buttons. */
.ssm-ask__btn {
	min-width: 104px;
	padding: 0.7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--urbanist, Poppins), sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--primary, #0057D9);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ssm-ask__btn:hover {
	background: var(--wp--preset--color--blue-deep, #002D85);
}

.ssm-ask__btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.22);
	color: #E7EAF0;
}

.ssm-ask__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.35);
}

.ssm-ask__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0057D9);
	outline-offset: 2px;
}

@media (max-width: 400px) {
	.ssm-ask__actions {
		flex-direction: column-reverse;
	}
}


/* Trial confirmation: the WhatsApp tip is secondary to the confirmation itself.
   .ssm-form-message.ssm-success is 19px/600 centred — right for one sentence,
   too loud for the whole block — so step the tip down rather than shouting both.
   Room Blue for the link because every interactive affordance inside the SSM
   forms (buttons, focus rings) is Room Blue; a second accent would compete
   to a component that has none. */
.ssm-form-message.ssm-success .ssm-trial-tip {
	display: block;
	margin-top: 12px;
	font-size: 0.8em;
	font-weight: 500;
	line-height: 1.55;
}

.ssm-form-message.ssm-success .ssm-trial-tip a {
	color: var(--wp--preset--color--primary, #0057D9);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.ssm-form-message.ssm-success .ssm-trial-tip a:hover {
	color: var(--wp--preset--color--blue-deep, #002D85);
}