@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap";
*{
    text-decoration: none;
    box-sizing:border-box;
    margin:0;
    font-family:"Montserrat",sans-serif
}

body{
    
    background-color: #19192a;
    
    background-attachment: fixed;
}
@media (min-width: 1900px){
    body{
        height: 953PX;
    }
}
@media(max-width: 1550px){
    body{
        height: 729PX;
    }
}
.header{
    
    height:68px;
    background:#19192a;
    display:flex;
    justify-content:center
}
.menu-area{
    color: white;
    display:flex;
    justify-content:space-between;
    align-items:center;
   

    background:#19192a;
}
.logo{
    display:block;
    height:55px;
    font-size:2rem;
    font-weight:600
}
.logo img{
    height:100px;
     margin-top: -21px;
}
#checkbox{
    display:none
}
.menu_hamburger{
    position:relative;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    cursor:pointer;
    z-index:99
}
.line{
    position:absolute;
    width:20px
}
.line-main::before,.line-main::after,.line-split::before,.line-split::after{
    content:"";
    position:absolute;
    width:inherit;
    height:2px;
    border-radius:5px;
    background:#fab427;
    transition:transform .5s
}
.line-main::before{
    transform:translateY(-7px)
}
.line-main::after{
    transform:translateY(7px)
}
.line-split::before,.line-split::after{
    width:10.5px;
    transition:transform .5s,opacity .5s
}
.line-split::after{
    transform:translateX(10px)
}
#checkbox:checked~.line-main::before{
    transform:rotate(45deg)
}
#checkbox:checked~.line-main::after{
    transform:rotate(-45deg)
}
#checkbox:checked~.line-split::before{
    transform:translateX(-10px);
    opacity:0
}
#checkbox:checked~.line-split::after{
    transform:translateX(20px);
    opacity:0
}
.container-menu-mobile{
    display:none;
    line-height:46px;
    height:45px;
    cursor:pointer
}
.menu-openner span,.fa-cart-shopping{
    color:#fab427;
    font-size:1.2rem
}
.menu ul{
    display:flex;
    list-style:none
}
.menu ul a{

    text-decoration:none;
    color:inherit;
    margin:5px 10px;
    position:relative;
    padding-bottom:6px;
    display:block;
    font-size:.85rem;
    font-weight:500
}
.menu ul a::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    width:0%;
    height:1px;
    background:#fab427;
    transition:.2s ease-out
}
.menu ul a:hover::after,.menu .active::after{
    left:0%;
    width:100%
}
.home{
    
    
    display:flex;
    justify-content:center;
    
}
.home-area{
    width:1300px;
    display:flex;
    background:#19192a;
    justify-content: center;
}
.left-home{
    display:flex;
    justify-content:center;
    flex-direction:column;
    width:55%
}
.left-area{
   
}
.left-text1{
    font-size:3.5rem;
    font-weight:700;
    color: rgb(202, 202, 202) ;
}
.left-text2{
    font-size:2.5rem;
    font-weight:300;
    color: rgb(202, 202, 202) ;
}
.left-text3{
    margin:25px 0;
    font-size:.9rem;
    font-weight:300;
    color:black
}

.shishy{
    justify-content:center
}
.shishy-area{
    display: flex;
    background: #19192a;
    flex-direction: row-reverse;
    justify-content: center;
}
.left-shishy{
    display: flex;
    margin-bottom: 15px;
    flex-direction: row;
    
}
.left-area{
    
}
.left-text1{
    font-size:3.5rem;
    font-weight:700
}
.left-text2{
    font-size:2.5rem;
    font-weight:300;
    
    
}
.left-text3{
    margin:25px 0;
    font-size:.9rem;
    font-weight:300;
    color:white
}
.button{
    background:#313131;
    width:45%;
    padding:14px 18px;
    border-radius:6px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:all .3s
}
.button:hover{
    background:rgb(138, 138, 138);
    color: black;
    
}
.left-home a{
    
    text-decoration:none;
    color:#fff;
    font-size:1.1rem;
    font-weight:500
}
.fa-arrow-right{
    margin-left:10px;
    font-size:1rem;
    color:#fff
}
.right-home{
    display:flex;
    justify-content:center;
    align-items:center;
    width:50%
}
.right-image{
    width:90%
}
.right-image img{
    filter: drop-shadow(0px 0px 10px black);
    width:100%
}

/* ============================================
   SJEDNOCENÝ FOOTER - Velmi kompaktní design
   ============================================ */
.footer {
    background: linear-gradient(0deg, rgba(25, 25, 42, 0.95) 0%, rgba(25, 25, 42, 0.8) 100%);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 0 10px;
    margin-top: 30px;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.footer-section {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-section.full-width {
    align-items: center;
}

.footer-section.full-width {
    width: 100%;
    flex: 1 1 100%;
    text-align: center;
    margin-bottom: 3px;
}

.footer-section h4 {
    color: var(--accent-color);
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.warning-text {
    font-size: 0.65rem;
    opacity: 0.7;
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
    padding: 0 10px;
}

/* Navigace v footeru */
.footer-nav {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.footer-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    padding: 0;
    line-height: 1.4;
    text-align: left;
    /* Žádný hover efekt na text ve footeru */
}

/* Kontaktní informace */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}

.footer-contact p {
    margin: 1px 0;
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    line-height: 1.4;
    width: 100%;
}

.footer-contact i {
    font-size: 10px;
    margin-right: 5px;
    min-width: 12px;
    flex-shrink: 0;
}

.footer-contact a {
    color: var(--text-secondary);
    text-decoration: none;
    /* Žádný hover efekt na text ve footeru */
}

/* Sociální sítě */
.footer-social {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.footer-social a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    /* Žádný hover efekt na ikony ve footeru */
}

/* Spodní část footeru */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
    margin-top: 10px;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-bottom-left,
.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-bottom-left p {
    font-size: 10px;
    margin: 0;
    line-height: 1.3;
}

.footer-bottom-right a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 10px;
    /* Žádný hover efekt na text ve footeru */
}

.divider {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 6px;
    font-size: 10px;
}

.footer-section.contact {
    text-align: left;
}

.footer-section.contact a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

/* Žádný hover efekt na text ve footeru */

.footer-section.copyright {
    text-align: center;
}

.footer-section.copyright a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    /* Žádný hover efekt na text ve footeru */
}

.divider {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 8px;
}

/* Responzivní design pro footer */
@media (max-width: 768px) {
    .footer {
        padding: 12px 0 8px;
        margin-top: 25px;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 0 1rem;
    }
    
    .footer-section {
        width: 100%;
        min-width: 100%;
    }
    
    .footer-section.full-width {
        margin-bottom: 8px;
    }
    
    .footer-section h4 {
        margin-bottom: 5px;
        font-size: 10px;
    }
    
    .footer-section {
        align-items: center;
    }
    
    .footer-nav {
        align-items: center;
        gap: 3px;
    }
    
    .footer-nav a {
        font-size: 10px;
        text-align: center;
    }
    
    .footer-contact {
        align-items: center;
        gap: 2px;
    }
    
    .footer-contact p {
        justify-content: center;
        margin: 0;
        font-size: 10px;
    }
    
    .footer-contact i {
        font-size: 9px;
        margin-right: 4px;
    }
    
    .footer-social {
        justify-content: center;
        gap: 6px;
    }
    
    .footer-social a {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .footer-bottom {
        padding-top: 8px;
        margin-top: 10px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }
    
    .footer-bottom-left,
    .footer-bottom-right {
        justify-content: center;
        width: 100%;
    }
    
    .footer-section.contact {
        text-align: center;
        align-items: center;
    }
    
    .warning-text {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 10px 0 6px;
        margin-top: 20px;
    }
    
    .footer-content {
        padding: 0 0.8rem;
        gap: 10px;
    }
    
    .footer-section h4 {
        font-size: 9px;
        margin-bottom: 4px;
    }
    
    .footer-nav a,
    .footer-contact p {
        font-size: 9px;
    }
    
    .footer-contact i {
        font-size: 8px;
        margin-right: 3px;
    }
    
    .footer-social a {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    
    .warning-text {
        font-size: 0.55rem;
        line-height: 1.3;
    }
    
    .footer-bottom-left p,
    .footer-bottom-right a {
        font-size: 9px;
    }
    
    .divider {
        margin: 0 4px;
        font-size: 9px;
    }
}

/* Odstranění starých footer stylů */
footer {
    display: flex;
    height: auto;
    font-size: .7rem;
    background: #19192a;
    text-align: center;
    line-height: normal;
    font-weight: 500;
    box-shadow: inset 0px -50px 40px -30px rgb(0 0 0);
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

@media(max-width: 1284px){
    .left-text1{
        font-size:2.7rem
    }
    .left-text2{
        font-size:2.2rem
    }
    .left-text3{
        margin:25px 0;
        font-size:.8rem
    }
    .button{
        width:40%;
        padding:13px 17px
    }
    .left-home a{
        font-size:.9rem
    }
    .fa-arrow-right{
        margin-left:7px;
        font-size:.8rem
    }
}
@media(max-width: 1300px){
    .menu-area,.home-area{
        padding:0 8%
    }
}
@media(max-width: 1010px){
    .button{
        padding:12px 16px
    }
    .left-home a{
        font-size:.8rem
    }
    .fa-arrow-right{
        margin-left:5px;
        font-size:.7rem
    }
}
@media(max-width: 990px){
    .left-text1{
        font-size:2.3rem
    }
    .left-text2{
        font-size:2rem
    }
    .left-text3{
        margin:20px 0;
        font-size:.75rem
    }
}
@media(max-width: 744px){
    .button-shishyindex {
        width: -webkit-fill-available !important;
    }
    .discount-section {
        width: -webkit-fill-available !important;
    }
    .home-area{
        align-items:center;
        flex-direction:column-reverse
    }
    .container-menu-mobile{
        display:flex
    }
    .menu_hamburger{
        display:inline-flex
    }
    .menu{
        position:fixed;
        top:0;
        right:0;
        z-index:98;
        display:flex;
        justify-content:center;
        width:0px;
        height:100vh;
        padding-top:75px;
        background:rgba(255,255,255,.888);
        overflow-x:hidden;
        overflow-y:auto;
        transition:all ease .5s
    }
    .menu ul{
        flex-direction:column;
        padding-right:40px
    }
    .menu li{
        display:block;
        padding:8px;
        text-align:center
    }
    .menu-opened{
        width:200px !important
    }
    .menuMobile-area{
        display:flex;
        z-index:99;
        margin-right:15px
    }
    .left-home{
        align-items:center;
        width:100%
    }
    .left-area{
        
    }
    .left-text1{
        font-size:2rem
    }
    .left-text2{
        font-size:inherit
    }
    .left-text3{
        margin:15px 0;
        font-size:.65rem
    }
    .button{
        width:50%
    }
    .right-home{
        width:100%
    }
    .right-image{
        display:flex;
        justify-content:center;
        max-width:75%
    }
    .right-image img{
        width:75%
    }
}
@media(max-width: 752px){
    .home-area{
        justify-content:flex-end
    }
}
@media(max-width: 580px){
    .right-image{
        display:flex;
        justify-content:center;
        width:100%
    }
    .right-image img{
        width:90%;
        display: none;
    }
    .left-area{
        .left-area {
            width: auto;
            display: flex;
            justify-content: center;
        }
    }
    }
    .left-text3{
        margin:20px 0
    }
    .left-home{
        margin-top:10px
    }

@media(max-width: 450px){
    .right-image img{
        width:185;
    }
    body{
        height:100vh
    }
    footer{
    line-height:100px;
    display: flex;
    font-size: .7rem;
    background: #19192a;
    text-align: center;
    line-height: 12px;
    /* font-weight: 500; */
    box-shadow: inset 0px -50px 40px -30px rgb(0 0 0);
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    }
    footer{
        line-height:100px;
        display: flex;
        font-size: .7rem;
        background: #19192a;
        text-align: center;
        line-height: 12px;
        /* font-weight: 500; */
        box-shadow: inset 0px -50px 40px -30px rgb(0 0 0);
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        }
        footer a {
            margin-left: 0px !important;
            margin-right: 0px !important;
            text-decoration: none;
            color: #999;
        }
        .SHISHY img{
            width: 50%;
            height: auto;
            object-fit: contain;
            aspect-ratio: 1/1;
            max-width: 300px;
            margin: 0 auto;
            display: block;
        } 
        .button-shishyindex {
            
            width: -webkit-fill-available !important;
           
        }
        .discount-section {
            
            width: -webkit-fill-available !important;   
            ;
        }
}
@media(max-width: 380px){
    body{
        height:100%
    }
    .left-text1{
        font-size:25px
    }
    .button{
        width:60%
    }
    
}
 
.button-shishy{
    background: rgba(250, 180, 39, 0.1);
    border: 2px solid #fab427;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 30%;
    padding: 10px;
    color: white;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;

    
}
.button-shishyindex{
    margin: auto;
    border: 2px solid white;
    border-radius:6px;
    text-align: center;
    cursor:pointer;
    transition:all .3s;
    background-color: #19192a;
    width: 50%;
    padding:15px;
    color: white;
    
}
#discount-section input{
    background: #2b2b35;
    border: #00000000;
    color: white;
}
#contact-form select{
    background: #2b2b35;
    border: #00000000;
    color: white;
}
.discount-section{
    background: #2b2b35;
    margin-top: 10px;
    border: 2px solid white;
    border-radius:6px;
    text-align: center;
    cursor:pointer;
    transition:all .3s;
    background-color: #19192a;
    width: 50%;
    padding:15px;
    color: white;
}

/* Styly pro slevový kód */
.discount-section label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--text-color);
}

.discount-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.discount-input-group input {
    flex: 1;
    background: #2b2b35;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 10px;
    color: white;
    font-size: 14px;
}

.discount-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.discount-input-group button {
    background: var(--accent-color);
    color: var(--primary-color);
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.discount-input-group button:hover {
    background: #e6a020;
    transform: translateY(-1px);
}

#discount-message {
    margin-top: 8px;
    font-size: 14px;
    min-height: 20px;
}

#discount-message.success {
    color: #4CAF50;
}

#discount-message.error {
    color: #f44336;
}

#discount-message.warning {
    color: #ff9800;
}

#discount-message.info {
    color: #2196F3;
}
.button-shishy:hover{
    border:2px solid  white;
    box-shadow: 0 0px 20px lightslategray;
    text-decoration: none;
    padding: 10px;
}
.button-shishyindex:hover{
    border:2px solid  white;
    box-shadow: 0 0px 20px lightslategray;
    text-decoration: none;
}
.button-shishy a i{
    text-decoration: none;
}
.center-shishy{
    text-decoration: none;
}

@media(min-width: 1800px){
    .shishy{
        padding-top: 50px;
        
    }
    fieldset{
        padding-bottom: 80px;
    }
}



.flavor{
    color: white;
    background-color: #19192a;
    width: max-content;
    border-collapse: collapse;
        border-radius: 30px;
        border-style: hidden; /* hide standard table (collapsed) border */
        box-shadow: 0px 0px 20px #00000087;
    padding: 20px;
    max-width: 1126px;   
}
@media(max-width: 1300px){
    .flavor{
        max-width: 900px;
    }
}
@media (max-width:800px){
    .flavor{
        max-width: 400px;
    }
}

a{
    font-size: 15px;
  
}

@media (max-width:1000px){
    .flavor{
        max-width: 818px;
    }
}
@media (max-width:800px){
    .flavor{
        max-width: 400px;
    }
}
.flavorsize a{
    font-size:  12px;
}
.flavorsize{
    border-radius: 15%;
    color: black;
    background-color: #19192a;
    border: 5px solid #19192a;
    color: white;
    padding-top: 25px;
    display: flex;
    justify-content: center;
}
.snacks img{
    
    height: 120px;
    padding: 8px 0px 8px 0px;

}
.name img{
    border: 3px solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    height: 115px;
    cursor: pointer;

}
.name img.selected{
    border: 3px solid green;
}
img:hover{
 
    border-color: whitesmoke ;
    transition: .2s ease-out ;

}
img.selected {
    border-color: green !important;
}

h1{
    text-align: center !important;
}
h2{
    text-align: center;
}
h3{
    font-size: 15px;
    text-align: center;
}
h4{
    text-align: center;
}
h5{
    text-align: center;
    font-size: 22px;
}
.name{
    width: 145px;
    text-align: center;
    align-items: center;
}
.time{
    
    
    padding: 8px;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    width: 1084.8px;
    justify-content: center;
    
}
@media (max-width:1300px){
    .time{
        max-width: 860px;
    }
}
@media (max-width:1000px){
    .time{
        max-width: 780px;
    }
}
@media (max-width:800px){
    .time{
        max-width: 360px;
    }
}
.timebox{
    border: 3px solid rgba(255, 255, 255, 0.211);
   
    padding: 8px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
   
    cursor: pointer;
    box-shadow: 0 0px 6px lightslategray;
}
.timebox:hover{
    border: 3px solid whitesmoke;
    transition: .2s ease-out;
}
.timebox a{
    font-size: 15px;
    
}
.timebox.selected {
    border-color: GREEN;
    
}
.timebox h1,h2{
    color: whitesmoke;
}

.snacks{
    
    height: auto;
    
    display: flex;
    align-items: center;
    flex-direction: row;
    
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width:1000px){
    .snacks{
        width: auto;
    }
}
.snacksbox{
    border: 3px solid rgba(255, 255, 255, 0.211);
   width: 100px;
    height: 80px;
    padding: 8px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 50px;
    margin-right: 50px;
    
}
.snacks img{
    cursor: pointer;
}
.snacksbox img{
    cursor: pointer;
}
.snacksbox:hover{
    border: 3px solid whitesmoke;
    transition: .2s ease-out;
}
.snacksbox a{
    color: pink;
}
.snacksbox.selected {
    border-color: green;
    
}
.snacksbox h1,h2{
    color: whitesmoke;
}
.tabulka {
    padding: 5px;
    width: 270px;
    height: 100px;
    border-radius: 5px;
    box-shadow: 0px 0 6px #000000;
    background-color: #19192a;
    cursor: pointer;
    margin: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tabulka:hover{

    transition: ease 0.2s;
    box-shadow: 0px 0px 3px 2px #8b8b8b;
}
.tabulka a {
    width: 80px;
}
.tabulka img{
    height: 100px;
}

.cena
.cena a{
    display: flex !important;
    padding-top: 111px;
    width: 41px;
}
.cenaukazatel{
    border: 2px solid #fab427;
    padding: 7px 0px 9px 15px;
    border-radius: 5px 5px 5px 20px;
    margin-bottom: 30px;
}
.tabulka.selected{
    border: 2px solid #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}
    

.flavor form{

    text-align: center;
}
.velkepodminky{
    text-align: center;
    
}
.dolnifooter{
    color: pink !important;
}
@media (max-width: 380px) {
    body {
        max-width: 100%;
        overflow-x: hidden;
      }
    .tabulka:hover {
            width: 150px;
            height: 70px;
        transition: ease 0.2s;
        box-shadow: 0px 0px 3px 2px green;
    }
    .name img {
        border: 3px solid rgba(0, 0, 0, 0);
        border-radius: 50%;
        height: 100px;
        cursor: pointer;
    }
    .name {
        width: 100px;
        text-align: center;
        display: inline-block;
        align-items: center;
    }
  
    .flavor {
        max-width: 360px;
    }
    .flavor.konecna{
        width: auto;
    }
    .left-shishy {
        display: block;
        margin-bottom: 15px;
        flex-direction: row;
    }
    
    .time {
        max-width: 320px;
    }
    .timebox{
        margin-left: 10px;
    margin-right: 10px;
    }
    .tabulka{
        width: 150px;
        height: 70px;
    }
    .tabulka img {
        height: 70px;
    }
    .tabulka a{
        font-size: 10px !important;
    }
    .cenaukazatel{
        padding: 0px 5px 2px 7px;
        border-radius: 5px 5px 5px 13px;
        margin-bottom:22px;
    }
    .snacks{
        height: 100px;
    }
    .cena a {
        text-align: center;
        font-size: 9px !important;
    }
    #contact-form {
        width: 294px !important;
        -moz-border-radius: 15px;
        border-radius: 15px;
        position: relative;
    }
    #contact-form input, #contact-form select, #contact-form textarea {
        background: #2b2b35;
        width: 300px !important;
        border: 1px solid #00000000;
        margin-bottom: 20px;
        padding: 4px;
        border-radius: 3px;
        color: white;
    }
}
@media (max-width: 500px){
    
        .flavorsize {
            flex-wrap: wrap;
            display: flex;
            justify-content: center;
        }
        .name {
            width: 115px;
            text-align: center;
            display: inline-block;
            align-items: center;
        }
        
            .time {
                max-width: fit-content;

            }
            .timebox {
                
                margin-left: 10px;
                margin-right: 10px;
            }
            .snacks {
                height: auto;
                flex-wrap: wrap;
            }
            .tabulka {
                width: 150px;
                height: 70px;
            }
            .tabulka img {
                height: 70px;
            
            }
            .tabulka a{
                font-size: 9px !important;
            }
            .cenaukazatel {
                padding: 0px 5px 2px 7px;
                border-radius: 5px 5px 5px 13px;
                margin-bottom: 0px;
            }
            .tabulka:hover {
                width: 150px;
                height: 70px;
                transition: ease 0.2s;
                box-shadow: 0px 0px 3px 2px #fab427;

            }
            h1 {
                text-align: center !important;
                font-weight: 100;
            }
        }



@media (max-width: 430px){
    
    .flavorsize{
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
    }
    .name {
        width: 115px;
        text-align: center;
        display: inline-block;
        align-items: center;
    }
}
@media (max-width: 391px) {

    .item-quantity {
        border: 2px solid #fab427 !important;
        padding: 5px 6px 1px 5px !important;
        border-radius: 5px 5px 5px 5px !important;
        margin-bottom: 0px !important;
        color: #fab427 !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    .name img {
        border: 3px solid rgba(0, 0, 0, 0);
        border-radius: 50%;
        height: 95px;
        cursor: pointer;
    }
    .name {
        width: 100px;
        text-align: center;
        display: inline-block;
        align-items: center;
    }

    .flavorsize {
        width: auto;
        flex-wrap: wrap
    }
    
    .flavor {
        max-width: 360px;
        
        flex-direction: row;
        align-content: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .flavor.konecna{
        width: auto;
    }
    .left-shishy {
        display: block;
        margin-bottom: 15px;
        flex-direction: row;
    }
    
    .time {
        max-width: 320px;
    }
    .timebox{
        margin-left: 10px;
    margin-right: 10px;
    }
    .tabulka{
        width: 150px;
        height: 70px;
    }
    .tabulka img {
        height: 70px;
    }
    .tabulka a{
        font-size: 11px !important;
    }
    .cenaukazatel{
        padding: 0px 5px 2px 7px;
        border-radius: 5px 5px 5px 13px;
        margin-bottom: 15px;
    }
    .snacks{
        flex-wrap: nowrap;
        height: auto;
    }
    .cena a {
        text-align: center;
        font-size: 15px !important;
    }
    #contact-form {
        width: 294px !important;
        -moz-border-radius: 15px;
        border-radius: 15px;
        position: relative;
    }
    #contact-form input, #contact-form select, #contact-form textarea {
        background: #2b2b35;
        width: 300px !important;
        border: 1px solid #00000000;
        margin-bottom: 20px;
        padding: 4px;
        border-radius: 3px;
        color: white;
    }
    .footer{
        max-width: 375px;
    }
    .tabulka.mala{
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-end;
        align-items: center;
    }
    .tabulka.velka{
        display: none !important;
    }
    .SHISHY .name img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        aspect-ratio: 1/1 !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        display: block !important;
        border: 3px solid rgba(0, 128, 0, 0);
        border-radius: 5%;
        cursor: pointer;
        margin-top: 20px;
    } 
}
.tabulka.mala{
   display: none; 
}
.TESTTABULKA{
    border: 1px solid green;
}

.flavor-table {
    position: fixed;
    top: 0px;
    right: -400px;
    width: 315px;
    background-color: #19192a;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: white;
    border-collapse: collapse;
    border-radius: 10px;
    border-style: hidden;
    box-shadow: 0px 0px 20px #00000087;
    padding: 20px;
    transition: right 0.3s ease;
    z-index: 1000;
}

.flavor-table-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
    flex-wrap: nowrap;
    flex-direction: row;
}

.back-button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 20px;
    padding: 5px;
    transition: transform 0.2s ease;
}

.back-button:hover {
    transform: translateX(-3px);
}

.flavor-table.show {
    /* right: 15px; */
    text-align: center;
    right: 15px;
    transition: right 0.5s ease;
}

/* Initial state for flavor (no shift) */
.flavor {
    transition: transform 0.3s ease;
}

/* Shift the flavor div 300px to the left */
.flavor.shift-left {
    transform: translateX(-148px);
}

/* Vypneme shift efekt pro mobilní zařízení */
@media screen and (max-width: 768px) {
    footer{
        display: flex;
        height: 100px;
        font-size: .65rem;
        background: #19192a;
        text-align: center;
        line-height: 15px;
        font-weight: 500;
        box-shadow: inset 0px -50px 40px -30px rgb(0 0 0);
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .footer1 {
        margin: auto;
    }
    .footer2 {
        margin: auto;
    }
    .flavor {
        transition: none;
    }
    
    .flavor.shift-left {
        transform: none;
    }
}

.flavor-table h2 {
    margin-bottom: 20px;
}
.flavor-table .flavor-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.flavor-table .total {
    margin-top: 20px;
    font-weight: bold;
}
.selectedTime{
    padding-top: 20px;
}
.selected img{
    border: 2px solid #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}
.name.shisha1.selected img{
    border: none !important;
    background-color: rgb(76 175 80 / 0%) !important;
}
.name.shisha2.selected img{
    border: none !important;
    background-color: rgb(76 175 80 / 0%) !important;
}
.tabulka.selected img{
    border: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
}

.SHISHY{
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    margin-top: 20px;
}
.SHISHY .name img{
        border: 3px solid rgba(0, 128, 0, 0);
        border-radius: 5%;
        height: 260px;
        cursor: pointer;
}
.SHISHY img:hover{
    border-color: whitesmoke ;
    transition: .2s ease-out ;
}
.SHISHY .name{
    width: auto;
}
.name.shisha1{
    width: -webkit-fill-available;
}
.name.shisha2{
    width: -webkit-fill-available;
}
.name.shisha1.selected{
    border: 2px solid #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}
.name.shisha2.selected{
    border: 2px solid #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}
/* Otazník vedle položky flavor */
.info-icon {
    margin-block: auto;
    display: inline-block;
    margin-left: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #fab427;
    cursor: pointer;
    border: 1px solid #fab427;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
  }
  .info-icon.test{
    color: PINK;
    margin-top: 590px;
    margin-right: 40px;
  }
  
  .info-icon:hover {
    background: #fab427;
    color: #fff;
  }
  
  /* Rozmazané pozadí a středové okno */
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: none; /* Skryté ve výchozím stavu */
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  /* Původní moderní pop-up design */
  .popup {
    background: linear-gradient(135deg, #19192a 0%, #252542 100%);
    border: 2px solid #fab427;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(250, 180, 39, 0.3);
    max-width: 1100px;
    width: 95%;
    text-align: left;
    animation: slideUp 0.4s ease;
    overflow: hidden;
    position: relative;
    color: #ffffff;
    display: flex;
    flex-direction: column;
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Header pop-upu - původní styl */
  .popup h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #fab427;
    background: rgba(250, 180, 39, 0.1);
    padding: 30px 40px;
    border-radius: 20px 20px 0 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(250, 180, 39, 0.3);
  }

  /* Hlavní obsah - obrázek vlevo, text vpravo */
  .popup-main-content {
    display: flex;
    padding: 30px;
    gap: 30px;
    align-items: flex-start;
  }

  /* Levá strana - jen obrázek bez rámečku */
  .popup-left {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Obrázek v pop-upu - bez rámečku */
  .popup img {
    width: 220px;
    height: 220px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  }

  .popup img:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 20px 40px rgba(250, 180, 39, 0.3);
  }

  /* Pravá strana - text */
  .popup-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .popup p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-align: justify;
  }

  /* Tabulka dolů - samostatná sekce */
  .popup-table-section {
    padding: 0 40px 20px 40px;
  }

  /* Moderní tabulka parametrů - původní styl */
  .popup table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }

  .popup table thead {
    background: linear-gradient(135deg, #fab427 0%, #f39c12 100%);
  }

  .popup table th {
    padding: 20px 25px;
    color: #19192a;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .popup table th:first-child {
    text-align: left;
    width: 40%;
  }

  .popup table th:last-child {
    text-align: right;
    width: 60%;
  }

  .popup table tbody tr {
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .popup table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.05);
  }

  .popup table tbody tr:hover {
    background: rgba(250, 180, 39, 0.1);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(250, 180, 39, 0.2);
  }

  .popup table td {
    padding: 18px 25px;
    font-size: 15px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
  }

  .popup table td:first-child {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
    text-transform: capitalize;
  }

  .popup table td:last-child {
    color: #fab427;
    font-weight: 700;
    text-align: right;
    font-size: 16px;
  }
  
  
  /* Footer s tlačítkem - původní styl */
  .popup-footer {
    padding: 30px 40px;
    background: rgba(250, 180, 39, 0.1);
    border-top: 1px solid rgba(250, 180, 39, 0.3);
    display: flex;
    justify-content: center;
  }

  .popup .close-btn {
    background: linear-gradient(135deg, #fab427 0%, #f39c12 100%);
    color: #19192a;
    border: none;
    padding: 15px 40px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(250, 180, 39, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 150px;
    position: relative;
    overflow: hidden;
  }

  .popup .close-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shine 2s infinite;
  }

  @keyframes shine {
    to {
        left: 100%;
    }
  }
  
  .popup .close-btn:hover {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(250, 180, 39, 0.6);
  }

  .popup .close-btn:active {
    transform: translateY(-1px);
  }

  /* Responsivní design pro mobil */
  @media (max-width: 768px) {
    .popup {
      max-width: 95%;
      margin: 10px auto;
    }

    .popup h2 {
      padding: 20px 25px;
      font-size: 20px;
    }

    .popup-main-content {
      flex-direction: column;
      padding: 25px;
      gap: 20px;
      align-items: center;
    }

    .popup-left {
      flex: none;
      width: 100%;
      text-align: center;
    }

    .popup img {
      width: 180px;
      height: 180px;
    }

    .popup-right {
      width: 100%;
      padding-left: 0;
    }

    .popup p {
      text-align: center;
      font-size: 15px;
    }

    .popup-table-section {
      padding: 0 25px 20px 25px;
    }

    .popup table th {
      padding: 12px 15px;
      font-size: 14px;
    }

    .popup table td {
      padding: 10px 15px;
      font-size: 14px;
    }

    .popup-footer {
      padding: 20px 25px;
    }

    .popup .close-btn {
      padding: 10px 25px;
      font-size: 14px;
    }
  }

  @media (max-width: 480px) {
    .popup {
      max-width: 98%;
      margin: 5px auto;
    }

    .popup h2 {
      font-size: 18px;
      padding: 15px 20px;
    }

    .popup-main-content {
      padding: 20px;
      gap: 15px;
    }

    .popup img {
      width: 150px;
      height: 150px;
    }

    .popup p {
      font-size: 14px;
    }

    .popup-table-section {
      padding: 0 20px 15px 20px;
    }

    .popup table th {
      padding: 10px 12px;
      font-size: 13px;
    }

    .popup table td {
      padding: 8px 12px;
      font-size: 13px;
    }

    .popup-footer {
      padding: 15px 20px;
    }

    .popup .close-btn {
      padding: 8px 20px;
      font-size: 13px;
      min-width: 100px;
    }
  }
  
  button[type="submit"] {
    
        border: 2px solid white;
        border-radius:6px;
        text-align: center;
        cursor:pointer;
        transition:all .3s;
        background-color: rgba(255, 255, 255, 0);
        color: white;
        padding: 10px;
        margin: auto;
        width: 220px;
  }
  button[type="submit"]:hover{
        border:2px solid  rgb(255, 251, 0);
        box-shadow: 0 0px 20px lightslategray;
        text-decoration: none;
    }
    
    .infotext{
        display: flex;
        justify-content: center;
    }
    .infotext.test{

    }
    #editable-container {
        display: inline-block;
        margin: 10px;
    }
    
    #edit-button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
    
    input {
        padding: 8px;
        font-size: 16px;
    }
    
 

/* Mobilní košík */
.mobile-cart-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #19192a;
    color: white;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border: none;
    transition: transform 0.3s, background-color 0.3s;
    flex-direction: column;
    padding: 5px;
}

.mobile-cart-toggle:hover {
    transform: scale(1.05);
    background-color: #fab427;
}

.mobile-cart-toggle i {
    font-size: 24px;
    margin-bottom: 2px;
}

.mobile-cart-price {
    font-size: 12px;
    font-weight: bold;
    color: #fab427;
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .mobile-cart-toggle {
        display: flex;
    }
    
    .flavor-table {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        padding: 20px;
        margin: 0;
        background: #19192a;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        display: none;
    }
    
    .flavor-table.show {
        transform: translateY(0);
        display: block;
    }
}

/* Odstranění duplicitních stylů */
.mobile-cart-bar {
    display: none;
}

/* Styly pro tlačítka donášky */
.delivery-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.delivery-option {
    flex: 1;
    padding: 15px;
    background: var(--input-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.delivery-option:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.delivery-option.selected {
    border-color: var(--accent-color);
    background: rgba(250, 180, 39, 0.1);
    box-shadow: 0 0 15px rgba(250, 180, 39, 0.2);
}

.delivery-name {
    font-weight: 600;
    font-size: 16px;
}

.delivery-price {
    font-size: 14px;
    color: var(--accent-color);
}

@media (max-width: 480px) {
    .delivery-buttons {
        flex-direction: column;
    }
    
    .delivery-option {
        width: 100%;
    }
}

.product-table {
  display: flex;
  gap: 20px;
  background: #18192a;
  padding: 20px;
}

.product-card {
    display: inline-block;
    background: #181828;
    color: #fff;
    border-radius: 10px;
    
    padding: 15px;
    width: auto;
    position: relative;
    cursor: pointer;
    box-shadow: 0 2px 8px #0002;
    transition: box-shadow 0.2s;
}
.product-card:hover {
    box-shadow: 0 4px 16px #0004;
}
.product-info {
    margin-top: 10px;
}
.product-name {
    display: block;
    font-size: 1.1em;
    margin-bottom: 10px;
}
.product-price {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
}
.product-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #181828;
    border: 2px solid #ffb84c;
    color: #ffb84c;
    border-radius: 10px;
    padding: 2px 16px;
    font-size: 1.2em;
    font-weight: bold;
} 
.infotabaky{
    margin-bottom: 20px;
}