/**
 * Print-Engine – Frontend-Styling
 *
 * Integrations-Prinzip: wo immer möglich auf WooCommerce-Standardklassen
 * setzen (".shop_table", ".button.alt.single_add_to_cart_button" für den
 * Kauf-Button), damit das aktive Theme (z.B. Blocksy) automatisch seine
 * eigene Optik anwendet – Farbe, Radius, Hover-Zustand des Buttons kommen
 * dadurch 1:1 vom Theme.
 *
 * Für die Akzentfarben nutzen wir Blocksys CSS-Custom-Properties
 * (--theme-palette-color-1/-2), mit Fallback-Werten, falls das Theme
 * diese (noch) nicht definiert oder ein anderes Theme aktiv ist.
 *
 * WICHTIGE ÄNDERUNG gegenüber der ersten Version: Die Preisauswahl ist
 * KEIN kleiner Radio-Punkt mehr, sondern die komplette Zelle ist eine
 * grosse, klickbare "Karte". Ausgewählt = komplett eingefärbt + Häkchen.
 * Das native Radio-Input bleibt aus Barrierefreiheits-/Formular-Gründen
 * bestehen, wird aber optisch unsichtbar gemacht (nicht "display:none",
 * sondern per Clip-Technik – bleibt so für Screenreader/Tastatur nutzbar).
 */
.pe-configurator-panel,
.pe-matrix-section {
	--pe-heading-color: var( --theme-palette-color-1, #2f7cb0 );
	--pe-accent-color: var( --theme-palette-color-2, #e2a530 );
	--pe-accent-color-contrast: #ffffff;
	--pe-border-color: #e1e1e1;
	--pe-row-stripe: #f7f7f7;
}

/* -----------------------------------------------------------------------
 * Options-Panel (schmale Spalte, innerhalb der Produkt-Summary)
 * --------------------------------------------------------------------- */
.pe-configurator-panel {
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	border: 1px solid var( --pe-border-color );
	border-radius: var( --theme-card-border-radius, 6px );
	background: #fff;
}

.pe-panel-title {
	margin: 0 0 0.75em;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------
 * Absicherung gegen das doppelte Standard-Add-to-Cart-Formular
 * -----------------------------------------------------------------------
 * maybe_remove_default_add_to_cart() in class-pe-woocommerce.php entfernt
 * das Standardformular normalerweise sauber über remove_action(). Manche
 * Themes (u.a. Blocksy in bestimmten Konfigurationen) rendern den
 * Add-to-Cart-Bereich im Produkt-Template aber nicht strikt über die
 * WooCommerce-Standard-Hook-Priorität – dann läuft das remove_action()
 * ins Leere und das alte Formular (Mengenfeld + eigener Button) taucht
 * trotzdem auf. Diese Regel ist die zweite Verteidigungslinie: Jedes
 * form.cart INNERHALB der Produkt-Zusammenfassung, das NICHT unser
 * eigenes Formular (.pe-cart-form) ist, wird ausgeblendet. Bewusst auf
 * .summary/.entry-summary begrenzt, damit z.B. Formulare in "Ähnliche
 * Produkte" weiter unten auf der Seite NICHT betroffen sind. */
.summary form.cart:not( .pe-cart-form ),
.entry-summary form.cart:not( .pe-cart-form ) {
	display: none !important;
}

.pe-configurator-panel .pe-field label {
	display: block;
	color: var( --pe-heading-color );
	font-weight: 600;
	margin-bottom: 0.35em;
}

.pe-configurator-panel .pe-material-select {
	width: 100%;
	padding: 0.6em 0.7em;
	border: 1px solid var( --pe-border-color );
	border-radius: var( --theme-input-border-radius, 4px );
	background: #fff;
	font: inherit;
}

.pe-configurator-panel .pe-material-select:focus {
	outline: none;
	border-color: var( --pe-heading-color );
	box-shadow: 0 0 0 1px var( --pe-heading-color );
}

/* -----------------------------------------------------------------------
 * "Ihre Auswahl"-Box – wird per JS direkt unter das Produktbild verschoben
 * (siehe frontend.js). Bewusst als EIGENSTÄNDIGER Block gestaltet (nicht
 * wie zuvor als Text-Zeile mitten im Konfigurator), mit klarer visueller
 * Trennung von Konfigurator und Preistabelle.
 * --------------------------------------------------------------------- */
.pe-current-selection {
	margin: 1em 0;
	padding: 1em 1.25em;
	background: #fff;
	border: 1px solid var( --pe-border-color, #e1e1e1 );
	border-radius: var( --theme-card-border-radius, 6px );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}

.pe-current-selection-title {
	margin: 0 0 0.6em;
	font-size: 0.95em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --pe-heading-color, #2f7cb0 );
}

.pe-current-selection-empty {
	margin: 0;
	font-size: 0.9em;
	color: #888;
	font-style: italic;
}

.pe-current-selection-details {
	margin: 0;
}

.pe-cs-row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.3em 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 0.92em;
}

.pe-cs-row:last-child {
	border-bottom: none;
}

.pe-cs-row dt {
	color: #777;
	font-weight: 500;
}

.pe-cs-row dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
}

.pe-cs-row--options dd {
	font-weight: 400;
	line-height: 1.5;
}

.pe-current-selection-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 0.7em;
	padding-top: 0.6em;
	border-top: 2px solid var( --pe-accent-color, #e2a530 );
	font-size: 1.05em;
}

.pe-current-selection-total strong {
	font-size: 1.2em;
	color: var( --pe-accent-color, #e2a530 );
}

/* -----------------------------------------------------------------------
 * Matrix-Sektion (vollbreiter Block unterhalb der Produkt-Summary)
 * --------------------------------------------------------------------- */
.pe-matrix-section {
	margin: 2em 0;
	padding-top: 1.5em;
	border-top: 1px solid var( --pe-border-color );
	/* Kein eigenes max-width mehr: Auf Blocksy musste dieser Hook
	   (woocommerce_after_single_product_summary) selbst begrenzt werden,
	   da er dort ausserhalb des normalen Content-Containers lag. Auf
	   WoodMart (aktuelles Theme) sitzt dieser Bereich bereits korrekt
	   innerhalb der normalen Seitenbreite – ein zusätzliches, hart
	   gesetztes max-width hätte hier nur wieder zu einer falschen Breite
	   relativ zum Rest der Seite geführt. Sollte ein zukünftiges Theme das
	   erneut brauchen, gehört die Breite dort themespezifisch (per
	   passender CSS-Variable) wieder ergänzt, nicht pauschal auf 1200px.
	*/
	box-sizing: border-box;
}

.pe-matrix-heading {
	margin: 0 0 1em;
	color: var( --pe-accent-color );
	font-size: 1.15em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* CSS-Grid statt Flex-Wrap: beide Auflagen-Hälften bekommen garantiert
   exakt gleich viel Platz und bleiben sauber untereinander ausgerichtet,
   unabhängig vom Inhalt (kein "Verrutschen" bei unterschiedlich langen
   Preisen mehr). */
.pe-matrix-columns {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) );
	gap: 1.5em 2em;
	align-items: start;
}

.pe-matrix-table-wrap {
	min-width: 0;
}

table.pe-matrix-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 0.4em;
	table-layout: fixed;
}

.pe-matrix-table col.pe-matrix-col-qty,
.pe-matrix-table th.pe-matrix-col-qty {
	width: 34%;
}

.pe-matrix-table th {
	padding: 0 0.5em 0.4em;
	text-align: center;
	font-size: 0.78em;
	font-weight: 700;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
}

.pe-matrix-table .pe-matrix-col-qty {
	text-align: left;
}

/* Voraussichtlicher Liefertermin, unter "Standard-/Budget-Lieferung" im
   Spaltenkopf – je Material/Lieferart fix (Auflage ändert daran nichts),
   siehe PE_Delivery_Calculator. */
.pe-matrix-delivery-date {
	display: block;
	margin-top: 0.15em;
	font-size: 0.85em;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: #999;
}

.pe-matrix-table tbody tr {
	background: var( --pe-row-stripe );
}

.pe-matrix-table tbody tr:nth-child( even ) {
	background: #eeeeee;
}

.pe-matrix-table td {
	padding: 0;
	vertical-align: middle;
}

.pe-matrix-table td.pe-matrix-col-qty {
	padding: 0 0.7em;
	font-weight: 700;
	font-size: 0.95em;
	white-space: nowrap;
}

.pe-matrix-table tbody tr td:first-child {
	border-top-left-radius: var( --theme-input-border-radius, 4px );
	border-bottom-left-radius: var( --theme-input-border-radius, 4px );
}

.pe-matrix-table tbody tr td:last-child {
	border-top-right-radius: var( --theme-input-border-radius, 4px );
	border-bottom-right-radius: var( --theme-input-border-radius, 4px );
}

/* -----------------------------------------------------------------------
 * Preisauswahl: eine grosse, eindeutige Karte pro Zelle statt Radio-Punkt.
 * Das <input type="radio"> existiert weiterhin im Markup (Formularlogik,
 * Barrierefreiheit), ist aber visuell komplett unsichtbar gemacht – die
 * ganze <label>-Fläche IST der Klick-/Auswahlbereich.
 * --------------------------------------------------------------------- */
.pe-price-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.pe-price-option {
	position: relative;
	display: block;
	margin: 0.15em 0.2em;
	padding: 0.65em 0.5em;
	text-align: center;
	background: #fff;
	border: 2px solid transparent;
	border-radius: var( --theme-input-border-radius, 4px );
	font-weight: 600;
	font-size: 0.95em;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.pe-price-option:hover {
	border-color: var( --pe-accent-color );
}

/* Tastatur-Fokus auf dem (unsichtbaren) Radio muss trotzdem sichtbar
   sein – wird auf die sichtbare Karte "durchgereicht". */
.pe-price-radio:focus-visible + .pe-price-text,
.pe-price-option:focus-within {
	outline: 2px solid var( --pe-heading-color );
	outline-offset: 2px;
}

/* Ausgewählter Zustand: klare, kräftige Füllung + Häkchen davor.
   Zwei redundante Mechanismen sorgen für die Markierung, damit sie in
   JEDEM Browser zuverlässig sichtbar ist:
   1. Die Klasse "is-selected" wird per JS gesetzt (siehe frontend.js).
   2. Zusätzlich :has() als CSS-natives Fallback/Backup. */
.pe-price-option.is-selected,
.pe-price-option:has( .pe-price-radio:checked ) {
	background: var( --pe-accent-color );
	border-color: var( --pe-accent-color );
	color: var( --pe-accent-color-contrast );
	transform: scale( 1.03 );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.15 );
}

.pe-price-option.is-selected::before,
.pe-price-option:has( .pe-price-radio:checked )::before {
	content: '✓';
	position: absolute;
	top: 4px;
	right: 6px;
	font-weight: 700;
	font-size: 0.85em;
	line-height: 1;
}

.pe-price-option--empty {
	display: block;
	padding: 0.65em 0.5em;
	margin: 0.15em 0.2em;
	color: #aaa;
	font-weight: 400;
	font-size: 0.85em;
	font-style: italic;
	text-align: center;
	cursor: default;
}

.pe-price-option--empty:hover {
	border-color: transparent;
}

/* Aktionspreis: regulärer VK durchgestrichen + Aktionspreis fett
   darunter/daneben. Nur sichtbar, wenn ein Aktionspreis > 0 hinterlegt
   ist (siehe PE_Pricing::has_active_action_price()). */
.pe-price-regular {
	display: block;
	text-decoration: line-through;
	opacity: 0.7;
	font-size: 0.85em;
	font-weight: 400;
}

.pe-price-action {
	display: block;
	font-weight: 700;
}

/* Reiner, immer sichtbarer Totalpreis der Zelle (Basis + evtl. Optionen,
   siehe refreshMatrixWithOptions() in frontend.js). Ersetzt die frühere
   separate "= CHF X.XX"-Zusatzzeile – nur noch EINE fett dargestellte Zahl.
   BEWUSST kein "display:block": das Häkchen (✓) wird per ::before direkt
   auf .pe-price-option gesetzt und muss auf derselben Zeile wie der Preis
   bleiben – als Block-Element würde es eine eigene Zeile erzwingen und
   die ausgewählte Karte unnötig in die Höhe ziehen. */
.pe-price-current {
	font-weight: 700;
}

/* -----------------------------------------------------------------------
 * Zusatzoptionen (Veredelungen/Verarbeitung) – jetzt IM Panel, direkt
 * unter der Grammatur-Auswahl (schmale Spalte, nicht die breite Matrix).
 * --------------------------------------------------------------------- */
.pe-options-list {
	margin: 1em 0;
}

.pe-option-item {
	padding: 0.6em 0;
	border-bottom: 1px solid #f0f0f0;
}

.pe-option-item:last-child {
	border-bottom: none;
}

.pe-option-item--checkbox .pe-option-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	cursor: pointer;
	font-weight: 400;
}

.pe-option-item--checkbox .pe-option-checkbox {
	margin-top: 0.2em;
}

.pe-option-item--select .pe-option-label {
	display: block;
	font-weight: 600;
	color: var( --pe-heading-color );
	margin-bottom: 0.35em;
}

.pe-option-item .pe-option-select {
	width: 100%;
	padding: 0.5em 0.6em;
	border: 1px solid var( --pe-border-color, #e1e1e1 );
	border-radius: var( --theme-input-border-radius, 4px );
	background: #fff;
	font: inherit;
}

.pe-option-item .pe-option-label {
	font-weight: 600;
}

.pe-option-description {
	margin-top: 0.4em;
	font-size: 0.85em;
	color: #666;
	line-height: 1.4;
}

.pe-option-description p:first-child {
	margin-top: 0;
}

.pe-option-description p:last-child {
	margin-bottom: 0;
}

.pe-option-description a {
	text-decoration: underline;
}

/* Experten-Optionen: nativer <details>-Aufklapper, kein JS nötig. */
.pe-options-expert {
	margin-top: 0.75em;
	border-top: 1px solid var( --pe-border-color, #e1e1e1 );
	padding-top: 0.6em;
}

.pe-options-expert > summary {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	font-weight: 700;
	color: var( --pe-accent-color, #e2a530 );
	list-style: none;
}

.pe-options-expert > summary::-webkit-details-marker {
	display: none;
}

/* Gängiges Chevron-Dreieck statt "+"/"-": zeigt geschlossen nach rechts,
   dreht sich beim Aufklappen auf "nach unten". Reines CSS-Dreieck via
   Border-Trick, keine externe Icon-Bibliothek nötig. */
.pe-options-expert-arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid var( --pe-accent-color, #e2a530 );
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.pe-options-expert[open] > summary .pe-options-expert-arrow {
	transform: rotate( 90deg );
}

.pe-options-expert-inner {
	margin-top: 0.5em;
}

/* -----------------------------------------------------------------------
 * Kaufbereich: grosse Bestätigungszeile + Button
 * --------------------------------------------------------------------- */
.pe-matrix-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75em;
	margin-top: 1.75em;
}

/* Zweiter Kaufen-Button direkt in der "Ihre Auswahl"-Box, synchron zum
   Button unter der Matrix (beide teilen sich .pe-add-to-cart-button und
   werden von frontend.js identisch behandelt). */
.pe-add-to-cart-button--box {
	display: block;
	width: 100%;
	margin-top: 1em;
}

/* Bewusst KEINE eigene Button-Farb-/Radius-Optik – "button alt
   single_add_to_cart_button" im Markup sorgt dafür, dass das Theme
   seinen normalen Kauf-Button-Stil anwendet. Hier nur Layout-Feinheiten. */
.pe-add-to-cart-button:disabled,
.pe-add-to-cart-button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pe-notice {
	color: #a94442;
}

.pe-loading {
	font-style: italic;
	color: #666;
}

/* -----------------------------------------------------------------------
 * Bestätigungs-Modal nach erfolgreichem Add-to-Cart
 * --------------------------------------------------------------------- */
.pe-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 0, 0, 0, 0.55 );
	align-items: center;
	justify-content: center;
	padding: 1em;
}

.pe-modal-overlay.is-visible {
	display: flex;
}

.pe-modal {
	background: #fff;
	border-radius: var( --theme-card-border-radius, 6px );
	max-width: 480px;
	width: 100%;
	padding: 1.5em;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
	max-height: 90vh;
	overflow-y: auto;
}

.pe-modal h3 {
	margin: 0 0 1em;
	color: var( --pe-heading-color, #2f7cb0 );
}

.pe-modal-details {
	margin: 0 0 1em;
}

.pe-modal-row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.3em 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 0.92em;
}

.pe-modal-row dt {
	color: #777;
	font-weight: 500;
}

.pe-modal-row dd {
	margin: 0;
	text-align: right;
}

.pe-modal-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 0.6em;
	border-top: 2px solid var( --pe-accent-color, #e2a530 );
	font-size: 1.1em;
	margin-bottom: 1em;
}

.pe-modal-total strong {
	font-size: 1.3em;
	color: var( --pe-accent-color, #e2a530 );
}

.pe-modal-hint {
	font-size: 0.88em;
	color: #555;
	background: #f7f7f7;
	border-left: 3px solid var( --pe-accent-color, #e2a530 );
	padding: 0.6em 0.8em;
	margin-bottom: 1.2em;
}

.pe-modal-actions {
	display: flex;
	gap: 0.75em;
	flex-wrap: wrap;
}

.pe-modal-actions .button {
	flex: 1 1 auto;
	text-align: center;
}

/* -----------------------------------------------------------------------
 * Responsive
 * --------------------------------------------------------------------- */
@media ( max-width: 480px ) {
	.pe-matrix-table td.pe-matrix-col-qty {
		font-size: 0.85em;
	}

	.pe-price-option,
	.pe-price-option--empty {
		font-size: 0.85em;
		padding: 0.5em 0.3em;
	}

	.pe-matrix-actions {
		align-items: stretch;
	}

	.pe-add-to-cart-button {
		width: 100%;
	}

	.pe-modal-actions {
		flex-direction: column;
	}
}