/* iMens — Beacon (ephemerer NSFW-Status mit Radius-Push).
   Dark-Glass, HH-Rot #e0163a. Additiv; ueberschreibt die globale
   main.css-Regel `input{display:block;width:100%;padding:1.1rem}` fuer eigene Controls. */

.hh-beacon-wrap { margin-top: 8px; }

/* ---- Status-Typ-Buttons ---- */
.hh-beacon-types {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px;
}
.hh-beacon-type {
    appearance: none !important; -webkit-appearance: none !important;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 14px !important; width: auto !important;
    border: 1px solid rgba(242,242,243,.16); border-radius: 10px;
    background: rgba(255,255,255,.04); color: #f2f2f3;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s, transform .05s;
}
.hh-beacon-type:hover { border-color: rgba(224,22,58,.55); background: rgba(224,22,58,.08); }
.hh-beacon-type:active { transform: translateY(1px); }
.hh-beacon-type[data-selected="1"] {
    border-color: #e0163a; background: rgba(224,22,58,.18); color: #fff;
    box-shadow: 0 0 0 1px rgba(224,22,58,.35) inset;
}

/* ---- Felder ---- */
.hh-beacon-field-label {
    display: block; margin: 14px 0 6px; font-size: 12.5px;
    color: rgba(242,242,243,.62); font-weight: 600; letter-spacing: .2px;
}
.hh-beacon-input {
    display: block !important; width: 100% !important;
    box-sizing: border-box; padding: 12px 14px !important;
    border: 1px solid rgba(242,242,243,.16) !important; border-radius: 10px;
    background: rgba(0,0,0,.28) !important; color: #f2f2f3 !important;
    font-size: 14px; outline: none;
}
.hh-beacon-input:focus { border-color: #e0163a !important; }
.hh-beacon-input::placeholder { color: rgba(242,242,243,.35); }

/* ---- Slider (range) — main.css-Aufblaehung neutralisieren ---- */
.hh-beacon-range {
    appearance: none !important; -webkit-appearance: none !important;
    display: block !important; width: 100% !important;
    padding: 0 !important; height: 6px; margin: 6px 0 2px;
    background: rgba(242,242,243,.14); border: 0 !important; border-radius: 999px;
    outline: none; cursor: pointer;
}
.hh-beacon-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: #e0163a; border: 2px solid #fff; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.hh-beacon-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #e0163a; border: 2px solid #fff; cursor: pointer;
}

/* ---- Aktiver eigener Beacon ---- */
.hh-beacon-active__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(224,22,58,.18); border: 1px solid rgba(224,22,58,.45);
    color: #fff; font-weight: 700; font-size: 14px;
}
.hh-beacon-active__badge i { color: #e0163a; }
.hh-beacon-active__meta { margin: 10px 0 12px; font-size: 12.5px; color: rgba(242,242,243,.6); }

/* ---- Liste "in der Naehe" ---- */
.hh-beacon-list { display: flex; flex-direction: column; gap: 10px; }
.hh-beacon-empty { padding: 34px 16px; font-size: 14px; }
.hh-beacon-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: 12px;
    background: rgba(255,255,255,.035); border: 1px solid rgba(242,242,243,.08);
}
.hh-beacon-card__pic img {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(242,242,243,.14);
}
.hh-beacon-card__body { flex: 1 1 auto; min-width: 0; }
.hh-beacon-card__top { display: flex; align-items: baseline; gap: 10px; }
.hh-beacon-card__name { font-weight: 700; color: #f2f2f3; font-size: 15px; }
.hh-beacon-card__name:hover { color: #e0163a; }
.hh-beacon-card__dist {
    font-size: 12px; color: rgba(242,242,243,.5);
    white-space: nowrap; margin-left: auto;
}
.hh-beacon-card__status { margin-top: 3px; font-size: 13.5px; color: #f2f2f3; }
.hh-beacon-card__status i { color: #e0163a; margin-right: 4px; }
.hh-beacon-card__note { color: rgba(242,242,243,.6); font-weight: 400; }
.hh-beacon-card__meta { margin-top: 3px; font-size: 11.5px; color: rgba(242,242,243,.42); }
.hh-beacon-card__msg { flex: 0 0 auto; }

@media (max-width: 575px) {
    .hh-beacon-card { flex-wrap: wrap; }
    .hh-beacon-card__msg { width: 100%; margin-top: 6px; }
}