/* Třída, která modal na začátku úplně schová */
.skryty {
    display: none !important;
}

/* NOVÉ: Překrytí celého webu, které rozmaže pozadí a nepustí kliknutí skrz */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* Tmavá poloprůhledná clona */
    backdrop-filter: blur(8px);     /* TOHLE ROZMAŽE POZADÍ */
    z-index: 9999;                  /* Hodí vrstvu nad úplně všechno */

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hlavní kontejner pro obě oblasti */
.formular-objednavka {
    display: flex;
    /* 📱 Výchozí nastavení pro MOBILY: oblasti budou pod sebou */
    flex-direction: column; 
    gap: 30px; /* Mezera mezi informacemi a formulářem */
    width: 100%;
    max-width: 1100px; /* Maximální šířka na velkém monitoru */
    margin: 40px auto; /* Vycentrování celého bloku na střed stránky */
    padding: 20px;
    box-sizing: border-box;
}

/* Společný styl pro obě vnitřní oblasti */
.oblast-info, .oblast-form {
    width: 100%; /* Na mobilu zaberou plnou šířku */
    box-sizing: border-box;
}

/* Vzhled formulářové oblasti (volitelné, pro pěkný design) */
.oblast-form {
    background: rgba(255, 255, 255, 0.05); /* Jemné zatmavené pozadí */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Nenápadný rámeček */
    padding: 30px;
    border-radius: 8px;
}


/* 💻 PODMÍNKA PRO POČÍTAČE A TABLETY (displeje širší než 768px) */
@media (min-width: 769px) {
    .formular-objednavka {
        /* Přepneme oblasti vedle sebe */
        flex-direction: row; 
        /* Vyrovnáme je tak, aby začínaly nahoře a natahovaly se stejně */
        align-items: flex-start; 
        gap: 50px; /* Větší mezera na počítači */
    }

    /* Levá strana (Informace) zabere 40 % šířky */
    .oblast-info {
        flex: 1; 
    }

    /* Pravá strana (Formulář) zabere 60 % šířky */
    .oblast-form {
        flex: 1; 
    }
}