/* =====================================================================
   glukoza.me — Dark Glass (FINAL)
   ---------------------------------------------------------------------
   Goal (per your last message):
   ✅ ONE global background image visible behind EVERYTHING (all sections)
   ✅ Hero is NOT holding its own image — hero is just dark transparent glass
   ✅ All cards/FAQ/strips are dark glass + see-through
   ✅ Clean file: no duplicate/overriding blocks

   How it works:
   - body::before = the ONLY background image layer (fixed wallpaper)
   - .glx-* panels/cards = glass surfaces above the wallpaper
   - .glx-hero__bg is disabled (even if it still exists in markup)
   ===================================================================== */

/* ============================
   1) TOKENS / THEME VARIABLES
   ============================ */
:root {
    --hero-image: url('/assets/glukoza/hero.png'); /* your background image */
    /* Base dark gradients (behind the wallpaper) */
    --bg-0: #070A10;
    --bg-1: #0A0F1A;
    --bg-2: #07131A;
    /* Text */
    --text: #EAF0F7;
    --muted: rgba(234,240,247,.71);
    /* GLASS (IMPORTANT: transparent so wallpaper is visible behind sections) */
    --glass-1: rgba(12,16,24,.19);
    --glass-2: rgba(12,16,24,.07);
    /* Borders / shadows */
    --border-1: rgba(255,255,255,.11);
    --border-2: rgba(255,255,255,.07);
    --shadow: 0 22px 60px rgba(0,0,0,.57);
    --shadow-soft: 0 12px 30px rgba(0,0,0,.37);
    /* Blur / radius */
    --blur: 1px;
    --r-lg: 22px;
    --r-md: 18px;
    --r-sm: 14px;
    /* Accent (buttons/focus) */
    --accent-1: rgba(30,214,225,.95); /* cyan */
    --accent-2: rgba(106,85,255,.92); /* violet */
}

/* ============================
   2) BASE / RESETS
   ============================ */
html {
    font-size: 14px;
}

@media (min-width:768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    position: relative; /* needed for wallpaper stacking */
    margin-bottom: 60px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Dark base under wallpaper */
    /* NEMA boje ispod slike */
    background: #000; /* fallback ako slika ne učita */
    color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text) !important;
}

.text-muted {
    color: var(--muted) !important;
}

a {
    color: rgba(234,240,247,.90);
    text-decoration: none;
}

    a:hover {
        color: #fff;
        text-decoration: underline;
    }

main.container {
    padding-top: 18px;
    padding-bottom: 26px;
}

/* ============================
   3) GLOBAL WALLPAPER (THE ONLY IMAGE LAYER)
   - visible behind ALL sections
   - tune opacity if you want more/less image
   ============================ */
/* WALLPAPER – mora biti FIXED da pokrije cijeli sajt dok skroluješ */
/* Wallpaper postoji samo na home */
body::before {
    content: "";
    display: none; /* default OFF */
    position: fixed;
    inset: 0;
    background-image: var(--hero-image);
    background-size: cover;
    background-repeat: no-repeat;
    /* base position + parallax offset (set from JS) */
    background-position: center calc(7% + var(--glx-bg-offset, 0px));
    opacity: .71;
    filter: saturate(1.11) contrast(1.17);
    pointer-events: none;
    z-index: -1;
}

/* Home ga pali */
body.home-page::before {
    display: block;
}

/* ============================
   4) GLASS SURFACES (CARDS / FAQ / STRIPS / MENUS / MODALS)
   ============================ */
.glx-surface,
.card,
.glx-panel,
.glx-card,
.glx-strip,
.glx-faq-item,
.dropdown-menu,
.modal-content,
.table-wrap {
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(var(--blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
}

/* Padding + safe layout */
.glx-panel,
.glx-card,
.glx-strip,
.glx-faq-item {
    padding: 18px;
    overflow: hidden;
}

.glx-card-text,
.glx-faq-q,
.glx-faq-a {
    overflow-wrap: anywhere;
}

/* Hover polish */
.card,
.glx-panel,
.glx-card,
.glx-faq-item {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .card:hover,
    .glx-panel:hover,
    .glx-card:hover,
    .glx-faq-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: rgba(255,255,255,.18);
    }

/* Make text readable on a busy wallpaper */
.card,
.glx-panel,
.glx-card,
.glx-strip,
.glx-faq-item,
.dropdown-menu,
.modal-content {
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* ============================
   5) NAVBAR (DARK GLASS)
   ============================ */
.navbar,
.glx-navbar,
nav.glx-navbar {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(10,12,18,.60) !important;
    border-bottom: 1px solid var(--border-2) !important;
    backdrop-filter: blur(var(--blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
}

    .navbar .navbar-brand,
    .navbar .nav-link,
    .navbar .navbar-text,
    .glx-navbar .navbar-brand,
    .glx-navbar .nav-link,
    .glx-navbar .navbar-text {
        color: rgba(241,245,249,.92) !important;
    }

        .navbar .nav-link:hover,
        .glx-navbar .nav-link:hover {
            color: #fff !important;
        }

    /* OVO je sloj koji “ujednači” boju (da ne izgleda pola/pola) */
    nav.glx-navbar::before {
        content: "";
        position: absolute;
        inset: 0;
        /* tint koji ubije razliku između crvene i zelene pozadine */
        background: rgba(10,12,18,.78);
        pointer-events: none;
        z-index: -1;
    }

/* ============================
   6) FOOTER (DARK GLASS)
   ============================ */
.footer,
.glx-footer {
    position: relative !important;
    bottom: auto !important;
    background: rgba(10,12,18,.60) !important;
    border-top: 1px solid var(--border-2) !important;
    backdrop-filter: blur(var(--blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
    color: rgba(241,245,249,.82) !important;
}

    .footer a,
    .glx-footer a {
        color: rgba(241,245,249,.90) !important;
    }

        .footer a:hover,
        .glx-footer a:hover {
            color: #fff !important;
        }

/* ============================
   7) FORMS (DARK)
   ============================ */
.form-control,
.form-select {
    background: rgba(255,255,255,.04) !important;
    border-color: var(--border-2) !important;
    color: var(--text) !important;
}

    .form-control::placeholder {
        color: rgba(234,240,247,.45);
    }

    .btn:focus, .btn:active:focus,
    .form-control:focus, .form-select:focus,
    .form-check-input:focus {
        box-shadow: 0 0 0 .20rem rgba(30,214,225,.18), 0 0 0 .38rem rgba(106,85,255,.14) !important;
        border-color: rgba(30,214,225,.35) !important;
    }

/* ============================
   8) BUTTONS
   ============================ */
.btn-primary,
.btn-success,
.btn-brand {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #061018 !important;
    font-weight: 900;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

    .btn-primary:hover,
    .btn-success:hover,
    .btn-brand:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

.btn-outline-light {
    border-color: rgba(255,255,255,.22) !important;
    color: var(--text) !important;
    background: rgba(255,255,255,.03) !important;
}

    .btn-outline-light:hover {
        background: rgba(255,255,255,.06) !important;
    }

.btn-outline-primary {
    border-color: rgba(30,214,225,.44) !important;
    color: rgba(234,240,247,.92) !important;
    background: rgba(255,255,255,.03) !important;
}

    .btn-outline-primary:hover {
        background: rgba(30,214,225,.12) !important;
        border-color: rgba(30,214,225,.70) !important;
    }

.btn-outline-danger {
    border-color: rgba(255,92,122,.60) !important;
    color: rgba(255,92,122,.98) !important;
    background: rgba(255,255,255,.02) !important;
}

    .btn-outline-danger:hover {
        background: rgba(255,92,122,.12) !important;
        border-color: rgba(255,92,122,.86) !important;
    }

.btn:disabled, .btn.disabled {
    opacity: .50 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ============================
   9) TABLES
   ============================ */
.table {
    color: rgba(234,240,247,.92);
    border-color: rgba(255,255,255,.10);
}

    .table thead th {
        color: rgba(234,240,247,.94);
        border-bottom-color: rgba(255,255,255,.14) !important;
    }

    .table tbody td,
    .table tbody th {
        border-top-color: rgba(255,255,255,.08) !important;
    }

    .table tbody tr:hover {
        background: rgba(255,255,255,.03);
    }

.table-wrap {
    overflow: hidden;
}

/* ============================
   10) HERO (GLASS ONLY — NO IMAGE HERE)
   - Hero is the top section with big headline + buttons.
   - We keep full-bleed width (optional) so it can reach edges.
   ============================ */
.glx-hero {
    position: relative;
    min-height: 117vh;
    overflow: hidden;
    /* Full-bleed trick (works even if hero is inside .container) */
    width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Glass like other panels */
    /*background: linear-gradient(180deg, rgba(12,16,24,.20), rgba(12,16,24,.12));*/
    /*border: 1px solid var(--border-1);
    border-radius: var(--r-lg);*/
    /*backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(160%);*/
    /*-webkit-backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(160%);*/
}

/* If this exists in markup, disable it — wallpaper is already behind */
.glx-hero__bg {
    display: none !important;
}

/* Optional overlay inside hero for contrast (very subtle) */
.glx-hero__overlay {
    position: absolute;
    inset: 0;
    /*background: linear-gradient( 180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.12), rgba(0,0,0,0.28) );*/
    pointer-events: none;
    /*background: radial-gradient(60% 55% at 25% 30%, rgba(30,214,225,.06), transparent 65%), radial-gradient(55% 50% at 70% 35%, rgba(106,85,255,.05), transparent 68%), linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22));*/
}

/* Hero content card */
.glx-hero__card {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Hero: keep it centered and predictable on all screens */
.glx-hero {
    min-height: calc(100vh - 90px); /* fixed navbar space */
    display: flex;
    align-items: center;
    padding: 24px 0 36px;
}

.hero-actions {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-top: 18px; /* fino razdvajanje */
}

/* HERO TITLE – SOFT GLASS */
.hero-title {
    display: inline-block;
    padding: 18px 22px;
    border-radius: 20px;
    background: linear-gradient( 180deg, rgba(12,16,24,0.55), rgba(12,16,24,0.38) );
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    max-width: 870px;
}

    /* TITLE typography */
    .hero-title h1 {
        margin: 0 0 8px 0;
        font-weight: 600; /* manje “agresivno” */
        letter-spacing: -0.01em;
        line-height: 1.15;
        color: rgba(245,248,252,0.96);
    }

    /* Subtitle */
    .hero-title p {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.45;
        color: rgba(234,240,247,0.72);
    }

.glx-hero h1,
.glx-hero p {
    text-shadow: 0 2px 12px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.35);
}

.glx-pill {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 999px;
    /*background: rgba(255,255,255,.06);*/
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(234,240,247,.82);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Related tests list */
.glx-related-item {
    display: block;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(12,16,24,0.26);
    text-decoration: none;
    color: rgba(245,248,252,0.92);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

    .glx-related-item:hover {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.18);
        background: rgba(12,16,24,0.32);
    }

/* ============================
   11) PRODUCT THUMBNAILS
   ============================ */
.product-thumb {
    height: 180px;
    object-fit: contain;
    background: rgba(0,0,0,.22);
    border-radius: var(--r-sm);
    border: 1px solid rgba(255,255,255,.10);
}


.glx-brand {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
}

    .glx-brand:hover {
        text-decoration: none;
    }





/* ============================
   12) MOBILE
   ============================ */
@media (max-width:576px) {
    h1 {
        font-size: 1.65rem;
        line-height: 1.15;
    }

    h2 {
        font-size: 1.35rem;
    }

    .glx-hero {
        width: 100%;
        min-height: calc(100vh - 70px); /* ili 100vh ako hoćeš full */
        padding: 22px 0 26px;
        border-radius: 18px;
    }

    .glx-hero__card {
        padding: 0 12px;
    }

    .btn {
        padding: .62rem 1rem;
    }

    /* na mobilnom prikaži VIŠE slike (bez crop-a) */
    body::before {
        position: fixed;
        background-size: contain; /* umjesto cover */
        background-position: center top;
        background-attachment: scroll; /* mobilni Safari/Chrome zna da zeza fixed */
        opacity: .78; /* po želji, malo jače da se vidi */
    }

    /* opciono: da nema crnih praznina oko contain-a */
    body {
        background: #000; /* ili neka tamna nijansa iz tvoje teme */
    }
}



/* ===========================
   CONTENT (članci/testovi)
   =========================== */

.glx-article-card {
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,0.50);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    transition: transform .15s ease, box-shadow .15s ease;
    color: inherit;
}

    .glx-article-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(0,0,0,0.22);
    }

.glx-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* cijela slika se vidi */
    background: rgba(0,0,0,0.25); /* da ne bude prazno bijelo */
}


.glx-article-thumb {
    height: 120px;
    background: rgba(0,0,0,0.25);
}

.glx-article-thumb--placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: .06em;
    opacity: .8;
}

.glx-article-body {
    padding: 14px 16px 16px;
}

.glx-article-title {
    font-weight: 800;
    line-height: 1.15;
}

.glx-article-sub {
    margin-top: 6px;
    color: rgba(255,255,255,0.75);
    font-size: .95rem;
}

.glx-score {
    font-weight: 800;
}


/* slike u article/test detail strani */
.glx-content-img {
    width: 100%;
    max-height: 520px; /* limit visine */
    object-fit: contain; /* ne kropuje, cijela stane */
    display: block;
    margin: 0 auto;
    background: rgba(0,0,0,0.20);
    cursor: zoom-in;
}



/* ===== ADMIN SAFE WRAPPER ===== */
.admin-page {
    position: relative;
    z-index: 5; /* iznad pozadinskih overlay-a */
    padding-top: 90px; /* jer imaš fixed navbar */
}

.admin-surface {
    background: rgba(15, 18, 22, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 18px;
}


main {
    padding-top: 90px;
}



/* ===========================
   HOME/LISTS: Image card + dark glass bottom
   =========================== */

.glx-image-card {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden; /* bitno da overlay ne izlazi */
    isolation: isolate; /* NEW: riješi bleed od blur/gradient */
    height: 430px; /* visina kartice */
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.10);
    text-decoration: none;
    color: #fff;
}

    .glx-image-card:hover {
        transform: translateY(-2px);
        transition: transform .15s ease, box-shadow .15s ease;
        box-shadow: 0 14px 34px rgba(0,0,0,0.28);
    }

/* Slika preko cijele kartice */
.glx-image-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover; /* pokrije cijelu karticu */
    background-repeat: no-repeat;
    background-position: 50% 20%; /* << pomjeri fokus malo gore (glave!) */
    transform: scale(1.02); /* malo “premium” */
    z-index: 0;
}

/* Blagi “darken” da tekst uvijek bude čitljiv */
.glx-image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.10);
    z-index: 1;
}

/* Donji “dark glass” bar */
.glx-image-card__glass {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 14px 12px;
    border-radius: 0 0 18px 18px; /* NEW */
    overflow: hidden; /* NEW: da i njegov ::before bude odrezan */
    background: rgba(10, 12, 16, 0.55); /* tamno staklo */
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-top: 1px solid rgba(255,255,255,0.10);
    z-index: 2;
}

    /* Mali gradient iznad glass-a (ljepše prelije) */
    .glx-image-card__glass::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0; /* promijeni: nema više -40px */
        transform: translateY(-40px); /* umjesto top:-40px */
        height: 40px;
        background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(10,12,16,0.55));
        pointer-events: none;
    }

/* Tekst */
.glx-image-card__title {
    position: relative; /* da bude iznad ::before */
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    font-size: 1.02rem;
}

.glx-image-card__sub {
    position: relative;
    margin-top: 6px;
    margin-bottom: 0;
    opacity: 0.85;
    font-size: .92rem;
}

/* Za test kartice možeš malo veću visinu (po želji) */
.glx-image-card--test {
    height: 430px;
}


/* Tekst iz baze: poštuj nove redove */
.glx-content-text,
.glx-article-sub,
.glx-content-block-text {
    white-space: pre-line; /* \n -> novi red, višak razmaka se normalizuje */
}

/* ===========================
   CONTENT DETAILS: NO WALLPAPER
   =========================== */

/* 1) ugasi globalni wallpaper dok je otvoren details */
.content-details-page ~ * {
}
/* (ignore, samo da ne zaluta editor) */

/* Najsigurnije: body::before je globalan – gasimo ga preko :has() (Chrome/Edge radi) */
body:has(.content-details-page)::before {
    display: none !important;
}

/* fallback ako :has nije podržan u nekom browseru */
body:has(.content-details-page) {
    background:
    /* TOP LEFT – topla (high glucose) zona */
    radial-gradient( 55% 55% at 22% 18%, rgba(255, 140, 60, 0.22), rgba(255, 120, 40, 0.12), transparent 65% ),
    /* TOP RIGHT – hladna (stable glucose) zona */
    radial-gradient( 55% 55% at 78% 22%, rgba(70, 200, 170, 0.22), rgba(60, 170, 150, 0.12), transparent 65% ),
    /* BOTTOM LEFT – dodatni topli akcenat */
    radial-gradient( 50% 50% at 30% 75%, rgba(255, 160, 90, 0.12), transparent 70% ),
    /* BOTTOM RIGHT – dodatni hladni akcenat */
    radial-gradient( 50% 50% at 75% 78%, rgba(90, 210, 180, 0.12), transparent 70% ),
    /* BASE */
    #06080d !important;
}

body.inner-page {
    background: radial-gradient(55% 55% at 22% 18%, rgba(255, 140, 60, 0.22), rgba(255, 120, 40, 0.12), transparent 65%), radial-gradient(55% 55% at 78% 22%, rgba(70, 200, 170, 0.22), rgba(60, 170, 150, 0.12), transparent 65%), radial-gradient(50% 50% at 30% 75%, rgba(255, 160, 90, 0.12), transparent 70%), radial-gradient(50% 50% at 75% 78%, rgba(90, 210, 180, 0.12), transparent 70%), #06080d !important;
}



/* ===========================
   IMAGE LIGHTBOX (Content)
   =========================== */

/* Overlay preko cijelog ekrana */
.glx-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    animation: glxFadeIn .18s ease;
}

    /* Slika u lightboxu */
    .glx-lightbox img {
        max-width: 92vw;
        max-height: 92vh;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 30px 80px rgba(0,0,0,.75);
    }

/* Hover hint */
.glx-content-img {
    cursor: zoom-in;
}

/* Mala animacija */
@keyframes glxFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}




/* ===========================
   STAR RATING (0..5, supports halves)
   =========================== */

.glx-stars {
    position: relative;
    display: inline-block;
    font-size: 18px; /* možeš smanjiti/povećati */
    line-height: 1;
    letter-spacing: 2px;
}

.glx-stars__base {
    opacity: 0.35; /* prazne */
}

.glx-stars__fill {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden; /* ključ za pola */
    width: 0%; /* setuje se inline */
}



/* Stars: supports decimals (4.5, 3.2, itd) */
.glx-stars {
    --fill: 0%;
    position: relative;
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 2px;
    user-select: none;
}

    .glx-stars::before {
        content: "★★★★★";
        color: rgba(255,255,255,.22); /* prazne */
    }

    .glx-stars::after {
        content: "★★★★★";
        position: absolute;
        left: 0;
        top: 0;
        width: var(--fill);
        overflow: hidden;
        color: rgba(255,255,255,.92); /* pune */
    }





/* Glucose badge (boje po data-level) */
.glx-glu-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,12,16,.35) !important;
}

    /* ZELENE */
    /* NOVI NIVOI (ΔMean): dg, g, yg, y, o, r */
    .glx-glu-badge[data-level="dg"] {
        background: rgba(22,163,74,.28) !important; /* dark green */
        border-color: rgba(22,163,74,.75);
    }

    .glx-glu-badge[data-level="g"] {
        background: rgba(34,197,94,.28) !important; /* green */
        border-color: rgba(34,197,94,.75);
    }

    .glx-glu-badge[data-level="yg"] {
        background: rgba(132,204,22,.28) !important; /* yellow-green */
        border-color: rgba(132,204,22,.75);
    }

    .glx-glu-badge[data-level="y"] {
        background: rgba(250,204,21,.32) !important; /* yellow */
        border-color: rgba(250,204,21,.75);
    }

    .glx-glu-badge[data-level="o"] {
        background: rgba(249,115,22,.32) !important; /* orange */
        border-color: rgba(249,115,22,.75);
    }

    .glx-glu-badge[data-level="r"] {
        background: rgba(239,68,68,.32) !important; /* red */
        border-color: rgba(239,68,68,.75);
    }

    /* LEGACY NIVOI (1..5) */
    .glx-glu-badge[data-level="g1"] {
        background: rgba(34,197,94,.28) !important;
        border-color: rgba(34,197,94,.65);
    }

    .glx-glu-badge[data-level="g2"] {
        background: rgba(16,185,129,.28) !important;
        border-color: rgba(16,185,129,.65);
    }

    /* ŽUTA */
    .glx-glu-badge[data-level="y1"] {
        background: rgba(250,204,21,.32) !important;
        border-color: rgba(250,204,21,.75);
    }

    /* NARANDŽASTA */
    .glx-glu-badge[data-level="o1"] {
        background: rgba(249,115,22,.32) !important;
        border-color: rgba(249,115,22,.75);
    }

    /* CRVENA */
    .glx-glu-badge[data-level="r1"] {
        background: rgba(239,68,68,.32) !important;
        border-color: rgba(239,68,68,.75);
    }





.glx-meta-stack {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .4rem;
}

.glx-meta-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .95rem;
}

.glx-meta-label {
    opacity: .75;
    min-width: 70px; /* poravnanje */
}

/* Admin tables: uvijek vidljive akcije (Edit/Delete) čak i kad je naslov predugačak */
.glx-sticky-actions {
    position: sticky;
    right: 0;
    background: rgba(14, 16, 22, 0.95);
    backdrop-filter: blur(6px);
}

.glx-title-wrap {
    max-width: 560px;
    white-space: normal;
    word-break: break-word;
}


.cgm-chip {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    font-weight: 800;
}



/* 1) Spriječi horizontalno skrolovanje i “bježanje” sadržaja na mobilnom */
html, body {
    width: 100%;
    overflow-x: hidden;
}

/* 2) Sigurnije box-sizing da padding ne gura element van ekrana */
*, *::before, *::after {
    box-sizing: border-box;
}



/* Mobilni tweak za hero naslov i paragraf */
@media (max-width: 576px) {
    .hero, .hero-content {
        padding-left: 16px;
        padding-right: 16px;
    }

        .hero h1 {
            font-size: 28px; /* smanji da ne gura u stranu */
            line-height: 1.15;
            max-width: 100%;
            word-wrap: break-word;
            overflow-wrap: anywhere;
        }

        .hero p {
            max-width: 100%;
        }
}



/* Spriječi da hero napravi horizontalni overflow na mobilnom */
.glx-hero {
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* modernije i bolje od hidden */
    overflow-y: visible;
}

    /* Ako neki child koristi absolute/transform i širi layout */
    .glx-hero .container {
        max-width: 100%;
    }



@media (max-width: 576px) {
    .glx-hero .container.py-5.position-relative.align-content-center {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Naslov/tekst da nikad ne “bježi” van ekrana */
    .glx-hero h1,
    .glx-hero .display-1,
    .glx-hero .display-2,
    .glx-hero .display-3,
    .glx-hero .display-4 {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


@media (max-width:576px) {

    /* WALLPAPER na mobilnom: mora biti COVER da nema crnog “fali 1cm” */
    body::before {
        position: fixed;
        inset: 0;
        background-image: var(--hero-image);
        background-size: cover; /* <<< KLJUČNO (ne contain) */
        background-repeat: no-repeat;
        background-position: center top; /* fokus gore (lice) */
        background-attachment: scroll; /* mobilni: fixed zna da zeza */
        opacity: .78;
        filter: saturate(1.11) contrast(1.17);
        pointer-events: none;
        z-index: -1;
    }

    /* “produži” vizuelno wallpaper pri dnu (nema rupe ni kad se content završava) */
    body.home-page::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 22vh; /* koliko “fade” želiš */
        background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65) );
        pointer-events: none;
        z-index: -1;
    }
}