/* Pterodactyl Hosting Manager — storefront styles (scoped, theme-safe) */
.phm-store, .phm-checkout-wrap, .phm-track-wrap {
	--phm-primary: #7b3fe4;
	--phm-primary-dark: #5b2bc0;
	--phm-text: #1d2327;
	--phm-muted: #787c82;
	--phm-border: #e2e4e7;
	--phm-good: #0a8a3d;
	--phm-bad: #d63638;
	font-family: inherit;
	color: var(--phm-text);
	max-width: 1100px;
	margin: 0 auto;
	line-height: 1.55;
}

/* ---- plan grid ---- */
.phm-plan-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 24px 0;
}
.phm-store[data-columns="2"] .phm-plan-grid { grid-template-columns: repeat(2, 1fr); }
.phm-store[data-columns="4"] .phm-plan-grid { grid-template-columns: repeat(4, 1fr); }
.phm-plan {
	background: #fff;
	border: 1px solid var(--phm-border);
	border-radius: 12px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.phm-plan:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.phm-plan.is-out { opacity: .55; }
.phm-plan-game {
	display: inline-block;
	background: rgba(123, 63, 228, .1);
	color: var(--phm-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
}
.phm-plan h3 { margin: 6px 0 0; font-size: 20px; }
.phm-plan-price strong { font-size: 26px; color: var(--phm-primary); }
.phm-plan-price span, .phm-plan-price small { color: var(--phm-muted); }
.phm-plan-desc { color: var(--phm-muted); font-size: 13.5px; margin: 0; }
.phm-plan ul { margin: 4px 0 10px; padding: 0; list-style: none; font-size: 14px; }
.phm-plan ul li { padding: 4px 0; border-bottom: 1px dashed var(--phm-border); }
.phm-plan ul li:last-child { border-bottom: 0; }
.phm-plan .phm-btn { margin-top: auto; justify-content: center; }
.phm-empty { color: var(--phm-muted); }

/* ---- buttons ---- */
.phm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 11px 20px; border-radius: 8px; border: 0; cursor: pointer;
	font-weight: 600; font-size: 14.5px; text-decoration: none;
	transition: background .15s ease, transform .1s ease;
}
.phm-btn:active { transform: scale(.98); }
.phm-btn-primary { background: var(--phm-primary); color: #fff !important; }
.phm-btn-primary:hover { background: var(--phm-primary-dark); color: #fff; }
.phm-btn-muted { background: #eceff1; color: var(--phm-muted); cursor: not-allowed; }
.phm-btn-lg { width: 100%; padding: 14px 20px; font-size: 16px; }

/* ---- checkout ---- */
.phm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.phm-form.phm-track-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; }
.phm-block {
	background: #fff; border: 1px solid var(--phm-border);
	border-radius: 12px; padding: 18px 20px; margin-bottom: 18px;
}
.phm-block h3 { margin: 0 0 14px; font-size: 15.5px; display: flex; align-items: center; gap: 10px; }
.phm-block h3 span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--phm-primary); color: #fff; font-size: 12.5px;
}
.phm-form input[type="text"], .phm-form input[type="email"], .phm-form select {
	width: 100%; padding: 11px 13px; margin-bottom: 10px;
	border: 1px solid var(--phm-border); border-radius: 8px;
	font-size: 15px; box-sizing: border-box;
}
.phm-form input:focus, .phm-form select:focus {
	outline: 2px solid rgba(123, 63, 228, .25); border-color: var(--phm-primary);
}
.phm-subdomain-row { display: flex; align-items: center; gap: 0; }
.phm-subdomain-row input { border-radius: 8px 0 0 8px !important; margin-bottom: 0 !important; flex: 1; }
.phm-domain-suffix {
	background: #f0f0f1; border: 1px solid var(--phm-border); border-left: 0;
	padding: 11px 13px; border-radius: 0 8px 8px 0; color: var(--phm-muted);
	font-size: 14.5px; white-space: nowrap;
}
.phm-hint { font-size: 12.5px; color: var(--phm-muted); margin: 6px 0 0; }
.phm-sub-good { color: var(--phm-good); }
.phm-sub-bad { color: var(--phm-bad); }
.phm-pay-row {
	display: flex; gap: 10px; align-items: flex-start;
	border: 1px solid var(--phm-border); border-radius: 8px;
	padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
.phm-pay-row:hover { border-color: var(--phm-primary); }
.phm-pay-row input { margin-top: 3px; }
.phm-pay-row span { display: block; font-size: 14.5px; }
.phm-pay-row small { display: block; color: var(--phm-muted); font-size: 12px; margin-top: 2px; }
.phm-total-row {
	display: flex; justify-content: space-between; align-items: center;
	background: #faf7ff; border: 1px dashed var(--phm-primary);
	border-radius: 10px; padding: 14px 18px; margin-bottom: 14px;
	font-size: 15px;
}
.phm-total-row strong { font-size: 22px; color: var(--phm-primary); }

/* ---- result / tracking ---- */
.phm-result {
	background: #fff; border: 1px solid var(--phm-border);
	border-radius: 12px; padding: 24px; max-width: 560px; margin: 20px auto;
}
.phm-result-ok { border-color: var(--phm-good); }
.phm-result h3 { margin-top: 0; }
.phm-result ul { padding-left: 18px; }
.phm-alert-error { color: var(--phm-bad); }
.phm-track-result { text-align: left; }
.phm-track-wrap .phm-alert { max-width: 420px; margin: 10px auto 0; }

@media (max-width: 860px) {
	.phm-plan-grid, .phm-store[data-columns="2"] .phm-plan-grid, .phm-store[data-columns="4"] .phm-plan-grid { grid-template-columns: 1fr; }
	.phm-form { grid-template-columns: 1fr; }
}