/* Voltrana Sites Builder - Frontend Styles */

/* ============================================
   Shortcode Protection (Build 079)
   ============================================ */

/* Prevent extra spacing around shortcodes */
.vt-shortcode-protect {
	margin: 0 !important;
	padding: 0 !important;
	display: contents; /* Makes wrapper transparent to layout */
}

/* Ensure no extra margins on paragraphs before/after tables */
p:has(+ .vt-battery-table-wrapper),
p:has(.vt-battery-table-wrapper) {
	margin-bottom: 0 !important;
}

.vt-battery-table-wrapper + p,
p + .vt-battery-table-wrapper {
	margin-top: 0 !important;
}

/* Remove any auto-generated empty paragraphs */
.vt-battery-table-wrapper + br,
br + .vt-battery-table-wrapper,
.vt-battery-table-wrapper + p:empty,
p:empty + .vt-battery-table-wrapper {
	display: none !important;
}

/* Specific mobile fixes to prevent gaps */
@media screen and (max-width: 767px) {
	/* Ensure wrapper has no margins on mobile */
	.vt-battery-table-wrapper {
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Remove any spacing after the last table row */
	.vt-battery-table tbody tr:last-child {
		margin-bottom: 0 !important;
	}
	
	/* Clean up any paragraph spacing around shortcodes */
	p:has(.vt-battery-table-wrapper),
	.vt-battery-table-wrapper + p:not(:empty) {
		margin-top: 1em; /* Normal paragraph spacing */
		margin-bottom: 1em;
	}
	
	/* But remove margin if paragraph is empty */
	.vt-battery-table-wrapper + p:empty {
		margin: 0 !important;
		padding: 0 !important;
		height: 0 !important;
		line-height: 0 !important;
	}
}

/* ============================================
   Battery List & Cards
   ============================================ */

.vt-battery-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	padding: 20px 0;
}

.vt-battery-card {
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 8px;
	background: #fff;
}

.vt-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
}

.vt-spec-table th,
.vt-spec-table td {
	padding: 10px;
	border: 1px solid #ddd;
	text-align: left;
}

.vt-spec-table th {
	background: #F0F4F5;
	font-weight: 600;
	color: #004B61;
}

/* ============================================
   Additional Content (Build 052)
   ============================================ */

.vt-additional-content {
	line-height: 1.6;
}

/* Paragraphs */
.vt-additional-content p {
	margin-bottom: 20px;
}

/* Unordered Lists */
.vt-additional-content ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 20px; /* Same spacing as <p> */
}

.vt-additional-content li {
	position: relative;
	padding-left: 40px;
	margin-bottom: 12px;
}

/* Voltrana Logo Icon (SVG) */
.vt-additional-content li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.38 177.17"><path fill="%23F79D00" d="M130.89,177.08l-37.6-84.45-37.64,84.54h75.21,0s.03-.09.03-.09ZM57.62,51.67H0l53.44,120.56,37.65-84.56-9.27-20.82c-8.47-15.18-24.2-15.18-24.2-15.18M133.09,172.12L209.38,0h-57.62s-17.91,0-29.16,26.03l-27.22,61.41,37.7,84.68Z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Strong text in lists */
.vt-additional-content li strong {
	display: inline;
	color: #004B61;
	font-weight: 600;
}

/* Small text in lists */
.vt-additional-content li small {
	display: block;
	margin-top: 2px;
	color: #333;
	font-size: 13px;
	line-height: 1.4;
}

/* Headings */
.vt-additional-content h2,
.vt-additional-content h3,
.vt-additional-content h4 {
	color: #004B61;
	margin-top: 30px;
	margin-bottom: 15px;
	font-weight: 600;
}

.vt-additional-content h2 {
	font-size: 24px;
}

.vt-additional-content h3 {
	font-size: 20px;
}

.vt-additional-content h4 {
	font-size: 18px;
}

/* ============================================
   Battery Table (Build 015)
   ============================================ */

/* Wrapper */
.vt-battery-table-wrapper {
	width: 100%;
	margin: 20px 0 0 0; /* Only top margin on desktop to prevent gaps */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Mobile: Remove ALL margins */
@media screen and (max-width: 767px) {
	.vt-battery-table-wrapper {
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* Table */
.vt-battery-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vt-battery-table thead {
	background: #004B61;
	color: #fff;
}

.vt-battery-table th {
	padding: 10px 12px;
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	line-height: 1.3;
}

.vt-battery-table th:last-child {
	border-right: none;
}

.vt-battery-table tbody tr {
	border-bottom: 1px solid #e5e7eb;
	transition: background-color 0.2s ease;
}

.vt-battery-table tbody tr:hover {
	background-color: #f9fafb;
}

.vt-battery-table tbody tr:last-child {
	border-bottom: none;
}

.vt-battery-table td {
	padding: 10px 12px;
	font-size: 13px;
	color: #333333;
	vertical-align: middle;
	line-height: 1.4;
}

/* Column-specific widths */
.vt-battery-table th[data-column="model"] {
	min-width: 110px;
}

.vt-battery-table th[data-column="technology"] {
	min-width: 110px;
}

.vt-battery-table th[data-column="ean"] {
	min-width: 145px;
}

.vt-battery-table td[data-label*="EAN"] {
	text-align: left;
	padding: 8px 12px;
}

.vt-battery-table th[data-column="capacity_ah"],
.vt-battery-table th[data-column="voltage_v"],
.vt-battery-table th[data-column="weight_kg"] {
	min-width: 80px;
	text-align: center;
}

.vt-battery-table td[data-label*="Kapazität"],
.vt-battery-table td[data-label*="Spannung"],
.vt-battery-table td[data-label*="Gewicht"] {
	text-align: center;
}

.vt-battery-table th[data-column="dimensions_mm"] {
	min-width: 140px;
	text-align: center;
}

.vt-battery-table td[data-label*="Maße"] {
	text-align: center;
}

.vt-battery-table th[data-column="datasheet_url"] {
	width: 60px;
	text-align: center;
}

.vt-battery-table td[data-label*="Datenblatt"] {
	text-align: center;
}

/* Build 055: Product Image Column */
.vt-battery-table th[data-column="product_image"] {
	width: 80px;
	text-align: center;
}

.vt-battery-table td[data-label*="Bild"] {
	text-align: center;
}

.vt-product-image-link {
	display: inline-block;
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vt-product-image-link:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vt-product-image-thumb {
	display: block;
	max-width: 60px;
	height: auto;
	margin: 0 auto;
}

.vt-no-image-icon {
	display: inline-block;
	font-size: 24px;
	opacity: 0.3;
	cursor: not-allowed;
}

.vt-battery-table th[data-column="properties"] {
	min-width: 220px;
}

.vt-battery-table td strong {
	color: #004B61;
	font-weight: 600;
}

.vt-battery-table td a {
	color: #004B61;
	text-decoration: none;
	transition: color 0.2s ease;
}

.vt-battery-table td a:hover {
	color: #F79D00;
	text-decoration: underline;
}

/* Property Tags */
.vt-property-tag {
	display: inline-block;
	padding: 3px 7px;
	margin: 2px 3px 2px 0;
	background: #004B61B3;
	color: #fff;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
	line-height: 1.3;
}

.vt-properties-list {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: center;
}

/* Technology Badges (Build 021) */
.vt-tech-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
	line-height: 1.3;
}

.vt-tech-agm {
	background: #e0f2fe;
	color: #0369a1;
}

.vt-tech-gel {
	background: #fef3c7;
	color: #ca8a04;
}

.vt-tech-efb {
	background: #fce7f3;
	color: #be185d;
}

.vt-tech-lifepo4 {
	background: #dcfce7;
	color: #15803d;
}

.vt-tech-blei-saure,
.vt-tech-saure {
	background: #f3f4f6;
	color: #374151;
}

/* Value Formatting (Build 021) */
.vt-value-capacity,
.vt-value-voltage,
.vt-value-cca,
.vt-value-weight {
	font-weight: 500;
	color: #004B61;
}

.vt-model-name {
	color: #004B61;
	font-size: 13px;
	line-height: 1.3;
}

.vt-value-ean {
	font-size: 13px;
	background: #F0F4F5;
	padding: 4px 8px;
	border-radius: 3px;
	color: #181818;
	border: 1px solid #004B61;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0.5px;
}

.vt-dimensions {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Datasheet Link - PDF Icon SVG (Build 024) */
.vt-datasheet-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #F79D00;
	color: #fff;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vt-datasheet-link:hover {
	background: #e68f00;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.vt-pdf-icon {
	display: block;
	width: 18px;
	height: 18px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

/* No Results */
.vt-no-results {
	padding: 40px 20px;
	text-align: center;
	color: #6b7280;
	font-size: 16px;
}

/* ============================================
   Responsive: Mobile (< 768px)
   ============================================ */

@media screen and (max-width: 767px) {
	/* Hide table headers */
	.vt-battery-table thead {
		display: none;
	}

	/* Convert rows to cards */
	.vt-battery-table tbody tr {
		display: block;
		margin-bottom: 20px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}
	
	/* Remove margin from last row to prevent gap */
	.vt-battery-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.vt-battery-table tbody tr:hover {
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	/* Convert cells to card rows */
	.vt-battery-table td {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 12px 16px;
		border-bottom: 1px solid #f3f4f6;
		text-align: right;
	}

	.vt-battery-table td:last-child {
		border-bottom: none;
	}

	/* Show label before value */
	.vt-battery-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: #004B61;
		margin-right: 10px;
		flex: 0 0 40%;
		text-align: left;
	}

	/* First cell (model) gets special styling */
	.vt-battery-table td:first-child {
		background: #004B61;
		color: #fff;
		font-size: 16px;
		font-weight: 600;
	}

	.vt-battery-table td:first-child::before {
		color: rgba(255, 255, 255, 0.8);
	}

	.vt-battery-table td:first-child a {
		color: #fff;
	}

	/* Strong elements in all cells need white color on mobile (Build 051) */
	.vt-battery-table td strong {
		color: #fff;
	}

	/* Property tags in mobile */
	.vt-property-tag {
		display: inline-block;
		margin: 2px;
	}

	/* Adjust wrapper for mobile */
	.vt-battery-table-wrapper {
		overflow-x: visible;
		margin: 0 !important; /* Remove all margins on mobile to prevent gaps */
		padding: 0;
	}

	/* Additional Content - Mobile Adjustments (Build 052) */
	.vt-additional-content li {
		padding-left: 35px;
		margin-bottom: 15px;
	}

	.vt-additional-content li::before {
		width: 20px;
		height: 20px;
	}
}

/* ============================================
   Responsive: Tablet (768px - 1023px)
   ============================================ */

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.vt-battery-table {
		font-size: 13px;
	}

	.vt-battery-table th,
	.vt-battery-table td {
		padding: 10px 12px;
	}

	/* Allow horizontal scroll on tablet if needed */
	.vt-battery-table-wrapper {
		overflow-x: auto;
	}
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
	.vt-battery-table-wrapper {
		overflow-x: visible;
	}

	.vt-battery-table {
		box-shadow: none;
	}

	.vt-battery-table tbody tr:hover {
		background-color: transparent;
	}

	.vt-property-tag {
		border: 1px solid #dbeafe;
	}
}

/* ============================================
   GLightbox Custom Styles (Build 058)
   ============================================ */

/* Overlay - Voltrana Brand Color */
.goverlay {
	background: rgba(0, 75, 97, 0.70) !important;
}

/* Close Button - Sichtbares X-Icon */
.gclose {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 99999;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.95) !important;
	border-radius: 50%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	border: 2px solid rgba(0, 75, 97, 0.1);
	/* Accessibility: Fokussierbar machen */
	outline: none;
}

/* Focus State für Keyboard-Navigation */
.gclose:focus {
	outline: 3px solid #F79D00;
	outline-offset: 2px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(247, 157, 0, 0.3);
}

.gclose:hover,
.gclose:focus-visible {
	background: rgba(247, 157, 0, 1) !important;
	border-color: rgba(247, 157, 0, 1);
	transform: scale(1.15) rotate(90deg);
	box-shadow: 0 4px 16px rgba(247, 157, 0, 0.5);
}

/* X-Icon mit CSS (Fallback wenn SVG nicht funktioniert) */
.gclose::before,
.gclose::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 3px;
	background-color: #004B61;
	border-radius: 2px;
	transition: all 0.3s ease;
}

.gclose::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.gclose::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.gclose:hover::before,
.gclose:hover::after {
	background-color: #ffffff;
	width: 24px;
}

/* Verstecke Default SVG falls vorhanden */
.gclose svg {
	display: none !important;
}

/* Navigation Buttons ausblenden (nur 1 Bild pro Batterie) */
.gnext,
.gprev {
	display: none !important;
}

/* Lightbox Container */
.glightbox-container {
	z-index: 999999 !important;
}

.glightbox-clean .gslide-description {
	background: rgba(0, 75, 97, 0.95);
	color: #ffffff;
}

/* Mobile Anpassungen für GLightbox */
@media screen and (max-width: 767px) {
	.gclose {
		top: 15px;
		right: 15px;
		width: 40px;
		height: 40px;
	}
	
	.gclose::before,
	.gclose::after {
		width: 20px;
		height: 2px;
	}
	
	.gclose:hover::before,
	.gclose:hover::after {
		width: 22px;
	}
}