/* Mortgage Calculator specific styles */

.form-card {
  display: flex;
  justify-content: center;
  background-color: var(--card-bg-color);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.compact-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Added to center the form-row-compact */
    gap: 1rem;
    width: 100%;
    max-width: 800px; /* Increased max-width to accommodate two columns better */
}

.form-row-compact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; /* Changed to center to center the fields */
    gap: 1rem;
    /* Removed width: 100%; to allow it to shrink and be centered by parent */
}

.summary-metrics-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-around;
}

.metric-item-compact {
    text-align: center;
}

.metric-label-compact {
    font-size: 0.875rem;
    color: var(--secondary-color);
}

.metric-value-compact {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.payments-layout-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.extra-section-compact {
    flex: 1;
    min-width: 300px;
}

.payments-table-compact {
    width: 100%;
    border-collapse: collapse;
}

.payments-table-compact th, .payments-table-compact td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border-color);
}

.payments-table-compact th {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .compact-form {
        flex-direction: column;
    }

    .summary-metrics-compact {
        flex-direction: column;
        gap: 1rem;
    }

    .payments-layout-compact {
        flex-direction: column;
    }

    .form-group {
        flex-basis: 100%; /* Make form groups take full width on small screens */
    }
}

.form-group {
    flex: 1 1 200px; /* Allow to grow/shrink, with a base of 200px */
    margin-bottom: 1rem; /* Add some vertical spacing between rows of form groups */
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="number"],
.form-group select {
    width: 100%; /* Make inputs take full width of their parent div */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.monthly-section-compact {
    flex: 1;
    min-width: 300px;
    width: 100%;
    margin: 0 auto; /* Center the block */
}

.table-container-compact {
    max-height: 400px; /* Fixed height */
    overflow-y: auto; /* Enable vertical scrolling */
}

.extra-form-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.form-control-xs {
    padding: 0.5rem; /* Matching .form-control */
    border: 1px solid var(--card-border-color);
    border-radius: 0.25rem; /* Matching .form-control */
    background-color: var(--bg-color);
    color: var(--text-color);
}