/* ===================================================================
   MODERN-THEME.CSS
   Verzija 3.0 - Kompletna verzija (Portfolio + Gallery + Global)
=================================================================== */

/* ===== 1. DEFINICIJA GLOBALNIH VARIJABLI (DESIGN SYSTEM) ===== */
:root {
    /* Boje */
    --color-text: #2c3e50;
    --color-text-light: #7f8c8d;
    --color-background: #ffffff;
    --color-background-soft: #f8f9fa;
    --color-accent: #b48608;
    --color-accent-hover: #dbae37;
    --color-border: #e0e0e0;
    --color-success: #27ae60;
    --color-error: #c0392b;

    /* Tipografija */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-headings: 'Playfair Display', serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Razmaci */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;

    /* Ostalo */
    --border-radius: 6px;
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --transition-speed: 0.3s;
}

/* ===== 2. OSNOVNI RESET I STILOVI ZA CEO SAJT ===== */
html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === CUSTOM CONTAINER (SAATCHI STYLE) === */
.container-gallery {
    width: 100%;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto;
}

/* Na ogromnim ekranima širimo se do 1680px */
@media (min-width: 1700px) {
    .container-gallery {
        max-width: 1680px;
    }
}

/* Na malo manjim (laptopovima) ponašamo se kao container-fluid ili xxl */
@media (min-width: 1400px) and (max-width: 1699px) {
    .container-gallery {
        max-width: 96%; /* Malo lufta sa strane */
    }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-headings);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    letter-spacing: 0.02em;
}

@media (min-width:1200px){.h1,h1{font-size:2.5rem}}
@media (min-width:1200px){.h2,h2{font-size:2rem}}
@media (min-width:1200px){.h3,h3{font-size:1.75rem}}
@media (min-width:1200px){.h4,h4{font-size:1.5rem}}
.h5,h5{font-size:1.25rem}
.h6,h6{font-size:1rem}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6  {
    letter-spacing: 0.05em;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover, a:focus {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.hover-underline:hover {
    text-decoration: underline !important;
}

/* ===== 3. STILOVI ZA KLJUČNE KOMPONENTE ===== */

/* --- Dugmad (Buttons) --- */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
    box-shadow: none;
}

.btn-cta {
    background: linear-gradient(145deg, #dfbd5a, #b48608);
    border: none;
    color: #fff !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(180, 134, 8, 0.3);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.btn-cta:hover {
    background: linear-gradient(145deg, #b48608, #dfbd5a);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(180, 134, 8, 0.4);
    color: #fff !important;
}

.btn-primary {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.btn-primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
    text-decoration: none !important;
}

.btn.btn-dark:not(.btn-outline-dark) {
    background-color: #212529;
    color: #fff;
    border-color: #212529;
}

.btn.btn-dark:not(.btn-outline-dark):hover {
    background-color: #000000;
    border-color: #000000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
}

.btn-secondary,
.btn.btn-outline-dark {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover,
.btn.btn-outline-dark:hover {
    background-color: var(--color-background-soft);
    color: var(--color-text);
    border-color: #c0c0c0;
    text-decoration: none !important;
}

/* --- Forme --- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--color-border);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--border-radius);
    transition: border-color var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out;
    box-shadow: none !important;
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    color: var(--color-text);
    background-color: #fff;
    border-color: var(--color-accent);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(180, 134, 8, 0.25);
}

#type {
    -webkit-appearance: caret;
    -moz-appearance: caret;
    appearance: auto;
    background-image: initial !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

/* ===================================================================
   FILTERI UNUTAR .accordion_group
=================================================================== */
.accordion_group .card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: none !important;
    padding-bottom: 0.5rem;
    margin-bottom: 1.75rem;
    position: relative;
}
.accordion_group .card:hover { transform: none !important; }
.accordion_group .card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
}
.accordion_group .card:last-of-type::after { display: none; }
.accordion_group .card-header.panels,
.accordion_group .card-header.panels:hover {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
    cursor: pointer;
}
.accordion_group .card-header .card-title {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
}
.accordion_group .card-body .list-item,
.accordion_group .card-body .form-check {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.accordion_group .card-body .list-item:last-child,
.accordion_group .card-body .form-check:last-child {
    margin-bottom: 0;
}
.accordion_group .list-group .list-item a,
.accordion_group .form-group .form-check {
    display: flex !important;
    align-items: baseline !important;
}

/* ===================================================================
   KEYWORD TAGOVI
=================================================================== */
.keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}
.keywords a {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-light);
    letter-spacing: 0.5px;
    background-color: var(--color-background-soft);
    border: 1px solid transparent;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all var(--transition-speed) ease;
    margin: 0;
}
.keywords a:hover {
    background-color: var(--color-border);
    color: var(--color-text);
}

/* ============================================================
   GRID & CARDS
============================================================ */
.grid-item {
    padding: 0;
    padding-bottom: var(--spacing-md);
    margin-bottom: 20px;
    box-sizing: border-box;
}

.artwork-card {
    padding: var(--spacing-sm);
    text-align: left;
}
.artwork-card .card.shadow {
    box-shadow: none !important;
}
.artwork-card img.photothumb {
    display: block;
    margin: 0 auto 1rem auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 500px;
}
.artwork-card .h6.fw-normal {
    font-family: var(--font-headings);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

/* ============================================================
   SORTER
============================================================ */
.sorter.list-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.sorter .list-item {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 400;
    padding: 5px 0;
}
.sorter .list-item:hover { color: #000000; }
.sorter .list-item .radio {
    height: 16px;
    width: 16px;
    background: #fff;
    border: 1px solid #000000;
    border-radius: 0.1rem;
    margin-right: 10px;
    transition: all var(--transition-speed) ease;
}
.sorter .list-item:hover .radio { background: #7f7f7f; }
.sorter .list-item.asc, .sorter .list-item.desc { font-weight: 600; }
.sorter .list-item.asc .radio, .sorter .list-item.desc .radio { background: #000; }

/* ============================================================
   FILTER MENU LAYOUT (Sidebar & Mobile)
============================================================ */
form#filterForm { width: 100%; }

@media (max-width: 991px) {
    #filterOffcanvas,
    #galleryOffcanvas,
    #portfolioOffcanvas,
    #supportOffcanvas,
    #infoOffcanvas {
        width: 320px;
        max-width: 100%;
        padding: 10px 15px;
        z-index: 99999 !important;
        background-color: #ffffff !important;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }
    .offcanvas-backdrop { z-index: 99990 !important; }
}

.sidebar-col {
    width: 100%;
    max-width: 300px;
    min-width: 300px;
    flex: 0 0 auto;
}
@media (min-width: 992px) { .sidebar-col { flex: 0 0 auto; } }
@media (max-width: 991px) {
    .sidebar-col {
        min-width: 0;
        max-width: none;
        flex: 0 0 100%;
    }
}
@media (min-width: 1921px) {
    .sidebar-col { max-width: 400px; }
}
@media (min-width: 2100px) {
    .sidebar-col { max-width: 500px; }
}

/* ============================================================
   SPONZORISANI BANERI
============================================================ */
.sponsored-artist-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: all 0.3s ease;
}
.sponsored-artist-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}
.artist-images-wrapper { display: flex; }
.sponsored-image-item {
    display: block;
    height: 100%;
    border: 2px solid #ffffff;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    transition: transform 0.35s ease;
}
.sponsored-artist-card:hover .sponsored-image-item { transform: scale(1.1); }
.artist-info-wrapper {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}
.artist-info-wrapper a.artist-name {
    text-decoration: none;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
}
.artist-contact {
    color: #666;
    font-weight: 500;
    white-space: nowrap;
    transition: transform 0.3s ease, color 0.3s ease;
}
.sponsored-artist-card:hover .artist-contact {
    color: #000;
    transform: scale(1.1);
}

/* Search Baner */
.sponsored-artists-grid .artist-images-wrapper { height: 110px; }
.sponsored-artists-grid .sponsored-image-item { width: 25%; }
.sponsored-artists-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 30px;
}
.sponsored-artists-grid .sponsored-artist-card {
    flex-grow: 1;
    flex-basis: calc(33.333% - 20px);
    min-width: 210px;
    max-width: 460px;
}
.sponsored-artists-grid.artist-count-4 .sponsored-artist-card { flex-basis: calc(50% - 20px); }
@media (max-width: 767px) {
    .sponsored-artists-grid { justify-content: center; }
    .sponsored-artists-grid .sponsored-artist-card { flex-basis: 450px; }
}
@media (max-width: 991px) and (min-width: 768px) {
    .sponsored-artists-grid.artist-count-3 .artist-images-wrapper .sponsored-image-item:nth-child(4) { display: none; }
    .sponsored-artists-grid.artist-count-3 .artist-images-wrapper .sponsored-image-item { width: 33.333%; }
}

/* Home Baner */
.artist-images-wrapper.home-banner { height: 210px; }
.artist-images-wrapper.home-banner .sponsored-image-item { width: 33.333%; }
.home-banner-grid > [class*="col-"] {
    padding-left: 22px;
    padding-right: 22px;
    padding-bottom: 40px;
}

/* ============================================================
   FOOTER (MOBILE)
============================================================ */
@media (max-width: 991px) {
    .footer-wrapper {
        background-color: #1a1a1a;
        color: #f0f0f0;
    }
    .footer-wrapper .accordion-item:has(.accordion-button:not(.collapsed)) {
        border-bottom: 1px solid #555555;
    }
    .accordion-item {
        border: none;
        background-color: transparent;
        color: #ffffff;
        border-bottom: 1px solid #555555;
    }
    .accordion-item.is-open { border-bottom: none; }
    .accordion-button {
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.875rem;
        padding: 15px 0;
        color: #ffffff;
        background-color: transparent;
        box-shadow: none;
        border-top: none;
    }
    .accordion-button.collapsed, .accordion-button:not(.collapsed) {
        color: #ffffff;
        background-color: transparent;
        box-shadow: none;
    }
    .accordion-button.collapsed::after, .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
    .dark-section a {
        color: #f7ffff;
        font-weight: 400;
        letter-spacing: 0.5px;
    }
}

/* ============================================================
   ARTWORK VIEW PAGE
============================================================ */
.sv-slider .owl-nav {
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}
.sv-slider .owl-nav button {
    pointer-events: all;
    position: absolute;
    background: rgba(255,255,255,0.7) !important;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.sv-slider .owl-nav button:hover { background: #fff !important; }
.sv-slider .owl-nav .owl-prev { left: -20px; }
.sv-slider .owl-nav .owl-next { right: 20px; }
.sv-slider .owl-nav button.disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}
.artwork-images-container .owl-thumbs {
    gap: 6px;
    padding-left: 0;
    padding-right: 0;
}
.artwork-details-container .artwork-sidebar {
    position: sticky;
    top: 20px;
    padding: 1.5rem;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
}
.artwork-price-status {
    border: none;
    margin-bottom: 1.5rem;
    padding: 1.2rem;
}
.artwork-price-status .fs-4 { color: #dc3545; }
.artwork-specs .row {
    margin-bottom: 0.7rem;
    font-size: 0.9rem;
    color: #495057;
}
.artwork-specs .col-5 {
    font-weight: 600;
    color: #212529;
}
.artwork-contact-section h6 {
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}
.artwork-share h6 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #6c757d;
}

@media (max-width: 991px) {
    .artwork-details-container .artwork-sidebar {
        position: static;
        padding: 0;
        box-shadow: none;
    }
    .sv-slider .owl-nav { display: none; }
    .artwork-images-container .owl-thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ============================================================
   SEARCH PAGE (REDESIGN)
============================================================ */
.painting-index .item .card,
.painting-index .content-card {
    border: none !important;
    background-color: transparent;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
}
.painting-index .item .card:hover,
.painting-index .content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.painting-index .item img,
.painting-index .content-card img {
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.painting-index .item h2,
.painting-index .item h4,
.painting-index .item .price {
    margin-top: 10px;
    margin-bottom: 2px;
    line-height: 1.4;
}
.painting-index .item a {
    text-decoration: none;
    color: #333;
}
.painting-index .item a:hover { color: #000; }
.painting-index h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 30px !important;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.pagination {
    justify-content: center;
    margin-top: 40px;
    gap: 5px;
}
.pagination li a, .pagination li span {
    color: #333;
    border: none;
    border-radius: 50%;
    width: clamp(25px, 4vw, 40px);
    height: clamp(25px, 4vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.2s;
}
.pagination li.active a, .pagination li.active span {
    background-color: #000;
    color: #fff;
}
.pagination li a:hover {
    background-color: #f0f0f0;
    color: #000;
}
.pagination .prev a,
.pagination .next a {
    background-color: transparent;
    border: 2px solid #555;
    color: #333;
    border-radius: 4px;
}

/* ============================================================
   MODERN THEME - PORTFOLIO & GALLERY HEADERS
   (NOVI DODATAK)
============================================================ */

/* --- 1. HERO SEKCIJA (VELIKI BANER NA PROFILU) --- */
.portfolio-cover {
    position: relative;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.portfolio-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
}

.artist-avatar-container {
    margin-top: -75px;
    position: relative;
    z-index: 1;
}

.artist-avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background-color: #fff;
}

/* Dugmići za izmenu (kamera/olovka) */
.edit-btn {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border: none;
    transition: 0.2s;
}
.edit-btn:hover { background: #fff; }

/* --- 2. NAVIGACIJA - ZAJEDNIČKI STILOVI (I ZA VELIKI I ZA MALI MENI) --- */

/* Kontejner navigacije (Samo za veliki meni ima senku i border) */
.portfolio-nav {
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    position: relative;
    z-index: 1;
}

/* Stilovi za linkove - OVO VAŽI ZA OBA MENIJA */
.portfolio-nav .nav-link,
.portfolio-nav-compact .nav-link {
    font-size: 0.9rem;      /* Ista veličina svuda */
    font-weight: 600;       /* Ista debljina svuda */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #555;
    padding: 1rem 1rem;     /* Standardizovan razmak */
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    white-space: nowrap;    /* Sprečava prelamanje */
}

/* Aktivno stanje i Hover - OVO VAŽI ZA OBA MENIJA */
.portfolio-nav .nav-link:hover,
.portfolio-nav .nav-link.active-tab,
.portfolio-nav-compact .nav-link:hover,
.portfolio-nav-compact .nav-link.active-tab {
    color: #000;
    border-bottom: 2px solid #000;
}

/* Ikonica za kontakt dugme */
.contact-btn-icon {
    font-size: 1.2rem;
    vertical-align: middle;
    margin-right: 8px;
}

/* ============================================================
   RESPONSIVE / MOBILNI STILOVI (max-width: 767.98px)
============================================================ */

@media (max-width: 767.98px) {

    /* --- A. SMANJIVANJE AVATARA (Samo za veliki profil) --- */
    .artist-avatar {
        width: 100px;
        height: 100px;
        border-width: 3px;
    }

    .artist-avatar-container {
        margin-top: -50px; /* Pola visine slike */
    }

    .portfolio-nav h1 {
        font-size: 1.5rem; /* Manje ime na telefonu */
    }


    /* --- B. HORIZONTALNI SKROL I STRELICE (ZA OBA MENIJA) --- */

    /* Omotač za strelice */
    .mobile-nav-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;       /* Fiksna visina da ne skače */
        overflow: hidden;
        background: #fff;
    }

    /* Stil za samu listu (ul/div) - OBA MENIJA */
    .portfolio-nav .nav,
    .portfolio-nav-compact {
        display: flex;
        flex-wrap: nowrap !important; /* KLJUČNO: Nema prelamanja */
        overflow-x: auto;
        justify-content: flex-start !important; /* Uvek levo poravnanje */

        width: 100%;
        padding-left: 40px;   /* Mesto za levu strelicu */
        padding-right: 40px;  /* Mesto za desnu strelicu */

        /* Sakrivanje scrollbara */
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* IE */
        -webkit-overflow-scrolling: touch; /* Glatko na iPhone */
    }

    /* Sakrivanje scrollbara (Chrome/Safari) */
    .portfolio-nav .nav::-webkit-scrollbar,
    .portfolio-nav-compact::-webkit-scrollbar {
        display: none;
    }

    /* STRELICE (Leva i Desna) */
    .nav-arrow {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
        z-index: 100;
        background: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 1.2rem;
        cursor: pointer;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        display: none; /* JS ih uključuje po potrebi */
    }

    .nav-arrow.left {
        left: 0;
        border-right: 1px solid #eee;
    }

    .nav-arrow.right {
        right: 0;
        border-left: 1px solid #eee;
    }
}

/* Na desktopu uvek sakrij strelice */
@media (min-width: 768px) {
    .nav-arrow { display: none !important; }
}


/* === FIX ZA DESKTOP PRIKAZ (Sprečava zatamnjenje) ===
@media (min-width: 992px) {
    .offcanvas-lg {
        position: static !important;
        z-index: auto !important;
        display: block !important;
        visibility: visible !important;
        background: white !important;
        border: none !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    /* Sakriva zaglavlje menija na desktopu
    .offcanvas-lg .offcanvas-header {
        display: none !important;
    }

    /* Uklanja sivu pozadinu (backdrop) na desktopu
    .offcanvas-backdrop {
        display: none !important;
        opacity: 0 !important;
    }
}*/

/* ================================================= */
/* === SIDEBAR MENI (KOMPLETAN STIL) === */
/* ================================================= */

/* --- 1. IZGLED LINKOVA --- */
.sidebar-menu-link {
    color: #6c757d;
    text-decoration: none;
    display: block;
    padding: 6px 0;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar-menu-link:hover {
    color: #000 !important;
    text-decoration: underline !important;
    background: transparent !important;
}

/* --- 2. AKTIVNI LINK (STRELICA LEVO) --- */
.active-item .sidebar-menu-link,
.active .sidebar-menu-link {
    color: #000 !important;
    font-weight: 700 !important;
    position: relative;
    border: none !important;
}

@media (min-width: 992px) {
    .active-item .sidebar-menu-link::after,
    .active .sidebar-menu-link::after {
        content: "\f053";      /* Strelica ulevo (<) */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-left: 10px;
        font-size: 0.8em;
        color: #000;
        display: inline-block;
    }
}

/* --- 3. ROTACIJA STRELICA ZA KATEGORIJE (GORE/DOLE) --- */

.section-toggle .transition-icon {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* KADA JE ZATVORENO: Strelica pokazuje DOLE (0 stepeni) */
.section-toggle.collapsed .transition-icon {
    transform: rotate(0deg);
}

/* KADA JE OTVORENO: Strelica pokazuje GORE (180 stepeni) */
.section-toggle:not(.collapsed) .transition-icon {
    transform: rotate(180deg);
}

     /* === GLAVNI HEADER MORA BITI IZNAD SVEGA === */
 header, .navbar, .main-header {
     z-index: 1050 !important; /* Veće od sidebara (900) i modala */
     position: relative; /* Bitno da bi z-index radio */
 }

/* Osiguravamo da je dugme za mobilni meni uvek klikabilno */
.navbar-toggler {
    z-index: 1060 !important;
}

/* === STICKY SIDEBAR SAMO NA DESKTOPU === */
@media (min-width: 992px) {
    .sticky-lg-only {
        /* position: -webkit-sticky; <-- OVO OBRIŠITE, NE TREBA NAM */
        position: sticky;       /* Ovo je standard i radi svuda */
        top: 100px;             /* Razmak od vrha ekrana */
        z-index: 900;           /* Manje od glavnog menija (koji je obično 1030+) */
    }
}

/* === OSIGURAČ DA GLAVNI MENI BUDE UVEK IZNAD === */
header, .navbar, .main-header {
    z-index: 1050 !important;
    position: relative;
}

/* === HOME PAGE === */
/* Value Proposition Ulepšavanje */
.value-prop-section .display-6 {
    font-size: 2.5rem; /* Malo krupnije brojke */
}
/* Na manjim ekranima smanji brojke da ne budu prevelike */
@media (max-width: 768px) {
    .value-prop-section .display-6 {
        font-size: 1.8rem;
    }
}

/* --- SLIDESHOW STYLES --- */

/* 1. IME UMETNIKA NA SLAJDU */
.slide-artist-name {
    font-size: 20px;
    font-weight: normal;
    color: #fff !important;
    text-shadow: 2px 2px 5px #000000; /* Jaka crna senka */
    text-decoration: none;
}
.slide-artist-name:hover {
    color: #f0f0f0 !important;
    text-decoration: none;
}

/* 2. STRELICE SA BORDEROM (OUTLINE) */

.carousel-control-prev i,
.carousel-control-next i {
    font-size: 2.5rem; /* Malo vece da se lepo vide */
    color: #fff;       /* Unutrašnjost bela */

    /* 1. DISKRETNA SENKA (Smanjena) */
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3));

    /* 2. BORDER OKO IKONICE (Ovo je ključno) */
    /* Prvi broj je debljina, drugi je boja bordera */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6);

    transition: transform 0.3s ease, filter 0.3s ease;
}

/* HOVER EFEKAT */
.carousel-control-prev:hover i,
.carousel-control-next:hover i {
    /* Na hover se samo poveća */
    transform: scale(1.2);

    /* Border postane potpuno crn i jasan na hover */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6);

    /* Senka se blago pojača */
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3));
}

/* Podesavanje polja za klik */
.carousel-control-prev, .carousel-control-next {
    opacity: 0.8;
    width: 8%;
    background: none; /* Sigurnost da nema pozadine */
    border: none;
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1;
}

/* 3. KVADRATIĆI NA DNU (INDICATORS) */
.carousel-indicators {
    margin-bottom: 50px;
}
.carousel-indicators [data-bs-target] {
    width: 12px !important;
    height: 12px !important;
    border-radius: 0;
    background-color: #fff;
    border: 1px solid #000;
    opacity: 0.6;
    margin-left: 6px;
    margin-right: 6px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}
.carousel-indicators .active {
    opacity: 1;
    background-color: #fff;
    transform: scale(1.3);
    border: 1px solid #000;
}

/* ================================================= */
/* === ARTIST MULTIMEDIA === */
/* ================================================= */
.video-thumbnail-link:hover .play-icon-circle {
    transform: scale(0.9);
    background-color: rgba(0, 0, 0, 0.7) !important;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.facebook-video-container,
.instagram-video-container,
.tiktok-video-container,
.unsupported-video-container {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ============================================================
   ARTWORK SORT WIDGET - FINAL CLICK FIX
   ============================================================ */
/* --- artwork-sort-widget dropdown fixes --- */

.artwork-sort-widget .dropdown-toggle::after { display: none !important; }

/* Osiguraj da dropdown ima dobar referentni kontekst */
.artwork-sort-widget .btn-group { position: relative; }

/* KLJUČNO: prisili meni da bude ispod dugmeta */
.artwork-sort-widget .dropdown-menu{
    width: 100% !important;
    min-width: 220px;
    margin-top: 10px !important;

    top: 100% !important;
    left: 0 !important;
    transform: none !important;   /* bitno ako postoji inline transform */

    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1050;
}

.artwork-sort-widget .custom-sort-btn{
    text-transform: none !important;
    font-weight: normal !important;
    background-color: #fff;
    border-color: #ced4da;
    color: #333;
    font-size: 12px;
    transition: all 0.2s ease-in-out;
}

.artwork-sort-widget .custom-sort-btn:hover{
    background-color: #f8f9fa !important;
    border-color: #abb5be !important;
    color: #000 !important;
}

.artwork-sort-widget .dropdown-item{
    padding: 14px 16px;
    font-size: 14px;
}

.artwork-sort-widget .dropdown-item.active{
    background-color: #f7f7f7;
    color: #000;
    font-weight: normal;
}

.artwork-sort-widget .dropdown-item:hover{ background-color: #f5f5f5; }

.artwork-sort-widget .dropdown-toggle.show,
.artwork-sort-widget .custom-sort-btn:active,
.artwork-sort-widget .custom-sort-btn:focus{
    background-color: #E8EAF6 !important;
    color: #0000FF !important;
    border-color: #E8EAF6 !important;
    box-shadow: none !important;
}

.artwork-sort-widget .dropdown-toggle.show i{
    color: #0000FF !important;
}

/* Artwork search menu -sidebar */
#sidebar ul.gift-list li.active a {
    background-color: #e7e7e7;
    color: #555555;
    font-weight: 400;
    padding: 7px 14px 7px 14px ;
    display: flex;
    justify-content: space-between;
}
#sidebar ul.gift-list li.active a::after {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    float: right;
    margin-left: 7px;
    font-weight: 700;
    font-size: 16px;
}