body {

    font-family: Arial, sans-serif;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    padding: 0;
    background-color: #f2f4f9;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

form {
    margin-bottom: 20px;
}

label {
    font-weight: bold;
    display: flex; 
    margin-bottom: 5px; /* space between label and input */
}

/*
MAIN PAGE
==========
*/
input {
    width: 80%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="checkbox"] {
  width: auto; /* Zajistí, že checkbox nebude roztahován na 80% šířky */
  padding: 0; /* Nastaví padding na 0, aby se to neaplikovalo na checkbox */
  margin: 0; /* Nebude mít žádný margin kolem checkboxu */
  border: none; /* Odstraní border, pokud je potřeba */
  height: auto; /* Ujistí se, že výška bude přirozená */
  min-width: 20px; /* Nastaví minimální šířku pro checkbox */
}

button {
    padding: 10px 20px;
    background-color: darkblue;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: lightblue;
    color: black;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 5px 0;
    font-size: 18px;
}


/*
 DOMAINS OUTPUT
================== 
*/
.columns {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* mobil breaking */
}

/*
.columns > div {
    flex: 1 1 300px;
}
*/

.columns > div {
    flex: 1; /* both columns the same width */
    min-width: 0; /* for flex correct working */
}


ul {
    list-style: none; /* remove default bullet */
    padding: 0;
}

li {
    display: flex;
    margin-bottom: 5px;
    align-items: center; /* Align menu items vertically */
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

/* state colors */
.free .dot {
    background-color: blue;
}

.registered .dot {
    background-color: red;
}

/* Mobil breakpoint */
@media (max-width: 600px) {
    .columns {
        flex-direction: column;
        gap: 20px;
    }
}

/* 
MAIN MENU  
==========
*/
header {
    display: flex;
    justify-content: space-between; /* Space between logo and menu */
    align-items: center; /* Vertically align items */
    padding: 2px;
    }

.top-menu {
    display: flex;
    justify-content: flex-end; /* right align */
    gap: 10px;
    padding: 5px 2px; /* up/down, left/right */
    }

/* Logo styling */
.logo img {
    max-height: 150px; 
    object-fit: contain; /* Prevent image stretching */
    }

nav {
    display: flex;
    align-items: center; /* Align menu items vertically */
    }

.menu-item {    /* lichobeznik-menu */
    color: white;
    text-decoration: none;
    padding: 10px 25px;
    background: blue; 
    font-weight: 500;
    clip-path: polygon(
        10% 0%,   /* levý horní */
        90% 0%,   /* pravý horní */
        100% 100%, /* pravý dolní */
        0% 100%   /* levý dolní */
    );
    transition: 0.3s ease;
    }

.menu-item:hover {
    background: lightblue; 
    color: white;
}

/* Mobil responsibility */
@media (max-width: 768px) {
    .top-menu {
        flex-direction: column;
        align-items: flex-end; /* always right */
        gap: 10px;
    }

    .menu-item {
        text-align: center;
    }
}

.custom-letter-link {
    float: right;          
    text-decoration: none;   
    color: darkblue;          
    background-color: lightblue;
    padding: 5px;           
}

.custom-letter-link:hover {
    color: white;          
    background-color: darkblue; 
}

.error-box {
    background-color: #ffe6e6;
    color: #cc0000;
    border: 1px solid #cc0000;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 6px;
    font-weight: bold;
}


.token-form {
    background: #fff;
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.token-form h3 {
    text-align: left;
    color: darkblue;
}

.token-form label {
    display: block;
    font-size: 1rem;
    margin-bottom: 5px;
}

.token-form input[type="text"], 
.token-form input[type="password"] {
    width: 100%;
    max-width: 30ch;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.token-form input[type="submit"] {
    width: 100%;
    background: darkblue;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

.token-form input[type="submit"]:hover {
    background: lightblue;
    color: black;
}

.token-output {
    background: darkblue;
    color: white;
    padding: 12px;
}

/* Kontejner pro všechny balíčky */
#prefix-packages {
  display: flex;
  flex-wrap: wrap;      /* balíčky se zalamují, pokud se nevejdou */
  gap: 16px;            /* mezera mezi balíčky */
}

/* Jeden balíček (common, male, …) */
.package {
  min-width: 220px;     /* minimální šířka balíčku */
  max-width: 320px;     /* maximální šířka balíčku */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
}

/* Nadpis balíčku a jeho hlavní checkbox */
.package > label {
  display: flex !important;
  /*align-items: center; */
  gap: 6px;
  font-size: 0.85rem !important;
  margin-bottom: 8px;
}

/* Kontejner prefixů uvnitř balíčku */
.prefixes {
  display: flex !important;        /* flex konteiner */
  flex-wrap: wrap;      /* zalomení, pokud se nevejdou */
  gap: 6px 10px;        /* mezera mezi prefixy: řádky a sloupce */
}

/* Jednotlivé prefixy */
#prefix-packages .prefixes > label {
    display: inline-flex !important;  /* checkbox a text vedle sebe */
    align-items: center;
    gap: 4px;
    white-space: nowrap;  /* zabrání zalomení uvnitř labelu */
    font-size: 0.9rem;
    margin-bottom: 4px;
    cursor: pointer;
}

/* Volitelné: vizuální efekt při hover nad prefixem */
.prefixes > label:hover {
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 2px 4px;
}

#loader-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 250px;
  z-index: 9999;
}

.loader {
  border: 4px solid #eee;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

#progress-bar {
  width: 100%;
  height: 6px;
  background: #eee;
}

#progress {
  width: 0%;
  height: 100%;
  background: #3b82f6;
  transition: width 0.3s;
}
}





#basket-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

#basket-wrapper.basket-expanded .basket-content {
    max-height: 500px; /* Maximální výška pro rozbalený košík */
    overflow-y: auto; /* Povolený scroll, pokud je položek víc */
    transition: max-height 0.3s ease;
}

#basket-wrapper.basket-collapsed .basket-content {
    max-height: 0; /* Košík je skrytý */
    overflow: hidden;
}

/* Tlačítko pro přepínání stavu košíku (kliknutí na něj) */
#basket-toggle {
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

/* Dropdown pro položky košíku */
#basket-dropdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



//#basket-wrapper {
//    position: fixed;
//    top: 20px;   /* Výška od horního okraje */
//    right: 20px; /* Odstup od pravého okraje */
//    width: 280px;  /* Šířka košíku */
//    max-width: 100%; /* Maximální šířka košíku */
//    z-index: 1000;
//    cursor: pointer;
//    background-color: #f9f9f9;
//    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
//    padding: 10px;
//}
//
//#basket-wrapper.basket-expanded .basket-content {
//    max-height: 500px; /* Maximální výška pro rozbalený košík */
//    overflow-y: auto; /* Povolený scroll, pokud je položek víc */
//    transition: max-height 0.3s ease;
//}
//
//#basket-wrapper.basket-collapsed .basket-content {
//    max-height: 0; /* Košík je skrytý */
//    overflow: hidden;
//}

#basket-toggle {
    font-weight: bold;
    display: block;
    text-align: center;
    margin-bottom: 10px;
    cursor: pointer;
}

#basket-dropdown {
    list-style: none;
    padding: 0;
    margin: 0;
}

#basket-dropdown li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 5px;
    margin-bottom: 5px;
    background: #fff;
    border: 1px solid #e0e0e0;
}

#basket-dropdown li:hover {
    background: #e6f7ff;
}



#basket-dropdown li button.remove-btn {
    background: none;  /* Zruší pozadí */
    border: none;  /* Zruší ohraničení */
    color: #f5222d;  /* Nastaví červenou barvu textu pro křížek */
    font-size: 20px;  /* Nastaví velikost písma pro křížek */
    line-height: 1;  /* Vylepší vertikální zarovnání */
    padding: 0;  /* Odstraní padding, aby křížek byl přímo u okraje */
    cursor: pointer;  /* Udělá tlačítko klikatelné */
}

#basket-dropdown li button.remove-btn:hover {
    color: #cf1322;  /* Změní barvu křížku při najetí myší */
}

#basket-wrapper.basket-expanded .basket-content {
    max-height: 400px;  /* Zmenšení výšky pro menší košík */
    overflow-y: auto;
    transition: max-height 0.3s ease;
}

#basket-wrapper.basket-collapsed .basket-content {
    max-height: 0;
    overflow: hidden;
}

/* seznamy bez odrážek */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.columns .free-domains ul li,
.columns .registered-domains ul li {
    display: flex;
    justify-content: flex-start
    gap: 1px; /* mezera mezi checkbox a label */
    padding: 2px 0; /* vertikální mezera mezi doménami */
}

.free-domains ul li input[type="checkbox"] {
    margin: 0;
     width: 20%;
    display: flex;
}

.columns .free-domains ul li label,
.columns .registered-domains ul li label {
    display: flex;
    gap: 1px; /* mezera mezi dot a textem */
}

/* Košík umístěný nahoře vpravo, menší výška a decentní vzhled */
#basket-wrapper {
    position: fixed; /* Košík stále plava */
    top: 1px; /* Vzdálenost od vrchu */
    right: 20px; /* Umístění vpravo */
    width: 250px; /* Šířka košíku */
    height: 30px; /* Úzký pás pro zavřený košík */
    background-color: #f8f8f8; /* Barva pozadí */
    border: 1px solid #ccc; /* Jemný rámeček */
    border-radius: 10px; /* Zaoblené rohy */
    padding: 8px 15px; /* Vnitřní odsazení */
    z-index: 9999; /* Košík bude nad ostatními prvky */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Jemný stín pro efekt */
    display: flex; /* Flex pro zarovnání obsahu */
    justify-content: space-between; /* Umístění obsahu do dvou částí (položky + počet) */
    align-items: center; /* Vertikálně centrovaný obsah */
    overflow: hidden; /* Skrytí obsahu, když je košík zavřený */
    transition: height 0.3s ease; /* Plynulý přechod pro roztahování */
}

/* Když je košík otevřený (přidáme třídu 'basket-expanded') */
#basket-wrapper.basket-expanded {
    display: block;
    height: 300px; /* Normální výška košíku po otevření */
    overflow-y: auto; /* Povolí scroll, pokud bude příliš položek */
}

/* Úpravy pro položky v košíku, pokud zůstávají ve vyskakovacím seznamu */
#basket-dropdown {
    width: 100%;
    max-width: 230px; /* Rozumná šířka pro seznam položek */
    overflow-y: auto; /* Pokud je obsah větší než prostor */
}

/* Pro tlačítka v košíku */
#basket-wrapper button {
    padding: 5px 10px;
    font-size: 12px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}