/**
 * [wpsn_pricing] shortcode layout — Security Ninja brand palette.
 * Visual direction based on the approved designer mockup (Material 3 tokens).
 */

.wpsn-pricing-outer {
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px 40px;
	color: #191c1d;
}

.wpsn-pricing {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 32px;
	align-items: stretch;
}

.wpsn-pricing-col {
	min-width: 0;
	display: flex;
}

.wpsn-pricing-card {
	background: #fff;
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	width: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	position: relative;
	transition: box-shadow 0.2s;
}

.wpsn-pricing-card:hover {
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

.wpsn-pricing-card--featured {
	border: 2px solid #10b981;
}

.wpsn-pricing-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: #10b981;
	color: #00422b;
	padding: 5px 16px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	z-index: 2;
}

.wpsn-pricing-title {
	font-size: 24px;
	font-weight: 700;
	color: #191c1d;
	margin: 0 0 8px;
	line-height: 1.2;
}

.wpsn-pricing-subtitle {
	font-size: 16px;
	color: #6b7280;
	margin: 0 0 28px;
	line-height: 1.5;
}

.wpsn-pricing-price-block {
	margin-bottom: 28px;
}

.wpsn-pricing-price-block .wpsn-pricing-price {
	font-size: 48px;
}

/* ---- Pro price panel (left price / right per-site) ---- */
.wpsn-pricing-price-panel {
	background: #f3f4f5;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Hard-reset theme/Beaver default paragraph margins inside the panel. */
.wpsn-pricing-price-panel .wpsn-pricing-price-main,
.wpsn-pricing-price-panel .wpsn-pricing-billed {
	margin: 0 !important;
}

.wpsn-pricing-price-left {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.wpsn-pricing-price-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Class display:flex would otherwise override the [hidden] attribute. */
.wpsn-pricing-price-right[hidden] {
	display: none;
}

.wpsn-pricing-persite-amount {
	font-size: 24px;
	font-weight: 700;
	color: #191c1d;
	line-height: 1.2;
}

.wpsn-pricing-persite-label {
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #6b7280;
	margin-top: 2px;
}

.wpsn-pricing-price-main {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.wpsn-pricing-price {
	font-size: 42px;
	font-weight: 800;
	color: #191c1d;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.wpsn-pricing-price-suffix,
.wpsn-pricing-price-period {
	font-size: 16px;
	color: #6b7280;
	font-weight: 400;
}

.wpsn-pricing-billed {
	font-size: 12px;
	color: #6b7280;
	margin: 4px 0 0;
}

/* ---- Site selector ---- */
.wpsn-pricing-sites {
	margin-bottom: 28px;
}

.wpsn-pricing-sites-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7280;
	margin-bottom: 12px;
}

.wpsn-pricing-sites-options {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.wpsn-pricing-sites-option {
	padding: 12px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	color: #191c1d;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	text-align: center;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.wpsn-pricing-sites-option:hover {
	border-color: #10b981;
}

.wpsn-pricing-sites-option.is-active {
	border: 2px solid #10b981;
	background: #f1fbf4;
	color: #00422b;
}

.wpsn-pricing-sites-select {
	min-width: 0;
	padding: 12px 32px 12px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2310b981'%3E%3Cpath d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	color: #191c1d;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	text-align: center;
	text-align-last: center;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.wpsn-pricing-sites-select:hover {
	border-color: #10b981;
}

.wpsn-pricing-sites-select.is-active {
	border: 2px solid #10b981;
	background-color: #f1fbf4;
	color: #00422b;
}

/* ---- Feature lists ---- */
.wpsn-pricing-features-intro {
	margin: 0 0 16px !important;
	font-size: 16px;
	font-weight: 700;
	color: #191c1d;
	text-align: left;
}

.wpsn-pricing-features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.wpsn-pricing-features--two-col {
	column-count: 2;
	column-gap: 32px;
}

@media (max-width: 640px) {
	.wpsn-pricing-features--two-col {
		column-count: 1;
	}
}

.wpsn-pricing-features li {
	position: relative;
	padding: 0 0 16px 32px;
	font-size: 16px;
	color: #191c1d;
	line-height: 1.4;
	text-align: left;
	break-inside: avoid;
}

.wpsn-pricing-features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2310b981'/%3E%3Cpath d='M10.4 16.2 6.6 12.4 8 11l2.4 2.4 5-5 1.4 1.4z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ---- Footers ----
 * Both footers are pinned to the bottom of their (equal-height) cards, and the
 * small print below each CTA shares a fixed min-height. That makes the two CTAs
 * land on exactly the same vertical line regardless of how much text sits below.
 */
.wpsn-pricing-footer {
	margin-top: auto;
}

.wpsn-pricing-subcta {
	min-height: 76px;
	text-align: center;
	padding-top: 4px;
}

.wpsn-pricing-rating {
	margin: 12px 0 0;
	font-size: 12px;
	color: #6b7280;
	text-align: center;
	line-height: 1.5;
}

.wpsn-pricing-stars {
	color: #fbbf24;
	letter-spacing: 1px;
	margin-right: 4px;
}

/* ---- CTAs ---- */
.wpsn-pricing-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	text-align: center;
	padding: 14px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	cursor: pointer;
	border: none;
	text-decoration: none !important;
	transition: background-color 0.2s, color 0.2s, transform 0.1s;
	box-sizing: border-box;
}

.wpsn-pricing-cta:active {
	transform: scale(0.98);
}

.wpsn-pricing-cta--primary {
	background-color: #fab41d;
	color: #000 !important;
	font-weight: 800;
}

/* Keep the theme's green hover background; just ensure readable white text. */
.wpsn-pricing-cta--primary:hover,
.wpsn-pricing-cta--primary:focus {
	color: #fff !important;
}

.wpsn-pricing-cta--secondary {
	background: #d7dbe0;
	color: #191c1d !important;
	white-space: nowrap;
}

.wpsn-pricing-cta--secondary:hover {
	background: #c4c9d0;
	color: #191c1d !important;
}

.page-id-8187 .wpsn-pricing-cta.fsbuy {
	white-space: normal;
}

/* ---- Trial link (subtle, under the CTA) ---- */
.wpsn-pricing-trial-link {
	display: inline-block;
	margin: 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: #059669;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s;
}

.wpsn-pricing-trial-link::after {
	content: ' →';
	font-weight: 400;
}

.wpsn-pricing-trial-link:hover,
.wpsn-pricing-trial-link:focus {
	color: #047857;
	text-decoration: underline;
}


.wpsn-pricing-footnote {
	font-size: 12px;
	color: #6b7280;
	text-align: center;
	margin: 12px 0 0;
	line-height: 1.5;
}

.wpsn-pricing-disclaimer {
	text-align: center;
	font-size: 13px;
	color: #6b7280;
	margin-top: 24px;
	line-height: 1.5;
}

/* Soft background panel; stays within its container (no viewport breakout) */
.page-id-8187 .wpsn-pricing-outer {
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.wpsn-pricing {
		grid-template-columns: 1fr;
	}

	.wpsn-pricing-sites-options {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.wpsn-pricing-card {
		padding: 24px 18px;
	}

	.wpsn-pricing-price {
		font-size: 34px;
	}

	.wpsn-pricing-price-block .wpsn-pricing-price {
		font-size: 40px;
	}
}