/* QuickImport Synshaller — directory and center page.
   Deliberately plain: no design yet, just clean structure. Colours are
   variables so a design pass only has to touch :root. */

:root {
	--qisyn-text: #1a1a1a;
	--qisyn-muted: #5f6b76;
	--qisyn-border: #d9dee3;
	--qisyn-surface: #f5f7f9;
	--qisyn-accent: #152537;
	--qisyn-dekra: #288749;
	--qisyn-partner: #334D6A;
	--qisyn-radius: 6px;
}

/* ---------- Directory ---------- */

.qisyn-dir {
	color: var(--qisyn-text);
}

.qisyn-dir__toolbar {
	display: grid;
	gap: 12px 16px;
	margin-bottom: 16px;
}

.qisyn-dir__toolbar[hidden] {
	display: none;
}

.qisyn-dir__label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.875rem;
	font-weight: 600;
}

.qisyn-dir__input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--qisyn-border);
	border-radius: var(--qisyn-radius);
	font-size: 1rem;
}

.qisyn-dir__count {
	margin: 0;
	color: var(--qisyn-muted);
	font-size: 0.875rem;
}

.qisyn-dir__map {
	height: 460px;
	margin-bottom: 24px;
	border: 1px solid var(--qisyn-border);
	border-radius: var(--qisyn-radius);
	background: var(--qisyn-surface);
	z-index: 0;
}

.qisyn-dir__map[hidden],
.qisyn-dir__empty[hidden],
.qisyn-dir__region[hidden],
.qisyn-dir__item[hidden] {
	display: none;
}

.qisyn-dir__empty {
	padding: 16px;
	border-radius: var(--qisyn-radius);
	background: var(--qisyn-surface);
}

.qisyn-dir__region {
	margin-bottom: 32px;
}

.qisyn-dir__region-title {
	margin-top: 0;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--qisyn-accent);
}

.qisyn-dir__region-count {
	color: var(--qisyn-muted);
	font-size: 0.75em;
	font-weight: 400;
}

.qisyn-dir__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qisyn-dir__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--qisyn-border);
}

.qisyn-dir__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.qisyn-dir__link:hover .qisyn-dir__name,
.qisyn-dir__link:focus-visible .qisyn-dir__name {
	text-decoration: underline;
}

.qisyn-dir__name {
	font-weight: 600;
}

.qisyn-dir__place {
	color: var(--qisyn-muted);
	font-size: 0.875rem;
}

/* Scoped under .qisyn-dir so the theme's `.elementor img { height: auto }`
   can't override the fixed size. */
.qisyn-dir .qisyn-dir__logo {
	display: block;
	flex-shrink: 0;
	width: 56px;
	height: 20px;
	object-fit: contain;
	object-position: center;
}

.qisyn-dir .qisyn-dir__logo--dekra {
	color: var(--qisyn-dekra);
}

/* ---------- Map pins ---------- */

.qisyn-pin {
	width: 18px;
	height: 18px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--qisyn-partner);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.qisyn-popup__name {
	display: block;
	font-weight: 600;
}

.qisyn-popup__address {
	display: block;
	margin-bottom: 6px;
	color: var(--qisyn-muted);
}

/* ---------- Center page ---------- */

/* ---------- Center page ---------- */

.qisyn-center,
.qisyn-dir {
	--qisyn-primary: #0284c7;
	--qisyn-primary-dark: #0369a1;
	--qisyn-ink: #0f172a;
	--qisyn-ink-soft: #475569;
	--qisyn-canvas: #f8fafc;
	--qisyn-card-border: #e2e8f0;
	--qisyn-trust: #16a34a;
	--qisyn-trust-light: #dcfce7;
	--qisyn-trust-dark: #14532d;
	--qisyn-wrap: 1240px;
}

.qisyn-center {
	background: var(--qisyn-canvas);
	color: var(--qisyn-ink);
}

/* The content width. Anything outside it (the top banner) runs full width. */
.qisyn-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--qisyn-wrap);
	margin: 0 auto;
	padding: 0 24px;
}

/* Scoped under .qisyn-center: the theme styles headings, links and lists
   with selectors that out-rank a single class. */
.qisyn-center h1,
.qisyn-center h2,
.qisyn-hero h1 {
	margin: 0;
	font-family: inherit;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Full-bleed sections (the top banner and the ribbon). The directory shortcode
   sits inside the page builder's content container, so these stretch to the
   viewport edges and then pad their content back to the container's own
   width — it still lines up with everything below. */
/* The page builder pads the column holding the shortcode (10px by default),
   which would leave a white strip between the header and the banner. */
.elementor-section .elementor-column > .elementor-widget-wrap.elementor-element-populated:has(.qisyn-bleed) {
	padding-top: 0;
}

/* 100vw includes the scrollbar, so clip the few pixels that would otherwise
   add a horizontal scrollbar. */
html:has(.qisyn-bleed) {
	overflow-x: clip;
}

.qisyn-bleed {
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding-right: calc(50vw - 50%);
	padding-left: calc(50vw - 50%);
}

.qisyn-bleed > .qisyn-wrap {
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

.qisyn-ribbon.qisyn-bleed {
	margin-bottom: 32px;
}

/* Top banner */

.qisyn-hero {
	background-color: #0b1c30;
	background-image:
		linear-gradient(90deg, rgba(11, 28, 48, 0.96) 0%, rgba(11, 28, 48, 0.86) 55%, rgba(0, 123, 185, 0.6) 100%),
		var(--qisyn-hero-image, none);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.qisyn-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding-top: 80px;
	padding-bottom: 96px;
}

.qisyn-center .qisyn-hero__back {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.875rem;
	text-decoration: none;
}

.qisyn-center .qisyn-hero__back:hover {
	color: #fff;
	text-decoration: underline;
}

.qisyn-hero__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.qisyn-hero__logo {
	display: block;
	width: auto;
	height: 16px;
}

.qisyn-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.qisyn-pill--partner {
	background: var(--qisyn-primary);
	color: #fff;
}

.qisyn-pill--dekra {
	background: var(--qisyn-dekra);
	color: #fff;
}

.qisyn-pill--glass {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.qisyn-hero .qisyn-hero__title {
	max-width: 48rem;
	color: #fff;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-transform: none;
}

.qisyn-hero__intro {
	max-width: 48rem;
	color: #eaf1ff;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.qisyn-hero__intro p {
	margin: 0 0 0.75em;
	color: inherit;
}

.qisyn-hero__intro p:last-child {
	margin-bottom: 0;
}

.qisyn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 4px;
}

/* Buttons */

.qisyn-center .qisyn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 0;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s;
}

.qisyn-center .qisyn-button--primary {
	background: var(--qisyn-primary);
	color: #fff;
	box-shadow: 0 8px 20px -6px rgba(2, 132, 199, 0.5);
}

.qisyn-center .qisyn-button--primary:hover {
	background: var(--qisyn-primary-dark);
	color: #fff;
}

.qisyn-center .qisyn-button--glass {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.qisyn-center .qisyn-button--glass:hover {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.qisyn-center .qisyn-button--soft {
	background: #e0f2fe;
	color: var(--qisyn-primary);
}

.qisyn-center .qisyn-button--soft:hover {
	background: #bae6fd;
	color: var(--qisyn-primary-dark);
}

.qisyn-button--block {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}

.qisyn-icon {
	flex-shrink: 0;
}

/* Reviews and approval ribbon under the banner */

.qisyn-ribbon {
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.qisyn-ribbon__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* Trustpilot's Micro Combo drops the review count when it gets narrower than
   roughly 480px, so give it room. */
.qisyn-ribbon__reviews {
	flex: 0 1 480px;
	min-width: 260px;
}

.qisyn-ribbon__approval {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--qisyn-primary);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Layout and cards */

.qisyn-center__layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding-top: 48px;
	padding-bottom: 72px;
}

.qisyn-center__aside {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.qisyn-card {
	padding: 32px;
	border: 1px solid var(--qisyn-card-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
}

.qisyn-card--contact,
.qisyn-card--map {
	padding: 24px;
}

.qisyn-card__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.qisyn-center .qisyn-card__title {
	margin-top: 4px;
	color: var(--qisyn-ink);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
}

.qisyn-center .qisyn-card__title--small {
	margin-top: 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

.qisyn-eyebrow {
	color: var(--qisyn-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qisyn-eyebrow--green {
	color: var(--qisyn-trust);
}

.qisyn-eyebrow--muted {
	color: #94a3b8;
}

/* Service overview */

.qisyn-center .qisyn-services {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.qisyn-service {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 16px;
	border-radius: 12px;
	background: var(--qisyn-canvas);
}

.qisyn-service__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #dce9ff;
	color: var(--qisyn-primary);
}

.qisyn-service__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.qisyn-service__title {
	font-weight: 600;
}

.qisyn-service__text {
	color: var(--qisyn-ink-soft);
	font-size: 0.875rem;
	line-height: 1.4;
}

.qisyn-answer {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
}

.qisyn-answer--yes {
	background: var(--qisyn-trust-light);
	color: var(--qisyn-trust-dark);
}

.qisyn-answer--no {
	background: #f1f5f9;
	color: #64748b;
}

/* Contact card */

.qisyn-contact__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.qisyn-contact__logo {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	object-fit: contain;
}

.qisyn-contact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 24px 0;
	font-style: normal;
}

.qisyn-contact__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.qisyn-contact__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #f1f5f9;
	color: var(--qisyn-primary);
}

.qisyn-contact__label {
	display: block;
	color: #64748b;
	font-size: 0.75rem;
}

.qisyn-contact__value {
	font-weight: 500;
	overflow-wrap: anywhere;
}

.qisyn-center a.qisyn-contact__value {
	color: var(--qisyn-primary);
	text-decoration: none;
}

.qisyn-center a.qisyn-contact__value:hover {
	text-decoration: underline;
}

.qisyn-center__map {
	height: 240px;
	margin-bottom: 16px;
	border: 1px solid var(--qisyn-card-border);
	border-radius: 12px;
	background: var(--qisyn-surface);
	z-index: 0;
}

@media (max-width: 720px) {
	.qisyn-dir__map {
		height: 320px;
	}

	.qisyn-wrap {
		padding: 0 16px;
	}

	.qisyn-hero__inner {
		padding-top: 56px;
		padding-bottom: 64px;
	}

	.qisyn-ribbon__inner {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.qisyn-ribbon__reviews {
		flex: none;
		width: 100%;
		min-width: 0;
	}

	.qisyn-ribbon__approval {
		justify-content: center;
		text-align: center;
	}

	.qisyn-center__layout {
		grid-template-columns: 1fr;
		padding-top: 32px;
		padding-bottom: 48px;
	}

	.qisyn-card {
		padding: 24px 20px;
	}

	.qisyn-center .qisyn-card__title {
		font-size: 1.5rem;
	}

	.qisyn-service {
		flex-wrap: wrap;
	}

	.qisyn-service__body {
		flex-basis: calc(100% - 64px);
	}

	.qisyn-answer {
		margin-left: 60px;
	}
}