/**
 * VirtLaunch Checkout Styles.
 *
 * @package VirtLaunch\Billing
 */

/* Billing Cycle Toggle */
.vl-billing-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 8px;
}

.vl-billing-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--vl-text-secondary);
	cursor: pointer;
	transition: color 0.2s ease;
	user-select: none;
}

.vl-billing-label--active {
	color: var(--vl-text-primary);
}

.vl-toggle-switch {
	position: relative;
	width: 48px;
	height: 26px;
	background: var(--vl-border-light);
	border: none;
	border-radius: 13px;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease;
}

.vl-toggle-switch[data-state="annual"] {
	background: var(--vl-brand-primary);
}

.vl-toggle-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.vl-toggle-switch[data-state="annual"] .vl-toggle-knob {
	transform: translateX(22px);
}

/* Savings Badge */
.vl-savings-badge {
	background: var(--vl-success-bg, #dcfce7);
	color: var(--vl-success-text, #166534);
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	margin-left: 8px;
	vertical-align: middle;
}

/* Region Selector */
.vl-region-selector {
	text-align: center;
	margin: 16px 0;
}

.vl-region-selector label {
	font-weight: 600;
	margin-right: 8px;
}

.vl-region-selector select {
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

.vl-pricing-table {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding: 24px 0;
}

.vl-plan-card {
	background: var(--vl-bg-primary);
	border: 1px solid var(--vl-border-light);
	border-radius: 8px;
	padding: 24px;
	text-align: center;
	transition: box-shadow 0.2s ease;
}

.vl-plan-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vl-plan-name {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 8px;
}

.vl-trial-badge {
	display: inline-block;
	background: #e8f5e9;
	color: #2e7d32;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 12px;
	margin: 4px 0 8px;
}

.vl-plan-description {
	color: var(--vl-text-secondary);
	font-size: 14px;
	margin: 0 0 16px;
}

.vl-plan-price {
	margin: 16px 0;
}

.vl-price-amount {
	font-size: 36px;
	font-weight: 700;
	color: var(--vl-text-primary);
}

.vl-price-period {
	font-size: 14px;
	color: var(--vl-text-secondary);
}

.vl-plan-specs {
	list-style: none;
	padding: 0;
	margin: 16px 0;
	text-align: left;
}

.vl-plan-specs li {
	padding: 8px 0;
	border-bottom: 1px solid var(--vl-bg-secondary);
}

.vl-plan-specs li:last-child {
	border-bottom: none;
}

.vl-buy-button {
	background: var(--vl-brand-primary);
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 32px;
	width: 100%;
	transition: background 0.2s ease;
}

.vl-buy-button:hover {
	background: var(--vl-brand-hover);
}

.vl-buy-button:disabled {
	background: var(--vl-red-200);
	cursor: not-allowed;
}

/* Modal — scoped to #vl-checkout-modal to prevent CSS bleed onto portal */
/* modals. This file is enqueued on portal pages (for the billing-cycle */
/* toggle styles), and an unscoped .vl-modal rule overrode portal.css's */
/* .vl-modal--fullscreen rules via cascade order, e.g. align-items:center */
/* collapsed the fullscreen modal's children width to 0. Same class of */
/* bug as the s240 .vl-modal-close scope fix. */
#vl-checkout-modal.vl-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.vl-modal-content {
	background: var(--vl-bg-primary);
	border-radius: 8px;
	padding: 32px;
	position: relative;
	width: 90%;
}

/* Scoped to #vl-checkout-modal because checkout-form.php's close button sits */
/* as a direct child of .vl-modal-content (no .vl-modal-header wrapper), so it */
/* needs absolute positioning. Portal modals use .vl-modal-header flex layout */
/* and must not inherit this rule — bleeding it stacked × and footer buttons */
/* at the same corner and broke click actionability. */
#vl-checkout-modal .vl-modal-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 24px;
	position: absolute;
	right: 16px;
	top: 16px;
	color: var(--vl-text-secondary);
}

#vl-checkout-modal .vl-modal-close:hover {
	color: var(--vl-text-primary);
}

.vl-form-group {
	margin-bottom: 16px;
}

.vl-form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.vl-form-group input[type="email"],
.vl-form-group input[type="text"],
.vl-form-group input[type="password"] {
	border: 1px solid var(--vl-border-primary);
	border-radius: 4px;
	box-sizing: border-box;
	padding: 12px;
	width: 100%;
}

.vl-form-group input[type="email"]:focus,
.vl-form-group input[type="text"]:focus,
.vl-form-group input[type="password"]:focus {
	border-color: var(--vl-brand-primary);
	outline: none;
}

/* IPv4 add-on checkbox */
.vl-ipv4-addon {
	background: var(--vl-bg-secondary, #f8f9fa);
	border: 1px solid var(--vl-border-light, #e5e7eb);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 16px;
}

.vl-ipv4-addon .vl-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	margin-bottom: 0;
	cursor: pointer;
}

.vl-ipv4-addon .vl-checkbox-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
}

.vl-addon-price {
	color: var(--vl-text-secondary);
	font-weight: 400;
}

.vl-ipv4-addon .description {
	color: var(--vl-text-secondary);
	font-size: 12px;
	margin: 6px 0 0 24px;
	line-height: 1.4;
}

/* Marketing statement in plan card */
.vl-plan-marketing {
	color: var(--vl-text-secondary);
	font-size: 13px;
	margin: 8px 0 12px;
	line-height: 1.4;
	font-style: italic;
}

/* Marketing statement in checkout modal */
.vl-marketing-statement {
	background: var(--vl-bg-secondary, #f8f9fa);
	border: 1px solid var(--vl-border-light, #e5e7eb);
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 16px;
}

.vl-marketing-statement .vl-marketing-text {
	color: var(--vl-text-secondary);
	font-size: 13px;
	margin: 0;
	line-height: 1.4;
}

.vl-submit-button {
	background: var(--vl-brand-primary);
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	margin-top: 16px;
	padding: 12px;
	width: 100%;
	transition: background 0.2s ease;
}

.vl-submit-button:hover {
	background: var(--vl-brand-hover);
}

.vl-submit-button:disabled {
	background: var(--vl-red-200);
	cursor: not-allowed;
}

.vl-checkout-note {
	color: var(--vl-text-secondary);
	font-size: 12px;
	margin-top: 16px;
	text-align: center;
}

.vl-selected-plan {
	color: var(--vl-brand-primary);
	font-weight: 600;
	margin-bottom: 16px;
}

/* Empty/Error States */
.vl-no-plans,
.vl-plan-error {
	padding: 24px;
	text-align: center;
	color: var(--vl-text-secondary);
}

/* Success Page */
.vl-checkout-success {
	max-width: 500px;
	margin: 48px auto;
	padding: 48px;
	text-align: center;
	background: var(--vl-bg-primary);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vl-success-icon {
	width: 64px;
	height: 64px;
	background: var(--vl-success-icon);
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	line-height: 64px;
	margin: 0 auto 24px;
}

.vl-checkout-success h2 {
	color: var(--vl-text-primary);
	margin: 0 0 16px;
}

.vl-checkout-success p {
	color: var(--vl-text-secondary);
	margin: 0 0 16px;
}

.vl-success-button {
	background: var(--vl-brand-primary);
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-weight: 600;
	padding: 12px 32px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.vl-success-button:hover {
	background: var(--vl-brand-hover);
	color: #fff;
}

/* Turnstile widget */
.cf-turnstile {
	margin: 16px 0;
	max-width: 100%;
}

/* Checkout Toast Notifications */
.vl-checkout-toast {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 400px;
	padding: 14px 18px;
	border-radius: 8px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: translateX(100%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.vl-checkout-toast--visible {
	opacity: 1;
	transform: translateX(0);
}

.vl-checkout-toast--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.vl-checkout-toast--success {
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.vl-checkout-toast__icon {
	flex-shrink: 0;
	font-size: 16px;
	font-weight: bold;
}

.vl-checkout-toast__message {
	flex: 1;
}

.vl-checkout-toast__close {
	flex-shrink: 0;
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	padding: 0 0 0 8px;
	color: inherit;
	opacity: 0.6;
	line-height: 1;
}

.vl-checkout-toast__close:hover {
	opacity: 1;
}

/* === Responsive === */

/* Mobile (< 640px) */
@media (max-width: 639px) {
	.vl-pricing-table {
		gap: 16px;
		padding: 16px 0;
	}

	.vl-plan-card {
		padding: 20px 16px;
	}

	.vl-plan-name {
		font-size: 20px;
	}

	.vl-price-amount {
		font-size: 28px;
	}

	.vl-buy-button {
		padding: 14px 24px;
		font-size: 16px;
		min-height: 44px;
	}

	.vl-checkout-success {
		margin: 24px 16px;
		padding: 32px 20px;
	}

	.vl-success-icon {
		width: 48px;
		height: 48px;
		font-size: 24px;
		line-height: 48px;
	}

	.vl-modal-content {
		padding: 24px 16px;
		width: 95%;
	}
}

/* Tablet (640px–1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
	.vl-pricing-table {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
	.vl-pricing-table {
		grid-template-columns: repeat(3, 1fr);
		max-width: 1080px;
		margin-left: auto;
		margin-right: auto;
	}
}