/*
 * Croator Webstudio Addons — widget styles.
 *
 * Ported from the .dc.html design sources. Two things are deliberately NOT copied:
 *
 * 1. Inline styles. The sources put everything in style="" and their hover states in
 *    style-hover="", which the design runtime compiles to plain classes with no
 *    !important. Inline styles outrank classes, so most hovers in the preview never
 *    actually fire. Base styles live in classes here so the intended hovers work.
 *
 * 2. The global `*{animation:none!important}` reduced-motion reset. That would kill
 *    every animation on the page, including other plugins'. Scoped to our widgets below.
 *
 * Animation values come from two custom properties, --cws-float-duration and
 * --cws-float-distance, so the keyframes stay here and only the numbers vary per
 * instance via Elementor controls.
 */

/* ---------------------------------------------------------------- keyframes */

@keyframes cws-float-up {
	0%,
	100% { transform: translateY(0); }
	50% { transform: translateY(calc(-1 * var(--cws-float-distance, 12px))); }
}

@keyframes cws-float-down {
	0%,
	100% { transform: translateY(0); }
	50% { transform: translateY(var(--cws-float-distance, 10px)); }
}

/*
 * The travel distance is NOT -50%.
 *
 * With the list duplicated inside one flex container there are 2n items but only
 * 2n-1 gaps, so the track is one gap narrower than two full repetitions. Half of it
 * therefore falls half a gap short of the point where the duplicate lines up with the
 * original, and the loop jumps by gap/2 on every restart — 28px at the default 56px
 * gap. The design source has exactly this bug; measured, not guessed.
 *
 * Adding back gap/2 lands the duplicate precisely on the original's start position.
 */
@keyframes cws-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - var(--cws-marquee-gap, 56px) / 2)); }
}

/* ------------------------------------------------------------------- shared */

.cws-hero,
.cws-hero-home,
.cws-marquee {
	font-family: var(--cws-font-body);
	color: var(--cws-tx);
}

.cws-hero,
.cws-hero *,
.cws-hero-home,
.cws-hero-home *,
.cws-marquee,
.cws-marquee * {
	box-sizing: border-box;
}

.cws-is-floating {
	animation: cws-float-up var(--cws-float-duration, 7s) ease-in-out infinite;
	/* Promote once rather than on every frame; avoids sub-pixel text shimmer. */
	will-change: transform;
}

.cws-is-floating-down {
	animation: cws-float-down var(--cws-float-duration, 5s) ease-in-out infinite;
	will-change: transform;
}

/* Section shell, shared by both heroes. */
.cws-hero,
.cws-hero-home {
	position: relative;
	overflow: hidden;
	background: var(--cws-s1);
}

.cws-hero {
	border-bottom: 1px solid var(--cws-bd);
}

.cws-hero__glow {
	position: absolute;
	top: var(--cws-glow-top, -130px);
	right: var(--cws-glow-right, -90px);
	width: var(--cws-glow-size, 540px);
	height: var(--cws-glow-size, 540px);
	background: radial-gradient(circle, var(--cws-glow-color, var(--cws-tint)), transparent 70%);
	pointer-events: none;
}

.cws-hero__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 52px;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(52px, 7vw, 96px) 24px;
}

.cws-hero__body {
	flex: 1 1 var(--cws-hero-basis, 460px);
	min-width: 300px;
}

.cws-hero__media-col {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 380px;
	min-width: 290px;
	gap: 18px;
}

/* Badge pill + optional back-link share one wrapping row. */
.cws-hero__badge-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}

.cws-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid var(--cws-bd);
	border-radius: 999px;
	background: var(--cws-card);
	font-size: 13px;
	font-weight: 700;
	color: var(--cws-acc);
}

.cws-badge__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cws-brand);
}

.cws-hero__backlink {
	font-size: 13px;
	font-weight: 700;
	color: var(--cws-tx3);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cws-hero__backlink:hover,
.cws-hero__backlink:focus-visible {
	color: var(--cws-brand);
}

.cws-hero__heading {
	margin: 0 0 20px;
	font-family: var(--cws-font-display);
	font-weight: 700;
	letter-spacing: -1.5px;
	color: var(--cws-tx);
}

.cws-hero__dot {
	color: var(--cws-brand);
}

.cws-hero__lead {
	margin: 0 0 30px;
	max-width: var(--cws-lead-max, 560px);
	font-weight: 500;
	color: var(--cws-tx2);
	text-wrap: pretty;
}

/*
 * Three type scales exist across the eleven landing pages. They differ only in the h1
 * clamp and the lead's size/leading, so they are modifiers rather than separate widgets.
 */
.cws-hero--scale-service .cws-hero__heading {
	font-size: clamp(33px, 4.7vw, 55px);
	line-height: 1.05;
}

.cws-hero--scale-service .cws-hero__lead {
	font-size: clamp(16px, 1.65vw, 19px);
	line-height: 1.63;
	margin-bottom: 30px;
}

.cws-hero--scale-product .cws-hero__heading {
	font-size: clamp(34px, 4.9vw, 57px);
	line-height: 1.04;
}

.cws-hero--scale-product .cws-hero__lead {
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.6;
	margin-bottom: 28px;
}

.cws-hero--scale-hub .cws-hero__heading {
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1.04;
}

.cws-hero--scale-hub .cws-hero__lead {
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.62;
	margin-bottom: 28px;
}

/* ---------------------------------------------------------------- checklist */

.cws-check {
	display: flex;
	flex-direction: column;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.cws-check--compact { gap: 11px; }
.cws-check--rich { gap: 12px; }

.cws-check__item { display: flex; }

.cws-check--compact .cws-check__item {
	align-items: center;
	gap: 11px;
}

.cws-check--rich .cws-check__item {
	align-items: flex-start;
	gap: 12px;
}

.cws-check__chip {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cws-tint);
	color: var(--cws-acc);
	font-size: 12px;
	font-weight: 800;
}

.cws-check--compact .cws-check__chip {
	width: 22px;
	height: 22px;
}

.cws-check--rich .cws-check__chip {
	width: 24px;
	height: 24px;
	/* Nudges the chip onto the cap-height of the first line, not the line box top. */
	margin-top: 1px;
}

.cws-check__text {
	font-size: 15.5px;
	color: var(--cws-tx);
}

.cws-check--compact .cws-check__text { font-weight: 600; }
.cws-check--rich .cws-check__text { line-height: 1.5; }
.cws-check__text strong { font-weight: 700; }

/* ------------------------------------------------------------------ buttons */

.cws-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.cws-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 26px;
	border-radius: 13px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
		transform 0.2s ease, box-shadow 0.2s ease;
}

.cws-btn--lg { padding: 16px 26px; }

/*
 * The transparent border on the primary matches the outline button's 1.5px so the two
 * sit at identical heights regardless of how the surrounding flex container aligns them.
 */
.cws-btn--primary {
	border: 1.5px solid transparent;
	background: var(--cws-brand);
	color: #fff;
	box-shadow: 0 14px 30px -12px rgba(219, 68, 55, 0.6);
}

.cws-btn--primary:hover,
.cws-btn--primary:focus-visible {
	background: var(--cws-brand-hover);
	color: #fff;
	transform: translateY(-2px);
}

.cws-btn--outline {
	border: 1.5px solid var(--cws-bd);
	background: var(--cws-card);
	color: var(--cws-tx);
}

.cws-btn--outline:hover,
.cws-btn--outline:focus-visible {
	border-color: var(--cws-brand);
	color: var(--cws-brand);
}

/* -------------------------------------------------------------------- media */

.cws-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 22px;
	background: var(--cws-media-bg);
	box-shadow: 0 40px 80px -40px rgba(14, 17, 22, 0.4);
}

.cws-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------- aside: price card */

.cws-price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	border: 1px solid var(--cws-bd);
	border-radius: 18px;
	background: var(--cws-card);
}

.cws-price__figures {
	display: flex;
	flex-direction: column;
}

.cws-price__eyebrow {
	font-size: 13px;
	font-weight: 700;
	color: var(--cws-tx3);
}

.cws-price__amount {
	font-family: var(--cws-font-display);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -1.5px;
	color: var(--cws-tx);
}

.cws-price__footnote {
	font-size: 12px;
	font-weight: 600;
	color: var(--cws-tx3);
}

.cws-price__cta {
	padding: 12px 18px;
	border-radius: 11px;
	background: var(--cws-tint);
	color: var(--cws-acc);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cws-price__cta:hover,
.cws-price__cta:focus-visible {
	background: var(--cws-brand);
	color: #fff;
}

/* ------------------------------------------------------ aside: rating card */

.cws-rating {
	position: absolute;
	bottom: -22px;
	left: -14px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border: 1px solid var(--cws-bd);
	border-radius: 16px;
	background: var(--cws-card);
	box-shadow: 0 22px 44px -24px rgba(14, 17, 22, 0.35);
}

.cws-rating__value {
	font-family: var(--cws-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--cws-brand);
}

.cws-rating__caption {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cws-tx2);
}

/*
 * The section clips overflow, so the card's negative left offset would shave its edge
 * off on narrow screens. Pull it inside the column below the wrap point.
 */
@media (max-width: 600px) {
	.cws-rating {
		left: 0;
		bottom: -16px;
	}
}

/* ============================================================ homepage hero */

.cws-hero-home {
	--cws-glow-size: 520px;
	--cws-glow-top: -120px;
	--cws-glow-right: -80px;
	/* Hardcoded in the source rather than tied to --tint, so it holds in both themes. */
	--cws-glow-color: rgba(219, 68, 55, 0.18);
	--cws-hero-basis: 440px;
	--cws-lead-max: 520px;
}

.cws-hero-home .cws-hero__inner {
	gap: 48px;
	padding: clamp(56px, 7vw, 96px) 24px;
}

.cws-hero-home .cws-hero__heading {
	font-size: clamp(38px, 5.4vw, 62px);
	line-height: 1.04;
}

.cws-hero-home .cws-hero__lead {
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.6;
}

.cws-hero-home__media-col {
	position: relative;
	display: flex;
	flex: 1 1 380px;
	min-width: 300px;
	justify-content: center;
}

/* -------------------------------------------------------------- stat strip */

.cws-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 34px;
}

.cws-stats__item {
	display: flex;
	flex-direction: column;
}

.cws-stats__value {
	font-family: var(--cws-font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--cws-tx);
}

.cws-stats__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--cws-tx3);
}

.cws-stats__divider {
	width: 1px;
	align-self: stretch;
	background: var(--cws-rule);
}

/* ------------------------------------------------------- wp-admin mockup */

.cws-mock {
	width: 100%;
	max-width: 440px;
	overflow: hidden;
	border: 1px solid var(--cws-bd);
	border-radius: 20px;
	background: var(--cws-card);
	box-shadow: 0 40px 80px -30px rgba(14, 17, 22, 0.35);
}

.cws-mock__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--cws-bd);
}

.cws-mock__dot {
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.cws-mock__dot--red { background: #db4437; }
.cws-mock__dot--amber { background: #ffc24a; }
.cws-mock__dot--green { background: #3ac77d; }

.cws-mock__url {
	margin-left: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cws-tx3);
}

.cws-mock__body { padding: 22px; }

.cws-mock__eyebrow {
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--cws-acc);
}

.cws-mock__rows {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cws-mock__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cws-mock__chip {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--cws-tint);
	color: var(--cws-brand);
	font-size: 13px;
	font-weight: 800;
}

.cws-mock__fill {
	flex: 1;
	height: 10px;
	border-radius: 99px;
	background: var(--cws-media-bg);
}

.cws-mock__row--active .cws-mock__chip {
	background: var(--cws-brand);
	color: #fff;
}

.cws-mock__row--active .cws-mock__fill {
	background: linear-gradient(90deg, var(--cws-brand), rgba(219, 68, 55, 0.25));
}

.cws-mock__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
}

.cws-mock__foot-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--cws-tx3);
}

.cws-mock__foot-value {
	font-family: var(--cws-font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--cws-tx);
}

.cws-mock__emoji {
	font-size: 24px;
	line-height: 1;
}

/*
 * The pill drifts DOWN while the card drifts UP, on a shorter cycle, so the two never
 * fall into step. That beat is the signature of this hero — keep both directions and
 * both durations distinct.
 */
.cws-hero-home__pill {
	position: absolute;
	bottom: -18px;
	left: -6px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--cws-brand);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 16px 30px -12px rgba(219, 68, 55, 0.5);
}

/* ================================================================== marquee */

.cws-marquee {
	overflow: hidden;
}

.cws-marquee--faded {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/*
 * The track holds the item list twice and travels -50%, which lands the duplicate
 * exactly where the original started. The gap belongs to the track so the seam between
 * the two copies matches the gap inside them — without that the loop visibly hitches.
 */
.cws-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--cws-marquee-gap, 56px);
	animation: cws-marquee var(--cws-marquee-duration, 26s) linear infinite;
	will-change: transform;
}

.cws-marquee__item {
	font-family: var(--cws-font-display);
	font-size: var(--cws-marquee-size, 22px);
	font-weight: 700;
	color: var(--cws-tx3);
	white-space: nowrap;
}

/* --------------------------------------------------------- reduced motion */

/*
 * Scoped to this pack. The source's global reset would stop animations sitewide.
 */
@media (prefers-reduced-motion: reduce) {
	.cws-hero,
	.cws-hero *,
	.cws-hero-home,
	.cws-hero-home *,
	.cws-marquee,
	.cws-marquee * {
		animation: none !important;
		transition: none !important;
	}

	.cws-btn--primary:hover,
	.cws-btn--primary:focus-visible {
		transform: none;
	}
}