/*
 * MWFewoManager — Frontend
 *
 * @author Küstenweb GmbH <info@mwfewomanager.de>
 * @copyright mwfewomanager.de
 *
 * v136b: feature-chips als Bundle-Asset statt skeleton.
 *
 * Hintergrund: accommodation.css ist skeleton-overridable (Theme-Devs sollen
 * sie editieren können). InstallFrontendCommand kopiert neue skeleton-Files
 * NUR wenn sie noch nicht existieren — bestehende Installationen behalten
 * also ihre alte Datei. Das hier ist immergleicher Bundle-Asset, der die
 * neuen Icon-Only-Chip-Styles + Bullet-Override garantiert lädt.
 */

/* Bullet-Override: das alte ::before "• " soll bei den neuen Icon-Chips
   nicht mehr erscheinen. Doppelt absichern (sowohl globaler list-style als
   auch ::before-Reset), damit auch ältere accommodation.css-Versionen
   das gewünschte Ergebnis liefern. */
.accommodation-card__features,
.accommodation-row__features {
    list-style: none !important;
    padding-left: 0;
}

.accommodation-card__features li::before,
.accommodation-row__features li::before,
.card-features .card-features__item::before {
    content: none !important;
}

/* Icon-Only-Chips — runde, anklickbare Pictogramme, Titel als ui-tooltip. */
.card-features.card-features--icons {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.card-features__item--icon-only {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    /* Moderne, weich gerundete Kachel mit dezent primärfarbenem Hintergrund +
       Rahmen (statt schlichtem Kreis) — konsistent mit dem Widget. */
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--color-primary, #0071c2) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-primary, #0071c2) 16%, transparent);
    cursor: help;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.card-features__item--icon-only:hover,
.card-features__item--icon-only:focus-visible {
    background: color-mix(in srgb, var(--color-primary, #0071c2) 16%, #fff);
    border-color: color-mix(in srgb, var(--color-primary, #0071c2) 30%, transparent);
    transform: translateY(-1px);
    outline: 0;
}

.card-features__item--icon-only:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #0071c2) 45%, transparent);
}

.card-features__item--icon-only .card-features__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-primary, #0071c2);
    font-size: 1rem;
    line-height: 1;
}

.card-features__item--icon-only .card-features__icon i {
    font-size: 1rem;
    line-height: 1;
}

/* Initial-Fallback (rundes Mini-Badge mit Anfangsbuchstaben) */
.card-features__item--icon-only .card-features__initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-primary, #0071c2);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
}

/* SVG-Sprite-Icon: das `<use href="…/feature-icons.svg#icon-…">` rendert
   per currentColor — wir setzen also nur Farbe + Größe. */
.card-features__svg {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--color-primary, #0071c2);
    fill: none;
    stroke: currentColor;
}

/* Falls noch ein altes Label im DOM steht (z.B. wegen gecachtem Twig
   oder Theme-Override), defensiv verstecken — Icon-Only soll stimmen. */
.card-features__item--icon-only .card-features__label {
    display: none;
}

/* v136c: Meta-Zeile-Icons (Personen / Zimmer / m²). Die Inline-SVGs
   <svg class="icon"> tragen keine width/height-Attribute; ohne CSS rendern
   sie riesig. Garantiert hier auf Textgröße begrenzen + Items inline legen. */
.accommodation-row__meta,
.accommodation-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
}

.with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.accommodation-row__meta .icon,
.accommodation-card__meta .icon,
.with-icon > .icon {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
}