/**
 * Mini Pricing Display Styles
 *
 * Styles for [edd_mini_pricing] shortcode.
 * Compact pricing cards for homepage and landing pages.
 *
 * @package Core
 * @since <next-version>
 */

/* ==========================================================================
   CSS Custom Properties - Reuse Figma Design Tokens
   ========================================================================== */

.edd-mini-pricing {
	/* Colors from Figma */
	--edd-color-black: #171717;
	--edd-color-text: #0f172a;
	--edd-color-text-body: #292929;
	--edd-color-text-muted: #a1a1a1;
	--edd-color-text-strike: #334155;
	--edd-color-white: #ffffff;
	--edd-color-green: #05a82e;
	--edd-color-yellow: #fff085;
	--edd-color-pink: #ffccd3;
	--edd-color-purple: #e9d4ff;
	--edd-color-red: #ef4444;
	--edd-color-border-light: #d4d4d4;

	/* Typography */
	--edd-font-serif: 'IBM Plex Serif', Georgia, serif;
	--edd-font-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   Container
   ========================================================================== */

.edd-mini-pricing {
	max-width: 1120px !important;
	margin: 0 auto !important;
	padding: 2rem 1rem !important;
	box-sizing: border-box !important;
}

.edd-mini-pricing *,
.edd-mini-pricing *::before,
.edd-mini-pricing *::after {
	box-sizing: border-box !important;
}

/* ==========================================================================
   Section Heading
   ========================================================================== */

.edd-mini-pricing__heading {
	font-family: var(--edd-font-serif) !important;
	font-size: 32px !important;
	font-weight: 500 !important;
	line-height: 40px !important;
	color: var(--edd-color-text) !important;
	text-align: center !important;
	margin: 0 0 32px 0 !important;
}

/* ==========================================================================
   Card Grid
   ========================================================================== */

.edd-mini-pricing__cards {
	display: flex !important;
	justify-content: center !important;
	gap: 0 !important;
	flex-wrap: wrap !important;
}

/* ==========================================================================
   Individual Card
   ========================================================================== */

.edd-mini-pricing .edd-mini-pricing__card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	width: 240px !important;
	min-width: 240px !important;
	max-width: 240px !important;
	background: var(--edd-color-white) !important;
	border: 1px solid var(--edd-color-black) !important;
	border-radius: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* Collapse doubled borders between adjacent cards */
.edd-mini-pricing__cards .edd-mini-pricing__card + .edd-mini-pricing__card {
	margin-left: -1px !important;
}

/* Inner padding */
.edd-mini-pricing__header,
.edd-mini-pricing__pricing,
.edd-mini-pricing__sites,
.edd-mini-pricing__cta {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Disabled state */
.edd-mini-pricing__card--disabled {
	opacity: 0.6 !important;
	pointer-events: none !important;
}

/* ==========================================================================
   Top Colored Border Bar
   ========================================================================== */

.edd-mini-pricing .edd-mini-pricing__top-border {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 12px !important;
	width: 100% !important;
	z-index: 1 !important;
}

.edd-mini-pricing .edd-mini-pricing__top-border--pink {
	background: #FFCCD3 !important;
}

.edd-mini-pricing .edd-mini-pricing__top-border--purple {
	background: #E9D4FF !important;
}

.edd-mini-pricing .edd-mini-pricing__top-border--orange {
	background: #FFD6A8 !important;
}

.edd-mini-pricing .edd-mini-pricing__top-border--light-purple {
	background: #C6D2FF !important;
}

/* ==========================================================================
   Card Vertical Alignment
   ========================================================================== */

.edd-mini-pricing .edd-mini-pricing__card--all-access,
.edd-mini-pricing .edd-mini-pricing__card--extended,
.edd-mini-pricing .edd-mini-pricing__card--personal {
	margin-top: 28px !important;
}

.edd-mini-pricing .edd-mini-pricing__card--professional {
	z-index: 1 !important;
}

/* ==========================================================================
   Popular Badge
   ========================================================================== */

.edd-mini-pricing .edd-mini-pricing__badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--edd-color-black) !important;
	color: var(--edd-color-white) !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	padding: 6px 8px !important;
	border-radius: 1000px !important;
	margin: 33px 0 0 20px !important;
	width: fit-content !important;
}

/* ==========================================================================
   Card Header (Title)
   ========================================================================== */

.edd-mini-pricing__header {
	padding-top: 45px !important;
	padding-bottom: 0 !important;
}

/* Professional card WITH badge - reduced padding since badge provides spacing */
.edd-mini-pricing__card--professional.edd-mini-pricing__card--highlighted .edd-mini-pricing__header {
	padding-top: 12px !important;
}

/* Professional card WITHOUT badge - align titles with other cards */
.edd-mini-pricing__card--professional:not(.edd-mini-pricing__card--highlighted) .edd-mini-pricing__header {
	padding-top: 73px !important;
}

.edd-mini-pricing__title {
	font-family: var(--edd-font-serif) !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 32px !important;
	color: var(--edd-color-text) !important;
	margin: 0 !important;
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */

.edd-mini-pricing__pricing {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

/* Strikethrough normal price */
.edd-mini-pricing__normal-price {
	position: relative !important;
	display: inline-block !important;
	width: fit-content !important;
}

.edd-mini-pricing__normal-price-text {
	font-family: var(--edd-font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	color: var(--edd-color-text-strike) !important;
	letter-spacing: 0.25px !important;
	text-decoration: line-through !important;
	text-decoration-color: var(--edd-color-red) !important;
}

/* Main price display */
.edd-mini-pricing__price {
	display: flex !important;
	align-items: flex-start !important;
}

.edd-mini-pricing__price-symbol {
	font-family: var(--edd-font-sans) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 24px !important;
	color: var(--edd-color-text-body) !important;
	margin-top: 10px !important;
}

.edd-mini-pricing__price-amount {
	font-family: var(--edd-font-sans) !important;
	font-size: 36px !important;
	font-weight: 500 !important;
	line-height: 44px !important;
	color: var(--edd-color-black) !important;
	margin-left: 4px !important;
}

.edd-mini-pricing__price-suffix {
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	margin-left: 3px !important;
	margin-top: 3px !important;
}

.edd-mini-pricing__price-cents {
	font-family: var(--edd-font-sans) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 18px !important;
	color: var(--edd-color-text-body) !important;
}

.edd-mini-pricing__price-period {
	font-family: var(--edd-font-sans) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 18px !important;
	color: var(--edd-color-text-muted) !important;
}

/* Yellow savings badge */
.edd-mini-pricing__savings {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--edd-color-yellow) !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	letter-spacing: 0.25px !important;
	color: var(--edd-color-text) !important;
	padding: 4px 10px !important;
	border-radius: 12px !important;
	height: 28px !important;
	width: 100% !important;
}

/* ==========================================================================
   Site Count
   ========================================================================== */

.edd-mini-pricing__sites {
	font-family: var(--edd-font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	color: var(--edd-color-text-muted) !important;
	padding-bottom: 16px !important;
}

/* ==========================================================================
   CTA Buttons
   ========================================================================== */

.edd-mini-pricing__cta {
	margin-top: auto !important;
	padding-top: 0 !important;
	padding-bottom: 20px !important;
}

.edd-mini-pricing .edd-mini-pricing__button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	width: 100% !important;
	padding: 12px 24px !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	letter-spacing: -0.25px !important;
	text-decoration: none !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	transition: opacity 0.2s ease !important;
}

.edd-mini-pricing .edd-mini-pricing__button:hover {
	opacity: 0.9 !important;
	text-decoration: none !important;
}

/* Outlined button style */
.edd-mini-pricing .edd-mini-pricing__button--outlined {
	background: transparent !important;
	color: var(--edd-color-black) !important;
	border: 1px solid var(--edd-color-border-light) !important;
}

.edd-mini-pricing .edd-mini-pricing__button--outlined:hover {
	color: var(--edd-color-black) !important;
}

/* Filled green button style - Professional */
.edd-mini-pricing .edd-mini-pricing__button--filled {
	background: var(--edd-color-green) !important;
	color: var(--edd-color-white) !important;
	border: 1px solid transparent !important;
}

.edd-mini-pricing .edd-mini-pricing__button--filled:hover {
	color: var(--edd-color-white) !important;
}

/* Current plan button */
.edd-mini-pricing .edd-mini-pricing__button--current {
	background: var(--edd-color-green) !important;
	color: var(--edd-color-white) !important;
	border: 1px solid transparent !important;
	cursor: default !important;
}

/* Disabled button */
.edd-mini-pricing .edd-mini-pricing__button--disabled {
	background: #e5e7eb !important;
	color: #6b7280 !important;
	border: none !important;
	cursor: not-allowed !important;
	opacity: 0.7 !important;
}

.edd-mini-pricing__icon {
	width: 24px !important;
	height: 24px !important;
	flex-shrink: 0 !important;
}

/* ==========================================================================
   Trust Bar
   ========================================================================== */

.edd-mini-pricing__trust {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	margin-top: 24px !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	color: var(--edd-color-text-body) !important;
}

.edd-mini-pricing__trust-stars {
	display: inline-flex !important;
	align-items: center !important;
	gap: 2px !important;
	color: #f59e0b !important;
}

.edd-mini-pricing__star {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
}

.edd-mini-pricing__trust-rating {
	color: var(--edd-color-text-body) !important;
}

.edd-mini-pricing__trust-separator {
	color: var(--edd-color-text-muted) !important;
	font-size: 12px !important;
}

.edd-mini-pricing__trust-guarantee {
	color: var(--edd-color-text-body) !important;
}

/* ==========================================================================
   Responsive - 3/4 Column Adjustments
   ========================================================================== */

/* Wider cards when only 3 columns */
.edd-mini-pricing[data-columns="3"] .edd-mini-pricing__card {
	width: 300px !important;
	min-width: 300px !important;
	max-width: 300px !important;
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media (max-width: 1024px) {
	.edd-mini-pricing .edd-mini-pricing__card,
	.edd-mini-pricing[data-columns="3"] .edd-mini-pricing__card {
		width: 50% !important;
		min-width: auto !important;
		max-width: none !important;
	}

	/* Reset border collapse for wrapped layout */
	.edd-mini-pricing__cards .edd-mini-pricing__card + .edd-mini-pricing__card {
		margin-left: 0 !important;
	}

	/* Collapse borders between the two cards in each row */
	.edd-mini-pricing__cards .edd-mini-pricing__card:nth-child(2n) {
		margin-left: -1px !important;
	}
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 640px) {
	.edd-mini-pricing__heading {
		font-size: 26px !important;
		line-height: 34px !important;
		margin-bottom: 24px !important;
	}

	.edd-mini-pricing .edd-mini-pricing__card,
	.edd-mini-pricing[data-columns="3"] .edd-mini-pricing__card,
	.edd-mini-pricing[data-columns="4"] .edd-mini-pricing__card {
		width: 100% !important;
		max-width: 100% !important;
		min-width: auto !important;
		border: 1px solid var(--edd-color-black) !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
	}

	.edd-mini-pricing__cards {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 16px !important;
	}

	/* Normalize Professional header padding on mobile */
	.edd-mini-pricing .edd-mini-pricing__card--professional:not(.edd-mini-pricing__card--highlighted) .edd-mini-pricing__header {
		padding-top: 45px !important;
	}

	/* Reduce price font size on mobile */
	.edd-mini-pricing__price-amount {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	.edd-mini-pricing__price-symbol {
		font-size: 14px !important;
		margin-top: 8px !important;
	}

	/* Trust bar wraps nicely */
	.edd-mini-pricing__trust {
		gap: 6px !important;
	}

	.edd-mini-pricing__trust-separator {
		display: none !important;
	}
}