/*
 * Tierarzt Verzeichnis Frontend Styles (v0.8)
 * ==========================================
 * Priorisiert Theme-Inheritance für Titel & Spezis, korrigierte Titel/Link-Vererbung
*/

/* Wrap für gesamten Shortcode-Output */
.tierarzt-verzeichnis-wrap {
    margin-bottom: 2em;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* --- Filterbereich --- */
.tierarzt-filter-wrap {
    border-radius: 3px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f5f5f5;
    /* Helle Hintergrundfarbe für Abgrenzung */
    border: 1px solid #ddd;
}

.tierarzt-filter-wrap label {
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
    font-size: 0.95em;
}

.tierarzt-filter-wrap input[type="text"],
.tierarzt-filter-wrap input[type="number"],
.tierarzt-filter-wrap select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    margin-bottom: 5px;
    max-width: 100%;
}

.tierarzt-filter-wrap select[multiple] {
    min-height: 80px;
}

.custom-radius-input-container {
    display: block;
}

#radius_custom_input {
    width: 100px !important;
    padding: 8px !important;
    margin-top: 5px !important;
}

#radius_custom_input.highlighted-input {
    background-color: #fffadd;
    border-color: #f0c000;
    box-shadow: 0 0 4px rgba(240, 192, 0, 0.4);
    transition: all 0.3s ease;
}

.tierarzt-filter-wrap div[style*="overflow-y: auto"] {
    border-radius: 3px;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    background: #fff;
}

.tierarzt-filter-wrap div[style*="overflow-y: auto"] label {
    font-weight: normal;
    font-size: 0.9em;
    margin-bottom: 8px;
    display: block;
}

.tierarzt-filter-wrap div[style*="overflow-y: auto"] input[type="checkbox"] {
    width: auto;
    margin-right: 5px;
    vertical-align: middle;
}

.tierarzt-filter-wrap div[style*="justify-content: space-between"] {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Buttons erben vom Theme, ggf. minimale Anpassung */
.tierarzt-filter-wrap button[type="submit"] {
    padding: 10px 20px;
    cursor: pointer;
    /* Theme-Button-Styles sollten greifen, sonst hier minimal ergänzen */
}

.tierarzt-filter-wrap a[href*="?"] {
    /* Reset Link */
    vertical-align: middle;
    margin-left: 10px;
    /* Link-Styles vom Theme erben */
}

.tierarzt-map-toggle-button {
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
    /* Minimaler Button-Style */
    border-radius: 3px;
    font-size: 0.95em;
    line-height: 1.5;
    /* Farbe etc. vom Theme erben */
}

.tierarzt-map-toggle-button:hover {
    background-color: #eee;
    border-color: #bbb;
}

.tierarzt-map-toggle-button .dashicons {
    vertical-align: middle;
    margin-right: 5px;
    font-size: 1.2em;
    height: auto;
}

#tierarzt-filter-messages {
    margin-left: 15px;
}

#tierarzt-filter-messages .loading-message,
#tierarzt-filter-messages .error-message {
    padding: 8px 12px;
    margin: 0;
    border-radius: 3px;
    display: inline-block;
    font-size: 0.9em;
    vertical-align: middle;
}

#tierarzt-filter-messages .loading-message {
    background-color: #e0e0e0;
    color: #333;
}

#tierarzt-filter-messages .error-message {
    background-color: #fdd;
    border: 1px solid #f88;
    color: #900;
}

/* --- Ergebnisbereich --- */
.tierarzt-result-count {
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #eee;
    font-style: italic;
    color: #555;
    /* Grauton, kann vom Theme überschrieben werden */
    font-size: 0.95em;
}

.tierarzt-verzeichnis-list {
    display: grid;
    gap: 20px;
    list-style: none;
    /* Sicherstellen, dass keine Listenpunkte angezeigt werden */
    padding: 0;
    margin: 0;
}

/* Spalten-Layouts */
#tierarzt-results-container.tierarzt-columns-1 .tierarzt-verzeichnis-list {
    grid-template-columns: 1fr;
}

#tierarzt-results-container.tierarzt-columns-2 .tierarzt-verzeichnis-list {
    grid-template-columns: repeat(2, 1fr);
}

#tierarzt-results-container.tierarzt-columns-3 .tierarzt-verzeichnis-list {
    grid-template-columns: repeat(3, 1fr);
}

#tierarzt-results-container.tierarzt-columns-4 .tierarzt-verzeichnis-list {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive Spalten */
@media (max-width: 992px) {
    #tierarzt-results-container.tierarzt-columns-4 .tierarzt-verzeichnis-list {
        grid-template-columns: repeat(3, 1fr);
    }

    #tierarzt-results-container.tierarzt-columns-3 .tierarzt-verzeichnis-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    #tierarzt-results-container.tierarzt-columns-4 .tierarzt-verzeichnis-list,
    #tierarzt-results-container.tierarzt-columns-3 .tierarzt-verzeichnis-list {
        grid-template-columns: repeat(2, 1fr);
    }

    #tierarzt-results-container.tierarzt-columns-2 .tierarzt-verzeichnis-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {

    #tierarzt-results-container.tierarzt-columns-2 .tierarzt-verzeichnis-list,
    #tierarzt-results-container.tierarzt-columns-3 .tierarzt-verzeichnis-list,
    #tierarzt-results-container.tierarzt-columns-4 .tierarzt-verzeichnis-list {
        grid-template-columns: 1fr;
    }
}

/* Einzelne Tierarzt-Karte */
.tierarzt-card {
    border: 1px solid #ddd;
    /* Rahmen für Abgrenzung */
    padding: 15px;
    background-color: #fff;
    /* Weißer Hintergrund, Theme könnte überschreiben */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
    border-radius: 3px;
}

.tierarzt-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Titel (Theme Inheritance für Farbe/Line-Height, Standard H3 für Größe/Gewicht) */
.tierarzt-card .tierarzt-name {
    /* Gilt für das H3-Tag */
    margin-top: 0;
    margin-bottom: 10px;
    line-height: inherit;
    /* Vom Theme erben */
    color: var(--theme-link-initial-color);
    /* Textfarbe vom Theme erben */
    /* font-size: inherit;     <<<< ENTFERNT, damit Theme/Browser h3-Größe anwendet */
    /* font-weight: inherit;   <<<< ENTFERNT, damit Theme/Browser h3-Gewicht anwendet */
}

/* Link innerhalb des Titels */
.tierarzt-card .tierarzt-name a {
    text-decoration: none;
    /* color: inherit; <<<< ENTFERNT, damit die Standard-Linkfarbe des Themes greift */
}

.tierarzt-card .tierarzt-name a:hover {
    text-decoration: underline;
}

/* Meta-Bereich */
.tierarzt-card .tierarzt-meta {
    margin-bottom: 15px;
    font-size: 0.95em;
    /* Leicht kleiner als Standardtext */
    flex-grow: 1;
}

.tierarzt-card .tierarzt-meta p {
    margin: 5px 0;
    line-height: 1.6;
    display: flex;
    align-items: center;
    /* Schriftart, Farbe etc. vom Theme erben */
}

.tierarzt-card .tierarzt-meta p .dashicons {
    margin-right: 8px;
    color: #555;
    /* Feste Farbe für Icons */
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.tierarzt-card .tierarzt-meta p a {
    text-decoration: none;
    /* Farbe wird vom Theme geerbt oder Standard-Linkfarbe */
    /* color: inherit; */
    /* Entfernt, s.o. */
}

.tierarzt-card .tierarzt-meta p a:hover {
    text-decoration: underline;
}

/* Ärzte-Liste auf der Karte */
.tierarzt-doctors-list {
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 10px;
    border-top: 1px dotted #ccc;
    /* Dezente Trennlinie */
}

.doctor-item {
    margin-bottom: 10px;
}

.doctor-item:last-child {
    margin-bottom: 0;
}

.doctor-item .doctor-name {
    font-weight: bold;
    /* Name hervorheben */
    margin: 0 0 3px 0;
    display: block;
    line-height: 1.4;
    /* Farbe etc. vom Theme erben */
}

/* Spezialisierungs-Tags (Theme Inheritance) */
.tierarzt-tags {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Abstand zwischen Tags */
}

.tierarzt-tags li {
    /* background-color: #d96464; <<<< AUSKOMMENTIERT für Theme Inheritance */
    /* color: #ffffff;           <<<< AUSKOMMENTIERT für Theme Inheritance */
    background-color: var(--theme-palette-color-5);
    /* Versucht Hintergrund vom Elternelement zu erben */
    color: inherit;
    /* Versucht Textfarbe vom Elternelement zu erben */
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1;
    margin-bottom: 3px;
}

.tierarzt-tags li a {
    text-decoration: none;
    color: inherit;
    /* Erbt Farbe vom li-Element */
}

.tierarzt-tags li a:hover {
    text-decoration: none;
    /* Kein Unterstrich für Tags */
    /* Hover-Effekt vom Theme oder Standard */
}

/* Arzt-Spezialisierungen erben jetzt komplett von .tierarzt-tags li */
.doctor-specialties-tags {
    margin-top: 5px;
    /* Kleiner Abstand zum Namen */
    margin-left: 0;
    padding-left: 0;
}

.doctor-specialties-tags li {
    /* Keine spezifischen Styles mehr hier, erbt von .tierarzt-tags li */
}

/* Praxis-Spezialisierungen Abschnitt */
.tierarzt-spezialisierungen {
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 10px;
    border-top: 1px dotted #ccc;
}

.tierarzt-spezialisierungen strong {
    font-weight: bold;
    margin: 0 0 5px 0;
    display: block;
    line-height: 1.4;;
    /* Dunklerer Text für die Überschrift */
}

/* Praxis-Beschreibung */
.tierarzt-description {
    margin-top: 15px;
    font-size: 0.9em;
    /* Leicht kleiner */
    line-height: 1.5;
    color: #444;
    /* Leicht dunklerer Text */
    /* Sollte Schriftart vom Theme erben */
}

/* Karten-Button & No-Map Text */
.tierarzt-card .tierarzt-map-button {
    display: inline-block;
    padding: 8px 15px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
    /* Minimaler Button-Style */
    color: #333;
    margin-top: auto;
    /* Button nach unten drücken */
    align-self: flex-start;
    /* An linker Kante ausrichten */
    border-radius: 3px;
    font-size: 0.9em;
    /* Theme-Button-Styles sollten greifen, sonst hier ergänzen */
}

.tierarzt-card .tierarzt-map-button .dashicons {
    vertical-align: middle;
    margin-right: 5px;
    height: auto;
    font-size: 1em;
    /* Größe an Button-Text anpassen */
}

.tierarzt-card .tierarzt-map-button:hover {
    background-color: #eee;
    border-color: #bbb;
}

.tierarzt-card .tierarzt-no-map {
    font-style: italic;
    color: #888;
    /* Grauer Text */
    font-size: 0.9em;
    margin-top: auto;
    /* Nach unten drücken */
    padding-top: 10px;
    /* Abstand nach oben */
    align-self: flex-start;
}


/* --- Karten (Übersicht & Modal) --- */
#tierarzt-integrated-overview-map-container {
    margin-bottom: 1.5em;
    border: 1px solid #ccc;
    padding: 5px;
    background-color: #f9f9f9;
    /* Heller Hintergrund */
}

#tierarzt-integrated-overview-map {
    height: 500px;
    /* Höhe anpassbar per Shortcode-Attribut? */
    width: 100%;
    background-color: #e9e9e9;
    /* Platzhalter-Hintergrund */
}

/* Leaflet Popup Styling */
.leaflet-popup-content-wrapper {
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    /* Theme sollte Schriftart und Grundfarben steuern */
}

.leaflet-popup-content {
    font-size: 0.9em;
    line-height: 1.4;
    /* Theme sollte Schriftart und Grundfarben steuern */
}

.leaflet-popup-content strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1em;
    font-weight: bold;
    /* Name im Popup fett */
    /* Farbe vom Theme erben */
}

.leaflet-popup-content small {
    color: #555;
    /* Grauer Text für Adresse im Popup */
    display: block;
    margin-bottom: 8px;
}

.leaflet-popup-content button.show-single-vet-btn {
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 0.9em;
    cursor: pointer;
    background-color: #eee;
    /* Minimaler Button-Style */
    border: 1px solid #ccc;
    border-radius: 3px;
    display: inline-block;
    /* Farbe etc. vom Theme erben */
}

.leaflet-popup-content button.show-single-vet-btn:hover {
    background-color: #ddd;
    border-color: #bbb;
}

.leaflet-container a.leaflet-popup-close-button {
    color: #555 !important;
    /* Farbe des Schließen-Buttons */
    font-size: 1.3em;
    padding: 5px 5px 0 0;
}

/* Einzelkarten-Modal (Minimal-Styling) */
#tierarztMapModal {
    /* Positionierung etc. wird per JS gesetzt */
}

#tierarztMapModal>div {
    /* Der innere Content-Div */
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    background-color: #fff;
    /* Weißer Hintergrund für Modal */
    padding: 20px;
    max-width: 600px;
    width: 90%;
    /* Theme sollte Schriftarten etc. steuern */
}

#tierarztMapModal h4 {
    /* Titel im Modal */
    margin-top: 0;
    margin-bottom: 10px;
    /* Schriftgröße, Farbe etc. vom Theme erben */
}

#tierarztMapModal p {
    /* Adresse im Modal */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 0.95em;
    /* Farbe etc. vom Theme erben */
}

#tierarztMapModal #single-vet-map {
    /* Karten-Div im Modal */
    margin-top: 15px;
    height: 400px;
    /* Feste Höhe für Modal-Karte */
    width: 100%;
    background-color: #e9e9e9;
    /* Platzhalter-Hintergrund */
}

#tierarztMapModal button {
    /* Generell für Buttons im Modal, falls welche dazukommen */
    padding: 8px 12px;
    cursor: pointer;
    /* Styles vom Theme erben */
}

#tierarztMapModal button[style*="position: absolute"] {
    /* Spezifisch für Schließen-Button */
    border: none;
    background: none;
    font-size: 1.8em;
    line-height: 1;
    color: #666;
    padding: 5px;
    position: absolute;
    /* JS setzt dies, aber hier nochmal definieren */
    top: 10px;
    right: 10px;
}

#tierarztMapModal button[style*="position: absolute"]:hover {
    color: #000;
}