/**
 * Known Universe - Purchase Buttons / Public Pricing Cards
 *
 * Styles for the [ku_buy_subscription] shortcode (class-ku-purchase-buttons.php):
 * the Monthly/Annual toggle and the three tier cards (Team, Learning, Organization)
 * on the public pricing page.
 *
 * Moved out of an inline <style> block printed from PHP into this dedicated,
 * enqueued stylesheet on 07-06-2026, per the plugin's CSS rule (no inline
 * <style> blocks in PHP files).
 *
 * @package KnownUniverse
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.ku-pricing-wrapper {
	max-width: 1000px;
	margin: 0 auto;
}

/* ── Monthly / Annual toggle ─────────────────────────────────────────────── */

.ku-billing-toggle-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 25px;
}

.ku-toggle-word {
	font-weight: 600;
	color: #333;
}

.ku-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 26px;
}

.ku-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.ku-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .2s;
	border-radius: 26px;
}

.ku-slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 3px;
	bottom: 3px;
	background-color: #fff;
	transition: .2s;
	border-radius: 50%;
}

.ku-switch input:checked + .ku-slider {
	background-color: #122B46;
}

.ku-switch input:checked + .ku-slider:before {
	transform: translateX(24px);
}

/* ── Card row ────────────────────────────────────────────────────────────── */

.ku-pricing-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

/* ── Tier card ───────────────────────────────────────────────────────────────
   width: min(100%, 310px) keeps the card at 310px wide on desktop like
   before, but lets it shrink to fit the screen on phones instead of forcing
   horizontal overflow (the fixed 310px width, combined with 25px of padding
   and no box-sizing rule, used to render at ~362px regardless of viewport -
   wider than most phone screens). Border darkened from #ddd to #9CA3AF so
   the card outline is actually visible, especially on mobile. */
.ku-pricing-card {
	position: relative;
	width: min(100%, 310px);
	box-sizing: border-box;
	border: 1px solid #9CA3AF;
	border-radius: 8px;
	padding: 25px;
	text-align: center;
}

.ku-pricing-card--recommended {
	border: 2px solid #122B46;
}

.ku-pricing-card-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: #122B46;
	color: #fff;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
}

.ku-pricing-card-name {
	color: #122B46;
	margin-bottom: 5px;
}

.ku-pricing-card-desc {
	font-size: 14px;
	min-height: 60px;
}

.ku-pricing-card-price {
	font-size: 28px;
	font-weight: 700;
	margin: 10px 0 0 0;
}

.ku-pricing-card-savings {
	color: #DD9933;
	font-weight: 600;
	font-size: 13px;
	margin: 0 0 10px 0;
}

.ku-pricing-card-features {
	list-style: none;
	padding: 0;
	margin: 15px 0;
	text-align: left;
	font-size: 14px;
}

.ku-pricing-card-features li {
	padding: 4px 0;
	border-bottom: 1px solid #eee;
}

/* ── Buy buttons ─────────────────────────────────────────────────────────── */

.ku-buy-button,
.ku-buy-button--founders {
	display: inline-block;
	border-radius: 10px;
	border: 2px solid #122B46 !important;
	color: #122B46 !important;
	background: #fff !important;
	padding: 10px 25px;
	text-decoration: none;
	font-weight: 600;
}

.ku-buy-button:hover,
.ku-buy-button--founders:hover {
	background: #122B46 !important;
	color: #fff !important;
}

.ku-buy-button--filled {
	background: #122B46 !important;
	color: #fff !important;
}

.ku-buy-button--filled:hover {
	background: #fff !important;
	color: #122B46 !important;
}