/* UK address lookup (demo calculator).

   NOTE ON TOKENS: design_system.css is loaded by the CONSOLE layout only — the
   customer-facing `application` layout does not import it, so --fp-* resolves
   to nothing on this page. Without a fallback every colour, space and radius
   below silently evaluates to empty and the component renders unstyled.

   So each token carries the design system's own value as a fallback: correct on
   console, correct here, and a single place to change if the customer side ever
   adopts the tokens. Values copied from design_system.css :root. */

.uk-lookup {
  margin-top: var(--fp-space-lg, 24px);
  padding: var(--fp-space-lg, 24px);
  background: var(--fp-bg-primary, #ffffff);
  border: 1px solid var(--fp-border, #e5e7eb);
  border-radius: var(--fp-radius-lg, 12px);
}

.uk-lookup-title {
  margin: 0 0 var(--fp-space-xs, 4px);
  font-size: 17px;
  font-weight: 600;
  color: var(--fp-text-primary, #1d1d1f);
}

.uk-lookup-intro {
  margin: 0 0 var(--fp-space-md, 16px);
  font-size: 14px;
  line-height: 1.45;
  color: var(--fp-text-secondary, #6e6e73);
}

.uk-lookup-label {
  display: block;
  margin-bottom: var(--fp-space-xs, 4px);
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-text-secondary, #6e6e73);
}

.uk-lookup-search-row {
  display: flex;
  gap: var(--fp-space-sm, 8px);
  flex-wrap: wrap;
}

.uk-lookup-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--fp-text-primary, #1d1d1f);
  background: var(--fp-bg-primary, #ffffff);
  border: 1px solid var(--fp-border, #e5e7eb);
  border-radius: var(--fp-radius-md, 8px);
}

.uk-lookup-input:focus {
  outline: 2px solid var(--fp-primary, #1799e8);
  outline-offset: 1px;
  border-color: var(--fp-primary, #1799e8);
}

.uk-lookup-button {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-text-inverse, #ffffff);
  background: var(--fp-primary, #1799e8);
  border: none;
  border-radius: var(--fp-radius-md, 8px);
  cursor: pointer;
  transition: var(--fp-transition, all 0.2s ease);
}

.uk-lookup-button:hover { opacity: 0.9; }

.uk-lookup-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.uk-lookup-status {
  margin: var(--fp-space-sm, 8px) 0 0;
  font-size: 13px;
  line-height: 1.45;
  min-height: 1em;
}

.uk-lookup-status-info { color: var(--fp-text-secondary, #6e6e73); }
.uk-lookup-status-error { color: var(--fp-error, #d70015); }

.uk-lookup-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-xs, 4px);
  margin-top: var(--fp-space-sm, 8px);
}

.uk-lookup-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--fp-bg-secondary, #f5f5f7);
  border: 1px solid transparent;
  border-radius: var(--fp-radius-md, 8px);
  cursor: pointer;
  transition: var(--fp-transition, all 0.2s ease);
}

.uk-lookup-result:hover,
.uk-lookup-result:focus-visible {
  background: var(--fp-bg-primary, #ffffff);
  border-color: var(--fp-primary, #1799e8);
}

.uk-lookup-result-address {
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-text-primary, #1d1d1f);
}

.uk-lookup-result-detail {
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-primary, #1799e8);
}

.uk-lookup-result-sale {
  font-size: 12px;
  color: var(--fp-text-secondary, #6e6e73);
}

.uk-lookup-selected {
  margin-top: var(--fp-space-md, 16px);
  padding: var(--fp-space-md, 16px);
  background: var(--fp-bg-secondary, #f5f5f7);
  border-radius: var(--fp-radius-md, 8px);
}

.uk-lookup-selected-address {
  margin: 0 0 var(--fp-space-sm, 8px);
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-text-primary, #1d1d1f);
}

.uk-lookup-selected-label {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fp-text-secondary, #6e6e73);
}

.uk-lookup-selected-value {
  margin: 2px 0 var(--fp-space-sm, 8px);
  font-size: 28px;
  font-weight: 600;
  color: var(--fp-text-primary, #1d1d1f);
}

/* The basis is not fine print: it is how the reader checks the number. */
.uk-lookup-selected-basis {
  margin: 0 0 var(--fp-space-sm, 8px);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fp-text-secondary, #6e6e73);
}

/* What the property physically is, from the EPC register. A definition list
   because that is what it is: term and value, in pairs. */
.uk-lookup-facts {
  margin: 0 0 var(--fp-space-sm, 8px);
  padding-top: var(--fp-space-sm, 8px);
  border-top: 1px solid var(--fp-border, #d1d1d6);
}

.uk-lookup-facts-title {
  margin: 0 0 var(--fp-space-xs, 4px);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fp-text-secondary, #6e6e73);
}

.uk-lookup-facts-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--fp-space-md, 16px);
  margin: 0 0 var(--fp-space-sm, 8px);
  font-size: 13px;
}

.uk-lookup-facts-term {
  margin: 0;
  color: var(--fp-text-secondary, #6e6e73);
}

.uk-lookup-facts-value {
  margin: 0;
  font-weight: 500;
  color: var(--fp-text-primary, #1d1d1f);
}

/* Same standing as the valuation basis: it says how old the description is. */
.uk-lookup-facts-source {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fp-text-secondary, #6e6e73);
}

@media (max-width: 480px) {
  .uk-lookup-facts-list {
    grid-template-columns: 1fr;
    gap: 0 0;
  }

  .uk-lookup-facts-value {
    margin-bottom: var(--fp-space-xs, 4px);
  }
}

.uk-lookup-link {
  padding: 0;
  font-size: 13px;
  color: var(--fp-primary, #1799e8);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.uk-lookup-manual { margin-top: var(--fp-space-md, 16px); }

.uk-lookup-attribution {
  margin: var(--fp-space-md, 16px) 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--fp-text-tertiary, #8e8e93);
}

.uk-lookup-hidden { display: none; }

@media (max-width: 600px) {
  .uk-lookup { padding: var(--fp-space-md, 16px); }
  .uk-lookup-button { width: 100%; }
  .uk-lookup-selected-value { font-size: 24px; }
}

/* When a property has been chosen from the postcode search, the card describes
   the visitor's own home. The "example property" notice and the photo toggle
   would then be lying: we have no photographs of their house, only a map. */
.has-selected-property .demo-example-notice,
.has-selected-property .demo-image-toggle[data-demo-gallery-target="photoToggle"] {
  display: none;
}

/* The lookup panel above has already given the valuation and how it was
   derived, so the card repeating it is the same number twice on one screen.
   The card keeps the address, the map and the attribution — what it is for is
   confirming WHICH property you are continuing with, not pricing it again. */
.has-selected-property .demo-property-card-value-label,
.has-selected-property .demo-property-card-value-amount,
.has-selected-property .demo-property-provenance {
  display: none;
}

.demo-property-provenance {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--fp-text-tertiary, #8e8e93);
}

/* Steps 1 and 2 show the example property's photograph, which beside a
   visitor's own address is a picture of someone else's house. Rather than
   hiding it — which left an empty grey panel — the frame is swapped for the
   same OpenStreetMap view the card above shows, so the property reads as one
   continuous thing through the flow. */
.demo-example-photo-frame.is-map {
  min-height: 220px;
}

.demo-example-photo-frame.is-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
}

/* UK opens on the search alone. The example property appears once the visitor
   picks their own home, or asks for the example explicitly. */
.awaiting-property .demo-example-property {
  display: none;
}

.uk-lookup-example {
  margin: var(--fp-space-md, 16px) 0 0;
  font-size: 13px;
}

/* Suggested postcodes. Prompts, not a whitelist — any UK postcode still works. */
.uk-lookup-examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--fp-space-sm, 8px) 0 0;
}

.uk-lookup-examples-label {
  font-size: 12px;
  color: var(--fp-text-secondary, #6e6e73);
}

.uk-lookup-chip {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--fp-primary, #1799e8);
  background: rgba(23, 153, 232, 0.08);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.uk-lookup-chip:hover {
  border-color: rgba(23, 153, 232, 0.4);
}

.uk-lookup-chip-place {
  color: var(--fp-text-secondary, #6e6e73);
}

/* ---------------------------------------------------------------------------
   Search progress.

   Three live government services, routinely 10-15 seconds. A bare spinner for
   that long reads as broken, so the panel narrates what is happening and says
   how long it should take. The bar is indeterminate on purpose — we cannot
   know real progress, and a fake percentage would be a lie.
   --------------------------------------------------------------------------- */
.uk-lookup-progress {
  margin-top: var(--fp-space-md, 16px);
  padding: var(--fp-space-md, 16px);
  background: var(--fp-bg-secondary, #f5f5f7);
  border-radius: var(--fp-radius-md, 8px);
}

.uk-lookup-progress-bar {
  position: relative;
  height: 4px;
  overflow: hidden;
  background: rgba(23, 153, 232, 0.15);
  border-radius: 999px;
}

.uk-lookup-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--fp-primary, #1799e8);
  border-radius: 999px;
}

.uk-lookup-progress.is-running .uk-lookup-progress-fill {
  animation: uk-lookup-sweep 1.4s ease-in-out infinite;
}

@keyframes uk-lookup-sweep {
  0%   { left: -40%; }
  100% { left: 100%; }
}

.uk-lookup-steps {
  margin: var(--fp-space-md, 16px) 0 0;
  padding: 0;
  list-style: none;
}

.uk-lookup-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--fp-text-tertiary, #8e8e93);
  transition: color 0.3s ease;
}

.uk-lookup-step-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: rgba(23, 153, 232, 0.25);
  border-radius: 50%;
  transition: background 0.3s ease, transform 0.3s ease;
}

.uk-lookup-step.is-active {
  color: var(--fp-text-primary, #1d1d1f);
  font-weight: 500;
}

.uk-lookup-step.is-active .uk-lookup-step-dot {
  background: var(--fp-primary, #1799e8);
  animation: uk-lookup-pulse 1.2s ease-in-out infinite;
}

.uk-lookup-step.is-done {
  color: var(--fp-text-secondary, #6e6e73);
}

.uk-lookup-step.is-done .uk-lookup-step-dot {
  background: var(--fp-success, #34c759);
}

@keyframes uk-lookup-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.6; }
}

.uk-lookup-progress-note {
  margin: var(--fp-space-sm, 8px) 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fp-text-secondary, #6e6e73);
}

/* Respect a preference for less motion: keep the states, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .uk-lookup-progress.is-running .uk-lookup-progress-fill,
  .uk-lookup-step.is-active .uk-lookup-step-dot {
    animation: none;
  }

  .uk-lookup-progress-fill { width: 100%; left: 0; }
}

/* Short-form licence line shown with results, once the full statement above
   has been hidden. Attribution is required where the data is used. */
.uk-lookup-attribution-compact {
  margin-top: var(--fp-space-sm, 8px);
}

/* Map, street photo and aerial side by side, in the frame the single map used
   to fill. Auto-flow columns rather than a fixed three, because the street
   photo removes itself when Google has no picture of that road — the two
   remaining panels then share the width instead of leaving a hole. */
.demo-location-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--fp-space-xs, 4px);
  height: 100%;
  background: var(--fp-bg-secondary, #f5f5f7);
}

/* A button, because it opens the interactive version. Reset the button
   chrome — the panel IS the control. */
.demo-location-panel {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--fp-bg-secondary, #f5f5f7);
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.demo-location-panel:focus-visible {
  outline: 2px solid var(--fp-primary, #007aff);
  outline-offset: -2px;
}

/* The map panel is an iframe, which swallows the click that would open the
   modal. A transparent sheet over it takes the click instead — the little map
   is a preview, and panning happens full size. */
.demo-location-panel[data-location-kind="map"]::after {
  content: "";
  position: absolute;
  inset: 0;
}

.demo-location-panel iframe,
.demo-location-panel-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Over the image rather than beside it: the frame is a fixed height and the
   three panels have to agree on it, so a label on its own line would shorten
   whichever panel carried one. */
.demo-location-panel-label,
.demo-location-panel-date {
  position: absolute;
  z-index: 1;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fp-text-inverse, #ffffff);
  background: var(--fp-overlay, rgba(0, 0, 0, 0.55));
  border-radius: var(--fp-radius-sm, 6px);
}

.demo-location-panel-label {
  top: var(--fp-space-xs, 4px);
  left: var(--fp-space-xs, 4px);
}

.demo-location-panel-date {
  bottom: var(--fp-space-xs, 4px);
  left: var(--fp-space-xs, 4px);
  font-size: 10px;
}

/* Three panels side by side on a phone are three slivers. Stack them — and
   release the frame's fixed height, which is sized for ONE map: left at 320px
   the three stacked panels would be 107px letterboxes each, which is the same
   problem turned on its side. */
@media (max-width: 640px) {
  .demo-location-strip {
    grid-auto-flow: row;
    grid-auto-rows: 200px;
  }

  .has-selected-property .demo-property-map-view {
    height: auto;
  }
}

/* --- Full-size interactive map / street view ------------------------------ */

.demo-location-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--fp-space-md, 16px);
  background: var(--fp-overlay, rgba(0, 0, 0, 0.55));
}

.demo-location-modal-panel {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  height: min(720px, 100%);
  overflow: hidden;
  background: var(--fp-bg-primary, #ffffff);
  border-radius: var(--fp-radius-md, 8px);
}

.demo-location-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-space-md, 16px);
  padding: var(--fp-space-sm, 8px) var(--fp-space-md, 16px);
  border-bottom: 1px solid var(--fp-border, #d1d1d6);
}

.demo-location-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-text-primary, #1d1d1f);
}

.demo-location-modal-close {
  padding: var(--fp-space-xs, 4px) var(--fp-space-sm, 8px);
  font-size: 13px;
  color: var(--fp-primary, #007aff);
  background: none;
  border: 0;
  cursor: pointer;
}

/* The frame takes everything left over: a Street View you can turn is only
   worth opening if it is big. */
.demo-location-modal-body {
  flex: 1;
  min-height: 0;
}

.demo-location-modal-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}