/* ==========================================================================
   SERP Simulator – tool UI + Google-like preview
   Everything is scoped under .serpsim. Form controls carry explicit resets
   (with !important on the properties themes most often override) so page
   builders such as Flatsome / Avada / Divi cannot restyle them.
   ========================================================================== */

.serpsim {
	--serpsim-bg: #ffffff;
	--serpsim-panel: #f4f5f8;
	--serpsim-border: #e4e7ee;
	--serpsim-border-strong: #d3d7e0;
	--serpsim-text: #1c2030;
	--serpsim-muted: #6b7385;
	--serpsim-accent: #2b2fd6;
	--serpsim-accent-hover: #1f22a8;
	--serpsim-accent-soft: #ecedfc;
	--serpsim-topline: #b6b5ea;
	--serpsim-skeleton: #d7d9df;
	--serpsim-skeleton-title: #a09fe6;
	--serpsim-good: #15803d;
	--serpsim-good-soft: #dcfce7;
	--serpsim-warn: #b45309;
	--serpsim-warn-soft: #fef3c7;
	--serpsim-bad: #b91c1c;
	--serpsim-bad-soft: #fee2e2;
	--serpsim-radius: 8px;
	--serpsim-radius-sm: 4px;
	--serpsim-focus: 0 0 0 3px rgba(43, 47, 214, 0.22);
	--serpsim-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--serpsim-max: 1720px;

	font-family: var(--serpsim-font);
	color: var(--serpsim-text);
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
	clear: both;
	margin: 0 0 2.5rem;
}
.serpsim *,
.serpsim *::before,
.serpsim *::after {
	box-sizing: inherit;
}

/* Full-bleed: escape the theme's content column ---------------------------- */

.serpsim--bleed {
	position: relative;
	width: var(--serpsim-vw, 100vw);
	left: 50%;
	margin-left: calc(var(--serpsim-vw, 100vw) / -2);
	margin-right: 0;
	background: var(--serpsim-bg);
}
.serpsim-inner {
	max-width: var(--serpsim-max);
	margin: 0 auto;
	padding: 0;
}
.serpsim--bleed .serpsim-inner {
	padding: 0 32px;
}

.serpsim-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.serpsim-h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.15;
	font-weight: 800;
	text-align: center;
	margin: 0 0 0.5rem;
}
.serpsim-intro {
	text-align: center;
	color: var(--serpsim-muted);
	font-size: 1.1rem;
	margin: 0 0 2rem;
}
.serpsim-noscript {
	padding: 0.75rem 1rem;
	border: 1px solid var(--serpsim-warn);
	background: var(--serpsim-warn-soft);
	border-radius: var(--serpsim-radius-sm);
}

/* Theme-proof control resets ------------------------------------------------ */

.serpsim label,
.serpsim legend {
	display: block;
	font-family: var(--serpsim-font);
	font-size: 15px;
	font-weight: 400 !important;
	line-height: 1.4;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--serpsim-text);
	margin: 0 0 0.4rem;
	padding: 0;
}
.serpsim input,
.serpsim textarea,
.serpsim select,
.serpsim button {
	font-family: var(--serpsim-font);
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none;
	margin: 0 !important;
	min-width: 0;
	max-width: none;
}
.serpsim p {
	margin: 0;
}
.serpsim fieldset {
	border: 0;
	padding: 0;
	min-width: 0;
}

/* Toolbar (country + device) ----------------------------------------------- */

.serpsim-toolbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0 0 1rem;
}
.serpsim-toolbar__hint {
	margin-right: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--serpsim-muted);
}
.serpsim-country {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	background: var(--serpsim-bg);
	border: 1px solid var(--serpsim-border-strong);
	border-radius: var(--serpsim-radius-sm);
	height: 2.75rem;
	padding: 0 0 0 0.75rem;
	width: auto;
	min-width: 190px;
	margin: 0 !important;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.serpsim-country:hover {
	border-color: #aab0bf;
}
.serpsim-country:focus-within {
	border-color: var(--serpsim-accent);
	box-shadow: var(--serpsim-focus);
}
.serpsim-country__flag {
	font-size: 1.2rem;
	line-height: 1;
	margin-right: 0;
}
.serpsim .serpsim-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--serpsim-text);
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7385' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.875rem center !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	height: 100% !important;
	width: 100% !important;
	flex: 1 1 auto;
	padding: 0 2.25rem 0 0.5rem !important;
	cursor: pointer;
	outline: none;
}
.serpsim-devicetoggle {
	display: inline-flex;
	background: var(--serpsim-bg);
	border: 1px solid var(--serpsim-border-strong);
	border-radius: var(--serpsim-radius-sm);
	overflow: hidden;
	height: 2.75rem;
	padding: 0;
	gap: 0;
}
.serpsim .serpsim-devicebtn {
	font-size: 0.9375rem;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 0 1.25rem !important;
	min-height: 0 !important;
	height: 100%;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--serpsim-accent) !important;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.serpsim .serpsim-devicebtn:hover {
	background: var(--serpsim-accent-soft) !important;
}
.serpsim .serpsim-devicebtn:focus-visible {
	outline: none;
	box-shadow: var(--serpsim-focus);
}
.serpsim .serpsim-devicebtn[aria-pressed="true"] {
	background: var(--serpsim-accent) !important;
	color: #fff !important;
}

/* Layout -------------------------------------------------------------------- */

.serpsim-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}
@media (min-width: 960px) {
	.serpsim-layout {
		grid-template-columns: minmax(430px, 30%) minmax(0, 1fr);
		gap: 2rem;
	}
	.serpsim-form {
		position: sticky;
		top: 1.5rem;
	}
}
@media (min-width: 960px) and (max-width: 1399px) {
	.serpsim-form {
		padding: 1.5rem 1.5rem 1.75rem;
	}
}
@media (min-width: 1400px) {
	.serpsim-layout {
		grid-template-columns: 500px minmax(0, 1fr);
	}
}

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

.serpsim-form {
	background: var(--serpsim-panel);
	border-radius: var(--serpsim-radius);
	padding: 1.75rem 2rem 2rem;
	margin: 0;
	min-width: 0;
}
.serpsim-field {
	margin: 0 0 1.25rem;
}
.serpsim-label--small {
	font-size: 0.85rem;
	color: var(--serpsim-muted);
}
.serpsim-labelrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.serpsim-counter {
	font-size: 0.8125rem;
	color: var(--serpsim-muted);
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	white-space: nowrap;
}
.serpsim-badge {
	display: none;
	padding: 0 0.5rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.6875rem;
	line-height: 1.6;
	margin-left: 0.4rem;
}
.serpsim-badge.is-good { display: inline-block; color: var(--serpsim-good); background: var(--serpsim-good-soft); }
.serpsim-badge.is-short { display: inline-block; color: var(--serpsim-warn); background: var(--serpsim-warn-soft); }
.serpsim-badge.is-long { display: inline-block; color: var(--serpsim-bad); background: var(--serpsim-bad-soft); }

.serpsim .serpsim-input {
	display: block;
	width: 100% !important;
	font-size: 0.9375rem;
	line-height: 1.45 !important;
	color: var(--serpsim-text) !important;
	background: var(--serpsim-bg) !important;
	border: 1px solid var(--serpsim-border-strong) !important;
	border-radius: var(--serpsim-radius-sm) !important;
	padding: 0.625rem 0.875rem !important;
	min-height: 2.75rem !important;
	height: auto;
	box-shadow: none !important;
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
}
.serpsim .serpsim-input::placeholder {
	color: #9aa1b1;
	opacity: 1;
}
.serpsim .serpsim-input:hover {
	border-color: #aab0bf !important;
}
.serpsim .serpsim-input:focus,
.serpsim .serpsim-input:focus-visible {
	outline: none !important;
	border-color: var(--serpsim-accent) !important;
	box-shadow: var(--serpsim-focus) !important;
}
.serpsim .serpsim-textarea {
	resize: vertical;
	min-height: 4rem !important;
}
.serpsim-inputgroup {
	position: relative;
}
.serpsim .serpsim-inputgroup .serpsim-input {
	padding-right: 7rem !important;
}
.serpsim .serpsim-linkbtn {
	position: absolute;
	right: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: var(--serpsim-accent) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 3px;
	box-shadow: none !important;
	padding: 0.25rem 0 !important;
	min-height: 0 !important;
	height: auto;
	width: auto !important;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.serpsim .serpsim-linkbtn:hover {
	color: var(--serpsim-accent-hover) !important;
}
.serpsim .serpsim-linkbtn:focus-visible {
	outline: none;
	box-shadow: var(--serpsim-focus) !important;
}
.serpsim .serpsim-linkbtn:disabled {
	opacity: 0.6;
	cursor: wait;
}
.serpsim-help {
	font-size: 0.8125rem;
	color: var(--serpsim-muted);
	margin: 0.4rem 0 0 !important;
}
.serpsim-help:empty {
	display: none;
}
.serpsim-help.is-error {
	color: var(--serpsim-bad);
}
.serpsim-help.is-success {
	color: var(--serpsim-good);
}

.serpsim-meter {
	height: 3px;
	border-radius: 999px;
	background: var(--serpsim-border);
	overflow: hidden;
	margin-top: 0.4rem;
}
.serpsim-meter span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--serpsim-good);
	transition: width 0.12s linear, background-color 0.15s;
}
.serpsim-meter span.is-short { background: var(--serpsim-warn); }
.serpsim-meter span.is-long { background: var(--serpsim-bad); }

.serpsim .serpsim-chip {
	display: inline-flex;
	align-items: center;
	margin: 0.6rem 0 0 !important;
	font-size: 0.75rem;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: var(--serpsim-accent) !important;
	background: var(--serpsim-bg) !important;
	border: 1px solid var(--serpsim-border-strong) !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	padding: 0.45rem 0.7rem !important;
	min-height: 0 !important;
	height: auto;
	width: auto !important;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}
.serpsim .serpsim-chip:hover {
	background: var(--serpsim-accent-soft) !important;
	border-color: var(--serpsim-accent) !important;
}
.serpsim .serpsim-chip:focus-visible {
	outline: none;
	box-shadow: var(--serpsim-focus) !important;
}

.serpsim-fieldset {
	margin: 0 0 1.5rem;
}
.serpsim-fieldset legend {
	margin-bottom: 0.6rem;
}
.serpsim-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.4rem;
}
.serpsim .serpsim-check {
	display: inline-flex !important;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9375rem;
	margin: 0 !important;
	cursor: pointer;
	user-select: none;
}
.serpsim .serpsim-check input {
	width: 1.05rem !important;
	height: 1.05rem !important;
	margin: 0 !important;
	padding: 0;
	accent-color: var(--serpsim-accent);
	cursor: pointer;
	-webkit-appearance: checkbox;
	appearance: checkbox;
}
.serpsim .serpsim-check input:focus-visible {
	outline: none;
	box-shadow: var(--serpsim-focus);
}
.serpsim-new {
	font-size: 0.5625rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	background: #e11d48;
	border-radius: 3px;
	padding: 0.2rem 0.3rem;
}
.serpsim-subfield {
	margin-top: 1rem;
}
.serpsim-subfield[hidden] {
	display: none !important;
}
.serpsim-subfield--row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

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

/* One row, always: buttons share the width and scale their type with the form. */
.serpsim-form {
	container-type: inline-size;
}
.serpsim-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.35rem;
}
.serpsim-actions__spacer {
	display: none;
}
.serpsim .serpsim-actions .serpsim-btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 0.4rem !important;
	font-size: clamp(0.6875rem, 2.9cqi, 0.8125rem);
}
.serpsim .serpsim-actions .serpsim-btn--outline {
	flex: 0 1 auto;
}
.serpsim .serpsim-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 0 1rem !important;
	height: 2.5rem;
	min-height: 0 !important;
	width: auto !important;
	border-radius: var(--serpsim-radius-sm) !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.serpsim .serpsim-btn:active {
	transform: translateY(1px);
}
.serpsim .serpsim-btn:focus-visible {
	outline: none;
	box-shadow: var(--serpsim-focus) !important;
}
.serpsim .serpsim-btn:disabled,
.serpsim .serpsim-btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}
.serpsim .serpsim-btn--primary {
	background: var(--serpsim-accent) !important;
	color: #fff !important;
}
.serpsim .serpsim-btn--primary:hover:not(:disabled) {
	background: var(--serpsim-accent-hover) !important;
	color: #fff !important;
}
.serpsim .serpsim-btn--outline {
	background: var(--serpsim-bg) !important;
	color: var(--serpsim-accent) !important;
	border-color: var(--serpsim-border-strong) !important;
	padding: 0 0.8rem !important;
}
.serpsim .serpsim-btn--outline:hover:not(:disabled) {
	background: var(--serpsim-accent-soft) !important;
	border-color: var(--serpsim-accent) !important;
}
.serpsim-spinner {
	display: none;
	width: 0.8rem;
	height: 0.8rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: serpsim-spin 0.7s linear infinite;
}
.is-loading .serpsim-spinner {
	display: inline-block;
}
@keyframes serpsim-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.serpsim * {
		transition: none !important;
		animation-duration: 1.5s !important;
	}
}

/* Preview pane -------------------------------------------------------------- */

.serpsim-previewpane {
	min-width: 0;
}
.serpsim-previewwrap {
	position: relative;
	background: var(--serpsim-bg);
	border: 1px solid var(--serpsim-border);
	border-radius: var(--serpsim-radius);
	box-shadow: 0 1px 2px rgba(20, 24, 40, 0.04), 0 8px 24px rgba(20, 24, 40, 0.06);
	padding: 1.75rem 2.25rem 2.25rem;
	overflow: hidden;
	min-height: 200px;
}
.serpsim-previewwrap::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 5px;
	background: var(--serpsim-topline);
}
.serpsim-previewnote {
	margin-top: 0.6rem !important;
}

/* Google-like SERP ------------------------------------------------------------ */

.serpsim-serp {
	font-family: Arial, Helvetica, sans-serif;
	color: #202124;
	background: #fff;
	width: 100%;
	transform-origin: top left;
	text-align: left;
	padding: 0;
}
.serpsim-serp.is-mobile {
	width: 400px;
	max-width: none;
	padding: 16px;
	border-radius: 28px;
	border: 9px solid #1f2430;
	box-shadow: 0 12px 36px rgba(15, 23, 42, 0.28);
	margin: 0 auto;
	transform-origin: top center;
}

.serp-header {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 14px;
}
.serpsim-serp.is-mobile .serp-header {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}
.serp-wordmark {
	font-family: "Product Sans", Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1;
	display: inline-flex;
	user-select: none;
	flex: 0 0 auto;
	width: 118px;
}
.serp-wordmark span:nth-child(1) { color: #4285f4; }
.serp-wordmark span:nth-child(2) { color: #ea4335; }
.serp-wordmark span:nth-child(3) { color: #fbbc05; }
.serp-wordmark span:nth-child(4) { color: #4285f4; }
.serp-wordmark span:nth-child(5) { color: #34a853; }
.serp-wordmark span:nth-child(6) { color: #ea4335; }
.serpsim-serp.is-mobile .serp-wordmark {
	justify-content: center;
	font-size: 24px;
	width: auto;
}
.serp-searchbox {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	border: 1px solid #dfe1e5;
	border-radius: 24px;
	padding: 0 14px 0 20px;
	box-shadow: 0 1px 6px rgba(32, 33, 36, 0.14);
	font-size: 16px;
	min-width: 0;
	max-width: 690px;
}
.serpsim-serp.is-mobile .serp-searchbox {
	max-width: none;
}
.serp-searchbox__query {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.serp-searchbox__query:empty::before {
	content: attr(data-placeholder);
	color: #9aa0a6;
}
.serp-searchbox__icons {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	flex: 0 0 auto;
}
.serp-tabs {
	display: flex;
	gap: 22px;
	border-bottom: 1px solid #ebebeb;
	margin: 0 0 24px;
	padding-left: 148px;
	font-size: 13px;
	color: #5f6368;
	overflow: hidden;
}
.serpsim-serp.is-mobile .serp-tabs,
.serpsim-serp.is-narrow .serp-tabs {
	padding-left: 0;
}
.serpsim-serp.is-mobile .serp-tabs {
	gap: 18px;
	margin-bottom: 16px;
}
.serp-tab {
	padding: 6px 0 10px;
	white-space: nowrap;
}
.serp-tab.is-active {
	color: #1a73e8;
	border-bottom: 3px solid #1a73e8;
	font-weight: 500;
}

.serp-results {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 652px;
	margin-left: 148px;
}
.serpsim-serp.is-mobile .serp-results,
.serpsim-serp.is-narrow .serp-results {
	margin-left: 0;
}
.serpsim-serp.is-mobile .serp-results {
	gap: 18px;
	max-width: none;
}

/* Heatmap overlay */
.serp-results.has-heatmap::after {
	content: "";
	position: absolute;
	inset: -12px -20px -12px -24px;
	pointer-events: none;
	border-radius: 12px;
	background:
		radial-gradient(ellipse 45% 18% at 22% 6%, rgba(239, 68, 68, 0.55), rgba(249, 115, 22, 0.35) 45%, transparent 70%),
		radial-gradient(ellipse 60% 22% at 30% 15%, rgba(250, 204, 21, 0.35), transparent 70%),
		radial-gradient(ellipse 50% 20% at 25% 32%, rgba(250, 204, 21, 0.22), transparent 70%),
		radial-gradient(ellipse 40% 18% at 22% 55%, rgba(74, 222, 128, 0.18), transparent 70%),
		radial-gradient(ellipse 40% 18% at 22% 80%, rgba(96, 165, 250, 0.14), transparent 70%);
	mix-blend-mode: multiply;
}

/* Organic result */
.serp-organic__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}
.serp-favicon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f1f3f4;
	border: 1px solid #ecedef;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: #5f6368;
}
.serp-favicon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	display: block;
	margin: 0;
	box-shadow: none;
}
.serp-organic__site {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}
.serp-site-name {
	font-size: 14px;
	color: #202124;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.serp-url {
	font-size: 12px;
	color: #4d5156;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 6px;
}
.serp-url__more {
	color: #4d5156;
	font-size: 14px;
	letter-spacing: 1px;
}
.serpsim .serp-title {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #1a0dab !important;
	margin: 0 0 3px !important;
	padding: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
.serpsim .serpsim-serp.is-mobile .serp-title {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.serpsim-serp.is-mobile .serp-favicon {
	width: 28px;
	height: 28px;
}
.serp-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	color: #4d5156;
	margin: 2px 0 3px;
}
.serp-stars {
	display: inline-flex;
	gap: 1px;
	line-height: 1;
}
.serp-stars svg {
	width: 14px;
	height: 14px;
	display: block;
}
.serp-snippet {
	font-size: 14px;
	line-height: 1.58;
	color: #4d5156;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.serp-snippet strong {
	font-weight: 700;
	color: #4d5156;
}
.serp-snippet .serp-date {
	color: #70757a;
}
.serp-snippet .serp-date::after {
	content: " \2014  ";
}
.serp-snippet.is-placeholder {
	color: #9aa0a6;
	font-style: italic;
}

/* Skeleton placeholder results */
.serp-skeleton {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.serp-skeleton__head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.serp-skeleton__favicon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--serpsim-skeleton);
	flex: 0 0 auto;
}
.serp-skeleton__lines {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.serp-skeleton__line {
	height: 9px;
	width: 180px;
	border-radius: 2px;
	background: var(--serpsim-skeleton);
}
.serp-skeleton__title {
	height: 26px;
	width: 61%;
	border-radius: 2px;
	background: var(--serpsim-skeleton-title);
}
.serp-skeleton__desc {
	height: 44px;
	width: 100%;
	border-radius: 2px;
	background: var(--serpsim-skeleton);
}

/* Ads */
.serp-ads {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.serp-ads__label {
	font-size: 14px;
	font-weight: 700;
	color: #202124;
	margin-bottom: -6px;
}
.serp-ad .serp-favicon {
	background: #e8f0fe;
	color: #1967d2;
}

/* AI Overview */
.serp-ai {
	border: 1px solid #e3e3e3;
	border-radius: 16px;
	padding: 16px 18px;
	background: linear-gradient(135deg, #f8f9ff 0%, #fdf7ff 100%);
}
.serp-ai__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 8px;
	color: #202124;
}
.serp-ai__head svg {
	width: 22px;
	height: 22px;
}
.serp-ai__text {
	font-size: 14px;
	line-height: 1.6;
	color: #1f1f1f;
	margin: 0 0 10px !important;
}
.serp-ai__more {
	display: inline-block;
	font-size: 14px;
	color: #1a73e8;
	border: 1px solid #dadce0;
	border-radius: 20px;
	padding: 6px 14px;
	margin-bottom: 8px;
}
.serp-ai__note {
	font-size: 12px;
	color: #70757a;
	margin: 0 !important;
}

/* Map pack */
.serp-map {
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	overflow: hidden;
}
.serp-map__canvas {
	height: 120px;
	background:
		linear-gradient(90deg, rgba(255,255,255,0.7) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(0deg, rgba(255,255,255,0.7) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(135deg, #e8f0e5 0%, #dbe7f5 100%);
	position: relative;
}
.serp-map__pin {
	position: absolute;
	width: 22px;
	height: 22px;
	color: #d93025;
	transform: translate(-50%, -100%);
}
.serp-map__pin svg {
	width: 100%;
	height: 100%;
	display: block;
}
.serp-map__title {
	font-size: 18px;
	color: #202124;
	padding: 12px 16px 4px;
}
.serp-place {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	border-top: 1px solid #f1f3f4;
	font-size: 13px;
	color: #4d5156;
}
.serp-place__name {
	font-size: 15px;
	color: #202124;
	margin-bottom: 2px;
}
.serp-place__meta {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}
.serp-place__open {
	color: #188038;
}
.serp-place__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.serp-place__btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #dadce0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1a73e8;
	font-size: 10px;
	background: #fff;
}
.serp-map__more {
	display: block;
	padding: 12px 16px;
	border-top: 1px solid #f1f3f4;
	color: #1a73e8;
	font-size: 14px;
}

/* Toast ----------------------------------------------------------------------- */

.serpsim-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate(-50%, 1rem);
	background: #1c2030;
	color: #fff;
	font-size: 0.875rem;
	padding: 0.7rem 1.1rem;
	border-radius: var(--serpsim-radius-sm);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	z-index: 9999;
	max-width: calc(100vw - 2rem);
}
.serpsim-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Content --------------------------------------------------------------------- */

.serpsim-content {
	max-width: 75ch;
	margin: 2.5rem auto 0;
}
.serpsim-content h2 {
	margin-top: 2rem;
}
.serpsim-content p,
.serpsim-content li {
	margin-bottom: 1rem;
}
.serpsim-faq__item {
	border: 1px solid var(--serpsim-border);
	border-radius: var(--serpsim-radius-sm);
	padding: 0 1rem;
	margin: 0 0 0.5rem;
	background: var(--serpsim-bg);
}
.serpsim-faq__item summary {
	cursor: pointer;
	padding: 0.875rem 0;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.serpsim-faq__item summary::-webkit-details-marker {
	display: none;
}
.serpsim-faq__item summary::after {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
	color: var(--serpsim-muted);
	flex: 0 0 auto;
}
.serpsim-faq__item[open] summary::after {
	content: "\2013";
}
.serpsim-faq__item summary h3 {
	font-size: 1rem;
	margin: 0;
	display: inline;
}
.serpsim-faq__item p {
	margin: 0 0 1rem;
	color: var(--serpsim-muted);
}

/* Small screens --------------------------------------------------------------- */

@media (max-width: 959px) {
	.serpsim-toolbar__hint {
		flex: 1 1 100%;
		margin-right: 0;
	}
}
@media (max-width: 640px) {
	.serpsim--bleed .serpsim-inner {
		padding: 0 16px;
	}
	.serpsim-form {
		padding: 1.25rem 1rem 1.5rem;
	}
	.serpsim-previewwrap {
		padding: 1.25rem 1rem 1.25rem;
	}
	.serpsim-toolbar {
		justify-content: stretch;
	}
	.serpsim-country {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
	.serpsim-actions {
		flex-wrap: wrap;
	}
	.serpsim .serpsim-actions .serpsim-btn,
	.serpsim .serpsim-actions .serpsim-btn--outline {
		flex: 1 1 calc(50% - 0.25rem);
		font-size: 0.8125rem;
	}
	.serpsim-subfield--row {
		grid-template-columns: 1fr;
	}
	.serp-header {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.serp-wordmark {
		width: auto;
	}
}