/*
 * "Getting started" form and its off-canvas panels (inc/domain-form.php).
 * Colours and fonts come from the Elementor kit's globals (CSS variables), with
 * the same values as fallbacks. Controls match the approved form prototype.
 */

.wms-gs,
.wms-gs-panel {
	--gs-orange: var(--e-global-color-primary, #FF6600);
	--gs-black: var(--e-global-color-secondary, #000000);
	--gs-text: var(--e-global-color-text, #555555);
	--gs-link: var(--e-global-color-accent, #C24E00);
	--gs-tint: var(--e-global-color-a1f0e01, #FFF1E6);
	--gs-charcoal: var(--e-global-color-d8c6182, #2A2A2A);
	--gs-muted: var(--e-global-color-abf451d, #6B6B6B);
	--gs-white: var(--e-global-color-df8cd44, #FFFFFF);
	--gs-smoke: var(--e-global-color-3405e02, #F8F8F8);
	--gs-section-line: var(--e-global-color-3b6329a, #D0D0D0);
	--gs-field-line: var(--e-global-color-ef451cd, #C8C8C8);
	--gs-divider: var(--e-global-color-53bb350, #E0E0E0);
	--gs-ok: var(--e-global-color-1d7a460, #1D7A46);
	--gs-ok-tint: var(--e-global-color-e8f5ec0, #E8F5EC);
	--gs-error: var(--e-global-color-be2cc0a, #AA0000);
	--gs-display: var(--e-global-typography-accent-font-family, "Manrope"), system-ui, sans-serif;
	--gs-body: var(--e-global-typography-text-font-family, "Source Sans 3"), system-ui, sans-serif;
	--gs-chip-radius: 14px;
	--gs-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
	font-family: var(--gs-body);
	color: var(--gs-black);
}
.wms-gs *,
.wms-gs-panel * {
	box-sizing: border-box;
}
.wms-gs [hidden],
.wms-gs-panel [hidden],
.wms-gs-scrim[hidden] {
	display: none !important;
}

/* ---------- Form card (smoke panel with the darker border) ---------- */
.wms-gs {
	background: var(--gs-smoke);
	border: 1px solid var(--gs-section-line);
	border-radius: 24px;
	padding: 32px;
}
.wms-gs__form {
	display: grid;
	gap: 16px;
	margin: 0;
}

/* Step indicator */
.wms-gs__steps {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font: 700 12px/1 var(--gs-display);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gs-muted);
}
/* The steps span the full width of the form: the lines between them stretch. */
.wms-gs__steps li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	white-space: nowrap;
}
.wms-gs__steps li + li {
	flex: 1;
	margin-left: 12px;
}
.wms-gs__steps li + li::before {
	content: "";
	flex: 1;
	min-width: 16px;
	height: 1.5px;
	background: var(--gs-field-line);
}
.wms-gs__steps li.is-done + li::before,
.wms-gs__steps li.is-on + li::before { background: var(--gs-field-line); }
.wms-gs__steps li.is-done + li.is-done::before,
.wms-gs__steps li.is-done + li.is-on::before { background: var(--gs-orange); }
.wms-gs__steps span {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--gs-field-line);
	background: var(--gs-white);
	font-size: 11px;
}
.wms-gs__steps .is-on { color: var(--gs-black); }
.wms-gs__steps .is-on span { background: var(--gs-black); border-color: var(--gs-black); color: var(--gs-white); }
.wms-gs__steps .is-done span { background: var(--gs-orange); border-color: var(--gs-orange); color: var(--gs-white); }

.wms-gs__step {
	display: grid;
	gap: 16px;
	animation: wms-gs-in .25s ease;
}

/* Domain search: the button sits inside the rounded field */
.wms-gs__search {
	display: flex;
	gap: 8px;
	padding: 6px;
	background: var(--gs-white);
	border: 1.5px solid var(--gs-field-line);
	border-radius: 999px;
	box-shadow: var(--gs-shadow);
}
.wms-gs__search:focus-within {
	border-color: var(--gs-orange);
	box-shadow: 0 0 0 3px var(--gs-tint), var(--gs-shadow);
}
.wms-gs #form-field-wfwc_domain_search_input {
	flex: 1;
	min-width: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	padding: 12px 18px;
	font: 500 18px/1.3 var(--gs-body);
	color: var(--gs-black);
}
.wms-gs #form-field-wfwc_domain_search_input:focus {
	box-shadow: none;
	outline: none;
}

/* Buttons: kit pill style (orange, black text; black on hover) */
.wms-gs .wms-gs__btn, .wms-gs-panel .wms-gs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--gs-orange);
	color: var(--gs-white);
	font: 700 16px/1.2 var(--gs-display);
	padding: 13px 24px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.wms-gs .wms-gs__btn:hover, .wms-gs-panel .wms-gs__btn:hover,
.wms-gs .wms-gs__btn:focus-visible, .wms-gs-panel .wms-gs__btn:focus-visible {
	background: var(--gs-black);
	color: var(--gs-white);
}
.wms-gs .wms-gs__btn:focus:not(:focus-visible):not(:hover),
.wms-gs-panel .wms-gs__btn:focus:not(:focus-visible):not(:hover) {
	/* The kit turns a clicked (focused) button black; keep it orange until hovered. */
	background: var(--gs-orange);
	color: var(--gs-white);
}
.wms-gs-panel .wms-gs__btn--block { width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Choice groups */
.wms-gs__group {
	display: grid;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.wms-gs__group legend {
	padding: 0;
	margin: 0 0 8px;
	font: 700 13px/1.3 var(--gs-display);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gs-muted);
}
.wms-gs__chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.wms-gs .wms-gs__chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 12px 14px;
	background: var(--gs-white);
	border: 1.5px solid var(--gs-field-line);
	border-radius: var(--gs-chip-radius);
	font: 600 15px/1.25 var(--gs-body);
	color: var(--gs-black);
	cursor: pointer;
}
.wms-gs__chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.wms-gs__dot {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 2px solid var(--gs-field-line);
	border-radius: 50%;
}
.wms-gs__chip:has(input:checked) {
	border-color: var(--gs-charcoal);
	box-shadow: inset 0 0 0 1px var(--gs-charcoal);
}
.wms-gs__chip:has(input:checked) .wms-gs__dot {
	border-color: var(--gs-orange);
	background: var(--gs-orange);
}
.wms-gs__chip:has(input:checked) .wms-gs__dot::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gs-white);
}
.wms-gs__chip:has(input:focus-visible),
.wms-gs__toggle:has(input:focus-visible) {
	outline: 3px solid var(--gs-orange);
	outline-offset: 2px;
}

.wms-gs__help {
	margin: 2px 4px 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--gs-text);
}
.wms-gs__tiny {
	margin: 0 4px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--gs-muted);
}
.wms-gs__reveal {
	display: grid;
	gap: 6px;
	animation: wms-gs-in .25s ease;
}
.wms-gs__reveal input[type="text"] { width: 100%; }
.wms-gs__error {
	margin: 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--gs-error);
}
.wms-gs__callout {
	display: block;
	padding: 12px 16px;
	background: var(--gs-white);
	border: 1px solid var(--gs-divider);
	border-left: 3px solid var(--gs-orange);
	border-radius: var(--gs-chip-radius);
	font-size: 15px;
	line-height: 1.45;
	color: var(--gs-charcoal);
}
.wms-gs__callout strong { color: var(--gs-black); }

/* Maintain & Protect switch */
.wms-gs .wms-gs__toggle {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	background: var(--gs-white);
	border: 1.5px solid var(--gs-field-line);
	border-radius: var(--gs-chip-radius);
	cursor: pointer;
}
.wms-gs__toggle input { position: absolute; opacity: 0; }
.wms-gs__toggle:has(input:checked) { border-color: var(--gs-charcoal); box-shadow: inset 0 0 0 1px var(--gs-charcoal); }
.wms-gs__switch {
	position: relative;
	flex: none;
	width: 40px;
	height: 24px;
	margin-top: 2px;
	border-radius: 999px;
	background: var(--gs-field-line);
	transition: background .15s;
}
.wms-gs__switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gs-white);
	transition: transform .15s;
}
.wms-gs__toggle:has(input:checked) .wms-gs__switch { background: var(--gs-orange); }
.wms-gs__toggle:has(input:checked) .wms-gs__switch::after { transform: translateX(16px); }
.wms-gs__toggle strong { display: block; font: 700 15px/1.4 var(--gs-display); color: var(--gs-black); }
.wms-gs .wms-gs__toggle-text { display: block; font: 400 15px/1.45 var(--gs-body); letter-spacing: 0; text-transform: none; color: var(--gs-text); }

.wms-gs__actions { display: flex; justify-content: flex-end; }

/* A finished step, collapsed to one line */
.wms-gs__done {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px 10px 18px;
	background: var(--gs-white);
	border: 1px solid var(--gs-divider);
	border-radius: 999px;
	font-size: 15px;
	color: var(--gs-charcoal);
	animation: wms-gs-in .25s ease;
}
.wms-gs__done span { min-width: 0; overflow-wrap: anywhere; }
.wms-gs__done b { font-weight: 600; color: var(--gs-black); }
.wms-gs .wms-gs__change {
	padding: 4px 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	font: 700 14px var(--gs-display);
	color: var(--gs-link);
	cursor: pointer;
}
.wms-gs .wms-gs__change:hover, .wms-gs .wms-gs__change:focus { color: var(--gs-black); background: none; }

@keyframes wms-gs-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Off-canvas panels ---------- */
html.wms-gs-locked { overflow: hidden; }
.wms-gs-scrim {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(0, 0, 0, .42);
	opacity: 0;
	transition: opacity .25s;
}
.wms-gs-scrim.is-open { opacity: 1; }
.wms-gs-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	width: min(480px, 100vw);
	background: var(--gs-white);
	box-shadow: var(--gs-shadow);
	overflow-x: hidden;
	visibility: hidden;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s;
}
.wms-gs-panel.is-open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.wms-gs-panel--left { left: 0; transform: translateX(-102%); }
.wms-gs-panel--right { right: 0; transform: translateX(102%); }
.admin-bar .wms-gs-panel { top: 32px; }

.wms-gs-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 24px 24px 16px;
	border-bottom: 1px solid var(--gs-divider);
}
.wms-gs-panel__title {
	min-width: 0;
	overflow-wrap: anywhere;
	margin: 0;
	font: 800 22px/1.2 var(--gs-display);
	color: var(--gs-black);
}
.wms-gs-panel .wms-gs-panel__close {
	padding: 4px 0;
	border: 0;
	background: none;
	font: 600 15px var(--gs-body);
	color: var(--gs-muted);
	cursor: pointer;
}
.wms-gs-panel .wms-gs-panel__close:hover, .wms-gs-panel .wms-gs-panel__close:focus { color: var(--gs-black); background: none; }
.wms-gs-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 24px 24px;
}
.wms-gs-panel__foot {
	padding: 16px 24px 24px;
	border-top: 1px solid var(--gs-divider);
}

/* Cart lines (placeholder) */
.wms-gs-line { padding: 12px 0; border-bottom: 1px solid var(--gs-divider); }
.wms-gs-line b { display: block; font: 700 16px/1.3 var(--gs-display); color: var(--gs-black); }
.wms-gs-line small { display: block; font-size: 15px; color: var(--gs-text); overflow-wrap: anywhere; }
.wms-gs-panel .wms-gs__tiny { margin: 12px 0 0; }
.wms-gs-placeholder {
	margin: 0 24px 24px;
	padding: 14px 16px;
	border: 1.5px dashed var(--gs-orange);
	border-radius: var(--gs-chip-radius);
	background: var(--gs-white);
	font-size: 15px;
	line-height: 1.45;
	color: var(--gs-charcoal);
}
.wms-gs-placeholder strong { display: block; font: 700 14px var(--gs-display); text-transform: uppercase; letter-spacing: .06em; color: var(--gs-link); }

/* The plugin's results, restyled to the design system inside the panel */
.wms-gs-panel #wfwc_domain_search_results { margin-top: 0; font-family: var(--gs-body); }
.wms-gs-panel .wfwc-bundled-hosting-section { display: none; } /* hosting is chosen in step 2 */
.wms-gs-panel .wfwc-loading,
.wms-gs-panel .wfwc-error {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--gs-chip-radius);
	font-size: 15px;
	text-align: left;
}
.wms-gs-panel .wfwc-loading { background: var(--gs-smoke); border: 1px solid var(--gs-divider); color: var(--gs-charcoal); }
.wms-gs-panel .wfwc-error { background: #FFF5F5; border: 1px solid var(--gs-error); color: var(--gs-error); }
.wms-gs-panel .wfwc-results__main {
	margin: 0 0 16px;
	padding: 16px;
	text-align: left;
	background: var(--gs-white);
	border: 1.5px solid var(--gs-charcoal);
	border-radius: var(--gs-chip-radius);
	box-shadow: inset 0 0 0 1px var(--gs-charcoal);
}
.wms-gs-panel .wfwc-results__main.unavailable { border-color: var(--gs-divider); box-shadow: none; background: var(--gs-smoke); }
.wms-gs-panel .wfwc-results__main-domain {
	margin: 0 0 4px;
	font: 700 20px/1.25 var(--gs-display);
	color: var(--gs-black);
	overflow-wrap: anywhere;
}
.wms-gs-panel .wfwc-results__main-status { margin: 0; font-size: 15px; color: var(--gs-text); }
.wms-gs-panel .wfwc-results__main-price { margin: 8px 0 0; font: 800 20px var(--gs-display); color: var(--gs-black); }
.wms-gs-panel .wfwc-results__main-price .term { font: 400 14px var(--gs-body); color: var(--gs-muted); }
.wms-gs-panel .wfwc-badge { margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; font: 700 12px var(--gs-display); letter-spacing: .06em; }
.wms-gs-panel .wfwc-badge-available { background: var(--gs-ok-tint); color: var(--gs-ok); }
.wms-gs-panel .wfwc-badge-taken { background: #FFF5F5; color: var(--gs-error); }
.wms-gs-panel .wfwc-badge-transferable,
.wms-gs-panel .wfwc-badge-own { background: var(--gs-smoke); color: var(--gs-charcoal); border: 1px solid var(--gs-divider); }
.wms-gs-panel .wfwc-results__list-heading { margin: 8px 0 8px; font: 700 13px var(--gs-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gs-muted); }
.wms-gs-panel .wfwc-results__list { gap: 8px; }
.wms-gs-panel .wfwc-results__list-item {
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--gs-field-line);
	border-radius: var(--gs-chip-radius);
}
.wms-gs-panel .wfwc-results__list-item:hover { border-color: var(--gs-charcoal); }
.wms-gs-panel .wfwc-results__list-item-domain { font: 600 16px var(--gs-body); color: var(--gs-black); overflow-wrap: anywhere; }
.wms-gs-panel .wfwc-results__list-item-price { margin-right: 12px; font: 700 16px var(--gs-display); color: var(--gs-black); }
.wms-gs-panel .wfwc-results__list-item .wfwc-badge { display: none; }
.wms-gs-panel .wfwc-btn-accent {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--gs-black);
	color: var(--gs-white) !important;
	font: 700 14px var(--gs-display);
	white-space: nowrap;
}
.wms-gs-panel .wfwc-btn-accent:hover { background: var(--gs-orange); color: var(--gs-white) !important; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	.wms-gs { padding: 16px; border-radius: 20px; }
	.wms-gs__chips { grid-template-columns: 1fr; }
	.wms-gs__search { flex-direction: column; border-radius: 24px; }
	.wms-gs__search .wms-gs__btn { width: 100%; }
	.wms-gs__actions .wms-gs__btn { width: 100%; }
	.wms-gs-panel__head,
	.wms-gs-panel__body,
	.wms-gs-panel__foot { padding-left: 16px; padding-right: 16px; }
	.wms-gs-placeholder { margin: 0 16px 16px; }
	.wms-gs__done { border-radius: 20px; }
	.wms-gs-panel__title { font-size: 20px; }
	.wms-gs__steps { font-size: 11px; letter-spacing: .06em; }
	.wms-gs__steps li { gap: 8px; }
	.wms-gs__steps li + li { margin-left: 8px; }
	.wms-gs-panel .wfwc-results__list-item { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.wms-gs *, .wms-gs-panel, .wms-gs-scrim { animation: none !important; transition: none !important; }
}