/* ── WPStack Public ── */
:root {
	--wps-blue:   #2563eb;
	--wps-dark:   #1e293b;
	--wps-muted:  #64748b;
	--wps-border: #e2e8f0;
	--wps-bg:     #f8fafc;
	--wps-radius: 12px;
}

/* ── Buttons ── */
.wps-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; border:none; text-decoration:none; transition:background .15s, border-color .15s, opacity .15s; line-height:1.4; }
.wps-btn:disabled { opacity:.6; cursor:not-allowed; }
.wps-btn--primary { background:var(--wps-blue); color:#fff; }
.wps-btn--primary:hover:not(:disabled) { background:#1d4ed8; color:#fff; }
.wps-btn--outline { background:#fff; color:var(--wps-dark); border:1px solid var(--wps-border); }
.wps-btn--outline:hover:not(:disabled) { border-color:#94a3b8; color:var(--wps-dark); }
.wps-btn--danger  { background:#fee2e2; color:#dc2626; border:1px solid #fecaca; }
.wps-btn--danger:hover:not(:disabled)  { background:#fecaca; }
.wps-btn--ghost   { background:transparent; color:var(--wps-muted); border:none; padding:6px 10px; }
.wps-btn--ghost:hover { color:var(--wps-dark); }
.wps-btn--sm   { padding:5px 12px; font-size:12px; }
.wps-btn--full { width:100%; margin-top:8px; }

/* ── Notices ── */
.wps-notice { padding:12px 16px; border-radius:8px; font-size:14px; margin-bottom:20px; }
.wps-notice--success { background:#dcfce7; color:#16a34a; }
.wps-notice--error   { background:#fee2e2; color:#dc2626; }
.wps-notice--warning { background:#fef3c7; color:#d97706; }

/* ── Links ── */
.wps-link { color:var(--wps-blue); text-decoration:none; }
.wps-link:hover { text-decoration:underline; color:var(--wps-blue); }

/* ── Badge ── */
.wps-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.3px; }
.wps-badge--active    { background:#dcfce7; color:#16a34a; }
.wps-badge--revoked   { background:#fee2e2; color:#dc2626; }
.wps-badge--expired   { background:#fef3c7; color:#d97706; }
.wps-badge--suspended { background:#f1f5f9; color:#64748b; }
.wps-badge--staging   { background:#ede9fe; color:#7c3aed; }
.wps-badge--grace     { background:#fef3c7; color:#d97706; }
.wps-badge--live      { background:#dcfce7; color:#16a34a; }

/* ── Empty state ── */
.wps-empty { text-align:center; padding:60px 20px; color:var(--wps-muted); }
.wps-empty p { margin-bottom:16px; }

/* ═══════════════════════════════
   AUTH (login / register / forgot / reset)
═══════════════════════════════ */
.wps-auth { display:flex; justify-content:center; padding:60px 20px; }
.wps-auth--wide .wps-auth__card { max-width:560px; }

.wps-auth__card {
	background:#fff;
	border:1px solid var(--wps-border);
	border-radius:var(--wps-radius);
	padding:40px;
	width:100%;
	max-width:420px;
}

.wps-auth__logo {
	display:flex;
	align-items:center;
	gap:10px;
	font-size:18px;
	font-weight:700;
	color:var(--wps-dark);
	margin-bottom:28px;
}

.wps-auth__title    { font-size:22px; font-weight:700; color:var(--wps-dark); margin:0 0 6px; }
.wps-auth__subtitle { font-size:14px; color:var(--wps-muted); margin:0 0 24px; }
.wps-auth__footer   { font-size:14px; color:var(--wps-muted); margin-top:16px; text-align:center; }

/* Plan banner (register page) */
.wps-plan-banner {
	display:flex;
	align-items:center;
	gap:8px;
	background:#eff6ff;
	border:1px solid #bfdbfe;
	border-radius:8px;
	padding:10px 16px;
	margin-bottom:20px;
	font-size:14px;
}
.wps-plan-banner__label { color:var(--wps-muted); }
.wps-plan-banner__name  { font-weight:700; color:var(--wps-dark); }
.wps-plan-banner__cycle { background:#2563eb; color:#fff; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; }

/* Form */
.wps-form__field { margin-bottom:16px; }
.wps-form__field label { display:block; font-size:14px; font-weight:500; color:var(--wps-dark); margin-bottom:6px; }
.wps-req { color:#dc2626; }

.wps-form__field input,
.wps-form__field select {
	width:100%;
	padding:10px 14px;
	border:1px solid var(--wps-border);
	border-radius:8px;
	font-size:14px;
	box-sizing:border-box;
	background:#fff;
	color:var(--wps-dark);
	transition:border-color .15s, box-shadow .15s;
}
.wps-form__field input:focus,
.wps-form__field select:focus {
	outline:none;
	border-color:var(--wps-blue);
	box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.wps-form__field input::placeholder { color:#94a3b8; }

/* Password toggle wrapper */
.wps-form__field-wrap { position:relative; }
.wps-form__field-wrap input { padding-right:44px; }
.wps-pass-toggle {
	position:absolute;
	right:10px;
	top:50%;
	transform:translateY(-50%);
	background:none;
	border:none;
	cursor:pointer;
	color:var(--wps-muted);
	padding:4px;
	display:flex;
	align-items:center;
}
.wps-pass-toggle:hover { color:var(--wps-dark); }
.wps-eye-icon .wps-eye-slash { display:none; }
.wps-pass-toggle.is-visible .wps-eye-icon .wps-eye-open  { display:none; }
.wps-pass-toggle.is-visible .wps-eye-icon .wps-eye-slash { display:block; }

/* 2-column form layout */
.wps-form__2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px) { .wps-form__2col { grid-template-columns:1fr; } }

/* Divider */
.wps-form__divider {
	font-size:12px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.5px;
	color:var(--wps-muted);
	border-top:1px solid var(--wps-border);
	padding-top:16px;
	margin:8px 0 16px;
}
.wps-form__divider span { font-weight:400; text-transform:none; letter-spacing:0; }

/* Remember me / checkbox */
.wps-form__check { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--wps-dark); cursor:pointer; }
.wps-form__check input[type=checkbox] { width:16px; height:16px; accent-color:var(--wps-blue); cursor:pointer; }

.wps-form__row { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }

/* Terms */
.wps-form__terms { font-size:12px; color:var(--wps-muted); text-align:center; margin-top:12px; }
.wps-form__terms a { color:var(--wps-blue); }

/* ═══════════════════════════════
   PRICING
═══════════════════════════════ */
.wps-pricing { max-width:960px; margin:0 auto; padding:60px 20px; }

.wps-pricing__header { text-align:center; margin-bottom:48px; }
.wps-pricing__title    { font-size:36px; font-weight:800; color:var(--wps-dark); margin:0 0 10px; }
.wps-pricing__subtitle { font-size:16px; color:var(--wps-muted); margin:0 0 32px; }

/* Cycle toggle */
.wps-cycle-toggle {
	display:inline-flex;
	background:var(--wps-bg);
	border:1px solid var(--wps-border);
	border-radius:10px;
	padding:4px;
	gap:4px;
}
.wps-cycle-btn {
	padding:8px 20px;
	border-radius:8px;
	border:none;
	background:transparent;
	font-size:14px;
	font-weight:500;
	color:var(--wps-muted);
	cursor:pointer;
	transition:background .15s, color .15s;
	display:flex;
	align-items:center;
	gap:8px;
}
.wps-cycle-btn--active {
	background:#fff;
	color:var(--wps-dark);
	box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.wps-cycle-badge {
	background:#16a34a;
	color:#fff;
	font-size:11px;
	font-weight:600;
	padding:2px 8px;
	border-radius:999px;
}

/* Plan grid */
.wps-pricing__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }

.wps-plan {
	background:#fff;
	border:2px solid var(--wps-border);
	border-radius:var(--wps-radius);
	padding:28px 24px;
	position:relative;
	display:flex;
	flex-direction:column;
}
.wps-plan--popular { border-color:var(--wps-blue); }

.wps-plan__badge {
	position:absolute;
	top:-13px;
	left:50%;
	transform:translateX(-50%);
	background:var(--wps-blue);
	color:#fff;
	font-size:12px;
	font-weight:600;
	padding:3px 16px;
	border-radius:999px;
	white-space:nowrap;
}

.wps-plan__name   { font-weight:700; font-size:17px; color:var(--wps-dark); margin-bottom:16px; }
.wps-plan__price  { display:flex; align-items:baseline; gap:2px; margin-bottom:4px; }
.wps-plan__currency { font-size:20px; font-weight:700; color:var(--wps-dark); margin-top:6px; }
.wps-plan__amount   { font-size:46px; font-weight:800; color:var(--wps-dark); line-height:1; }
.wps-plan__dec      { font-size:20px; font-weight:600; vertical-align:super; line-height:1; }
.wps-plan__period   { font-size:13px; color:var(--wps-muted); margin-bottom:6px; }
.wps-plan__period--lifetime { display:none; }
.wps-plan__seats  { font-size:13px; color:var(--wps-muted); margin-bottom:20px; }

.wps-plan__features { list-style:none; padding:0; margin:0 0 24px; flex:1; }
.wps-plan__features li {
	font-size:13px;
	color:var(--wps-dark);
	padding:4px 0;
	display:flex;
	align-items:center;
	gap:6px;
}
.wps-plan__features li:first-child { font-weight:600; }

/* Pricing footer */
.wps-pricing__footer { text-align:center; margin-top:40px; }
.wps-pricing__footer p { font-size:14px; color:var(--wps-muted); margin-bottom:12px; }
.wps-pricing__badges { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.wps-pricing__badges span { font-size:13px; color:var(--wps-muted); }

/* ═══════════════════════════════
   ACCOUNT
═══════════════════════════════ */
.wps-account { max-width:760px; margin:0 auto; padding:40px 20px; }

/* Header */
.wps-account__header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:32px;
	gap:16px;
	flex-wrap:wrap;
}
.wps-account__user { display:flex; align-items:center; gap:14px; }
.wps-account__avatar {
	width:48px; height:48px;
	border-radius:50%;
	background:var(--wps-blue);
	color:#fff;
	font-size:20px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
.wps-account__name  { font-size:18px; font-weight:700; color:var(--wps-dark); margin:0 0 2px; }
.wps-account__email { font-size:13px; color:var(--wps-muted); margin:0; }

/* Tabs */
.wps-tabs { display:flex; gap:4px; border-bottom:2px solid var(--wps-border); margin-bottom:28px; }
.wps-tab {
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:10px 20px;
	font-size:14px;
	font-weight:500;
	color:var(--wps-muted);
	background:none;
	border:none;
	border-bottom:2px solid transparent;
	margin-bottom:-2px;
	cursor:pointer;
	transition:color .15s, border-color .15s;
	line-height:1;
}
.wps-tab:hover { color:var(--wps-dark); }
.wps-tab.is-active { color:var(--wps-blue); border-bottom-color:var(--wps-blue); }
.wps-tab.is-active svg { stroke:var(--wps-blue); }

.wps-tab-panel { display:none; }
.wps-tab-panel.is-active { display:block; }

/* Section headings inside tabs */
.wps-section-title { font-size:15px; font-weight:600; color:var(--wps-dark); margin:0 0 16px; }

/* License cards */
.wps-license-card {
	background:#fff;
	border:1px solid var(--wps-border);
	border-radius:var(--wps-radius);
	padding:24px;
	margin-bottom:16px;
}
.wps-license-card__head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; gap:12px; flex-wrap:wrap; }
.wps-license-card__plan { font-weight:700; font-size:15px; color:var(--wps-dark); margin:0 0 6px; }

.wps-license-card__key-row {
	display:flex;
	align-items:center;
	gap:8px;
	background:var(--wps-bg);
	border:1px solid var(--wps-border);
	border-radius:8px;
	padding:6px 12px;
	font-size:13px;
	font-family:monospace;
	letter-spacing:.5px;
}
.wps-license-card__key-row button {
	background:none; border:none; cursor:pointer; color:var(--wps-muted); padding:2px 4px; flex-shrink:0;
}
.wps-license-card__key-row button:hover { color:var(--wps-blue); }

.wps-license-card__meta { display:flex; gap:20px; font-size:13px; color:var(--wps-muted); margin:12px 0; flex-wrap:wrap; }
.wps-license-card__meta strong { color:var(--wps-dark); }

/* Seat bar */
.wps-seat-bar { height:6px; background:var(--wps-border); border-radius:999px; margin-bottom:4px; overflow:hidden; }
.wps-seat-bar__fill { height:100%; background:var(--wps-blue); border-radius:999px; }
.wps-seat-bar__label { font-size:12px; color:var(--wps-muted); margin-bottom:16px; }

/* Domains table */
.wps-domains__header { display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; }
.wps-domains__title  { font-size:12px; font-weight:600; color:var(--wps-muted); text-transform:uppercase; letter-spacing:.5px; margin:0; }

.wps-domain-row {
	display:flex;
	align-items:center;
	gap:10px;
	padding:9px 0;
	border-bottom:1px solid var(--wps-border);
}
.wps-domain-row:last-child { border-bottom:none; }
.wps-domain-row__name { flex:1; font-size:14px; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wps-domain-row__ping { font-size:12px; color:var(--wps-muted); white-space:nowrap; }

/* Subscription cards (billing tab) */
.wps-sub-card {
	background:#fff;
	border:1px solid var(--wps-border);
	border-radius:var(--wps-radius);
	padding:20px 24px;
	margin-bottom:16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
}
.wps-sub-card__info { flex:1; }
.wps-sub-card__plan  { font-weight:700; font-size:15px; color:var(--wps-dark); margin-bottom:4px; }
.wps-sub-card__cycle { font-size:13px; color:var(--wps-muted); }
.wps-sub-card__renews { font-size:12px; color:var(--wps-muted); margin-top:4px; }

/* Payment history table */
.wps-table-wrap { overflow-x:auto; }
.wps-table {
	width:100%;
	border-collapse:collapse;
	font-size:14px;
}
.wps-table th {
	text-align:left;
	font-size:12px;
	font-weight:600;
	color:var(--wps-muted);
	text-transform:uppercase;
	letter-spacing:.5px;
	padding:8px 12px;
	border-bottom:1px solid var(--wps-border);
}
.wps-table td { padding:10px 12px; border-bottom:1px solid var(--wps-border); color:var(--wps-dark); }
.wps-table tr:last-child td { border-bottom:none; }

/* Extra badge variants */
.wps-badge--info     { background:#eff6ff; color:#2563eb; }
.wps-badge--lifetime { background:#f0fdf4; color:#16a34a; }

/* License card inner layout */
.wps-license-card__info  { flex:1; min-width:0; }
.wps-license-card__plan  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:700; font-size:15px; color:var(--wps-dark); margin-bottom:10px; }

.wps-license-card__key-row {
	display:flex;
	align-items:center;
	gap:8px;
	background:var(--wps-bg);
	border:1px solid var(--wps-border);
	border-radius:8px;
	padding:8px 12px;
	font-size:12px;
	font-family:monospace;
	letter-spacing:.4px;
	margin-bottom:12px;
	overflow:hidden;
}
.wps-license-card__key { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wps-copy-btn {
	background:none; border:none; cursor:pointer;
	color:var(--wps-muted); padding:2px 4px; flex-shrink:0;
	display:flex; align-items:center;
	transition:color .15s;
}
.wps-copy-btn:hover { color:var(--wps-blue); }

.wps-license-card__meta { display:flex; gap:16px; font-size:13px; color:var(--wps-muted); margin-bottom:12px; flex-wrap:wrap; }

/* Domain rows */
.wps-license-card__actions { display:flex; gap:8px; margin-bottom:16px; }

.wps-domains { margin-top:4px; }
.wps-domains__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.wps-domains__title  { font-size:11px; font-weight:600; color:var(--wps-muted); text-transform:uppercase; letter-spacing:.5px; }
.wps-domains__empty  { font-size:13px; color:var(--wps-muted); margin:8px 0 0; }

.wps-domain-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--wps-border); }
.wps-domain-row__info  { flex:1; min-width:0; }
.wps-domain-row__name  { display:block; font-size:13px; font-weight:500; color:var(--wps-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wps-domain-row__ping  { display:block; font-size:11px; color:var(--wps-muted); margin-top:1px; }
.wps-domain-row__right { display:flex; align-items:center; gap:6px; flex-shrink:0; }

.wps-btn--xs { padding:3px 10px; font-size:11px; border-radius:6px; }

/* Billing plan cards */
.wps-billing-plans { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.wps-billing-plan-card {
	background:#fff;
	border:1px solid var(--wps-border);
	border-radius:var(--wps-radius);
	padding:16px 20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.wps-billing-plan-card__name  { font-weight:600; font-size:15px; color:var(--wps-dark); margin-bottom:3px; }
.wps-billing-plan-card__cycle { font-size:13px; color:var(--wps-muted); }

/* Billing table */
.wps-billing-table { border:1px solid var(--wps-border); border-radius:var(--wps-radius); overflow:hidden; }
.wps-billing-table__head {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 80px;
	padding:10px 16px;
	background:var(--wps-bg);
	border-bottom:1px solid var(--wps-border);
	font-size:11px;
	font-weight:600;
	color:var(--wps-muted);
	text-transform:uppercase;
	letter-spacing:.5px;
}
.wps-billing-table__row {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 80px;
	padding:12px 16px;
	font-size:13px;
	color:var(--wps-dark);
	border-bottom:1px solid var(--wps-border);
	align-items:center;
}
.wps-billing-table__row:last-child { border-bottom:none; }

/* Profile / form cards */
.wps-card {
	background:#fff;
	border:1px solid var(--wps-border);
	border-radius:var(--wps-radius);
	padding:24px;
	margin-bottom:20px;
}
.wps-card__title { font-size:15px; font-weight:600; color:var(--wps-dark); margin:0 0 20px; }

.wps-form--inline .wps-form__2col { margin-bottom:0; }

/* Profile save feedback */
#wpsProfileMsg { display:none; }

/* ═══════════════════════════════
   Responsive
═══════════════════════════════ */
@media (max-width:600px) {
	.wps-auth__card { padding:28px 20px; }
	.wps-pricing__title { font-size:26px; }
	.wps-pricing__grid { grid-template-columns:1fr; }
	.wps-plan__amount { font-size:36px; }
	.wps-account__header { flex-direction:column; align-items:flex-start; }
	.wps-sub-card { flex-direction:column; align-items:flex-start; }
	.wps-tabs { overflow-x:auto; white-space:nowrap; }
}

