/* ==========================================================================
   Signup wizard — "The Signal" identity (single-page multi-step flow)
   Companion to /assets/js/signup-wizard.js
   ========================================================================== */

.signup__head { padding: var(--sp-7) 0 var(--sp-4); }
.signup__h1 { font-size: var(--fs-2xl); margin-bottom: .3em; }
.signup__intro { color: var(--grey); max-width: 46em; font-size: var(--fs-md); margin: 0; }

.signup-layout {
	display: grid; grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
	padding-bottom: var(--sp-9);
}

/* Steps progress bar */
.signup__steps {
	display: flex; gap: .35rem; list-style: none; padding: 0; margin: 0 0 var(--sp-6);
}
.signup__steps li {
	flex: 1; height: 5px; border-radius: 3px; background: var(--bg-2);
	transition: background .2s ease;
}
.signup__steps li.is-active { background: var(--cta); }
.signup__steps li.is-done { background: var(--ink-2); }

/* Form panel */
.signup-form { background: var(--white); border: 1px solid var(--bg-2); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow-card); }
.signup-step { display: none; }
.signup-step.is-active { display: block; animation: signupFade .22s ease; }
@keyframes signupFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.signup-step__title { font-size: var(--fs-xl); margin-bottom: .25em; }
.signup-step__desc { color: var(--grey); margin-bottom: var(--sp-5); font-size: var(--fs-sm); }

.signup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }

/* Choice cards (product / plan / addon) */
.signup-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.signup-choice {
	position: relative; cursor: pointer;
	border: 1.5px solid var(--bg-2); border-radius: var(--radius);
	padding: var(--sp-5); background: var(--white);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.signup-choice:hover { border-color: var(--ink-2); transform: translateY(-2px); }
.signup-choice.is-selected { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(225,14,14,.12); }
.signup-choice input { position: absolute; opacity: 0; pointer-events: none; }
.signup-choice__name { font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--fs-md); margin-bottom: .3em; display: flex; align-items: baseline; gap: .5rem; }
.signup-choice__name .flag { background: var(--cta); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .16rem .5rem; border-radius: var(--radius-pill); }
.signup-choice__price { font-weight: var(--fw-bold); color: var(--cta); font-size: var(--fs-md); }
.signup-choice__desc { color: var(--slate); font-size: var(--fs-sm); margin: 0; }

/* Nav / controls */
.signup-form__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); align-items: center; }
.btn--back { background: transparent; color: var(--ink); border-color: var(--steel); }
.btn--back:hover { border-color: var(--ink); color: var(--ink); }
.signup-error { color: #b3261e; background: #fdecea; border: 1px solid #f5c6c2; border-radius: var(--radius-sm); padding: .7em 1em; margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.field-error { color: #b3261e; font-size: var(--fs-xs); margin-top: .25rem; display: block; }

/* Consent checkbox — undo the blanket .form-group input styling (clean.css) that
   would otherwise turn the native checkbox into a full-width bordered box. */
.signup-consent { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--slate); cursor: pointer; }
.signup-consent input[type="checkbox"] {
	width: auto; padding: 0; border: 0; border-radius: 0;
	background: none; flex: 0 0 auto; box-shadow: none;
}
.form-group__hint { display: block; font-size: var(--fs-xs); color: var(--grey); margin-top: .3rem; }

/* Radio group (PBX Public Indial etc.) — undo .form-group input on native radios */
.form-group--radio .signup-radios { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.form-group--radio .signup-radio {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: var(--fs-sm); color: var(--slate); cursor: pointer;
}
.form-group--radio .signup-radio input[type="radio"] {
	width: auto; padding: 0; border: 0; border-radius: 0; background: none;
}

/* phoneword chooser */
.phoneword-preview { margin-top: var(--sp-3); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.phoneword-hint { color: var(--grey); font-size: var(--fs-xs); margin-top: .35rem; }

/* Dry-run dump (dev only — never shown to a live account flow) */
.signup-dump {
	margin-top: var(--sp-6); border: 1px dashed var(--cta); border-radius: var(--radius);
	background: #fff5f5; padding: var(--sp-5);
}
.signup-dump h3 { color: var(--cta); font-size: var(--fs-md); margin-bottom: .5em; }
.signup-dump p, .signup-dump li { font-size: var(--fs-sm); color: var(--slate); }
.signup-dump textarea { width: 100%; min-height: 90px; font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-xs); margin-top: var(--sp-3); }

/* success / reset */
.signup-success { text-align: center; padding: var(--sp-7) var(--sp-5); }
.signup-success .tick { font-size: 2.6rem; color: var(--cta); }
.signup-success h2 { margin: .4em 0 .3em; }
.signup-success a { font-weight: var(--fw-semibold); }

/* Aside (talk-to-us card) */
.signup__aside .signup__card {
	background: var(--ink); color: #fff; border-radius: var(--radius); padding: var(--sp-6);
	box-shadow: var(--shadow-card); position: sticky; top: calc(var(--header-h) + var(--sp-4));
}
.signup__aside h2 { color: #fff; font-size: var(--fs-lg); margin-bottom: .5em; }
.signup__aside p { color: rgba(255,255,255,.82); font-size: var(--fs-sm); }
.signup__aside .btn { margin-top: var(--sp-2); }
.signup__note { margin-top: var(--sp-5); font-size: var(--fs-xs); color: rgba(255,255,255,.7) !important; }
.signup__note a { color: #fff; font-weight: var(--fw-semibold); text-decoration: underline; }

.signup__noscript { border: 1px solid var(--bg-2); border-radius: var(--radius); background: var(--bg); padding: var(--sp-6); margin-bottom: var(--sp-9); }

@media (max-width: 900px) {
	.signup-layout { grid-template-columns: 1fr; }
	.signup__aside .signup__card { position: static; }
}