/**
 * Top Badges — Frontend Styles
 *
 * v1.3.0: added 4 micro-animation classes:
 *         tb-micro--pulse, tb-micro--shimmer, tb-micro--bounce, tb-micro--glow
 *         All respect prefers-reduced-motion.
 * v1.2.0: added size modifiers (--size-small/medium/large)
 *         and shape modifiers (--shape-square, --shape-ribbon).
 * All colours driven by --tb-badge-color, --tb-badge-bg, --tb-badge-border.
 *
 * @package TopBadges
 * @version 1.3.0
 */

/* ============================================================
   Base heading wrapper
   ============================================================ */

.top-badges__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	line-height: 1.35;
}

.top-badges__heading-text {
	display: inline;
}

/* ============================================================
   Badge — base (pill / medium / default)
   ============================================================ */

.top-badges__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px 3px 7px;
	border-radius: 20px;
	border: 1.5px solid var( --tb-badge-border, #e5e7eb );
	background-color: var( --tb-badge-bg, #f9fafb );
	color: var( --tb-badge-color, #374151 );
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: middle;
	text-transform: none;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
	flex-shrink: 0;
	/* Needed for shimmer pseudo-element to be clipped correctly. */
	overflow: hidden;
	position: relative;
}

.top-badges__badge-icon {
	font-size: 1.05em;
	line-height: 1;
	position: relative;
	top: -1px;
}

.top-badges__badge-label {
	color: var( --tb-badge-color, #374151 );
}

/* ============================================================
   Size modifiers
   ============================================================ */

/* small */
.top-badges__badge--size-small {
	font-size: 0.60em;
	padding: 2px 7px 2px 5px;
	gap: 3px;
	border-radius: 14px;
}

/* medium — same as base, explicit class for clarity */
.top-badges__badge--size-medium {
	font-size: 0.72em;
	padding: 3px 10px 3px 7px;
	border-radius: 20px;
}

/* large */
.top-badges__badge--size-large {
	font-size: 0.875em;
	padding: 5px 14px 5px 10px;
	gap: 6px;
	border-radius: 24px;
	font-weight: 700;
}

.top-badges__badge--size-large .top-badges__badge-icon {
	font-size: 1.1em;
}

/* ============================================================
   Shape modifiers
   ============================================================ */

/* pill — default, no extra rules needed */

/* square */
.top-badges__badge--shape-square {
	border-radius: 4px;
	padding-left: 8px;
	padding-right: 8px;
}

/* ribbon — absolutely positioned corner label inside a relative heading */
.top-badges__heading--ribbon {
	position: relative;
	overflow: hidden;
	/* Give room for the ribbon in the top-left corner */
	padding-top: 6px;
}

.top-badges__badge--shape-ribbon {
	/* Override flex layout — ribbon is absolutely positioned */
	position: absolute;
	top: 0;
	left: -2px;
	border-radius: 0 0 6px 0;
	padding: 3px 10px 3px 6px;
	font-size: 0.65em;
	font-weight: 700;
	letter-spacing: 0.03em;
	gap: 3px;
	box-shadow: 1px 2px 5px rgba( 0, 0, 0, 0.12 );
	z-index: 1;
	display: inline-flex;
}

/* For ribbon shape the heading-text gets left-indent so it doesn't overlap */
.top-badges__heading--ribbon .top-badges__heading-text {
	display: block;
	padding-top: 2px;
}

/* ============================================================
   Per-badge accent overrides
   ============================================================ */

.top-badges__badge:hover {
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.10 );
	border-color: var( --tb-badge-color, #9ca3af );
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.top-badges__badge--editors-choice {
	box-shadow:
		0 1px 3px rgba( 0, 0, 0, 0.08 ),
		0 0 0 2px rgba( 124, 58, 237, 0.12 );
}

.top-badges__badge--bestseller {
	box-shadow:
		0 1px 3px rgba( 0, 0, 0, 0.06 ),
		0 0 0 2px rgba( 185, 28, 28, 0.10 );
}

.top-badges__badge--premium {
	box-shadow:
		0 1px 4px rgba( 0, 0, 0, 0.08 ),
		0 0 0 2px rgba( 252, 211, 77, 0.35 );
}

/* ============================================================
   Entry animation (only for pill/square shapes; ribbon skips)
   ============================================================ */

@media ( prefers-reduced-motion: no-preference ) {
	.top-badges__badge--animate:not( .top-badges__badge--shape-ribbon ) {
		animation: tb-badge-pop 0.4s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ) both;
	}
}

@keyframes tb-badge-pop {
	from {
		opacity: 0;
		transform: scale( 0.75 ) translateY( -4px );
	}
	to {
		opacity: 1;
		transform: scale( 1 ) translateY( 0 );
	}
}

/* ============================================================
   v1.3.0 — Micro-animations (continuous, looping)
   All gated behind prefers-reduced-motion: no-preference.
   Ribbon shape is excluded from micro-animations (positioned
   absolutely; movement can cause layout issues).
   ============================================================ */

/* ── pulse — gentle scale breathe ─────────────────────────── */

@keyframes tb-pulse {
	0%, 100% {
		transform: scale( 1 );
	}
	50% {
		transform: scale( 1.07 );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.tb-micro--pulse:not( .top-badges__badge--shape-ribbon ) {
		animation: tb-pulse 2s ease-in-out infinite;
	}
}

/* ── shimmer — light sweep across the badge ───────────────── */

@keyframes tb-shimmer {
	0% {
		transform: translateX( -120% ) skewX( -20deg );
		opacity: 0;
	}
	40% {
		opacity: 0.55;
	}
	100% {
		transform: translateX( 200% ) skewX( -20deg );
		opacity: 0;
	}
}

.tb-micro--shimmer:not( .top-badges__badge--shape-ribbon )::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba( 255, 255, 255, 0.75 ) 50%,
		transparent 100%
	);
	pointer-events: none;
}

@media ( prefers-reduced-motion: no-preference ) {
	.tb-micro--shimmer:not( .top-badges__badge--shape-ribbon )::after {
		animation: tb-shimmer 2.4s ease-in-out infinite;
	}
}

/* ── bounce — gentle vertical hop ─────────────────────────── */

@keyframes tb-bounce {
	0%, 60%, 100% {
		transform: translateY( 0 );
		animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
	}
	30% {
		transform: translateY( -5px );
		animation-timing-function: cubic-bezier( 0.755, 0.05, 0.855, 0.06 );
	}
	45% {
		transform: translateY( -2px );
		animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.tb-micro--bounce:not( .top-badges__badge--shape-ribbon ) {
		animation: tb-bounce 2.2s ease infinite;
	}
}

/* ── glow — pulsing coloured halo ─────────────────────────── */

@keyframes tb-glow {
	0%, 100% {
		box-shadow:
			0 0 0 0px rgba( 0, 0, 0, 0 ),
			0 0 0 0px var( --tb-badge-color, #7C3AED );
	}
	50% {
		box-shadow:
			0 0 8px 2px rgba( 0, 0, 0, 0.06 ),
			0 0 14px 4px var( --tb-badge-color, #7C3AED );
		opacity: 0.9;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.tb-micro--glow:not( .top-badges__badge--shape-ribbon ) {
		animation: tb-glow 2s ease-in-out infinite;
	}
}

/* ============================================================
   Micro-animation + entry animation stacking:
   When both --animate and a tb-micro-- class are present,
   the entry animation runs once, then the micro-animation
   takes over using animation-delay.
   ============================================================ */

@media ( prefers-reduced-motion: no-preference ) {
	.top-badges__badge--animate.tb-micro--pulse:not( .top-badges__badge--shape-ribbon ) {
		animation:
			tb-badge-pop 0.4s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ) both,
			tb-pulse 2s 0.5s ease-in-out infinite;
	}

	.top-badges__badge--animate.tb-micro--shimmer:not( .top-badges__badge--shape-ribbon )::after {
		animation: tb-shimmer 2.4s 0.5s ease-in-out infinite;
	}
	.top-badges__badge--animate.tb-micro--shimmer:not( .top-badges__badge--shape-ribbon ) {
		animation: tb-badge-pop 0.4s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ) both;
	}

	.top-badges__badge--animate.tb-micro--bounce:not( .top-badges__badge--shape-ribbon ) {
		animation:
			tb-badge-pop 0.4s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ) both,
			tb-bounce 2.2s 0.5s ease infinite;
	}

	.top-badges__badge--animate.tb-micro--glow:not( .top-badges__badge--shape-ribbon ) {
		animation:
			tb-badge-pop 0.4s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ) both,
			tb-glow 2s 0.5s ease-in-out infinite;
	}
}

/* ============================================================
   Responsive
   ============================================================ */

@media ( max-width: 480px ) {
	.top-badges__heading:not( .top-badges__heading--ribbon ) {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}
}

/* ============================================================
   v1.4.0 — Display Type 2: Highlight Card
   ============================================================ */

.tb-highlight-card {
	position: relative;
	border: 2px solid var( --tb-badge-border, #e5e7eb );
	border-radius: 12px;
	padding: 20px 22px 18px;
	margin: 1.5em 0;
	background:
		linear-gradient(
			135deg,
			color-mix( in srgb, var( --tb-badge-bg, #f9fafb ) 80%, white 20% ) 0%,
			white 100%
		);
	box-shadow:
		0 0 0 1px var( --tb-badge-border, #e5e7eb ),
		0 4px 18px rgba( 0, 0, 0, 0.07 ),
		0 0 32px color-mix( in srgb, var( --tb-badge-color, #7c3aed ) 18%, transparent );
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.tb-highlight-card:hover {
	box-shadow:
		0 0 0 2px var( --tb-badge-color, #7c3aed ),
		0 6px 28px rgba( 0, 0, 0, 0.10 ),
		0 0 48px color-mix( in srgb, var( --tb-badge-color, #7c3aed ) 28%, transparent );
	border-color: var( --tb-badge-color, #7c3aed );
}

/* Left accent bar */
.tb-highlight-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(
		180deg,
		var( --tb-badge-color, #7c3aed ),
		color-mix( in srgb, var( --tb-badge-color, #7c3aed ) 50%, transparent )
	);
}

.tb-hl__heading {
	margin: 0 0 10px !important;
	font-size: 1.15em;
}

/* CTA area */
.tb-hl__cta {
	margin-top: 14px;
}

.tb-hl__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border-radius: 8px;
	background: var( --tb-badge-color, #7c3aed );
	color: #fff !important;
	font-size: 0.875em;
	font-weight: 600;
	text-decoration: none !important;
	letter-spacing: 0.01em;
	border: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.tb-hl__cta-btn:hover {
	opacity: 0.88;
	transform: translateY( -1px );
}

.tb-hl__cta-btn::after {
	content: '→';
}

/* ============================================================
   v1.4.0 — Display Type 3: Winner Block
   ============================================================ */

.tb-winner-block {
	position: relative;
	border: 2.5px solid var( --tb-badge-border, #fcd34d );
	border-radius: 16px;
	padding: 28px 28px 24px;
	margin: 2em 0;
	background:
		linear-gradient(
			145deg,
			color-mix( in srgb, var( --tb-badge-bg, #fffbeb ) 90%, white ) 0%,
			white 70%
		);
	box-shadow:
		0 0 0 1px color-mix( in srgb, var( --tb-badge-border, #fcd34d ) 60%, transparent ),
		0 8px 32px rgba( 0, 0, 0, 0.10 ),
		0 0 56px color-mix( in srgb, var( --tb-badge-color, #92400e ) 20%, transparent );
	overflow: visible;
}

/* TOP-1 corner ribbon label */
.tb-winner-block::before {
	content: 'ТОП-1';
	position: absolute;
	top: -1px;
	right: 20px;
	background: var( --tb-badge-color, #92400e );
	color: #fff;
	font-size: 0.65em;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 3px 10px 4px;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
}

/* Crown decoration */
.tb-winner__crown {
	display: block;
	font-size: 2em;
	line-height: 1;
	margin-bottom: 6px;
	filter: drop-shadow( 0 2px 4px rgba( 0, 0, 0, 0.18 ) );
}

/* Heading — bigger than normal */
.tb-winner__heading {
	margin: 0 0 10px !important;
	font-size: 1.35em !important;
	font-weight: 800 !important;
}

.tb-winner__description {
	margin: 0 0 18px;
	font-size: 0.9em;
	color: #4b5563;
	line-height: 1.6;
}

/* CTA — pulsing button */
.tb-winner__cta {
	margin-top: 18px;
}

.tb-winner__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 28px;
	border-radius: 10px;
	background: var( --tb-badge-color, #92400e );
	color: #fff !important;
	font-size: 0.95em;
	font-weight: 700;
	text-decoration: none !important;
	letter-spacing: 0.015em;
	border: none;
	box-shadow: 0 4px 14px color-mix( in srgb, var( --tb-badge-color, #92400e ) 45%, transparent );
	transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tb-winner__cta-btn::after {
	content: '→';
}

.tb-winner__cta-btn:hover {
	opacity: 0.92;
	transform: translateY( -2px );
	box-shadow: 0 8px 24px color-mix( in srgb, var( --tb-badge-color, #92400e ) 50%, transparent );
}

/* CTA pulse animation (respects prefers-reduced-motion) */
@keyframes tb-winner-cta-pulse {
	0%, 100% {
		box-shadow:
			0 4px 14px color-mix( in srgb, var( --tb-badge-color, #92400e ) 45%, transparent ),
			0 0 0 0 color-mix( in srgb, var( --tb-badge-color, #92400e ) 55%, transparent );
	}
	50% {
		box-shadow:
			0 4px 14px color-mix( in srgb, var( --tb-badge-color, #92400e ) 45%, transparent ),
			0 0 0 10px color-mix( in srgb, var( --tb-badge-color, #92400e ) 0%, transparent );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.tb-winner__cta-btn--pulse {
		animation: tb-winner-cta-pulse 2.2s ease-in-out infinite;
	}
}

/* Winner block hover glow */
.tb-winner-block:hover {
	box-shadow:
		0 0 0 2px var( --tb-badge-color, #92400e ),
		0 10px 40px rgba( 0, 0, 0, 0.13 ),
		0 0 70px color-mix( in srgb, var( --tb-badge-color, #92400e ) 28%, transparent );
}

/* ── Responsive adjustments for v1.4.0 types ─────────────── */

@media ( max-width: 480px ) {
	.tb-highlight-card {
		padding: 16px 16px 14px 20px;
		border-radius: 10px;
	}

	.tb-winner-block {
		padding: 20px 16px 18px;
		border-radius: 12px;
	}

	.tb-winner__cta-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ── color-mix() graceful fallback for older browsers ────── */
@supports not ( color: color-mix( in srgb, red, blue ) ) {
	.tb-highlight-card {
		background: var( --tb-badge-bg, #f9fafb );
		box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.08 );
	}
	.tb-winner-block {
		background: var( --tb-badge-bg, #fffbeb );
		box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.10 );
	}
	.tb-hl__cta-btn,
	.tb-winner__cta-btn {
		box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.25 );
	}
}

/* ============================================================
   v1.7.1 — Badge-only inline mode
   Wraps the badge span when [top_badge badge="x"] is used
   without heading content (self-closing shortcode).
   ============================================================ */

/**
 * The outer wrapper keeps the badge inline with surrounding text
 * and provides directional spacing so it doesn't touch the heading text.
 */
/* ============================================================
   v1.7.3 — Badge-only inline mode
   Spacing via \u202F text-node (injected in PHP) + inline-block.
   margin-inline is unreliable in Astra / theme resets on heading children.
   ============================================================ */

.top-badges__badge-only,
.top-badges__badge-only--after,
.top-badges__badge-only--before {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

/**
 * Padding on the badge itself — facing the heading text.
 * padding is virtually never reset by themes (unlike margin).
 * Combined with the \u00A0 text node injected in PHP, this gives
 * a reliable ~0.5em gap between badge and heading text.
 *
 * --pad-start: badge is after text   → extra space on badge's left  side
 * --pad-end:   badge is before text  → extra space on badge's right side
 */
.top-badges__badge--pad-start {
	padding-inline-start: 0.55em !important;
}

.top-badges__badge--pad-end {
	padding-inline-end: 0.55em !important;
}

/**
 * Legacy: badge directly inside heading without .badge-only wrapper.
 * e.g. <h3>Текст <span class="top-badges__badge ..."></span></h3>
 * These don't get the \u00A0 text-node treatment, so keep a small margin.
 * Use !important here to override Astra's heading child margin reset.
 */
h1 > .top-badges__badge,
h2 > .top-badges__badge,
h3 > .top-badges__badge,
h4 > .top-badges__badge,
h5 > .top-badges__badge,
h6 > .top-badges__badge {
	margin-inline-start: 0.4em !important;
	vertical-align: middle;
}