/* --- 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;
    /* Doležité: aby text nebol odrezaný */
}

/* 2. Vzhled tooltipu po nabehnutí myšou */
[class*="flag-energo-"]:hover::after {
    content: "Energetická třída";
    /* Text, který sa zobrazí */

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

    /* Vzhled (Alza štýl) */
    background-color: #1a1a1a;
    /* Tmavá černá/šedá */
    color: #ffffff !important;
    /* Bílá barva textu (musí byť !important) */
    font-size: 12px !important;
    /* Velikost 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ň pro 3D efekt */
    pointer-events: none;
    /* Aby bublina neprekážala při klikaní */
}

/* 3. Malá šípka pod bublinou (volitelný 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 jako bublina */
    z-index: 9999;
}

/* --- 2. NASTAVENIE VELKOSTÍ (Automaticky pro všechny energo štítky) --- */

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

/* B) Velikost v DETAILE PRODUKTU - Tu dáme větší */
/* 1. Skryjeme povodný š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-"] {
    display: block !important;
    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;
    /* Tu si nastav šírku pro detail */
    height: 45px !important;
    flex: 0 0 65px !important;
    /* Tu si nastav výšku pro detail */
}

/* Shoptet template can cap energy flags to max-width: 0; keep them visible. */
.flags-default [class*="flag-energo-"],
.flags-extra [class*="flag-energo-"] {
    display: block !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 30px !important;
    flex: 0 0 50px !important;
}

.type-detail .orava-energo-source-flag {
    display: none !important;
}

.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 prisposobí velkosti */
    background-position: center;

    /* Skrytie povodné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 klikatelné a správalo sa jako 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 prisposobí velkosti */
    background-position: center;

    /* Skrytie povodné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 klikatelné a správalo sa jako 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 prisposobí velkosti */
    background-position: center;

    /* Skrytie povodné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 klikatelné a správalo sa jako 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 prisposobí velkosti */
    background-position: center;

    /* Skrytie povodné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 klikatelné a správalo sa jako 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 prisposobí velkosti */
    background-position: center;

    /* Skrytie povodné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 klikatelné a správalo sa jako 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 prisposobí velkosti */
    background-position: center;

    /* Skrytie povodné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 klikatelné a správalo sa jako 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 prisposobí velkosti */
    background-position: center;

    /* Skrytie povodné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 klikatelné a správalo sa jako blok */
    display: block;
}