/**
 * WC Subscription Upgrader — Frontend Styles
 *
 * Minimal styles that inherit WooCommerce button styling.
 * Modal is a clean centered overlay with no external dependencies.
 */

/* ── Shortcode wrapper (Elementor / builders) ── */

.wcsu-shortcode-wrapper {
	display: block;
}

/* Empty state: keep wrapper in layout so shortcode widget is visible in Elementor. */
.wcsu-shortcode-wrapper.wcsu-shortcode-empty {
	min-height: 1px;
}

/* ── Upgrade Button ── */

.wcsu-upgrade-wrapper {
	margin: 1.5em 0;
}

.wcsu-upgrade-btn {
	display: inline-block;
	cursor: pointer;
}

/* ── Modal Overlay ── */

.wcsu-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wcsu-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 1;
}

body.wcsu-modal-open {
	overflow: hidden;
}

/* ── Modal Card ── */

.wcsu-modal-card {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.18 );
	max-width: 480px;
	width: 90%;
	padding: 0;
	overflow: hidden;
}

.wcsu-modal-title {
	margin: 0;
	padding: 20px 24px 16px;
	font-size: 1.25em;
	font-weight: 600;
	border-bottom: 1px solid #eee;
}

.wcsu-modal-body {
	padding: 20px 24px;
}

/* ── Plan Details ── */

.wcsu-modal-details {
	margin-bottom: 16px;
}

.wcsu-modal-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 6px 0;
	border-bottom: 1px solid #f5f5f5;
}

.wcsu-modal-row:last-child {
	border-bottom: none;
}

.wcsu-modal-label {
	color: #666;
	font-size: 0.9em;
	flex-shrink: 0;
	margin-right: 12px;
}

.wcsu-modal-value {
	text-align: right;
	font-size: 0.95em;
}

/* ── Message & Reassurance ── */

.wcsu-modal-message {
	margin-bottom: 12px;
	line-height: 1.5;
}

.wcsu-modal-message p {
	margin: 0;
}

.wcsu-modal-reassurance {
	background: #f0f8ff;
	border: 1px solid #d0e8f5;
	border-radius: 4px;
	padding: 10px 14px;
	margin-bottom: 4px;
}

.wcsu-modal-reassurance p {
	margin: 0;
	font-size: 0.9em;
	color: #2271b1;
}

.wcsu-modal-reassurance .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
	margin-right: 4px;
}

/* ── Modal Footer ── */

.wcsu-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px;
	border-top: 1px solid #eee;
	background: #fafafa;
}

.wcsu-modal-confirm {
	min-width: 140px;
}

/* ── Status Messages ── */

.wcsu-modal-status {
	padding: 16px 24px;
	text-align: center;
}

.wcsu-modal-status p {
	margin: 0;
}

.wcsu-status-success {
	background: #ecf7ed;
	color: #1e7e34;
}

.wcsu-status-error {
	background: #fce4e4;
	color: #a00;
}

/* ── Login Prompt & No Subscription ── */

.wcsu-login-prompt,
.wcsu-no-subscription {
	padding: 16px 20px;
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin: 1em 0;
}

.wcsu-login-prompt p,
.wcsu-no-subscription p {
	margin: 0;
}

/* ── Direct URL Page ── */

.wcsu-direct-page {
	max-width: 600px;
	margin: 40px auto;
	padding: 0 20px;
}

.wcsu-direct-details {
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 20px;
	line-height: 1.6;
}

/* ── Responsive ── */

@media ( max-width: 480px ) {
	.wcsu-modal-card {
		width: 95%;
		margin: 10px;
	}

	.wcsu-modal-footer {
		flex-direction: column;
	}

	.wcsu-modal-footer .button {
		width: 100%;
		text-align: center;
	}

	.wcsu-modal-row {
		flex-direction: column;
		gap: 2px;
	}

	.wcsu-modal-value {
		text-align: left;
	}
}