/* Overlapping transparent main header */
.header-main {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	margin-bottom: -90px;
	transition: opacity 0.6s ease;
}

/* Revealing Slide-In Header */
.header-reveal {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	transform: translateY(-100%); /* Versteckt über dem Rand */
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
/* Reveal header modal navigation*/
.header-reveal #modal-2 {
	height: 100vh;
}

/* responsive navigation close button */
.wp-block-navigation__responsive-container-close {
	margin-top: 32px;
}

/* Visible state reveal header*/
.header-reveal.is-visible {
	transform: translateY(0);
}

/* Option: Hiding main header with reveal header is visible */
.header-main.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Die Lupe im Header exakt begrenzen */
.sawasdee-search-icon {
	width: 24px !important; /* Deine gewünschte Größe */
	height: auto !important;
	display: block;
	max-width: 24px !important;
}

/* Verhindert, dass der Button-Container das Icon aufbläht */
.wp-block-button__link {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* WordPress Admin-Bar Fix */
.admin-bar .header-main,
.admin-bar .header-reveal {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .header-main,
	.admin-bar .header-reveal {
		top: 46px;
	}

	.search-result-item {
		flex-direction: column; /* Bilder auf Handy oben drüber */
		align-items: flex-start;
		gap: 15px;
	}

	.search-result-item img {
		width: 100%;
		height: 200px;
	}
}

/* Live Search Lightbox Grundstil */
.sawasdee-search-lightbox {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100vw;
	/* height: 30vh; */
	/* Geändert von height zu min-height, damit die Liste wachsen kann 
       oder max-height mit scroll */
	max-height: 80vh;
	background: #fdfaf6; /* Dein Beige */
	z-index: 99999;
	transform: translateY(-100%);
	transition: transform 0.7s cubic-bezier(0.85, 0, 0.15, 1);
	padding: 5vh 10vw; /* Von 2vw auf 10vw mehr seitlicher Abstand für Eleganz */
	overflow-y: auto;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.sawasdee-search-lightbox.is-open {
	transform: translateY(0);
}

/* Das WP Search Field resetten */
.sawasdee-live-search-input .wp-block-search__inside-wrapper {
	border: none !important;
	padding: 0 !important;
}

.sawasdee-live-search-input input {
	border: none !important;
	border-bottom: 1px solid #000 !important;
	border-radius: 0 !important;
	/* font-size: clamp(2rem, 5vw, 4rem) !important; */
	background: transparent !important;
	padding: 10px 0 !important;
	/* width: 100%; */
	/* transition: border-color 0.3s ease; */
}

/* mit focus kein border */
/*.sawasdee-live-search-input input:focus {
	outline: none;
	border: none;
	box-shadow: none;
}*/
/* Focus State ohne "Ghost-Borders" */
.sawasdee-live-search-input input:focus {
	outline: none !important;
	border-bottom: 1px solid #666 !important; /* Leichte Farbänderung statt dicker Rahmen */
	box-shadow: none !important;
}

/* Close Button Styling */
/*.sawasdee-search-close a {
	background: transparent !important;
	color: #000 !important;
	font-size: 2rem;
	cursor: pointer;
	border: none;
}*/
.sawasdee-search-close a {
	background: transparent !important;
	font-family: sans-serif;
	font-weight: 200;
	line-height: 1;
	transition: transform 0.3s ease;
	display: block;
}
/* kleiner visueller effekt mit hover */
.sawasdee-search-close a:hover {
	transform: rotate(90deg); /* Kleiner visueller Effekt beim Hover */
}
/* --- Schließen-Button Positionierung --- */
.sawasdee-search-field-wrapper {
	/* align-items: center; */
	/* border-bottom: none; */ /* Verhindert doppelte Linien */
} /* ohne einfluss */

/* Container für alle Ergebnisse */
#sawasdee-search-results {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Optional: Ergebnisse während des Ladens leicht ausblenden */
#sawasdee-search-results {
	transition: opacity 0.2s ease;
}

/* Spinner in der Mitte der Lightbox, während die Ergebnisse laden*/
#sawasdee-search-results-list:empty + #sawasdee-search-loader {
	margin-top: 50px;
}

/* Einzelnes Ergebnis-Item */
.search-result-item {
	display: flex;
	align-items: center; /* Zentriert Bild und Text vertikal */
	gap: 30px;
	text-decoration: none;
	color: #000;
	transition: opacity 0.3s ease;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.search-result-item:hover {
	opacity: 0.7;
}

/* Das Vorschaubild */
.search-result-item img,
.search-result-item .no-thumb {
	width: 140px; /* Deine gewünschte Breite */
	height: 90px;
	object-fit: cover;
	flex-shrink: 0; /* Verhindert, dass das Bild gequetscht wird */
	background: #f0f0f0;
}

/* Textbereich */
.search-result-title {
	display: block;
	font-size: clamp(1.5rem, 3vw, 2.2rem); /* Dynamische "Big Letters" */
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 5px;
	letter-spacing: -0.02em;
}

.search-result-meta {
	font-size: 0.9rem;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* spinner */
/* .search-loader { */
#sawasdee-search-loader {
	display: none; /* Wird via JS auf 'block' gesetzt */
	text-align: center;
	padding: 40px 0;
}

.spinner {
	width: 40px;
	height: 40px;
	/* margin: 0 auto; */
	margin: 20px auto;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: #000; /* Deine Akzentfarbe */
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

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