/* ==========================================================================
   Signup wizard — self-contained for the Simple Telecom brand.
   Companion to /assets/js/signup-wizard.js. This sheet styles the whole
   wizard itself (it does NOT rely on the host theme's .btn/.form-group), so
   it can be dropped onto any Simple Telecom-family site unchanged.

   Palette: Simple Telecom blue (#1464a5 / navy #142536) + CTA orange (#f06a1a).
   ========================================================================== */

.signup__head { padding: 48px 0 16px; }
.signup__h1 { font-size: 34px; color: #142536; margin: 0 0 .3em; }
.signup__intro { color: #7c8b99; max-width: 46em; font-size: 18px; margin: 0; }

.signup-layout {
	display: grid; grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(24px, 4vw, 48px); align-items: start; padding-bottom: 64px;
}

/* Progress bar */
.signup__steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 24px; }
.signup__steps li { flex: 1; height: 5px; border-radius: 3px; background: #eef3f7; transition: background .2s; }
.signup__steps li.is-active { background: #f06a1a; }
.signup__steps li.is-done { background: #69a0c8; }

/* Card */
.signup-form {
	background: #fff; border: 1px solid #e0e7ee; border-radius: 16px;
	padding: 32px; box-shadow: 0 12px 36px rgba(20,38,53,.10);
}

.signup-step__title { font-size: 26px; color: #142536; margin: 0 0 .25em; }
.signup-step__desc { color: #7c8b99; margin: 0 0 24px; font-size: 15px; }

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

/* Choice cards (product / plan / addon) */
.signup-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.signup-choice {
	position: relative; cursor: pointer;
	border: 1.5px solid #e0e7ee; border-radius: 12px;
	padding: 20px; background: #fff;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.signup-choice:hover { border-color: #69a0c8; transform: translateY(-2px); }
.signup-choice.is-selected { border-color: #1464a5; box-shadow: 0 0 0 3px rgba(20,100,165,.14); }
.signup-choice input { position: absolute; opacity: 0; pointer-events: none; }
.signup-choice__name { font-weight: 600; color: #142536; font-size: 18px; margin-bottom: .3em; display: flex; align-items: baseline; gap: .5rem; }
.signup-choice__name .flag { background: #f06a1a; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .16rem .5rem; border-radius: 999px; }
.signup-choice__price { font-weight: 700; color: #f06a1a; font-size: 18px; }
.signup-choice__desc { color: #4b5a6a; font-size: 14px; margin: 0; }

/* Form fields (self-contained: host theme doesn't style these) */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; color: #142536; margin-bottom: .35em; font-size: 14px; }
.form-group input, .form-group textarea, .form-group select {
	width: 100%; padding: .75em .95em; border: 1px solid #dde5ec;
	border-radius: 8px; background: #fff; color: #1d2733;
	font: inherit; transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
	outline: none; border-color: #1464a5; box-shadow: 0 0 0 3px rgba(20,100,165,.14);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group__hint { display: block; font-size: 12px; color: #7c8b99; margin-top: .3rem; }

/* Consent + radio groups (native controls) */
.signup-consent { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-weight: 400; font-size: 14px; color: #4b5a6a; cursor: pointer; }
.signup-consent input[type="checkbox"] { width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.form-group--radio .signup-radios { display: flex; gap: 20px; flex-wrap: wrap; }
.form-group--radio .signup-radio { display: inline-flex; align-items: center; gap: .45rem; font-size: 14px; color: #4b5a6a; cursor: pointer; }
.form-group--radio .signup-radio input[type="radio"] { width: auto; padding: 0; border: 0; border-radius: 0; background: none; }

/* Buttons (self-contained variants the wizard uses) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .8rem 1.7rem; border-radius: 999px; font-weight: 600; font-size: 15px; line-height: 1.2; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; }
.btn--primary { background: #f06a1a; color: #fff; }
.btn--primary:hover { background: #d85a12; color: #fff; }
.btn--ghost { background: transparent; color: #142536; border-color: #7c8b99; }
.btn--ghost:hover { border-color: #142536; }
.btn--back { background: transparent; color: #142536; border-color: #7c8b99; }
.btn--back:hover { border-color: #142536; color: #142536; }

.signup-form__actions { display: flex; gap: 12px; margin-top: 24px; align-items: center; }
.signup-error { color: #b42318; background: #feeceb; border: 1px solid #f5c6c2; border-radius: 8px; padding: .7em 1em; margin: 0 0 16px; font-size: 14px; }
.field-error { color: #b42318; font-size: 12px; margin-top: .25rem; display: block; }

/* phoneword chooser */
.phoneword-preview { margin-top: 12px; font-size: 20px; font-weight: 700; color: #142536; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.phoneword-hint { color: #7c8b99; font-size: 12px; margin-top: .35rem; }

/* Dry-run dump (dev only) */
.signup-dump { margin-top: 24px; border: 1px dashed #f06a1a; border-radius: 12px; background: #fff6ef; padding: 20px; }
.signup-dump h3 { color: #d85a12; font-size: 18px; margin-bottom: .5em; }
.signup-dump p, .signup-dump li { font-size: 14px; color: #4b5a6a; }
.signup-dump textarea { width: 100%; min-height: 90px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin-top: 12px; }

/* success */
.signup-success { text-align: center; padding: 40px 20px; }
.signup-success .tick { font-size: 2.6rem; color: #f06a1a; }
.signup-success h2 { margin: .4em 0 .3em; color: #142536; }
.signup-success a { font-weight: 600; }

/* Aside */
.signup__aside .signup__card { background: #142536; color: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 12px 36px rgba(20,38,53,.18); position: sticky; top: 96px; }
.signup__aside h2 { color: #fff; font-size: 20px; margin-bottom: .5em; }
.signup__aside p { color: rgba(255,255,255,.82); font-size: 14px; }
.signup__aside .btn { margin-top: 8px; }
.signup__note { margin-top: 20px; font-size: 12px; color: rgba(255,255,255,.7) !important; }
.signup__note a { color: #fff; font-weight: 600; text-decoration: underline; }

.signup__noscript { border: 1px solid #e0e7ee; border-radius: 12px; background: #eef3f7; padding: 32px; margin-bottom: 64px; }

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