/* Billing page — picks up theme tokens from styles.css */

.billing-hero {
	padding: 80px 0 40px;
	text-align: center;
}
.billing-hero .eyebrow {
	display: inline-block;
	color: var(--primary-light);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.billing-hero h1 {
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 16px;
}
.billing-hero .gradient {
	background: linear-gradient(135deg, var(--primary-light), #a3ccff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.billing-hero p {
	color: var(--muted);
	max-width: 640px;
	margin: 0 auto;
	font-size: 17px;
}

/* Shared feature list (was per-card, now lifted to the top) */
.shared-features {
	list-style: none;
	padding: 0;
	margin: 32px auto 0;
	display: grid;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 28px;
	max-width: 760px;
	text-align: left;

}
.shared-features li {
	font-size: 14px;
	color: var(--text);
	position: relative;
	padding-left: 22px;
}
.shared-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-image: linear-gradient(135deg, var(--primary), var(--primary-light));
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.3 5.7 9 17l-5.3-5.3 1.4-1.4L9 14.2 18.9 4.3z'/></svg>") center / 80% no-repeat;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.3 5.7 9 17l-5.3-5.3 1.4-1.4L9 14.2 18.9 4.3z'/></svg>") center / 80% no-repeat;
}

.plans-section {
	padding: 40px 0 100px;
}

.plans-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	align-items: stretch;
}

.plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: center;
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius);
	padding: 32px 24px;
	transition: transform .15s, border-color .15s, box-shadow .15s;
}
.plan-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.12);
}

.plan-card-featured {
	border-color: var(--primary);
	box-shadow: 0 20px 60px -20px var(--primary-glow);
	background: linear-gradient(180deg, rgba(20, 114, 251, 0.10), var(--surface) 40%);
}
.plan-card-featured:hover {
	border-color: var(--primary-light);
}

/* User's currently-active plan — show it as "you're here" rather than a CTA. */
.plan-card-current,
.trial-row.plan-card-current {
	border-color: var(--success);
	box-shadow: 0 0 0 1px var(--success) inset, 0 16px 40px -16px rgba(34, 197, 94, 0.4);
}
.plan-card-current .plan-cta,
.trial-row.plan-card-current .plan-cta {
	background: rgba(34, 197, 94, 0.12);
	color: var(--success);
	border: 1px solid rgba(34, 197, 94, 0.4);
	cursor: default;
}
.plan-card-current::before,
.trial-row.plan-card-current::before {
	content: "Ativo";
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--success);
	color: var(--white);
}

.plan-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: linear-gradient(135deg, var(--primary), var(--primary-light));
	color: white;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 999px;
	box-shadow: 0 8px 20px -8px var(--primary-glow);
}

.plan-head {
	
}

.plan-head h3 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 4px;
	margin-top: 10px;

}
.plan-tag {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 14px;
}

.plan-price {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 8px;
}
.plan-price .currency {
	font-size: 16px;
	color: var(--muted);
	font-weight: 600;
}
.plan-price .amount {
	font-size: 38px;
	font-weight: 800;
	color: var(--white);
	letter-spacing: -0.02em;
}
.plan-price .period {
	font-size: 14px;
	color: var(--muted);
}

.plan-billed {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 22px;
	min-height: 38px;
}
.plan-billed b {
	color: var(--text);
	font-weight: 600;
}

.plan-cta {
	width: 100%;
	margin-top: auto;
	position: relative;
}
.plan-cta .spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: white;
	border-radius: 50%;
	animation: plan-spin 0.7s linear infinite;
}
.plan-cta.loading .btn-label { opacity: 0.6; }
.plan-cta.loading .spinner   { display: inline-block; }
.plan-cta:disabled { cursor: not-allowed; opacity: 0.7; }
@keyframes plan-spin { to { transform: rotate(360deg); } }

/* Trial row — Semanal split out below the main plans as a low-commitment "just trying it" option. */
.trial-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: var(--surface);
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: var(--radius);
	padding: 22px 28px;
	max-width: 760px;
	margin: 36px auto 0;
	box-sizing: border-box;
	transition: border-color .15s, transform .15s;
}
.trial-row:hover {
	border-color: rgba(255, 255, 255, 0.30);
	transform: translateY(-2px);
}
.trial-row__info {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}
.trial-row__eyebrow {
	display: inline-block;
	color: var(--primary-light);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.trial-row__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--text);
}
.trial-row__desc {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
	margin: 0;
}
.trial-row__action {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}
.trial-row__price {
	display: flex;
	align-items: baseline;
	gap: 3px;
	white-space: nowrap;
}
.trial-row__currency {
	font-size: 14px;
	color: var(--muted);
	font-weight: 600;
}
.trial-row__amount {
	font-size: 26px;
	font-weight: 800;
	color: var(--white);
	letter-spacing: -0.02em;
}
.trial-row__period {
	font-size: 13px;
	color: var(--muted);
}
.trial-row__cta.plan-cta {
	width: auto;
	padding: 10px 22px;
	margin-top: 0;
	white-space: nowrap;
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.trial-row {
		flex-direction: column;
		align-items: stretch;
	}
	.trial-row__action {
		justify-content: space-between;
	}
}

.billing-msg {
	margin: 28px auto 0;
	max-width: 600px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	text-align: center;
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: var(--danger);
	display: none;
}
.billing-msg.show    { display: block; }
.billing-msg.success {
	background: rgba(34, 197, 94, 0.1);
	border-color: rgba(34, 197, 94, 0.3);
	color: var(--success);
}

.billing-footnote {
	margin-top: 36px;
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}
.billing-footnote b { color: var(--text); }

/* Responsive — collapse 4 → 2 → 1 column */
@media (max-width: 900px) {
	.plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.plans-grid { grid-template-columns: 1fr; }
}