/* =========================================================
   KUGL DELI – SKUPNI SLOG ZA VES PORTAL
   Datoteka: /bv/css/kugl-share.css
========================================================= */


/* =========================================================
   1. OSNOVNI ELEMENT
========================================================= */

.kugl-share {

    position: relative;

    display: inline-flex;
    align-items: center;

    font-family: inherit;

}


/* =========================================================
   2. GUMB DELI
========================================================= */

.kugl-share-trigger {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 32px;
    padding: 5px 12px;

    border: 1px solid #344b60;
    border-radius: 6px;

    background: #142435;

    color: #b9cbd9;

    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.03em;

    cursor: pointer;

    box-shadow: none;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;

}


/* =========================================================
   3. HOVER / FOCUS
========================================================= */

.kugl-share-trigger:hover,
.kugl-share-trigger:focus-visible {

    background: #20415a;

    border-color: #5795bc;

    color: #ffffff;

    box-shadow: none;

    transform: none;

    outline: none;

}


/* =========================================================
   4. IKONE
========================================================= */

.kugl-share-icon {

    color: inherit;

    font-size: 13px;

}

.kugl-share-chevron {

    color: inherit;

    font-size: 10px;

}


/* =========================================================
   5. SPUSTNI MENI
========================================================= */

.kugl-share-menu {

    position: absolute;

    right: 0;

    top: calc(100% + 8px);

    width: max-content;

    min-width: 215px;
    max-width: calc(100vw - 24px);

    box-sizing: border-box;

    padding: 6px;

    background: #171c22;

    border: 1px solid #7d8994;
    border-radius: 10px;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.45);

    z-index: 100;

}

.kugl-share-menu[hidden] {

    display: none;

}


/* =========================================================
   6. MOŽNOSTI DELJENJA
========================================================= */

.kugl-share-option {

    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 12px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #ffffff;

    font: inherit;
    font-size: 12px;
    font-weight: 800;

    text-align: left;

    cursor: pointer;

}

.kugl-share-option:hover,
.kugl-share-option:focus-visible {

    background: #455362;

    color: #ffffff;

    outline: none;

}


/* =========================================================
   7. POVRATNO SPOROČILO
========================================================= */

.kugl-share-feedback {

    position: absolute;

    top: calc(100% + 7px);
    left: 0;

    min-width: 200px;

    font-size: 11px;

    color: #75dcab;

    pointer-events: none;

}

.kugl-share-feedback:empty {

    display: none;

}


/* =========================================================
   8. TC HUB – MENI NAD OSTALO VSEBINO
========================================================= */

body.tc-page:has(.tc-hub-grid) .tc > .tc-hub-share {

    position: relative;

    z-index: 100;

}


/* =========================================================
   9. MOBILE
========================================================= */

@media (max-width: 600px) {

    .kugl-share-trigger {

        min-height: 36px;

        padding: 6px 10px;

        font-size: 10px;

        gap: 5px;

    }

    .kugl-share-icon {

        font-size: 12px;

    }

    .kugl-share-chevron {

        font-size: 9px;

    }

}