/*
 * Magelan SalesProof — izgled obvestila.
 *
 * Čist CSS brez Tailwinda in brez LESS: modul mora delati v Lumi in v Hyvä, Tailwind razredi v
 * modulu pa bi zahtevali, da je mapa modula vpisana v hyva.config.json (in bi ob pozabljenem
 * vpisu tiho izpadli).
 *
 * PRILAGAJANJE: privzetki so zapisani kot drugi argument var(), NE kot deklaracije na .mgl-sp.
 * Deklaracija na samem elementu bi namreč prebila `:root { --mgl-sp-accent: ... }` iz teme —
 * prilagajanje, ki ga obljublja README, prej ni delovalo. Zdaj zadostuje ena vrstica v temi:
 *
 *   :root { --mgl-sp-accent: #b91c1c; --mgl-sp-width: 24rem; }
 */
.mgl-sp {
    position: fixed;
    /*
     * 45 in ne 60: v Hyvä temah (Degriz/toner123) je najvišji z-index 50 — piškotkovna vrstica in
     * modalni popup. Pri 60 se je kartica postavila NAD pogovorna okna: na telefonu je prekrila
     * polje za e-pošto in gumb za zapiranje popupa, dotik pa je sprožil povezavo na izdelek.
     * 45 je nad glavo (30) in iskalnim spustnikom (40), pod vsemi pogovornimi okni.
     *
     * V LUMI je lestvica druga (izmerjeno na dev/dev3: modalna okna 900, prekrivalo in
     * piškotkovna vrstica 899, spustni meniji 100, drsnik 101, nalaganje 9999). Tam je smiselna
     * vrednost med 102 in 898 — zato je z-index spremenljivka:
     *
     *   :root { --mgl-sp-z: 500; }
     */
    z-index: var(--mgl-sp-z, 45);
    width: var(--mgl-sp-width, 21rem);
    max-width: calc(100vw - 2rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.mgl-sp--bottom-left  { left: var(--mgl-sp-gap, 1.25rem);  bottom: var(--mgl-sp-gap, 1.25rem); transform: translateY(1rem); }
.mgl-sp--bottom-right { right: var(--mgl-sp-gap, 1.25rem); bottom: var(--mgl-sp-gap, 1.25rem); transform: translateY(1rem); }
.mgl-sp--top-left     { left: var(--mgl-sp-gap, 1.25rem);  top: var(--mgl-sp-gap, 1.25rem);    transform: translateY(-1rem); }
.mgl-sp--top-right    { right: var(--mgl-sp-gap, 1.25rem); top: var(--mgl-sp-gap, 1.25rem);    transform: translateY(-1rem); }

.mgl-sp--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mgl-sp__card {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--mgl-sp-bg, #fff);
    color: var(--mgl-sp-fg, #1f2937);
    border: 1px solid var(--mgl-sp-border, rgba(0, 0, 0, .08));
    border-radius: var(--mgl-sp-radius, 12px);
    box-shadow: var(--mgl-sp-shadow, 0 10px 30px -8px rgba(0, 0, 0, .28));
    overflow: hidden;
}

.mgl-sp__body {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 2rem .75rem .75rem;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

a.mgl-sp__body:hover .mgl-sp__name {
    text-decoration: underline;
}

.mgl-sp__image {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: #f3f4f6;
}

/* Značka s številko stoji namesto slike pri obvestilih brez izdelka (zaloga, ogledi). */
.mgl-sp__count {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 .5rem;
    border-radius: 8px;
    background: var(--mgl-sp-accent, #047857);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.mgl-sp__texts {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.mgl-sp__label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--mgl-sp-accent, #047857);
}

/*
 * Ime izdelka na tri vrstice (prej dve): nazivi tonerjev so dolgi po cel stavek in razlikovalni
 * podatek — »(4) črna XL, cyan XL …« — je na koncu. Pri dveh vrsticah je obreza odrezala prav
 * tisto, po čemer kupec izdelek prepozna. Celo ime je še vedno v atributu title.
 */
.mgl-sp__name {
    font-size: .875rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mgl-sp__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--mgl-sp-muted, #6b7280);
}

.mgl-sp__meta > * + *::before {
    content: "·";
    margin-right: .35rem;
}

.mgl-sp__badge {
    font-weight: 700;
    color: var(--mgl-sp-accent, #047857);
}

.mgl-sp__price {
    font-weight: 600;
    color: var(--mgl-sp-fg, #1f2937);
}

/* Svoja vrstica, drobno in umirjeno — je opomba k obvestilu, ne njegovo sporočilo. */
.mgl-sp__verified {
    font-size: .6875rem;
    color: var(--mgl-sp-muted, #6b7280);
}

.mgl-sp__verified::after {
    content: " ✓";
}

/*
 * Gumb za zapiranje. padding, margin in appearance so tu zato, ker Luma na golem <button>
 * nastavi svoje (padding: 7px 15px, siv rob, lasten font) — v Hyvä se ne pozna nič, v Lumi pa je
 * bil gumb brez tega popačen. Iz istega razloga :hover ponovi border: 0: specifičnost Luminega
 * `button:hover` je višja od našega razreda in ob prehodu miške se je pojavil 1px siv rob.
 */
.mgl-sp__close {
    position: absolute;
    top: .25rem;
    right: .25rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    color: var(--mgl-sp-muted, #6b7280);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.mgl-sp__close:hover {
    background: rgba(0, 0, 0, .06);
    border: 0;
    color: var(--mgl-sp-fg, #1f2937);
}

.mgl-sp__close:focus-visible {
    outline: 2px solid var(--mgl-sp-accent, #047857);
    outline-offset: 2px;
}

/* Na telefonu gre čez vso širino ob dno: ozka kartica v kotu tam pojé pol zaslona. */
@media (max-width: 767px) {
    .mgl-sp {
        left: var(--mgl-sp-gap-mobile, .75rem);
        right: var(--mgl-sp-gap-mobile, .75rem);
        width: auto;
        max-width: none;
    }

    .mgl-sp--top-left,
    .mgl-sp--top-right {
        top: var(--mgl-sp-gap-mobile, .75rem);
        bottom: auto;
    }

    .mgl-sp--bottom-left,
    .mgl-sp--bottom-right {
        bottom: var(--mgl-sp-gap-mobile, .75rem);
        top: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mgl-sp {
        transition: none;
        transform: none;
    }
}

/* Natisnjena stran obvestila ne potrebuje; fiksni element bi se natisnil čez vsebino. */
@media print {
    .mgl-sp {
        display: none !important;
    }
}

/*
 * Temne različice NAMENOMA ni: trgovine, kjer modul teče, so svetle, temna kartica na svetli
 * strani pa je videti kot napaka in ne kot nastavitev. Kdor ima temno temo, povozi spremenljivke
 * v svojem CSS — za to so tu.
 */