/* tigerexped partnerHub Shop-Plugin — Frontend-Style */

/* KEIN eigenes max-width. Das Widget steht immer in einem Template-Container
   (auf tigerexped.de `.container`, dort max-width 1442px bzw. 97vw mobil) — eine
   zweite Breitenbegrenzung darin verengt die Seite ein weites Mal und lässt den
   Block schmaler wirken als alles ringsherum. Die Breite gehört dem Template,
   nicht dem Plugin; das Karten-Raster unten skaliert ohnehin mit
   (auto-fill/minmax). */
.ph-shop { font-family: inherit; color: #222; margin: 1rem 0; }
.ph-shop-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.ph-shop-header h2 { font-size: 1.4rem; margin: 0; }
.ph-shop-meta { color: #6c757d; font-size: 0.85rem; }

.ph-shop-stale {
    background: #fff8e1; border-left: 4px solid #f59f00;
    padding: 0.5rem 0.8rem; margin-bottom: 0.8rem;
    font-size: 0.85rem; border-radius: 0.25rem;
}

.ph-shop-map {
    height: 380px; width: 100%; border-radius: 0.4rem;
    margin-bottom: 0.8rem; background: #f0f0f0;
}
/* Karten-Fallback, wenn Leaflet nicht laedt — statt grauem Block eine Meldung. */
.ph-shop-map-fallback {
    display: flex; align-items: center; justify-content: center;
    height: 100%; padding: 1rem; text-align: center;
    color: #6c757d; font-size: 0.9rem; box-sizing: border-box;
}
/* Dezenter Hinweis bei Tile-Ausfall (Karte da, Kacheln fehlen). */
.ph-shop-map-note {
    position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 500;
    background: rgba(255,248,225,0.95); border: 1px solid #f59f00;
    color: #664d03; font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 0.25rem;
}

.ph-shop-filter { margin: 0.6rem 0; }
/* Das Suchfeld traegt `.form-control` vom Shop-Template — hier nur die Breite. */
.ph-shop-filter input[type="text"] { max-width: 360px; }

/* ── Umkreissuche (Standort erst auf Klick) ──────────────────────────────── */
.ph-shop-near {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.6rem; margin-top: 0.5rem;
}
/* Der Knopf traegt `btn btn-outline-primary btn-sm` vom Shop-Template — hier
   nur, was Bootstrap nicht regelt. */
.ph-shop-near-btn { white-space: nowrap; }
.ph-shop-radius-ctl { display: inline-flex; align-items: center; gap: 0.5rem; }
.ph-shop-radius-ctl[hidden] { display: none; }
.ph-shop-radius-ctl input[type="range"] { width: 160px; accent-color: var(--primary, #ffad00); cursor: pointer; }
.ph-shop-radius-val { font-size: 0.85rem; color: #495057; min-width: 3.4rem; }
.ph-shop-near-clear {
    background: none; border: 0; color: #6c757d; font-size: 1.3rem;
    line-height: 1; cursor: pointer; padding: 0 0.2rem;
}
.ph-shop-near-clear:hover { color: #dc3545; }
.ph-shop-near-status { font-size: 0.82rem; color: #6c757d; }

/* Flache Ergebnisliste der Umkreissuche (statt der Bucket-Ansicht) */
.ph-shop-radius-results {
    margin-top: 0.6rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 0.6rem;
}
.ph-shop-radius-results[hidden] { display: none; }

/* Distanz-Badge in der Umkreis-Ergebnisliste. Bewusst im Fluss (nicht absolut) —
   sonst ueberlappt es das rechts-floatende Karten-Logo (Partner mit logo_url).
   Farbe aus dem Template-Token (`--primary`), damit der Block die Shop-Farbe
   erbt statt eine eigene mitzubringen; der Fallback ist das tigerexped-Gelb. */
.ph-shop-dist {
    display: inline-block; margin-bottom: 0.35rem;
    background: var(--primary, #ffad00); color: #000; font-size: 0.72rem; font-weight: 600;
    padding: 0.1rem 0.5rem; border-radius: 0.8rem;
}

/* ── Liste ↔ Karte verlinkt ──────────────────────────────────────────────── */
.ph-shop-clickable { cursor: pointer; }
.ph-shop-card-name.ph-shop-clickable:hover,
.ph-shop-card-addr.ph-shop-clickable:hover { color: var(--primary-dark, #d99300); text-decoration: underline; }
/* kurzes Aufleuchten, wenn man via Popup-Button zur Karte springt */
.ph-shop-card-flash {
    animation: ph-flash 1.5s ease-out;
    outline: 2px solid var(--primary, #ffad00);
}
@keyframes ph-flash {
    0% { background: var(--bg-warning, #f9f2dc); }
    100% { background: #fff; }
}
/* „Details & Kontakt"-Button im Karten-Popup — traegt `btn btn-primary btn-sm`. */
.ph-shop-popup-link { margin-top: 0.4rem; }

.ph-shop-buckets { margin-top: 0.6rem; }
.ph-shop-bucket { margin-bottom: 0.4rem; }
.ph-shop-bucket > summary {
    cursor: pointer; padding: 0.6rem 0.8rem;
    background: #f8f9fa; border: 1px solid #dee2e6;
    border-radius: 0.3rem; font-weight: 600; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.ph-shop-bucket > summary::-webkit-details-marker { display: none; }
.ph-shop-bucket > summary::before {
    content: '▸'; margin-right: 0.5rem;
    transition: transform 0.15s ease; display: inline-block;
}
.ph-shop-bucket[open] > summary::before { transform: rotate(90deg); }
.ph-shop-bucket-count {
    color: #6c757d; font-size: 0.85rem; font-weight: normal;
}
.ph-shop-bucket-body {
    padding: 0.6rem; background: #fff;
    border: 1px solid #dee2e6; border-top: none;
    border-radius: 0 0 0.3rem 0.3rem;
    /* `min(280px, 100%)` statt `280px`: auf einem 320px-Schirm bleiben nach
       Template- und Bucket-Polsterung genau 280px übrig — eine Punktlandung.
       Ein Pixel mehr Polsterung im Template, und die Karten ragten heraus.
       Mit `min()` schrumpft die Spalte statt überzulaufen. Gemessen 03.08.2026
       an iPhone SE / 320px. */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 0.6rem;
}

.ph-shop-card {
    border: 1px solid #dee2e6; border-radius: 0.3rem;
    padding: 0.7rem 0.9rem; background: #fff;
    position: relative;
}
.ph-shop-card-logo {
    float: right; width: 48px; height: 48px;
    object-fit: contain; margin-left: 0.5rem;
}
.ph-shop-card-name { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
.ph-shop-card-addr { font-size: 0.85rem; color: #495057; margin-bottom: 0.35rem; }
.ph-shop-card-country { color: #6c757d; }
.ph-shop-card-desc {
    font-size: 0.83rem; color: #495057;
    margin: 0.3rem 0; line-height: 1.4;
}
/* Kompetenz-/Schulungs-/Rubrik-Badges gibt es in der Launch-Minimalversion
   nicht mehr (v1.0.0) — die Regeln sind mit dem Markup entfallen. */
.ph-shop-card-contact {
    margin-top: 0.4rem; font-size: 0.82rem;
    display: flex; flex-wrap: wrap; gap: 0.6rem;
}
/* Kontakt- und Website-Knopf tragen die Button-Klassen des Shop-Templates
   (`btn btn-primary btn-sm` / `btn btn-outline-primary btn-sm`). Farbe, Radius
   und Hover kommen damit aus dem Shop — hier steht nur, was Bootstrap offen
   laesst. */
.ph-shop-card-contact a { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }

.ph-shop-card.ph-shop-card-filtered-out { display: none; }

.ph-shop-empty {
    text-align: center; padding: 2rem;
    color: #6c757d; background: #f8f9fa; border-radius: 0.3rem;
    margin-top: 0.8rem;
}
.ph-shop-error {
    text-align: center; padding: 1.5rem;
    color: #842029; background: #f8d7da;
    border-radius: 0.3rem;
}

.ph-shop-popup-name { font-weight: 600; }
.ph-shop-popup-addr { font-size: 0.82rem; color: #6c757d; }

/* ── Kontakt: Button, Website-Link, Modal (Phase 2) ───────────────────────── */
.ph-shop-card-contact { margin-top: 0.5rem; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.ph-shop-card-contact a { text-decoration: none; }

/* Honeypot: fuer Menschen unsichtbar (Bots fuellen es) */
.ph-hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

.ph-contact-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem;
}
.ph-contact-overlay[hidden] { display: none; }
.ph-contact-modal {
    background: #fff; border-radius: 0.6rem; max-width: 460px; width: 100%;
    padding: 1.4rem 1.5rem; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    max-height: 92vh; overflow-y: auto;
}
.ph-contact-modal h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.ph-contact-close {
    position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: 0;
    font-size: 1.6rem; line-height: 1; cursor: pointer; color: #888;
}
.ph-contact-modal label { display: block; margin-bottom: 0.7rem; font-size: 0.85rem; font-weight: 600; color: #333; }
.ph-contact-modal input[type=text],
.ph-contact-modal input[type=email],
.ph-contact-modal textarea {
    display: block; width: 100%; margin-top: 0.25rem; padding: 0.45rem 0.6rem;
    border: 1px solid #ccc; border-radius: 0.3rem; font-size: 0.9rem; font-weight: 400; box-sizing: border-box;
}
.ph-contact-modal textarea { resize: vertical; }
.ph-contact-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; }
/* `.ph-contact-submit` traegt `btn btn-primary` — Farbe kommt aus dem Shop. */
.ph-contact-status { font-size: 0.85rem; }
.ph-contact-hint { font-size: 0.74rem; color: #777; margin: 0.8rem 0 0; line-height: 1.4; }

/* ── Handy ────────────────────────────────────────────────────────────────
   Gemessen 03.08.2026 (Playwright, echte Touch-Gesten):
   - Kein horizontaler Überlauf, kein Scroll-Trap über der Karte — die Seite
     scrollt auch dann weiter, wenn der Finger auf der Karte landet.
   - Aber: 380px Karte sind auf einem 320px-Gerät 67% der sichtbaren Höhe. Die
     Liste beginnt dann erst unterhalb des Faltes. 260px lassen die Karte
     Karte bleiben und die Liste in Sichtweite rücken. */
@media (max-width: 575.98px) {
    .ph-shop-map { height: 260px; }
    /* Titel und Zähler nebeneinander wird bei langen Titeln zur Rutschbahn —
       untereinander ist auf schmalen Schirmen die ruhigere Zeile. */
    .ph-shop-header { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
    .ph-shop-header h2 { font-size: 1.2rem; }
}