/**
 * Ergaenzung zu plate-configurator.css fuer den Ankerplatten-Konfigurator.
 *
 * Die Basis wird NICHT kopiert: der Wrapper traegt beide Klassen
 * (`stbk-plate-configurator stbk-ap-configurator`, siehe
 * anchor-plate-form-bridge.js _buildDom()), und class-anchor-plate-assets.php
 * laedt plate-configurator.css mit. Damit gelten Raster, Panels, Kacheln,
 * Abzeichen, Bohrungszeilen und der komplette Vollbildmodus unveraendert --
 * hier stehen nur die Teile, die es beim reinen Blech nicht gibt
 * (Profilauswahl, Preisaufschluesselung mit fuenf Posten, Hinweiszeilen).
 *
 * Folge fuer Aenderungen: wer plate-configurator.css umbaut, aendert damit
 * AUCH diesen Konfigurator. Das ist beabsichtigt -- beide sollen sich gleich
 * anfuehlen -- muss beim Testen aber mitbedacht werden.
 */

/* --- Profilauswahl ------------------------------------------------------ */

.stbk-ap-configurator .stbk-ap-profile-row select,
.stbk-ap-configurator .stbk-ap-profile-row input {
	width: 100%;
	box-sizing: border-box;
}

.stbk-ap-configurator select.stbk-ap-profile {
	padding: 8px 10px;
	border: 1px solid #d5d2c8;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
}

.stbk-ap-configurator .stbk-subsection-title {
	margin: 14px 0 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6a63;
}

.stbk-ap-configurator .stbk-tile-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* Ausrichtungs-Kacheln haben eine zweite, erklaerende Zeile -- die
   Blech-Kacheln kennen nur .stbk-tile-sub fuer Preise. */
.stbk-ap-configurator .stbk-tile-hint {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.3;
	color: #7a786f;
}

.stbk-ap-configurator .stbk-tile.is-active .stbk-tile-hint {
	color: rgba(255, 255, 255, 0.8);
}

.stbk-ap-configurator .stbk-section-note {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.45;
	color: #6b6a63;
}

/* --- Preiskarte --------------------------------------------------------- */

.stbk-ap-configurator .stbk-ap-price-card {
	margin-top: 18px;
	padding: 16px;
	border: 1px solid #e2dfd6;
	border-radius: 10px;
	background: #faf9f6;
}

.stbk-ap-configurator .stbk-ap-price-total {
	margin: 10px 0 4px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: #14171b;
}

.stbk-ap-configurator .stbk-ap-price-breakdown {
	margin-top: 8px;
	border-top: 1px solid #e6e3da;
	padding-top: 8px;
}

.stbk-ap-configurator .stbk-ap-price-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 13px;
	color: #4b4a45;
}

.stbk-ap-configurator .stbk-ap-price-row span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.stbk-ap-configurator .stbk-ap-handling-notice {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.45;
	color: #6b6a63;
}

/* --- Bohrungen ---------------------------------------------------------- */

/* Zwei Zeilen wie beim Blech (Begruendung dort in plate-configurator.css),
   hier aber mit eigenem Raster: die Ankerplatten-Zeile hat vier Elemente mehr
   -- Farbpunkt und laufende Nummer vorne, und Typ/Groesse sind blanke
   <select> statt beschrifteter <label>. Deshalb kann sie die Blech-Regel
   nicht einfach erben, obwohl sie deren Klasse mittraegt.

   Aufteilung:
     Zeile 1   Punkt | Nr. | X | Y
     Zeile 2   Bohrung/Gewinde (ueber drei Spalten) | Groesse
     rechts    Entfernen-Knopf, ueber beide Zeilen */
.stbk-ap-configurator .stbk-ap-hole-row {
	display: grid;
	grid-template-columns: auto auto 1fr 1fr auto;
	align-items: end;
	gap: 8px;
}
.stbk-ap-configurator .stbk-ap-hole-row > .stbk-ap-hole-dot {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}
.stbk-ap-configurator .stbk-ap-hole-row > .stbk-ap-hole-index {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
}
.stbk-ap-configurator .stbk-ap-hole-row > label:nth-of-type(1) {
	grid-column: 3;
	grid-row: 1;
}
.stbk-ap-configurator .stbk-ap-hole-row > label:nth-of-type(2) {
	grid-column: 4;
	grid-row: 1;
}
.stbk-ap-configurator .stbk-ap-hole-row > .stbk-ap-hole-kind {
	grid-column: 1 / 4;
	grid-row: 2;
}
.stbk-ap-configurator .stbk-ap-hole-row > .stbk-ap-hole-dia,
.stbk-ap-configurator .stbk-ap-hole-row > .stbk-ap-hole-thread {
	grid-column: 4;
	grid-row: 2;
}
.stbk-ap-configurator .stbk-ap-hole-row > .stbk-ap-hole-remove {
	grid-column: 5;
	grid-row: 1 / span 2;
	align-self: center;
}

/* Farbpunkt + laufende Nummer stellen die Zuordnung zwischen Zeile und
   3D-Modell her (gleiche Palette wie in den anderen Konfiguratoren). */
.stbk-ap-configurator .stbk-ap-hole-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.stbk-ap-configurator .stbk-ap-hole-index {
	flex: 0 0 auto;
	min-width: 14px;
	font-size: 12px;
	font-weight: 600;
	color: #6b6a63;
}

.stbk-ap-configurator .stbk-ap-hole-remove {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid #d5d2c8;
	border-radius: 6px;
	background: #fff;
	font-size: 16px;
	line-height: 1;
	color: #8a3b2e;
	cursor: pointer;
}

.stbk-ap-configurator .stbk-ap-hole-remove:hover {
	background: #f6ece9;
	border-color: #c9a79f;
}

.stbk-ap-configurator .stbk-ap-add-hole {
	margin-top: 8px;
	padding: 8px 14px;
	border: 1px dashed #c9c5b9;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	color: #14171b;
	cursor: pointer;
}

.stbk-ap-configurator .stbk-ap-add-hole:hover {
	border-color: #e8622c;
	color: #e8622c;
}

/* --- Passt-nicht-Hinweis ------------------------------------------------ */

/* Nutzt die Konflikt-Optik der Bohrungszeilen, steht aber im Traeger-
   Abschnitt: der Fall ist derselbe Schweregrad (Konfiguration so nicht
   fertigbar), nur eine Ebene hoeher. */
.stbk-ap-configurator .stbk-ap-fit-notice {
	margin-top: 10px;
}

/* --- Vollbild ----------------------------------------------------------- */

/* Der Platzhalter haelt im Vollbild die Luecke offen, an die der
   umgehaengte Abschnitt danach zurueckkehrt (siehe _toggleFullscreen()).
   Er darf keinen eigenen Raum einnehmen. */
.stbk-ap-configurator .stbk-ap-placeholder {
	display: none;
}

/* --- a-Maß-Feld ---------------------------------------------------------- */

/* Nur ein Feld in der Zeile (Laenge/Breite teilen sich zwei) -- sonst zoege
   es sich ueber die halbe Spalte, ohne dass daneben etwas steht. */
.stbk-ap-configurator .stbk-ap-weld-row {
	grid-template-columns: 1fr 1fr;
}

.stbk-ap-configurator .stbk-ap-weld-hint {
	margin: 8px 0 2px;
	font-size: 13px;
	font-weight: 600;
	color: #14171b;
	font-variant-numeric: tabular-nums;
}

/* --- Zweites Blech (Schubknagge) --------------------------------------- */

/* Der Schalter steht ueber den Massfeldern und schaltet sie ein. Als <label>
   gebaut, damit auch der Text klickbar ist -- eine Checkbox allein ist auf
   dem Handy ein zu kleines Ziel. */
.stbk-ap-configurator .stbk-ap-plate2-switch {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.4;
	color: #2b2a26;
}
.stbk-ap-configurator .stbk-ap-plate2-switch input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	cursor: pointer;
	accent-color: var(--stbk-accent, #e8622c);
}

/* Drei Felder nebeneinander (Laenge, Breite, Dicke). Umbruch statt Quetschen,
   sobald die Spalte zu schmal wird -- dieselbe Ueberlegung wie bei den
   Bohrungszeilen, siehe plate-configurator.css. */
.stbk-ap-configurator .stbk-ap-plate2-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}
@media (max-width: 420px) {
	.stbk-ap-configurator .stbk-ap-plate2-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}