/* Generelle Stiler */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4; /* Lys bakgrunn for siden */
    color: #333; /* Mørk tekstfarge */
    margin: 0;
}

/* Navigasjonsmeny */
.navbar {
    background-color: #2980b9; /* Blå bakgrunn for navigasjon */
    color: white; /* Hvit tekst */
    padding: 15px; /* Innvendig marg */
    display: flex; /* Flexbox for layout */
    justify-content: space-between; /* Fordel plass mellom elementene */
    align-items: center; /* Sentrer elementer vertikalt */
}

/* Navigasjonslenker */
.navbar a {
    color: white; /* Hvit farge på lenker */
    text-decoration: none; /* Ingen understrek */
    padding: 10px; /* Innvendig marg */
}

.navbar a:hover {
    text-decoration: underline; /* Understrek på hover */
}

/* Container */
.container {
    max-width: 1200px; /* Maks bredde for innhold */
    margin: 20px auto; /* Sentrer containeren */
    padding: 20px; /* Innvendig marg */
    background-color: #fff; /* Hvit bakgrunn for innhold */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lett skygge for dybde */
}

/* Katalogseksjon */
.product-table {
    width: 100%; /* Full bredde */
    border-collapse: collapse; /* Fjerner mellomrom mellom celler */
}

.product-table th, .product-table td {
    border: 1px solid #ddd; /* Grå kantlinje */
    padding: 8px; /* Innvendig marg */
    text-align: left; /* Venstrejustert tekst */
}

.product-table th {
    background-color: #2980b9; /* Blå bakgrunn for overskrifter */
    color: white; /* Hvit tekst */
}

/* Knapper */
button {
    background-color: #2980b9; /* Blå bakgrunn for knapper */
    color: white; /* Hvit tekst */
    border: none; /* Ingen kantlinje */
    padding: 10px 15px; /* Innvendig marg */
    border-radius: 5px; /* Runde hjørner */
    cursor: pointer; /* Endrer musepekeren til hånd */
    font-size: 16px; /* Standard skrifttype-størrelse */
    margin-top: 15px; /* Margin over knappen */
    transition: background-color 0.3s; /* Overgang for hover-effekt */
}

button:hover {
    background-color: #1a6d98; /* Mørkere blå ved hover */
}

/* Registreringsseksjon CSS */
#registration-section {
    background-color: #ffffff; /* Hvit bakgrunn for seksjonen */
    border: 1px solid #ddd; /* Lys grå kantlinje */
    padding: 20px; /* Innvendig marg */
    border-radius: 8px; /* Runde hjørner */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Lett skygge for dybde */
    margin: 20px 0; /* Margin over og under seksjonen */
}

#registration-section h2 {
    color: #2c3e50; /* Mørk blågrå farge for overskriften */
    margin-bottom: 15px; /* Margin under overskriften */
}

#registration-section label {
    display: block; /* Gjør etiketter til blokkelementer */
    margin: 10px 0 5px; /* Marg mellom etiketter og input-felt */
    font-weight: bold; /* Fet tekst for etiketter */
    color: #333; /* Mørk tekstfarge */
}

#registration-section input[type="text"],
#registration-section input[type="email"],
#registration-section input[type="checkbox"] {
    width: 100%; /* Full bredde for innhold */
    padding: 10px; /* Innvendig marg for input-felt */
    border: 1px solid #ccc; /* Lys grå kantlinje */
    border-radius: 4px; /* Runde hjørner */
    font-size: 16px; /* Standard skrifttype-størrelse */
    box-sizing: border-box; /* Inkluder padding i total bredde */
}

#registration-section input[type="checkbox"] {
    width: auto; /* Standard størrelse for checkbox */
    margin-right: 5px; /* Litt avstand til høyre side */
}

#registration-section button {
    background-color: #2980b9; /* Blå bakgrunn for knapper */
    color: white; /* Hvit tekst */
    border: none; /* Ingen kantlinje */
    padding: 10px 15px; /* Innvendig marg */
    border-radius: 5px; /* Runde hjørner */
    cursor: pointer; /* Endrer musepekeren til hånd */
    font-size: 16px; /* Standard skrifttype-størrelse */
    margin-top: 15px; /* Margin over knappen */
    transition: background-color 0.3s; /* Overgang for hover-effekt */
}

#registration-section button:hover {
    background-color: #1a6d98; /* Mørkere blå ved hover */
}

#registration-result {
    margin-top: 15px; /* Margin over resultatseksjonen */
    font-weight: bold; /* Fet tekst for resultatet */
}

/* Footer */
.footer {
    text-align: center; /* Sentrer teksten */
    margin-top: 20px; /* Margin over footer */
    padding: 10px; /* Innvendig marg */
    background-color: #2980b9; /* Bakgrunnsfarge for footer */
    color: white; /* Hvit tekst */
}

/* Responsive design */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* Stabler navigasjonen vertikalt på mobil */
    }
    
    .navbar a {
        padding: 8px; /* Mindre innvendig marg for lenker */
    }
    
    #registration-section {
        padding: 15px; /* Mindre padding på mobile enheter */
    }
    
    #registration-section h2 {
        font-size: 20px; /* Justering av overskriftstørrelse for mobile enheter */
    }
    
    #registration-section input,
    #registration-section button {
        font-size: 14px; /* Justerer skrifttype-størrelse for input og knapper */
    }
}
.hide-newsletter {
    display: none; /* Skjuler elementet */
}
.preservation-highlight {
    background-color: #ffe5b4; /* Lys oransje bakgrunn for å fremheve */
    font-weight: bold;         /* Fet skrift for ekstra oppmerksomhet */
    color: #cc8400;            /* Mørk oransje tekst */
}
.next-order-date {
    float: left; /* Align to the left */
    color: white; /* Text color */
    background-color: black; /* Background color */
    padding: 5px; /* Add some padding for spacing */
    margin-right: 10px; /* Space from the right */
}