/* --- UNIVERZÁLNY TOOLTIP PRE VŠETKY ENERGO ŠTÍTKY --- */

/* 1. Príprava rodiča (ikonky) */
[class*="flag-energo-"] {
    position: relative;
    /* Aby sa tooltip vedel "chytiť" tejto ikonky */
    overflow: visible !important;
    /* Dôležité: aby text nebol odrezaný */
}

/* 2. Vzhľad tooltipu po nabehnutí myšou */
[class*="flag-energo-"]:hover::after {
    content: "Energetická trieda";
    /* Text, ktorý sa zobrazí */

    /* Pozícia */
    position: absolute;
    bottom: 100%;
    /* Zobrazí sa NAD ikonkou */
    left: 50%;
    transform: translateX(-50%);
    /* Vycentruje ho presne na stred */
    margin-bottom: 8px;
    /* Malá medzera medzi ikonkou a bublinou */

    /* Vzhľad (Alza štýl) */
    background-color: #1a1a1a;
    /* Tmavá čierna/sivá */
    color: #ffffff !important;
    /* Biela farba textu (musí byť !important) */
    font-size: 12px !important;
    /* Veľkosť písma (musí byť !important) */
    font-weight: normal;
    padding: 6px 10px;
    border-radius: 4px;
    /* Jemne zaoblené rohy */
    white-space: nowrap;
    /* Text bude vždy v jednom riadku */
    z-index: 9999;
    /* Aby bol vždy navrchu nad všetkým ostatným */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* Jemný tieň pre 3D efekt */
    pointer-events: none;
    /* Aby bublina neprekážala pri klikaní */
}

/* 3. Malá šípka pod bublinou (voliteľný detail) */
[class*="flag-energo-"]:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 2px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1a1a1a transparent transparent transparent;
    /* Šípka rovnakej farby ako bublina */
    z-index: 9999;
}

/* --- 2. NASTAVENIE VEĽKOSTÍ (Automaticky pre všetky energo štítky) --- */

/* A) Veľkosť v KATEGÓRII (Zoznam produktov) - Tvoja požiadavka 50x30 */
.product [class*="flag-energo-"],
.products-block [class*="flag-energo-"] {
    width: 50px !important;
    height: 30px !important;
}

/* B) Veľkosť v DETAILE PRODUKTU - Tu dáme väčšie */
/* 1. Skryjeme pôvodný štítok v hlavnom obrázku LEN v detaile (aby tam nezavadzal) */
.type-detail .p-image [class*="flag-energo-"],
.p-detail .p-image [class*="flag-energo-"] {
    display: none !important;
}

/* 2. Nastylovanie nového štítku pod social ikonami (ten čo sme skopírovali) */
.new-energo-wrapper [class*="flag-energo-"] {
    width: 65px !important;
    /* Tu si nastav šírku pre detail */
    height: 45px !important;
    /* Tu si nastav výšku pre detail */
}

.flag-energo-a {
    background-image: url('/user/documents/upload/Energo/A.svg') !important;
    /* Cesta k tvojmu SVG */
    background-color: transparent !important;
    /* Zruší žlté pozadie */
    background-repeat: no-repeat;
    background-size: contain;
    /* Obrázok sa prispôsobí veľkosti */
    background-position: center;

    /* Skrytie pôvodného textu "Energo D" */
    color: transparent !important;
    font-size: 0 !important;

    /* Odstránenie rámčekov a paddingu ak tam nejaké sú */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* Aby to bolo klikateľné a správalo sa ako blok */
    display: block;
}

.flag-energo-b {
    background-image: url('/user/documents/upload/Energo/B.svg') !important;
    /* Cesta k tvojmu SVG */
    background-color: transparent !important;
    /* Zruší žlté pozadie */
    background-repeat: no-repeat;
    background-size: contain;
    /* Obrázok sa prispôsobí veľkosti */
    background-position: center;

    /* Skrytie pôvodného textu "Energo D" */
    color: transparent !important;
    font-size: 0 !important;

    /* Odstránenie rámčekov a paddingu ak tam nejaké sú */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* Aby to bolo klikateľné a správalo sa ako blok */
    display: block;
}

.flag-energo-c {
    background-image: url('/user/documents/upload/Energo/C.svg') !important;
    /* Cesta k tvojmu SVG */
    background-color: transparent !important;
    /* Zruší žlté pozadie */
    background-repeat: no-repeat;
    background-size: contain;
    /* Obrázok sa prispôsobí veľkosti */
    background-position: center;

    /* Skrytie pôvodného textu "Energo D" */
    color: transparent !important;
    font-size: 0 !important;

    /* Odstránenie rámčekov a paddingu ak tam nejaké sú */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* Aby to bolo klikateľné a správalo sa ako blok */
    display: block;
}

.flag-energo-d {
    background-image: url('/user/documents/upload/Energo/D.svg') !important;
    /* Cesta k tvojmu SVG */
    background-color: transparent !important;
    /* Zruší žlté pozadie */
    background-repeat: no-repeat;
    background-size: contain;
    /* Obrázok sa prispôsobí veľkosti */
    background-position: center;

    /* Skrytie pôvodného textu "Energo D" */
    color: transparent !important;
    font-size: 0 !important;

    /* Odstránenie rámčekov a paddingu ak tam nejaké sú */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* Aby to bolo klikateľné a správalo sa ako blok */
    display: block;
}

.flag-energo-e {
    background-image: url('/user/documents/upload/Energo/E.svg') !important;
    /* Cesta k tvojmu SVG */
    background-color: transparent !important;
    /* Zruší žlté pozadie */
    background-repeat: no-repeat;
    background-size: contain;
    /* Obrázok sa prispôsobí veľkosti */
    background-position: center;

    /* Skrytie pôvodného textu "Energo D" */
    color: transparent !important;
    font-size: 0 !important;

    /* Odstránenie rámčekov a paddingu ak tam nejaké sú */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* Aby to bolo klikateľné a správalo sa ako blok */
    display: block;
}

.flag-energo-f {
    background-image: url('/user/documents/upload/Energo/F.svg') !important;
    /* Cesta k tvojmu SVG */
    background-color: transparent !important;
    /* Zruší žlté pozadie */
    background-repeat: no-repeat;
    background-size: contain;
    /* Obrázok sa prispôsobí veľkosti */
    background-position: center;

    /* Skrytie pôvodného textu "Energo D" */
    color: transparent !important;
    font-size: 0 !important;

    /* Odstránenie rámčekov a paddingu ak tam nejaké sú */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* Aby to bolo klikateľné a správalo sa ako blok */
    display: block;
}

.flag-energo-g {
    background-image: url('/user/documents/upload/Energo/G.svg') !important;
    /* Cesta k tvojmu SVG */
    background-color: transparent !important;
    /* Zruší žlté pozadie */
    background-repeat: no-repeat;
    background-size: contain;
    /* Obrázok sa prispôsobí veľkosti */
    background-position: center;

    /* Skrytie pôvodného textu "Energo D" */
    color: transparent !important;
    font-size: 0 !important;

    /* Odstránenie rámčekov a paddingu ak tam nejaké sú */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* Aby to bolo klikateľné a správalo sa ako blok */
    display: block;
}