/* ============================================================
   SaasTrac Connect — public form styles (multi-step wizard)
   Brand: navy #16216B · green #2EAE4E · gold #F4B400
   Loaded ONLY on pages that contain the [saastrac_form] shortcode.
   Scoped under .sc-form to avoid colliding with theme styles.
   ============================================================ */

.sc-form {
	--sc-navy:   #16216B;
	--sc-navy-2: #1d2a85;
	--sc-green:  #2EAE4E;
	--sc-gold:   #F4B400;
	--sc-ink:    #1f2430;
	--sc-muted:  #6b7280;
	--sc-line:   #e2e5f0;
	--sc-card:   #ffffff;
	--sc-canvas: #f7f8fc;
	--sc-radius: 12px;

	max-width: 760px;
	margin: 0 auto;
	color: var(--sc-ink);
	font-size: 15px;
	line-height: 1.55;
	background: var(--sc-card);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius);
	padding: 28px 30px 24px;
	box-shadow: 0 6px 24px rgba(22,33,107,.06);
	box-sizing: border-box;
}
.sc-form *, .sc-form *::before, .sc-form *::after { box-sizing: border-box; }

/* ---------- Progress ---------- */
.sc-progress {
	display: flex; flex-wrap: wrap; gap: 6px;
	list-style: none; margin: 0 0 24px; padding: 0;
	counter-reset: step;
}
.sc-progress__item {
	display: flex; align-items: center; gap: 8px;
	flex: 1 1 auto; min-width: 120px;
	font-size: 13px; font-weight: 600; color: var(--sc-muted);
	padding: 8px 10px; border-radius: 8px; background: var(--sc-canvas);
}
.sc-progress__item span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: #dfe3f2; color: var(--sc-navy); font-size: 12px; font-weight: 700;
}
.sc-progress__item.is-active { color: var(--sc-navy); background: #eef1fb; }
.sc-progress__item.is-active span { background: var(--sc-navy); color: #fff; }
.sc-progress__item.is-done span { background: var(--sc-green); color: #fff; }

/* ---------- Steps ---------- */
.sc-step__title { font-size: 19px; color: var(--sc-navy); margin: 0 0 4px; font-weight: 700; }
.sc-step__sub { color: var(--sc-muted); margin: 0 0 18px; font-size: 14px; }

/* ---------- Fields ---------- */
.sc-f { margin-bottom: 16px; }
.sc-f > label {
	display: block; font-weight: 600; color: var(--sc-ink);
	margin-bottom: 6px; font-size: 14px;
}
.sc-req { color: #d92d20; }
.sc-f input[type="text"],
.sc-f input[type="email"],
.sc-f input[type="url"],
.sc-f input[type="tel"],
.sc-f input[type="number"],
.sc-f select,
.sc-f textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--sc-line);
	border-radius: 9px;
	background: #fff;
	color: var(--sc-ink);
	font-size: 15px;
	font-family: inherit;
	transition: border-color .15s, box-shadow .15s;
}
.sc-f textarea { resize: vertical; min-height: 96px; }
.sc-f input:focus, .sc-f select:focus, .sc-f textarea:focus {
	outline: none; border-color: var(--sc-navy-2);
	box-shadow: 0 0 0 3px rgba(29,42,133,.12);
}
.sc-f input.sc-invalid, .sc-f select.sc-invalid, .sc-f textarea.sc-invalid {
	border-color: #f04438;
	box-shadow: 0 0 3px 3px rgb(255 17 0 / 87%);
}
.sc-f__hint { color: var(--sc-muted); font-size: 12.5px; margin-top: 6px; }
.sc-f__error { color: #d92d20; font-size: 12.5px; margin-top: 6px; display: none; }
.sc-f.has-error .sc-f__error { display: block; }

/* ---------- Checkbox groups ---------- */
.sc-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
@media (max-width: 540px) { .sc-checks { grid-template-columns: 1fr; } }
.sc-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: 14px; cursor: pointer; }
.sc-check input { margin-top: 3px; }
.sc-consent { align-items: flex-start; background: var(--sc-canvas); padding: 12px 14px; border-radius: 9px; border: 1px solid var(--sc-line); font-size: 13px; color: var(--sc-ink); }
.sc-consent span { line-height: 1.5; }

/* ---------- Upload ---------- */
.sc-upload__status { margin-top: 8px; font-size: 13px; }
.sc-upload__status .ok { color: var(--sc-green); font-weight: 600; }
.sc-upload__status .err { color: #d92d20; font-weight: 600; }
.sc-upload__status .busy { color: var(--sc-muted); }
.sc-upload__thumb { display: inline-block; max-height: 46px; border-radius: 6px; margin-right: 8px; vertical-align: middle; border: 1px solid var(--sc-line); }
.sc-upload__list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.sc-upload__chip { background: var(--sc-canvas); border: 1px solid var(--sc-line); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--sc-ink); }

/* ---------- Review ---------- */
.sc-review { margin-bottom: 16px; }
.sc-review__group { border: 1px solid var(--sc-line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: var(--sc-canvas); }
.sc-review__group h4 { margin: 0 0 10px; font-size: 14px; color: var(--sc-navy); }
.sc-review__row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 5px 0; font-size: 14px; }
.sc-review__row dt { color: var(--sc-muted); font-weight: 600; }
.sc-review__row dd { margin: 0; word-break: break-word; }
@media (max-width: 540px) { .sc-review__row { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Buttons / nav ---------- */
.sc-nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.sc-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 22px; border-radius: 9px; border: 1px solid transparent;
	font-size: 15px; font-weight: 600; cursor: pointer; line-height: 1.2;
	font-family: inherit; text-decoration: none;
}
.sc-btn:disabled { opacity: .55; cursor: not-allowed; }
.sc-btn--primary { background: var(--sc-gold); color: #3a2c00; }
.sc-btn--primary:hover:not(:disabled) { filter: brightness(.97); }
.sc-btn--navy { background: var(--sc-navy); color: #fff; }
.sc-btn--navy:hover:not(:disabled) { background: var(--sc-navy-2); }
.sc-btn--ghost { background: #fff; color: var(--sc-navy); border-color: var(--sc-line); }
.sc-btn--ghost:hover:not(:disabled) { background: var(--sc-canvas); }
.sc-next { margin-left: auto; }

/* ---------- Messages ---------- */
.sc-form__msg { margin-top: 14px; font-size: 14px; padding: 0; }
.sc-form__msg.show { padding: 12px 16px; border-radius: 9px; border: 1px solid; }
.sc-form__msg.is-error   { background: #fef3f2; color: #b42318; border-color: #fda29b; }
.sc-form__msg.is-success { background: #ecfdf3; color: #027a48; border-color: #abefc6; }
.sc-form__msg.is-review  { background: #fffaeb; color: #b54708; border-color: #fec84b; }
.sc-review-optin { margin-top: 12px; }

/* ---------- Done state ---------- */
.sc-done { text-align: center; padding: 30px 10px; }
.sc-done__check {
	width: 56px; height: 56px; border-radius: 50%; background: var(--sc-green);
	color: #fff; font-size: 30px; display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 16px;
}
.sc-done h3 { color: var(--sc-navy); margin: 0 0 8px; }
.sc-done p { color: var(--sc-muted); margin: 0; }

/* ---------- Spinner ---------- */
.sc-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: sc-rot .7s linear infinite; }
.sc-btn--navy .sc-spin, .sc-btn--primary .sc-spin { border: 2px solid rgba(58,44,0,.3); border-top-color: #3a2c00; }
@keyframes sc-rot { to { transform: rotate(360deg); } }


/* ---- v0.6.3: two fields per row (plugin-owned layout) ---- */
.sc-form .sc-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; align-items: start; }
.sc-form .sc-step > * { min-width: 0; }
.sc-form .sc-step > .sc-step__title,
.sc-form .sc-step > .sc-step__sub,
.sc-form .sc-step > :not(.sc-f) { grid-column: 1 / -1; }
.sc-form .sc-f--full { grid-column: 1 / -1; }
@media (max-width: 700px) {
	.sc-form .sc-step { grid-template-columns: 1fr; }
}

/* SEO group card */
.sc-seo .sc-f { margin-bottom: 12px; }
.sc-seo .sc-f:last-child { margin-bottom: 0; }

/* Duplicate-detection panel */
.sc-dup a { text-decoration: none; }

/* v0.7.0 backlink verify */
.sc-backlink-verify { background: #16216B; color: #fff; font-weight: 700; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; }
.sc-backlink-verify:hover { background: #232f8f; }
.sc-backlink-verify[disabled] { opacity: .6; cursor: wait; }

/* v0.8.8 category picker */
.sc-cat { position: relative; }
.sc-cat__list { position: absolute; z-index: 40; left: 0; right: 0; background: #fff; border: 1px solid #cfd4e4; border-radius: 10px; box-shadow: 0 12px 30px rgba(22,33,107,.14); max-height: 280px; overflow: auto; margin-top: 4px; }
.sc-cat__item { padding: 9px 14px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sc-cat__item:hover, .sc-cat__item.is-active { background: #f2f4fd; }
.sc-cat__item strong { color: #16216B; }
.sc-cat__count { font-size: 11.5px; color: #98a2b3; background: #f3f4f8; border-radius: 999px; padding: 1px 8px; }
.sc-cat__empty { padding: 12px 14px; font-size: 13px; color: #667085; }
.sc-cat__sugg { margin-top: 6px; font-size: 12.5px; color: #667085; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-cat__chip { background: #eef1fd; color: #16216B; border: 1px solid #d9e0fb; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sc-cat__chip:hover { background: #16216B; color: #fff; }