/* ========================================== 
**** Abundana.ch tntsearch.css - Version Andi + Cuno  ****

Theme Name: bt4-child beruhend auf bootstrap4
Theme URI: 
Author: Cuno Vollenweider + Andi Heutschi
Author URI: https://gravik.ch
Version: 2025-04

Description: 
Zum Anpassen des TNTSearch
Damit dieses CSS übernommen wird, habe : 
1. im partials\base.html.twig diesese CSS-File eingebungen
2. im user\config\plugins\tntsearch.yaml die Option built_in_css: false geändert


Änderungen
- diverse, vgl. Bemerkungen unten

======================================= */


/* Anordnung der Suche rechts */
.tntsearch-form {
	display: flex; 
	justify-content: flex-end;
}

/* Ergänzt mit Animation, Lupen-Symbol und Abstand (margin + padding) */
.tntsearch-form .form-input {
	 width: 150px;
	 height: 2.4rem;
	 margin-top: 8px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    transition: all 0.5s ease 0s;
	 background:url(../images/outline-search-24px.svg) no-repeat right center;
}

/* Platzhalter-Text ausblenden und mit hover-focus einblenden */
.tntsearch-form .form-input::placeholder {
  color: white;
}

.tntsearch-form .form-input:hover::placeholder, .tntsearch-form .form-input:focus::placeholder {
  color: grey;
}

/* Inputrahmen bei hover und focus vergrössern und dunkler machen */
.tntsearch-form .form-input:hover, .tntsearch-form .form-input:focus {
	 width: 250px;
	 border: 1px solid #333;
}

#tntsearch-wrapper {
	 position: relative;
	 margin-bottom: 8px;
}

/* Clear-Kreuz rechter Abstand vergössern (neben Lupen-Zeichen) / Position optimieren */
.tntsearch-clear {
    border-radius: 100%;
    padding-top: 0.5rem;
	 padding-right: 25px;
    line-height: 1;
    position: absolute;
    right: 0;
    font-size: 2rem;
    top: 0;
    cursor: pointer;
}

.tntsearch-field-inpage {
    width: 100%;
}

.tntsearch-dropdown ~ .tntsearch-results {
    position: relative;
    margin-bottom: 0;
}


/* Suchresultat - Display block hinzugefügt - Abstand oben top von 0 auf 50 vergrössert, damit keine Überlagerung 
Hintergrund-Farbe aufs leicht transparten gesetzt. */

.tntsearch-dropdown ~ .tntsearch-results .row {
	display: block;
	 position: absolute;
    top: 50px;
    right: 0;
    width: 450px;
    background: rgba(250,250,250,1);
    box-shadow: 0 2px 20px rgba(0,0,0, 0.1);
    padding: 10px;
    z-index: 2;
}

@media (max-width: 575px) {
  .tntsearch-dropdown ~ .tntsearch-results .row {
    width: 350px; }
}

.tntsearch-results .info {
    color: #999;
    font-size: 90%;
}

.tntsearch-results .title {
    margin-bottom: 10px;
}

/* Farbe des Titellinks von Linkfarbe blau auf Titel-Rot geändert */
.tntsearch-results .title a {
	 color: #FF6161;
}

/* Farbe des Pfades auf von schwarz auf grau geändert */

.tntsearch-results .route {
    margin-top: 0;
    margin-bottom: 10px;
	 color: #999;
}

.tntsearch-results .row > p {
    margin-top: 0;
}

.tntsearch-results em {
    font-style: normal;
    background-color: #ffff33;
}

.tntsearch-powered-by {
    text-align: center;
    font-size: 14px;
}

.tntsearch-dropdown ~ .tntsearch-powered-by {
    display: none;
}