/**
 * OT-REGIO Search Frontend Styles
 * Layout: White wrapper → Search form → Map (flush) → Headline → Results list
 * Design system: green #00ff00, dark gray #575e5f, light bg #f2f4f3
 * Icons: Google Material Symbols via CSS mask-image (adapted from TECAR/easysearch)
 */

/* --- Variables --- */
:root {
	--otr-green: #00ff00;
	--otr-dark-gray: #575e5f;
	--otr-light-bg: #f2f4f3;
	--otr-card-bg: #fff;
	--otr-black: #000;
	--otr-white: #fff;
	--otr-font-heading: "HelveticaNeueW01-85Heav", Arial Black, sans-serif;
	--otr-font-body: "HelveticaNeueW01-55Roma", Arial, sans-serif;
}

/* --- Search Container (white wrapper) --- */
#otr-search-container {
	max-width: 1200px;
	margin: 0 auto;
	font-family: var(--otr-font-body);
	background: var(--otr-white);
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
	padding: 2rem;
}

/* --- Search Form --- */
#otr-search-form {
	margin-bottom: 0;
}

#otr-search-form-headline {
	font-family: var(--otr-font-heading);
	font-size: 1rem;
	text-transform: uppercase;
	color: var(--otr-black);
	margin: 0 0 0.75rem;
}

#otr-search-form-inner {
	display: flex;
	gap: 0.5rem;
}

#otr-plz-input {
	background: var(--otr-white);
	border: 1px solid #ccc;
	color: #333;
	font-size: 16px;
	font-weight: bold;
	padding: 14px 20px;
	text-align: left;
	flex: 1 1 auto;
	font-family: var(--otr-font-body);
	outline: none;
}

#otr-plz-input:focus {
	border-color: var(--otr-green);
}

#otr-plz-input::placeholder {
	color: #999;
	font-weight: 400;
}

#otr-search-btn {
	background-color: var(--otr-green);
	border: none;
	color: var(--otr-black);
	font-family: var(--otr-font-heading);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.2px;
	padding: 14px 40px;
	cursor: pointer;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#otr-search-btn:hover {
	background-color: var(--otr-black);
	color: var(--otr-white);
}

#otr-search-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --- Map (full width, flush with form, hidden until search) --- */
#otr-map-container {
	width: 100%;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	display: none;
}

#otr-search-container.otr-has-results #otr-map-container {
	display: block;
}

#otr-map {
	width: 100%;
	height: 450px;
	background: var(--otr-light-bg);
}

/* --- Headline (between map and results) --- */
#otr-search-headline {
	text-align: center;
	margin-bottom: 1.5rem;
}

.otr-headline {
	font-family: var(--otr-font-heading);
	font-size: 150%;
	line-height: 120%;
	text-transform: uppercase;
	letter-spacing: -0.1px;
	color: var(--otr-black);
	margin: 0;
}

.otr-subtitle {
	font-family: var(--otr-font-body);
	font-size: 15px;
	color: var(--otr-dark-gray);
	margin: 0.5rem 0 0;
}

.otr-error {
	color: #961e7a;
	font-size: 15px;
}

/* --- Results Count --- */
.otr-results-count {
	text-align: center;
	color: var(--otr-dark-gray);
	font-size: 14px;
	margin-bottom: 20px;
}

/* --- Results List (1 result per row, full width) --- */
#otr-results-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ===================================================================
   Result Cards — horizontal layout: Logo | Info | Contact
   Brands row below spanning full width
   =================================================================== */
.otr-result-card {
	background: var(--otr-card-bg);
	border: none;
	border-left: 5px solid var(--otr-green);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: box-shadow 0.2s ease;
	overflow: hidden;
}

.otr-result-card:hover,
.otr-result-card.otr-active {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.14);
}

/* --- Card main row: 2 columns (left + contact) --- */
.otr-card-main {
	display: flex;
	align-items: stretch;
	padding: 0;
	gap: 0;
}

/* Left column: header (logo+info) + brands */
.otr-card-left {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.5rem;
}

/* Header row inside left column: logo + info side by side */
.otr-card-header {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

/* Logo */
.otr-card-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-width: 120px;
	padding-top: 0.15rem;
}

.otr-card-logo img {
	max-width: 140px;
	max-height: 55px;
	object-fit: contain;
}

/* Info column (name, address, distance) */
.otr-card-info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

/* Title */
.otr-result-title {
	font-family: var(--otr-font-heading);
	font-size: 1.1rem;
	line-height: 1.3;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	color: var(--otr-black);
}

/* --- Icon items (shared style for info + contact items) --- */
.otr-icon-item {
	position: relative;
	padding-left: 30px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--otr-dark-gray);
}

.otr-icon-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	background-color: var(--otr-green);
	background-repeat: no-repeat;
	background-position: center;
}

/* Location pin icon (Google Material "location_on") */
.otr-icon-address::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z'/%3E%3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
}

/* Phone icon (Google Material "call") */
.otr-icon-phone::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12ZM241-600l66-66-17-94h-89q5 41 14 81t26 79Zm358 358q39 17 79.5 27t81.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12ZM241-600l66-66-17-94h-89q5 41 14 81t26 79Zm358 358q39 17 79.5 27t81.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z'/%3E%3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
}

/* Email icon (Google Material "mail") */
.otr-icon-email::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z'/%3E%3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
}

/* Distance icon (Google Material "compare_arrows") */
.otr-icon-distance::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M280-280 80-480l200-200 56 56-103 104h494L624-624l56-56 200 200-200 200-56-56 103-104H233l103 104-56 56Z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M280-280 80-480l200-200 56 56-103 104h494L624-624l56-56 200 200-200 200-56-56 103-104H233l103 104-56 56Z'/%3E%3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
}

/* Contact column — white background, left border as separator */
.otr-card-contact {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1.2rem;
	min-width: 200px;
	padding: 1.25rem 1.5rem;
	background: var(--otr-white);
	border-left: 1px solid #e8e8e8;
}

.otr-contact-heading {
	font-family: var(--otr-font-heading);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--otr-dark-gray);
	margin-bottom: -0.7rem;
}

.otr-contact-name {
	font-family: var(--otr-font-heading);
	font-size: 0.875rem;
	color: var(--otr-black);
	margin-bottom: 0.15rem;
}

.otr-card-contact .otr-icon-item::before {
	background-color: var(--otr-green);
}

.otr-card-contact .otr-icon-item a {
	color: var(--otr-black);
	text-decoration: none;
}

.otr-card-contact .otr-icon-item a:hover {
	color: var(--otr-dark-gray);
	text-decoration: underline;
}

/* --- Brands (inside left column) --- */
.otr-card-brands {
	margin: 0.75rem -1.5rem 0;
	padding: 0.75rem 1.5rem 0;
	border-top: 1px solid #e8e8e8;
}

.otr-brands-label {
	font-family: var(--otr-font-heading);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--otr-dark-gray);
	margin-bottom: 0.3rem;
}

.otr-brands-list {
	font-size: 0.6875rem;
	line-height: 1.8;
	color: var(--otr-dark-gray);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem 0.5rem;
}

.otr-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	white-space: nowrap;
}

.otr-brand::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-color: var(--otr-green);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}


/* --- Workshop Logos row (below brands, full width) --- */
.otr-card-workshops {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	padding: 0.75rem 1.5rem;
	border-top: 1px solid #e8e8e8;
}

.otr-workshop {
	display: flex;
	align-items: center;
	gap: 4px;
}

.otr-workshop img {
	height: 30px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	opacity: 0.5;
}

.otr-workshop span {
	font-size: 11px;
	color: var(--otr-dark-gray);
}

/* ===================================================================
   Responsive: tablet
   =================================================================== */
@media only screen and (max-width: 960px) {
	#otr-map {
		height: 350px;
	}

	#otr-search-container {
		padding: 1.5rem;
	}

	.otr-card-left {
		padding: 1rem 1.25rem;
	}

	.otr-card-brands {
		margin: 0.75rem -1.25rem 0;
		padding: 0.75rem 1.25rem 0;
	}

	.otr-card-header {
		gap: 1rem;
	}

	.otr-card-logo {
		min-width: 100px;
	}

	.otr-card-contact {
		min-width: 170px;
		padding: 1rem 1.25rem;
	}
}

/* ===================================================================
   Responsive: mobile
   =================================================================== */
@media only screen and (max-width: 600px) {
	#otr-search-container {
		padding: 1rem;
	}

	#otr-map {
		height: 280px;
	}

	#otr-search-form-inner {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}

	#otr-plz-input {
		width: 100%;
		border-right: 1px solid #ccc;
		border-bottom: none;
	}

	#otr-search-btn {
		width: 100%;
	}

	.otr-headline {
		font-size: 120%;
	}

	/* Stack card vertically on mobile */
	.otr-card-main {
		flex-direction: column;
	}

	.otr-card-left {
		padding: 1rem;
	}

	.otr-card-brands {
		margin: 0.75rem -1rem 0;
		padding: 0.75rem 1rem 0;
	}

	.otr-card-header {
		gap: 0.75rem;
	}

	.otr-card-logo {
		min-width: unset;
		justify-content: flex-start;
	}

	.otr-card-logo img {
		max-width: 120px;
	}

	.otr-card-contact {
		min-width: unset;
		padding: 1rem;
	}

	.otr-card-workshops {
		padding: 0.75rem 1rem;
	}
}