/* --- Generički Stilovi za Popup --- */
#im-wizard-backdrop { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.85); 
    z-index: 100000;
    display: flex; 
    align-items: center; 
    justify-content: center;
    opacity: 0; 
    transition: opacity 0.3s ease; 
    visibility: hidden;
}
#im-wizard-backdrop.im-modal-visible { 
    opacity: 1; 
    visibility: visible; 
}

#im-wizard-content { 
    position: relative; 
    background: #fff; 
    border-radius: 8px; 
    width: 95%; 
    max-width: 1700px; /* Najšira verzija (za 4 nedelje) */
    height: 90vh;
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}
#im-wizard-header { 
    padding: 20px; 
    border-bottom: 1px solid #eee; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-shrink: 0; 
}
#im-wizard-header h2 { 
    margin: 0; 
    font-size: 24px; 
}
#im-wizard-close-btn { 
    font-size: 30px; 
    font-weight: bold; 
    color: #777; 
    cursor: pointer; 
    text-decoration: none; 
    border: none; 
    background: transparent; 
    padding: 0; 
}
#im-wizard-body { 
    flex-grow: 1; 
    overflow: hidden; 
    padding: 20px; 
    display: flex; 
    gap: 20px; 
}
#im-wizard-body.im-modal-loading { 
    align-items: center; 
    justify-content: center; 
    font-size: 20px; 
}
#im-wizard-footer { 
    padding: 20px; 
    border-top: 1px solid #eee; 
    background: #f9f9f9; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-shrink: 0; 
}
#im-wizard-error { 
    display: none; 
    color: red; 
    font-weight: bold; 
}
#im-wizard-loading { 
    display: none; 
    font-weight: bold; 
    color: #0073aa; 
}
#im-wizard-footer-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}


/* --- Generički Stilovi za Drag & Drop --- */
#im-dnd-container { 
    display: flex; 
    flex: 1; 
    height: 100%; 
    gap: 15px; 
    overflow: hidden; 
}

/* Lista dostupnih jela */
#im-dnd-meals-list { 
    flex: 1; 
    border: 1px solid #eee; 
    background: #fdfdfd; 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    min-width: 250px;
}
#im-dnd-meals-list h4 { 
    margin: 0 0 10px 0; 
    flex-shrink: 0; 
}
#im-meal-search { 
    width: 100%; 
    padding: 8px; 
    margin-bottom: 15px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    flex-shrink: 0; 
}
.im-dnd-meals-scroll-container { 
    flex-grow: 1; 
    overflow-y: auto; 
    height: auto; 
}

/* Zone za spuštanje (Drop zones) */
#im-dnd-drop-zones-wrapper { 
    display: flex; 
    flex: 4; /* Veći prostor za 4 zone */
    gap: 15px; 
    height: 100%; 
    overflow-x: auto; 
} 
.im-dnd-drop-zone { 
    border: 2px dashed #ccc; 
    border-radius: 8px; 
    padding: 15px; 
    flex-grow: 1; 
    overflow-y: auto; 
    background: #f9f9f9; 
    min-width: 250px; 
    display: flex; 
    flex-direction: column; 
}
.im-dnd-drop-zone h3 { 
    margin: 0 0 10px 0; 
    font-size: 16px; 
}
.im-dnd-drop-zone.im-drop-active { 
    background-color: #e6f7ff; 
    border-color: #0073aa; 
}
.im-week-counter { 
    font-size: 14px; 
    font-weight: bold; 
    color: #333; 
    margin-bottom: 10px; 
    text-align: right; 
}

/* Stil jela (u listi) */
.im-wizard-meal { 
    display: block; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    margin-bottom: 10px; 
    background: #fff; 
    cursor: grab; 
}
.im-wizard-meal a { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 8px 10px; 
    text-decoration: none; 
    color: inherit; 
}
.im-wizard-meal.im-meal-used { 
    display: none; /* Sakriva jelo kad je odabrano */ 
}
.im-wizard-meal img { 
    width: 40px; 
    height: 40px; 
    object-fit: cover; 
    border-radius: 4px; 
}
.im-wizard-meal .im-no-img { 
    width: 40px; 
    height: 40px; 
    background: #f0f0f0; 
    border: 1px dashed #ccc; 
    border-radius: 4px; 
}

/* Stil jela (kad je spušteno u zonu) */
.im-dnd-meal-dropped { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 8px 10px; 
    background: #fff; 
    border: 1px solid #4CAF50; 
    border-radius: 5px; 
    margin-bottom: 10px; 
    position: relative; 
    padding-right: 35px; 
    cursor: move; 
}
.im-dnd-meal-dropped img, .im-dnd-meal-dropped .im-no-img { 
    width: 40px; 
    height: 40px; 
    object-fit: cover; 
    border-radius: 4px; 
    flex-shrink: 0;
}
.im-dnd-meal-dropped a { 
    flex-grow: 1; 
    text-decoration: none; 
    color: inherit;
	display: flex;         
    align-items: center;  
    gap: 10px; 
}
.im-remove-meal { 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 24px; 
    color: #cc0000; 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.ui-sortable-placeholder { 
    border: 2px dashed #aaa; 
    background: #f0f0f0; 
    visibility: visible !important; 
    height: 50px; 
}

/* =========================================
   DIO 8: Grid za Jela u Programu (4 Kolone)
   ========================================= */

/* Ovde ciljamo .columns-4 (kao što si promenio u PHP-u) */
.jela-ispod-tabova ul.products.columns-4 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px !important; 
    padding: 0;
}

/* Ovde ciljamo .columns-4 i menjamo širinu na 25% */
.jela-ispod-tabova ul.products.columns-4 li.product {
    width: 25%; /* <-- Ovo je ključna promena (100 / 4) */
    padding: 0 15px;
    margin: 0 0 30px 0 !important; 
    float: none; 
    box-sizing: border-box; 
    list-style: none;
    
    /* Ovo ostaje isto (za jednake visine) */
    display: flex;
    flex-direction: column;
}

/* --- Stilovi za slike i naslove (OSTAJU ISTI) --- */

.jela-ispod-tabova li.product img {
    width: 100%;
    height: 220px; /* <-- Slobodno podesi ovu visinu */
    object-fit: cover;
    margin-bottom: 10px;
}

.jela-ispod-tabova li.product .woocommerce-loop-product__title {
    line-height: 1.4em; 
    height: 2.8em;      /* Visina za 2 linije */
    overflow: hidden; 
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2 linije teksta */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-top: auto; 
}


/* --- Media Queries (Samo menjamo selektor) --- */

/* Podešavanje za tablete (2 kolone) */
@media (max-width: 992px) {
    /* Ovde ciljamo .columns-4 */
    .jela-ispod-tabova ul.products.columns-4 li.product {
        width: 50%; /* Ostavljamo 2 kolone na tabletu */
    }
}

/* Podešavanje za mobilne (1 kolona) */
@media (max-width: 600px) {
    /* Ovde ciljamo .columns-4 */
    .jela-ispod-tabova ul.products.columns-4 li.product {
        width: 100%;
    }
    .jela-ispod-tabova li.product img {
         height: 300px; /* Veća slika za mobilni */
    }
}



/* --- POČETAK MOBILNOG INTERFEJSA ZA WIZARD --- */

/* Sakrij DND kontejner na mobilnom */
.im-wizard-mobile #im-dnd-container {
    display: none;
}

/* Prikaži mobilni kontejner samo na mobilnom */
#im-mobile-container {
    display: none;
}

.im-wizard-mobile #im-mobile-container {
    display: flex;
    flex-direction: column;
    /* Omogućava da se tijelo skroluje nezavisno od headera/footera */
    height: 100%; 
    overflow: hidden;
}

/* Gornji dio: Odabrana jela */
#im-mobile-selected-area {
    flex-shrink: 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* Donji dio: Dostupna jela */
#im-mobile-available-area {
    flex-grow: 1; /* Zauzima ostatak visine */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Važno za skrolovanje */
    padding-top: 10px;
}

#im-mobile-available-area h4 {
    margin: 0 0 10px 0;
    padding: 0 15px; /* Poravnanje sa ostatkom popupa */
}
#im-mobile-available-area #im-meal-search {
     margin: 0 15px 10px 15px;
     width: calc(100% - 30px);
}

/* Kontejner za skrolovanje jela */
.im-wizard-mobile .im-dnd-meals-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 15px;
}

/* Switcher za nedelje (tabovi) */
.im-mobile-week-switcher {
    display: flex;
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0 10px;
    border-bottom: 1px solid #ddd;
    /* Omogući skrolovanje tabova na malim ekranima */
    overflow-x: auto;
    white-space: nowrap;
}
.im-mobile-week-switcher li {
    margin: 0 5px 0 0;
    padding: 0;
    flex-shrink: 0; /* Sprječava sažimanje tabova */
}
.im-mobile-week-switcher a {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: #555;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-size: 13px;
    font-weight: bold;
}
.im-mobile-week-switcher a.im-active {
    background: #fff;
    border-color: #ddd;
    color: #000;
}

/* Paneli za nedelje (gdje idu odabrana jela) */
.im-mobile-week-panels {
    padding: 0 15px;
    min-height: 100px; /* Malo prostora da ne "skače" */
    /* Omogućavamo skrolovanje ako ima previše jela */
    max-height: 200px;
    overflow-y: auto;
}
.im-mobile-week-panel {
    display: none;
    /* Grid za lijep prikaz jela */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.im-mobile-week-panel.im-active {
    display: grid;
}

/* Dugme "Add" (+) */
.im-wizard-mobile .im-wizard-meal {
    position: relative;
    padding-right: 40px; /* Napravi mjesta za dugme */
}
.im-mobile-add-meal-btn {
    position: absolute !important;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    padding: 2px 8px !important;
    line-height: 1.5 !important;
    font-size: 18px !important;
    font-weight: bold;
}

/* Stil za dodato jelo (u gornjem panelu) */
.im-mobile-meal-added {
    /* Slično kao .im-dnd-meal-dropped */
    position: relative;
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 3px;
    display: flex;
    align-items: center;
}
.im-mobile-meal-added a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    /* Osigurava da tekst ne pobjegne */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1;
}
.im-mobile-meal-added img,
.im-mobile-meal-added .im-no-img {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    object-fit: cover;
    flex-shrink: 0;
}
.im-mobile-meal-added .im-no-img {
     background: #eee;
}
.im-mobile-meal-added .im-remove-meal {
    /* Slično kao .im-remove-meal */
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #a00;
    padding: 0 5px;
    margin-left: 5px;
    flex-shrink: 0;
}

/* --- KRAJ MOBILNOG INTERFEJSA ZA WIZARD --- */