/* Hlavní kontejner registračního formuláře */
.form-registrace {
    background: #fafdff;              /* Barva pozadí formuláře */
    border-radius: 10px;              /* Zaoblení rohů */
    box-shadow: 0 1px 8px rgba(0,0,0,0.04); /* Jemný stín pod boxem */
    padding: 22px 18px;               /* Odsazení uvnitř boxu (zmenšeno vodorovně) */
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 14px;                  /* Výchozí velikost textu uvnitř formuláře */
    max-width: 450px;                 /* Formulář nebude širší než 450px */
    margin: 0 auto 24px auto;         /* Zarovnání na střed, mezera dole */
    box-sizing: border-box;
}

/* Popisky vstupních polí (label) */
.form-registrace label {
    font-weight: 500;                 /* Silnější písmo pro popisky */
    color: #232a35;                   /* Tmavší barva pro lepší čitelnost */
    margin-bottom: 6px;               /* Menší mezera pod popiskem */
    display: block;                   /* Každý label novým řádkem */
    font-size: 13px;                  /* O něco menší popisek */
}

/* Wrapper jedné položky formuláře – jedno pole a label */
.form-registrace .form-row {
    margin-bottom: 15px;              /* Menší vertikální mezera mezi řádky formuláře */
}

/* Vstupní pole a selecty – platí jen v rámci registračního formuláře */
.form-registrace .form-input,
.form-registrace .form-select {
    width: 100%;                      /* Roztažení na plnou šířku boxu */
    padding: 7px 10px;                /* Zmenšený vnitřní padding */
    border-radius: 8px;               /* Jemně zaoblené rohy */
    border: 1.1px solid #d2d6dc;      /* Světlý okraj */
    background: #f9fafb;              /* Jemně šedivé pole */
    font-size: 13px;                  /* Lehce menší text pole */
    transition: border-color 0.2s;    /* Plynulá změna rámečku při focusu */
}

/* Vzhled polí při focusu (kliknutí) */
.form-registrace .form-input:focus,
.form-registrace .form-select:focus {
    border-color: #3498db;            /* Modré zvýraznění při aktivitě */
    outline: none;                    /* Odebrání defaultního modrého rámečku */
}

/* Tlačítko pro odeslání formuláře */
.form-registrace .form-submit {
    background: #25477b;              /* Modrošedé tlačítko */
    color: #fff;                      /* Text tlačítka bíle */
    padding: 9px 0;                   /* Kompaktní tlačítko */
    border: none;                     /* Bez okraje */
    border-radius: 7px;               /* Lehce zaoblené rohy */
    font-weight: 600;                 /* Polotučný text */
    cursor: pointer;                  /* Ruka u tlačítka */
    font-size: 15px;                  /* O trochu větší text */
    width: 100%;                      /* Přes celou šířku formuláře */
    margin-top: 8px;                  /* Malá mezera před tlačítkem */
    box-sizing: border-box;
    transition: background 0.2s;      /* Hladký přechod barvy */
}

/* Hover efekt tlačítka */
.form-registrace .form-submit:hover {
    background: #3b4e68;              /* Tmavší při hoveru */
}

/* Responsivní úprava pro úzké obrazovky (mobil/tablet) */
@media (max-width: 540px) {
    .form-registrace {
        padding: 10px 2px;            /* Ještě úspornější padding */
        max-width: 98vw;              /* Maximální šířka téměř přes celé zařízení */
    }
}