/**
 * Premium skin for the Freemius-rendered pricing page (page=stwc-sessions-pricing).
 * Pure cosmetics over the SDK's own markup (#fs_pricing) — no behaviour changes.
 * The !important width overrides beat the SDK's inline slider sizing so desktop
 * shows the three tiers side by side; below 1024px the SDK slider is untouched.
 */

#fs_pricing {
	--stwc-ink: #0f172a;
	--stwc-muted: #64748b;
	--stwc-grad: linear-gradient(135deg, #4f46e5, #7c3aed);
}

#fs_pricing .fs-app-main {
	background: radial-gradient(1200px 400px at 50% -50px, rgba(124, 58, 237, 0.07), transparent 60%);
}

/* --- Three cards side by side on desktop (SDK inlines slider widths) --- */
@media (min-width: 1024px) {
	#fs_pricing .fs-packages {
		width: 100% !important;
		left: 0 !important;
		display: flex !important;
		gap: 20px;
		align-items: stretch;
	}

	#fs_pricing .fs-package {
		width: calc(33.333% - 14px) !important;
		display: flex;
		flex-direction: column;
	}

	#fs_pricing .fs-packages-nav > .fs-packages-tab,
	#fs_pricing nav.fs-prev-package,
	#fs_pricing nav.fs-next-package {
		display: none !important;
	}

	/* Middle tier: gradient frame + ribbon. */
	#fs_pricing .fs-packages .fs-package:nth-child(2) {
		border: 2px solid transparent;
		background: linear-gradient(#fff, #fff) padding-box, var(--stwc-grad) border-box;
		box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 28px 56px -20px rgba(124, 58, 237, 0.45);
	}

	#fs_pricing .fs-packages .fs-package:nth-child(2)::before {
		content: '★  Most Popular';
		display: block;
		background: var(--stwc-grad);
		color: #fff;
		text-align: center;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.09em;
		padding: 7px 0;
	}
}

/* --- Cards --- */
#fs_pricing .fs-package {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 14px 34px -18px rgba(79, 70, 229, 0.25);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	overflow: hidden;
}

#fs_pricing .fs-package:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 24px 48px -20px rgba(79, 70, 229, 0.38);
}

#fs_pricing .fs-package .fs-most-popular {
	background: var(--stwc-grad);
	color: #fff;
	letter-spacing: 0.08em;
	font-size: 11px;
	padding: 7px 0;
}

/* text-transform stays off: locale-aware uppercasing turns i into İ on tr_TR. */
#fs_pricing .fs-plan-title {
	text-transform: none !important;
	font-size: 18px;
	font-weight: 700;
	color: var(--stwc-ink);
	background: transparent !important;
	border: 0 !important;
}

#fs_pricing .fs-plan-description {
	color: var(--stwc-muted);
}

/* --- Price block --- */
#fs_pricing .fs-selected-pricing-amount {
	color: var(--stwc-ink);
}

#fs_pricing .fs-selected-pricing-amount-integer {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

#fs_pricing .fs-currency-symbol {
	font-size: 20px;
	font-weight: 700;
	vertical-align: super;
	color: var(--stwc-muted);
}

#fs_pricing .fs-selected-pricing-cycle strong {
	display: inline-block;
	background: #eef2ff;
	color: #4338ca;
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: none;
}

#fs_pricing .fs-plan-support {
	color: #94a3b8;
	font-size: 12px;
}

/* --- Features --- */
#fs_pricing .fs-plan-features {
	padding: 6px 18px 14px;
}

#fs_pricing .fs-plan-features li {
	padding: 7px 0;
	color: #334155;
	font-size: 13.5px;
}

#fs_pricing .fs-plan-features .fs-icon,
#fs_pricing .fs-plan-features svg {
	color: #7c3aed;
	fill: #7c3aed;
}

/* --- CTA --- */
#fs_pricing .fs-upgrade-button-container {
	padding: 6px 18px 18px;
}

/* !important throughout: the SDK's pricing app injects its stylesheet AFTER
   ours at runtime, and its .fs-button--outline variant zeroes the background
   (leaving white-on-white labels) whenever it wins the cascade. */
#fs_pricing .fs-button.fs-upgrade-button {
	background: var(--stwc-grad) !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	box-shadow: 0 10px 22px -8px rgba(124, 58, 237, 0.55) !important;
	transition: filter 0.15s ease, transform 0.15s ease;
}

#fs_pricing .fs-button.fs-upgrade-button,
#fs_pricing .fs-button.fs-upgrade-button * {
	color: #fff !important;
}

#fs_pricing .fs-button.fs-upgrade-button:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* --- Page header --- */
#fs_pricing {
	-webkit-font-smoothing: antialiased;
}

#fs_pricing .fs-page-title h1 {
	font-size: 26px;
	font-weight: 800;
	color: var(--stwc-ink);
	letter-spacing: -0.02em;
}

#fs_pricing .fs-page-title h3 {
	background: #eef2ff;
	color: #4338ca;
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	border: 0;
}

#fs_pricing .fs-plugin-title-and-logo {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px -18px rgba(79, 70, 229, 0.28);
}

#fs_pricing .fs-plugin-title-and-logo .fs-plugin-logo {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.4);
}

#fs_pricing .fs-plugin-title-and-logo h1 {
	font-size: 22px;
	font-weight: 800;
	color: var(--stwc-ink);
	letter-spacing: -0.015em;
}

/* --- Supporting sections --- */
#fs_pricing .fs-section--money-back-guarantee {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 16px;
}

#fs_pricing .fs-money-back-guarantee-title {
	color: #065f46;
}

#fs_pricing .fs-section--custom-implementation {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
}

#fs_pricing .fs-section--custom-implementation a {
	color: #6d28d9;
	font-weight: 600;
}

#fs_pricing .fs-money-back-guarantee-title {
	font-weight: 800;
}

#fs_pricing .fs-money-back-guarantee-message {
	color: #047857;
}

#fs_pricing .fs-badges {
	opacity: 0.8;
	filter: grayscale(0.25);
}

/* --- FAQ --- */
#fs_pricing .fs-section--faq h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--stwc-ink);
	letter-spacing: -0.015em;
	text-align: center;
	margin-bottom: 18px;
}

/* The SDK lays FAQ items out with CSS columns (column-count: 2), which lets
   a card SPLIT across the column boundary, and skins each item with a dark
   question bar + a separately-boxed answer. Grid + heavy !important resets
   replace all of that (their stylesheet loads after ours). */
#fs_pricing .fs-section--faq-items {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	column-count: unset !important;
	-webkit-column-count: unset !important;
}

@media (max-width: 960px) {
	#fs_pricing .fs-section--faq-items {
		grid-template-columns: 1fr;
	}
}

#fs_pricing .fs-section--faq-items section {
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
	margin: 0 !important;
	box-shadow: none !important;
	break-inside: avoid;
	transform: none !important;
	transition: box-shadow 0.15s ease;
}

#fs_pricing .fs-section--faq-items section:hover {
	box-shadow: 0 12px 28px -16px rgba(79, 70, 229, 0.3) !important;
}

#fs_pricing .fs-section--faq-items section h3 {
	background: transparent !important;
	color: var(--stwc-ink) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	padding: 0 0 8px !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	text-align: left !important;
}

#fs_pricing .fs-section--faq-items section p {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--stwc-muted) !important;
	line-height: 1.6 !important;
	box-shadow: none !important;
	width: auto !important;
	max-width: none !important;
}

#fs_pricing .fs-section--faq-items section a {
	color: #6d28d9 !important;
}
