/**
 * Splendid AI Property Search — Styles
 * Override CSS custom properties on .saps-wrapper to match your brand.
 */

.saps-wrapper {
	/* ── Brand tokens — override these per client ── */
	--saps-primary:         #2563eb;
	--saps-primary-hover:   #1d4ed8;
	--saps-primary-text:    #ffffff;
	--saps-input-radius:    10px;
	--saps-btn-radius:      50px;
	--saps-border:          #e2e8f0;
	--saps-bg:              #ffffff;
	--saps-text:            #1e293b;
	--saps-muted:           #94a3b8;
	--saps-refine-hint-text: #94a3b8;
	--saps-sparkle:         #2563eb;
	--saps-error:           #dc2626;
	--saps-recording:       #ef4444;
	--saps-shadow:          none;
	--saps-pill-bg:         #eff6ff;
	--saps-pill-border:     #bfdbfe;
	--saps-pill-text:       #1e40af;
	--saps-clear-bg:        #fef2f2;
	--saps-clear-border:    #fecaca;
	--saps-clear-text:      #dc2626;
	/* ─────────────────────────────────────────────── */

	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
}

/* ── Outer row: sparkle | field | button ──────────────────────────────────── */

.saps-bar {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ── Sparkle icon — standalone, left of input ─────────────────────────────── */

.saps-bar__sparkle {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var( --saps-sparkle );
	pointer-events: none;
}

/* ── Input field container — white box with border ────────────────────────── */

.saps-bar__field {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	background: var( --saps-bg );
	border: 1.5px solid var( --saps-border );
	border-radius: var( --saps-input-radius );
	box-shadow: var( --saps-shadow );
	padding: 0 8px 0 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.saps-bar__field:focus-within {
	border-color: var( --saps-primary );
}

/* ── Text input ───────────────────────────────────────────────────────────── */

.saps-bar__input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: 12px 8px 12px 0;
	font-size: 15px;
	color: var( --saps-text );
	line-height: 1.4;
}

.saps-bar__input::placeholder {
	color: var( --saps-muted );
}

.saps-bar__input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ── Mic button — circle, inside the field on the right ──────────────────── */

.saps-bar__mic {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 1.5px solid var( --saps-border );
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	color: var( --saps-muted );
	transition: color 0.2s, border-color 0.2s;
}

.saps-bar__mic:hover:not( :disabled ) {
	color: var( --saps-primary );
	border-color: var( --saps-primary );
}

.saps-bar__mic:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.saps-bar__mic--recording {
	color: var( --saps-recording ) !important;
	border-color: var( --saps-recording ) !important;
	animation: saps-pulse-color 1.2s ease-in-out infinite;
}

/* ── Search button — separate pill to the right ───────────────────────────── */

.saps-bar__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex-shrink: 0;
	border: none;
	background: var( --saps-primary );
	color: var( --saps-primary-text );
	padding: 0 24px;
	height: 46px;
	border-radius: var( --saps-btn-radius );
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
	white-space: nowrap;
}

.saps-bar__submit:hover:not( :disabled ) {
	background: var( --saps-primary-hover );
}

.saps-bar__submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ── Status row ───────────────────────────────────────────────────────────── */

.saps-status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	color: var( --saps-recording );
	font-size: 14px;
	font-weight: 500;
}

.saps-status__dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var( --saps-recording );
	animation: saps-pulse-dot 1.2s ease-in-out infinite;
	flex-shrink: 0;
}

/* ── Refine hint ──────────────────────────────────────────────────────────── */

.saps-refine-hint {
	margin-top: 10px;
	color: var( --saps-refine-hint-text );
	font-size: 13px;
	line-height: 1.4;
}

/* ── Error ────────────────────────────────────────────────────────────────── */

.saps-error {
	margin-top: 10px;
	color: var( --saps-error );
	font-size: 14px;
	line-height: 1.4;
}

/* ── Filter pills ─────────────────────────────────────────────────────────── */

.saps-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.saps-pills__label {
	font-size: 13px;
	color: var( --saps-muted );
	flex-shrink: 0;
}

.saps-pill {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var( --saps-pill-bg );
	border: 1px solid var( --saps-pill-border );
	color: var( --saps-pill-text );
	border-radius: 20px;
	padding: 3px 11px;
	font-size: 13px;
	line-height: 1.5;
}

.saps-pill__key {
	font-weight: 600;
}

.saps-pill--clear {
	background: var( --saps-clear-bg );
	border-color: var( --saps-clear-border );
	color: var( --saps-clear-text );
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: opacity 0.2s;
}

.saps-pill--clear:hover {
	opacity: 0.75;
}

/* ── Loading spinner ──────────────────────────────────────────────────────── */

.saps-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: saps-spin 0.65s linear infinite;
	flex-shrink: 0;
}

/* ── Animations ───────────────────────────────────────────────────────────── */

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

@keyframes saps-pulse-dot {
	0%, 100% { transform: scale( 1 );   opacity: 1;   }
	50%       { transform: scale( 1.4 ); opacity: 0.6; }
}

@keyframes saps-pulse-color {
	0%, 100% { opacity: 1;    }
	50%       { opacity: 0.45; }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

/* iOS Safari zooms the page when a text field under 16px is focused, so the
   search field is 16px on phones and on any touch device (tablets included).
   The doubled class lifts specificity above most theme input rules. */
@media ( max-width: 540px ), ( pointer: coarse ) {
	.saps-bar__input.saps-bar__input {
		font-size: 16px;
	}
}

@media ( max-width: 540px ) {
	.saps-bar__submit span {
		display: none;
	}

	.saps-bar__submit {
		padding: 0 16px;
	}
}