:root{

    --bg:#f4f6f4;
    --card:#ffffff;

    --green-900:#1b4332;
    --green-800:#2d6a4f;
    --green-700:#40916c;
    --green-500:#74c69d;
    --green-100:#d8f3dc;

    --text:#1f2d25;
    --muted:#6c7a70;

    --danger:#c0392b;
    --warning:#e9c46a;
    --info:#2563eb;

    --shadow:0 10px 25px rgba(0,0,0,.08);

}


/* RESET */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


/* BODY */

body{

    font-family:'Poppins',Segoe UI,Arial,sans-serif;

    background:linear-gradient(
        135deg,
        #f7fcf7,
        #e9f7ee
    );

    color:var(--text);

}


/* LINKI */

a{

    color:var(--green-800);

}


/* KARTY */

.card{

    background:var(--card);

    border-radius:16px;

    padding:20px;

    box-shadow:var(--shadow);

    transition:.25s;

}


.card:hover{

    transform:translateY(-3px);

}



/* BUTTON SYSTEM */


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 18px;

    border-radius:10px;

    border:none;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    color:white !important;

}


.btn:hover{

    transform:translateY(-2px);

    opacity:.9;

}


.btn i{

    color:inherit;

}



.btn-success{

    background:var(--green-700);

}



.btn-success:hover{

    background:var(--green-800);

}



.btn-primary{

    background:var(--info);

}



.btn-danger{

    background:var(--danger);

}



.btn-secondary{

    background:#6c757d;

}



.btn-warning{

    background:var(--warning);

    color:#222 !important;

}



/* FORMULARZE */


input,
textarea,
select{

    width:100%;

    padding:12px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;

    background:white;

    outline:none;

    transition:.2s;

}


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

    border-color:var(--green-700);

}



label{

    display:block;

    font-weight:600;

    margin-bottom:8px;

    color:var(--green-900);

}



textarea{

    min-height:180px;

}



/* TABELE */


table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

}



table th{

    background:var(--green-900);

    color:white;

    padding:14px;

    text-align:left;

}



table td{

    padding:12px;

    border-bottom:1px solid #eee;

}



table tr:hover{

    background:#f7fbf8;

}



/* ALERTY */


.success{

    padding:12px;

    background:var(--green-100);

    border-left:5px solid var(--green-700);

    border-radius:8px;

}



.error{

    padding:12px;

    background:#ffe0e0;

    border-left:5px solid var(--danger);

    border-radius:8px;

}



/* TOAST */


.toast{

    position:fixed;

    top:20px;

    right:20px;

    max-width:350px;

    padding:15px 20px;

    border-radius:12px;

    color:white;

    z-index:999999;

    box-shadow:0 8px 25px rgba(0,0,0,.3);

}



.toast-success{

    background:var(--green-700);

}



.toast-error{

    background:var(--danger);

}



/* BADGE */


.badge{

    display:inline-block;

    padding:5px 10px;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

}



.badge-green{

    background:var(--green-700);

    color:white;

}



.badge-danger{

    background:var(--danger);

    color:white;

}



/* DARK MODE */


body.dark{

    background:#1e1e1e;

    color:#eee;

}



body.dark .card{

    background:#2a2a2a;

    color:white;

}



body.dark table{

    background:#2a2a2a;

    color:white;

}



body.dark table td{

    color:white;

}



body.dark input,
body.dark textarea,
body.dark select{

    background:#333;

    color:white;

    border-color:#555;

}



body.dark input::placeholder,
body.dark textarea::placeholder{

    color:#aaa;

}



/* RESPONSIVE */

@media(max-width:900px){

    table{

        display:block;

        overflow-x:auto;

    }

}

.checkbox-label{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:15px;
    cursor:pointer;
    line-height:1.6;
}

.checkbox-label input[type=checkbox]{
    margin-top:4px;
    transform:scale(1.25);
    flex-shrink:0;
}

.checkbox-label span{
    flex:1;
}



.plot-main-image{

width:100%;

height:520px;

object-fit:cover;

border-radius:16px;

box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.plot-thumbs{

display:flex;

gap:10px;

margin-top:15px;

flex-wrap:wrap;

}

.plot-thumb{

width:95px;

height:95px;

object-fit:cover;

border-radius:10px;

cursor:pointer;

transition:.2s;

border:3px solid transparent;

}

.plot-thumb:hover{

transform:scale(1.05);

border-color:var(--primary);

}

.plot-details{

background:#fff;

padding:25px;

border-radius:16px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.plot-details h1{

margin-top:0;

}

.plot-details p{

line-height:1.7;

}

@media(max-width:900px){

.plot-page{

grid-template-columns:1fr;

}

.plot-main-image{

height:320px;

}

}

.plot-thumb.active{

border:3px solid var(--primary);

transform:scale(1.05);

}




.plot-lightbox.active{

display:flex;

}



.plot-lightbox img{

max-width:92%;

max-height:92%;

border-radius:12px;

}



.lightbox-prev{

left:30px;

}



.lightbox-next{

right:30px;

}



.lightbox-close{

position:absolute;

top:20px;

right:30px;

font-size:40px;

color:#fff;

cursor:pointer;

}


.plot-main-image{

width:100%;

height:500px;

object-fit:cover;

border-radius:15px;

cursor:pointer;

}



.plot-thumbs{

display:flex;

gap:12px;

margin-top:15px;

overflow-x:auto;

}



.plot-thumb{

width:90px;

height:70px;

object-fit:cover;

border-radius:10px;

cursor:pointer;

opacity:.7;

}



.plot-thumb.active,

.plot-thumb:hover{


opacity:1;

border:3px solid var(--primary);

}



.plot-details{


background:white;

padding:25px;

border-radius:18px;

}



.plot-lightbox.active{


display:flex;


}



.plot-lightbox img{


max-width:90%;

max-height:90%;


}



.lightbox-close,



.lightbox-close{


top:20px;

right:30px;


}




@media(max-width:900px){


.plot-page{


grid-template-columns:1fr;


}



.plot-main-image{


height:320px;


}


}

.plot-box{

background:white;

padding:20px;

border-radius:15px;

margin-bottom:30px;

}


.slider{

position:relative;

width:100%;

height:420px;

overflow:hidden;

border-radius:15px;

background:#111;

}



.slider img{

width:100%;

height:100%;

object-fit:cover;

border-radius:15px;

cursor:pointer;

transition:transform .25s ease, opacity .25s ease;

}

.slide-change{

opacity:0.4;

transform:scale(0.98);

}


.slider button{


position:absolute;

top:50%;

transform:translateY(-50%);

background:rgba(0,0,0,.5);

color:white;

border:0;

font-size:35px;

padding:10px 20px;

cursor:pointer;

}



#prev{

left:15px;

}


#next{

right:15px;

}



.thumbs{

display:flex;

gap:10px;

margin-top:15px;

overflow-x:auto;

}



.thumb{


width:90px;

height:70px;

object-fit:cover;

border-radius:8px;

cursor:pointer;

opacity:.6;

padding: 3px;

}



.thumb.active{

opacity:1;

border:3px solid #2ecc71;

}



.plot-details{


background:white;

padding:25px;

border-radius:15px;

}



@media(max-width:800px){


.slider{

height:350px;

}



}

.image-modal{

display:none;

position:fixed;

z-index:99999;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.9);

align-items:center;

justify-content:center;

}



.image-modal.active{

display:flex;

}



.image-modal img{

max-width:90%;

max-height:90%;

object-fit:contain;

border-radius:10px;

}



.image-close{

position:absolute;

top:25px;

right:35px;

color:white;

font-size:45px;

cursor:pointer;

}

.modal-arrow{

position:absolute;

top:50%;

transform:translateY(-50%);

background:rgba(0,0,0,.5);

border:0;

color:white;

font-size:45px;

cursor:pointer;

padding:15px 25px;

border-radius:10px;

}


.modal-prev{

left:40px;

}



.modal-next{

right:40px;

}



.modal-arrow:hover{

background:rgba(0,0,0,.8);

}