/* =========================================================================
   GRAND THEFT PLANET – KAUFABSCHLUSS (Warenkorb, Kasse, Bestaetigung)
   ========================================================================= */

/* =========================================================================
   GRAND THEFT PLANET – WARENKORB & KASSE

   1. Grundlage + Resets
   2. Kopfblock mit Fortschrittsanzeige
   3. Warenkorb-Tabelle
   4. Gutschein + Aktionen
   5. Summen-Panel
   6. Kasse: Formularfelder
   7. Kasse: Bestellübersicht + Zahlung
   8. Hinweisboxen
   9. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. GRUNDLAGE + RESETS
   ---------------------------------------------------------------------- */

body.gtp-flow-page {
	background: var(--gtp-ink, #060606) !important;
	overflow-x: hidden;
}

body.gtp-flow-page #primary,
body.gtp-flow-page #content,
body.gtp-flow-page .content-area,
body.gtp-flow-page .site-main,
body.gtp-flow-page .site-content,
body.gtp-flow-page .entry-content,
body.gtp-flow-page .woocommerce {
	background: transparent !important;
	max-width: 100% !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

body.gtp-flow-page .entry-header,
body.gtp-flow-page .page-title,
body.gtp-flow-page .woocommerce-breadcrumb {
	display: none !important;
}

/* Theme-eigene Seitenüberschrift ("Cart", "Checkout" …) hart ausblenden –
   unabhängig davon, wie das Theme sie nennt. Nur unsere eigene
   .gtp-flow__title bleibt sichtbar. */
body.gtp-flow-page h1:not(.gtp-flow__title) {
	display: none !important;
}

/* -------------------------------------------------------------------------
   2. KOPFBLOCK MIT FORTSCHRITTSANZEIGE
   Der Abstand zum fixierten Header hängt an diesem eigenen Element –
   nicht an einem geratenen Theme-Wrapper.
   ---------------------------------------------------------------------- */

.gtp-flow {
	position: relative;
	background:
		radial-gradient(80% 100% at 50% 0%, rgba(22, 132, 221, 0.1) 0%, rgba(22, 132, 221, 0) 70%),
		transparent;
}

.gtp-flow__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px 34px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.gtp-flow__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	padding: 6px 16px;
	background: rgba(22, 132, 221, 0.14) !important;
	border: 1px solid rgba(22, 132, 221, 0.55) !important;
	border-radius: 999px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

.gtp-flow__signal {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gtp-green, #94be72) !important;
	box-shadow: 0 0 7px rgba(148, 190, 114, 0.9);
	flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.gtp-flow__signal {
		animation: gtpFlowSignal 2.4s ease-in-out infinite;
	}
}

@keyframes gtpFlowSignal {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.gtp-flow__title {
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: clamp(2.4rem, 6vw, 4.4rem);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 26px !important;
	padding: 0 !important;
}

.gtp-flow__steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: none;
}

.gtp-flow__step {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Verbindungslinie zwischen den Schritten */
.gtp-flow__step + .gtp-flow__step::before {
	content: "";
	width: clamp(24px, 5vw, 60px);
	height: 1px;
	margin: 0 16px;
	background: rgba(255, 255, 255, 0.18);
	align-self: center;
	flex-shrink: 0;
}

.gtp-flow__step-num {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

.gtp-flow__step-label {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gtp-flow__step.is-upcoming .gtp-flow__step-num,
.gtp-flow__step.is-upcoming .gtp-flow__step-label {
	color: rgba(255, 255, 255, 0.58) !important;
}

.gtp-flow__step.is-active .gtp-flow__step-num {
	color: var(--gtp-blue, #1684dd) !important;
}

.gtp-flow__step.is-active .gtp-flow__step-label {
	color: #ffffff !important;
}

.gtp-flow__step.is-done .gtp-flow__step-num,
.gtp-flow__step.is-done .gtp-flow__step-label {
	color: var(--gtp-green, #94be72) !important;
}

/* -------------------------------------------------------------------------
   3. WARENKORB-TABELLE
   ---------------------------------------------------------------------- */

body.gtp-cart-page .woocommerce-cart-form,
body.gtp-cart-page .cart-empty,
body.gtp-cart-page .return-to-shop,
body.gtp-cart-page .cart-collaterals,
body.gtp-checkout-page form.checkout,
body.gtp-checkout-page .woocommerce-form-login,
body.gtp-checkout-page .woocommerce-form-coupon {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 0 28px;
	box-sizing: border-box;
}

body.gtp-cart-page .woocommerce-cart-form {
	padding-top: 36px;
}

body.gtp-cart-page table.shop_table {
	width: 100%;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 4px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: #0d0d0d !important;
	overflow: hidden;
}

body.gtp-cart-page table.shop_table thead th {
	padding: 16px 18px !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
	text-align: left;
}

body.gtp-cart-page table.shop_table td {
	padding: 18px !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.8) !important;
	vertical-align: middle;
}

body.gtp-cart-page table.shop_table tbody tr:last-child td {
	border-bottom: none !important;
}

body.gtp-cart-page td.product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

body.gtp-flow-page.gtp-cart-page td.product-name a,
body.gtp-cart-page td.product-name a {
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	color: #ffffff !important;
	text-decoration: none !important;
}

body.gtp-flow-page.gtp-cart-page td.product-name a:hover,
body.gtp-cart-page td.product-name a:hover {
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

body.gtp-cart-page td.product-price,
body.gtp-cart-page td.product-subtotal {
	color: #ffffff !important;
	font-weight: 600;
}

body.gtp-cart-page td.product-remove a.remove {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 4px;
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none !important;
	transition: border-color 0.2s ease, color 0.2s ease;
}

body.gtp-cart-page td.product-remove a.remove:hover {
	border-color: var(--gtp-blue, #1684dd) !important;
	color: #ffffff !important;
	background: transparent !important;
}

/* Mengenfeld in der Tabelle */
body.gtp-cart-page td.product-quantity .quantity {
	display: inline-flex;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 4px;
	overflow: hidden;
}

body.gtp-cart-page td.product-quantity .qty {
	width: 58px;
	height: 44px;
	background: rgba(255, 255, 255, 0.04) !important;
	border: none !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

body.gtp-cart-page td.product-quantity .qty::-webkit-inner-spin-button,
body.gtp-cart-page td.product-quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -------------------------------------------------------------------------
   4. GUTSCHEIN + AKTIONEN
   ---------------------------------------------------------------------- */

body.gtp-cart-page td.actions {
	padding: 20px 18px !important;
	background: rgba(255, 255, 255, 0.02) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.gtp-cart-page .coupon {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: stretch;
}

body.gtp-cart-page .coupon label {
	display: none;
}

body.gtp-flow-page input[type="text"],
body.gtp-flow-page input[type="email"],
body.gtp-flow-page input[type="tel"],
body.gtp-flow-page input[type="password"],
body.gtp-flow-page input[type="number"],
body.gtp-flow-page textarea,
body.gtp-flow-page select,
body.gtp-flow-page .select2-container .select2-selection {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 4px !important;
	padding: 12px 14px !important;
	height: auto !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif !important;
	font-size: 0.9rem !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease;
}

body.gtp-flow-page input:focus,
body.gtp-flow-page textarea:focus,
body.gtp-flow-page select:focus {
	border-color: var(--gtp-blue, #1684dd) !important;
	outline: none !important;
}

body.gtp-flow-page input::placeholder,
body.gtp-flow-page textarea::placeholder {
	color: rgba(255, 255, 255, 0.58) !important;
}

/* Select2 (Länderauswahl) */
body.gtp-flow-page .select2-container .select2-selection__rendered {
	color: #ffffff !important;
	line-height: 1.4 !important;
	padding: 0 !important;
}

body.gtp-flow-page .select2-container .select2-selection__arrow {
	height: 100% !important;
	right: 10px !important;
}

/* Buttons allgemein */
body.gtp-flow-page .button,
body.gtp-flow-page button.button,
body.gtp-flow-page input.button,
body.gtp-flow-page a.button {
	padding: 13px 26px !important;
	background: transparent !important;
	border: 2px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.gtp-flow-page .button:hover,
body.gtp-flow-page .button:focus-visible,
body.gtp-flow-page button.button:hover,
body.gtp-flow-page button.button:focus-visible,
body.gtp-flow-page input.button:hover,
body.gtp-flow-page input.button:focus-visible,
body.gtp-flow-page a.button:hover,
body.gtp-flow-page a.button:focus-visible {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

body.gtp-flow-page .button:disabled,
body.gtp-flow-page button.button:disabled,
body.gtp-flow-page .button.disabled {
	opacity: 0.35 !important;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   5. SUMMEN-PANEL
   ---------------------------------------------------------------------- */

body.gtp-cart-page .cart-collaterals {
	padding-top: 40px;
	padding-bottom: 90px;
	display: flex;
	justify-content: flex-end;
}

body.gtp-cart-page .cart_totals {
	width: 100% !important;
	max-width: 460px;
	float: none !important;
	padding: 24px !important;
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 2px solid var(--gtp-blue, #1684dd);
	border-radius: 4px;
	box-sizing: border-box;
}

body.gtp-cart-page .cart_totals h2 {
	font-family: "Archivo", Arial, sans-serif !important;
	font-size: 0.68rem !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
	margin: 0 0 18px !important;
}

body.gtp-cart-page .cart_totals table.shop_table {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	margin-bottom: 20px !important;
}

body.gtp-cart-page .cart_totals table.shop_table th,
body.gtp-cart-page .cart_totals table.shop_table td {
	padding: 12px 0 !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.86rem;
}

body.gtp-cart-page .cart_totals table.shop_table th {
	color: rgba(255, 255, 255, 0.65) !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.7rem;
	width: 45%;
}

body.gtp-cart-page .cart_totals table.shop_table td {
	color: #ffffff !important;
	text-align: right;
}

body.gtp-cart-page .cart_totals tr.order-total th,
body.gtp-cart-page .cart_totals tr.order-total td {
	border-bottom: none !important;
	padding-top: 16px !important;
	font-size: 1.05rem !important;
	color: #ffffff !important;
}

body.gtp-cart-page .wc-proceed-to-checkout {
	padding: 0 !important;
}

body.gtp-cart-page .wc-proceed-to-checkout a.checkout-button {
	display: block !important;
	width: 100%;
	text-align: center;
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
	font-size: 0.82rem !important;
	padding: 16px 20px !important;
}

body.gtp-cart-page .wc-proceed-to-checkout a.checkout-button:hover,
body.gtp-cart-page .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background: var(--gtp-blue-dark, #0e5690) !important;
	border-color: var(--gtp-blue-dark, #0e5690) !important;
}

/* Leerer Warenkorb */
body.gtp-cart-page .cart-empty {
	padding-top: 50px !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.72) !important;
}

body.gtp-cart-page .return-to-shop {
	padding-top: 24px !important;
	padding-bottom: 90px !important;
}

/* -------------------------------------------------------------------------
   6. KASSE: FORMULARFELDER
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   KASSEN-LAYOUT

   WooCommerce legt DREI direkte Kinder in dieses Formular:
     1. #customer_details      (Adressfelder)
     2. #order_review_heading  (Ueberschrift "Your order")
     3. #order_review          (Bestelluebersicht + Zahlung)
   Bei einem Fehler kommt ein VIERTES dazu: .woocommerce-NoticeGroup.

   Ohne feste Platzierung verteilt das Raster diese Kinder automatisch:
   die Ueberschrift landete rechts, die Uebersicht darunter aber wieder
   links - und sobald die Fehlermeldung als viertes Kind dazukam,
   verrutschte alles. Genau das passierte beim Klick auf "Complete order".

   Deshalb: jedes Element bekommt seinen Platz ausdruecklich zugewiesen.
   Zeile 1 bleibt fuer Meldungen reserviert und ist leer, solange keine
   da sind.
   ---------------------------------------------------------------------- */
body.gtp-checkout-page form.checkout {
	padding-top: 40px;
	padding-bottom: 90px;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 30px 50px;
	align-items: start;
}

/* Meldungen ueber die volle Breite, ganz oben */
body.gtp-checkout-page form.checkout > .woocommerce-NoticeGroup,
body.gtp-checkout-page form.checkout > .woocommerce-error,
body.gtp-checkout-page form.checkout > .woocommerce-message,
body.gtp-checkout-page form.checkout > .woocommerce-info {
	grid-column: 1 / -1;
	margin-bottom: 30px !important;
}

/* Die rechte Spalte ist jetzt EIN Container (siehe checkout.php).
   Dadurch besteht das Raster nur noch aus zwei gleichrangigen Spalten -
   kein Zeilen-Spannen mehr, keine Verschiebung durch lange Formulare,
   kein Verrutschen durch nachtraeglich eingefuegte Meldungen. */
body.gtp-checkout-page form.checkout > #customer_details {
	grid-column: 1;
}

body.gtp-checkout-page form.checkout > .gtp-checkout__side {
	grid-column: 2;
	position: sticky;
	top: 130px;
}

/* Sicherheitsnetz: alles Unerwartete spannt ueber die volle Breite,
   statt sich in eine Spalte zu quetschen. */
body.gtp-checkout-page form.checkout > *:not(#customer_details):not(.gtp-checkout__side) {
	grid-column: 1 / -1;
}

body.gtp-checkout-page #customer_details {
	width: auto !important;
	float: none !important;
}

body.gtp-checkout-page #customer_details .col-1,
body.gtp-checkout-page #customer_details .col-2 {
	width: auto !important;
	float: none !important;
	margin-bottom: 30px;
}

body.gtp-checkout-page h3,
body.gtp-checkout-page #order_review_heading {
	font-family: "Archivo", Arial, sans-serif !important;
	font-size: 0.68rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.58) !important;
	margin: 0 0 18px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.gtp-checkout-page .form-row {
	margin: 0 0 16px !important;
	padding: 0 !important;
}

body.gtp-checkout-page .form-row label {
	display: block;
	margin-bottom: 7px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65) !important;
}

body.gtp-checkout-page .form-row .required {
	color: var(--gtp-blue, #1684dd) !important;
	text-decoration: none;
}

body.gtp-checkout-page .form-row input,
body.gtp-checkout-page .form-row textarea,
body.gtp-checkout-page .form-row .select2-container {
	width: 100% !important;
	box-sizing: border-box;
}

body.gtp-checkout-page .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	gap: 9px;
	text-transform: none !important;
	letter-spacing: 0.02em !important;
	font-size: 0.82rem !important;
	color: rgba(255, 255, 255, 0.72) !important;
}

body.gtp-checkout-page .woocommerce-form__input-checkbox {
	width: auto !important;
	accent-color: var(--gtp-blue, #1684dd);
}

/* -------------------------------------------------------------------------
   7. KASSE: BESTELLÜBERSICHT + ZAHLUNG
   ---------------------------------------------------------------------- */

body.gtp-checkout-page #order_review {
	width: auto !important;
	float: none !important;
	padding: 24px !important;
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 2px solid var(--gtp-blue, #1684dd);
	border-radius: 4px;
	box-sizing: border-box;
}

body.gtp-checkout-page #order_review_heading {
	max-width: 1320px;
	margin: 0 0 14px !important;
}

body.gtp-checkout-page table.woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0 0 22px !important;
	background: transparent !important;
	border: none !important;
	border-collapse: collapse !important;
}

body.gtp-checkout-page table.woocommerce-checkout-review-order-table th,
body.gtp-checkout-page table.woocommerce-checkout-review-order-table td {
	padding: 12px 0 !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.8) !important;
}

body.gtp-checkout-page table.woocommerce-checkout-review-order-table thead th {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
}

body.gtp-checkout-page.gtp-flow-page table.woocommerce-checkout-review-order-table td.product-name,
body.gtp-checkout-page table.woocommerce-checkout-review-order-table td.product-name {
	color: #ffffff !important;
}

body.gtp-checkout-page table.woocommerce-checkout-review-order-table .product-total,
body.gtp-checkout-page table.woocommerce-checkout-review-order-table td:last-child,
body.gtp-checkout-page table.woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
}

body.gtp-checkout-page table.woocommerce-checkout-review-order-table tfoot th {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.gtp-checkout-page table.woocommerce-checkout-review-order-table tfoot td {
	color: #ffffff !important;
	font-weight: 600;
}

body.gtp-checkout-page table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.gtp-checkout-page table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	border-bottom: none !important;
	padding-top: 16px !important;
	font-size: 1.05rem !important;
	color: #ffffff !important;
}

/* Zahlungsarten */
body.gtp-checkout-page #payment {
	background: transparent !important;
	border-radius: 0 !important;
}

body.gtp-checkout-page #payment ul.payment_methods {
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: none !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
	padding-top: 20px !important;
	list-style: none !important;
}

body.gtp-checkout-page #payment ul.payment_methods li {
	margin: 0 0 10px !important;
	padding: 14px 16px !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 4px;
	list-style: none !important;
	transition: border-color 0.2s ease;
}

body.gtp-checkout-page #payment ul.payment_methods li:hover {
	border-color: rgba(22, 132, 221, 0.5) !important;
}

body.gtp-checkout-page #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.88rem;
	font-weight: 600;
	color: #ffffff !important;
	cursor: pointer;
}

body.gtp-checkout-page #payment ul.payment_methods li input[type="radio"] {
	accent-color: var(--gtp-blue, #1684dd);
	width: auto !important;
}

body.gtp-checkout-page #payment div.payment_box {
	margin: 12px 0 0 !important;
	padding: 14px 16px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 4px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8) !important;
}

body.gtp-checkout-page #payment div.payment_box::before {
	display: none !important;
}

body.gtp-checkout-page #payment .woocommerce-privacy-policy-text,
body.gtp-checkout-page #payment .woocommerce-terms-and-conditions-wrapper {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.78rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.65) !important;
	margin-bottom: 16px;
}

body.gtp-checkout-page #payment .woocommerce-privacy-policy-text a,
body.gtp-checkout-page #payment a {
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

/* Vertrauens-Signale über dem Bestell-Button */
.gtp-checkout__signals {
	list-style: none !important;
	margin: 0 0 20px !important;
	padding: 18px 0 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gtp-checkout__signals li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.72) !important;
}

.gtp-checkout__signal-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gtp-green, #94be72) !important;
	box-shadow: 0 0 6px rgba(148, 190, 114, 0.8);
	flex-shrink: 0;
}

/* Bestell-Button */
body.gtp-checkout-page #place_order {
	display: block !important;
	width: 100% !important;
	padding: 17px 20px !important;
	background: var(--gtp-blue-solid, #1479ca) !important;
	border: 2px solid var(--gtp-blue-solid, #1479ca) !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.gtp-checkout-page #place_order:hover {
	background: var(--gtp-blue-dark, #0e5690) !important;
	border-color: var(--gtp-blue-dark, #0e5690) !important;
}

/* Login-/Gutschein-Aufklapper oben */
body.gtp-checkout-page .woocommerce-form-login,
body.gtp-checkout-page .woocommerce-form-coupon {
	margin-top: 20px !important;
	padding: 22px 24px !important;
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 4px;
	max-width: 640px;
}

/* -------------------------------------------------------------------------
   8. HINWEISBOXEN
   ---------------------------------------------------------------------- */

body.gtp-flow-page .woocommerce-info,
body.gtp-flow-page .woocommerce-message,
body.gtp-flow-page .woocommerce-error,
body.gtp-flow-page .woocommerce-notices-wrapper > * {
	max-width: 1320px;
	margin: 20px auto 0 !important;
	padding: 16px 22px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-top: 2px solid var(--gtp-blue, #1684dd) !important;
	border-radius: 4px;
	color: rgba(255, 255, 255, 0.8) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
	list-style: none !important;
	box-sizing: border-box;
}

body.gtp-flow-page .woocommerce-error {
	border-top-color: var(--gtp-green, #94be72) !important;
}

/* Hinweisboxen als Flex-Zeile.
   Vorher war der Punkt ein inline-block-Element im Textfluss - sobald der
   Text umbrach, rutschte er auf eine eigene Zeile ueber den ersten
   Buchstaben ("Have a coupon?"). Mit Flex sitzt er garantiert links
   daneben, unabhaengig von der Textlaenge. */
body.gtp-flow-page .woocommerce-info a,
body.gtp-flow-page .woocommerce-message a,
body.gtp-flow-page .woocommerce-error a {
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

body.gtp-flow-page .woocommerce-info .button,
body.gtp-flow-page .woocommerce-message .button {
	margin-left: 12px;
	padding: 8px 16px !important;
	font-size: 0.68rem !important;
}

/* WooCommerces Lade-Overlay beim Neuberechnen der Summe (Land wechseln,
   Versandart wählen etc.) ist standardmäßig hell/halbtransparent-weiß –
   gegen das dunkle Theme wirkte das wie ausgegrauter, kaum lesbarer Text.
   Jetzt passend abgedunkelt statt aufgehellt. */
body.gtp-flow-page .blockUI.blockOverlay {
	background: rgba(6, 6, 6, 0.75) !important;
}

body.gtp-flow-page .blockUI.blockOverlay::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--gtp-blue, #1684dd);
	border-radius: 50%;
	animation: gtpSpin 0.8s linear infinite;
}

@keyframes gtpSpin {
	to {
		transform: rotate(360deg);
	}
}

/* -------------------------------------------------------------------------
   9. RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 980px) {
	body.gtp-checkout-page form.checkout {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	/* Einspaltig: feste Platzierung aufheben, sonst bleiben Luecken */
	body.gtp-checkout-page form.checkout > #customer_details,
	body.gtp-checkout-page form.checkout > #order_review_heading,
	body.gtp-checkout-page form.checkout > #order_review,
	body.gtp-checkout-page form.checkout > .woocommerce-NoticeGroup,
	body.gtp-checkout-page form.checkout > .woocommerce-error,
	body.gtp-checkout-page form.checkout > .woocommerce-message,
	body.gtp-checkout-page form.checkout > .woocommerce-info {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
}

@media (max-width: 900px) {
	.gtp-flow__inner,
	body.gtp-cart-page .woocommerce-cart-form,
	body.gtp-cart-page .cart-empty,
	body.gtp-cart-page .return-to-shop,
	body.gtp-cart-page .cart-collaterals,
	body.gtp-checkout-page form.checkout,
	body.gtp-checkout-page .woocommerce-form-login,
	body.gtp-checkout-page .woocommerce-form-coupon {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	body.gtp-cart-page .cart-collaterals {
		justify-content: stretch;
	}
	body.gtp-cart-page .cart_totals {
		max-width: 100%;
	}
}

@media (max-width: 700px) {
	/* Warenkorb-Tabelle stapeln statt quetschen */
	body.gtp-cart-page table.shop_table thead {
		display: none;
	}

	body.gtp-cart-page table.shop_table,
	body.gtp-cart-page table.shop_table tbody,
	body.gtp-cart-page table.shop_table tr,
	body.gtp-cart-page table.shop_table td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	body.gtp-cart-page table.shop_table tr.woocommerce-cart-form__cart-item {
		position: relative;
		padding: 16px 16px 8px !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
	}

	body.gtp-cart-page table.shop_table tr.woocommerce-cart-form__cart-item td {
		padding: 6px 0 !important;
		border: none !important;
		text-align: left !important;
	}

	body.gtp-cart-page td.product-remove {
		position: absolute;
		top: 14px;
		right: 14px;
		width: auto !important;
		padding: 0 !important;
	}

	body.gtp-cart-page td.product-thumbnail {
		display: block !important;
	}

	body.gtp-cart-page td.product-thumbnail img {
		width: 88px;
		height: 88px;
	}

	/* Beschriftung vor den Werten, da die Kopfzeile fehlt */
	body.gtp-cart-page td.product-price::before,
	body.gtp-cart-page td.product-quantity::before,
	body.gtp-cart-page td.product-subtotal::before {
		display: block;
		margin-bottom: 5px;
		font-family: "Archivo", Arial, sans-serif;
		font-size: 0.58rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.58);
	}

	body.gtp-cart-page td.product-price::before { content: "Price"; }
	body.gtp-cart-page td.product-quantity::before { content: "Quantity"; }
	body.gtp-cart-page td.product-subtotal::before { content: "Subtotal"; }

	body.gtp-cart-page td.actions {
		padding: 16px !important;
	}

	body.gtp-cart-page .coupon input[type="text"] {
		flex: 1;
		min-width: 0;
	}

	body.gtp-cart-page td.actions .button {
		width: 100%;
		margin-top: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.gtp-flow-page * {
		transition: none !important;
		animation: none !important;
	}
}


/* -------------------------------------------------------------------------
   Gruene Variante der Fortschrittsanzeige - auf der Bestellbestaetigung ist
   der Kauf abgeschlossen, deshalb Gruen statt Blau als Leitfarbe.
   ---------------------------------------------------------------------- */

.gtp-flow--green {
	background:
		radial-gradient(80% 100% at 50% 0%, rgba(148, 190, 114, 0.1) 0%, rgba(148, 190, 114, 0) 70%),
		transparent;
}

.gtp-flow--green .gtp-flow__eyebrow {
	background: rgba(148, 190, 114, 0.14) !important;
	border-color: rgba(148, 190, 114, 0.55) !important;
	color: var(--gtp-green-light, #eaf2e3) !important;
}

.gtp-flow--green .gtp-flow__step.is-active .gtp-flow__step-num {
	color: var(--gtp-green, #94be72) !important;
}

/* =========================================================================
   GRAND THEFT PLANET – BESTELLBESTÄTIGUNG

   1. Grundlage + Resets
   2. Kopfblock mit Fortschrittsanzeige (identisch zu Warenkorb/Kasse)
   3. Bestell-Dossier (Kennzahlen, Zeitleiste, Abschluss-Link)
   4. WooCommerce-Standardausgabe (Tabellen, Adressen)
   5. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. GRUNDLAGE + RESETS
   ---------------------------------------------------------------------- */

body.gtp-order-page {
	background: var(--gtp-ink, #060606) !important;
	overflow-x: hidden;
}

body.gtp-order-page #primary,
body.gtp-order-page #content,
body.gtp-order-page .content-area,
body.gtp-order-page .site-main,
body.gtp-order-page .site-content,
body.gtp-order-page .entry-content,
body.gtp-order-page .woocommerce {
	background: transparent !important;
	max-width: 100% !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

body.gtp-order-page .entry-header,
body.gtp-order-page .page-title,
body.gtp-order-page .woocommerce-breadcrumb {
	display: none !important;
}



/* Die Standard-Dankesmeldung ersetzen wir durch den eigenen Dossier-Block */
body.gtp-order-page p.woocommerce-notice--success,
body.gtp-order-page p.woocommerce-thankyou-order-received {
	display: none !important;
}

/* -------------------------------------------------------------------------
   2. KOPFBLOCK MIT FORTSCHRITTSANZEIGE
   (Eigene Kopie, damit das Plugin auch ohne das Cart-&-Checkout-Plugin
   vollständig funktioniert.)
   ---------------------------------------------------------------------- */

































/* -------------------------------------------------------------------------
   3. BESTELL-DOSSIER
   ---------------------------------------------------------------------- */

.gtp-order__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 28px 0;
	box-sizing: border-box;
}

.gtp-order__lead {
	max-width: 620px;
	margin: 0 0 30px !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.8) !important;
}

/* ---------- Kennzahlen ---------- */

.gtp-order__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	margin: 0 0 40px !important;
	padding: 0 !important;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-top: 2px solid var(--gtp-green, #94be72);
	border-radius: 4px;
	overflow: hidden;
}

.gtp-order__stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 20px 22px;
	background: #0d0d0d;
}

.gtp-order__stat dt {
	margin: 0;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
}

.gtp-order__stat dd {
	margin: 0;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: #ffffff !important;
	font-variant-numeric: tabular-nums;
}

.gtp-order__stat dd .amount,
.gtp-order__stat dd bdi {
	color: #ffffff !important;
}

/* ---------- Zeitleiste ---------- */

.gtp-order__next {
	margin-bottom: 40px;
	padding: 26px;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}

.gtp-order__next-title {
	display: block;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
}

.gtp-order__timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 26px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.gtp-order__timeline li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.gtp-order__timeline-num {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--gtp-green, #94be72) !important;
	padding-top: 3px;
	flex-shrink: 0;
}

.gtp-order__timeline-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.84rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72) !important;
}

.gtp-order__timeline-text strong {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff !important;
}

/* ---------- Abschluss-Link ---------- */

.gtp-order__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 46px;
	padding: 15px 32px;
	background: transparent !important;
	border: 2px solid #ffffff !important;
	color: #ffffff !important;
	text-decoration: none !important;
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.gtp-order__cta:hover,
.gtp-order__cta:focus-visible {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

.gtp-order__cta svg {
	transition: transform 0.25s ease;
}

.gtp-order__cta:hover svg,
.gtp-order__cta:focus-visible svg {
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   4. WOOCOMMERCE-STANDARDAUSGABE (Bestelltabelle, Adressen)
   ---------------------------------------------------------------------- */

body.gtp-order-page .woocommerce-order {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 0 28px 90px !important;
	box-sizing: border-box;
}

body.gtp-order-page ul.woocommerce-order-overview {
	display: none !important;
}

body.gtp-order-page .woocommerce-order-details,
body.gtp-order-page .woocommerce-customer-details {
	margin: 0 0 34px !important;
	padding: 26px !important;
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	box-sizing: border-box;
}

body.gtp-order-page .woocommerce-order h2,
body.gtp-order-page .woocommerce-column__title {
	font-family: "Archivo", Arial, sans-serif !important;
	font-size: 0.68rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.58) !important;
	margin: 0 0 20px !important;
	padding: 0 0 14px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.gtp-order-page table.woocommerce-table--order-details,
body.gtp-order-page table.shop_table {
	width: 100%;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-collapse: collapse !important;
}

body.gtp-order-page table.shop_table th,
body.gtp-order-page table.shop_table td {
	padding: 13px 0 !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.78) !important;
	text-align: left;
}

body.gtp-order-page table.shop_table thead th {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
}



body.gtp-order-page table.shop_table td.woocommerce-table__product-name a:hover {
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

body.gtp-order-page table.shop_table .product-quantity {
	color: rgba(255, 255, 255, 0.65) !important;
}

body.gtp-order-page table.shop_table td:last-child,
body.gtp-order-page table.shop_table th:last-child,
body.gtp-order-page table.shop_table tfoot td {
	text-align: right;
}

body.gtp-order-page table.shop_table tfoot th {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.gtp-order-page table.shop_table tfoot td {
	color: #ffffff !important;
	font-weight: 600;
}

body.gtp-order-page table.shop_table tfoot tr:last-child th,
body.gtp-order-page table.shop_table tfoot tr:last-child td {
	border-bottom: none !important;
	padding-top: 16px !important;
	font-size: 1.05rem !important;
	color: #ffffff !important;
}

/* Adressen */
body.gtp-order-page .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 30px;
	margin: 0 !important;
}

body.gtp-order-page .woocommerce-column {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.gtp-order-page address {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.88rem;
	font-style: normal;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.8) !important;
	border: none !important;
	padding: 0 !important;
}

/* Hinweisboxen */
body.gtp-order-page .woocommerce-info,
body.gtp-order-page .woocommerce-message,
body.gtp-order-page .woocommerce-error {
	max-width: 1320px;
	margin: 0 auto 24px !important;
	padding: 16px 22px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-top: 2px solid var(--gtp-green, #94be72) !important;
	border-radius: 4px;
	color: rgba(255, 255, 255, 0.8) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
	list-style: none !important;
	box-sizing: border-box;
}

/* Hinweisboxen als Flex-Zeile.
   Vorher war der Punkt ein inline-block-Element im Textfluss - sobald der
   Text umbrach, rutschte er auf eine eigene Zeile ueber den ersten
   Buchstaben ("Have a coupon?"). Mit Flex sitzt er garantiert links
   daneben, unabhaengig von der Textlaenge. */
/* -------------------------------------------------------------------------
   5. RESPONSIVE
   ---------------------------------------------------------------------- */



@media (max-width: 600px) {
	.gtp-order__stats {
		grid-template-columns: 1fr;
	}
	.gtp-order__cta {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
	body.gtp-order-page table.shop_table th,
	body.gtp-order-page table.shop_table td {
		font-size: 0.82rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtp-order__cta,
	.gtp-order__cta svg {
		transition: none !important;
	}
}


/* =========================================================================
   KUNDENKONTO

   WooCommerce "Mein Konto" – Login/Registrierung, Kontonavigation als
   nummerierte HUD-Liste, Bestellhistorie, Adressen.
   ========================================================================= */

body.gtp-account-page {
	background: var(--gtp-ink, #060606) !important;
	overflow-x: hidden;
}

body.gtp-account-page #primary,
body.gtp-account-page #content,
body.gtp-account-page .content-area,
body.gtp-account-page .site-main,
body.gtp-account-page .site-content,
body.gtp-account-page .entry-content,
body.gtp-account-page .woocommerce {
	background: transparent !important;
	max-width: 100% !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

body.gtp-account-page h1:not(.gtp-hud__title) {
	display: none !important;
}

body.gtp-account-page .entry-header,
body.gtp-account-page .page-title {
	display: none !important;
}

/* ---------- Login / Registrierung ---------- */

body.gtp-account-out .woocommerce {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 40px 28px 90px !important;
	box-sizing: border-box;
}

body.gtp-account-page .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin: 0 !important;
}

body.gtp-account-page .u-column1,
body.gtp-account-page .u-column2 {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 26px !important;
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 2px solid var(--gtp-blue, #1684dd);
	border-radius: 4px;
	box-sizing: border-box;
}

body.gtp-account-page .u-column1 h2,
body.gtp-account-page .u-column2 h2,
body.gtp-account-page form.login h2,
body.gtp-account-page form.register h2 {
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.68rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.65) !important;
	margin: 0 0 20px !important;
	padding: 0 0 14px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.gtp-account-page form.login,
body.gtp-account-page form.register {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
}

body.gtp-account-page .woocommerce-form-login__rememberme {
	display: block;
	margin: 4px 0 16px !important;
}

body.gtp-account-page .woocommerce-LostPassword a {
	color: rgba(255, 255, 255, 0.65) !important;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.78rem;
	text-decoration: underline;
}

body.gtp-account-page .woocommerce-LostPassword a:hover,
body.gtp-account-page .woocommerce-LostPassword a:focus-visible {
	color: #ffffff !important;
}

body.gtp-account-page .woocommerce-privacy-policy-text p {
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.78rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.58) !important;
}

.gtp-account__signals {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 0 28px 90px !important;
	box-sizing: border-box;
}

/* ---------- Eingeloggt: Layout ---------- */

body.gtp-account-in .woocommerce {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 40px 28px 90px !important;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 44px;
	align-items: start;
}

/* ---------- Kontonavigation als nummerierte HUD-Liste ---------- */

body.gtp-account-page .woocommerce-MyAccount-navigation {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

body.gtp-account-page .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	counter-reset: gtpacct;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	overflow: hidden;
	background: #0d0d0d;
}

body.gtp-account-page .woocommerce-MyAccount-navigation li {
	counter-increment: gtpacct;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body.gtp-account-page .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

body.gtp-account-page .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: baseline;
	gap: 11px;
	padding: 15px 18px;
	color: rgba(255, 255, 255, 0.65) !important;
	text-decoration: none !important;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.gtp-account-page .woocommerce-MyAccount-navigation li a::before {
	/* WooCommerce setzt auf dieses Pseudo-Element ein position:absolute
	   mit top/left. Ohne die naechsten drei Zeilen bleibt der Punkt absolut
	   positioniert und liegt mitten im Text statt daneben. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	content: counter(gtpacct, decimal-leading-zero);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	color: var(--gtp-blue, #1684dd) !important;
	opacity: 0.75;
}

body.gtp-account-page .woocommerce-MyAccount-navigation li a:hover,
body.gtp-account-page .woocommerce-MyAccount-navigation li a:focus-visible {
	background: rgba(255, 255, 255, 0.04) !important;
	color: #ffffff !important;
}

body.gtp-account-page .woocommerce-MyAccount-navigation li.is-active a {
	background: rgba(22, 132, 221, 0.14) !important;
	color: #ffffff !important;
	box-shadow: inset 2px 0 0 var(--gtp-blue, #1684dd);
}

body.gtp-account-page .woocommerce-MyAccount-navigation li.is-active a::before {
	/* WooCommerce setzt auf dieses Pseudo-Element ein position:absolute
	   mit top/left. Ohne die naechsten drei Zeilen bleibt der Punkt absolut
	   positioniert und liegt mitten im Text statt daneben. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	opacity: 1;
}

/* ---------- Inhaltsbereich ---------- */

body.gtp-account-page .woocommerce-MyAccount-content {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.94rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72) !important;
}

body.gtp-account-page .woocommerce-MyAccount-content p {
	color: rgba(255, 255, 255, 0.72) !important;
}

body.gtp-account-page .woocommerce-MyAccount-content a:not(.button) {
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

body.gtp-account-page .woocommerce-MyAccount-content h2,
body.gtp-account-page .woocommerce-MyAccount-content h3 {
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.68rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.65) !important;
	margin: 0 0 18px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- Bestellhistorie ---------- */

body.gtp-account-page table.woocommerce-orders-table,
body.gtp-account-page table.shop_table {
	width: 100%;
	margin: 0 !important;
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 4px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
}

body.gtp-account-page table.shop_table thead th {
	padding: 15px 16px !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
	text-align: left;
}

body.gtp-account-page table.shop_table td {
	padding: 16px !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.8) !important;
	vertical-align: middle;
}

body.gtp-account-page table.shop_table tbody tr:last-child td {
	border-bottom: none !important;
}

body.gtp-account-page .woocommerce-orders-table__cell-order-number a {
	color: #ffffff !important;
	font-weight: 600;
	text-decoration: none !important;
	font-variant-numeric: tabular-nums;
}

body.gtp-account-page .woocommerce-orders-table__cell-order-status {
	color: var(--gtp-green, #94be72) !important;
	font-weight: 600;
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------- Adressen ---------- */

body.gtp-account-page .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin: 0 !important;
}

body.gtp-account-page .woocommerce-Address {
	width: auto !important;
	float: none !important;
	padding: 22px !important;
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	box-sizing: border-box;
}

body.gtp-account-page .woocommerce-Address address {
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.88rem;
	font-style: normal;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72) !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ---------- Leere Bestellliste ---------- */

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
	body.gtp-account-in .woocommerce {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	body.gtp-account-in .woocommerce,
	body.gtp-account-out .woocommerce,
	.gtp-account__signals {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

@media (max-width: 600px) {
	body.gtp-account-page table.shop_table thead {
		display: none;
	}
	body.gtp-account-page table.shop_table,
	body.gtp-account-page table.shop_table tbody,
	body.gtp-account-page table.shop_table tr,
	body.gtp-account-page table.shop_table td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	body.gtp-account-page table.shop_table tr {
		padding: 14px 16px !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
	}
	body.gtp-account-page table.shop_table td {
		padding: 5px 0 !important;
		border: none !important;
	}
	body.gtp-account-page table.shop_table td::before {
		content: attr(data-title);
		display: block;
		margin-bottom: 4px;
		font-size: 0.58rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.58);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.gtp-account-page .woocommerce-MyAccount-navigation li a {
		transition: none !important;
	}
}


/* =========================================================================
   WOOCOMMERCE BLOCKS – WARENKORB & KASSE

   WooCommerce bietet zwei Varianten dieser Seiten an:
     - die klassische (Shortcode), die der Rest dieser Datei stylt
     - die neue Block-Variante mit komplett anderen CSS-Klassen
   Erkennbar an "Add coupons" und "Estimated total" statt "Coupon code"
   und "Cart totals".

   Auf der Block-Variante griff bislang KEINE unserer Regeln – daher
   die falschen Farben und die roten Produktlinks. Dieser Abschnitt
   deckt beide Varianten ab, damit die Seite in jedem Fall stimmt.
   ========================================================================= */

/* ---------- Grundfläche ---------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 40px 28px 90px !important;
	box-sizing: border-box;
	color: rgba(255, 255, 255, 0.8) !important;
	font-family: 'Archivo', Arial, sans-serif;
}

/* ---------- ROTE LINKS: alle Produktlinks in Blocks ---------- */

.wc-block-components-product-name,
a.wc-block-components-product-name,
.wc-block-cart-item__product a,
.wc-block-components-order-summary-item__description a,
.wp-block-woocommerce-cart a.wc-block-components-product-name,
.wp-block-woocommerce-checkout a.wc-block-components-product-name {
	color: #ffffff !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	font-size: 0.95rem !important;
}

.wc-block-components-product-name:hover,
.wc-block-components-product-name:focus-visible,
.wc-block-cart-item__product a:hover,
.wc-block-cart-item__product a:focus-visible {
	color: var(--gtp-blue-light, #d0e6f8) !important;
	text-decoration: none !important;
}

/* Alle übrigen Links in den Block-Bereichen */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a,
.wc-block-cart a,
.wc-block-checkout a {
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

/* ---------- Überschriften ---------- */

.wc-block-cart__main > h2,
.wc-block-components-title,
.wc-block-cart-items__header th,
.wp-block-woocommerce-checkout h2,
.wc-block-components-checkout-step__title {
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.68rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.65) !important;
}

.wc-block-cart-items__header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.wc-block-cart-items__header th {
	padding-bottom: 14px !important;
	background: transparent !important;
	border: none !important;
	text-align: left;
}

/* ---------- Artikelzeilen ---------- */

.wc-block-cart-items,
.wc-block-cart-items__row,
table.wc-block-cart-items {
	background: transparent !important;
	border: none !important;
	border-collapse: collapse !important;
	width: 100%;
}

.wc-block-cart-items__row {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.wc-block-cart-items__row td,
.wc-block-cart-item__wrap {
	background: transparent !important;
	border: none !important;
	padding: 20px 0 !important;
	color: rgba(255, 255, 255, 0.8) !important;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #0d0d0d;
}

/* Preise */
.wc-block-components-product-price,
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount,
.wc-block-components-totals-item__value {
	color: #ffffff !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-weight: 600 !important;
}

.wc-block-components-product-price__regular,
del .wc-block-formatted-money-amount {
	color: rgba(255, 255, 255, 0.58) !important;
	font-weight: 400 !important;
}

/* Ersparnis-Hinweis: unsere Grüntöne statt Standardfarbe */
.wc-block-components-sale-badge,
.wc-block-components-product-badge {
	background: rgba(148, 190, 114, 0.16) !important;
	border: 1px solid rgba(148, 190, 114, 0.5) !important;
	border-radius: 3px !important;
	color: var(--gtp-green, #94be72) !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.62rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding: 4px 9px !important;
}

/* Variantenangaben (Größe/Farbe) unter dem Produktnamen */
.wc-block-components-product-details,
.wc-block-components-product-metadata__description,
.wc-block-components-product-details__name,
.wc-block-components-product-details__value {
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.76rem !important;
	color: rgba(255, 255, 255, 0.65) !important;
	letter-spacing: 0.06em;
}

/* ---------- Mengenwähler ---------- */

.wc-block-components-quantity-selector {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 4px !important;
	overflow: hidden;
}

.wc-block-components-quantity-selector::after {
	display: none !important;
}

.wc-block-components-quantity-selector__input {
	background: transparent !important;
	border: none !important;
	color: #ffffff !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-weight: 600 !important;
}

.wc-block-components-quantity-selector__button {
	background: transparent !important;
	border: none !important;
	color: rgba(255, 255, 255, 0.65) !important;
	font-weight: 600 !important;
	transition: color 0.2s ease;
}

.wc-block-components-quantity-selector__button:hover,
.wc-block-components-quantity-selector__button:focus-visible {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

/* Entfernen-Link */
.wc-block-cart-item__remove-link {
	color: rgba(255, 255, 255, 0.58) !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.72rem !important;
	text-decoration: underline !important;
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus-visible {
	color: #ffffff !important;
}

/* ---------- Summen-Panel ---------- */

.wc-block-cart__sidebar,
.wc-block-components-sidebar,
.wc-block-checkout__sidebar {
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-top: 2px solid var(--gtp-blue, #1684dd) !important;
	border-radius: 4px !important;
	padding: 24px !important;
	box-sizing: border-box;
}

.wc-block-components-totals-wrapper {
	border-color: rgba(255, 255, 255, 0.1) !important;
	padding: 14px 0 !important;
}

.wc-block-components-totals-item__label {
	color: rgba(255, 255, 255, 0.65) !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: #ffffff !important;
	font-size: 1.05rem !important;
	text-transform: none;
	letter-spacing: 0;
}

/* Gutschein-Aufklapper */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button {
	color: rgba(255, 255, 255, 0.8) !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	background: transparent !important;
}

.wc-block-components-panel__button:hover,
.wc-block-components-panel__button:focus-visible {
	color: #ffffff !important;
}

/* ---------- Formularfelder ---------- */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input,
.wc-block-components-select__container,
.wc-block-components-address-form input,
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout select {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 4px !important;
	color: #ffffff !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	box-shadow: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wp-block-woocommerce-checkout input:focus,
.wp-block-woocommerce-checkout select:focus {
	border-color: var(--gtp-blue, #1684dd) !important;
	outline: none !important;
	box-shadow: none !important;
}

.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-checkbox__label,
.wc-block-components-address-form label {
	color: rgba(255, 255, 255, 0.65) !important;
	font-family: 'Archivo', Arial, sans-serif !important;
}

/* Schwebendes Label darf den dunklen Hintergrund nicht als weißen Balken zeigen */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.65) !important;
}

.wc-block-components-checkbox__input {
	accent-color: var(--gtp-blue, #1684dd);
}

/* ---------- Buttons ---------- */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border: 2px solid var(--gtp-blue-solid, #1479ca) !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	padding: 16px 26px !important;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus-visible {
	background: var(--gtp-blue-dark, #0e5690) !important;
	border-color: var(--gtp-blue-dark, #0e5690) !important;
	color: #ffffff !important;
}

.wc-block-components-button.is-link {
	color: var(--gtp-blue-light, #d0e6f8) !important;
	background: transparent !important;
}

/* ---------- Hinweisboxen ---------- */

.wc-block-components-notice-banner {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-left: 2px solid var(--gtp-blue, #1684dd) !important;
	border-radius: 4px !important;
	color: rgba(255, 255, 255, 0.8) !important;
	font-family: 'Archivo', Arial, sans-serif !important;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	color: rgba(255, 255, 255, 0.8) !important;
}

.wc-block-components-notice-banner.is-error {
	border-left-color: var(--gtp-green, #94be72) !important;
}

/* ---------- Leerer Warenkorb ---------- */

.wp-block-woocommerce-empty-cart-block,
.wc-block-cart__empty-cart__title {
	color: #ffffff !important;
	font-family: 'Pricedown', 'Anton', sans-serif !important;
	text-transform: uppercase;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout,
	.wc-block-cart,
	.wc-block-checkout {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}



/* =========================================================================
   LÄNDERAUSWAHL (Select2)

   WICHTIG: Select2 haengt sein Dropdown ans Ende des <body>, ausserhalb
   des Formulars. Unsere Regeln mit body.gtp-checkout-page davor greifen
   dort deshalb NICHT - genau darum war die Suche weisse Schrift auf
   weissem Grund. Diese Regeln sind bewusst global.
   ========================================================================= */

.select2-container--default .select2-dropdown,
.select2-dropdown {
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 4px !important;
	color: #ffffff !important;
	z-index: 400;
}

/* Das Suchfeld im Dropdown - hier sass der Fehler */
.select2-container--default .select2-search--dropdown {
	padding: 8px !important;
	background: #0d0d0d !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-search--dropdown .select2-search__field {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 3px !important;
	padding: 10px 12px !important;
	color: #ffffff !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.9rem !important;
	outline: none !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
	color: rgba(255, 255, 255, 0.55) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--gtp-blue, #1684dd) !important;
}

/* Ergebnisliste */
.select2-container--default .select2-results__option {
	background: #0d0d0d !important;
	color: rgba(255, 255, 255, 0.82) !important;
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.9rem !important;
	padding: 10px 14px !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background: rgba(22, 132, 221, 0.2) !important;
	color: #ffffff !important;
}

.select2-container--default .select2-results__message {
	color: rgba(255, 255, 255, 0.6) !important;
	background: #0d0d0d !important;
}

.select2-results__options {
	background: #0d0d0d !important;
	max-height: 260px !important;
}

/* Das geschlossene Auswahlfeld */
.select2-container--default .select2-selection--single {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 4px !important;
	height: auto !important;
	padding: 12px 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #ffffff !important;
	line-height: 1.4 !important;
	padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: rgba(255, 255, 255, 0.55) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 10px !important;
	top: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: rgba(255, 255, 255, 0.6) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent rgba(255, 255, 255, 0.6) transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--gtp-blue, #1684dd) !important;
}

/* Fallback: einfaches <select> ohne Select2 (z. B. wenn JS blockiert ist).
   Die Optionsliste zeichnet das Betriebssystem - dort hilft nur, Text- und
   Hintergrundfarbe explizit zu setzen. */
body.gtp-flow-page select option,
body.gtp-account-page select option {
	background: #0d0d0d !important;
	color: #ffffff !important;
}


/* =========================================================================
   MOBILE KORREKTUREN

   Diese Fehler waren am Rechner nicht sichtbar und sind mir deshalb
   durchgerutscht. Meine automatischen Pruefungen erkennen Syntax und
   Farben, aber kein Layout - genau da lagen sie.
   ========================================================================= */

@media (max-width: 640px) {
	/* Fortschrittsanzeige 01/02/03 brach auf zwei Zeilen um, weil die
	   Verbindungslinien zwischen den Schritten zu breit waren und
	   flex-wrap greifen liess. Jetzt: kein Umbruch, schmalere Linien,
	   kleinere Schrift - alles bleibt auf einer Zeile. */
	.gtp-flow__steps {
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 0;
		width: 100%;
	}

	.gtp-flow__step {
		gap: 6px;
		min-width: 0;
	}

	.gtp-flow__step + .gtp-flow__step::before {
		width: 14px !important;
		margin: 0 8px !important;
	}

	.gtp-flow__step-num {
		font-size: 0.52rem;
	}

	.gtp-flow__step-label {
		font-size: 0.62rem;
		letter-spacing: 0.08em;
		white-space: nowrap;
	}
}

@media (max-width: 400px) {
	/* Auf sehr schmalen Geraeten reichen die Nummern allein - die
	   Beschriftung wuerde sonst doch umbrechen. */
	.gtp-flow__step-label {
		font-size: 0.56rem;
		letter-spacing: 0.04em;
	}

	.gtp-flow__step + .gtp-flow__step::before {
		width: 10px !important;
		margin: 0 5px !important;
	}
}



/* =========================================================================
   WOOCOMMERCE-HINWEISBOXEN – POSITIONIERUNG ZURUECKSETZEN

   WooCommerce setzt auf .woocommerce-info::before / -message / -error sein
   eigenes Icon MIT position:absolute (top:1em, left:1.5em). Wir ersetzen
   nur den Inhalt durch unseren Signal-Punkt - die absolute Positionierung
   blieb aber bestehen, weshalb der Punkt mitten im ersten Buchstaben lag
   ("Have a coupon?", "Sorry, it seems...").

   Diese Regeln stehen bewusst am Dateiende und ohne body-Praefix, damit
   sie in jedem Kontext greifen und zuletzt gewinnen.
   ========================================================================= */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	position: relative;
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	padding-left: 22px !important;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	content: '' !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	display: block !important;
	flex-shrink: 0;
	width: 6px !important;
	height: 6px !important;
	min-width: 6px;
	margin: 0.55em 0 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	line-height: 0 !important;
	background: var(--gtp-blue, #1684dd) !important;
	color: transparent !important;
}

/* Auf der Bestellbestaetigung ist Gruen die Leitfarbe */
body.gtp-order-page .woocommerce-info::before,
body.gtp-order-page .woocommerce-message::before,
body.gtp-order-page .woocommerce-error::before {
	/* WooCommerce setzt auf dieses Pseudo-Element ein position:absolute
	   mit top/left. Ohne die naechsten drei Zeilen bleibt der Punkt absolut
	   positioniert und liegt mitten im Text statt daneben. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	background: var(--gtp-green, #94be72) !important;
}



/* Auf schmalen Geraeten steht die Uebersicht unter dem Formular -
   dort ergibt ein mitlaufendes Panel keinen Sinn. */
@media (max-width: 980px) {
	body.gtp-checkout-page form.checkout > .gtp-checkout__side {
		position: static;
		top: auto;
	}
}


/* =========================================================================
   KASSEN-RASTER – ABSICHERUNG

   Das Modul packt Überschrift und Bestellübersicht eigentlich in einen
   gemeinsamen Container (.gtp-checkout__side). Falls dieser Container aus
   irgendeinem Grund nicht erzeugt wird – etwa weil eine WooCommerce-
   Version die Hooks anders benennt oder ein anderes Plugin dazwischenfunkt –
   greifen die folgenden Regeln und platzieren die Elemente einzeln.

   Damit sitzt die Bestellübersicht in JEDEM Fall rechts neben dem
   Formular, statt darunter zu rutschen. Und alles Unerwartete, das
   WooCommerce nach dem Absenden einfügt, spannt über die volle Breite.
   ========================================================================= */

@media (min-width: 981px) {

	/* Fall A: Der Container ist da (Normalfall) */
	body.gtp-checkout-page form.checkout:has(.gtp-checkout__side) {
		grid-template-rows: auto;
	}

	/* Fall B: Kein Container – Elemente einzeln platzieren */
	body.gtp-checkout-page form.checkout:not(:has(.gtp-checkout__side)) > #customer_details {
		grid-column: 1 !important;
		grid-row: 2 / span 2 !important;
	}

	body.gtp-checkout-page form.checkout:not(:has(.gtp-checkout__side)) > #order_review_heading {
		grid-column: 2 !important;
		grid-row: 2 !important;
		align-self: start;
		margin-top: 0 !important;
	}

	body.gtp-checkout-page form.checkout:not(:has(.gtp-checkout__side)) > #order_review {
		grid-column: 2 !important;
		grid-row: 3 !important;
		align-self: start;
	}

	/* Meldungen immer ganz oben über die volle Breite – egal ob sie beim
	   Laden da sind oder erst nach dem Klick auf "Complete order"
	   nachgeladen werden. */
	body.gtp-checkout-page form.checkout > .woocommerce-NoticeGroup,
	body.gtp-checkout-page form.checkout > .woocommerce-NoticeGroup-checkout,
	body.gtp-checkout-page form.checkout > .woocommerce-error,
	body.gtp-checkout-page form.checkout > .woocommerce-message,
	body.gtp-checkout-page form.checkout > .woocommerce-info {
		grid-column: 1 / -1 !important;
		grid-row: 1 !important;
	}
}

/* Ältere Browser ohne :has() – dort greift die Einzelplatzierung immer.
   Sie schadet nicht, wenn der Container vorhanden ist, weil die
   Elemente dann gar nicht mehr direkte Kinder des Formulars sind. */
@supports not selector(:has(*)) {
	@media (min-width: 981px) {
		body.gtp-checkout-page form.checkout > #customer_details {
			grid-column: 1 !important;
			grid-row: 2 / span 2 !important;
		}
		body.gtp-checkout-page form.checkout > #order_review_heading {
			grid-column: 2 !important;
			grid-row: 2 !important;
		}
		body.gtp-checkout-page form.checkout > #order_review {
			grid-column: 2 !important;
			grid-row: 3 !important;
		}
	}
}

/* Auf schmalen Bildschirmen alles untereinander – keine Platzierung */
@media (max-width: 980px) {
	body.gtp-checkout-page form.checkout > #customer_details,
	body.gtp-checkout-page form.checkout > #order_review_heading,
	body.gtp-checkout-page form.checkout > #order_review,
	body.gtp-checkout-page form.checkout > .gtp-checkout__side {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	body.gtp-checkout-page form.checkout > .gtp-checkout__side {
		position: static !important;
	}
}