/*
 * Angebotsanfrage (Modul quote-request).
 * CTA: sekundär (Outline) neben dem primären Warenkorb-Button — bewusste
 * Hierarchie, damit zwei CTAs die Kaufrate nicht verwässern (Guardrail 1).
 * Formular: ruhig, wenige Felder, 48px-Touchziele, echte Labels (WCAG AA).
 */

/* ---------- CTA auf der Produktseite ----------
   vertical-align:top und gleiche Höhe wie der Warenkorb-Button, damit beide
   exakt auf einer Linie stehen (Nutzerfeedback: CTA war versetzt). */
.zwcl-quote-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	vertical-align: top;
	min-height: 48px;
	margin-left: 0.7rem;
	padding: 0.7rem 1.4rem;
	/* Gefüllter Forest-Button (Nutzerentscheidung 2026-07-10): Die Angebots-
	   anfrage ist laut Anforderung ein GLEICHWERTIGER Weg zum Kauf — Forest ist
	   die Beratungs-/Vertrauensfarbe der Marke und trennt klar vom Petrol des
	   Warenkorbs. Bewusste, dokumentierte Abweichung von v1.1 §11 (Sekundär =
	   Camel-Kontur); die frühere Kontur-Variante steht im Git-Verlauf. */
	border: 1px solid var(--zcf-forest);
	border-radius: var(--radius-pill);
	background: var(--zcf-forest);
	color: var(--zcf-white);
	font-weight: 750;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.zwcl-quote-cta__icon {
	display: inline-flex;
	line-height: 0;
}

.zwcl-quote-cta:hover,
.zwcl-quote-cta:focus-visible {
	background: var(--zcf-ink);
	border-color: var(--zcf-ink);
	color: var(--zcf-white);
}

@media (max-width: 480px) {
	/* Mobil untereinander: nebeneinander würden beide Buttons zu schmal. */
	.zwcl-quote-cta {
		margin: 0.6rem 0 0;
		width: 100%;
	}
}

/* ---------- Formular ---------- */
.zwcl-quote-form {
	max-width: 46rem;
}

/* Angebotsliste (Phase A): mehrere Positionen untereinander. */
.zwcl-quote-items {
	margin-bottom: 1.4rem;
}

.zwcl-quote-items .zwcl-quote-product {
	margin-bottom: 0.8rem;
}

.zwcl-quote-product__qty {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.35rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.zwcl-quote-product__qty input {
	width: 5rem;
	min-height: 44px;
	padding: 0.4rem;
	text-align: center;
	border: 1px solid var(--zcf-border);
	border-radius: var(--radius);
	background: var(--zcf-white);
	font: inherit;
}

.zwcl-quote-product__remove {
	margin-left: auto;
	align-self: flex-start;
	font-size: 0.88rem;
	color: var(--zcf-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.zwcl-quote-product__remove:hover {
	color: var(--zcf-terracotta);
}

/* Partnerlook-Schnellzugriff je Position: das gleiche Modell fürs andere
   Geschlecht/Kinder mit einem Klick dazulegen. Bewusst zurückhaltend — es ist
   ein Angebot, keine Aufforderung. Eingerückt, damit die Zugehörigkeit zur
   Position darüber sichtbar bleibt. */
.zwcl-quote-partners {
	list-style: none;
	margin: -0.4rem 0 1rem;
	padding: 0 0 0 1rem;
	border-left: 2px solid var(--zcf-stone);
}

.zwcl-quote-partners li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0.3rem 0;
}

.zwcl-quote-partners__add {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--zcf-forest);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.zwcl-quote-partners__add:hover {
	color: var(--zcf-ink);
}

.zwcl-quote-partners__note {
	font-size: 0.85rem;
	color: var(--zcf-muted);
}

/* "Weiteren Artikel hinzufügen": echter Button (Nutzerwunsch 2026-07-11).
   Sekundär in Forest-Kontur — der Absende-Button bleibt der primäre Weg. */
.zwcl-quote-add-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	margin-top: 0.4rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--zcf-forest);
	border-radius: var(--radius-pill);
	background: var(--zcf-white);
	color: var(--zcf-forest);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.zwcl-quote-add-more:hover,
.zwcl-quote-add-more:focus-visible {
	background: var(--zcf-forest);
	color: var(--zcf-white);
}

/* Artikelkarte mit Bild: sofort klar, worum es geht. */
.zwcl-quote-product {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.8rem 1rem;
	margin-bottom: 1.2rem;
	background: var(--zcf-white);
	border: 1px solid var(--zcf-border);
	border-left: 4px solid var(--zcf-camel);
	border-radius: 8px;
}

.zwcl-quote-product__image img {
	display: block;
	width: 84px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain; /* Produkt nie beschneiden */
	border-radius: 6px;
}

.zwcl-quote-product__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.zwcl-quote-product__eyebrow {
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--zcf-camel);
}

.zwcl-quote-product__sku {
	font-size: 0.88rem;
	color: var(--zcf-muted);
}

/* Datei-Feld: gleiche Optik wie die übrigen Eingaben */
.zwcl-quote-field input[type="file"] {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.75rem;
	border: 1px dashed var(--zcf-border);
	border-radius: 8px;
	background: var(--zcf-white);
	font: inherit;
}

/* Nur für Screenreader (Hinweis „öffnet in neuem Tab") */
.zwcl-quote-cta .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.zwcl-quote-row {
	display: grid;
	gap: 0 1rem;
}

@media (min-width: 640px) {
	.zwcl-quote-row {
		grid-template-columns: 1fr 1fr;
	}
	/* Kontaktzeile: Firma · Anrede (schmal) · Name */
	.zwcl-quote-row--kontakt {
		grid-template-columns: 1fr auto 1fr;
	}
}

/* Anrede-Auswahl an die Höhe/Optik der Textfelder angleichen. */
.zwcl-quote-field--anrede select {
	width: 100%;
	min-width: 8rem;
}

.zwcl-quote-field {
	margin: 0 0 1rem;
}

.zwcl-quote-field label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.3rem;
}

.zwcl-quote-field input,
.zwcl-quote-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--zcf-border);
	border-radius: 8px;
	background: var(--zcf-white);
	font: inherit;
	color: inherit;
}

.zwcl-quote-field textarea {
	min-height: 6rem;
	resize: vertical;
}

.zwcl-quote-hint {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.88rem;
	color: var(--zcf-muted);
}

/* Versandwunsch (E-Mail / WhatsApp): ruhige Checkbox-Zeile statt Rahmen-Fieldset. */
.zwcl-quote-versandweg {
	border: 0;
	margin: 0 0 1rem;
	padding: 0;
}

.zwcl-quote-versandweg legend {
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.3rem;
	padding: 0;
}

.zwcl-quote-versandweg label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-right: 1.4rem;
	min-height: 44px; /* Touch-Ziel */
	font-size: 0.98rem;
}

.zwcl-quote-versandweg input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--zcf-petrol);
}

/* Honeypot: für Menschen unsichtbar, für Bots vorhanden.
   Kein display:none — manche Bots überspringen versteckte Felder. */
.zwcl-quote-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.zwcl-quote-submit {
	min-height: 48px;
	padding: 0.7rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--zcf-petrol);
	color: var(--zcf-cream);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

.zwcl-quote-submit:hover {
	background: var(--zcf-petrol);
}

.zwcl-quote-legal {
	margin-top: 1rem;
	font-size: 0.88rem;
	color: var(--zcf-muted);
}

.zwcl-quote-errors {
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.2rem;
	border: 1px solid var(--zcf-border);
	border-left: 4px solid var(--zcf-terracotta);
	border-radius: 8px;
	background: var(--zcf-white);
}

.zwcl-quote-errors ul {
	margin: 0.4rem 0 0;
}

.zwcl-quote-success {
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--zcf-border);
	border-left: 4px solid var(--zcf-forest);
	border-radius: 8px;
	background: var(--zcf-white);
}

/* Logo-Vorschau nach dem Upload (Nutzerwunsch 2026-07-19: Logo immer anzeigen). */
.zwcl-quote-logo-preview {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.9rem;
	color: var(--zcf-muted);
}

.zwcl-quote-logo-preview[hidden] {
	display: none;
}

.zwcl-quote-logo-preview__label {
	font-weight: 600;
	margin-right: 0.4rem;
}

.zwcl-quote-logo-preview__media {
	display: inline-block;
	vertical-align: middle;
}

.zwcl-quote-logo-preview__media img {
	max-width: 150px;
	max-height: 90px;
	height: auto;
	vertical-align: middle;
	border: 1px solid var(--zcf-border);
	border-radius: 6px;
	background: var(--zcf-white);
	padding: 6px;
}
.zwcl-quote-appointment-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .75rem 1.25rem;
	border: 1px solid var(--zcf-petrol, #23434a);
	border-radius: 999px;
	background: var(--zcf-petrol, #23434a);
	color: #fff;
	font-weight: 750;
	text-decoration: none;
}

.zwcl-quote-appointment-cta:hover,
.zwcl-quote-appointment-cta:focus-visible {
	background: var(--zcf-forest, #2f4a3b);
	color: #fff;
}