/* ==========================================================================
   Branches Onboarding — visual design
   Matched to the smartbranch.io marketing site (wp-plugin/smartbranch-marketing).

   Scope rules that matter:
   - Every selector is namespaced under .branches-wrap or a #branches-* id, so
     nothing leaks into the surrounding theme or Elementor page.
   - Tokens are declared on .branches-wrap, NOT :root, for the same reason.
   - No markup was changed to achieve any of this. The consent block in
     templates/onboarding-form.php is styled purely from the outside, because
     its wording must stay byte-identical to consent_text().
   ========================================================================== */

.branches-wrap {
	--sb-ink:        #0B1A15;
	--sb-ink-soft:   #43574E;
	--sb-ink-faint:  #7A8C84;
	--sb-cream:      #FBF9F4;
	--sb-cream-2:    #F2EEE5;
	--sb-emerald:    #0F7B57;
	--sb-emerald-lift: #14A374;
	--sb-emerald-wash: #E8F3EE;
	--sb-amber:      #E9A23B;
	--sb-danger:     #C0392B;
	--sb-danger-wash:#FDECEA;
	--sb-line:       rgba(11, 26, 21, .12);
	--sb-line-soft:  rgba(11, 26, 21, .07);
	--sb-radius:     16px;

	max-width: 580px;
	margin: clamp(20px, 5vw, 48px) auto;
	padding: clamp(24px, 5vw, 40px);
	box-sizing: border-box;

	background: #fff;
	border: 1px solid var(--sb-line-soft);
	border-radius: 24px;
	box-shadow: 0 2px 4px rgba(11,26,21,.04), 0 18px 48px rgba(11,26,21,.09);

	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, "Noto Sans Hebrew", sans-serif;
	color: var(--sb-ink);
	line-height: 1.6;
	font-size: 16px;
}

.branches-wrap *,
.branches-wrap *::before,
.branches-wrap *::after { box-sizing: border-box; }

/* The SmartBranch mark, drawn from CSS so the template needs no new markup. */
.branches-wrap::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='11' fill='%230B1A15'/%3E%3Cpath d='M14 28V17c0-2.2 1.8-4 4-4h8' stroke='%2314A374' stroke-width='2.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M14 22h5c2.2 0 4-1.8 4-4v-1' stroke='%2314A374' stroke-width='2.1' stroke-linecap='round' fill='none' opacity='.55'/%3E%3Ccircle cx='14' cy='29' r='3.1' fill='%23FBF9F4'/%3E%3Ccircle cx='27' cy='13' r='2.6' fill='%23E9A23B'/%3E%3Ccircle cx='23' cy='16' r='2.2' fill='%2314A374'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* CRITICAL: the JS toggles the `hidden` attribute to switch steps. Any rule
   that sets `display` on a step would defeat it, so pin this down explicitly
   rather than relying on the UA default. */
.branches-wrap [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.branches-heading {
	font-size: clamp(1.4rem, 3.4vw, 1.7rem);
	font-weight: 680;
	letter-spacing: -.024em;
	line-height: 1.2;
	margin: 0 0 10px;
	color: var(--sb-ink);
	text-wrap: balance;
}

.branches-subheading {
	color: var(--sb-ink-soft);
	margin: 0 0 28px;
	font-size: .95rem;
	text-wrap: pretty;
}

.branches-req { color: var(--sb-danger); }

.branches-brand-name { color: var(--sb-ink); font-weight: 660; }

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

.branches-field { margin-bottom: 18px; }

.branches-field label {
	display: block;
	font-weight: 620;
	font-size: .85rem;
	letter-spacing: -.005em;
	margin-bottom: 7px;
	color: var(--sb-ink);
}

.branches-field input {
	width: 100%;
	padding: 12px 15px;
	border: 1.5px solid var(--sb-line);
	border-radius: 11px;
	font: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--sb-ink);
	transition: border-color .16s, box-shadow .16s;
}

.branches-field input::placeholder { color: var(--sb-ink-faint); }

.branches-field input:hover { border-color: rgba(11, 26, 21, .22); }

.branches-field input:focus {
	outline: none;
	border-color: var(--sb-emerald-lift);
	box-shadow: 0 0 0 3.5px rgba(20, 163, 116, .16);
}

/* --------------------------------------------------------------------------
   Consent block (step 1)

   Styled from the outside only. Do not restructure the markup inside
   .branches-consent — its wording is mirrored by consent_text() and the
   server stores that copy as the consent record.
   -------------------------------------------------------------------------- */

.branches-consent {
	margin: 24px 0;
	padding: 18px 20px;
	background: var(--sb-cream);
	border: 1px solid var(--sb-line-soft);
	border-radius: var(--sb-radius);
	transition: border-color .18s, background .18s;
}

/* Slightly larger than typical fine print on purpose: a screenshot of this
   block is the evidence deliverable for ManyChat review question 3.1, and
   consent shown in unreadable type is weak consent. */
.branches-consent-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--sb-ink-soft);
	cursor: pointer;
}

.branches-consent-row strong { color: var(--sb-ink); font-weight: 640; }

.branches-consent-row + .branches-consent-row {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid var(--sb-line-soft);
}

/* Native checkbox, deliberately. A consent control should read unambiguously
   as a real checkbox to assistive tech and to anyone auditing the flow, so
   this recolours the native widget rather than replacing it with a div. */
.branches-consent-row input[type="checkbox"] {
	flex-shrink: 0;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	accent-color: var(--sb-emerald);
	cursor: pointer;
}

.branches-consent-row input[type="checkbox"]:focus-visible {
	outline: 2.5px solid var(--sb-emerald-lift);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Ticked rows firm up, so the required one reads as satisfied at a glance. */
.branches-consent-row:has(input[type="checkbox"]:checked) { color: var(--sb-ink); }

.branches-consent-note {
	margin: 16px 0 0;
	font-size: .8rem;
	color: var(--sb-ink-faint);
}

.branches-consent-note a {
	color: var(--sb-emerald);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.branches-consent-note a:hover { color: var(--sb-emerald-lift); }

/* Applied by the JS when the required box is unticked on submit. */
.branches-consent.branches-consent-invalid {
	border-color: rgba(192, 57, 43, .5);
	background: var(--sb-danger-wash);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.branches-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 24px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 1rem;
	font-weight: 620;
	letter-spacing: -.005em;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background .18s, transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}

.branches-btn:hover  { transform: translateY(-1.5px); }
.branches-btn:active { transform: translateY(0); }

.branches-btn:focus-visible {
	outline: 2.5px solid var(--sb-emerald-lift);
	outline-offset: 3px;
}

.branches-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}

/* Button colours are pinned per state and namespaced under .branches-wrap.
   This is not redundancy — Hello Elementor's reset.css carries
   `[type="submit"]:focus, button:hover { background-color: #CC3366 }` at
   specificity (0,2,0), which beats a bare `.branches-btn-primary` (0,1,0) and
   turned the primary action magenta the moment it took focus. Prefixing with
   .branches-wrap lifts these to (0,3,0) so the theme can never win. Keep every
   state listed; dropping one lets the pink back in on that state alone. */

.branches-wrap .branches-btn-primary,
.branches-wrap .branches-btn-primary:link,
.branches-wrap .branches-btn-primary:visited {
	background: var(--sb-emerald);
	color: #fff;
	box-shadow: 0 1px 2px rgba(11,26,21,.06);
}

.branches-wrap .branches-btn-primary:hover,
.branches-wrap .branches-btn-primary:focus,
.branches-wrap .branches-btn-primary:focus-visible,
.branches-wrap .branches-btn-primary:active {
	background: var(--sb-emerald-lift);
	color: #fff;
	box-shadow: 0 2px 4px rgba(11,26,21,.05), 0 10px 26px rgba(11,26,21,.1);
}

/* Facebook keeps Facebook's blue — this button is a brand affordance and
   users need to recognise it as the Facebook login. */
.branches-wrap .branches-btn-facebook,
.branches-wrap .branches-btn-facebook:link,
.branches-wrap .branches-btn-facebook:visited {
	background: #1877F2;
	color: #fff;
	margin-top: 8px;
}

.branches-wrap .branches-btn-facebook:hover,
.branches-wrap .branches-btn-facebook:focus,
.branches-wrap .branches-btn-facebook:focus-visible,
.branches-wrap .branches-btn-facebook:active {
	background: #166FE5;
	color: #fff;
}

.branches-wrap .branches-btn-facebook:focus-visible { outline-color: #1877F2; }

.branches-fb-icon { width: 20px; height: 20px; flex-shrink: 0; }

.branches-wrap .branches-btn-secondary,
.branches-wrap .branches-btn-secondary:link,
.branches-wrap .branches-btn-secondary:visited {
	background: #fff;
	color: var(--sb-ink);
	border-color: var(--sb-line);
}

.branches-wrap .branches-btn-secondary:hover,
.branches-wrap .branches-btn-secondary:focus,
.branches-wrap .branches-btn-secondary:focus-visible,
.branches-wrap .branches-btn-secondary:active {
	background: var(--sb-cream);
	color: var(--sb-ink);
}

/* --------------------------------------------------------------------------
   Errors & notices
   -------------------------------------------------------------------------- */

.branches-error {
	color: #8E2A1E;
	background: var(--sb-danger-wash);
	border: 1px solid rgba(192, 57, 43, .3);
	border-left: 3.5px solid var(--sb-danger);
	border-radius: 4px 12px 12px 4px;
	padding: 12px 16px;
	margin-bottom: 18px;
	font-size: .9rem;
}

.branches-notice {
	color: var(--sb-ink-soft);
	background: var(--sb-cream);
	border: 1px solid var(--sb-line-soft);
	border-radius: 12px;
	padding: 15px 17px;
	font-size: .9rem;
}

.branches-invalid {
	border-color: var(--sb-danger) !important;
	box-shadow: 0 0 0 3.5px rgba(192, 57, 43, .14) !important;
}

/* --------------------------------------------------------------------------
   Page matching (step 3) — rows are built by the JS
   -------------------------------------------------------------------------- */

.branches-match-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	font-size: .72rem;
	font-weight: 640;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sb-ink-faint);
	border-bottom: 1px solid var(--sb-line);
	padding-bottom: 10px;
	margin-bottom: 6px;
}

.branches-match-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--sb-line-soft);
}

.branches-match-row:last-child { border-bottom: 0; }

.branches-match-branch strong {
	font-size: .95rem;
	font-weight: 640;
	color: var(--sb-ink);
}

.branches-match-select select {
	width: 100%;
	padding: 10px 13px;
	border: 1.5px solid var(--sb-line);
	border-radius: 11px;
	font: inherit;
	font-size: .92rem;
	background: #fff;
	color: var(--sb-ink);
	cursor: pointer;
	transition: border-color .16s, box-shadow .16s;
}

.branches-match-select select:hover { border-color: rgba(11, 26, 21, .22); }

.branches-match-select select:focus {
	outline: none;
	border-color: var(--sb-emerald-lift);
	box-shadow: 0 0 0 3.5px rgba(20, 163, 116, .16);
}

.branches-actions { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Loading
   -------------------------------------------------------------------------- */

#branches-step-loading {
	text-align: center;
	padding: 52px 0 40px;
	color: var(--sb-ink-soft);
	font-size: .95rem;
}

.branches-spinner {
	width: 42px;
	height: 42px;
	border: 3px solid var(--sb-cream-2);
	border-top-color: var(--sb-emerald);
	border-radius: 50%;
	animation: branches-spin .75s linear infinite;
	margin: 0 auto 20px;
}

@keyframes branches-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.branches-wrap *,
	.branches-wrap *::before,
	.branches-wrap *::after {
		transition-duration: .001ms !important;
	}
	/* The spinner keeps turning — it is a progress signal, and freezing it
	   would read as a hung request. Slowed instead. */
	.branches-spinner { animation-duration: 2.4s; }
	.branches-btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
	.branches-wrap {
		margin: 0 auto;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		box-shadow: none;
		min-height: 100vh;
	}
}

@media (max-width: 480px) {
	.branches-match-header,
	.branches-match-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.branches-match-header span:first-child { display: none; }
	.branches-match-row { padding: 12px 0; }
}