/* Mortgage Calculator Styles */
.mp_calculator_container {
font-family: Arial, sans-serif;
max-width: 100%;
box-sizing: border-box;
}

.mp_form_group {
margin-bottom: 15px;
}

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

.mp_form_group input,
.mp_form_group select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}

#mp_calculate_btn {
padding: 10px 20px;
border: none;
cursor: pointer;
font-weight: bold;
margin-top: 15px;
transition: background-color 0.3s;
}

#mp_calculate_btn:hover {
opacity: 0.9;
}

/* Modal styles */
#mp_modal {
display: none; 
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}

#mp_modal_content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 800px;
position: relative;
border-radius: 8px;
}

#mp_close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
margin-top: -10px;
}

#mp_close:hover,
#mp_close:focus {
color: black;
text-decoration: none;
}

#mp_result_summary {
margin-bottom: 30px;
}

#mp_result_summary h3 {
color: #333;
margin-top: 20px;
margin-bottom: 15px;
}

#mp_result_summary p {
margin: 10px 0;
line-height: 1.5;
}

#mp_detailed_breakdown {
margin: 20px 0;
overflow-x: auto;
}

#mp_detailed_breakdown table {
width: 100%;
border-collapse: collapse;
}

#mp_detailed_breakdown th, 
#mp_detailed_breakdown td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

#mp_detailed_breakdown th {
background-color: #f8f9fa;
}

#mp_print_btn {
padding: 10px 20px;
border: none;
cursor: pointer;
font-weight: bold;
margin-top: 20px;
display: inline-block;
transition: background-color 0.3s;
}

#mp_print_btn:hover {
opacity: 0.9;
}

/* Disclaimer row styles */
.mp_disclaimer_row {
display: flex;
margin: 20px 0;
align-items: center;
}

.mp_disclaimer_col {
flex: 0 0 80%;
padding-right: 15px;
}

.mp_print_col {
flex: 0 0 20%;
text-align: right;
}

.mp_disclaimer_text {
margin: 5px 0 0 0;
font-style: italic;
color: #666;
display: flex;
align-items: center;
min-height: 38px; /* Match standard button height */
}

/* Logo styles */
.mp_logo_container {
float: right;
margin-left: 15px;
margin-top: 0;
margin-bottom: 15px;
}

.mp_logo_box {
width: 150px;
height: 150px;
background-color: #0073aa;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
font-size: 16px;
font-weight: bold;
}

.mp_site_logo {
width: 150px;
height: 150px;
max-width: 100%;
object-fit: contain;
}

/* Responsive styles */
@media screen and (max-width: 600px) {
#mp_modal_content {
width: 95%;
margin: 10% auto;
padding: 15px;
}

.mp_logo_container {
float: none;
margin: 0 auto 15px;
text-align: center;
}

.mp_logo_box, .mp_site_logo {
margin: 0 auto;
}

#mp_detailed_breakdown {
font-size: 14px;
}

.mp_disclaimer_row {
flex-direction: column;
}

.mp_disclaimer_col, 
.mp_print_col {
flex: 0 0 100%;
padding-right: 0;
text-align: left;
}

.mp_print_col {
margin-top: 15px;
}
}

/* Mobile-only: force Interest Rate and Interest Only Period fields to full width.
   Desktop/tablet layout (above 768px) is untouched - those two fields keep
   their existing 50%/50% side-by-side layout inherited from the plugin's
   inline styles. */
@media screen and (max-width: 768px) {
.mp_form_group[style*="display: flex"] > div[style*="width: 50%"] {
width: 100% !important;
}
}