/* AMCE Mortgage Calculator Styles */
.amce-mortgage-calculator-wrapper {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-family: sans-serif; /* Or inherit from theme */
    max-width: 700px; /* Example max-width */
    margin: 20px auto;
}

.amce-calculator-heading {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.amce-dark-mode-toggle-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
    font-size: 0.9em;
}
.amce-dark-mode-toggle-container span {
    margin-left: 8px;
}

/* Basic Switch for Dark Mode Toggle */
.amce-switch {
    position: relative;
    display: inline-block;
    width: 40px; /* Smaller switch */
    height: 20px;
}
.amce-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.amce-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}
.amce-slider:before {
    position: absolute;
    content: "";
    height: 16px; /* Smaller handle */
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
}
input:checked + .amce-slider {
    background-color: #2196F3; /* Blue when active */
}
input:focus + .amce-slider {
    box-shadow: 0 0 1px #2196F3;
}
input:checked + .amce-slider:before {
    transform: translateX(20px); /* Adjust based on width */
}
.amce-slider.amce-round {
    border-radius: 20px;
}
.amce-slider.amce-round:before {
    border-radius: 50%;
}


.amce-calculator-main-form {
    display: grid;
    gap: 20px;
}

/* Input Sections */
.amce-input-section,
.amce-qualification-estimator-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.amce-qualification-estimator-section h3,
.amce-results-section h3,
.amce-graph-section h3,
.amce-amortization-section h3 {
    grid-column: 1 / -1; /* Span full width */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}


.amce-input-group {
    display: flex;
    flex-direction: column;
}

.amce-input-group label {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
    color: #444;
}

.amce-input-group input[type="number"],
.amce-input-group input[type="text"],
.amce-input-group select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box; /* Ensures padding doesn't expand width */
    width: 100%;
}
.amce-input-group input:focus,
.amce-input-group select:focus {
    outline: none;
    border-color: #0073aa; /* WordPress blue */
    box-shadow: 0 0 0 1px #0073aa;
}

.amce-interest-type-group label {
    font-weight: normal; /* For radio button labels */
    margin-bottom: 0;
    margin-left: 5px;
}
.amce-interest-type-group div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.amce-interest-type-group input[type="radio"] {
    margin-right: 5px;
}

/* Results Section */
.amce-results-section {
    background-color: #eef7ff;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #cce0ff;
}

.amce-result-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 16px;
    border-bottom: 1px dashed #d0e0f0;
}
.amce-result-item:last-child {
    border-bottom: none;
}
.amce-result-item .amce-label {
    color: #333;
}
.amce-result-item .amce-value {
    font-weight: bold;
    color: #0056b3;
}
.amce-monthly-payment-display .amce-value {
    font-size: 1.2em; /* Make monthly payment stand out */
}


/* Qualification Estimator */
.amce-qualification-estimator-section button.amce-estimate-qualification-btn {
    grid-column: 1 / -1; /* Span if needed or adjust grid */
    justify-self: start;
    margin-top: 10px;
}
.amce-qualification-result {
    grid-column: 1 / -1;
    margin-top: 10px;
    font-weight: bold;
    font-size: 1.1em;
}
.amce-qualification-result .amce-label {
    margin-right: 5px;
    font-weight: normal;
}


/* Graph Section */
.amce-graph-section {
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.amce-graph-section canvas {
    max-height: 300px; /* Control graph height */
    width: 100% !important; /* Important for Chart.js responsiveness */
}

/* Amortization Table */
.amce-amortization-section {
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.amce-amortization-table-container {
    max-height: 400px; /* Make table scrollable if too long */
    overflow-y: auto;
    margin-top: 10px;
}
.amce-amortization-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.amce-amortization-table th,
.amce-amortization-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: right;
}
.amce-amortization-table th:first-child,
.amce-amortization-table td:first-child {
    text-align: center; /* Month number */
}
.amce-amortization-table thead th {
    background-color: #f0f0f0;
    font-weight: bold;
    position: sticky; /* Sticky headers */
    top: 0;
    z-index: 1;
}
.amce-amortization-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Export Section */
.amce-export-section {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

/* Elementor Button Styling (if not inheriting properly) */
.elementor-button.amce-estimate-qualification-btn,
.elementor-button.amce-export-pdf-btn,
.elementor-button.amce-export-excel-btn {
    /* Add specific styles if Elementor's default button styles are overridden or not applied */
    /* padding: 10px 15px;
    font-size: 14px;
    cursor: pointer; */
}

/* Responsiveness */
@media (max-width: 600px) {
    .amce-input-section, .amce-qualification-estimator-section {
        grid-template-columns: 1fr; /* Stack inputs on smaller screens */
    }
    .amce-calculator-heading {
        font-size: 20px;
    }
    .amce-export-section {
        flex-direction: column;
    }
    .elementor-button.amce-export-pdf-btn,
    .elementor-button.amce-export-excel-btn {
        width: 100%;
    }
}