@import url('https://fonts.googleapis.com/css?family=Jost:400,500,600&display=swap');

/*
  Twilight Property Group — https://twilightpropertygroup.com.au/
  Mapped from the Houzez theme (main.css v4.2.0) + site customizer styles:
    - Font:        Jost (body 400, headings/buttons 500)
    - Primary:     #ee8b7a (coral) / hover #f2c8c0
    - Text:        #283044 (dark navy)
    - Background:  #f9f9f9 (form block) / #fff (inputs)
    - Borders:     #dce0e0, 4px radius, 42px control height (Houzez .form-control / .btn)
*/

/* Widget container reset & base styles */
#madecomfy-calculator {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: Jost, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #283044;
}

/* Form wrapper — matches Twilight site form blocks */
#madecomfy-calculator .mc-widget-page-wrap {
  background-color: #f9f9f9;
  padding: 35px 30px 25px 30px;
  border-radius: 4px;
}

/* Links inside the widget — Houzez links use the primary colour */
#madecomfy-calculator a {
  color: #ee8b7a;
  text-decoration: none;
}

#madecomfy-calculator a:hover {
  color: #f2c8c0;
}

/* Form card layout */
#madecomfy-calculator .mc-widget-form-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

/* Hide all steps by default */
#madecomfy-calculator .mc-widget-wrap.form-step {
  display: none;
}

/* Widget header — mapped from Houzez headings (Jost 500) */
#madecomfy-calculator .mc-widget-head {
  margin-bottom: 1.5rem;
  font-family: Jost, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 120%;
  text-transform: none;
  color: #283044;
}

/* Inputs wrapper */
#madecomfy-calculator .mc-widget-inputs-wrapper {
  display: flex;
  flex-flow: column;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

/* Input fields — mapped from Houzez .form-control */
#madecomfy-calculator .mc-widget-field {
  height: 42px;
  padding: 0 12px;
  font-family: Jost, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #283044;
  background-color: #fff;
  border: 1px solid #dce0e0;
  border-radius: 4px;
  margin-bottom: 0;
  vertical-align: middle;
}

#madecomfy-calculator .mc-widget-field:focus {
  outline: none;
  border-color: #ee8b7a;
  box-shadow: none;
}

#madecomfy-calculator .mc-widget-field::placeholder {
  color: #a1a7a8;
}

/* Beds count wrapper — styled like a Houzez form control */
#madecomfy-calculator .beds-count-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  padding: 0 12px;
  background-color: #fff;
  border: 1px solid #dce0e0;
  border-radius: 4px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

/* Bed text wrapper */
#madecomfy-calculator .bed-text-wrapper {
  display: flex;
  flex-direction: row;
}

/* Bed counter buttons — mapped from Houzez .size-calculator .btn (round +/-) */
#madecomfy-calculator .bed-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: #ee8b7a;
  color: #fff;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
}

#madecomfy-calculator .bed-counter:hover {
  background-color: #f2c8c0;
}

/* Bed count display */
#madecomfy-calculator #bed-count-display {
  margin-right: 4px;
  font-weight: 400;
}

/* Icon styling for embedded SVGs */
#madecomfy-calculator .icon-embed-xsmall {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
}

/* General widget text */
#madecomfy-calculator .mc-widget-text {
  font-size: 1rem;
  vertical-align: middle;
  color: #283044;
}

#madecomfy-calculator .bed-text-wrapper .mc-widget-text {
  color: #283044;
}

#madecomfy-calculator .disclaimer {
  color: #283044;
}

/* Spacer */
#madecomfy-calculator .spacer-small {
  height: 10px;
}

/* Card bottom styling */
#madecomfy-calculator .mc-widget-card-bottom {
  text-align: center;
  margin-top: 1rem;
}

/* Button wrapper */
#madecomfy-calculator .widget-button-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* Widget buttons — mapped from Houzez .btn / .btn-primary */
#madecomfy-calculator .widget-button {
  display: inline-block;
  font-family: Jost, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 40px;
  padding: 0 24px;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  background: #ee8b7a;
  border: 1px solid #ee8b7a;
  border-radius: 4px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

#madecomfy-calculator .widget-button:hover {
  color: #fff;
  background: #f2c8c0;
  border-color: #f2c8c0;
}

#madecomfy-calculator .widget-button:active,
#madecomfy-calculator .widget-button:focus {
  box-shadow: none;
  outline: none;
}

/* Back button styling */
#madecomfy-calculator .back-btn {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  padding: 0;
  border: none;
  color: #283044;
  line-height: normal;
}

#madecomfy-calculator .back-btn:hover {
  background-color: transparent;
  border: none;
  color: #ee8b7a;
}

/* Chevron icon in back button */
#madecomfy-calculator .chevron-icon {
  margin-right: 0.5em;
  display: flex;
  justify-content: center;
}

/* Powered-by text */
#madecomfy-calculator .powered-by-mc-widget {
  font-size: 0.75rem;
  color: #636363;
  text-align: left;
}

/* Always show the first step */
#madecomfy-calculator .mc-widget-wrap[data-step="1"] {
  display: block;
}

/* Revenue display styling */
#madecomfy-calculator .revenue-display {
  font-family: Jost, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  margin: 2rem 0;
  text-align: left;
  color: #ee8b7a;
}

/* Custom dropdown — mapped from Houzez .form-control / bootstrap-select */
#madecomfy-calculator .custom-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 42px;
  padding: 0 40px 0 12px;
  margin-bottom: 0;
  font-family: Jost, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #283044;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #dce0e0;
  border-radius: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23283044' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px;
}