/* ==========================================================================
   Petratide Post-Checkout Survey — My Account Banner CSS  v1.4
   Inline glassmorphic banner on the WC dashboard tab.
   Scoped under #pps-account-banner.
   ========================================================================== */

#pps-account-banner,
#pps-account-banner * {
	box-sizing: border-box !important;
	font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#pps-account-banner {
	background: rgba(18, 12, 34, 0.75) !important;
	backdrop-filter: blur(20px) saturate(1.5) !important;
	-webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
	border: 1px solid rgba(164, 63, 255, 0.30) !important;
	border-radius: 14px !important;
	padding: 20px 22px !important;
	margin: 0 0 24px 0 !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(164, 63, 255, 0.06) inset,
		0 0 60px rgba(164, 63, 255, 0.07) !important;
	display: flex !important;
	align-items: center !important;
	gap: 18px !important;
	flex-wrap: wrap !important;
	animation: pps-ab-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pps-ab-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Hidden state */
#pps-account-banner.pps-ab-hidden {
	display: none !important;
}

/* Ambient glow */
#pps-account-banner::before {
	content: '' !important;
	position: absolute !important;
	top: -40px !important;
	right: -40px !important;
	width: 180px !important;
	height: 180px !important;
	background: radial-gradient(circle, rgba(164, 63, 255, 0.15) 0%, transparent 70%) !important;
	border-radius: 50% !important;
	pointer-events: none !important;
}

/* Left accent bar */
#pps-account-banner::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 3px !important;
	background: linear-gradient(180deg, #a43fff, #c280ff) !important;
	border-radius: 14px 0 0 14px !important;
}

#pps-account-banner .pps-ab-text {
	flex: 1 1 200px !important;
	min-width: 0 !important;
}

#pps-account-banner .pps-ab-heading {
	font-size: 14px !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	margin: 0 0 5px !important;
	line-height: 1.3 !important;
}

#pps-account-banner .pps-ab-sub {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #9b90b8 !important;
	margin: 0 !important;
	line-height: 1.55 !important;
}
#pps-account-banner .pps-ab-sub strong {
	color: #c280ff !important;
	font-weight: 700 !important;
}

#pps-account-banner .pps-ab-actions {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
}

/* Primary CTA */
#pps-account-banner .pps-ab-btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	background: linear-gradient(135deg, #a43fff 0%, #7b1fe3 100%) !important;
	color: #ffffff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	border: none !important;
	border-radius: 9px !important;
	padding: 10px 16px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: filter 0.2s, transform 0.15s, box-shadow 0.2s !important;
	box-shadow: 0 4px 18px rgba(164, 63, 255, 0.40) !important;
	position: relative !important;
	overflow: hidden !important;
	outline: none !important;
	text-decoration: none !important;
}
#pps-account-banner .pps-ab-btn-primary:hover {
	filter: brightness(1.18) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 7px 24px rgba(164, 63, 255, 0.55) !important;
	color: #ffffff !important;
}
#pps-account-banner .pps-ab-btn-primary:active {
	transform: scale(0.97) !important;
}

/* Secondary */
#pps-account-banner .pps-ab-btn-secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(164, 63, 255, 0.07) !important;
	border: 1px solid rgba(164, 63, 255, 0.22) !important;
	color: #9b90b8 !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	border-radius: 9px !important;
	padding: 10px 13px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: color 0.2s, background 0.2s, border-color 0.2s !important;
	outline: none !important;
}
#pps-account-banner .pps-ab-btn-secondary:hover {
	color: #c280ff !important;
	background: rgba(164, 63, 255, 0.14) !important;
	border-color: rgba(164, 63, 255, 0.40) !important;
}

/* Close X */
#pps-account-banner .pps-ab-close {
	position: absolute !important;
	top: 10px !important;
	right: 12px !important;
	background: rgba(164, 63, 255, 0.08) !important;
	border: 1px solid rgba(164, 63, 255, 0.18) !important;
	color: #9b90b8 !important;
	font-size: 13px !important;
	width: 22px !important;
	height: 22px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	padding: 0 !important;
	line-height: 1 !important;
	transition: color 0.2s, background 0.2s !important;
	outline: none !important;
	z-index: 2;
}
#pps-account-banner .pps-ab-close:hover {
	color: #fff !important;
	background: rgba(164, 63, 255, 0.25) !important;
}

/* Ripple */
#pps-account-banner .pps-ab-ripple {
	position: absolute !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.22) !important;
	transform: scale(0) !important;
	animation: pps-ab-ripple 0.5s linear !important;
	pointer-events: none !important;
}
@keyframes pps-ab-ripple {
	to { transform: scale(4); opacity: 0; }
}

@media (max-width: 600px) {
	#pps-account-banner {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 14px !important;
	}
	#pps-account-banner .pps-ab-text {
		/* In column mode the desktop flex-basis of 200px becomes a vertical
		   minimum-height, leaving a big empty gap under the text. Force the
		   text block to size to its content on mobile. */
		flex: 0 0 auto !important;
		width: 100% !important;
	}
	#pps-account-banner .pps-ab-actions {
		width: 100% !important;
	}
	#pps-account-banner .pps-ab-btn-primary {
		flex: 1 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#pps-account-banner, #pps-account-banner * {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   COUPON STATE
   Shown after survey is submitted, until coupon is redeemed.
   Vertical layout (override the horizontal CTA layout).
   ============================================================ */
#pps-account-banner.pps-ab--coupon {
	display: block !important;
	padding: 26px 28px !important;
	background:
		linear-gradient(135deg, rgba(28, 20, 56, 0.88) 0%, rgba(20, 14, 40, 0.94) 100%) !important;
	border: 1.5px solid rgba(164, 63, 255, 0.35) !important;
	border-radius: 18px !important;
	box-shadow:
		0 16px 44px rgba(0, 0, 0, 0.4),
		0 0 70px rgba(164, 63, 255, 0.18),
		0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

/* Override the CTA-state ::after accent bar (we want a different look here) */
#pps-account-banner.pps-ab--coupon::after {
	display: none !important;
}
#pps-account-banner.pps-ab--coupon::before {
	content: '' !important;
	position: absolute !important;
	top: -50px !important;
	right: -50px !important;
	width: 220px !important;
	height: 220px !important;
	background: radial-gradient(circle, rgba(164, 63, 255, 0.45) 0%, transparent 70%) !important;
	filter: blur(50px) !important;
	pointer-events: none !important;
	z-index: 0 !important;
	border-radius: 50% !important;
}

#pps-account-banner.pps-ab--coupon .pps-ab-coupon-halo {
	position: absolute !important;
	bottom: -60px !important;
	left: -40px !important;
	width: 180px !important;
	height: 180px !important;
	background: radial-gradient(circle, rgba(194, 128, 255, 0.3) 0%, transparent 70%) !important;
	filter: blur(50px) !important;
	pointer-events: none !important;
	z-index: 0 !important;
	border-radius: 50% !important;
}

/* Eyebrow chip */
#pps-account-banner.pps-ab--coupon .pps-ab-eyebrow {
	position: relative !important;
	z-index: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 5px 12px !important;
	background: linear-gradient(135deg, rgba(164, 63, 255, 0.22) 0%, rgba(194, 128, 255, 0.20) 100%) !important;
	border: 1px solid rgba(194, 128, 255, 0.5) !important;
	border-radius: 50px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: #d9a8ff !important;
	margin-bottom: 14px !important;
	box-shadow: 0 4px 14px rgba(164, 63, 255, 0.2) !important;
}
#pps-account-banner.pps-ab--coupon .pps-ab-eyebrow svg {
	color: #c280ff !important;
	flex-shrink: 0 !important;
}

/* Title */
#pps-account-banner.pps-ab--coupon .pps-ab-coupon-title {
	position: relative !important;
	z-index: 1 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
	color: #a43fff !important;
	letter-spacing: -0.01em !important;
	line-height: 1.2 !important;
	text-shadow: 0 0 28px rgba(164, 63, 255, 0.45) !important;
}

/* Subtext */
#pps-account-banner.pps-ab--coupon .pps-ab-coupon-sub {
	position: relative !important;
	z-index: 1 !important;
	font-size: 13px !important;
	color: #9b90b8 !important;
	line-height: 1.6 !important;
	margin: 0 0 18px !important;
	max-width: 640px !important;
}
#pps-account-banner.pps-ab--coupon .pps-ab-coupon-sub strong {
	color: #c280ff !important;
	font-weight: 700 !important;
}

/* Code + copy row */
#pps-account-banner.pps-ab--coupon .pps-ab-coupon-row {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	margin-bottom: 16px !important;
}

#pps-account-banner.pps-ab--coupon .pps-ab-coupon-code {
	font-family: 'JetBrains Mono', 'Courier New', Consolas, monospace !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	color: #fff !important;
	background: rgba(0, 0, 0, 0.45) !important;
	padding: 13px 24px !important;
	border-radius: 10px !important;
	border: 1px dashed #c280ff !important;
	text-shadow: 0 0 18px rgba(164, 63, 255, 0.55) !important;
	user-select: all !important;
	display: inline-block !important;
}

#pps-account-banner.pps-ab--coupon .pps-ab-copy-btn {
	background: linear-gradient(135deg, #8a1fff 0%, #a43fff 50%, #b95cff 100%) !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 22px !important;
	border-radius: 50px !important;
	font-family: 'Montserrat', inherit !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	transition: transform 200ms, box-shadow 200ms, filter 200ms !important;
	box-shadow: 0 6px 18px rgba(164, 63, 255, 0.5),
	            0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
	text-decoration: none !important;
	line-height: 1 !important;
	outline: none !important;
}
#pps-account-banner.pps-ab--coupon .pps-ab-copy-btn:hover {
	transform: translateY(-1px) scale(1.03) !important;
	filter: saturate(1.15) brightness(1.06) !important;
	box-shadow: 0 10px 26px rgba(164, 63, 255, 0.65),
	            0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
}

#pps-account-banner.pps-ab--coupon .pps-ab-copy-icon { flex-shrink: 0 !important; }
#pps-account-banner.pps-ab--coupon .pps-ab-copy-check {
	width: 16px !important; height: 16px !important;
	fill: none !important; stroke: #fff !important; stroke-width: 3 !important;
	stroke-linecap: round !important; stroke-linejoin: round !important;
	stroke-dasharray: 30 !important; stroke-dashoffset: 30 !important;
	display: none !important;
}
#pps-account-banner.pps-ab--coupon .pps-ab-copy-btn.is-done .pps-ab-copy-icon,
#pps-account-banner.pps-ab--coupon .pps-ab-copy-btn.is-done .pps-ab-copy-text { display: none !important; }
#pps-account-banner.pps-ab--coupon .pps-ab-copy-btn.is-done .pps-ab-copy-check {
	display: inline-block !important;
	animation: pps-ab-check 350ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}
@keyframes pps-ab-check { to { stroke-dashoffset: 0 !important; } }

/* "Continue Shopping" pill */
#pps-account-banner.pps-ab--coupon .pps-ab-coupon-shop {
	position: relative !important;
	z-index: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #c280ff !important;
	text-decoration: none !important;
	padding: 9px 18px !important;
	background: rgba(164, 63, 255, 0.08) !important;
	border: 1px solid rgba(164, 63, 255, 0.35) !important;
	border-radius: 50px !important;
	transition: all 200ms !important;
}
#pps-account-banner.pps-ab--coupon .pps-ab-coupon-shop:hover {
	background: rgba(164, 63, 255, 0.18) !important;
	border-color: #a43fff !important;
	transform: translateX(2px) !important;
	color: #fff !important;
}

@media (max-width: 600px) {
	#pps-account-banner.pps-ab--coupon { padding: 22px 18px !important; }
	#pps-account-banner.pps-ab--coupon .pps-ab-coupon-title { font-size: 19px !important; }
	#pps-account-banner.pps-ab--coupon .pps-ab-coupon-code { font-size: 18px !important; padding: 11px 18px !important; }
	#pps-account-banner.pps-ab--coupon .pps-ab-coupon-row { flex-direction: column !important; align-items: stretch !important; }
	#pps-account-banner.pps-ab--coupon .pps-ab-coupon-row > * { width: 100% !important; justify-content: center !important; text-align: center !important; }
}