.login_container {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #444;
    background-color: var();
}
.login_form {
    display: flex;
    gap:30px;
    width: 90%;
    padding:40px 20px;
    flex-direction: column;
}
.adm_form_hello {
    font-weight: 700;
    font-size: 1.8rem;
}
.form_div {
    display: flex;
    flex-direction: column-reverse;
    & label {
        font-size: 0.9rem;
    }
}
.form_input {
    margin-top: 5px;
    border: none;
    box-shadow: inset 0 0 3px 1px #666;
    padding: 16px;
    border-radius: 10px;
    font-weight: 500;
}
.login_form .form_submit {
    border: none;
    display: block;
    padding: 11px;
    background-color: #fff;
    border-radius: 10px;
    font-size: 1.2rem;
    background-color: var(--ambient-color2);
    width: 70%;
    align-self: center;
    color: #fff;
    cursor: pointer;
    &:hover {
        background-color: var(--accent-color1);
        color: #fff;
    }
    &:focus-visible {
        border: none;
    }
}

.language-with-flags option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-with-flags .flag-icon {
    vertical-align: middle;
    margin-right: 6px;
}

/* Małe telefony → typowy mobile-first start */
@media (min-width: 479px) { 
  .login_form {
    padding: 40px 40px;
  }
}

/* Standardowy mobile (najczęściej używany punkt startowy) */
@media (min-width: 767px) { 
  .login_form {
    width: 60%;
  }
}

/* Małe tablety / duże telefony (foldy, Pro Max w pionie) */
@media (min-width: 768px) and (max-width: 991px) { 
  /* 768–991 px – iPad mini, telefony w poziomie */
}

/* Tablety i małe laptopy */
@media (min-width: 992px) and (max-width: 1199px) { 
  /* 992–1199 px – iPad Pro 11", małe laptopy */
}

/* Zwykłe laptopy / desktopy */
@media (min-width: 1200px) { 
  /* 1200+ px – większość monitorów i dużych laptopów */
}

/* Bardzo duże ekrany / 4K / ultrawide */
@media (min-width: 1400px) { 
    .login_form {
    width: 20%;
    padding: 60px;
    /* background-color: red; */
    border-radius: 12px;
    box-shadow: inset 0 0 3px 1px #666;
  }
}

@media (min-width: 1920px) { 
  /* 1920+ px – Full HD i większe */
}

@media (min-width: 2560px) { 
  /* 2K / 4K – opcjonalnie, często już tylko max-width kontenera */
}