/*
 * siseo audit form.
 *
 * Everything is scoped under .siseo-audit. Themes and page builders style
 * inputs and buttons aggressively, so the field and button rules reset the
 * properties they most often force (height, margins, shadows, letter case).
 */

.siseo-audit {
	--siseo-ink: #16181d;
	--siseo-ink-soft: #5b606b;
	--siseo-gold: #f5a800;
	--siseo-gold-hover: #ffb420;
	--siseo-field: #ffffff;
	--siseo-line: rgba(22, 24, 29, 0.14);
	--siseo-radius: 12px;
	--siseo-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	color: var(--siseo-ink);
	font-family: var(--siseo-font);
	text-align: start;
}

.siseo-audit *,
.siseo-audit *::before,
.siseo-audit *::after {
	box-sizing: inherit;
}

.siseo-audit__form {
	margin: 0;
}

/* Visible to screen readers only; the placeholder is not a label. */
.siseo-audit__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* One white pill holding the field and the button. The outer radius is the
   inner radius plus the padding, so the corners stay concentric. */
.siseo-audit__row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding: 6px;
	background: var(--siseo-field);
	border: 1px solid var(--siseo-line);
	border-radius: calc(var(--siseo-radius) + 6px);
	box-shadow: 0 1px 2px rgba(22, 24, 29, 0.06), 0 12px 32px -12px rgba(22, 24, 29, 0.28);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The field itself draws no outline; the whole pill shows focus instead:
   an ink border for light pages and a gold halo that also reads on dark ones. */
.siseo-audit__row:focus-within {
	border-color: var(--siseo-ink);
	box-shadow: 0 0 0 3px rgba(245, 168, 0, 0.55), 0 12px 32px -12px rgba(22, 24, 29, 0.28);
}

.siseo-audit .siseo-audit__input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 12px 14px;
	border: 0;
	border-radius: var(--siseo-radius);
	background: var(--siseo-field);
	box-shadow: none;
	outline: none;
	color: var(--siseo-ink);
	/* 16px or more keeps iOS from zooming into the field. */
	font: 400 17px/1.4 var(--siseo-font);
	letter-spacing: normal;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
}

.siseo-audit .siseo-audit__input::placeholder {
	color: #8a8f99;
	opacity: 1;
}

.siseo-audit .siseo-audit__button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 48px;
	margin: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--siseo-radius);
	background: var(--siseo-gold);
	box-shadow: none;
	color: var(--siseo-ink);
	font: 650 16px/1.2 var(--siseo-font);
	letter-spacing: normal;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.siseo-audit .siseo-audit__button:hover {
	background: var(--siseo-gold-hover);
	color: var(--siseo-ink);
}

.siseo-audit .siseo-audit__button:active {
	transform: translateY(1px);
}

.siseo-audit .siseo-audit__button:focus-visible {
	outline: 3px solid var(--siseo-ink);
	outline-offset: 2px;
}

.siseo-audit .siseo-audit__button[aria-busy="true"] {
	cursor: progress;
	opacity: 0.85;
}

.siseo-audit__turnstile {
	margin-top: 8px;
}

.siseo-audit__notice {
	margin: 0 0 12px;
	padding-block: 12px;
	padding-inline: 16px 14px;
	border: 1px solid #f1c6bf;
	border-inline-start: 4px solid #c8402f;
	border-radius: var(--siseo-radius);
	background: #fff5f3;
	color: #6f1d13;
	font: 400 15px/1.5 var(--siseo-font);
}

/* Shown to shop managers only, until the engine URL is set. */
.siseo-audit-setup {
	max-width: 640px;
	padding: 12px 14px;
	border: 1px dashed #c3c4c7;
	border-radius: 12px;
	background: #f6f7f7;
	color: #50575e;
	font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Phones: stack the field over a full-width button. */
@media (max-width: 520px) {
	.siseo-audit__row {
		flex-direction: column;
		gap: 6px;
	}

	.siseo-audit .siseo-audit__button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.siseo-audit__row,
	.siseo-audit .siseo-audit__button {
		transition: none;
	}
}