.ukmc-container {
  font-family: var(--ukmc-font-family, 'Roboto, sans-serif');
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 20px;
}

.ukmc-columns-wrapper {
  background-color: var(--ukmc-background-color, #ffffff);
  border: 1px solid var(--ukmc-border-color, #dddddd);
  border-radius: var(--ukmc-border-radius, 20px);
  padding: 30px;
}

/* Only add shadow if the class ukmc-has-shadow exists */
.ukmc-columns-wrapper.ukmc-has-shadow {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.ukmc-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.ukmc-inputs, .ukmc-results {
  flex: 1 1 45%;
  background: transparent;
  padding: 20px;
}

.ukmc-inputs label {
  display: block;
  margin-top: 20px;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1rem;
}

.ukmc-inputs input[type="number"],
.ukmc-inputs select {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  background: #f9f9f9;
}

/* Improved select field styling */
.ukmc-inputs select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f9f9f9;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20fill%3D%22%23999%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 36px; /* ensures text doesn’t overlap arrow */
  cursor: pointer;
}

.ukmc-inputs input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  background: transparent;
  margin: 10px 0;
  padding: 0;
  position: relative;
}

.ukmc-inputs input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  margin-top: 11px;
}

.ukmc-inputs input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--ukmc-button-color, #007bff);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: -6px;
  cursor: pointer;
  position: relative;
}

.ukmc-inputs input[type="range"]::-moz-range-track {
  background: #ddd;
  height: 8px;
  border-radius: 5px;
}

.ukmc-inputs input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--ukmc-button-color, #007bff);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.ukmc-inputs small {
  font-size: 0.85rem;
  color: #777;
}

.ukmc-results h3.ukmc-monthly-header {
  font-size: 1.8rem;
  margin-bottom: 8px;
  font-weight: 700;
}

.ukmc-results .ukmc-monthly-amount {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--ukmc-button-color, #007bff);
  margin-bottom: 20px;
}

.ukmc-results h4 {
  margin-top: 18px;
  font-size: 1.2rem;
}

.ukmc-results p {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 8px 0;
}

/* Updated subtext */
.ukmc-subtext {
  font-size: 0.85rem;
  color: #777;
  display: block;
  margin-top: -25px;
  margin-bottom: 35px;
  text-align: left;
  line-height: 1.4; /* tighter and better on mobile */
}

.ukmc-contact-heading {
  margin-top: 30px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
}

.ukmc-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--ukmc-button-color, #007bff);
  color: #fff;
  padding: 14px 0;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: var(--ukmc-button-radius, 6px);
  text-decoration: none;
  margin: 20px 0 20px;
  transition: background-color 0.3s;
}

.ukmc-button:hover {
  background-color: var(--ukmc-button-hover-color, #0056b3);
}

.ukmc-bottom-disclaimer {
    margin-top: 18px;
}

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