/* ==========================================================================
   NaxerTech Hosting — additions to naxer.css
   naxer.css is a copy of www.naxertech.com's design system and is left
   untouched so the two sites can be kept in step by copying it across.
   Everything specific to hosting.naxertech.com lives here, built only from
   naxer.css's tokens so both art directions keep working.
   ========================================================================== */

/* -------------------------------------------------------------- prices */
/* Prices arrive from forms/prices.php after load (the currency depends on
   where the visitor is). Until then the slot holds a quiet shimmer of the
   right size, so nothing jumps when the figure lands. */
[data-price]:empty::before {
	content: "";
	display: inline-block;
	width: 4.2em;
	height: 0.8em;
	border-radius: var(--r-xs);
	background: linear-gradient(90deg, var(--hairline) 0%, var(--hairline-strong) 50%, var(--hairline) 100%);
	background-size: 200% 100%;
	animation: price-wait 1.4s var(--ease) infinite;
	vertical-align: middle;
}

@keyframes price-wait {
	to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	[data-price]:empty::before { animation: none; }
}

/* The figure itself is a <b>: naxer.css styles every span inside .plan__price
   as the small qualifier line beneath the price. */
.plan__price b {
	font-weight: inherit;
}

.plan__price .plan__per {
	display: block;
	margin-top: 6px;
}

.plan__save {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 8px;
	border-radius: var(--r-xs);
	background: var(--live-soft);
	color: var(--live);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	vertical-align: middle;
}

.plan__save:empty,
.plan__save[hidden] {
	display: none;
}

.plan--featured .plan__save {
	background: rgba(47, 211, 155, 0.16);
}

.plan__storage {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin-top: var(--s-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.plan__storage b {
	color: var(--text-strong);
	font-size: var(--fs-sm);
}

.plan--featured .plan__storage { color: var(--on-dark-muted); }
.plan--featured .plan__storage b { color: #fff; }

.currency-note {
	margin-top: var(--s-5);
	color: var(--text-muted);
	font-size: var(--fs-xs);
	text-align: center;
}

/* ------------------------------------------------------- term switch */
/* Monthly / Annual. A two-option radio group drawn as a segmented pill. */
.term-switch {
	display: flex;
	justify-content: center;
	margin-bottom: var(--s-7);
}

.term-switch__group {
	display: inline-flex;
	gap: 4px;
	padding: 5px;
	border: 0;
	margin: 0;
	border-radius: var(--r-pill);
	background: var(--glass);
	box-shadow: var(--bevel-ring), var(--bevel);
}

.term-switch__group legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.term-switch label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: var(--r-pill);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 620;
	cursor: pointer;
	transition: color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.term-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.term-switch label:has(input:checked) {
	color: var(--text-strong);
	background: var(--surface);
	box-shadow: var(--bevel-ring), var(--bevel), var(--shadow-sm);
}

.term-switch label:has(input:focus-visible) {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.term-switch small {
	color: var(--live);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	font-weight: 600;
}

/* --------------------------------------------------------- hero stage */
/* The homepage's answer to www's live-ops panel: a mailbox preview that
   rewrites itself as the visitor types their domain. Dark glass in both art
   directions, because it sits on the hero plate, which is mid-tone in both. */
.mailcard {
	position: relative;
	padding: clamp(18px, 2.4vw, 28px);
	border-radius: var(--r-xl);
	background: linear-gradient(168deg, rgba(19, 13, 46, 0.74), rgba(9, 7, 28, 0.88));
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 60px 120px -40px rgba(6, 4, 22, 0.8), 0 22px 48px -22px rgba(6, 4, 22, 0.6);
	backdrop-filter: blur(22px) saturate(1.3);
	-webkit-backdrop-filter: blur(22px) saturate(1.3);
	color: #e9eff8;
}

.mailcard__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #93a5bd;
}

.mailcard__bar b {
	color: #2fd39b;
	font-weight: 600;
}

.mailcard label {
	display: block;
	margin-bottom: 8px;
	color: #93a5bd;
	font-size: var(--fs-xs);
	font-weight: 600;
}

.mailcard__field {
	display: flex;
	align-items: center;
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	transition: box-shadow var(--t) var(--ease);
}

.mailcard__field:focus-within {
	box-shadow: inset 0 0 0 1px var(--brand-400), 0 0 0 4px rgba(244, 103, 109, 0.2);
}

.mailcard__field span {
	padding-left: 16px;
	color: #93a5bd;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
}

.mailcard__field input {
	flex: 1;
	min-width: 0;
	padding: 13px 16px 13px 4px;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	outline: none;
}

.mailcard__list {
	display: grid;
	gap: 8px;
	margin: var(--s-4) 0;
	padding: 0;
	list-style: none;
}

.mailcard__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.05);
	min-width: 0;
}

.mailcard__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--av, #3f9bf2);
	color: #fff;
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 650;
	text-transform: uppercase;
}

.mailcard__who {
	display: grid;
	min-width: 0;
}

.mailcard__who b {
	overflow: hidden;
	color: #fff;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mailcard__who small {
	color: #93a5bd;
	font-size: var(--fs-2xs);
}

.dns-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dns-chips span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 9px;
	border-radius: var(--r-xs);
	background: rgba(47, 211, 155, 0.14);
	color: #2fd39b;
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	font-weight: 600;
}

.dns-chips svg {
	width: 12px;
	height: 12px;
	stroke-width: 2.4;
}

/* ------------------------------------------------- compare table marks */
.spec-table th.plan-col {
	width: auto;
	background: var(--surface-2);
	text-align: center;
}

.spec-table td.yes,
.spec-table td.no,
.spec-table td.val {
	text-align: center;
}

.spec-table td.yes { color: var(--brand); }
.spec-table td.no { color: var(--text-faint); }
.spec-table td.val { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; color: var(--text-strong); }

/* -------------------------------------------------------- settings table */
.settings-table td code,
.settings-table th code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	color: var(--text-strong);
	word-break: break-all;
}

.copy-btn {
	margin-left: 8px;
	padding: 3px 8px;
	border-radius: var(--r-xs);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--hairline);
	color: var(--text-muted);
	font-size: var(--fs-2xs);
	font-weight: 650;
	vertical-align: middle;
	cursor: pointer;
}

.copy-btn:hover { color: var(--text-strong); }
.copy-btn[data-copied] { color: var(--live); }

/* ---------------------------------------------------------- order page */
.pick-grid {
	display: grid;
	gap: var(--s-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	margin-bottom: var(--s-5);
}

.pick {
	position: relative;
	display: grid;
	gap: 4px;
	padding: var(--s-4);
	border-radius: var(--r-lg);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--hairline);
	cursor: pointer;
	transition: box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}

.pick:hover {
	box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

.pick input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pick:has(input:checked) {
	background: var(--surface);
	box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px var(--brand-soft);
}

.pick:has(input:focus-visible) {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
}

.pick__name {
	color: var(--text-strong);
	font-family: var(--font-display);
	font-size: var(--fs-lg, 1.125rem);
	font-weight: 620;
}

.pick__meta {
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.pick__price {
	margin-top: 6px;
	color: var(--text-strong);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.order-step {
	margin: 0 0 var(--s-6);
	padding: 0;
	border: 0;
}

.order-step legend {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: var(--s-4);
	padding: 0;
	color: var(--text-strong);
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.order-step legend span {
	color: var(--brand);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.order-hint {
	margin: -6px 0 var(--s-4);
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.radio-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-4);
}

.radio-row label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--r-pill);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--hairline);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.radio-row label:has(input:checked) {
	box-shadow: inset 0 0 0 2px var(--brand);
	background: var(--surface);
}

.radio-row input {
	accent-color: var(--brand);
}

.check-line {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: var(--s-4) 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.check-line input {
	margin-top: 4px;
	accent-color: var(--brand);
}

.check-line a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Kept off-screen rather than display:none, which some bots skip. */
.hp-field {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------- notices */
.notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: var(--s-5);
	padding: var(--s-4) var(--s-5);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.notice svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.notice--ok {
	background: var(--live-soft);
	color: var(--text-strong);
	box-shadow: inset 0 0 0 1px rgba(18, 185, 129, 0.3);
}

.notice--ok svg { color: var(--live); }

.notice--error {
	background: var(--brand-soft);
	color: var(--text-strong);
	box-shadow: inset 0 0 0 1px var(--brand-ring);
}

.notice--error svg { color: var(--brand); }

/* ----------------------------------------------------- migration sources */
.source-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-5);
}

/* ------------------------------------------------------------ help pages */
.guide-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-7);
}

.guide-steps {
	margin: 0;
	padding-left: 1.3em;
	display: grid;
	gap: 8px;
	color: var(--text);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.guide-steps li::marker {
	color: var(--brand);
	font-family: var(--font-mono);
	font-weight: 600;
}

.guide-steps code,
.prose code,
.card code {
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--hairline);
	font-family: var(--font-mono);
	font-size: 0.86em;
	color: var(--text-strong);
	word-break: break-word;
}

.section--dark .card code {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.received {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.received .bq-summary {
	margin: var(--s-6) 0;
	text-align: left;
}

.received .icon-tile {
	margin: 0 auto var(--s-5);
}

/* Footer data credits (DB-IP and ExchangeRate-API ask for a visible link). */
.credits {
	display: block;
	margin-top: 6px;
	color: var(--on-dark-muted, var(--text-faint));
	font-size: var(--fs-2xs);
	opacity: 0.8;
}

.credits a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.nav__soon {
	margin-left: 6px;
	padding: 2px 6px;
	border-radius: var(--r-xs);
	background: var(--amber-soft);
	color: var(--amber);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}