* { box-sizing: border-box; }
html, body {
    height:100%;
    margin:0;
    margin-left:auto;
        margin-right:auto;
}
 
body {
    font-family:'Space Grotesk', sans-serif;
    background:#f8f8f8;
    display:flex;
    flex-direction:column;
}
header {
    background:#b22222; 
    color:white; 
    padding:20px; 
    text-align:center;
}
.bg-dark {
  --bs-bg-opacity: 1;
  background-color: #b22222!important;
}

h1,h2,h3 { font-weight:600; letter-spacing:-0.5px; }
p { font-weight:400; line-height:1.6; }

.main {
    display: flex; 
    max-width: 1400px; 
    margin: 0 auto; /* Centriranje glavnega okvirja */
    gap: 10px; 
    padding: 20px; 
    align-items: flex-start;
    justify-content: center; /* Dodatno centriranje notranjih stolpcev */
    width: 100%; /* Zagotovi, da zavzame ves prostor do 1400px */
}


.sidebar { flex:0 0 200px; font-weight:600; }
.container { flex:1; }
.sidebar-right { flex:0 0 250px; margin-left:10px; }

.sidebar button,
.menu-scroll button{
    width:100%;
    padding:10px !important;
    margin-bottom:10px;
    border:none !important;
    cursor:pointer;
    transition:0.3s;
    font-size:16px;
}

.sidebar button:hover, 
.offcanvas button:hover { 
    background:#b22222; 
    color:white; 
}
.menu-btn{
    width:100%;
    padding:10px;
    margin-bottom:10px;
    border:none;
    background:#eee;
    cursor:pointer;
    transition:0.3s;
    font-size:16px;
    text-align:center;
    color:#000;
}

.menu-btn:hover{
    background:#b22222;
    color:#fff;
}

.menu-btn:focus{
    outline:none;
    box-shadow:none;
}

/* DESKTOP CARD */
.pizza-card {
    background:white; 
    border-radius:10px; 
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    margin-bottom:35px; 
    padding:16px; 
    overflow:hidden; 
    position: relative;
  
    margin-bottom:10px; /* manj prostora */
}

.pizza-card img { 
   position:absolute;
    top:15px;
    right:15px;
    width:auto;
    height:100px;
    object-fit:cover;
    border-radius:12px; 
}


.pizza-card:hover { background:#f9f9f9; }
.pizza-card::after { content:""; display:block; clear:both; }

.pizza-card h5 {
    font-size:20px;
    font-weight:600;
    margin-bottom:6px;
}

.pizza-card strong {
    display:block;
    font-size:18px;
    color:#b22222;
    margin-bottom:8px;
}

.pizza-card p {
    font-size:15px;
    color:#333;
}

.price { 
    font-weight:bold; 
    color:#b22222; 
    font-size:28px; 
    white-space:nowrap; 
}
.pizza-prices div{
    font-weight:400;
    font-size:18px;
    margin-top: 5px;
}
.price-item {
    color: #000;
    font-weight: 600;
    margin-right: 15px;
}

.price-value {
    color: #c11;
    font-weight: 700;
    font-size:18px;
}
.hidden { display:none !important; }

footer { 
    text-align:center; 
  
    background:#333; 
    color:white; 
    margin-top:auto; 
}

.recommended { 
/*    background:#fff8e154; */
    background: #ff98002e;
    border:0px solid #ff9800; 
}
#popup-overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:none;
    z-index:9998;
}

#popup {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:white;
    width:90%;
    max-width:500px;
    border-radius:12px;
    padding:20px;
    display:none;
    z-index:9999;
}
.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 26px;
    font-weight: bold;
    color: #b22222;
    cursor: pointer;
}
.popup-close:hover {
    color: black;
}
.priporocamo-badge {
    position: absolute;
    top: 10px;
    right: 50px;          /* premaknemo desno, da ne prekriva slike */
    background: #ff9800;  /* oranžna barva */
    color: white;
    font-size: 12px;       /* manjša pisava */
    font-weight: bold;
    padding: 4px 8px;      /* manjši padding */
    border-radius: 12px;   /* zaokroženi robovi */
    display: flex;
    align-items: center;
    gap: 4px;              /* prostor med zvezdico in besedilom */
    z-index: 2;
}

/* Če želiš dodati majhno zvezdico 🟊 ob besedilu 
.priporocamo-badge::before {
    content: "⭐";
    font-size: 12px;
}*/

#popup > img {
    display: block;
    height: 250px;
    width: auto;
    margin: 0 auto;
}

.popup-alergeni-icons img {
    width:40px;
    margin-right:6px;
}
/* POPUP – alergeni */
#popup-alergeni img {
    width:auto;       /* večja slika */
    height:30px;      /* ohrani kvadratno obliko */
    object-fit:contain;
    margin-right:10px;
    margin-bottom:5px;
    
}

/* POPUP – cena */
#popup-price {
    font-size:20px;    /* večja velikost */
    color:#b22222;     /* rdeča barva */
    font-weight:bold;
    margin:10px 0;
}

#popup-alergeni strong {
    font-size:12px;   /* manjši font */
   
}
/* Desni stolpec – manjše besedilo */
.sidebar-right {
    font-size:14px;  /* manjši osnovni tekst */
}

.sidebar-right h3 {
    font-size:16px;  /* nekoliko manjši naslovi */
    margin-top:10px;
    margin-bottom:5px;
}

.sidebar-right p {
    font-size:13px;  /* manjši odstavki */
}

.sidebar-right hr {
    margin:8px 0;    /* manjši razmiki med sekcijami */
}

.category-title{
    text-align:center;
    font-size:28px;
    font-weight:700;
    margin-bottom:25px;
    margin-top:10px;
    letter-spacing:1px;
}



/* NOV MINIMAL SISTEM */

.menu-item{
    background:#fff;
    padding:18px;
    margin-bottom:15px;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,0.06);
    transition:0.2s;
}

.menu-item:hover{
    background:#fafafa;
}

.menu-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu-header h5{
    margin:0;
    font-weight:600;
    font-size:18px;
}

.price{
    font-weight:700;
    color:#b22222;
    font-size:18px;
}

.menu-desc{
    margin-top:8px;
    font-size:14px;
    color:#555;
}

.pizza-prices .price-item{
    color:#000;           /* Mala / Srednja / Velika črno */
    font-weight:600;
}

.pizza-prices .price-value{
    color:#b22222;        /* Cena rdeča */
    font-weight:700;
}

.pizza-prices{
    margin-top:10px;
    font-size:16px;
}

.pizza-prices div{
    display:flex;
    justify-content:space-between;
    margin-bottom:3px;
}

.pizza-prices span{
    color:#b22222;
    font-weight:600;
}
  .card-pizza{
         height:140px;
    }

    .card-drink{
        height:120px;
       }

    .card-food{
        padding:18px;
    }
    .card-packaging{
    height:120px;
}

.pizza-prices{
width:120px;
}

.price-row{
display:grid;
grid-template-columns:120px 80px;
align-items:center;
margin:2px 0;
}

.pizza-prices .price-size{
color:#000;
}

.price-value{
color:#d40000;
font-weight:bold;
}
.price-row{
display:grid;
grid-template-columns:120px 80px;
align-items:center;
gap:10px;
margin:2px 0;
}
.popup-price-row{
display:flex;
align-items:center;
font-size:18px;
margin:4px 0;
}

.popup-size{
color:#000;
}

.popup-dots{
flex:1;
border-bottom:1px dotted #999;
margin:0 8px;
}

.popup-price{
color:#d40000;
font-weight:bold;
}
.offcanvas-header{
    background:transparent;
    border-bottom:none;
}
.offcanvas-header h5{
    font-size:18px;
    font-weight:600;
}

/* ========================= */
/* 📱 MOBILE VERSION */
/* ========================= */

/* 📱 FULL WIDTH MOBILE CARD */
@media(max-width:768px){

/* odstrani bootstrap padding */
.main{
    padding:0 !important;   /* to je glavni krivec */
}

.container{
    padding:0 !important;
}

.row{
    margin:0 !important;
}

.col-md-12{
    padding:0 !important;
}

/* kartica čez cel rob */
.pizza-card{
    width:100%;
    margin:0;
    border-radius:0;
   
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.99);
}

/* slika zgoraj desno */
.pizza-card img{
    position:absolute;
    top:15px;
    right:15px;
    width:auto;
    height:60px;
    object-fit:cover;
    border-radius:12px;
}

/* title */
.pizza-card h5{
    font-size:17px;
    margin:0;
}

/* cena */
.pizza-card strong{
    display:block;
    margin-top:10px;
    font-size:15px;
    color:#b22222;
}

/* opis čez celo širino */
.pizza-card p{
    margin-top:10px;
    font-size:14px;
    color:#555;
    padding-right:0;
}
.category-title{
        font-size:20px;
        margin:15px 0;
    }
    .btn {
  font-size: 16px;
  background:#ddd;
}

.pizza-desc{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
     .card-pizza{
     height:130px;
    }

    .card-drink{
       height:90px;
    }

    .card-food{
        height:130px;
    }
     .card-packaging{
        height:90px;
    }
    
    .card-desert{
        height:110px;
    }


}