/*
 * ftlabel – styly štítků
 * @author Funtown / chytreIT
 */

/* Textové a automatické štítky = product flags */
.product-flag.ftlabel-color,
.ftlabel-color {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.2;
    border-radius: var(--ftlabel-radius, 0px);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Barevná paleta (Material Design) */
.ftlabel-color.light        { background: #fafafa; color: #000; }
.ftlabel-color.dark         { background: #484848; color: #fff; }
.ftlabel-color.red          { background: #ef5350; color: #fff; }
.ftlabel-color.pink         { background: #ec407a; color: #fff; }
.ftlabel-color.purple       { background: #ab47bc; color: #fff; }
.ftlabel-color.deeppurple   { background: #7e57c2; color: #fff; }
.ftlabel-color.indigo       { background: #5c6bc0; color: #fff; }
.ftlabel-color.blue         { background: #42a5f5; color: #fff; }
.ftlabel-color.lightblue    { background: #29b6f6; color: #000; }
.ftlabel-color.cyan         { background: #26c6da; color: #000; }
.ftlabel-color.teal         { background: #26a69a; color: #fff; }
.ftlabel-color.green        { background: #66bb6a; color: #000; }
.ftlabel-color.lightgreen   { background: #9ccc65; color: #000; }
.ftlabel-color.lime         { background: #d4e157; color: #000; }
.ftlabel-color.yellow       { background: #ffee58; color: #000; }
.ftlabel-color.amber        { background: #ffca28; color: #000; }
.ftlabel-color.orange       { background: #ffa726; color: #000; }
.ftlabel-color.deeporange   { background: #ff7043; color: #fff; }
.ftlabel-color.brown        { background: #8d6e63; color: #fff; }
.ftlabel-color.grey         { background: #bdbdbd; color: #000; }
.ftlabel-color.bluegrey     { background: #78909c; color: #fff; }
.ftlabel-color.gold         { background: #d4af37; color: #fff; }

/* Grafické štítky v detailu produktu */
.ftlabel-graphics {
    margin: 10px 0;
}
.ftlabel-graphic-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.ftlabel-graphic-item img {
    display: block;
    width: auto;
}
.ftlabel-graphic-item a {
    display: inline-block;
    text-decoration: none;
}
.ftlabel-graphic-item.ftlabel-text-fallback {
    padding: 0.25rem 0.6rem;
    border-radius: var(--ftlabel-radius, 0px);
    font-weight: 600;
    color: #fff;
}

/* Tooltip (bublina po najetí myší) */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}
[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-in-out;
}
[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    padding: 6px 8px;
    min-width: 120px;
    max-width: 220px;
    border-radius: 4px;
    background: hsla(0, 0%, 20%, 0.95);
    color: #fff;
    text-align: center;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
    z-index: 20;
}
[data-tooltip]:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: hsla(0, 0%, 20%, 0.95);
    z-index: 20;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
}