/* styles/login.css */

.information {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height:fit-content;
    background-color: #b0bec5;
    font-family: Arial, sans-serif;
    margin-bottom: 2rem;


}
#responseMessage{
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    z-index: 1000;
    display: none;

}
.words {
    order: 1;
    width: 90%;
    height: 70vh;
    justify-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    border-radius: 8px;

}
.words img{
    width: 100%;
    height: 100%;

}
.registration {
    order: 2;
    background-color: #b0bec5;
    width: 50%;
    height: 100%;
    place-items: center;
    margin-top: 0;
    margin-right: 0;
    box-sizing: border-box;
    padding: 2px;
    justify-content: center;
    flex-direction: column;

}
.registration h2.kurier {
    margin-top: 5px;
    font-size: clamp(10px, 2vw, 25px);
    text-align: center;
    width: 100%;
    font-family: 'Courier Prime', monospace;

}
.registerBtn{
    display: grid;
    place-items: center;
    padding-top: 10px;
}

input {
    padding: 5px; /* Further reduced padding inside input fields */
    margin-top: 3px; /* Reduced margin on top of input fields */
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: calc(100% - 12px); /* Adjust width to account for reduced padding */
}

@media (max-width: 768px) and (orientation: portrait){
    .information {
        flex-direction: column;
        height: auto;
        min-height: fit-content; /* Pełna wysokość viewportu */
        padding: 0px;
        width: fit-content;

    }

    .words {
        order: 1;
        width: 100%;
        height: 30vh; /* Optymalna wysokość dla obrazka */
        padding-right: 0;
        margin-bottom: 0;
        place-items: center;
    }

    .registration {
        order: 2;
        background-color: #b0bec5;
        width: 80%;
        height: 100%;
        align-items: center;
        margin-top: 0;
        margin-right: 0;
        box-sizing: border-box;
        padding: 25px;
        place-items: center;
        margin-left: 0;
        border-radius: 8px;

    }
    .registration h2 {
        margin-top: 0;
        font-size: 12px; /* albo nawet 14px */
    }
    /* Lepsze dostosowanie formularza na mobile */
    form {
        gap: 15px; /* Większy odstęp między polami */
    }

    .words img {

        border-radius: 8px; /* Spójne zaokrąglenie */
        place-items: center;
        width: 100%;
        height:100%;

    }
    .banner {
        margin-bottom: 2rem;
        border-radius: 8px;
    }

    input {
        padding: 5px; /* Further reduced padding inside input fields */
        margin-top: 3px; /* Reduced margin on top of input fields */
        font-size: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: calc(100% - 12px); /* Adjust width to account for reduced padding */
    }


}

#openLoginBtn {
    padding: 8px 16px; /* Adjusted padding for a smaller button */
    font-size: 14px; /* Reduced font size */
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}



h2 {
    margin-top: 0;
    font-size: 10px; /* Reduced font size for the heading */
}


.name-container,
.address-container {
    display: flex; /* Arrange child elements in a row */
    gap: 8px; /* Reduced space between fields */
    margin-bottom: 8px; /* Reduced space below the container */
}

.name-field,
.address-field {
    flex: 1; /* Allow fields to grow equally */
}

label {
    margin-top: 5px; /* Reduced margin on top of labels */
    font-size: 14px;
}


.btn-primary {
    padding: 6px 12px; /* Further reduced padding for buttons */
    background-color: #203d5e;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px; /* Further reduced font size for buttons */
    margin: 4px 0; /* Reduced margin around buttons */
    width: calc(70% - 12px); /* Adjust width to account for reduced padding */
    text-decoration: none;
    text-underline: none;

}

.btn-primary:hover {
    background-color: #007bff;
}