/*  Generated: 2026-10-29 13:12:57 */
/* Phase 99 / VZ — prvek vzhledu „odznak-duvery" (registr core/app/Model/Vzhled/Registr.php; zadání P. Beneše 21. 10. 2026,
   Z1 a Z2): odznak „99 % spokojenost, 20 000+ zákazníků" v mega menu desktopu a v menu telefonu a tabletu
   (helper/ds-duvera-odznak.latte, čísla z designSystem.duvera skupiny, Vzhled::odznakDuvery).

   Načítá se jen ve vzhledu s tímto prvkem (VzhledStranky::cssSoubory). Barvy jen z tokenů (--ds-duvera-*).
   Do 23. 10. 2026 část ds/components/akcni.css. */

/* ---------- Odznak důvěry v menu (Z1 desktop, Z2 telefon; předloha usp-3-odznak.png) ---------- */
/* jeden řádek jako v návrhu (usp-3) se vejde od ~290 px šířky odznaku (telefon 375 px, mega menu 300 px od ~1280 px
   okna); v užším (telefon 320 px, mega menu 260 px při 1025–1279 px) spadne text pod hodnocení místo přetečení —
   flex-wrap, bez vlastního breakpointu (změřeno 7B 22. 10.) */
.ds-duvera-odznak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    padding: 10px 12px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-duvera-bg);
    color: var(--ds-text-primary);
}

.ds-duvera-odznak__hodnoceni {
    display: grid;
    grid-template-areas: "medaile cislo" "hvezdy hvezdy";
    align-items: center;
    column-gap: 4px;
    row-gap: 2px;
}

.ds-duvera-odznak__medaile {
    grid-area: medaile;
    width: 32px;
    height: 32px;
}

.ds-duvera-odznak__procenta {
    grid-area: cislo;
    color: var(--ds-duvera-cislo);
    font-size: 30px;
    font-weight: 700;
    line-height: 34px;
    white-space: nowrap;
}

.ds-duvera-odznak__hvezdy {
    display: flex;
    grid-area: hvezdy;
    justify-content: center;
    gap: 2px;
}

.ds-duvera-odznak__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ds-duvera-odznak__pocet {
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    white-space: nowrap;
}

.ds-duvera-odznak__popisek {
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    white-space: nowrap;   /* návrh usp-3: „spokojených zákazníků" na jednom řádku */
}

.ds-duvera-odznak__overeno {
    color: var(--ds-duvera-overeno);
    font-size: 12px;
    line-height: 16px;
}

/* desktop: pravý sloupec panelu mega menu — karta nápovědy a pod ní odznak (dsDesktopMenu.latte, .ds-mega__side jen ve vzhledu akčním) */
html.ds-desktop .ds-mega__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* telefon a tablet: pod tlačítky Přihlásit se / Vytvořit účet */
html.ds-mobile .mm-menu .ds-hub__telo .ds-duvera-odznak {
    margin-top: 14px;
}

/* jen telefon (P. Beneš 22. 10. 17:22, „Mobil BIBIK a baner 99% na střed a je menší"; návrh: střed odznaku = střed
   okna, šířka ~261 místo 312 pt, výška ~68 místo 79): odznak na šířku obsahu, na středu PANELU (ne sloupce textu —
   ten je odsazený o ikonu účtu 28 px + mezeru 14 px z menu.css, posun o polovinu), písmo ~85 %, mezery nad a pod
   odznakem stejné (12 px). Tablet (boční panel) a desktop beze změny. */
html.ds-mobile:not(.ds-tablet) .mm-menu .mm-listview > li.ds-hub__ucet:has(.ds-duvera-odznak) > span.ds-hub__blok {
    padding-bottom: 12px;
}

html.ds-mobile:not(.ds-tablet) .mm-menu .ds-hub__telo .ds-duvera-odznak {
    position: relative;
    left: calc((28px + 14px) / -2);
    width: fit-content;
    max-width: 100%;
    margin: 12px auto 0;
    padding: 8px 16px;
    gap: 2px 10px;
}

html.ds-mobile:not(.ds-tablet) .mm-menu .ds-duvera-odznak__medaile {
    width: 28px;
    height: 28px;
}

html.ds-mobile:not(.ds-tablet) .mm-menu .ds-duvera-odznak__procenta {
    font-size: 26px;
    line-height: 30px;
}

html.ds-mobile:not(.ds-tablet) .mm-menu .ds-duvera-odznak__hvezdy svg {
    width: 12px;
    height: 12px;
}

html.ds-mobile:not(.ds-tablet) .mm-menu .ds-duvera-odznak__pocet {
    font-size: 21px;
    line-height: 24px;
}

html.ds-mobile:not(.ds-tablet) .mm-menu .ds-duvera-odznak__popisek {
    font-size: 10px;
    line-height: 13px;
}

html.ds-mobile:not(.ds-tablet) .mm-menu .ds-duvera-odznak__overeno {
    font-size: 11px;
    line-height: 14px;
}