body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    min-height: 100vb;
    display: flex;
    flex-direction: column;
}

/*---- HEADER ----*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 69px;
    background: #CA2527;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15%;
    transition: transform 0.3s ease;
    z-index: 1000;
}

.header img {
    height: 48px;
}

.header.hide {
    transform: translateY(-100%);
}
#btnProfile{
    text-decoration: none;
    color: black;
    font-size: 20px;
    padding: 15px 50px;
    background-color: #facd48;
    border-radius: 10px;
    font-weight: bold;
    transition: background-color 0.3s ease,
                font-size 0.3s ease;
}
#btnProfile:hover{
    background-color: #F99F00;
}
#btnGaraz,#btnHlS{
    text-decoration: none;
    color: #facd48;
    font-size: 20px;
    padding: 15px 50px;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
#btnGaraz:hover,#btnHlS:hover{
    background: rgba(0,0,0,0.3);
}
#btnHlS{
    color: white;
    padding: 15px 25px;
}

#prihlasenyuzivatel {
    position: fixed;
    text-align: left;
    margin-left: 220px;
    margin-top:0;
    margin-bottom: 0;
    font-size: 20px;
    white-space: nowrap;
}
.header section{
    display: inline-flex;
    align-items: center;
}

/*---- FOOTER ----*/

.footer {
    background: #CA2527;
    color: white;
    display: flex;
    padding: 0 15%;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    font-size: 18px;
}

.footer p {
    margin: 0;
    font-weight: bold;
}
#textL{
    text-align: left;
}
#textR{
    text-align: right;
}

/*---- HOME PAGE ----*/
#div1 {
    margin-top: 69px;
    padding: 20px 20px 0 20px;
    flex: 1;
}

#div1 h1{
    margin: 0 25% 0 25%;
    text-align: center;
}

#paragrafs{
    margin: 10px 25% 0 25%;
    padding: 30px 30px;
    background: #CA2527;
    color: white;
    font-size: 20px;
    border-radius: 25px;
    position: relative;
    z-index: 10;
    text-align: center;
}

#paragrafs a{
    text-decoration: none;
    background: #facd48;
    color: black;
    font-weight: bold;
    padding: 15px 40px;
    border-radius: 30px;
    transition: background-color 0.3s ease;
}
#paragrafs a:hover{
    background: #F99F00;
}
#paragrafs p{
    margin-top: 0;
    text-align: left;
}
#paragraf2 {
    margin-bottom: 50px;
}

/*---- REG & LOG PAGE ----*/

#formik,.formik{
    margin: 10px 35% 0 35%;
    padding: 30px;
    /*background: #CA2527;*/
    background: #3e3e3e;
    color: white;
    font-size: 20px;
    border-radius: 25px;
    position: relative;
    z-index: 11;
    text-align: center;
}

#formik input:not(#btnSubmit),.formik input:not(#btnSubmit){
    width: 60%;
    text-align: center;
    margin-bottom: 20px;
    height: 50px;
    font-size: 100%;
    border-radius: 50px;
    border: none;
}

#formik form,.formik form{
    margin-bottom: 0;
}
#formik p{
    margin-bottom: 0 !important;
}
#btnSubmit,.btnSubmit{
    width: 60%;
    text-align: center;
    margin-bottom: 0;
    height: 50px;
    font-size: 100%;
    border-radius: 50px;
    border: none;
    font-weight: bolder;
    background: #facd48;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#btnSubmit:hover,.btnSubmit:hover{
    background: #F99F00;
}

#spodnitext{
    margin: 35px 35% 0 35%;
    text-align: center;
    background: darkgray;
    border-radius: 25px;
    padding: 10px 30px 30px 30px;
}
.obj1{
    height: 20px;
    width: 20px;
}
#spodnitext a{
    text-decoration: none;
    color: white;
    font-size: 25px;
    background: black;
    padding: 10px 15%;
    border-radius: 50px;
    transition: color 0.3s ease,
                background-color 0.3s ease,
                font-weight 0.3s ease;
}
#spodnitext a:hover{
    color: black;
    background: lightgray;
    font-weight: bold;
}

#regHlaska{
    color: #CA2527;
    margin-top: 30px;
    text-align: center;
    font-size: 25px;
}
#btnResetPassw{
    color: white;
    margin-top: 20px;
    font-size: 18px;
    transition: color 0.3s ease,
                font-size 0.3s ease;
}
#btnResetPassw:hover{
    font-size: 20px;
    color: #CA2527;
    text-decoration: none;
}
#btnOcko,.btnOcko{
    margin: 0 !important;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    border-radius: 100%;
    background: white;
    font-size: 35px;
    text-align: center;
    line-height: 50px;
    display: inline-flex;            /* umožní centrování */
    align-items: center;      /* vertikální centrování */
    justify-content: center;
    transform: translateY(5px); /* nebo -1px podle potřeby */

}


/*---- PROFILE PAGE ----*/

#moznosti, #vysvetleni_moznosti{
    margin: 10px 35% 20px 35%;
    padding: 40px;
    /*background: #CA2527;*/
    background: #3e3e3e;
    font-size: 20px;
    border-radius: 25px;
    position: relative;
    z-index: 11;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(1, 3fr);
}
#vysvetleni_moznosti{
    background-color: transparent !important;
}
.vysvetleni_moznosti {
    /*background: linear-gradient(180deg, #2c2c2c, #1f1f1f);*/
    border-radius: 15px;
    padding: 20px 25px;
    margin-top: 25px;
    max-width: 700px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

#text_vysvetlivka {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: black;
    font-family: "Segoe UI", sans-serif;
    text-align: justify;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.3s ease;
    transform: translateY(10px);
}

#text_vysvetlivka:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}

#text_vysvetlivka strong {
    font-weight: bolder;
}

#moznosti a{
    text-decoration: none;
    text-align: center;
    color: black;
    margin: 20px;
    background: white;
    font-size: 20px;
    font-weight: bold;
    padding: 15px;
    border-radius: 50px;
    transition: background-color 0.3s ease,
                transform 0.3s ease,
                color 0.3s ease;
}
#moznosti a:hover{
    background: dimgray;
    color: white;
    transform: scale(1.05);
}

#btnLogout{
    color: white !important;
    background: #8b2426 !important;
}
#btnLogout:hover{
    background-color: black !important;
    color: #CA2527 !important;
}
#jmenoPrijm{
    text-align: center;
    color: black !important;
}
/*#btnDeleteProfile{
    background: #facd48 !important;
}*/
/*#btnDeleteProfile:hover{
    background: #F99F00 !important;
}*/
#btnKontakty{
    background-color: dimgray !important;
    color: lightgray !important;
}
#btnKontakty:hover{
    background-color: lightgray !important;
    color: dimgray !important;
}

/*---- PROFILE INF PAGE ----*/

#tlacitkaUpravy{
    margin-top: 20px;
    display: flex;
    column-gap: 50px;
    margin-bottom: 0;
    justify-content: center; /* zarovná horizontálně na střed */
    align-items: center;
}
#tlacitkaUpravy input{
    transition: background-color 0.3s ease,
                transform 0.3s ease;
}
#tlacitkaUpravy input:hover{
    transform: scale(1.02);
}

#btnUprava{
    width: 50%;
    text-align: center;
    margin-bottom: 0 !important;
    height: 50px;
    font-size: 100%;
    border-radius: 50px;
    border: none;
    font-weight: bolder;
    background: dimgray;
    color: white;
    cursor: pointer;
}
#btnUprava:hover{
    background: #272727;
}
#tlacitkaUpravy #btnSubmit{
    display: none
}
#zmeny {
    margin: 10px 35% 0 35%;
    padding: 30px;
    font-size: 20px;
    border-radius: 25px;
    position: relative;
    z-index: 11;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(1, 2fr);
}
#zmeny a{
    text-decoration: none;
    color: white;
    background: dimgray;
    margin-bottom: 30px;
    padding: 15px 0;
    border-radius: 30px;
    font-weight: bolder;
    transition: background-color 0.3s ease;
}
#zmeny a:hover{
    background: #272727;
}

/*---- VEHICLES PAGE ----*/

#seznamVoz{
    margin: 10px 25% 0 25%;
    padding: 10px 30px 30px 30px;
    color: white;
    font-size: 20px;
    border-radius: 25px;
    position: relative;
    z-index: 11;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(1, 2fr);
}
#addnew{
    text-decoration: none;
    color: white !important;
    /*background: rgba(202,37,39,0.15);*/
    background: gray;
    /*border: #CA2527 dashed 2px;*/
    padding: 15px 0;
    width: 100%;
    border-radius: 30px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease,
                color 0.3s ease,
                font-weight 0.3s ease;
}
#addnew:hover{
    background: #facd48;
    color: black !important;
    font-weight: bolder;
}

#seznamVoz section{
    color: black;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin: 0 0 20px;
    text-align: center;
    align-items: center;
}
#seznamVoz section h4{
    margin: 0 0 0 30px;
    justify-self: start;
}
#seznamVoz section #zobrazeni{
    justify-self: end;
}

#seznamVoz section #zobrazeni button{
    font-size: 20px;
    border-radius: 30px;
    border: 2px solid gray;
    background-color: lightgray;
    padding: 10px 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease,
                color 0.3s ease;
}
#seznamVoz section #zobrazeni button.active{
    font-size: 20px;
    border-radius: 30px;
    border: 2px solid gray;
    padding: 10px 30px;
    text-align: center;
    cursor: pointer;
    background-color: gray;
    color: white;
}
#seznamVoz section #zobrazeni button:hover{
    background-color: gray;
    color: white;
}

#vehicleList.list{
    display: flex;
    flex-direction: column;
}
#vehicleList.grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 25px;
}

.vozidlo-list{
    text-decoration: none;
    color: white !important;
    /*border: #CA2527 2px solid;*/
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-areas:
            "jedna dva tri"
            "velky velky velky";
    column-gap: 10px;
    font-weight: bold;
    background: #CA2527;
    padding: 15px 0;
    width: 100%;
    border-radius: 30px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease,
                transform 0.3s ease;
    /*box-shadow: 0 1px 4px rgba(0,0,0,1);*/
}
.no-results{
    text-align: center;
    width: 100%;
    color: black;
    background-color: lightgray;
    font-weight: bold;
    font-size: 30px;
    padding: 30px 0;
    border-radius: 30px;
}

.vozidlo-list p{
    margin: 0;
}
.vozidlo-list p:nth-child(4){
    margin-top: 15px;
    grid-area: velky;
}

.vozidlo-list:hover{
    /*
    background: rgba(202,37,39,0.37);
    color: black !important;*/
    background: black;
    transform: scale(1.02);
}
/*-- seznam-grid --*/

.vozidlo-grid{
    text-decoration: none;
    color: white !important;
    /*border: #CA2527 2px solid;*/
    display: grid;
    grid-template-columns: repeat(1,3fr);
    column-gap: 10px;
    font-weight: bold;
    height: 100px;
    background: #CA2527;
    padding: 15px 0;
    width: 100%;
    border-radius: 30px;
    margin-bottom: 20px;
    align-items: center;
    transition: background-color 0.3s ease,
    transform 0.3s ease;
    /*box-shadow: 0 1px 4px rgba(0,0,0,1);*/
}

.vozidlo-grid p{
    margin: 0;
}

.vozidlo-grid:hover{
    /*
    background: rgba(202,37,39,0.37);
    color: black !important;*/
    background: black;
    transform: scale(1.02);
}
/*-- seznam-grid-konec --*/

#searchForm{
    margin-bottom: 20px;
}
#inputSearch{
    height: 50px;
    border-radius: 30px;
    border: black solid 2px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    width: 80%;
}
#submitSearch{
    height: 50px;
    border-radius: 30px;
    border: black 2px solid;
    color: white;
    background: black;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    width: 15%;
    cursor: pointer;
}
#pagination{
    justify-content: center;
    display: flex;
    column-gap: 20px;
}
.dots{
    color: black;
    font-weight: bold;
    font-size: 30px;
}
.page-btn{
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    padding: 10px 20px;
    background-color: darkgray;
    color: white;
    border-radius: 30px;
    width: 45px;
}
.page-btn.active{
    background-color: dimgray;
    font-weight: bolder;
}

/*---- VERIFY PAGE ----*/

#overenikodu {
    margin: 10px 25% 0 25%;
    padding: 30px;
    background: lightgray;
    color: black;
    font-size: 20px;
    border-radius: 25px;
    position: relative;
    z-index: 11;
    text-align: center;
    box-shadow: 0 2px 8px rgb(0,0,0,1);
}
#overenikodu input:not(#btnVerifyCode,#btnHiddenHelp){
    width: 30%;
    text-align: center;
    height: 50px;
    font-size: 100%;
    border-radius: 50px;
    border: 2px solid black;
    margin: 0 !important;
}

#overenikodu input[type=number]::-webkit-outer-spin-button,
#overenikodu input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Skryje šipky ve Firefoxu */
#overenikodu input[type=number] {
    -moz-appearance: textfield;
}

#textKod{
    white-space: pre-line;
}

#btnVerifyCode{
    margin: 20px 0 0 0 !important;
    color: black;
    font-weight: bold;
    width: 30%;
    font-size: 20px;
    height: 50px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    background-color: #facd48;
    background-position: center;
    background-size: 100%;
    vertical-align: middle;
    transition: background-color 0.3s ease;
}
#btnVerifyCode:hover{
    background-color: #F99F00;
}
#btnHiddenHelpm,.btnHiddenHelp{
    margin: 0 !important;
    width: 50px;
    height: 50px;
    border: none;
    background:none;
    color: transparent;
    font-size: 0;
    vertical-align: middle;
    display: unset;
}
#zmeny2 {
    margin: 0 40% 0 40%;
    padding: 30px;
    font-size: 20px;
    border-radius: 25px;
    position: relative;
    z-index: 11;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(1, 2fr);
}
#zmeny2 a{
    text-decoration: none;
    color: white;
    background: dimgray;
    margin-bottom: 30px;
    padding: 15px 0;
    border-radius: 30px;
    font-weight: bolder;
    transition: background-color 0.3s ease;
}
#zmeny2 a:hover{
    background: gray;
}
#btnSendAgain{
    text-decoration: none;
    padding: 10px 20px;
    font-size: 18px;
    color: white;
    background: black;
    border-radius: 50px;
    transition: font-size 0.3s ease;
}
#btnSendAgain:hover{
    font-weight: bold;
    font-size: 20px;
}
.btnSendAgainDisabled{
    cursor: not-allowed !important;
    background-color: dimgray !important;
}
.btnSendAgainDisabled:hover{
    font-size: 18px !important;
    font-weight: normal !important;
}

/*---- VEHICLE INFO PAGE ----*/

#popisVozidlo{
    margin: 20px 30% 0 30%;
    padding: 30px;
    /*background: #CA2527;*/
    background: #3e3e3e;
    color: white;
    font-size: 20px;
    border-radius: 25px;
    position: relative;
    z-index: 11;
    text-align: center;
    height: fit-content;
}
#popisVozidlo form{
    margin-bottom: 0 !important;
}
#popisVozidlo input:not(#btnUprava,#btnSubmit,#btnDelete){
    text-align: center;
    height: 50px;
    font-size: 100%;
    border-radius: 10px;
    border: none;
    margin: 0 0 20px 5%;
    width: 90%;
    align-items: end;
}

#popisVozidlo input:not(#btnUprava,#btnSubmit,#btnDelete):disabled {
    background: lightgray;
}
#popisVozidlo input:not(#btnUprava,#btnSubmit,#btnDelete):disabled::placeholder {
    color: black;
}
#fileUploader {
    align-content: space-around;
}

#popisVozidlo input{
    width: 100%;
}
#popisVozidlo p{
    margin-bottom: 0 !important;
}
#seznamVlastnostiVozidla{
    display:grid;
    grid-template-columns: repeat(2,3fr);
    grid-template-areas:
        "nadpis1 pole1"
        "nadpis2 pole2"
        "nadpis3 pole3"
        "nadpis4 pole4"
        "nadpis5 pole5"
        "nadpis6 pole6"
        "velky velky";
    position: relative;
}
#seznamVlastnostiVozidla label{
    display: inline-block;
    text-align: left;
    margin-left: 50px;
}

#btnDelete{
    width: 60%;
    text-align: center;
    margin-bottom: 0;
    height: 50px;
    font-size: 100%;
    border-radius: 50px;
    border: none;
    font-weight: bolder;
    background: #8b2426;
    cursor: pointer;
    display: none;
    color: white;
    transition: background-color 0.3s ease;
}
#btnDelete:hover {
    background: rgba(255,0,0,0.6);
}

.ukazat{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    height: 10px;
}

#imagePreview {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    padding-right: 15%;
    border: none;
    gap: 10px;
}

#previewImg {
    max-height: 150px;
    max-width: 150px;
    display: none;
    border-radius: 10px;
    cursor: zoom-in;
    transition: transform 0.2s ease;
    grid-area: velky;
}

/* Hover efekt přes celý Grid */
#previewImg.zoomed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;  /* Přebijeme původních 150px */
    max-height: 100%; /* Přebijeme původních 150px */

    object-fit: contain; /* Fotka se nedeformuje */
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 100;
    border-radius: 30px;
    padding: 20px;
    box-sizing: border-box;
}

#removeImgBtn {
    margin-left: 10px;
    display: none;
    background: black;
    color: white;
    border: none;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    width: 30px;
    height: 30px;
    z-index: 101; /* Musí být nad zvětšeným obrázkem */
}


/*-----------------------------------------*/
#dropdown {
    position: relative;
    margin: 20px 30% 20px 30%;
    z-index: 12;
}

/* Tlačítko dropdown */
#dropdown button {
    width: 100%;
    background-color: #CA2527;
    color: white;
    height: 50px;
    padding: 10px 150px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    border-radius: 100px;
    transition: background-color 0.3s ease,
                letter-spacing 0.3s ease;
}

/* Dropdown obsah */
.dropdown-content {
    width: 100%;
    display: none;
    position: relative;
    background-color: #f1f1f1;
    min-width: 160px;
    border-radius: 10px;
    z-index: 1;
    margin-bottom: 20px;
}

/* Odkazy uvnitř dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 18px;
    transition: font-weight 0.3s ease;
}

/* Hover efekt pro odkazy */
.dropdown-content a:hover {
    background-color: #ddd;
    border-radius: 10px;
    font-weight: bold;
}

/* Zobrazení dropdown při hover */
#dropdown:hover .dropdown-content {
    display: block;
}

/* Hover efekt pro tlačítko */
#dropdown:hover button {
    background-color: darkgrey;
    color: black;
    font-weight: bold;
    letter-spacing: 3px;
}