/* =========================== */
/* MODAL STYLES               */
/* =========================== */

/* Modal container styling */
.modal {
    display: none; /* Modalen er skjult som standard */
    position: fixed; /* Holder modal på plass selv ved scrolling */
    z-index: 1; /* Plasseres over andre elementer */
    left: 0;
    top: 0;
    width: 100%; /* Full bredde */
    height: 100%; /* Full høyde */
    background-color: rgba(0, 0, 0, 0.4); /* Halvgjennomsiktig svart bakgrunn */
}

/* Modal content box */
.modal-content {
    background-color: #2a1a47; /* Lilla bakgrunnsfarge */
    margin: 15% auto; /* Sentrerer innholdet horisontalt og vertikalt */
    padding: 20px; /* Innpakning for innholdet */
    border-radius: 10px; /* Runde hjørner */
    width: 80%; /* Tar opp 80% av skjermens bredde */
    max-width: 400px; /* Maks bredde på modalen */
    color: white; /* Hvit tekst */
    position: relative; /* For plassering av barn som .close */
}

/* Modal title styling */
.modal h2 {
    text-align: center; /* Sentrerer tittelen */
}

/* Form layout inside modal */
.modal form {
    display: flex; /* Bruker flexbox for enkel layout */
    flex-direction: column; /* Elementer plasseres vertikalt */
    gap: 15px; /* Avstand mellom elementer */
}

/* Close button inside modal */
.close {
    color: white; /* Hvit farge */
    font-size: 30px; /* Stor tekststørrelse */
    position: absolute; /* Plasseres relativt til .modal-content */
    top: 10px; /* Øverst */
    right: 10px; /* Høyre hjørne */
    cursor: pointer; /* Håndpeker ved hover */
    z-index: 2; /* Sørger for at den vises over annet innhold */
}

.close:hover {
    color: #ff6666; /* Rød farge ved hover */
}

/* Input field styling */
.modal input[type="text"],
.modal input[type="password"] {
    padding: 10px; /* Innpakning i inputfeltene */
    font-size: 1em; /* Standard fontstørrelse */
    border: 1px solid #333; /* Mørk kantlinje */
    border-radius: 5px; /* Runde hjørner */
    background-color: #1a0a2a; /* Mørk bakgrunnsfarge */
    color: white; /* Hvit tekst */
}

.modal input[type="text"]:focus,
.modal input[type="password"]:focus {
    outline-color: #00d8ff; /* Blå kantlinje ved fokus */
}

/* Button styling inside modal */
.modal button {
    background-color: #00d8ff; /* Blå bakgrunn */
    color: white; /* Hvit tekst */
    padding: 15px; /* Innpakning rundt knappens tekst */
    border-radius: 5px; /* Runde hjørner */
    font-size: 1.2em; /* Stor tekst */
    border: none; /* Fjerner standard kantlinje */
    cursor: pointer; /* Håndpeker ved hover */
}

.modal button:hover {
    background-color: #00a6cc; /* Lysere blå ved hover */
}

/* Link for registration */
.register-link {
    text-align: center; /* Sentrerer lenken */
    margin-top: 20px; /* Avstand fra andre elementer */
}

.register-link a {
    color: #00d8ff; /* Blå tekstfarge */
    text-decoration: none; /* Fjerner understreking */
}

.register-link a:hover {
    text-decoration: underline; /* Understreking ved hover */
}

/* =========================== */
/* REGISTRATION FORM STYLES   */
/* =========================== */

/* Container for registration form */
.form-container {
    max-width: 400px; /* Maks bredde på containeren */
    margin: 0 auto; /* Sentrerer containeren */
    background-color: #2a1a47; /* Lilla bakgrunnsfarge */
    padding: 30px; /* Innpakning for innhold */
    border-radius: 10px; /* Runde hjørner */
    color: white; /* Hvit tekst */
}

/* Title inside registration form */
.form-container h2 {
    font-size: 2em; /* Stor tekst for tittelen */
    margin-bottom: 20px; /* Avstand under tittelen */
}

/* Form layout */
.form-container form {
    display: flex; /* Bruker flexbox */
    flex-direction: column; /* Vertikal layout */
    gap: 15px; /* Avstand mellom inputfeltene */
}

/* Label styling inside form */
.form-container label {
    font-size: 1em; /* Standard fontstørrelse */
}

/* Input fields styling */
.form-container input {
    padding: 10px; /* Innpakning for inputfeltet */
    font-size: 1em; /* Standard fontstørrelse */
    border: 1px solid #333; /* Mørk kantlinje */
    border-radius: 5px; /* Runde hjørner */
    background-color: #1a0a2a; /* Mørk bakgrunn */
    color: white; /* Hvit tekst */
}

.form-container input:focus {
    outline-color: #00d8ff; /* Blå kantlinje ved fokus */
}

/* Button styling */
.form-container button {
    background-color: #00d8ff; /* Blå bakgrunnsfarge */
    color: white; /* Hvit tekst */
    padding: 15px; /* Innpakning rundt knappens tekst */
    border-radius: 5px; /* Runde hjørner */
    font-size: 1.2em; /* Stor tekst på knappen */
    border: none; /* Fjerner standard kantlinje */
    cursor: pointer; /* Håndpeker ved hover */
}

.form-container button:hover {
    background-color: #00a6cc; /* Lysere blå ved hover */
}

/* Link to login section */
.login-link {
    margin-top: 20px; /* Avstand over lenken */
    text-align: center; /* Sentrerer lenken */
}

.login-link a {
    color: #00d8ff; /* Blå tekstfarge */
    text-decoration: none; /* Fjerner understreking */
}

.login-link a:hover {
    text-decoration: underline; /* Understreking ved hover */
}