/* SIRON Products — alleen wat het thema niet al doet.
   Kleuren aanpassen via --sp-navy en --sp-line. */

:root {
	--sp-navy: #002B54;
	--sp-ink: #1A2430;
	--sp-muted: #5E6E7E;
	--sp-line: #DCE3E9;
	--sp-soft: #F4F6F8;
}

.sp-title {
	margin: 0 0 .5rem;
	line-height: 1.15;
	color: var(--sp-navy);
}

.sp-subtitle {
	margin: 0 0 1.5rem;
	font-size: 1.15em;
	line-height: 1.5;
	color: var(--sp-muted);
}

.sp-head { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.sp-head__media { flex: 0 0 38%; max-width: 38%; }
.sp-head__text { flex: 1 1 18rem; min-width: 0; }
.sp-head__text > :first-child { margin-top: 0; }
@media (max-width: 720px) {
	.sp-head__media { flex-basis: 100%; max-width: 100%; }
}

.sp-photo { margin: 0; }
.sp-photo__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 5px;
	background: var(--sp-soft);
}

.sp-block { margin: 2.5rem 0 0; }
.sp-block__title {
	margin: 0 0 .75rem;
	padding-bottom: .5rem;
	font-size: 1.1rem;
	border-bottom: 1px solid var(--sp-line);
	color: var(--sp-navy);
}

.sp-list { margin: 0; padding: 0; list-style: none; }
.sp-list li {
	padding: .5rem 0;
	border-bottom: 1px solid var(--sp-line);
	color: var(--sp-ink);
}
.sp-list li:last-child { border-bottom: 0; }

.sp-list--inline {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.sp-list--inline li {
	padding: .4rem .75rem;
	border: 1px solid var(--sp-line);
	border-radius: 5px;
	background: var(--sp-soft);
	font-size: .95em;
}

.sp-option { margin: 0 0 1.25rem; }
.sp-option:last-child { margin-bottom: 0; }
.sp-option__title {
	margin: 0 0 .5rem;
	font-size: .95rem;
	font-weight: 600;
	color: var(--sp-muted);
}

.sp-block--approvals .sp-list li { font-weight: 600; }

.sp-note {
	padding: 1.25rem 1.5rem;
	background: var(--sp-soft);
	border-left: 4px solid var(--sp-navy);
	border-radius: 0 5px 5px 0;
}
.sp-note .sp-block__title { border-bottom: 0; padding-bottom: 0; }
.sp-note p { margin: 0 0 .75rem; }
.sp-note p:last-child { margin-bottom: 0; }

.sp-datasheet { margin: 2rem 0 0; }
.sp-datasheet a { font-weight: 600; color: var(--sp-navy); }

.sp-cards { display: flex; flex-wrap: wrap; gap: .75rem; }
.sp-card {
	display: inline-block;
	padding: .6rem 1rem;
	border: 1px solid var(--sp-line);
	border-radius: 5px;
	text-decoration: none;
	color: var(--sp-navy);
	background: #fff;
}
.sp-card:hover { border-color: var(--sp-navy); }

.sp-grid {
	display: grid;
	grid-template-columns: repeat(var(--sp-cols, 3), minmax(0, 1fr));
	gap: 1.75rem;
	margin: 2rem 0;
}
@media (max-width: 900px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-grid { grid-template-columns: 1fr; } }

.sp-tile a { text-decoration: none; color: inherit; display: block; }
.sp-tile__img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sp-soft);
	border-radius: 5px;
	margin-bottom: .75rem;
}
.sp-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-tile__title { margin: 0 0 .25rem; font-size: 1.05rem; line-height: 1.3; color: var(--sp-navy); }
.sp-tile__sub { margin: 0; font-size: .92em; line-height: 1.45; color: var(--sp-muted); }

/* ------------------------------------------------------------------
   Offerte: knop, keuzestappen, lijst, formulier
   Velden zelf laten wij aan het thema (Flatsome .form-flat).
   ------------------------------------------------------------------ */

.spq { margin: 2rem 0 0; }

.spq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.5rem;
	border: 1px solid var(--sp-navy);
	border-radius: 5px;
	background: #fff;
	color: var(--sp-navy);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.spq-btn:hover { background: var(--sp-soft); color: var(--sp-navy); }
.spq-btn--primary { background: var(--sp-navy); color: #fff; }
.spq-btn--primary:hover { background: #00406F; color: #fff; }
.spq-btn--ghost { border-color: var(--sp-line); color: var(--sp-ink); }
.spq-btn[disabled] { opacity: .6; cursor: default; }

.spq-promise {
	margin: .75rem 0 0;
	font-size: .92em;
	line-height: 1.5;
	color: var(--sp-muted);
	max-width: 46rem;
}

.spq-panel {
	margin: 1.5rem 0 0;
	padding: 1.5rem;
	border: 1px solid var(--sp-line);
	border-radius: 5px;
	background: #fff;
}

.spq-step { margin: 0 0 1.5rem; padding: 0; border: 0; }
.spq-step:last-of-type { margin-bottom: 0; }
.spq-step__title {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .75rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--sp-navy);
}
.spq-step__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--sp-navy);
	color: #fff;
	font-size: .85rem;
	flex: 0 0 auto;
}

.spq-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.spq-choice {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .55rem .9rem;
	border: 1px solid var(--sp-line);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	font-size: .95em;
	line-height: 1.3;
}
.spq-choice:hover { border-color: var(--sp-navy); }
.spq-choice input { margin: 0; flex: 0 0 auto; }
.spq-choice:has(input:checked) {
	border-color: var(--sp-navy);
	background: var(--sp-soft);
	font-weight: 600;
}
.spq-choice:focus-within { outline: 2px solid var(--sp-navy); outline-offset: 2px; }

.spq-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sp-line);
}
.spq-field--qty { width: 7rem; }
.spq-field label {
	display: block;
	margin-bottom: .35rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--sp-ink);
}
.spq-req { color: #B32D2E; }
.spq-error {
	margin: 1rem 0 0;
	padding: .75rem 1rem;
	border-left: 4px solid #B32D2E;
	border-radius: 0 5px 5px 0;
	background: #FDF2F2;
	color: #8A2423;
	font-size: .95em;
}

/* zwevende knop + melding */
.spq-fab {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 998;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .8rem 1.25rem;
	border-radius: 999px;
	background: var(--sp-navy);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 43, 84, .25);
}
.spq-fab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 .35rem;
	border-radius: 999px;
	background: #fff;
	color: var(--sp-navy);
	font-size: .85rem;
}
.spq-toast {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	z-index: 999;
	max-width: min(30rem, calc(100vw - 2.5rem));
	padding: .9rem 1.25rem;
	border-radius: 5px;
	background: var(--sp-ink);
	color: #fff;
	font-size: .95em;
	line-height: 1.4;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
	transform: translate(-50%, 1.5rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.spq-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.spq-toast a { color: #fff; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.spq-toast, .spq-btn { transition: none; }
}

/* ---------- aanvraagformulier ---------- */

.spq-rfq { max-width: 54rem; }

.spq-progress {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	counter-reset: spq;
}
.spq-progress li {
	counter-increment: spq;
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .95em;
	color: var(--sp-muted);
}
.spq-progress li::before {
	content: counter(spq);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border: 1px solid var(--sp-line);
	border-radius: 50%;
	background: #fff;
	font-size: .85rem;
	flex: 0 0 auto;
}
.spq-progress li.is-current { color: var(--sp-navy); font-weight: 600; }
.spq-progress li.is-current::before { border-color: var(--sp-navy); background: var(--sp-navy); color: #fff; }
.spq-progress li.is-done::before { content: "\2713"; border-color: var(--sp-navy); color: var(--sp-navy); }

.spq-pane { margin: 0; padding: 0; border: 0; }
.spq-legend {
	display: block;
	width: 100%;
	margin: 0 0 1.5rem;
	padding: 0 0 .5rem;
	border-bottom: 1px solid var(--sp-line);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--sp-navy);
}
.spq-legend:focus { outline: none; }

.spq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0 0 1.25rem;
}
@media (max-width: 600px) { .spq-grid { grid-template-columns: 1fr; } }

.spq-items { margin: 0 0 1.5rem; }
.spq-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--sp-line);
}
.spq-item:first-child { border-top: 1px solid var(--sp-line); }
.spq-item__info { flex: 1 1 16rem; min-width: 0; }
.spq-item__title { display: block; font-weight: 600; color: var(--sp-navy); text-decoration: none; }
.spq-item__meta { display: block; margin: .25rem 0 .6rem; font-size: .92em; color: var(--sp-muted); }
.spq-item__note { width: 100%; }
.spq-item__qty { width: 6.5rem; flex: 0 0 auto; }
.spq-item__qty label { display: block; margin-bottom: .35rem; font-size: .85rem; color: var(--sp-muted); }
.spq-item__remove {
	flex: 0 0 auto;
	align-self: center;
	padding: .4rem .6rem;
	border: 0;
	background: none;
	color: var(--sp-muted);
	font: inherit;
	font-size: .9em;
	text-decoration: underline;
	cursor: pointer;
}
.spq-item__remove:hover { color: #B32D2E; }

.spq-empty {
	padding: 1.75rem;
	border: 1px dashed var(--sp-line);
	border-radius: 5px;
	background: var(--sp-soft);
	margin: 0 0 1.5rem;
}
.spq-empty p { margin: 0 0 1rem; color: var(--sp-muted); }

.spq-consent {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin: 1.5rem 0 0;
	font-size: .95em;
	line-height: 1.5;
}
.spq-consent input { margin: .2rem 0 0; flex: 0 0 auto; }

.spq-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.spq-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sp-line);
}

.spq-success {
	padding: 2rem;
	border: 1px solid var(--sp-line);
	border-top: 4px solid var(--sp-navy);
	border-radius: 5px;
	background: var(--sp-soft);
}
.spq-success h2 { margin: 0 0 .75rem; color: var(--sp-navy); }
.spq-success p { margin: 0 0 .75rem; }
.spq-success .spq-btn { margin-top: .75rem; }

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

.spq-cross { margin: 2.5rem 0 0; }