/* Weka Solar roof check. Loaded only by solar-roof-check.html.
   Part of the self-contained roof check feature: see README.md here. */

.roof-check,
.rc-explained { text-transform: none; }

.rc-intro { max-width: 760px; margin-bottom: 30px; }
.rc-intro .title { margin-bottom: 14px; }
.rc-intro p { font-size: 18px; line-height: 1.65; color: #3d4540; margin: 0; }

.rc-form {
  display: flex;
  flex-wrap: wrap;            /* Turnstile sits on its own line below */
  gap: 12px;
  max-width: 760px;
  margin-bottom: 16px;
}
.rc-form input {
  flex: 1;
  min-width: 0;
  height: 60px;
  padding: 0 20px;
  border: 2px solid #D9DEDB;
  background: #ffffff;
  font-size: 17px;
  color: #0d0d0d;
}
.rc-form input:focus { outline: none; border-color: var(--color-primary); }
.rc-form input:disabled { background: #F3F4F5; }
.rc-form .thm-btn { flex: 0 0 auto; }
.rc-form .thm-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.rc-form .turnstile-slot { flex: 0 0 100%; order: 3; justify-content: flex-start; }

/* Address suggestions (Google Places), drawn as our own list. */
.rc-field { position: relative; flex: 1; min-width: 0; }
.rc-field input { width: 100%; }
.rc-suggest {
  position: absolute;
  z-index: 40;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  /* Five suggestions (Google's usual count) at ~66px each, so the common
     case does not sit there half-scrolled with the last row clipped. */
  max-height: 344px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  border: 2px solid var(--color-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  text-align: left;
}
.rc-suggest__item {
  padding: 11px 18px;
  cursor: pointer;
  line-height: 1.35;
  border-bottom: 1px solid #EDF0EE;
}
.rc-suggest__item:last-child { border-bottom: 0; }
.rc-suggest__item:hover,
.rc-suggest__item[aria-selected="true"] { background: #EAF6EE; }
.rc-suggest__main { display: block; color: #0d0d0d; font-weight: 600; }
.rc-suggest__sub { display: block; font-size: 14px; color: #3d4540; }

/* Phone field: a fixed +64 in front of the national number. */
.rc-tel { position: relative; }
.rc-tel__prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 600;
  color: #3d4540;
  pointer-events: none;
}
.rc-tel::after {
  content: "";
  position: absolute;
  left: 52px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: #D9DEDB;
}
/* Beats ".rc-gate__field input", which sets the padding and is defined later. */
.rc-gate__field .rc-tel input { padding-left: 64px; }
.rc-tel__hint { margin: 5px 0 0; font-size: 13px; line-height: 1.4; color: #3d4540; }

.rc-status {
  max-width: 760px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 4px solid var(--color-primary);
  background: #F3F4F5;
  color: #0d0d0d;
}
.rc-status.is-error { border-color: #B3261E; background: #FBEAE9; }
.rc-status.is-warn  { border-color: #B86A1E; background: #FDF1E4; }

.rc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.rc-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #DCE1DE;
}
.is-unavailable .rc-map,
.is-unavailable .rc-map-tip { display: none; }
.is-unavailable .rc-layout { display: block; }
.rc-map-tip { font-size: 14px; color: #3d4540; margin: 12px 0 0; }

/* The marker on the building we are about to analyse. */
.rc-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--color-primary);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* --- Side panel: what the report contains, then the confirmation -------- */
.rc-promise {
  padding: 26px 28px;
  background: #F3F4F5;
  border-top: 4px solid var(--color-primary);
  line-height: 1.5;
}
.rc-promise__title { font-size: 21px; font-weight: 700; margin: 0 0 14px; }
.rc-promise__list { list-style: none; margin: 0; padding: 0; }
.rc-promise__list li {
  position: relative;
  padding: 0 0 12px 26px;
  color: #3d4540;
}
.rc-promise__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
}
.rc-promise__list strong { color: #0d0d0d; }
.rc-promise__note { margin: 6px 0 0; font-size: 14px; color: #3d4540; }

.rc-results { line-height: 1.45; }   /* the template's 32px line-height is far too loose here */
.rc-done {
  padding: 26px 28px;
  color: #ffffff;
  background: #1B7A40;
}
.rc-done--warn { background: #7A4A12; }
.rc-done__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
.rc-done__text { margin: 0; line-height: 1.6; color: #ffffff; word-break: break-word; }
.rc-done__next { margin: 18px 0 14px; line-height: 1.6; color: #3d4540; }
.rc-cta { display: inline-block; }

.rc-explain { background: #ffffff; padding: 26px 28px; height: 100%; }
.rc-explain h3 { font-size: 21px; font-weight: 700; margin: 0 0 10px; }
.rc-explain p { margin: 0; line-height: 1.65; color: #3d4540; }

/* --- Report request modal ---------------------------------------------- */
/* Hidden with visibility, not display: a display:none form stops the
   Turnstile widget inside it from rendering, and it has to be ready before
   the modal is first opened. visibility:hidden also takes it out of the
   accessibility tree and makes its fields unfocusable. */
.rc-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.rc-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.18s ease;
}
.rc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.62);
}
.rc-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px 32px 28px;
  background: #ffffff;
  border-top: 4px solid var(--color-primary);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  text-transform: none;
  transform: translateY(8px);
  transition: transform 0.18s ease;
}
.rc-modal.is-open .rc-modal__panel { transform: translateY(0); }
.rc-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: #3d4540;
  cursor: pointer;
}
.rc-modal__close:hover { color: #0d0d0d; }
.rc-modal__title { font-size: 23px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.rc-modal__address { margin: 0 0 20px; line-height: 1.5; color: #3d4540; word-break: break-word; }
.rc-modal__address strong { color: #0d0d0d; }
body.rc-modal-open { overflow: hidden; }

.rc-gate__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rc-gate__field--wide { grid-column: 1 / -1; }
.rc-gate__field label { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 5px; color: #0d0d0d; }
.rc-gate__field input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 2px solid #D9DEDB;
  background: #ffffff;
  font-size: 16px;
  color: #0d0d0d;
}
.rc-gate__field input:focus { outline: none; border-color: var(--color-primary); }
/* "I also want a free quote". Left unticked: the visitor came for a report,
   and pre-ticking an opt-in they did not ask for is the sort of thing that
   makes the rest of the page less believable. */
.rc-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  background: #F3F4F5;
  border-left: 4px solid var(--color-primary);
}
.rc-check input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.rc-check label {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #0d0d0d;
  cursor: pointer;
}
.rc-modal .form-consent { text-align: left; margin: 14px 0 0; font-size: 14px; line-height: 1.5; }
.rc-gate__status { margin: 10px 0 0; padding: 10px 12px; background: #F3F4F5; border-left: 4px solid var(--color-primary); line-height: 1.45; }
.rc-gate__status.is-error { border-color: #B3261E; background: #FBEAE9; }
.rc-gate__status.is-warn { border-color: #B86A1E; background: #FDF1E4; }
.rc-gate__actions { margin-top: 16px; }
.rc-gate__actions .thm-btn { width: 100%; }
.rc-modal .turnstile-slot { justify-content: flex-start; margin-top: 12px; }

@media (max-width: 991px) {
  .rc-layout { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .rc-form { flex-direction: column; }
  /* In a column, flex: 1 made the input's basis 0 and collapsed it to 24px. */
  .rc-form input { flex: 0 0 auto; }
  .rc-form .thm-btn { width: 100%; }
  .rc-modal { padding: 12px; align-items: flex-start; }
  .rc-modal__panel { padding: 26px 20px 22px; max-height: calc(100vh - 24px); margin-top: 12px; }
  .rc-modal__title { font-size: 21px; }
  .rc-gate__fields { grid-template-columns: 1fr; }
  .rc-promise,
  .rc-done { padding: 22px 20px; }
}