/* ==========================================================================
   OWM Frontend – Mobile / Responsive Fixes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Versionen – Tables responsive (horizontal scroll)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.va-ver {
		max-width: 100%;
		padding: 0 4px;
	}

	.va-ver table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.va-ver th,
	.va-ver td {
		padding: 8px 10px;
		font-size: 0.85em;
	}

	.va-ver .va-comp {
		white-space: nowrap;
	}

	.va-ver h2 {
		font-size: 1.2em;
	}
}

/* --------------------------------------------------------------------------
   3. Language Switcher – Mobile positioning
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.owm-lang-switcher {
		bottom: 10px !important;
		right: 10px !important;
		padding: 5px 10px !important;
		font-size: 11px !important;
	}

	.owm-lang-switcher__opt {
		padding: 2px 6px !important;
	}
}

/* --------------------------------------------------------------------------
   4. "Unterstützte Technologien" – Tighter spacing on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.elementor-widget-text-editor [style*="flex-wrap:wrap"][style*="gap"] {
		gap: 14px 20px !important;
	}

	.elementor-widget-text-editor [style*="flex-wrap:wrap"] span {
		font-size: 13px !important;
	}

	.elementor-widget-text-editor [style*="flex-wrap:wrap"] span i {
		font-size: 22px !important;
	}
}

/* --------------------------------------------------------------------------
   5. Elementor Containers – Force column layout on mobile
   Elementor generates --flex-direction:row for desktop 2-column layouts
   but does NOT add a mobile media query to switch to column.
   This causes massive overlaps on narrow viewports.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* All boxed containers: force inner to column, but respect column-reverse */
	.e-con-boxed > .e-con-inner {
		flex-direction: var(--flex-direction, column) !important;
	}

	/* Full-width parent containers with row direction */
	.e-con.e-parent:not(.e-con-boxed) {
		flex-direction: column !important;
	}

	/* Child containers: force column, full width */
	.e-con.e-child {
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* CRITICAL: Elementor's flex on e-con causes widget-container height
	   collapse (circular height:100%/auto dependency → 30px line-height).
	   Switch single-widget e-con children to block layout on mobile. */
	.e-con.e-child.e-con-full {
		display: block !important;
	}

	/* Break Elementor's height:100% on widget-containers */
	.e-con > .elementor-widget > .elementor-widget-container,
	.e-con > .e-con-inner > .elementor-widget > .elementor-widget-container {
		height: auto !important;
	}

	/* Images: constrain to viewport, prevent overflow */
	.elementor-widget-image img {
		max-width: 100%;
		height: auto !important;
		max-height: 60vh;
		object-fit: contain;
	}

	/* Negative margins that cause overlaps on mobile */
	.e-con[style*="margin-top"] {
		margin-top: 0 !important;
	}

	/* Reduce oversized padding on mobile */
	.e-con.e-parent {
		--padding-top: 40px;
		--padding-bottom: 40px;
	}
}

/* --------------------------------------------------------------------------
   6. Elementor Sections – General mobile spacing
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Prevent horizontal overflow from wide SVG/images */
	.elementor-widget-image img,
	.elementor-widget-html svg {
		max-width: 100%;
		height: auto;
	}

	/* Ensure HTML widgets don't overflow */
	.elementor-widget-html {
		overflow-x: auto;
	}

	/* Home page: tilt shape divider section overlap fix */
	.elementor-element-0bfe681 {
		margin-top: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   7. WooCommerce Cart & Checkout – Padding fix (all viewports)
   .alignwide pulls blocks outside the content area via negative margins.
   Reset margins so content stays within the page container.
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-cart.alignwide {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   8. Empty Cart – Terminal-style dark card
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	padding: 20px 0 0;
}

/* Terminal window */
.owm-empty-cart-terminal {
	background: #0d1117;
	border-radius: 12px;
	overflow: hidden;
	text-align: left;
	border: 1px solid #1e2533;
	margin-bottom: 32px;
}

/* Title bar with traffic-light dots */
.owm-empty-cart-terminal__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 12px 16px;
	background: #161b22;
	border-bottom: 1px solid #1e2533;
}

.owm-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: inline-block;
}

.owm-dot--red    { background: #ff5f57; }
.owm-dot--yellow { background: #febc2e; }
.owm-dot--green  { background: #28c840; }

.owm-empty-cart-terminal__title {
	margin-left: auto;
	margin-right: auto;
	padding-right: 36px; /* offset for dots centering */
	font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
	font-size: 12px;
	color: #6b7280;
	letter-spacing: 0.5px;
}

/* Terminal body */
.owm-empty-cart-terminal__body {
	padding: 24px 20px;
}

.owm-empty-cart-terminal__line {
	font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
	font-size: 15px;
	line-height: 2;
	color: #E5E7EB;
}

.owm-t-prompt {
	color: #00ff88;
	font-weight: 700;
}

.owm-t-cmd {
	color: #00d4ff;
}

.owm-t-dim {
	color: #6b7280;
}

.owm-t-arrow {
	color: #f45a2a;
}

.owm-t-cursor {
	color: #00ff88;
	animation: owm-blink 1s step-end infinite;
}

@keyframes owm-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0; }
}

/* CTA button below terminal */
.wp-block-woocommerce-empty-cart-block .owm-empty-cart-cta .wp-block-button__link {
	background: #f45a2a !important;
	color: #fff !important;
	border-radius: 8px !important;
	padding: 14px 32px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	transition: background 0.2s;
}

.wp-block-woocommerce-empty-cart-block .owm-empty-cart-cta .wp-block-button__link:hover {
	background: #d94d22 !important;
}

/* Hide the default page title "Warenkorb" — terminal says it */
.woocommerce-page.woocommerce-cart .entry-title {
	display: none;
}

/* --------------------------------------------------------------------------
   11. WooCommerce Info Notice – blue hint style (cart replacement notice)
   -------------------------------------------------------------------------- */
.woocommerce-info {
	background-color: #e8f4fd !important;
	border-left: 4px solid #2196f3 !important;
	color: #1a3e5c !important;
	position: relative;
}

.owm-notice-close {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #2196f3;
	opacity: 0.6;
}

.owm-notice-close:hover {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   12. Hide product meta (category) on single product page
   -------------------------------------------------------------------------- */
.single-product .product_meta,
.single-product .single-product-category {
	display: none !important;
}

/* --------------------------------------------------------------------------
   13. B2B Notices (Top-Bar, Footer-Hinweis, Produkt-Badge, Checkout-Hinweis)
   -------------------------------------------------------------------------- */

/* Top-Bar ganz oben auf jeder Seite */
.owm-b2b-topbar {
	background: #0a0a0a;
	color: #00ff88;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	padding: 6px 16px;
	border-bottom: 1px solid #00ff8830;
	letter-spacing: 0.02em;
}

/* Footer-Hinweis */
.owm-b2b-footer-notice {
	background: #0a0a0a;
	color: #888;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	text-align: center;
	padding: 10px 16px;
	border-top: 1px solid #1a1a1a;
}

/* B2B-Badge auf Produktseite — orange (Warnhinweis-Charakter, passt zur "kein Widerruf"-Box) */
.owm-b2b-badge {
	display: inline-block;
	background: transparent;
	color: #ffaa00;
	border: 1px solid #ffaa00;
	border-radius: 3px;
	padding: 4px 10px;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

/* Germanized Checkboxen — Terminal-Style */
.wc-gzd-checkbox-placeholder,
.wc-gzd-checkbox {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	line-height: 1.5;
}

/* Alle WC Blocks Checkboxen (AGB, B2B, Order-Note-Toggle) — schwarzer Text */
.wc-block-components-checkbox label,
.wc-block-components-checkbox__label,
.wc-block-components-checkbox span,
.wc-gzd-checkbox label,
.wc-gzd-checkbox .wc-block-components-checkbox__label {
	color: #1a1a1a;
}

/* Checkbox-Mark vertikal zur ersten Zeile mittig — fix gegen WC Blocks Default-Stack */
.wc-block-components-checkbox label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px;
}

/* Checkbox-Input + Mark: gleiche Größe (24×24), Mark deckungsgleich darüber. */
.wc-block-components-checkbox__input {
	flex-shrink: 0;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
}

.wc-block-components-checkbox__mark {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	pointer-events: none;
	padding: 4px;
	box-sizing: border-box;
}

.wc-block-components-checkbox label {
	position: relative;
}

.wc-gzd-checkbox a {
	color: #00d4ff;
	text-decoration: underline;
}

/* B2B-Bestätigungs-Checkbox: dezent, gleiches Styling wie AGB-Checkbox */
.wc-gzd-checkbox.b2b_confirmation-field,
.b2b-confirmation,
.checkbox-b2b-confirmation,
#b2b_confirmation_field {
	margin: 8px 0 !important;
}

/* GitHub-Consent-Checkbox: Zeilenumbrüche im langen Einwilligungstext respektieren */
.github-consent .wc-block-components-checkbox__label,
.checkbox-github-consent .wc-block-components-checkbox__label,
.github-consent label,
.checkbox-github-consent label {
	white-space: pre-wrap;
	font-size: 13px;
	line-height: 1.55;
}

/* "Kein Widerrufsrecht"-Hinweis-Box im klassischen Checkout (unter Submit-Button) */
.owm-b2b-checkout-notice {
	background: #1a1410;
	border-left: 3px solid #ffaa00;
	color: #ddd;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.5;
	padding: 10px 14px;
	margin: 8px 0 14px 0;
}

/* "Kein Widerruf"-Hinweis-Box für WC Blocks (per JS-Injection mit übersetztem Text platziert) */
.owm-b2b-no-revocation-notice {
	display: block;
	margin: 10px 0 0 0;
	padding: 10px 14px;
	background: #1a1410;
	border-left: 3px solid #ffaa00;
	color: #ccc;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.5;
}

/* USt-ID Feld */
#billing_vat_id_field input,
.gzd-vat-id-field input {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Inline-Validation-Fehler unter dem USt-ID-Feld (gleiches Look & Feel wie WC Blocks Validation) */
.owm-vat-id-inline-error {
	color: #cc1818;
	font-size: 13px;
	line-height: 1.4;
	margin-top: 6px;
}
input[aria-invalid="true"][id$="vat_id"] {
	border-color: #cc1818 !important;
	box-shadow: 0 0 0 1px #cc1818 inset;
}

/* Bestell-Button — sowohl Classic Checkout als auch WC Blocks */
.woocommerce-checkout #place_order,
button#place_order,
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button {
	background-color: #00ff88 !important;
	color: #0a0a0a !important;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	border: none !important;
	border-radius: 4px !important;
	padding: 14px 24px !important;
}

.woocommerce-checkout #place_order:hover,
button#place_order:hover,
.wc-block-components-checkout-place-order-button:hover,
button.wc-block-components-checkout-place-order-button:hover {
	background-color: #00cc6e !important;
}

.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button__text {
	color: #0a0a0a !important;
	text-transform: none !important; /* überschreibt header-footer-elementor frontend.css */
}

/* --------------------------------------------------------------------------
   10. Legal Pages (Impressum, Datenschutz, AGB)
   Schmaler Lesefluss, gute Typo, sichtbare Links.
   -------------------------------------------------------------------------- */
.legal-page {
	max-width: 720px;
	margin: 2.5rem auto 4rem;
	padding: 0 1.25rem;
	color: #1a202c;
	font-size: 1rem;
	line-height: 1.7;
}

.legal-page h1 {
	font-size: 2rem;
	margin: 0 0 0.5rem;
	color: #0a0a0a;
}

.legal-page .legal-subtitle {
	color: #4a5568;
	margin-top: 0;
	margin-bottom: 2rem;
	font-size: 1.05rem;
}

.legal-page h2 {
	font-size: 1.35rem;
	margin: 2.25rem 0 0.75rem;
	color: #0a0a0a;
}

.legal-page h3 {
	font-size: 1.1rem;
	margin: 1.5rem 0 0.5rem;
	color: #2d3748;
}

.legal-page h4 {
	font-size: 1rem;
	margin: 1rem 0 0.25rem;
	color: #2d3748;
	font-weight: 600;
}

.legal-page p,
.legal-page ul,
.legal-page ol {
	margin: 0 0 1rem;
}

.legal-page ul,
.legal-page ol {
	padding-left: 1.5rem;
}

.legal-page li {
	margin-bottom: 0.25rem;
}

.legal-page a {
	color: #0066cc;
	text-decoration: underline;
	word-break: break-word;
}

.legal-page a:hover {
	color: #004999;
}

@media (max-width: 600px) {
	.legal-page {
		margin: 1.25rem auto 2.5rem;
		font-size: 0.95rem;
	}
	.legal-page h1 {
		font-size: 1.6rem;
	}
	.legal-page h2 {
		font-size: 1.2rem;
	}
}