/**
 * ProfHairClub Free Shipping — banner styles.
 *
 * Visual language mirrors profhairclub-account: yellow accent, Lora/Manrope
 * type, pill shapes, hover-lift, --phc-ease easing. Tokens defined with
 * fallback values so the banner looks right even if the theme doesn't expose them.
 *
 * @package ProfHairClub_Free_Shipping
 */

/* ------------------------------------------------------------------ */
/* Design tokens (fallback values = the canonical ProfHairClub palette) */
/* ------------------------------------------------------------------ */

:root {
	--pfs-copper:    #b98e05;
	--pfs-peach:     #fbf0c8;
	--pfs-black:     #14130f;
	--pfs-white:     #ffffff;
	--pfs-grey:      #e6e2d4;
	--pfs-border:    rgba(20, 19, 15, 0.08);
	--pfs-text-dim:  #8c887c;
	--pfs-success:   #2e7d32;
	--pfs-success-bg:#e8f5e9;

	--pfs-radius-md: 10px;
	--pfs-radius-sm: 4px;

	--pfs-shadow:    0 10px 30px rgba(20, 19, 15, 0.08);
	--pfs-transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);

	--pfs-font-heading: 'Lora', serif;
	--pfs-font-body:    'Manrope', sans-serif;
}

/* ------------------------------------------------------------------ */
/* Banner wrapper                                                     */
/* ------------------------------------------------------------------ */

.phc-fs {
	/* Inherit the theme's real design tokens; fall back to the canonical
	   values above so the banner still looks right if it's ever activated
	   under a different theme. */
	--pfs-accent:    var(--phc-yellow-deep, var(--pfs-copper));
	--pfs-accent-bg: var(--phc-yellow-wash, var(--pfs-peach));
	--pfs-text:      var(--phc-ink, var(--pfs-black));
	--pfs-surface:   var(--phc-mist, var(--pfs-grey));
	--pfs-radius:    var(--phc-radius-m, var(--pfs-radius-md));
	--pfs-easing:    var(--phc-ease, var(--pfs-transition));

	background: var(--pfs-surface);
	border-radius: var(--pfs-radius);
	padding: 20px 24px;
	margin-bottom: 20px;
	color: var(--pfs-text);
	font-family: var(--phc-font-sans, var(--pfs-font-body));
	transition: var(--pfs-easing);
}

/* Cart-page variant: a touch more presence. */
.phc-fs--cart {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

/* Achieved state: success palette overrides. */
.phc-fs.is-achieved {
	background: var(--pfs-success-bg);
	--pfs-accent: var(--pfs-success);
}

/* ------------------------------------------------------------------ */
/* Inner layout: icon + body                                          */
/* ------------------------------------------------------------------ */

.phc-fs__inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.phc-fs__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pfs-white);
	color: var(--pfs-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: var(--pfs-easing);
}

.phc-fs__body {
	flex: 1;
	min-width: 0;
}

.phc-fs__message {
	margin: 0 0 4px;
	font-family: var(--phc-font-display, var(--pfs-font-heading));
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	color: var(--pfs-text);
}

.phc-fs__sub {
	margin: 0;
	font-size: 13px;
	color: var(--pfs-text-dim);
	line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* Progress bar                                                       */
/* ------------------------------------------------------------------ */

.phc-fs__track {
	margin-top: 16px;
	height: 8px;
	border-radius: 50px;
	background: var(--pfs-border);
	overflow: hidden;
	position: relative;
}

.phc-fs__fill {
	display: block;
	height: 100%;
	border-radius: 50px;
	background: var(--pfs-accent);
	width: 0;
	transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle shimmer while not yet achieved — keeps it lively. */
.phc-fs:not(.is-achieved) .phc-fs__fill {
	background-image: linear-gradient(
		90deg,
		var(--pfs-accent) 0%,
		var(--pfs-accent-bg) 50%,
		var(--pfs-accent) 100%
	);
	background-size: 200% 100%;
	animation: pfsShimmer 2.5s linear infinite;
}

@keyframes pfsShimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ------------------------------------------------------------------ */
/* Meter labels (0 ₽ ... threshold)                                  */
/* ------------------------------------------------------------------ */

.phc-fs__meter {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 11px;
	color: var(--pfs-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ */
/* Mini-cart variant: compact                                         */
/* ------------------------------------------------------------------ */

.phc-fs--mini_cart {
	padding: 14px 16px;
	margin-bottom: 14px;
	border-radius: var(--pfs-radius-sm);
}

.phc-fs--mini_cart .phc-fs__inner {
	gap: 10px;
}

.phc-fs--mini_cart .phc-fs__icon {
	width: 32px;
	height: 32px;
}

.phc-fs--mini_cart .phc-fs__message {
	font-size: 14px;
}

.phc-fs--mini_cart .phc-fs__sub {
	font-size: 12px;
}

.phc-fs--mini_cart .phc-fs__track {
	margin-top: 12px;
	height: 6px;
}

.phc-fs--mini_cart .phc-fs__meter {
	display: none; /* keep the mini-cart tidy */
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.phc-fs *,
	.phc-fs *::before,
	.phc-fs *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}