/* === Masquage robuste des natives Houzez remplacées par STG ============
   Notre JS ajoute cette classe sur les <li.h-area / h-rooms / h-beds /
   h-baths / h-cars / h-land-area> quand on les remplace par notre injection.
   L'inline `style="display:none"` était parfois écrasé par un autre script
   (probable houzez-gallery init qui re-applique du style sur les item-amenities).
   La classe + !important met fin au combat. */
.stg-replaced-native {
    display: none !important;
}

/**
 * Styles pour les stats supplémentaires injectées sur les cartes Houzez
 * (Pièces / Toilettes / Jardin / Piscine). Cohérent avec les .h-* natifs.
 *
 * + Tooltip universel sur l'icône au survol (desktop) et au tap (touch).
 *   La classe `.stg-stat-icon-wrap` est appliquée par stg-listing-stats-extra.js
 *   sur nos icônes ET sur les icônes Houzez natives (Beds, Bath, Surface…),
 *   pour offrir un comportement homogène sur toutes les cartes.
 *
 * + Icônes SVG STG (Bath, WC, Piscine) — line-style stroke 1.6px pour matcher
 *   visuellement les icônes Houzez (`houzez-icon icon-*`). Évite le mix
 *   line/solid qu'on avait avec `fas fa-bath` / `fas fa-toilet` / `fas fa-swimming-pool`.
 *   Implémentation : `mask-image` SVG inline → la couleur suit `currentColor`,
 *   se comporte exactement comme une icon-font (texte autour, héritage couleur).
 */

/* === Icônes SVG STG line-style — base ============================== */
.stg-svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    vertical-align: middle;
    line-height: 1;
}

/* Bath — baignoire vue de profil + 2 gouttes (eau qui tombe) */
.stg-svg-bath {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3Cpath d='M6 12V5a2 2 0 0 1 4 0'/%3E%3Cpath d='M5 19l-1 2M19 19l1 2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3Cpath d='M6 12V5a2 2 0 0 1 4 0'/%3E%3Cpath d='M5 19l-1 2M19 19l1 2'/%3E%3C/svg%3E");
}

/* WC — cuvette + réservoir + chasse */
.stg-svg-wc {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='9' height='5' rx='1'/%3E%3Cpath d='M5 10h15l-2 7H7z'/%3E%3Cpath d='M9 18v3M15 18v3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='9' height='5' rx='1'/%3E%3Cpath d='M5 10h15l-2 7H7z'/%3E%3Cpath d='M9 18v3M15 18v3'/%3E%3C/svg%3E");
}

/* Piscine — bassin avec vaguelettes + 2 marches d'escalier */
.stg-svg-piscine {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17c1.5 1 3 1 4.5 0s3-1 4.5 0 3 1 4.5 0 3-1 4.5 0'/%3E%3Cpath d='M3 21c1.5 1 3 1 4.5 0s3-1 4.5 0 3 1 4.5 0 3-1 4.5 0'/%3E%3Cpath d='M7 12V5a2 2 0 0 1 4 0M13 12V5a2 2 0 0 1 4 0'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17c1.5 1 3 1 4.5 0s3-1 4.5 0 3 1 4.5 0 3-1 4.5 0'/%3E%3Cpath d='M3 21c1.5 1 3 1 4.5 0s3-1 4.5 0 3 1 4.5 0 3-1 4.5 0'/%3E%3Cpath d='M7 12V5a2 2 0 0 1 4 0M13 12V5a2 2 0 0 1 4 0'/%3E%3C/svg%3E");
}

/* Tailles contextuelles : les .stg-svg-icon adoptent automatiquement la taille
   du contexte parent (via 1em). En cards le texte est 13-14px, dans la lightbox
   le widget Houzez force 24px sur les .houzez-icon — les .stg-svg-icon suivent
   par cette règle. */
.property-overview-item .stg-svg-icon {
    width: 24px;
    height: 24px;
}

/* === Layout des <li> de stats === */
.stg-stat-li {
    color: inherit;
    font-size: 13px;
    gap: 6px;
}

/* Icônes injectées : <i.houzez-icon> hérite la taille de fonte du UL
   (item-amenities i = 18px côté Houzez) → cohérence avec les icônes natives.
   <svg> reçoit une taille explicite (18×18) pour matcher. */
.stg-stat-li .stg-stat-icon {
    flex-shrink: 0;
    color: var(--houzez-listing-features, #8B7C74);
    vertical-align: middle;
    margin-right: 6px; /* gap icône → label, équivalent à `me-2` Bootstrap */
}
.stg-stat-li svg.stg-stat-icon,
.stg-stat-li i.stg-svg-icon.stg-stat-icon {
    width: 18px;
    height: 18px;
}
.stg-stat-li i.stg-stat-icon {
    font-size: 18px;
    line-height: 1;
}

.stg-stat-li .item-amenities-text {
    color: inherit;
    font-weight: 500;
    white-space: nowrap;
}

.stg-stat-li .hz-figure {
    font-weight: 600;
    margin-left: 2px;
}

/* Variante half-map / item-v5 : center align, fond plus compact */
.item-amenities-with-icons .stg-stat-li {
    background: transparent;
    padding: 0 4px;
}

/* === Tooltip icône === */
/* Wrapper focusable qui porte le tooltip — pensé pour rester VISUELLEMENT
   INVISIBLE sur la card : pas de cursor:help (les Houzez natives n'en
   avaient pas), pas d'outline focus visible. L'icône hôte garde son rendu
   d'origine (taille, couleur, marge). */
.stg-stat-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: inherit;
    outline: none;
    color: inherit;
}

/* Focus-visible discret (uniquement clavier) — pas de carré coloré qui
   décore les cards en mode souris. */
.stg-stat-icon-wrap:focus { outline: none; }
.stg-stat-icon-wrap:focus-visible {
    outline: 1px dotted currentColor;
    outline-offset: 2px;
}

/* Bulle tooltip (générée à partir de data-tip pour pouvoir formater nous-même) */
.stg-stat-icon-wrap::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #2c2622;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* Flèche pointant vers l'icône */
.stg-stat-icon-wrap::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2c2622;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 9999;
}

/* États qui ouvrent le tooltip :
   • :hover           → desktop souris
   • :focus-visible   → navigation clavier
   • .stg-tip-open    → tap touch (toggle JS — iOS Safari n'émule pas :hover)
*/
.stg-stat-icon-wrap:hover::after,
.stg-stat-icon-wrap:focus-visible::after,
.stg-stat-icon-wrap.stg-tip-open::after,
.stg-stat-icon-wrap:hover::before,
.stg-stat-icon-wrap:focus-visible::before,
.stg-stat-icon-wrap.stg-tip-open::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* On masque le tooltip natif du title= en désactivant son apparition différée :
   sur certains navigateurs il s'affiche par-dessus notre bulle. Astuce :
   pointer-events qui reste sur le wrap, le browser n'affiche pas title pendant
   :hover si on remplace explicitement. Pas de solution CSS pure → on retirera
   l'attribut title au runtime si l'utilisateur a un device tactile (cf JS). */

/* Pour les icônes natives Houzez (font-awesome ou houzez-icon), on PRÉSERVE
   la marge d'origine (`me-2` Bootstrap = 0.5rem) — le wrap est purement
   logique, pas visuel. Ainsi la card a EXACTEMENT le même rendu qu'avant
   l'ajout du tooltip. */
.stg-stat-icon-wrap-native {
    /* Aucune marge propre — l'icône à l'intérieur garde la sienne (me-2). */
    margin: 0;
}