* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background-color: #f5f6f8;

    color: #333;

}



.header {

    background-color: white;

    padding: 20px;

    text-align: center;

    border-bottom: 1px solid #ddd;

}



.header h1 {

    margin: 0;

    font-size: 32px;

}



.container {

    max-width: 1000px;

    margin: 40px auto;

    padding: 20px;

}



.intro {

    text-align: center;

    margin-bottom: 40px;

}



.intro h2 {

    font-size: 28px;

}



.products h2 {

    margin-bottom: 20px;

}



.product-card {

    background-color: white;

    width: 300px;

    padding: 25px;

    border-radius: 10px;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.1);

}



.product-card h3 {

    margin-top: 0;

}



.product-card button {

    width: 100%;

    padding: 12px;

    margin-top: 15px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    background-color: #1f6feb;

    color: white;

    font-size: 16px;

}



.product-card button:hover {

    opacity: 0.9;

}



.footer {

    text-align: center;

    padding: 20px;

    color: #666;

}

.card {

    background: white;

    padding: 25px;

    margin-bottom: 25px;

    border-radius: 10px;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.1);

}



.form-group {

    margin-bottom: 15px;

}



.form-group label {

    display: block;

    margin-bottom: 5px;

    font-weight: bold;

}



.form-group input,
.form-group select {

    width: 100%;

    padding: 10px;

    border:

        1px solid #ccc;

    border-radius: 6px;

    font-size: 16px;

}



.loan-part {

    border-left:

        4px solid #1f6feb;

    padding-left: 20px;

}



.button-primary,
.button-secondary {

    padding: 12px 20px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-size: 16px;

}



.button-primary {

    background-color: #1f6feb;

    color: white;

}



.button-secondary {

    background-color: #ddd;

}



.success {

    color: green;

}

.actie-zone {

    margin-top: 25px;

    padding-top: 15px;

    border-top: 1px solid #ddd;

    text-align: center;

}

/* Uitgeschakelde knoppen */

button:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}

.jaaroverzicht-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.95rem;
}


.jaaroverzicht-tabel th {
    text-align: right;
    padding: 12px 10px;
    border-bottom: 2px solid #ccc;
    font-weight: 600;
}


.jaaroverzicht-tabel th:first-child {
    text-align: center;
}


.jaaroverzicht-tabel td {
    text-align: right;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}


.jaaroverzicht-tabel td:first-child {
    text-align: center;
    font-weight: 600;
}


.jaaroverzicht-tabel tbody tr:hover {
    background-color: #f5f5f5;
}


.jaaroverzicht-tabel tbody tr:last-child {
    border-bottom: 2px solid #ccc;
}

.jaaroverzicht-tabel thead th {
    position: sticky;
    top: 0;
}

.jaaroverzicht-tabel tfoot th {
    padding: 12px 10px;
    border-top: 2px solid #666;
    font-weight: 700;
    text-align: right;
    background-color: #f3f3f3;
}

.jaaroverzicht-tabel tfoot th:first-child {
    text-align: center;
}

.view-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.view-selector button {
  padding: 8px 16px;
  cursor: pointer;
}

#melding {
  padding: 12px 20px;
  margin: 15px 0;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  display: none;
}

#melding.error {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

#melding.success {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}

.leningdeel-inhoud {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}


.leningdeel-invoer,
.resultaat {
    padding: 15px;
    border-radius: 8px;
}


@media (max-width: 768px) {

    .leningdeel-inhoud {
        grid-template-columns: 1fr;
    }

}

.tabel-voetnoot {
    margin-top: 10px;
    font-size: 0.9rem;
    font-style: italic;
    color: #666;
}