:root{

    --cp-primary:#6b1514;
    --cp-accent:#FFC222;
    --cp-bg:#f8f7f4;
    --cp-white:#ffffff;
    --cp-text:#333333;

}




.cp-wrapper{

    background:var(--cp-bg);
    padding:30px;
    border-radius:24px;
    font-family:Arial, sans-serif;
    color:var(--cp-text);

}






/* =====================
 HEADER
===================== */


.cp-header{


    display:flex;
    align-items:center;
    gap:30px;

    background:#fff;

    padding:28px 35px;

    border-radius:22px;

    margin-bottom:25px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.07);


}



.cp-header-logo{

    width:120px;
    flex-shrink:0;

}



.cp-logo{

    width:100%;
    height:auto;

    filter:
    drop-shadow(
    0 8px 15px rgba(0,0,0,.12)
    );

}




.cp-header-text h1{

    margin:0;

    font-size:34px;

    color:var(--cp-primary);

    letter-spacing:-.5px;

}



.cp-header-text p{

    margin:8px 0;

    font-size:18px;

    font-weight:600;

    color:#444;

}



.cp-header-text span{

    color:#777;

    font-size:14px;

}








/* =====================
 BOXES
===================== */


.cp-box{


    background:white;

    padding:28px;

    border-radius:22px;

    margin-bottom:25px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.045);


    transition:.2s;


}




.cp-box:hover{


    box-shadow:

    0 14px 35px rgba(0,0,0,.07);


}




.cp-box h3{


    color:var(--cp-primary);

    margin-top:0;

    padding-bottom:12px;

    border-bottom:

    2px solid var(--cp-accent);


}









/* INPUTI */


input,
select,
textarea{


    width:100%;

    padding:13px 14px;

    border:

    1px solid #ddd;

    border-radius:10px;

    background:#fff;


    box-sizing:border-box;


    font-size:14px;


}




input:focus,
select:focus,
textarea:focus{


    outline:none;

    border-color:var(--cp-accent);

    box-shadow:

    0 0 0 3px rgba(255,194,34,.15);


}







textarea{

    min-height:150px;

}








/* GRID */


.cp-grid{


    display:grid;

    grid-template-columns:

    repeat(2,1fr);


    gap:16px;


}










/* PROIZVODI */


#cp-pretraga{


    margin-bottom:18px;


}




.cp-table-wrapper{


    max-height:600px;

    overflow:auto;

    border-radius:14px;

    border:

    1px solid #eee;


}




#cp-proizvodi{


    width:100%;

    border-collapse:collapse;


}





#cp-proizvodi thead{


    position:sticky;

    top:0;

    z-index:5;


}




#cp-proizvodi th{


    background:

    var(--cp-primary);


    color:white;

    padding:13px;


    text-align:left;


}





#cp-proizvodi td{


    padding:12px;


    border-bottom:

    1px solid #eee;


}





#cp-proizvodi tr{


    transition:.15s;

}



#cp-proizvodi tr:hover{


    background:#fff9e6;


}




.cp-kg{


    max-width:90px;


}





.cp-total{


    text-align:right;

    font-size:22px;

    margin-top:25px;

    color:var(--cp-primary);


}









/* OBAVEZE */


.cp-obaveza{


    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;


}



.cp-obaveza input[type="checkbox"]{


    width:auto;


}




.cp-obaveza input[type="text"]{


    flex:1;


}




.cp-obrisi{


    background:#a82424;

    width:42px;

    padding:10px;

}









/* DUGMAD */


button{


    background:

    var(--cp-primary);


    color:white;


    border:0;


    padding:13px 24px;


    border-radius:12px;


    cursor:pointer;


    font-weight:bold;


    box-shadow:

    0 6px 18px rgba(107,21,20,.18);


    transition:.2s;


}



button:hover{


    background:

    var(--cp-accent);


    color:

    var(--cp-primary);


    transform:translateY(-1px);


}





.cp-buttons{


    display:flex;

    gap:15px;


}









/* PRINT */


#cp-print{


    display:none;

    background:white;

    padding:40px;

}



.cp-print-header{


    text-align:center;

    border-bottom:

    2px solid var(--cp-primary);

    padding-bottom:20px;

    margin-bottom:25px;


}



.cp-print-header img{


    width:140px;


}



#cp-print table{


    width:100%;

    border-collapse:collapse;


}



#cp-print th{


    background:

    var(--cp-primary);


    color:white;

    padding:10px;


}



#cp-print td{


    padding:10px;

    border-bottom:

    1px solid #ddd;


}









/* PRINT MODE */


@media print{


body *{


    visibility:hidden;


}



#cp-print,
#cp-print *{


    visibility:visible;


}



#cp-print{


    display:block;

    position:absolute;

    top:0;

    left:0;

    width:100%;


}



}



@page{

    size:auto;

    margin:5mm;

}



@media print{


html,
body{

    margin:0!important;
    padding:0!important;
    background:white!important;

}



body *{

    visibility:hidden;

}



#cp-print,
#cp-print *{

    visibility:visible;

}



#cp-print{


    display:block!important;

    position:absolute;

    left:0;

    top:0;


    width:100%!important;


    padding:10px!important;

    margin:0!important;


    box-sizing:border-box;


}





.cp-print-header{


    padding-bottom:10px!important;

    margin-bottom:15px!important;


}



.cp-print-header img{


    width:90px!important;


}



.cp-print-header h1{


    font-size:22px!important;

    margin:8px 0!important;


}



.cp-print-header p{


    margin:4px 0!important;


}



#cp-print h3{


    margin-top:12px!important;

    margin-bottom:8px!important;


}



#cp-print p{


    margin:3px 0!important;


}



#cp-print table{


    margin-top:8px!important;


}



#cp-print th,
#cp-print td{


    padding:6px!important;


}


#cp-print h2{


    margin:10px 0!important;


}



}


/* =========================
   MOBILE OPTIMIZACIJA PLANERA
========================= */


@media(max-width:700px){



/* GLAVNI WRAPPER */

.cp-wrapper{

    padding:15px!important;

}



/* HEADER */

.cp-header{

    flex-direction:column;

    text-align:center;

    padding:25px 20px;

}



.cp-header-logo{

    width:100px;

}



/* UVODNI HERO */

.cp-intro{

    padding:30px 20px!important;

}


.cp-intro h1{

    font-size:30px!important;

}


.cp-intro p{

    font-size:16px!important;

}



.cp-intro-feature{

    padding:12px 14px;

}





/* POLJA FORME */

#cp-datum,
#cp-vreme,
#cp-mesto,
#cp-gosti,
#cp-tip,
#cp-naziv{


    font-size:16px!important;

    min-height:48px;

}



#cp-datum{


    appearance:none;

    -webkit-appearance:none;


    background:#fff;


    border:1px solid #ddd;


    border-radius:12px;


    padding:12px 14px;


}




/* GRID INFORMACIJE */

.cp-grid{

    grid-template-columns:1fr!important;

}





/* =========================
   PROIZVODI - MOBILNA TABELA
========================= */


.cp-table-wrapper{


    overflow-x:auto!important;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    border-radius:14px;


}



#cp-proizvodi{


    min-width:720px!important;

    width:720px;


}



#cp-proizvodi thead{


    display:table-header-group;


}



#cp-proizvodi tbody{


    display:table-row-group;


}



#cp-proizvodi tr{


    display:table-row;


    background:white;


}



#cp-proizvodi th,
#cp-proizvodi td{


    display:table-cell;


    white-space:nowrap;


    padding:12px 10px!important;


    vertical-align:middle;


}



/* checkbox */

#cp-proizvodi th:nth-child(1),
#cp-proizvodi td:nth-child(1){


    width:45px;


    text-align:center;


}





/* naziv */

#cp-proizvodi th:nth-child(2),
#cp-proizvodi td:nth-child(2){


    min-width:240px;


}





/* kg */

#cp-proizvodi th:nth-child(3),
#cp-proizvodi td:nth-child(3){


    width:90px;


}





.cp-kg{


    width:80px!important;


    height:42px;


    font-size:16px!important;


    text-align:center;


}





/* cena */

#cp-proizvodi th:nth-child(4),
#cp-proizvodi td:nth-child(4){


    width:110px;


}





/* ukupno */

#cp-proizvodi th:nth-child(5),
#cp-proizvodi td:nth-child(5){


    width:120px;


}




#cp-proizvodi tbody tr:hover{


    background:#fff9e6;


}





/* PRETRAGA */

#cp-pretraga{


    font-size:16px!important;


    min-height:48px;


}







/* DUGMAD */


.cp-buttons{


    flex-direction:column!important;


    gap:12px;


}



.cp-buttons button{


    width:100%;


    min-height:48px;


}




}