h1:focus {
    outline: none;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    /* Font rendering */
    -webkit-font-smoothing: antialiased; /* Chrome, Safari */
    -moz-osx-font-smoothing: grayscale; /* Firefox macOS */
    text-rendering: optimizeLegibility;
}
/*'Roboto',*/
body {
    /*font-family: 'Roboto', 'Segoe UI', -apple-system, sans-serif;*/
    /*font-size: 15px;*/
    /*color: #5b5a5a;*/
    /*background-color: #f8f8f8;*/
    /*line-height: 1.3;*/
    /*font-family: "Nunito", sans-serif;*/
    /*font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",, "Helvetica Neue", Arial, sans-serif !important;*/
    /*font-optical-sizing: auto;*/
    /*background-color: #eceff1;*/
    background: var(--gray3);
}


hr {
    margin: 0.5rem 0;
    opacity: 0.10;
}

[data-bs-theme="blue"] {
    --bs-body-bg: #dee2e6;
    --bs-body-color: #000;
    --bs-text-color: #000;
    --bs-link-color: #000;
    --bs-alert-color: #fff;
    --bs-alert-bg: #000;
    --bs-alert-border-color: #000;
    --bs-alert-link-color: #fff;
    /* override i za alert-info */
    --bs-info-bg-subtle: #000;
    --bs-info-border-subtle: #000;
    --bs-info-text-emphasis: #fff;
    --bs-border-color: #000;
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-bg: #b4d934;
    --bs-btn-hover-border-color: #000;
    --bs-success-bg: #000; /* osnovna pozadina */
    --bs-success-border-subtle: #000; /* ivica */
    --bs-success-text-emphasis: #fff; /* tekst */
    --border-grey: #999;
    --bs-warning-rgb: 0, 0, 0; /* crna boja */

    --zelena: #000;
}

    /* ako hoćeš da se mijenja i hover izgled */
    [data-bs-theme="blue"] .btn-success {
        --bs-btn-bg: #000;
        --bs-btn-color: #fff;
        --bs-btn-border-color: #000;
        --bs-btn-hover-bg: #222;
        --bs-btn-hover-border-color: #222;
    }

    [data-bs-theme="blue"] .border-start {
        --bs-btn-bg: #000;
        --bs-btn-color: #fff;
        --bs-btn-border-color: #000;
        --bs-btn-hover-bg: #222;
        --bs-btn-hover-border-color: #222;
        border-color: var(--border-grey)
    }



    [data-bs-theme="blue"] .btn-outline-primary {
        --bs-btn-color: #212529;
        --bs-btn-border-color: #212529;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #212529;
        --bs-btn-hover-border-color: #212529;
        --bs-btn-focus-shadow-rgb: 33, 37, 41;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #212529;
        --bs-btn-active-border-color: #212529;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #212529;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #212529;
        --bs-gradient: none;
    }


    [data-bs-theme="blue"] .status-badge-info {
        background: none;
        background-color: black;
        color: white;
    }

    [data-bs-theme="blue"] .sakrij {
        display: none !important;
    }



/* Alpine.js cloak - hide elements until Alpine.js is ready */
[x-cloak] {
    display: none !important;
}

.fullwidth {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
}

/* HEADER */
/* Top bar */
.top-bar {
    font-size: 0.875rem;
    border-bottom: 1px solid #dee2e6;
}

/* Logo */
.logo {
    height: 35px;
    width: auto;
}

@media (min-width: 992px) {
    .logo {
        height: 40px;
    }
}



@media (min-width: 1441px) {

    #homebaners {
        min-height: 400px;
    }
}


@media (min-width: 1441px) {
    /* primjer: zamijeni col-xl-3 ponašanje za još šire ekrane */
    .col-xxl-3 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}


.naslovH1 {
    /*    font-size: calc(1.325rem + .9vw);
    font-weight: 800;
    line-height: 1.1;*/

    font-size: clamp(1.8rem, 4vw, 2.5rem);
    /*font-weight: 800;*/
    line-height: 1.1;
    margin: 0;
}

/*font-size: 2.5rem;*/
/* font-family: 'Poppins', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; */

.podnaslov {
    font-size: clamp(0.3rem, 1vw + 0.5rem, 0.8rem);
    font-weight: 500;
    line-height: 1.4;
    color: #666;
    margin-top: 0.35em;
    /*font-size: 2.5rem;*/
    /* font-family: 'Poppins', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
}



.nazivIkona {
    FONT-WEIGHT: bold;
    font-size: 0.7rem;
    line-height: 1.2;
    padding-top: 0.2rem;
    text-align: center;
}



/* Filter scrollable containers */
.filter-group {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.manufacturer-filter-group {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sticky filter buttons */
.filter-buttons-sticky {
    position: sticky;
    bottom: 0;
    /*background: white;*/
    background: #F5F5F5;
    padding: 1rem;
    border: 1px solid #e1e8ed;
    z-index: 100;
    /*margin-left: -0.5rem;
    margin-right: -0.5rem;*/
    border-radius: var(--bs-border-radius);
}

h1 {
    color: #333;
    /* font-family: 'Poppins', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
    font-weight: 700;
    line-height: 1.1;
    font-size: 2.8rem;
    margin-top: 0;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: -2px;
}

/*.h3 {
    font-size: 30px;*/
/*font-family: 'Poppins', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
/*font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}*/

.fs-7 {
    font-size: 0.7rem;
}

a {
    color: rgb(41, 128, 185);
    text-decoration: none;
}

p {
    margin-bottom: 0 !important;
}


.stranica h1, .stranica h2, .stranica h3, .stranica h4 {
    text-transform: uppercase;
    letter-spacing: -.03em;
}

.border-zelena {
    border-color: rgb(196, 229, 54) !important;
}


#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }




.menibtn {
    min-width: 250px;
    text-align: center;
}



.header-meni .nav-item .nav-link {
    /*letter-spacing: -1px;*/
    padding: 0 6px;
    /* min-height: 27px; */
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    /* background-color: transparent; */
    color: #fff;
}


.menibtn .nav-link {
    color: #000 !important;
}


.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Pagination styles */
.stranice {
    text-align: right;
}

.toolbar .broj {
    font-size: 1rem;
}

.toolbar .broj {
    padding: 5px;
    background-color: black;
    color: white;
}

/*.toolbar .stranice .pagination a,
.toolbar .stranice .pagination span {
    font-size: 1rem;
}*/

/*.toolbar .stranice li a {
    border: 0 !important;
    color: #5b5a5a;
    background-color: #f8f8f8 !important;
}

.toolbar .stranice li.PagedList-skipToPrevious a,
.toolbar .stranice li.PagedList-skipToNext a {
    border: 0 !important;
    color: #fff;
    background-color: #000 !important;
}*/

/*.toolbar .pagination {
    margin: 0 !important;
}*/

/*.toolbar .stranice li.active a,
.toolbar .stranice li.active span {
    background: #ffd800 !important;
    color: #000;
    border: 0 !important;
}

.toolbar .stranice li a:hover,
.stranice li a:hover {
    background: #FFEB3B !important;
    color: #000;
    border: 0 !important;
}*/
/* Pagination styles for bottom section (not in toolbar) */
/*.stranice .pagination a,
.stranice .pagination span {
    font-size: 1rem;
}

.stranice li a {
    border: 0 !important;
    color: #5b5a5a;
    background-color: #f8f8f8 !important;
}

.stranice li.PagedList-skipToPrevious a,
.stranice li.PagedList-skipToNext a {
    border: 0 !important;
    color: #fff;
    background-color: #000 !important;
}*/

/*.stranice li.active a,
.stranice li.active span {
    background: #ffd800 !important;
    color: #000;
    border: 3px solid;
    border-color: var(--bs-warning);
}*/

/*.stranice .pagination {
    margin: 0 !important;
}*/
/* Instagram Story style podgrupe */
.podgrupe-scroll-container {
    position: relative;
    width: calc(100% - 90px);
    overflow: hidden;
}

.podgrupe-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-top: 8px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

    .podgrupe-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .podgrupe-scroll::-webkit-scrollbar-button {
        width: 0;
        height: 0;
        display: none;
    }

    .podgrupe-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .podgrupe-scroll::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

        .podgrupe-scroll::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

    .podgrupe-scroll::-webkit-scrollbar-button {
        width: 0;
        height: 0;
        display: none;
    }

.podgrupa-item {
    flex: 0 0 auto;
    width: 90px;
    text-align: center;
}

.podgrupa-image-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    padding: 0;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #fff;
    transition: all 0.3s ease;
    align-content: center;
    justify-content: center;
    /*display: flex;*/
    border: 3px solid white;
    /*padding:10px;*/
}

.podgrupa-img {
    max-width: 50px;
    max-height: 50px;
    object-fit: scale-down;
    /*padding: 10px;*/
}

.podgrupa-img-placeholder {
    /*object-fit: scale-down;*/
    margin: 0;
    padding: 0;
    /*width: 90px;
    height: 90px;*/
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    /*border: 4px solid #e1e8ed;*/
    /*border-color: #e1e8ed;*/
    color: #999;
    font-size: 32px;
}

.podgrupa-item a:hover .podgrupa-img {
    border-color: #ffd800;
    transform: scale(1.05);
}

.podgrupa-item a:hover .podgrupa-img-placeholder {
    border-color: #ffd800;
    background: #fff9e6;
    color: #ffd800;
}

.podgrupa-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ffd800;
    color: #000;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 2px solid #fff;
}

.podgrupa-name {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    /*max-width: 90px;*/
}

.podgrupa-item a:hover .podgrupa-name {
    color: #000;
    font-weight: 600;
}

.podgrupa-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    font-size: 32px;
    color: #999;
}

.podgrupa-separator-center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #999;
}



.pozadina-siva {
    background: #F5F5F5;
}

.pozadina-siva2 {
    background: #e9ebf1;
}


.pozadina-siva3 {
    background: var(--gray3);
}



.pozadina-bijela {
    background: #fff;
}

.border {
    border: 1px solid #e5e5e5;
}


.borderL {
    border-left: 1px solid #e5e5e5;
}

.borderR {
    border-right: 1px solid #e5e5e5;
}


.pozadina-centar {
    background: #fff;
    border: 1px solid #e5e5e5;
}
/* Payment Method Cards */
.payment-option {
    cursor: pointer;
    display: block;
}

.payment-card {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
    background-color: white;
}

    .payment-card:hover {
        border-color: #198754;
        transform: translateY(-2px);
    }

    .payment-card.active {
        border-color: #198754;
        background-color: #e6ffe6;
    }

        .payment-card.active .small {
            font-weight: 700;
        }

.x-small {
    font-size: 0.75rem;
}
/* Admin Panel Styles */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
    background: #e9ecef;
}

.admin-sidebar {
    width: 260px;
    background: #2c3e50;
    color: #ecf0f1;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.admin-sidebar-header {
    padding: 1.5rem 1rem;
    background: #34495e;
    border-bottom: 1px solid #1a252f;
}

    .admin-sidebar-header h4 {
        color: #fff;
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

.admin-nav {
    flex: 1;
    padding: 1rem 0;
}

.admin-nav-section {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #95a5a6;
    font-weight: 600;
    margin-top: 1rem;
}

    .admin-nav-section:first-child {
        margin-top: 0;
    }

.admin-nav-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #ecf0f1;
    text-decoration: none;
    transition: all 0.2s;
}

    .admin-nav-item:hover {
        background: #34495e;
        color: #fff;
        padding-left: 1.5rem;
    }

    .admin-nav-item i {
        width: 20px;
        margin-right: 0.75rem;
        font-size: 1.1rem;
    }

.admin-sidebar-footer {
    padding: 1rem 0;
    border-top: 1px solid #34495e;
}

.admin-main {
    margin-left: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.admin-header {
    background: #fff;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-content {
    padding: 1.5rem;
    flex: 1;
}
/* Admin stat cards */
.admin-stat-card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    background: #fff;
}

    .admin-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
/* Admin cards */
.admin-content .card {
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    background: #fff;
}

.admin-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
}
/* Responsive */
@media (max-width: 768px) {
    .admin-sidebar {
        width: 0;
        overflow: hidden;
    }

    .admin-main {
        margin-left: 0;
    }
}



.logo__container {
    width: 280px;
    padding: 10px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    position: relative;
    background-color: white;
}

.header-desno {
    display: flex;
    flex-direction: column;
}

.page-header {
    overflow: hidden;
}

.top-bar {
    position: relative;
    min-height: 35px;
    /*font-family: Arial,sans-serif;*/
    background-color: black;
    color: #ccc;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: right;
}

    .top-bar:before {
        content: '';
        position: absolute;
        left: -200%;
        right: -200%;
        top: 0;
        bottom: 0;
        display: block;
        background-color: #34495e;
        /*#202020*/
        z-index: -1;
        height: 35px;
    }
    /*.top-bar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 35px;
        background-color: #34495e;
        z-index: -1;
    }*/


    .top-bar, .top-bar .topline-block, .top-bar .topline-block a:not(.button), .top-bar .header.links a:not(.button) {
        font-size: 12px;
        color: rgb(217, 217, 217);
        /*font-family: Arial,sans-serif;*/
    }

        .top-bar .topline-block {
            margin: 0 10px;
            z-index: 1;
        }

.topline-block, .page-header .header.links {
    padding: 0;
    list-style: none none;
    margin: 0;
}

    .topline-block ul {
        padding: 0;
        list-style: none none;
        margin: 0;
    }

    .topline-block li, .header.links li {
        margin: 0;
        float: left;
        position: relative;
        display: inline;
        padding-right: 10px;
        padding-left: 10px;
    }



        .topline-block li:after, .header.links li:after {
            content: '';
            display: block;
            width: 1px;
            position: absolute;
            top: 5px;
            right: 0;
            height: 15px;
            background-color: #353535;
            background-color: rgba(255,255,255,.11);
            margin: 0;
        }


    .topline-block a:not(.button), .page-header .header.links a:not(.button), .topline-block a, .topline-block p, .header.links a {
        line-height: 16px;
        /*        padding: 2px 6px;*/
        margin: 0 2px 0 1px;
        font-size: 11px;
        text-decoration: none;
        white-space: nowrap;
        display: inline-block;
        color: #d9d9d9;
        vertical-align: top;
        padding: 5px 10px 5px 10px;
    }

    .topline-block .txt {
        padding: 5px 10px 5px 10px;
    }

.ts5 {
    font-size: 0.5rem;
}

.ts6 {
    font-size: 0.6rem;
}

.ts7 {
    font-size: 0.7rem;
}

.ts8 {
    font-size: 0.8rem;
}

.bold {
    font-weight: bold;
}


.brands {
    border-top: 1px solid #dcdcdc;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding-top: 5px;
}

    .brands a {
        margin: 10px 10px 0 10px;
    }

.header2 {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    /*    vertical-align: middle;*/
}

.top-ikone {
    padding-left: 20px;
    min-height: 65px;
    margin-top: 10px;
}

    .top-ikone ul {
        padding: 0;
        list-style: none none;
        margin: 0;
    }

    .top-ikone .osob {
        min-width: 140px;
        margin: 0;
        float: left;
        /*        padding: 0px 10px 10px 0;*/
        /*        display: block;*/
        margin-left: 20px;
        color: #353535;
    }


    .top-ikone .gl {
        /*        float: right;*/
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.4rem;
        text-align: right;
    }



    .top-ikone span {
        /*        display: block;*/
        font-size: 0.8rem;
        font-weight: 400;
        text-align: right;
    }


    .top-ikone .osob i, .top-ikone .osob svg {
        font-size: 3rem;
        /*        display: block;*/
        float: left;
        padding-right: 10px;
        /* border-right: 1px solid black; */
        top: -5px;
        position: relative;
    }

    .top-ikone .form-control {
        background-color: #e9ecef;
        height: 40px;
    }

    .top-ikone .btn {
        height: 40px;
        background-color: rgb(201, 238, 35)
    }



.strana-l .naslov {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.03em;
    text-transform: uppercase;
    border-left: 6px solid #c4e536;
    padding-left: 10px;
}


.strana-r .naslov {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    text-transform: uppercase;
    padding-left: 20px;
    /* border-right: 6px solid #c4e536;
    padding-right: 10px;*/
    /*text-align: right;*/
}

.popover {
    padding: 0rem;
}

.popover-modern {
    padding: 0rem;
    max-width: 400px;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    background: #fff;
}

    .popover-modern .popover-arrow::before {
        border-top-color: #fff !important;
    }

.popover-card {
    padding: 0rem;
    margin: 0rem;
    width: 200px;
}

    .popover-card .popover-header {
        font-size: 0.9rem;
        border-bottom: 1px solid #e5e5e5;
    }

    .popover-card .popover-body-content {
        font-size: 0.85rem;
        color: #333;
    }




.fixed-50 {
    table-layout: fixed; /* svi td imaju istu širinu */
}

    .fixed-50 th,
    .fixed-50 td {
        width: 50%; /* 50% za svaku kolonu */
        white-space: normal; /* dozvoli prelamanje teksta */
    }




a.collapsed .when-expanded {
    color: #000;
    display: none;
}

a:not(.collapsed) .when-collapsed {
    color: #000;
    display: none;
}
/*///Cijene*/

.gridCijena {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.detaljiCijena {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.detaljiCijenaMP {
    font-size: 0.8rem;
    line-height: 0.8rem;
}

.detaljiCijenaRata {
    font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.8rem);
    line-height: clamp(1.3rem, 1.6vw + 0.5rem, 2.2rem);
}


.detaljiCijenaDecimale {
    font-size: 1rem;
    vertical-align: super;
    font-weight: bold;
}

.detaljiCijenaOpis {
    font-size: 0.95rem;
    color: #6c757d;
}

.precrtano, .precrtano2 {
    text-decoration: line-through;
    opacity: 0.7;
    font-size: 1rem;
    font-weight: bold;
}

.cnaslov {
    font-size: 0.7rem;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.crvena {
    color: #dc3545 !important;
}

.plava {
    color: #0d6efd !important;
}




.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between; /* ravnomjerno 5 polja */
    z-index: 999;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
    padding: 3px;
}

    .mobile-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center; /* horizontalno centriranje */
        justify-content: center; /* vertikalno centriranje */
        text-align: center;
        color: #555;
        text-decoration: none;
        font-size: 11px;
        padding: 8px 0 6px 0;
    }

        .mobile-nav a i {
            font-size: 25px;
            margin-bottom: 2px;
            line-height: 1;
        }

        .mobile-nav a span {
            font-size: 9px;
            font-weight: 700;
            color: #222222;
            text-transform: uppercase;
            margin-top: 4px;
            display: block;
        }

        .mobile-nav a:hover {
            color: #000;
        }
        /* Opciona active stavka */
        .mobile-nav a.active {
            color: #000;
            font-weight: 600;
        }



.wishlist-btn {
    background: none;
}
/* Wrapper */
.dx-float {
    position: relative;
    width: 100%;
    /*margin-bottom: 1.5rem;*/
}
    /* DxComboBox visina */
    .dx-float .dxbl-combobox {
        height: 3.5rem !important;
        width: 100%;
    }
    /* Unutrašnji input padding da izgleda čisto ispod labela */
    .dx-float dxbl-combo-box {
        padding-top: 22px !important;
        padding-bottom: 6px !important;
    }
    /* Label — uvijek gore */
    /* STATELESS FLOATING LABEL */
    .dx-float label {
        position: absolute;
        top: 0.4rem; /* odmah gore */
        left: 0.2rem;
        font-size: 0.75rem;
        opacity: .85;
        background: white;
        padding: 0 .25rem;
        pointer-events: none;
    }
/* Stilizacija heart toggle dugmadi */
.wishlist-heart-toggle {
    transition: transform 0.2s, color 0.2s;
    text-decoration: none !important;
}

    .wishlist-heart-toggle:hover {
        transform: scale(1.2);
    }

    .wishlist-heart-toggle:active {
        transform: scale(0.95);
    }
/* Offcanvas Groups - Full width for panels */
.offcanvas-groups {
    width: 400px !important;
    max-width: 90vw;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
/* Main Panel */
.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    position: relative;
    z-index: 2;
}
/* Secondary Panel - Hidden by default, slide from right on both mobile and desktop */
.secondary-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}
    /* When visible: slide in and overlay main panel */
    .secondary-panel.secondary-panel-visible {
        transform: translateX(0);
        z-index: 3;
    }
/* Search Container */
.search-container {
    z-index: 1000;
}
/* Groups Container */
.groups-container {
    overflow-y: auto;
    max-height: calc(100vh - 140px);
}

.secondary-groups-container {
    overflow-y: auto;
    height: 100%;
}
/* Group Item */
.group-item {
    border-bottom: 1px solid #f0f0f0;
}

.group-content {
    padding: 0.75rem 1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
}

    .group-content:hover {
        background-color: #f8f9fa;
    }
/* Expand Button */
.expand-btn {
    color: #6c757d;
    transition: transform 0.2s ease;
}

    .expand-btn:hover {
        color: #0d6efd;
    }

    .expand-btn i {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
/* Group Link */
.group-link {
    color: #212529;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

    .group-link:hover {
        color: #0d6efd;
    }

        .group-link:hover .group-name {
            color: #0d6efd;
        }

.group-link-selected {
    background-color: #e7f3ff;
    color: #0d6efd !important;
}

    .group-link-selected .group-name {
        color: #0d6efd;
        font-weight: 600;
    }
/* Group Image */
.group-image {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
}
/* Group Icon */
.group-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*@* background-color: #e9ecef;
    *@ border-radius: 4px;*/
    color: #6c757d;
    font-size: 1.25rem;
}
/* Group Name */
.group-name {
    font-weight: 500;
    flex: 1;
}
/* Show All Link */
.show-all-container {
    padding: 0rem 1rem 0rem 2.5rem;
    border-bottom: 1px solid #e9ecef;
}

.show-all-link {
    /*@* color: #0d6efd;
    *@ font-weight: 500;*/
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

    .show-all-link:hover {
        color: #0a58ca;
        text-decoration: underline;
    }
/* Group Tile (Level 2+) */
.group-tile {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .group-tile:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.group-tile-image-wrapper {
    width: 100%;
    padding-top: 100%;
    position: relative;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.group-tile-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}

.group-tile-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #dee2e6;
}

.group-tile-name {
    font-size: 0.875rem;
    text-align: center;
    color: #212529;
    line-height: 1.2;
}
/* Badge */
.badge {
    font-weight: 400;
}
/* Scrollbar styling */
.groups-container::-webkit-scrollbar,
.secondary-groups-container::-webkit-scrollbar {
    width: 6px;
}

.groups-container::-webkit-scrollbar-track,
.secondary-groups-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.groups-container::-webkit-scrollbar-thumb,
.secondary-groups-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .groups-container::-webkit-scrollbar-thumb:hover,
    .secondary-groups-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block !important;
}

.htmx-request.groups-container {
    opacity: 0.5;
}
/* Bootstrap collapse smooth transitions */
.collapse {
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Cursor pointer */
.cursor-pointer {
    cursor: pointer;
}
/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.secondary-groups-container {
    animation: fadeIn 0.3s ease-in-out;
}

.group-item {
    animation: fadeIn 0.2s ease-in-out;
}
/* Search */
.search-form .form-control {
    border-right: 0;
}

    .search-form .form-control:focus {
        box-shadow: none;
        border-color: #ced4da;
    }
/* Search */
#searchModalForm .form-control {
    border-right: 0;
    background-color: var(--siva1);
    box-shadow: none;
}

    #searchModalForm .form-control:focus {
        box-shadow: none;
        background-color: var(--siva1);
    }

.search-form .btn {
    border-left: 0;
}
/* AI Toggle - iOS style switch */
.ai-toggle-wrapper {
    position: relative;
}

.ai-toggle-label-text {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    user-select: none;
}

.ai-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    cursor: pointer;
}

.ai-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
/* Slider - pozadina toggle-a */
.ai-toggle-slider {
    position: absolute;
    inset: 0;
    background: #e0e0e0;
    border-radius: 28px;
    transition: all 0.3s ease;
}
    /* Rainbow border kada nije aktivan */
    .ai-toggle-slider::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 30px;
        background: linear-gradient(90deg, #ff0080, #ff8c00, #40e0d0, #7b68ee, #ff0080);
        background-size: 300% 100%;
        animation: rainbow-move 3s linear infinite;
        z-index: -1;
        opacity: 0.6;
    }

@keyframes rainbow-move {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}
/* Kružić (knob) */
.ai-toggle-slider::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Aktivan - zelena pozadina kao iOS */
.ai-toggle-input:checked + .ai-toggle-slider {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* box-shadow: 0 0 15px rgba(102, 126, 234, 0.5),
					0 0 30px rgba(118, 75, 162, 0.3); */
}
    /* Sakrij rainbow border kad je aktivan */
    .ai-toggle-input:checked + .ai-toggle-slider::before {
        opacity: 0;
    }
    /* Pomjeri kružić udesno kad je aktivan */
    .ai-toggle-input:checked + .ai-toggle-slider::after {
        transform: translateX(22px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
/* Hover efekat */
.ai-toggle-switch:hover .ai-toggle-slider::before {
    opacity: 0.9;
}
/* 	.ai-toggle-input:checked + .ai-toggle-slider:hover {
		box-shadow: 0 0 20px rgba(102, 126, 234, 0.7),
					0 0 40px rgba(118, 75, 162, 0.4);
	} */

.search-modal-content {
    will-change: transform, opacity;
}

.search-modal-backdrop {
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.25s ease;
}

    .search-modal-backdrop[x-show="true"] {
        backdrop-filter: blur(4px);
    }
/* Cart dropdown */
.cart-dropdown {
    min-width: 350px;
}

@media (max-width: 575px) {
    .cart-dropdown {
        min-width: 300px;
    }
}
/* Search Modal - Mobile First - Alpine.js compatible */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: transparent;
}

.search-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.search-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.search-modal-header {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

    .search-modal-header .form-control {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }

        .search-modal-header .form-control:focus {
            outline: none;
            box-shadow: none;
        }

.search-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    min-height: 400px; /* Ensure there's enough space for spinner to center */
    position: relative; /* Ensure spinner overlay is positioned relative to this */
    display: flex;
    flex-direction: column;
}

.search-results-section {
    margin-bottom: 0;
}

    .search-results-section .list-group-item {
        transition: background-color 0.15s ease;
    }

        .search-results-section .list-group-item:hover {
            background-color: #f8f9fa;
        }
/* Desktop Styles - Alpine.js compatible */
@media (min-width: 768px) {
    .search-modal-content {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 90%;
        max-width: 800px;
        min-height: 80vh;
        max-height: 80vh;
        border-radius: 0.5rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }


    .search-modal-header {
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .search-modal-body {
        border-radius: 0 0 0.5rem 0.5rem;
    }

    .search-modal .nav-link {
        border-top-left-radius: var(--bs-border-radius-xl) !important;
        border-top-right-radius: var(--bs-border-radius-xl) !important;
    }
}
/* Prevent body scroll when modal is open */
body.search-modal-open {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}

.search-modal-body {
    min-height: 0 !important;
    flex-shrink: 1 !important;
}

.podgrupe-scroll-container {
    overflow-y: hidden;
    min-height: 130px; /* ili po �elji */
}

.search-modal-body {
    display: flex;
    flex-direction: column;
}




/* ============================================
       RECENTLY VIEWED - PURE CSS TOUCH CAROUSEL
       Bez Alpine.js - samo CSS scroll-snap
       ============================================ */

.rv-section {
    padding: 1rem 0;
}

/* Header */
.rv-header {
    color: var(--bs-gray-700);
    font-weight: 600;
    font-size: 1rem;
}

/* Navigacione strelice */
.rv-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bs-gray-600);
    transition: all 0.2s ease;
}

    .rv-nav-btn:hover {
        background: var(--bs-gray-100);
        border-color: var(--bs-gray-400);
        color: var(--bs-gray-800);
    }

    .rv-nav-btn:focus-visible {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

/* Carousel wrapper */
.rv-wrapper {
    position: relative;
}

/* Track - pure CSS touch carousel */
.rv-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 8px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .rv-track::-webkit-scrollbar {
        display: none;
    }

/* Product card */
.rv-card {
    flex: 0 0 auto;
    width: 140px;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .rv-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .rv-card:focus-visible {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

/* Image wrapper */
.rv-img-wrap {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}

.rv-img {
    max-width: 110px;
    max-height: 110px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.rv-card:hover .rv-img {
    transform: scale(1.05);
}

.rv-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-400);
}

/* Title */
.rv-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    line-height: 1.4;
    height: 2.8em;
    margin: 0 0 8px;
    color: var(--bs-gray-800);
    font-weight: 500;
}

/* Price */
.rv-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-primary);
}

/* ============================================
       RESPONSIVE
       ============================================ */

@media (min-width: 576px) {
    .rv-track {
        gap: 14px;
    }

    .rv-card {
        width: 150px;
    }

    .rv-img-wrap {
        width: 130px;
        height: 130px;
    }

    .rv-img {
        max-width: 120px;
        max-height: 120px;
    }
}

@media (min-width: 768px) {
    .rv-track {
        gap: 16px;
    }

    .rv-card {
        width: 160px;
    }

    .rv-img-wrap {
        width: 140px;
        height: 140px;
    }

    .rv-img {
        max-width: 130px;
        max-height: 130px;
    }

    .rv-title {
        font-size: 0.9rem;
    }

    .rv-price {
        font-size: 1rem;
    }
}

@media (min-width: 992px) {
    .rv-card {
        width: 170px;
    }

    .rv-img-wrap {
        width: 150px;
        height: 150px;
    }

    .rv-img {
        max-width: 140px;
        max-height: 140px;
    }
}

/* ============================================
       ACCESSIBILITY
       ============================================ */

@media (prefers-reduced-motion: reduce) {
    .rv-track {
        scroll-behavior: auto;
    }

    .rv-card,
    .rv-img,
    .rv-nav-btn {
        transition: none;
    }

        .rv-card:hover {
            transform: none;
        }

            .rv-card:hover .rv-img {
                transform: none;
            }
}

/* ============================================
   RECOMMENDATIONS SKELETON - CSS ONLY
   Skeleton se automatski zamjenjuje kad HTMX ucita sadrzaj (hx-swap="innerHTML")
   ============================================ */

.rec-skeleton {
    padding: 1rem 0;
}

.rec-skeleton-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.rec-skeleton-title {
    height: 1.5rem;
    width: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: rec-shimmer 1.5s infinite;
    border-radius: 4px;
}

.rec-skeleton-track {
    display: flex;
    gap: 12px;
    overflow: hidden;
}

.rec-skeleton-card {
    flex: 0 0 auto;
    width: 140px;
    padding: 12px;
    background: white;
    border-radius: 12px;
}

.rec-skeleton-img {
    width: 110px;
    height: 110px;
    margin: 0 auto 8px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: rec-shimmer 1.5s infinite;
    border-radius: 8px;
}

.rec-skeleton-text {
    height: 14px;
    margin-bottom: 6px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: rec-shimmer 1.5s infinite;
    border-radius: 4px;
}

.rec-skeleton-text:last-child {
    width: 60%;
}

@keyframes rec-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Responsive breakpoints - identični sa rv-* klasama */
@media (min-width: 576px) {
    .rec-skeleton-card {
        width: 150px;
    }

    .rec-skeleton-img {
        width: 130px;
        height: 120px;
    }
}

@media (min-width: 768px) {
    .rec-skeleton-card {
        width: 160px;
    }

    .rec-skeleton-img {
        width: 140px;
        height: 130px;
    }
}

@media (min-width: 992px) {
    .rec-skeleton-card {
        width: 170px;
    }

    .rec-skeleton-img {
        width: 150px;
        height: 140px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .rec-skeleton-img,
    .rec-skeleton-text,
    .rec-skeleton-title {
        animation: none;
        background: #f0f0f0;
    }
}

/* ============================================
   POSLOVNICE - Stilovi za kartice poslovnica
   ============================================ */

/* Highlight efekat za karticu poslovnice (hover na marker ili nearest store) */
.poslovnica-card--highlighted {
    box-shadow: 0 0 0 3px var(--bs-primary);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.poslovnica-card--highlighted .card {
    border-color: var(--bs-primary);
}

/* ============================================
   POSLOVNICA GALLERY
   Horizontalni carousel za galeriju slika
   ============================================ */

/* Hover efekti za slike u galeriji */
.poslovnica-gallery img {
    transition: transform 0.2s ease;
}

.poslovnica-gallery img:hover {
    transform: scale(1.03);
}

/* Moderni scrollbar - WebKit (Chrome, Safari, Edge) */
.poslovnica-gallery .overflow-auto::-webkit-scrollbar {
    height: 6px;
}

.poslovnica-gallery .overflow-auto::-webkit-scrollbar-track {
    background: transparent;
}

.poslovnica-gallery .overflow-auto::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-primary-rgb), 0.4);
    border-radius: 10px;
}

.poslovnica-gallery .overflow-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bs-primary-rgb), 0.6);
}

/* Ukloni strelice */
.poslovnica-gallery .overflow-auto::-webkit-scrollbar-button {
    display: none;
}

/* Firefox scrollbar */
.poslovnica-gallery .overflow-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-primary-rgb), 0.4) transparent;
}

/* x-cloak - sakrij dok Alpine ne inicijalizuje */
[x-cloak] {
    display: none !important;
}



.banner-scroll-container {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem; /* Padding sa strane */
    margin: 0 -1rem; /* Negativ margin da se proširi do ivice */
}

    .banner-scroll-container::-webkit-scrollbar {
        display: none;
    }

.banner-item {
    flex: 0 0 auto;
    width: 75vw; /* 80% širine viewporta */
    max-width: 400px; /* Max širina */
    scroll-snap-align: center; /* Snap na centar */
}

@media (min-width: 576px) {
    .banner-item {
        width: 45vw; /* Na malo većim ekranima */
    }
}

@media (min-width: 992px) {
    .banner-scroll-container {
        flex-direction: column;
        overflow-x: visible;
        padding: 0;
        margin: 0;
        /*gap: 0.5rem;*/
    }

    .banner-item {
        width: 100%;
        max-width: none;
    }
}



.bg-gradient-dark {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}



.mali-tekst {
    font-size: 0.75rem;
    line-height: 1rem;
}

.kratki-opis {
    font-size: 0.75rem;
    line-height: 1rem;
    display: -webkit-box;
}

    .kratki-opis.collapse:not(.show) {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }



.product-card {
    border: none;
    /* transition: transform 0.2s, box-shadow 0.2s; */
    /* border: 1px solid #dee2e6; */
}

    .product-card:hover {
        /* transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(0,0,0,0.1); */
        box-shadow: none;
    }

.product-image {
    padding: 1rem;
    text-align: center;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-bottom: 1px dotted #dee2e6; */
}

    .product-image img {
        max-height: 180px;
        width: auto;
        object-fit: contain;
    }

.tag-badge {
    max-width: 260px;
    height: auto;
    display: block;
}

.tag-wrapper {
    border-top: 1px dashed var(--border-grey);
    border-bottom: 1px dashed var(--border-grey);
}

.tag-pill {
    display: inline-block;
    /* border: 1px solid var(--border-grey); */
    border-radius: 4px;
    padding: 4px;
    /* margin-right: 4px;
		margin-bottom: 4px; */
    font-size: 0.75rem;
}

.tag-line1 {
    font-weight: bold;
}

.tag-line2 {
    color: #6c757d;
}

.new-section {
    border-top: 1px dashed var(--border-grey);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.outlet-banner {
    display: block;
    background-color: #28a745;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    text-decoration: none;
}

    .outlet-banner:hover {
        background-color: #218838;
        color: white;
    }

.navodi {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-weight: bold;
}

    .navodi li {
        font-size: 0.8rem;
        color: var(--zelena);
    }

.ocjene {
    font-size: 0.875rem;
}

.admin-section {
    /* background-color: #f8f9fa; */
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

/* Modern Status Badges */
.status-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.15);
				transition: transform 0.2s, box-shadow 0.2s; */
    backdrop-filter: blur(10px);
}


.badge-text-primary {
    font-size: 0.7rem;
    font-weight: 800;
    margin: 1px 0;
}

.badge-text-secondary {
    font-size: 0.6rem;
    font-weight: 600;
    margin: 1px 0;
    opacity: 0.95;
}

.badge-text-highlight {
    font-size: 0.75rem;
    font-weight: 900;
    margin: 1px 0;
}

/* Badge Variants */
.status-badge-promo {
    background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
}

    .status-badge-promo .badge-text-highlight {
        color: #ffd700;
        text-shadow: 0 0 4px rgba(0,0,0,0.5);
    }

.status-badge-akcija {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: 2px solid rgba(255,255,255,0.2);
}

.status-badge-web {
    background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
    color: white;
    border: 2px solid rgba(255,255,255,0.2);
}

.status-badge-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #000;
    border: 2px solid rgba(255,255,255,0.3);
}

.status-badge-dark {
    background: linear-gradient(135deg, #343a40 0%, #23272b 100%);
    color: white;
    border: 2px solid rgba(255,255,255,0.2);
}

.status-badge-novo {
    background: linear-gradient(135deg, #dc3545 0%, #ff6b6b 100%);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    animation: pulse-glow 2s ease-in-out infinite;
}

.status-badge-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%);
    color: white;
    border: 2px solid rgba(255,255,255,0.2);
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    }

    50% {
        box-shadow: 0 4px 16px rgba(220, 53, 69, 0.8);
    }
}


.card-color-soft {
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.15), 0 8px 24px rgba(255, 193, 7, 0.10);
    transition: box-shadow .2s ease, transform .2s ease;
}

    .card-color-soft:hover {
        box-shadow: 0 4px 10px rgba(255, 193, 7, 0.22), 0 12px 32px rgba(255, 193, 7, 0.16);
        transform: translateY(-1px);
    }


.card-gradient-shadow {
    box-shadow: 0 1px 2px rgba(0,0,0,.08), /* neutralno odvajanje */
    0 0 0 2px rgba(0, 140, 255, .14), /* plava ring */
    0 0 0 4px rgba(40, 167, 69, .08); /* zelena ring (drugi sloj) */
}

    .card-gradient-shadow::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: .75rem;
        z-index: -1;
        filter: blur(6px);
        background: linear-gradient( 120deg, rgba(0, 123, 255, 0.25), rgba(40, 167, 69, 0.22), rgba(255, 193, 7, 0.20), rgba(255, 140, 0, 0.18) );
    }

    .card-gradient-shadow:hover {
        box-shadow: 0 4px 14px rgba(0,0,0,.12), 0 0 0 2px rgba(0, 140, 255, .20), 0 0 0 5px rgba(255, 193, 7, .10);
    }



/* Product Image (pi-*) */
:root {
    --lqip-global: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDIwIDE0Ij48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTQiIGZpbGw9IiNmMWYzZjUiLz48L3N2Zz4=");
}

/* Wrapper: LQIP + shimmer u pozadini */
.pi-wrap {
    position: relative;
    width: var(--pi-w, 100%);
    height: var(--pi-h, auto);
    overflow: hidden;
    border-radius: .75rem;
    /* Layer 1: global LQIP (cover)
     Layer 2: shimmer gradient (animated) */
    background-image: var(--lqip-global), linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100% );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, 200% 100%;
    background-position: center, -200% 0;
    background-color: #f1f3f5;
    animation: pi-shimmer-bg 1.2s ease-in-out infinite;
}

@keyframes pi-shimmer-bg {
    0% {
        background-position: center, -200% 0;
    }

    100% {
        background-position: center, 200% 0;
    }
}

/* Slika je uvijek vidljiva čim se učita (nema opacity:0) */
.pi-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Ako korisnik ima reduced motion, ugasi shimmer */
@media (prefers-reduced-motion: reduce) {
    .pi-wrap {
        animation: none;
    }
}