/* ==================================================================
   CS Side Cart — visually identical to design, defended against Elementor
   ================================================================== */

/* Brand tokens used below:
   --cs-violet:        #5b3acf  (item title / price)
   --cs-violet-deep:   #312a7a  (footer panel)
   --cs-green:         #2ec27e  (success / links)
   --cs-green-light:   #8df0b4  (CTA gradient top)
   --cs-pink:          #ff5fa2
   --cs-purple:        #b96bff
   --cs-cyan-top:      #3fb6e5
   --cs-cyan-mid:      #69d1c3
   --cs-green-bottom:  #74e3a0
*/

/* ---- Reset within our overlays so Elementor can't push us around ---- */
.cs-side-cart, .cs-side-cart *,
.cs-added-modal, .cs-added-modal *,
.cs-cart-trigger, .cs-cart-trigger * {
	box-sizing: border-box !important;
}
.cs-side-cart .cs-side-cart__title,
.cs-side-cart .cs-side-cart__count,
.cs-side-cart .cs-side-cart__emptyText,
.cs-side-cart .cs-side-cart__emptyTitle,
.cs-side-cart .cs-side-cart__itemName,
.cs-side-cart .cs-side-cart__itemPrice,
.cs-side-cart .cs-side-cart__itemLink,
.cs-side-cart .cs-side-cart__itemLinksLabel,
.cs-side-cart .cs-bonus__teaser,
.cs-side-cart .cs-bonus__title,
.cs-side-cart .cs-bonus__msg,
.cs-side-cart .cs-bonus__sub,
.cs-side-cart .cs-side-cart__cristalli,
.cs-side-cart .cs-side-cart__totalValue,
.cs-added-modal .cs-added-modal__title {
	font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
}

/* ============ Side cart shell ============ */
.cs-side-cart {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999990 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}
.cs-side-cart.is-open { pointer-events: auto !important; visibility: visible !important; }

.cs-side-cart__overlay {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0,0,0,0.35) !important;
	opacity: 0 !important;
	transition: opacity 0.25s ease !important;
}
.cs-side-cart.is-open .cs-side-cart__overlay { opacity: 1 !important; }

.cs-side-cart__panel {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	max-width: 440px !important;
	background: linear-gradient(180deg, #3fb6e5 0%, #69d1c3 50%, #74e3a0 100%) !important;
	box-shadow: -10px 0 30px rgba(0,0,0,0.2) !important;
	transform: translateX(100%) !important;
	transition: transform 0.32s ease !important;
	display: flex !important;
	flex-direction: column !important;
	color: #fff !important;
	padding: 56px 18px 18px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}
.cs-side-cart.is-open .cs-side-cart__panel { transform: translateX(0) !important; }

/* Closing animation: keep the cart painted while the panel slides back out and
   the overlay fades, instead of snapping to hidden the instant it's dismissed. */
.cs-side-cart.is-closing {
	pointer-events: none !important;
	visibility: visible !important;
}
.cs-side-cart.is-closing .cs-side-cart__overlay { opacity: 0 !important; }
.cs-side-cart.is-closing .cs-side-cart__panel { transform: translateX(100%) !important; }

/* Close X */
.cs-side-cart__close {
	position: absolute !important;
	top: 10px !important;
	right: 14px !important;
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
	font-size: 30px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 4px 8px !important;
	z-index: 2 !important;
	box-shadow: none !important;
}

/* Logo bubble */
.cs-side-cart__logoBubble {
	position: absolute !important;
	top: 16px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	/* No background box — the white logo sits directly on the panel, with a
	   drop-shadow for legibility and a little breathing room from the top. */
	background: transparent !important;
	color: #fff !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	z-index: 3 !important;
}
.cs-side-cart__logoBubble img {
	display: block !important;
	max-height: 38px !important;
	width: auto !important;
	margin: 0 !important;
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.25)) !important;
}
.cs-side-cart__logoBubble .cs-side-cart__logoText {
	display: inline-block;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	white-space: nowrap !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
.cs-side-cart__logoBubble sup { font-size: 0.65em !important; }

/* Inner body: vertical flex column. Title + count stay pinned, the scroll
   area takes the remaining height, and the footer sticks to the bottom. */
.cs-side-cart__body {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	padding: 14px 4px 0 !important;
	position: relative !important;
	margin: 0 !important;
	overflow: hidden !important;
}

/* Scrollable middle area (coupon + items + bonus) */
.cs-side-cart__scroll {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 2px 4px 4px !important;
	margin: 0 !important;
	/* Firefox */
	scrollbar-width: thin !important;
	scrollbar-color: #b96bff rgba(255,255,255,0.18) !important;
}
/* WebKit scrollbar — themed pink/violet to match the bonus banner */
.cs-side-cart__scroll::-webkit-scrollbar { width: 6px !important; }
.cs-side-cart__scroll::-webkit-scrollbar-track {
	background: rgba(255,255,255,0.18) !important;
	border-radius: 3px !important;
	margin: 4px 0 !important;
}
.cs-side-cart__scroll::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #ff5fa2 0%, #b96bff 100%) !important;
	border-radius: 3px !important;
}
.cs-side-cart__scroll::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #ff7ab2 0%, #c986ff 100%) !important;
}

.cs-side-cart__title {
	margin: 0 0 4px !important;
	padding: 0 !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	text-align: center !important;
	color: #fff !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0.08) !important;
}
.cs-side-cart__count {
	margin: 0 0 14px !important;
	padding: 0 !important;
	text-align: center !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	opacity: 0.96 !important;
}

.cs-side-cart.is-loading .cs-side-cart__body::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: rgba(255,255,255,0.4) !important;
	z-index: 2 !important;
}

/* ============ Empty state ============ */
.cs-side-cart__empty {
	position: relative !important;
	background: linear-gradient(180deg, #ffffff 0%, #f6f4ff 100%) !important;
	color: #2b2b2b !important;
	border: 1px solid rgba(138,108,240,0.12) !important;
	border-radius: 24px !important;
	padding: 30px 22px 26px !important;
	text-align: center !important;
	box-shadow: 0 14px 34px rgba(74,47,184,0.14) !important;
	margin: 0 0 16px !important;
	overflow: hidden !important;
}
.cs-side-cart__emptyTitle {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #3a2f6b !important;
	margin: 4px 0 6px !important;
	padding: 0 !important;
}
.cs-side-cart__emptyText {
	font-size: 14px !important;
	color: #7a7596 !important;
	margin: 0 auto 18px !important;
	padding: 0 !important;
	max-width: 240px !important;
	line-height: 1.45 !important;
}

/* Friendly bag illustration */
.cs-side-cart__emptyArt {
	position: relative !important;
	width: 132px !important;
	height: 132px !important;
	margin: 0 auto 14px !important;
	display: block !important;
}
.cs-side-cart__emptyBag {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	animation: cs-bag-bob 3.4s ease-in-out infinite !important;
	filter: drop-shadow(0 10px 14px rgba(90,63,214,0.22)) !important;
}
@keyframes cs-bag-bob {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50%      { transform: translateY(-6px) rotate(2deg); }
}
.cs-side-cart__emptyGlow {
	position: absolute !important;
	z-index: 0 !important;
	left: 50% !important;
	top: 52% !important;
	width: 116px !important;
	height: 116px !important;
	transform: translate(-50%, -50%) !important;
	border-radius: 50% !important;
	background: radial-gradient(circle, rgba(138,108,240,0.28) 0%, rgba(138,108,240,0) 70%) !important;
	animation: cs-glow-pulse 3.4s ease-in-out infinite !important;
}
@keyframes cs-glow-pulse {
	0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.94); }
	50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
.cs-side-cart__emptySparkle {
	position: absolute !important;
	z-index: 2 !important;
	color: #c9b8ff !important;
	font-size: 16px !important;
	line-height: 1 !important;
	opacity: 0 !important;
	animation: cs-sparkle 2.8s ease-in-out infinite !important;
	text-shadow: 0 0 6px rgba(201,184,255,0.6) !important;
}
.cs-side-cart__emptySparkle--1 { top: 8px !important;  left: 18px !important; animation-delay: 0s !important; }
.cs-side-cart__emptySparkle--2 { top: 14px !important; right: 16px !important; font-size: 12px !important; animation-delay: 0.9s !important; }
.cs-side-cart__emptySparkle--3 { bottom: 22px !important; right: 26px !important; font-size: 13px !important; animation-delay: 1.8s !important; }
@keyframes cs-sparkle {
	0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); }
	40%      { opacity: 1; transform: scale(1) rotate(20deg); }
	60%      { opacity: 1; transform: scale(1) rotate(-10deg); }
}

/* ============ Coupon ============ */
.cs-side-cart__coupon {
	display: flex !important;
	align-items: stretch !important;
	background: #fff !important;
	border-radius: 28px !important;
	padding: 4px !important;
	margin: 0 0 14px !important;
	box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
	gap: 0 !important;
}
.cs-side-cart__couponInput {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	border: 0 !important;
	background: transparent !important;
	padding: 10px 16px !important;
	font-size: 14px !important;
	color: #2b2b2b !important;
	outline: none !important;
	box-shadow: none !important;
	font-family: inherit !important;
}
.cs-side-cart__couponInput::placeholder { color: #a0a8b6 !important; opacity: 1 !important; }
.cs-side-cart__couponApply {
	background: linear-gradient(180deg, #3aa3ff 0%, #1976d2 100%) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 10px 22px !important;
	border-radius: 24px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	cursor: pointer !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
	box-shadow: 0 4px 10px rgba(33,150,243,0.35) !important;
	font-family: inherit !important;
}
.cs-side-cart__couponApply:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 16px rgba(33,150,243,0.45) !important;
	color: #fff !important;
}

.cs-side-cart__couponMsg {
	margin: -4px 0 12px !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	min-height: 0 !important;
	line-height: 1.35 !important;
}
.cs-side-cart__couponMsg:empty { display: none !important; }
.cs-side-cart__couponMsg.is-error,
.cs-side-cart__couponMsg.is-success {
	display: inline-block !important;
	padding: 7px 14px !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.14) !important;
	animation: cs-coupon-pop 0.3s ease both !important;
}
.cs-side-cart__couponMsg.is-error   { background: #ffffff !important; color: #d63031 !important; }
.cs-side-cart__couponMsg.is-success { background: #ffffff !important; color: #1f9d57 !important; }
@keyframes cs-coupon-pop {
	from { opacity: 0; transform: translateY(-6px) scale(0.96); }
	to   { opacity: 1; transform: none; }
}

.cs-side-cart__couponList {
	list-style: none !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	display: grid !important;
	gap: 8px !important;
}
/* Applied coupon = a discount "ticket": white card, green accent + perforation */
.cs-side-cart__couponItem {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	background: #ffffff !important;
	color: #1d3658 !important;
	padding: 10px 12px 10px 14px !important;
	border-radius: 14px !important;
	font-size: 13px !important;
	margin: 0 !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
	animation: cs-coupon-pop 0.32s ease both !important;
}
/* Left green stub of the ticket */
.cs-side-cart__couponItem::before {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 6px !important;
	background: linear-gradient(180deg, #3bb273 0%, #2bbd75 100%) !important;
}
.cs-side-cart__couponTicket {
	font-size: 18px !important;
	line-height: 1 !important;
	flex: 0 0 auto !important;
	margin-left: 2px !important;
}
.cs-side-cart__couponInfo {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
	line-height: 1.2 !important;
}
.cs-side-cart__couponCode {
	font-weight: 800 !important;
	font-size: 14px !important;
	color: #1d3658 !important;
	letter-spacing: 0.03em !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.cs-side-cart__couponState {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #2bbd75 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}
.cs-side-cart__couponSaved {
	flex: 0 0 auto !important;
	background: rgba(43,189,117,0.14) !important;
	color: #1f9d57 !important;
	font-weight: 800 !important;
	font-size: 13px !important;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
}
.cs-side-cart__couponSaved .woocommerce-Price-amount,
.cs-side-cart__couponSaved .amount,
.cs-side-cart__couponSaved bdi { color: inherit !important; font: inherit !important; }
.cs-side-cart__couponRemove {
	flex: 0 0 auto !important;
	background: transparent !important;
	border: 0 !important;
	color: #c0392b !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 0 2px 0 4px !important;
	transition: transform 0.15s ease !important;
}
.cs-side-cart__couponRemove:hover { transform: scale(1.2) !important; }

/* ============ Bonus banner ============ */
.cs-bonus {
	border-radius: 18px !important;
	padding: 12px 16px 14px !important;
	margin: 4px 0 14px !important;
	box-shadow: 0 8px 18px rgba(0,0,0,0.16) !important;
	position: relative !important;
	overflow: visible !important;
	background: linear-gradient(95deg, #ff5fa2 0%, #c46cff 100%) !important;
	color: #fff !important;
	border: 2px solid rgba(255,255,255,0.45) !important;
	transition: filter 0.25s ease, opacity 0.25s ease !important;
}
/* Muted look when the customer has switched the bonus off */
.cs-bonus--off {
	filter: grayscale(0.35) !important;
	opacity: 0.92 !important;
}
.cs-bonus__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
}
.cs-bonus__teaser {
	font-weight: 700 !important;
	font-size: 15px !important;
	color: #fff !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0.12) !important;
}
.cs-bonus__title {
	font-weight: 700 !important;
	font-size: 15px !important;
	color: #fff !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0.12) !important;
}
.cs-bonus__msg, .cs-bonus__sub {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	color: #fff !important;
	font-weight: 600 !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0.10) !important;
}

/* Animated eyes (inactive state) */
.cs-bonus__eyes { display: inline-flex !important; gap: 4px !important; flex: 0 0 auto !important; }
.cs-bonus__eye {
	width: 22px !important;
	height: 22px !important;
	background: #fff !important;
	border-radius: 50% !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06) !important;
}
.cs-bonus__pupil {
	position: absolute !important;
	width: 10px !important;
	height: 10px !important;
	background: #1b1b1b !important;
	border-radius: 50% !important;
	top: 6px !important;
	left: 6px !important;
	/* Both pupils share the SAME animation with NO per-eye delay, so the eyes
	   always look in the same direction together instead of drifting at random. */
	animation: cs-eye-look 4s ease-in-out infinite !important;
}
@keyframes cs-eye-look {
	0%, 100% { transform: translate(0, 0); }
	20%      { transform: translate(4px, 0); }
	40%      { transform: translate(-3px, 1px); }
	60%      { transform: translate(0, 2px); }
	80%      { transform: translate(2px, -1px); }
}
/* Eyelid: a white shade that drops from the top to blink — identical timing on
   both eyes (no delay) so they blink in perfect sync. */
.cs-bonus__eye::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: #fff !important;
	transform: scaleY(0) !important;
	transform-origin: top center !important;
	animation: cs-eye-blink 4s ease-in-out infinite !important;
}
@keyframes cs-eye-blink {
	0%, 44%, 56%, 100% { transform: scaleY(0); }
	48%, 52%           { transform: scaleY(1); }
}

/* Toggle (active state) — clickable switch to enable/disable the free bonus */
.cs-bonus__toggle {
	width: 44px !important;
	height: 24px !important;
	background: rgba(255,255,255,0.95) !important;
	border: 0 !important;
	border-radius: 999px !important;
	position: relative !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05) !important;
	transition: background 0.25s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.cs-bonus__toggle.is-off { background: rgba(255,255,255,0.5) !important; }
.cs-bonus__toggle.is-busy { opacity: 0.7 !important; pointer-events: none !important; }
.cs-bonus__toggleDot {
	position: absolute !important;
	top: 2px !important;
	left: 22px !important;
	width: 20px !important;
	height: 20px !important;
	background: #2bbd75 !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.22) !important;
	transition: left 0.25s ease, background 0.25s ease !important;
}
.cs-bonus__toggle.is-off .cs-bonus__toggleDot {
	left: 2px !important;
	background: #b6b6c6 !important;
}

/* ============ Items list ============ */
.cs-side-cart__items {
	list-style: none !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	display: grid !important;
	gap: 10px !important;
}
.cs-side-cart__item {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	column-gap: 12px !important;
	row-gap: 2px !important;
	align-items: start !important;
	background: rgba(232, 245, 234, 0.88) !important;
	color: #312a7a !important;
	padding: 14px 16px !important;
	border-radius: 14px !important;
	box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important;
	position: relative !important;
	margin: 0 !important;
}
.cs-side-cart__itemBody {
	min-width: 0 !important;
	grid-column: 1 / 2 !important;
}
.cs-side-cart__itemName {
	font-weight: 700 !important;
	font-size: 16px !important;
	color: #2c2a85 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
}
.cs-side-cart__itemLinksLabel {
	font-size: 12px !important;
	color: #444 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 500 !important;
}
.cs-side-cart__itemLink {
	font-size: 13px !important;
	color: #2bbd75 !important;
	font-weight: 500 !important;
	word-break: break-all !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	line-height: 1.35 !important;
}
.cs-side-cart__itemLinks {
	list-style: none !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
}
.cs-side-cart__itemLinks li {
	margin: 0 !important;
	padding: 0 !important;
}
.cs-side-cart__itemPrice {
	grid-column: 2 / 3 !important;
	align-self: end !important;
	justify-self: end !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	color: #2c2a85 !important;
	white-space: nowrap !important;
	margin: 0 !important;
	padding: 0 !important;
}
.cs-side-cart__itemPrice .woocommerce-Price-amount,
.cs-side-cart__itemPrice .amount,
.cs-side-cart__itemPrice bdi { color: inherit !important; font: inherit !important; }

/* Free bonus +10% line */
.cs-side-cart__item--bonus {
	/* Solid violet card so the free bonus stands out from the green service
	   cards (and the green panel background) instead of blending in. */
	background: linear-gradient(95deg, #7b2ff7 0%, #b14de0 100%) !important;
	border: 0 !important;
	box-shadow: 0 8px 18px rgba(123,47,247,0.32) !important;
	align-items: center !important;
	animation: cs-bonus-row-in 0.32s ease both !important;
}
.cs-side-cart__item--bonus .cs-side-cart__itemName { color: #fff !important; }
.cs-side-cart__item--bonus .cs-side-cart__bonusTag {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: rgba(255,255,255,0.92) !important;
	margin-top: 4px !important;
}
.cs-side-cart__bonusTag {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #b14de0 !important;
	margin-top: 4px !important;
}
/* "GRATIS" as a high-contrast white pill on the violet card */
.cs-side-cart__item--bonus .cs-side-cart__itemPrice--free {
	color: #6a1bb0 !important;
	background: #fff !important;
	padding: 5px 14px !important;
	border-radius: 999px !important;
	box-shadow: 0 3px 8px rgba(0,0,0,0.18) !important;
	font-weight: 800 !important;
}
.cs-side-cart__itemPrice--free {
	color: #2bbd75 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	font-size: 14px !important;
}

/* Bonus row enter / leave animations (toggle on/off) */
@keyframes cs-bonus-row-in {
	from { opacity: 0; transform: translateY(-8px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}
.cs-side-cart__item--bonus.cs-bonus-row--leaving {
	animation: cs-bonus-row-out 0.26s ease forwards !important;
	pointer-events: none !important;
}
@keyframes cs-bonus-row-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(-8px) scale(0.95); }
}

/* Red X badge floating on top-right corner */
.cs-side-cart__itemRemove {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	width: 22px !important;
	height: 22px !important;
	box-shadow: none !important;
}
.cs-side-cart__itemRemove svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)) !important;
}

/* ============ Footer (cristalli + totale + CTA) — sticky bottom ============ */
.cs-side-cart__footer {
	flex: 0 0 auto !important;
	background: linear-gradient(180deg, #4b2a9c 0%, #312072 100%) !important;
	border-radius: 16px !important;
	padding: 12px 14px 14px !important;
	margin: 8px 4px 4px !important;
	color: #fff !important;
	box-shadow: 0 8px 22px rgba(0,0,0,0.18) !important;
}
.cs-side-cart__footerRow {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin: 0 0 10px !important;
	color: #fff !important;
	font-size: 15px !important;
}
.cs-side-cart__cristalli {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}
.cs-side-cart__cristalliIcon {
	display: inline-block !important;
	animation: cs-cristal-spin 4s linear infinite !important;
	font-style: normal !important;
}
@keyframes cs-cristal-spin {
	0%   { transform: rotate(-8deg) scale(1); }
	50%  { transform: rotate(8deg) scale(1.1); }
	100% { transform: rotate(-8deg) scale(1); }
}
.cs-side-cart__totalValue {
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 16px !important;
}
.cs-side-cart__totalValue .woocommerce-Price-amount,
.cs-side-cart__totalValue .amount,
.cs-side-cart__totalValue bdi {
	color: #fff !important;
	font: inherit !important;
}

/* Discounted total: old price struck-through, new price highlighted */
.cs-side-cart__totalOld {
	color: rgba(255,255,255,0.65) !important;
	text-decoration: line-through !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	margin: 0 4px !important;
}
.cs-side-cart__totalOld .woocommerce-Price-amount,
.cs-side-cart__totalOld .amount,
.cs-side-cart__totalOld bdi { color: inherit !important; font: inherit !important; }
.cs-side-cart__totalNew.is-discounted {
	color: #7CFFB0 !important;
	font-weight: 800 !important;
	font-size: 18px !important;
	text-shadow: 0 1px 6px rgba(124,255,176,0.4) !important;
	animation: cs-total-pop 0.4s ease both !important;
}
.cs-side-cart__totalNew.is-discounted .woocommerce-Price-amount,
.cs-side-cart__totalNew.is-discounted .amount,
.cs-side-cart__totalNew.is-discounted bdi { color: inherit !important; font: inherit !important; }
@keyframes cs-total-pop {
	0%   { transform: scale(0.7); opacity: 0; }
	60%  { transform: scale(1.12); }
	100% { transform: scale(1); opacity: 1; }
}

/* "Stai risparmiando X" marketing banner inside the footer */
.cs-side-cart__savings {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: linear-gradient(95deg, #3bb273 0%, #2bbd75 100%) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 8px 12px !important;
	border-radius: 12px !important;
	margin: 0 0 10px !important;
	box-shadow: 0 6px 14px rgba(43,189,117,0.4) !important;
	animation: cs-coupon-pop 0.35s ease both !important;
}
.cs-side-cart__savings strong { font-weight: 800 !important; }
.cs-side-cart__savings .woocommerce-Price-amount,
.cs-side-cart__savings .amount,
.cs-side-cart__savings bdi { color: #fff !important; font: inherit !important; }
.cs-side-cart__savingsIcon {
	font-size: 16px !important;
	line-height: 1 !important;
	animation: cs-savings-bounce 1.6s ease-in-out infinite !important;
}
@keyframes cs-savings-bounce {
	0%, 100% { transform: translateY(0) rotate(-6deg); }
	50%      { transform: translateY(-2px) rotate(6deg); }
}

/* ============ Buttons ============ */
.cs-side-cart .cs-btn,
.cs-added-modal .cs-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	border: 0 !important;
	border-radius: 14px !important;
	padding: 14px 18px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	font-family: inherit !important;
	letter-spacing: 0.01em !important;
	line-height: 1.2 !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}
.cs-side-cart .cs-btn:hover,
.cs-added-modal .cs-btn:hover { transform: translateY(-1px) !important; }
.cs-side-cart .cs-btn:active,
.cs-added-modal .cs-btn:active { transform: translateY(0) !important; }

.cs-side-cart .cs-btn--green,
.cs-added-modal .cs-btn--green {
	background: linear-gradient(180deg, #6ddc9a 0%, #3bb273 100%) !important;
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(46,178,115,0.35) !important;
}
.cs-side-cart .cs-btn--green:hover,
.cs-added-modal .cs-btn--green:hover { box-shadow: 0 10px 20px rgba(46,178,115,0.45) !important; color: #fff !important; }

.cs-side-cart .cs-btn--violet,
.cs-added-modal .cs-btn--violet {
	background: linear-gradient(180deg, #6b4ed3 0%, #4a2fb8 100%) !important;
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(74,47,184,0.35) !important;
}
.cs-side-cart .cs-btn--violet:hover,
.cs-added-modal .cs-btn--violet:hover { box-shadow: 0 10px 20px rgba(74,47,184,0.45) !important; color: #fff !important; }

.cs-side-cart .cs-btn--green-gradient {
	background: linear-gradient(180deg, #8df0b4 0%, #3bb273 100%) !important;
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(46,178,115,0.45) !important;
	font-size: 19px !important;
	padding: 16px 18px !important;
	position: relative !important;
	overflow: hidden !important;
	animation: cs-cta-pulse 2.4s ease-in-out infinite !important;
}
.cs-side-cart .cs-btn--green-gradient:hover { color: #fff !important; }
@keyframes cs-cta-pulse {
	0%, 100% { transform: scale(1);    box-shadow: 0 8px 18px rgba(46,178,115,0.4); }
	50%      { transform: scale(1.02); box-shadow: 0 14px 26px rgba(46,178,115,0.55); }
}
.cs-side-cart .cs-btn--green-gradient::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: -60% !important;
	height: 100% !important;
	width: 50% !important;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%) !important;
	transform: skewX(-20deg) !important;
	animation: cs-cta-shimmer 3s ease-in-out infinite !important;
}
@keyframes cs-cta-shimmer {
	0%   { left: -60%; }
	60%  { left: 130%; }
	100% { left: 130%; }
}

/* ============ Added-to-cart modal ============ */
.cs-added-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 1000000 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.cs-added-modal.is-open { pointer-events: auto !important; visibility: visible !important; }
.cs-added-modal__overlay {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0,0,0,0.35) !important;
	opacity: 0 !important;
	transition: opacity 0.25s ease !important;
}
.cs-added-modal.is-open .cs-added-modal__overlay { opacity: 1 !important; }
.cs-added-modal__box {
	position: relative !important;
	background: #dcdee3 !important;
	border-radius: 22px !important;
	padding: 26px 26px 22px !important;
	width: 92% !important;
	max-width: 380px !important;
	text-align: center !important;
	box-shadow: 0 18px 44px rgba(0,0,0,0.28) !important;
	transform: scale(0.92) !important;
	opacity: 0 !important;
	transition: transform 0.25s ease, opacity 0.25s ease !important;
}
.cs-added-modal.is-open .cs-added-modal__box { transform: scale(1) !important; opacity: 1 !important; }
.cs-added-modal__check {
	width: 56px !important;
	height: 56px !important;
	margin: 0 auto 6px !important;
	animation: cs-check-pop 0.45s ease-out !important;
}
.cs-added-modal__check svg { width: 100% !important; height: 100% !important; display: block !important; }
@keyframes cs-check-pop {
	0%   { transform: scale(0.4); opacity: 0; }
	60%  { transform: scale(1.1); opacity: 1; }
	100% { transform: scale(1); }
}
.cs-added-modal__title {
	font-size: 19px !important;
	font-weight: 700 !important;
	color: #2a2660 !important;
	margin: 8px 0 18px !important;
	padding: 0 !important;
}
.cs-added-modal__continue { margin-bottom: 10px !important; }

/* ============ Floating cart trigger ============ */
/* Hide legacy theme cart cell (and any clone) — single source of truth lives in the plugin */
.cs-header .cs-header__cart,
.cs-header__cart { display: none !important; }

.cs-cart-trigger {
	position: fixed !important;
	top: 16px !important;
	right: 16px !important;
	z-index: 999900 !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	border: 0 !important;
	cursor: pointer !important;
	background: linear-gradient(180deg, #7d5bd6 0%, #4a2fb8 100%) !important;
	box-shadow: 0 10px 22px rgba(74,47,184,0.4) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
	animation: cs-trigger-float 4s ease-in-out infinite !important;
}
.cs-cart-trigger:hover {
	transform: scale(1.06) !important;
	box-shadow: 0 14px 28px rgba(74,47,184,0.55) !important;
}
@keyframes cs-trigger-float {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50%      { transform: translateY(-3px) rotate(3deg); }
}
.cs-cart-trigger.is-bumping { animation: cs-trigger-bump 0.7s ease-out !important; }
@keyframes cs-trigger-bump {
	0%   { transform: scale(1) rotate(0); }
	30%  { transform: scale(1.2) rotate(-12deg); }
	60%  { transform: scale(0.95) rotate(10deg); }
	100% { transform: scale(1) rotate(0); }
}
.cs-cart-trigger__icon {
	width: 28px !important;
	height: 28px !important;
	display: block !important;
}

.cs-cart-trigger__counter {
	position: absolute !important;
	top: -4px !important;
	right: -4px !important;
	min-width: 22px !important;
	height: 22px !important;
	padding: 0 6px !important;
	border-radius: 11px !important;
	background: #e74c3c !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 22px !important;
	text-align: center !important;
	box-shadow: 0 2px 6px rgba(231,76,60,0.5) !important;
	transition: transform 0.2s ease !important;
	transform: none !important; /* override rotateY from theme css */
	font-family: 'Poppins', system-ui, sans-serif !important;
}
.cs-cart-trigger__counter.is-empty { display: none !important; }
.cs-cart-trigger__counter.is-pulse { animation: cs-counter-pulse 0.55s ease-out !important; }
@keyframes cs-counter-pulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.5); }
	100% { transform: scale(1); }
}

body.cs-no-scroll { overflow: hidden !important; }

/* On mobile/tablet match the header menu bubble: same 40px size and the same
   vertical centre (header row is 70px → bubble top edge at 15px), mirrored
   horizontally so the cart pallino lines up with the menu pallino. */
@media (max-width: 1023px) {
	.cs-cart-trigger {
		width: 40px !important;
		height: 40px !important;
		top: 15px !important;
		right: 16px !important;
	}
	.cs-cart-trigger__icon { width: 22px !important; height: 22px !important; }
	.cs-cart-trigger__counter {
		min-width: 18px !important;
		height: 18px !important;
		line-height: 18px !important;
		padding: 0 5px !important;
		font-size: 11px !important;
		top: -5px !important;
		right: -5px !important;
	}
}

/* ============ Mobile ============ */
@media (max-width: 480px) {
	.cs-side-cart__panel { max-width: 100% !important; padding-top: 64px !important; padding-left: 14px !important; padding-right: 14px !important; }
	.cs-side-cart__title { font-size: 22px !important; }

	/* Footer total can carry "Totale: <old> <new>" + cristalli on one line —
	   let it wrap gracefully and keep the new total aligned right. */
	.cs-side-cart__footerRow { flex-wrap: wrap !important; row-gap: 4px !important; }
	.cs-side-cart__totalValue { margin-left: auto !important; font-size: 15px !important; }
	.cs-side-cart__totalNew.is-discounted { font-size: 16px !important; }
	.cs-side-cart__totalOld { font-size: 13px !important; }
	.cs-side-cart__cristalli { font-size: 13px !important; }
	.cs-side-cart__savings { font-size: 12px !important; }

	/* Item rows: keep the long instagram links from forcing horizontal scroll. */
	.cs-side-cart__itemLink { word-break: break-all !important; overflow-wrap: anywhere !important; }
	.cs-side-cart__item { padding: 12px 14px !important; }
}

/* ===================================================================
   Simplified Checkout (CompraSocial.me)
   =================================================================== */

body.woocommerce-checkout {
	background: linear-gradient(180deg, #3fb6e5 0%, #74e3a0 60%, #8eea9b 100%) !important;
	min-height: 100vh !important;
}

.cs-checkout {
	max-width: 560px;
	margin: 40px auto;
	padding: 0 16px;
	color: #1d3658;
}

.cs-checkout__hiddenFields {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.cs-checkout__creditBox {
	background: #fff;
	border-radius: 18px;
	padding: 14px 22px 16px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.12);
	text-align: center;
	margin-bottom: 24px;
}
.cs-checkout__creditText { margin: 0 0 10px; font-size: 16px; color: #1d3658; }
.cs-checkout__creditText strong { color: #1d3658; font-weight: 700; }
.cs-checkout__creditButton {
	background: linear-gradient(180deg, #6b4ed3 0%, #4a2fb8 100%);
	color: #fff;
	border: 0;
	padding: 12px 20px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(74, 47, 184, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cs-checkout__creditButton:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(74, 47, 184, 0.45); }

.cs-checkout__heading {
	text-align: center;
	color: #1d3658;
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 18px;
}

.cs-checkout__panel {
	background: rgba(255,255,255,0.65);
	border-radius: 18px;
	padding: 18px 18px 22px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.cs-checkout__totalBox { text-align: center; margin-bottom: 14px; }
.cs-checkout__totalLabel { margin: 0; font-size: 17px; color: #1d3658; }
.cs-checkout__totalValue { margin-left: 6px; font-weight: 800; font-size: 20px; color: #1d3658; }
.cs-checkout__totalValue .woocommerce-Price-amount { color: inherit; }

.cs-checkout__review .shop_table.woocommerce-checkout-review-order-table { display: none; }
.cs-checkout__review #payment { background: transparent; padding: 0; }
.cs-checkout__review #payment > h3 { display: none; }
.cs-checkout__review .woocommerce-checkout-payment {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.cs-checkout__review .woocommerce-checkout-payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
	border: 0;
}
.cs-checkout__review .woocommerce-checkout-payment ul.payment_methods li {
	background: #d6e6fb;
	border-radius: 14px;
	padding: 14px 18px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	text-align: center;
}
.cs-checkout__review .woocommerce-checkout-payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 10px;
	font-weight: 700;
	color: #1d3658;
	cursor: pointer;
}
.cs-checkout__review .woocommerce-checkout-payment ul.payment_methods li input[type="radio"] { margin-right: 4px; }
.cs-checkout__review .woocommerce-checkout-payment ul.payment_methods li img {
	max-height: 26px;
	width: auto;
	vertical-align: middle;
}
.cs-checkout__review .woocommerce-checkout-payment div.payment_box {
	background: rgba(255,255,255,0.8);
	border-radius: 10px;
	margin-top: 8px;
	padding: 10px 12px;
	font-size: 13px;
	color: #1d3658;
}
.cs-checkout__review .woocommerce-checkout-payment div.payment_box::before { display: none; }
.cs-checkout__review .form-row.place-order { margin-top: 16px; }
.cs-checkout__review #place_order {
	width: 100%;
	background: linear-gradient(180deg, #8df0b4 0%, #3bb273 100%);
	color: #fff;
	border: 0;
	padding: 14px 18px;
	border-radius: 14px;
	font-size: 17px;
	font-weight: 700;
	box-shadow: 0 8px 18px rgba(46, 178, 115, 0.4);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cs-checkout__review #place_order:hover { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(46, 178, 115, 0.55); }

body.woocommerce-checkout .woocommerce-notices-wrapper { max-width: 560px; margin: 0 auto; padding: 0 16px; }

/* Checkout page — mobile: tighten spacing and prevent any horizontal overflow
   from the order summary / payment cards. (No tall fixed header to clear — the
   cart button just floats top-right — so keep the top margin modest, since the
   cart summary usually sits above this block.) */
@media (max-width: 600px) {
	.cs-checkout { margin: 24px auto !important; padding: 0 12px !important; }
	.cs-checkout__heading { font-size: 22px !important; margin-bottom: 14px !important; }
	.cs-checkout__panel { padding: 14px 12px 18px !important; }
	.cs-checkout__totalLabel { font-size: 16px !important; }
	.cs-checkout__totalValue { font-size: 18px !important; }
	.cs-checkout__review .woocommerce-checkout-payment ul.payment_methods li { padding: 12px 12px !important; }
	.cs-checkout__review .woocommerce-checkout-payment ul.payment_methods li img { max-height: 22px !important; }
	body.woocommerce-checkout .woocommerce-notices-wrapper { padding: 0 12px !important; }
}

/* Cart/checkout pages: hide the redundant WC coupon toggle + form (we have it in the side cart) */
body.woocommerce-cart .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-cart .checkout_coupon,
body.woocommerce-checkout .checkout_coupon { display: none !important; }

/* Page backgrounds */
body.woocommerce-cart {
	background: linear-gradient(180deg, #3fb6e5 0%, #74e3a0 60%, #8eea9b 100%) !important;
	min-height: 100vh !important;
}

/* ===================================================================
   Expandable cart summary (cart page)
   =================================================================== */

.cs-cart-form {
	max-width: 560px !important;
	margin: 32px auto 24px !important;
	padding: 0 16px !important;
}

.cs-cart-summary, .cs-cart-summary * { box-sizing: border-box !important; }

.cs-cart-summary {
	background: #fff !important;
	border-radius: 18px !important;
	box-shadow: 0 12px 28px rgba(0,0,0,0.14) !important;
	overflow: hidden !important;
	color: #1d3658 !important;
	border: 0 !important;
}

.cs-cart-summary__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 16px 20px !important;
	cursor: pointer !important;
	list-style: none !important;
	background: linear-gradient(180deg, #4b2a9c 0%, #312072 100%) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	user-select: none !important;
}
.cs-cart-summary__head::-webkit-details-marker { display: none !important; }
.cs-cart-summary__head::marker { content: '' !important; }

.cs-cart-summary__title {
	color: #fff !important;
	letter-spacing: 0.01em !important;
}

.cs-cart-summary__chevron {
	width: 22px !important;
	height: 22px !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.25s ease !important;
}
.cs-cart-summary__chevron svg { width: 100% !important; height: 100% !important; display: block !important; }
.cs-cart-summary[open] .cs-cart-summary__chevron { transform: rotate(180deg) !important; }

.cs-cart-summary__body {
	padding: 14px 16px 18px !important;
	animation: cs-summary-open 0.25s ease-out !important;
}
@keyframes cs-summary-open {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.cs-cart-summary__table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 8px !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
.cs-cart-summary__table thead { display: none !important; }
.cs-cart-summary__table tr,
.cs-cart-summary__table td { border: 0 !important; background: transparent !important; }

.cs-cart-row {
	background: rgba(232, 245, 234, 0.7) !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
}
.cs-cart-row > td { padding: 12px 14px !important; vertical-align: top !important; }
.cs-cart-row__name { width: auto !important; }
.cs-cart-row__title {
	font-weight: 700 !important;
	font-size: 16px !important;
	color: #2c2a85 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	line-height: 1.3 !important;
}
.cs-cart-row__linksLabel {
	font-size: 12px !important;
	color: #444 !important;
	margin-top: 4px !important;
}
.cs-cart-row__link {
	font-size: 13px !important;
	color: #2bbd75 !important;
	font-weight: 500 !important;
	word-break: break-all !important;
}
.cs-cart-row__meta {
	font-size: 12px !important;
	color: #555 !important;
	margin-top: 4px !important;
}
.cs-cart-row__meta p { margin: 0 !important; }

.cs-cart-row__subtotal {
	white-space: nowrap !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	color: #2c2a85 !important;
	text-align: right !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
.cs-cart-row__subtotal .woocommerce-Price-amount,
.cs-cart-row__subtotal .amount,
.cs-cart-row__subtotal bdi { color: inherit !important; font: inherit !important; }

.cs-cart-row__remove {
	width: 28px !important;
	padding: 8px !important;
	text-align: right !important;
}
.cs-cart-row__removeBtn {
	display: inline-block !important;
	width: 22px !important;
	height: 22px !important;
	line-height: 1 !important;
	color: transparent !important;
	font-size: 0 !important;
	text-decoration: none !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}
.cs-cart-row__removeBtn:hover { background: transparent !important; opacity: 0.85 !important; }
.cs-cart-row__removeBtn svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)) !important;
}

.cs-cart-summary__totals {
	margin: 14px 4px 2px !important;
	padding: 12px 6px 4px !important;
	border-top: 2px dashed rgba(75,42,156,0.18) !important;
}
.cs-cart-summary__totalRow {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 4px 0 !important;
}
.cs-cart-summary__totalLabel {
	color: #1d3658 !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
.cs-cart-summary__totalValue {
	color: #2c2a85 !important;
	font-weight: 800 !important;
	font-size: 18px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
/* Coupon discount row (green) */
.cs-cart-summary__totalRow--discount .cs-cart-summary__totalLabel,
.cs-cart-summary__totalRow--discount .cs-cart-summary__totalValue {
	color: #1f9d57 !important;
	font-weight: 700 !important;
}
.cs-cart-summary__totalRow--discount .cs-cart-summary__totalLabel { font-size: 14px !important; }
.cs-cart-summary__totalRow--discount .cs-cart-summary__totalValue { font-size: 16px !important; }
/* Grand total row (after discount) */
.cs-cart-summary__totalRow--grand {
	margin-top: 6px !important;
	padding-top: 10px !important;
	border-top: 1px solid rgba(75,42,156,0.15) !important;
}
.cs-cart-summary__totalRow--grand .cs-cart-summary__totalLabel { font-weight: 800 !important; font-size: 16px !important; }
.cs-cart-summary__totalRow--grand .cs-cart-summary__totalValue { font-size: 20px !important; }
.cs-cart-summary__totalValue .woocommerce-Price-amount,
.cs-cart-summary__totalValue .amount,
.cs-cart-summary__totalValue bdi { color: inherit !important; font: inherit !important; }

/* Mobile */
@media (max-width: 480px) {
	.cs-cart-form { margin-top: 80px !important; }
	.cs-cart-summary__head { padding: 14px 16px !important; font-size: 15px !important; }
}

/* ===================================================================
   CardCorp payment widget — reskinned to match CompraSocial.me
   (order-pay / receipt page). The CardCorp plugin & its own CSS are
   left untouched; these are higher-specificity theme overrides.
   =================================================================== */

/* The order-pay endpoint lives on the checkout page → green gradient bg. */
body.woocommerce-checkout #cardcorp_payment_container {
	max-width: 560px !important;
	margin: 32px auto !important;
	background: #fff !important;
	border-radius: 18px !important;
	box-shadow: 0 12px 28px rgba(0,0,0,0.16) !important;
	padding: 26px 24px 22px !important;
	color: #1d3658 !important;
	font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
}

/* Kill the ugly grey WooCommerce payment_box that wraps the inline CardCorp
   embed at checkout — let it blend into the lavender method card, no triangle. */
body.woocommerce-checkout #payment .payment_box.payment_method_cardcorp,
body.woocommerce-checkout .payment_box.payment_method_cardcorp {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	color: #1d3658 !important;
}
body.woocommerce-checkout .payment_box.payment_method_cardcorp::before {
	display: none !important;
}

/* Section titles ("Saved cards", "Enter your card details", "Or continue with") */
body.woocommerce-checkout #cardcorp_payment_container .cardcorp-alt-card-title,
body.woocommerce-checkout .cardcorp-alt-card-title {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: #2c2a85 !important;
}

/* Inputs (card number / holder / expiry / cvv) */
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control,
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control-iframe {
	border-radius: 12px !important;
	border: 1px solid #d6deea !important;
	background: #f7faff !important;
}
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control:focus,
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control-cardHolder:focus {
	border-color: #3fb6e5 !important;
	box-shadow: 0 0 0 3px rgba(63,182,229,0.18) !important;
}
body.woocommerce-checkout #cardcorp_payment_container .wpwl-label {
	color: #1d3658 !important;
	font-weight: 600 !important;
}

/* Primary "Pay" button → site green gradient, like #place_order */
body.woocommerce-checkout .wpwl-button-pay {
	background: linear-gradient(180deg, #8df0b4 0%, #3bb273 100%) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 18px rgba(46,178,115,0.4) !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-weight: 700 !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
body.woocommerce-checkout .wpwl-button-pay:hover {
	background: linear-gradient(180deg, #9bf4be 0%, #2ea869 100%) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 14px 26px rgba(46,178,115,0.55) !important;
}

/* Apple Pay / Google Pay wallet buttons — keep dark, just round to match */
body.woocommerce-checkout .wpwl-apple-pay-button { border-radius: 14px !important; }

/* "Store payment details?" checkbox row */
body.woocommerce-checkout #cardcorp_payment_container .customLabel {
	color: #1d3658 !important;
	font-weight: 600 !important;
}
body.woocommerce-checkout #cardcorp_payment_container .customInput input[type="checkbox"] {
	accent-color: #4a2fb8 !important;
}

/* Test-mode badge → violet to match the brand */
body.woocommerce-checkout .testmode {
	border-color: rgba(74,47,184,0.3) !important;
	background: rgba(74,47,184,0.08) !important;
	color: #4a2fb8 !important;
	border-radius: 12px !important;
}
body.woocommerce-checkout .testmode__badge { background: #4a2fb8 !important; }

/* CardCorp logo divider */
body.woocommerce-checkout .cardcorp-logo-container { opacity: 0.85 !important; }

/* The pay form is rendered on the order-pay page: give it room & center it */
body.woocommerce-checkout #cardcorp_payment_container .wpwl-form {
	margin: 0 auto !important;
}

@media (max-width: 600px) {
	body.woocommerce-checkout #cardcorp_payment_container {
		margin: 90px 12px 24px !important;
		padding: 20px 16px 18px !important;
	}
}

/* ===================================================================
   Thank-you / order-received page
   =================================================================== */

body.woocommerce-order-received {
	background: linear-gradient(180deg, #3fb6e5 0%, #74e3a0 60%, #8eea9b 100%) !important;
	min-height: 100vh !important;
}

.cs-thankyou, .cs-thankyou * { box-sizing: border-box; }
.cs-thankyou {
	max-width: 600px !important;
	margin: 40px auto !important;
	padding: 0 16px !important;
	font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
	color: #1d3658 !important;
}

.cs-thankyou__card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.14);
	padding: 26px 24px;
	margin-bottom: 20px;
	text-align: center;
}

.cs-thankyou__icon { width: 64px; height: 64px; margin: 0 auto 10px; animation: cs-check-pop 0.5s ease-out; }
.cs-thankyou__icon svg { width: 100%; height: 100%; display: block; }

.cs-thankyou__title {
	font-size: 24px;
	font-weight: 700;
	color: #2c2a85;
	margin: 6px 0 8px;
}
.cs-thankyou__sub { font-size: 15px; color: #4a5568; margin: 0 0 6px; }

.cs-thankyou__overview {
	list-style: none;
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 2px dashed rgba(75,42,156,0.16);
	display: grid;
	gap: 8px;
	text-align: left;
}
.cs-thankyou__overview li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 14px;
}
.cs-thankyou__overview li span { color: #6b7280; }
.cs-thankyou__overview li strong { color: #2c2a85; text-align: right; word-break: break-word; }

.cs-thankyou__summary, .cs-thankyou__invoice { text-align: left; }
.cs-thankyou__sectionTitle {
	font-size: 19px;
	font-weight: 700;
	color: #2c2a85;
	margin: 0 0 14px;
}

.cs-thankyou__items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cs-thankyou__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 12px;
	align-items: start;
	background: rgba(232,245,234,0.7);
	border-radius: 14px;
	padding: 12px 14px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.cs-thankyou__item--bonus {
	background: linear-gradient(95deg, rgba(255,95,162,0.14) 0%, rgba(185,107,255,0.14) 100%);
	border: 1px dashed rgba(185,107,255,0.55);
}
.cs-thankyou__itemName { font-weight: 700; font-size: 16px; color: #2c2a85; }
.cs-thankyou__itemQty { color: #6b7280; font-weight: 600; font-size: 14px; margin-left: 4px; }
.cs-thankyou__itemLinksLabel { font-size: 12px; color: #555; margin-top: 4px; }
.cs-thankyou__itemLinks { list-style: none; margin: 2px 0 0; padding: 0; }
.cs-thankyou__itemLinks li { font-size: 13px; color: #2bbd75; font-weight: 500; word-break: break-all; }
.cs-thankyou__itemPrice { font-weight: 700; font-size: 16px; color: #2c2a85; white-space: nowrap; text-align: right; }
.cs-thankyou__itemPrice .woocommerce-Price-amount,
.cs-thankyou__itemPrice .amount,
.cs-thankyou__itemPrice bdi { color: inherit; font: inherit; }
.cs-thankyou__itemPrice--free { color: #2bbd75; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; }

.cs-thankyou__totals { width: 100%; border-collapse: collapse; margin-top: 14px; background: transparent; }
.cs-thankyou__totals tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cs-thankyou__totals th, .cs-thankyou__totals td {
	padding: 11px 0;
	font-size: 14px;
	background: transparent;
	border: 0;
	border-top: 1px dashed rgba(75,42,156,0.16);
}
.cs-thankyou__totals tr:first-child th, .cs-thankyou__totals tr:first-child td { border-top: 0; }
.cs-thankyou__totals th { text-align: left; color: #6b7280; font-weight: 600; }
.cs-thankyou__totals td { text-align: right; color: #2c2a85; font-weight: 700; }
.cs-thankyou__totals td .woocommerce-Price-amount,
.cs-thankyou__totals td .amount,
.cs-thankyou__totals td bdi { color: inherit; font: inherit; }
.cs-thankyou__totalRow--order_total th, .cs-thankyou__totalRow--order_total td {
	font-size: 18px;
	font-weight: 800;
	color: #2c2a85;
	border-top: 2px solid rgba(75,42,156,0.18);
	padding-top: 14px;
}
.cs-thankyou__vat { font-size: 13px; color: #555; margin: 12px 0 0; }

/* ---- Invoice request module ---- */
.cs-invoice__choice { display: flex; gap: 10px; margin-bottom: 16px; }
.cs-invoice__choiceBtn {
	flex: 1;
	border: 2px solid #d6deea;
	background: #f7faff;
	color: #1d3658;
	border-radius: 12px;
	padding: 12px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.cs-invoice__choiceBtn.is-active { border-color: #3bb273; background: rgba(59,178,115,0.1); color: #1f8a57; }

.cs-invoice__tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.cs-invoice__tab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid #d6deea;
	border-radius: 12px;
	padding: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	color: #1d3658;
}
.cs-invoice__tab.is-active { border-color: #4a2fb8; background: rgba(74,47,184,0.08); color: #4a2fb8; }
.cs-invoice__tab input {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: none;
	accent-color: #4a2fb8;
}

/* Save billing data (logged-in users) */
.cs-invoice__save {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 500;
	color: #1d3658;
	cursor: pointer;
}
.cs-invoice__save input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	accent-color: #3bb273;
	cursor: pointer;
}

.cs-invoice__group, .cs-invoice__grid { display: grid; gap: 12px; margin-bottom: 12px; }
.cs-invoice__grid { grid-template-columns: 1fr 1fr; }
.cs-invoice__field { display: flex; flex-direction: column; gap: 4px; }
.cs-invoice__field span { font-size: 13px; font-weight: 600; color: #1d3658; }
.cs-invoice__field input {
	border: 1px solid #d6deea;
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 14px;
	background: #f7faff;
	color: #1d3658;
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-invoice__field input:focus { border-color: #3fb6e5; box-shadow: 0 0 0 3px rgba(63,182,229,0.18); }
.cs-invoice__field--sm { grid-column: span 1; }

.cs-invoice__message { margin: 4px 0 12px; font-size: 14px; font-weight: 600; min-height: 1em; }
.cs-invoice__message.is-error { color: #e74c3c; }
.cs-invoice__done {
	margin: 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(59,178,115,0.12);
	color: #1f8a57;
	font-weight: 600;
	text-align: center;
}

.cs-thankyou__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: 0;
	border-radius: 14px;
	padding: 14px 18px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.cs-thankyou__btn--green {
	background: linear-gradient(180deg, #8df0b4 0%, #3bb273 100%);
	color: #fff;
	box-shadow: 0 8px 18px rgba(46,178,115,0.4);
}
.cs-thankyou__btn--green:hover { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(46,178,115,0.55); color: #fff; }
.cs-thankyou__btn.is-loading { opacity: 0.7; pointer-events: none; }

.cs-thankyou__card--error .cs-thankyou__title { color: #c0392b; }

@media (max-width: 480px) {
	.cs-thankyou { margin-top: 80px !important; }
	.cs-invoice__grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Hard overrides — beat Elementor/theme button & input styling on the
   invoice form, and tighten the CardCorp widget to normal field sizes.
   (Scoped to body + !important so they always win.)
   =================================================================== */

/* ---- Invoice form inputs ----
   Scope to text-like inputs only: radios (Persona/Azienda tabs) and the
   "salva i dati" checkbox must keep their native size, otherwise the global
   override blows them up into full-width field boxes. */
body.woocommerce-order-received .cs-invoice__form input:not([type="radio"]):not([type="checkbox"]),
body.woocommerce-order-received .cs-invoice__field input:not([type="radio"]):not([type="checkbox"]) {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 11px 14px !important;
	background-color: #f7faff !important;
	background-image: none !important;
	border: 1px solid #d6deea !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	color: #1d3658 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-position: right 12px center !important;
}
body.woocommerce-order-received .cs-invoice__form input:not([type="radio"]):not([type="checkbox"]):focus,
body.woocommerce-order-received .cs-invoice__field input:not([type="radio"]):not([type="checkbox"]):focus {
	border-color: #3fb6e5 !important;
	box-shadow: 0 0 0 3px rgba(63,182,229,0.18) !important;
	outline: none !important;
}
body.woocommerce-order-received .cs-invoice__field span {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #1d3658 !important;
}

/* ---- Order totals table (override inherited grey table styling) ---- */
body.woocommerce-order-received .cs-thankyou__totals,
body.woocommerce-order-received .cs-thankyou__totals tbody,
body.woocommerce-order-received .cs-thankyou__totals tr,
body.woocommerce-order-received .cs-thankyou__totals th,
body.woocommerce-order-received .cs-thankyou__totals td {
	background: transparent !important;
	box-shadow: none !important;
}
body.woocommerce-order-received .cs-thankyou__totals tr {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 12px !important;
}
body.woocommerce-order-received .cs-thankyou__totals th,
body.woocommerce-order-received .cs-thankyou__totals td {
	border: 0 !important;
	border-top: 1px dashed rgba(75,42,156,0.16) !important;
	padding: 11px 0 !important;
	font-size: 14px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
body.woocommerce-order-received .cs-thankyou__totals tr:first-child th,
body.woocommerce-order-received .cs-thankyou__totals tr:first-child td {
	border-top: 0 !important;
}
body.woocommerce-order-received .cs-thankyou__totals th {
	text-align: left !important;
	color: #6b7280 !important;
	font-weight: 600 !important;
}
body.woocommerce-order-received .cs-thankyou__totals td {
	text-align: right !important;
	color: #2c2a85 !important;
	font-weight: 700 !important;
}
body.woocommerce-order-received .cs-thankyou__totalRow--order_total th,
body.woocommerce-order-received .cs-thankyou__totalRow--order_total td {
	border-top: 2px solid rgba(75,42,156,0.18) !important;
	padding-top: 14px !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #2c2a85 !important;
}

/* ---- Yes/No choice buttons ---- */
body.woocommerce-order-received .cs-invoice__choiceBtn {
	width: 100% !important;
	margin: 0 !important;
	background: #f7faff !important;
	background-image: none !important;
	border: 2px solid #d6deea !important;
	border-radius: 12px !important;
	padding: 12px !important;
	color: #1d3658 !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-shadow: none !important;
	box-shadow: none !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
body.woocommerce-order-received .cs-invoice__choiceBtn.is-active {
	background: rgba(59,178,115,0.12) !important;
	border-color: #3bb273 !important;
	color: #1f8a57 !important;
}

/* ---- Green action buttons (Conferma / Riprova) ---- */
body.woocommerce-order-received .cs-thankyou__btn,
body.woocommerce-order-received .cs-thankyou__btn--green {
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 14px !important;
	padding: 14px 18px !important;
	background: linear-gradient(180deg, #8df0b4 0%, #3bb273 100%) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-shadow: none !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
body.woocommerce-order-received .cs-thankyou__btn--green:hover {
	color: #fff !important;
	box-shadow: 0 14px 26px rgba(46,178,115,0.55) !important;
}

/* ---- CardCorp widget: normal-sized form fields ---- */
body.woocommerce-checkout #cardcorp_payment_container {
	font-size: 15px !important;
	padding: 22px 22px 18px !important;
}
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control,
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control-iframe,
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control-cardNumber,
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control-cardHolder,
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control-expiry,
body.woocommerce-checkout #cardcorp_payment_container .wpwl-control-cvv {
	height: 46px !important;
	padding: 10px 14px !important;
	border-radius: 10px !important;
}
body.woocommerce-checkout #cardcorp_payment_container .wpwl-form.wpwl-form-card {
	row-gap: 12px !important;
	margin-bottom: 18px !important;
}
body.woocommerce-checkout #cardcorp_payment_container .cardcorp-alt-card-title,
body.woocommerce-checkout .cardcorp-alt-card-title {
	font-size: 1rem !important;
	margin: 4px 0 10px !important;
}
body.woocommerce-checkout #cardcorp_payment_container .wpwl-wrapper-submit {
	width: 100% !important;
	margin-top: 6px !important;
}
body.woocommerce-checkout .wpwl-button-pay {
	width: 100% !important;
	max-width: none !important;
	height: 50px !important;
	padding: 12px 24px !important;
	font-size: 16px !important;
}
body.woocommerce-checkout #cardcorp_payment_container .wpwl-apple-pay-button,
body.woocommerce-checkout #cardcorp_payment_container #gpay-button-online-api-id {
	min-height: 46px !important;
	height: 46px !important;
}

/* Center the Apple Pay / Google Pay buttons (default is left-aligned) */
body.woocommerce-checkout .alt_payments_buttons_container { text-align: center !important; }
body.woocommerce-checkout .alt_payments_buttons_container .wpwl-container-virtualAccount-APPLEPAY,
body.woocommerce-checkout .alt_payments_buttons_container .wpwl-container-virtualAccount-GOOGLEPAY,
body.woocommerce-checkout .wpwl-apple-pay-button,
body.woocommerce-checkout #gpay-button-online-api-id,
body.woocommerce-checkout .alt_payments_buttons_container apple-pay-button {
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

/* ===================================================================
   Cardinity gateway — match the CardCorp look (white card, themed inputs).
   Cardinity uses WooCommerce's default credit-card form inline.
   =================================================================== */
body.woocommerce-checkout li.payment_method_cardinity .payment_box,
body.woocommerce-checkout #payment .payment_box.payment_method_cardinity {
	background: #fff !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
	padding: 18px !important;
	margin: 10px 0 0 !important;
	color: #1d3658 !important;
	font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
}
/* Remove the grey speech-bubble triangle */
body.woocommerce-checkout .payment_box.payment_method_cardinity::before {
	display: none !important;
}
body.woocommerce-checkout .payment_box.payment_method_cardinity .wc-credit-card-form {
	margin: 0 !important;
	padding: 0 !important;
}
body.woocommerce-checkout .payment_box.payment_method_cardinity p {
	margin: 0 0 12px !important;
}
body.woocommerce-checkout .payment_box.payment_method_cardinity label {
	display: block !important;
	margin: 0 0 4px !important;
	color: #1d3658 !important;
	font-weight: 600 !important;
	font-size: 13px !important;
}
body.woocommerce-checkout .payment_box.payment_method_cardinity .required { color: #e74c3c !important; }

/* Inputs (holder / number / expiry / cvc) */
body.woocommerce-checkout .payment_box.payment_method_cardinity input.input-text,
body.woocommerce-checkout .payment_box.payment_method_cardinity .wc-credit-card-form-card-holder,
body.woocommerce-checkout .payment_box.payment_method_cardinity .wc-credit-card-form-card-number,
body.woocommerce-checkout .payment_box.payment_method_cardinity .wc-credit-card-form-card-expiry,
body.woocommerce-checkout .payment_box.payment_method_cardinity .wc-credit-card-form-card-cvc {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 11px 14px !important;
	background-color: #f7faff !important;
	background-image: none !important;
	border: 1px solid #d6deea !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	color: #1d3658 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}
body.woocommerce-checkout .payment_box.payment_method_cardinity input.input-text:focus {
	border-color: #3fb6e5 !important;
	box-shadow: 0 0 0 3px rgba(63,182,229,0.18) !important;
	outline: none !important;
}
/* Expiry + CVC sit side by side */
body.woocommerce-checkout .payment_box.payment_method_cardinity .form-row-first,
body.woocommerce-checkout .payment_box.payment_method_cardinity .form-row-last {
	width: 48% !important;
}

/* ===================================================================
   CardCorp inline embed (iframe inside the checkout payment box)
   =================================================================== */
.cs-cc-embed { margin-top: 12px !important; }
.cs-cc-embed__frame {
	width: 100% !important;
	min-height: 540px !important;
	border: 0 !important;
	display: block !important;
	background: transparent !important;
}
.cs-cc-embed__loader {
	padding: 26px !important;
	text-align: center !important;
	color: #4a2fb8 !important;
	font-weight: 600 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
/* The bare embed page: let the widget fill the iframe width.
   IMPORTANT: kill the `min-height:100vh` it inherits from `body.woocommerce-checkout`,
   otherwise the iframe reports ≥100vh tall, the parent grows it, the iframe's vh
   grows in turn → runaway height that stretches the whole checkout page. */
body.cs-cardcorp-embed {
	background: transparent !important;
	min-height: 0 !important;
	height: auto !important;
}
body.cs-cardcorp-embed #cardcorp_payment_container { margin: 0 auto !important; }

/* ---- Order-pay / receipt page: summary card + back link above the widget ---- */
/* Pull the receipt content up so it no longer floats in empty green space. */
body.woocommerce-checkout .testmode { margin-top: 0 !important; }
body.woocommerce-checkout #cardcorp_payment_container { margin-top: 16px !important; }
body.woocommerce-checkout .woocommerce-notices-wrapper:empty { display: none !important; margin: 0 !important; }

.cs-pay {
	max-width: 560px !important;
	margin: 24px auto 0 !important;
	font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
	color: #1d3658 !important;
}
.cs-pay, .cs-pay * { box-sizing: border-box !important; }

.cs-pay__back {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-bottom: 12px !important;
	padding: 8px 16px !important;
	background: rgba(255,255,255,0.85) !important;
	border-radius: 999px !important;
	color: #4a2fb8 !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.cs-pay__back:hover { transform: translateX(-2px) !important; color: #4a2fb8 !important; box-shadow: 0 8px 16px rgba(0,0,0,0.12) !important; }

.cs-pay__summary {
	background: #fff !important;
	border-radius: 18px !important;
	box-shadow: 0 12px 28px rgba(0,0,0,0.14) !important;
	overflow: hidden !important;
}
/* Clickable, compact header (closed by default) */
.cs-pay__summaryHead {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 14px 18px !important;
	cursor: pointer !important;
	list-style: none !important;
	user-select: none !important;
}
.cs-pay__summaryHead::-webkit-details-marker { display: none !important; }
.cs-pay__summaryHead::marker { content: '' !important; }
.cs-pay__title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #2c2a85 !important; }
.cs-pay__headRight { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.cs-pay__headTotal { font-weight: 800 !important; font-size: 16px !important; color: #2c2a85 !important; }
.cs-pay__headTotal .woocommerce-Price-amount,
.cs-pay__headTotal .amount,
.cs-pay__headTotal bdi { color: inherit !important; font: inherit !important; }
.cs-pay__chevron {
	width: 20px !important;
	height: 20px !important;
	color: #4a2fb8 !important;
	display: inline-flex !important;
	transition: transform 0.25s ease !important;
}
.cs-pay__chevron svg { width: 100% !important; height: 100% !important; display: block !important; }
.cs-pay__summary[open] .cs-pay__chevron { transform: rotate(180deg) !important; }
.cs-pay__summaryBody {
	padding: 4px 18px 18px !important;
	animation: cs-summary-open 0.25s ease-out !important;
}

.cs-pay__items { list-style: none !important; margin: 0 0 12px !important; padding: 0 !important; display: grid !important; gap: 10px !important; }
.cs-pay__item {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	gap: 4px 12px !important;
	align-items: start !important;
	background: rgba(232,245,234,0.7) !important;
	border-radius: 14px !important;
	padding: 12px 14px !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
	margin: 0 !important;
}
.cs-pay__item--bonus {
	background: linear-gradient(95deg, rgba(255,95,162,0.14) 0%, rgba(185,107,255,0.14) 100%) !important;
	border: 1px dashed rgba(185,107,255,0.55) !important;
}
.cs-pay__itemName { font-weight: 700 !important; font-size: 15px !important; color: #2c2a85 !important; }
.cs-pay__itemQty { color: #6b7280 !important; font-weight: 600 !important; font-size: 13px !important; margin-left: 4px !important; }
.cs-pay__itemLinks { list-style: none !important; margin: 4px 0 0 !important; padding: 0 !important; }
.cs-pay__itemLinks li { font-size: 13px !important; color: #2bbd75 !important; font-weight: 500 !important; word-break: break-all !important; margin: 0 !important; }
.cs-pay__itemPrice { font-weight: 700 !important; font-size: 16px !important; color: #2c2a85 !important; white-space: nowrap !important; text-align: right !important; }
.cs-pay__itemPrice .woocommerce-Price-amount,
.cs-pay__itemPrice .amount,
.cs-pay__itemPrice bdi { color: inherit !important; font: inherit !important; }
.cs-pay__itemPrice--free { color: #2bbd75 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-size: 13px !important; }

.cs-pay__totals { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; }
.cs-pay__totals th, .cs-pay__totals td {
	padding: 8px 0 !important;
	font-size: 14px !important;
	border: 0 !important;
	border-top: 1px solid rgba(0,0,0,0.06) !important;
	background: transparent !important;
}
.cs-pay__totals th { text-align: left !important; color: #6b7280 !important; font-weight: 600 !important; }
.cs-pay__totals td { text-align: right !important; color: #2c2a85 !important; font-weight: 700 !important; }
.cs-pay__totals td .woocommerce-Price-amount,
.cs-pay__totals td .amount,
.cs-pay__totals td bdi { color: inherit !important; font: inherit !important; }
.cs-pay__totalRow--order_total th, .cs-pay__totalRow--order_total td { font-size: 17px !important; color: #2c2a85 !important; }

@media (max-width: 600px) {
	.cs-pay { max-width: 100% !important; margin: 80px 12px 0 !important; }
}

/* ============ Suppress the legacy per-slider "added to cart" popup ============
   The sliders inject their own confirmation popup (#cs3-popup-added-to-cart) and
   reveal it via inline visibility. It's now redundant — adding a product opens
   the side cart automatically — so keep it hidden to avoid a stacked popup. */
#cs3-popup-added-to-cart { display: none !important; }

/* ============ CardCorp payment label icons ============
   The CardCorp gateway prints its 5 card icons (VISA / Mastercard / Maestro /
   Apple Pay / G Pay) with inline height:30px and a 10px left gap, which pushes
   the long "Card Payments" label onto two lines. Shrink the icons slightly and
   halve the gap so the title + icons sit on a single line. */
.wc_payment_method.payment_method_cardcorp label img,
li.payment_method_cardcorp label img {
	height: 22px !important;
	margin: 4px 0 4px 5px !important;
	vertical-align: middle !important;
}

/* ============ Stop the auto-scroll when the CardCorp widget loads ============
   The CardCorp payment widget loads inside an iframe and grows from the small
   loader to its full height after a couple of seconds. The browser's scroll
   anchoring compensates for that height change by scrolling the page downward,
   forcing the customer to scroll back up. Disabling scroll anchoring on the
   checkout suppresses that automatic jump — manual scrolling stays fully intact. */
body.woocommerce-checkout,
body.woocommerce-page:has(.cs-cc-embed),
body:has(.cs-cc-embed) {
	overflow-anchor: none !important;
}
.cs-cc-embed,
.cs-cc-embed__frame {
	overflow-anchor: none !important;
}