.wts-serp {
	--wts-accent: #246bfd;
	--wts-secondary: #7848ff;

	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #14213d;
	background: #fff;
	border: 1px solid #e7ebf3;
	border-radius: 20px;
	box-shadow: 0 14px 38px rgba(24, 43, 82, 0.07);
	overflow: hidden;
	max-width: 960px;
	margin: 28px auto;
	line-height: 1.45;
	font-size: 14px;
}

.wts-serp * {
	box-sizing: border-box;
}

.rankTitle {
    display: block;
    margin: 3px 0 5px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #1a0dab;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: color .2s ease;
}

.wts-result-card:hover .rankTitle {
    color: #551a8b;
    text-decoration: underline;
}

/* Header */

.wts-search-head {
	display: grid;
	grid-template-columns: 44px minmax(0, 650px) 1fr;
	gap: 16px;
	align-items: center;
	padding: 22px 28px 14px;
}

.wts-brand-mark span {
	background: #fff;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 14px;
	color: #000 !important;
}

.wts-search-box {
	height: 46px;
	border: 1px solid #dce3ee;
	border-radius: 24px;
	box-shadow: 0 4px 12px rgba(31, 53, 91, 0.06);
	display: flex;
	align-items: center;
	padding: 0 16px 0 20px;
	font-size: 15px;
}

.wts-query {
	flex: 1;
	color: #111827;
}

.wts-close {
    font-size: 24px;
    color: #6b7280;
    font-weight: 300;
    line-height: 1;
    margin-top: -5px !important;
}

.wts-divider {
	width: 1px;
	height: 24px;
	background: #e4e8ef;
	margin: 0 15px;
}

.wts-search-icon {
	width: 16px;
	height: 16px;
	border: 2px solid var(--wts-accent);
	border-radius: 50%;
	display: inline-block;
	position: relative;
	flex: 0 0 auto;
}

.wts-search-icon::after {
	content: "";
	width: 7px;
	height: 2px;
	background: var(--wts-accent);
	position: absolute;
	right: -5px;
	bottom: -3px;
	transform: rotate(45deg);
	border-radius: 2px;
}

.wts-head-actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 17px;
	color: #25324a;
}

.wts-grid-icon {
	font-size: 15px;
	line-height: 0.45;
	letter-spacing: 1.5px;
}

.wts-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(
		135deg,
		var(--wts-accent),
		var(--wts-secondary)
	);
	font-size: 12px;
}

/* Tabs */

.wts-tabs {
	display: flex;
	gap: 28px;
	padding: 0 30px;
	border-bottom: 1px solid #e7ebf3;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}

.wts-tabs::-webkit-scrollbar {
	display: none;
}

.wts-tabs span {
	padding: 10px 2px 13px;
	color: #42506a;
	font-size: 13px;
}

.wts-tabs .is-active {
	color: #14213d;
	border-bottom: 2px solid var(--wts-accent);
	font-weight: 650;
}

/* Body */

.wts-body {
	padding: 22px 30px 28px;
	background: linear-gradient(180deg, #fbfdff 0, #fff 100%);
}

.wts-stats-card,
.wts-result-card,
.wts-cta {
	border: 1px solid #dfe6f0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 5px 16px rgba(37, 57, 93, 0.05);
}

/* Statistics */
.wts-stats-card {
    display: grid;
    grid-template-columns: 100px 1fr 250px;
    gap: 5px;
    align-items: center;
    padding: 5px 10px;
    margin-bottom: 18px;
}

.wts-ring {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at center, #fff 59%, transparent 60%),
		conic-gradient(#0aaa55 0 76%, #d9eee4 76%);
	position: relative;
	color: #09a953;
}

.wts-ring::before {
	content: "↗";
	font-size: 14px;
	font-weight: 800;
	position: absolute;
	top: 12px;
}

.wts-ring strong {
	font-size: 26px;
	line-height: 1;
	margin-top: 10px;
}

.wts-ring span {
	font-size: 10px;
}

.wts-stats-copy h3 {
	font-size: 17px;
	line-height: 1.3;
	margin: 0 0 5px;
	color: #111827;
}

.wts-stats-copy p {
	font-size: 13px;
	color: #536179;
	margin: 0;
}

.wts-chart svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100px;
}

.wts-chart text {
	font-size: 10px;
	fill: #536179;
}

/* Results */

.wts-results {
	display: grid;
	gap: 12px;
}

.wts-result-card {
    display: grid;
    grid-template-columns: 30px 1fr;
    overflow: hidden;
    min-height: 138px;
}

.wts-rank {
	background: #eef2f8;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #0f3c80;
}

.wts-rank span {
	height: 18px;
	font-size: 12px;
	color: #ffcd32;
}

.wts-rank strong {
	font-size: 27px;
	line-height: 1;
	font-weight: 650;
}

.wts-result-card.is-featured .wts-rank {
    background: linear-gradient(165deg, #081b82, #0036a8);
	color: #fff;
}

.wts-result-content {
    padding: 10px 15px 10px;
}

.wts-result-topline {
	display: flex;
	align-items: center;
	gap: 11px;
	color: #42506a;
	font-size: 12px;
	line-height: 1.3;
}

.wts-logo {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #f8f8f8;
	color: #3c3c3c;
	overflow: hidden;
	font-weight: 750;
	font-size: 10px;
}

.wts-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wts-url {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.wts-menu {
	margin-left: auto;
	font-size: 19px;
	line-height: 1;
	color: #506079;
}

.wts-result-content h3 {
	font-weight: 500;
	color: #111bd4;
	font-size: 18px;
	line-height: 1.3;
	margin: 5px 0 7px;
}

.wts-result-content p {
	margin: 0;
	color: #303b50;
	font-size: 13px;
	line-height: 1.55;
}

.wts-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
}

.wts-badges span {
	background: #edf4ff;
	color: #1262d8;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 10px;
	line-height: 1.3;
}

/* CTA */

.wts-cta {
	display: grid;
	grid-template-columns: 42px 1fr auto;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 14px 17px;
	background: linear-gradient(90deg, #eff7ff, #f4efff);
}

.wts-cta-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(165deg, #92d122, #6ea60c);
}

.wts-cta-icon .wts-search-icon {
	width: 14px;
	height: 14px;
	border-color: #fff;
}

.wts-cta-icon .wts-search-icon::after {
	background: #fff;
}

.wts-cta-copy {
	display: flex;
	flex-direction: column;
}

.wts-cta-copy strong {
	font-size: 14px;
	line-height: 1.3;
	color: #111827;
}

.wts-cta-copy span {
	font-size: 11px;
	color: #536179;
}

.wts-cta-button {
	display: flex;
	align-items: center;
	gap: 20px;
	background: linear-gradient(165deg, #92d122, #6ea60c);
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 22px;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 600 !important;
	line-height: 1.2;
	box-shadow: 0 6px 16px rgba(74, 63, 224, 0.2);
	transition:
		filter 0.2s ease,
		transform 0.2s ease;
}

.wts-cta-button:hover {
	filter: brightness(0.96);
	transform: translateY(-1px);
}

.wts-cta-button span {
	font-size: 19px;
	line-height: 0.7;
}

.wts-serp-error {
	padding: 10px;
	border-left: 4px solid #d63638;
	background: #fff;
	font-size: 13px;
}

/* Tablet */

@media (max-width: 900px) {
	.wts-serp {
		max-width: 760px;
	}

	.wts-search-head {
		grid-template-columns: 36px 1fr;
	}

	.wts-head-actions {
		display: none;
	}

	.wts-stats-card {
		grid-template-columns: 90px 1fr;
	}

	.wts-chart {
		grid-column: 1 / -1;
		max-width: 360px;
		margin: auto;
	}

	.wts-tabs {
		gap: 22px;
	}

	.wts-body {
		padding: 20px;
	}
}

/* Mobile */

@media (max-width: 768px) {

    /* Volledige component compacter */
    .wts-serp {
        margin: 12px 0;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(24, 43, 82, 0.06);
    }

    /* Minder uitgebreide bovenbalk */
    .wts-head-actions,
    .wts-close,
    .wts-divider,
    .wts-tabs {
        display: none;
    }

    .wts-search-head {
        grid-template-columns: 28px 1fr;
        gap: 9px;
        padding: 12px;
    }

    .wts-brand-mark {
        width: 28px;
        height: 28px;
        padding: 5px;
    }

    .wts-search-box {
        height: 38px;
        padding: 0 13px;
        border-radius: 19px;
        font-size: 13px;
        box-shadow: none;
    }

    .wts-search-icon {
        width: 14px;
        height: 14px;
    }

    /* Minder witruimte */
    .wts-body {
        padding: 10px;
    }

    /* Statistiekkaart vereenvoudigen */
    .wts-stats-card {
        grid-template-columns: 54px 1fr;
        gap: 12px;
        padding: 12px;
        margin-bottom: 10px;
        border-radius: 10px;
        box-shadow: none;
    }

    .wts-ring {
        width: 52px;
        height: 52px;
    }

    .wts-ring::before {
        display: none;
    }

    .wts-ring strong {
        margin-top: 0;
        font-size: 17px;
    }

    .wts-ring span {
        font-size: 8px;
    }

    .wts-stats-copy h3 {
        margin: 0 0 2px;
        font-size: 13px;
        line-height: 1.3;
    }

    .wts-stats-copy p {
        font-size: 10.5px;
        line-height: 1.4;
    }

    /* Grafiek weghalen */
    .wts-chart {
        display: none;
    }

    /* Resultaatkaarten simpeler */
    .wts-results {
        gap: 8px;
    }

    .wts-result-card {
        grid-template-columns: 34px 1fr;
        min-height: auto;
        border-radius: 10px;
        box-shadow: none;
    }

    .wts-rank span {
        display: none;
    }

    .wts-rank strong {
        font-size: 17px;
    }

    .wts-result-content {
        padding: 12px;
    }

    .wts-result-topline {
        gap: 7px;
        font-size: 10.5px;
    }

    .wts-logo {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        font-size: 8px;
    }

    .wts-menu {
        display: none;
    }

    .rankTitle {
        display: block;
        margin: 4px 0;
        font-size: 15px;
        line-height: 1.3;
    }

    .wts-result-content p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 11.5px;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* Badges weghalen */
    .wts-badges {
        display: none;
    }

    /* CTA compacter */
    .wts-cta {
        grid-template-columns: 32px 1fr;
        gap: 9px;
        margin-top: 10px;
        padding: 11px;
        border-radius: 10px;
        box-shadow: none;
    }

    .wts-cta-icon {
        width: 30px;
        height: 30px;
    }

    .wts-cta-copy strong {
        font-size: 12px;
    }

    .wts-cta-copy span {
        font-size: 10px;
    }

    .wts-cta-button {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
        margin-top: 3px;
        padding: 9px 12px;
        border-radius: 16px;
        font-size: 11px;
        box-shadow: none;
    }

    .wts-cta-button span {
        font-size: 15px;
    }
}