/* ====== Global overrides that must load last ====== */
:root{
  --bg:#ffffff;
  --panel:#f6fbff;
  --muted:#4d89b3;
  --text:#0288d1;
  --accent:#4fc3f7;
  --border:#cfe8fb;
}

/* Ensure EVERYTHING inherits the same soft font */
*,
.Select-control, .Select-menu-outer, .Select-option, .VirtualizedSelectOption,
.Select-placeholder, .Select-value-label, .dash-dropdown,
input, textarea, select, button {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
}

/* Address SEARCH (Google Places) dropdown: force white bg */
.pac-container { background: #ffffff !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 16px rgba(2,136,209,.08) !important; }
.pac-item { background: #ffffff !important; color: var(--text) !important; }
.pac-item:hover, .pac-item.pac-item-selected { background: #eef7ff !important; color: var(--text) !important; }
.pac-matched { color: #006aa1 !important; }  /* emphasise match */

/* Flatten the three dropdowns (if you still use these ids) */
#property-type, #listing-status, #parking { border: 1px solid var(--border) !important; border-radius: 10px !important; background: #ffffff !important; padding: 0 !important; }
#property-type .Select-control, #listing-status .Select-control, #parking .Select-control { border: none !important; box-shadow: none !important; background: transparent !important; }
#property-type .Select.is-focused > .Select-control,
#listing-status .Select.is-focused > .Select-control,
#parking .Select.is-focused > .Select-control { box-shadow: 0 0 0 3px rgba(79,195,247,.25) !important; border: none !important; }

/* “Briefly explain your view” placeholder consistency */
textarea::placeholder { font-family: inherit !important; color: #8fb3cf !important; }

/* Make the generic react-select look light everywhere */
.Select-menu-outer { background: #ffffff !important; border: 1px solid var(--border) !important; }
.VirtualizedSelectOption, .Select-option { background: #ffffff !important; color: var(--text) !important; }
.Select-option.is-focused, .VirtualizedSelectFocusedOption { background: #eef7ff !important; color: var(--text) !important; }
.Select-option.is-selected { background: rgba(79,195,247,.18) !important; color: var(--text) !important; }
.Select-placeholder { color: #8fb3cf !important; }

/* Re-center the site header/title (matches old behavior) */
.site-header{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px 12px 6px;
}
.site-header .brand-title{
  text-align:center;
  margin:0;
}

/* === Adjust hero alignment: logo vs text === */
.hero-grid {
  align-items: flex-start !important;   /* align tops, not centers */
}

/* Cap logo height & shift it up a touch */
.hero-logo-img {
  max-height: 100px !important;         /* was 110–120px */
  margin-top: -4px !important;          /* nudge upward */
}

/* Slightly smaller welcome headline */
.hero-title {
  font-size: clamp(20px, 3.6vw, 30px) !important;  /* down from ~36px */
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Make the hero headline a bit smaller */
.hero-title {
  font-size: clamp(18px, 3.2vw, 26px) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* === HERO: fix logo stretch + promote typing text === */
.hero-grid { align-items: flex-start !important; }

/* Never stretch logo; just scale down within its box */
.hero-logo { display: flex; align-items: flex-start; justify-content: flex-start; }
.hero-logo-img {
  height: auto !important;
  width: auto !important;         /* key: prevents width-based stretch */
  max-width: 100% !important;     /* don’t overflow its column */
  max-height: 110px !important;   /* cap height; adjust to taste */
  object-fit: contain !important;
  margin-top: -4px !important;    /* tiny nudge up to align with text */
}

/* Make the typing line behave like the main headline */
#typing-text.page-subtitle {
  white-space: pre-line;          /* show \n as a real line break */
  font-weight: 800 !important;
  font-size: clamp(18px, 3.2vw, 26px) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-align: left !important;    /* aligns with logo on desktop */
  color: var(--text) !important;  /* headline colour */
}

/* On mobile, center the typing line again if you prefer */
@media (max-width: 900px) {
  #typing-text.page-subtitle { text-align: center !important; }
}

/* === Unify hero typing text sizing === */
#typing-text.page-subtitle {
  white-space: pre-line;  /* keep the line break between the two sentences */
  font-weight: 800 !important;
  font-size: clamp(20px, 3.2vw, 20px) !important;  /* consistent for both lines */
  line-height: 1.25 !important;
  margin: 0 !important;
  text-align: left !important;
  color: var(--text) !important;  /* use main text colour */

  position: relative;
  top: 0.5em;                         /* nudge down ~half a line for logo alignment */
}


/* Center contents inside each hero column */
.hero-grid {
  align-items: center !important;              /* vertical centering across the row */
}

/* Each column becomes a flex box and centers its child horizontally + vertically */
.hero-logo,
.hero-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;          /* horizontal centering within the column */
}

/* Keep the logo tidy; no stretching */
.hero-logo-img {
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 110px !important;
  object-fit: contain !important;
}

/* Make the typing block a centered headline; remove previous vertical nudge */
#typing-text.page-subtitle {
  white-space: pre-line;
  font-weight: 800 !important;
  font-size: clamp(16px, 2.6vw, 21px) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-align: center !important;               /* centered within the right column */
  position: static !important;                 /* undo earlier top:0.5em nudge */
}

/* === Sticky footer fix === */

/* Make the outer shell a vertical flex layout */
html, body {
  height: 100% !important;
}

body > #_dash-app-content,  /* Dash root container */
body > #react-entry-point {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

/* Main page content should expand to push footer down */
#page-content {
  flex: 1 0 auto !important;
}

/* Footer sticks at the bottom */
.site-footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;   /* pushes it to the bottom */
}

/* === Sticky footer using app-level wrapper === */
.page-shell {
  min-height: 100vh;                 /* fill viewport height */
  display: flex;
  flex-direction: column;
}

#page-content,
.page-content {
  flex: 1 0 auto;                    /* expand to push footer down */
}

.site-footer {
  margin-top: auto;                  /* sit at the bottom */
  flex-shrink: 0;
  /* (optional cosmetics) ensure line is visible across the page */
  border-top: 1px solid var(--border);
}

/* === Footer: left-align text + full-width divider line === */

/* Ensure the footer sits at the bottom (from earlier), but is left-aligned */
.site-footer {
  text-align: left !important;
  border-top: none !important;     /* we'll draw a full-width line via ::before */
  position: relative;              /* needed for the pseudo-element line */
  margin-top: auto !important;     /* keep sticky behavior */
  flex-shrink: 0;
}

/* Draw a 100vw line that spans the entire viewport width */
.site-footer::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);     /* center the 100vw line against the page */
  top: -1px;                       /* sits just above the footer content */
  width: 100vw;                    /* full-width divider */
  height: 1px;
  background: var(--border);
}

/* Optional: keep the footer’s inner content constrained but left-aligned */
.site-footer > div {
  margin-left: 0 !important;       /* ensure left alignment inside */
  text-align: left !important;
}

/* Smaller radio buttons to match meta/disclaimer text */
.pill .dash-radioitems label,
.pill label {
  font-size: 13px !important;
  color: var(--muted) !important;   /* matches disclaimer style */
  font-weight: 400 !important;
}
.pill .opt input {
  transform: scale(0.85);           /* slightly shrink actual radio circles */
  margin-right: 4px;
}


/* === Compact, single-rectangle dropdowns (fix tall/inner box look) === */

/* 1) Reset the outer wrappers so they don't draw their own box */
#property-type, #listing-status, #parking {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* If you style by class (recommended), ensure wrapper is clean */
.dropdown-dark {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* 2) Draw the only rectangle on the actual Select control; make it shorter */
.dropdown-dark .Select-control {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  min-height: 34px !important;
  height: 34px !important;          /* compact overall height */
  cursor: pointer;
}

/* 3) Align placeholder/value vertically and remove extra padding */
.dropdown-dark .Select-placeholder,
.dropdown-dark .Select--single > .Select-control .Select-value {
  padding: 0 28px 0 10px !important; /* room for arrow on the right */
  line-height: 32px !important;      /* 34px minus 2px border */
  margin: 0 !important;
  color: var(--text) !important;
  background: transparent !important;
  border: 0 !important;
}

/* 4) Keep input field the same height (for typing/search) */
.dropdown-dark .Select-input {
  height: 32px !important;
}
.dropdown-dark .Select-input > input {
  line-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 5) Arrow spacing + color */
.dropdown-dark .Select-arrow-zone { padding: 0 8px !important; }
.dropdown-dark .Select-arrow { border-top-color: var(--muted) !important; }

/* 6) Focus ring on the control (not the wrapper) */
.dropdown-dark .Select.is-focused > .Select-control {
  box-shadow: 0 0 0 3px rgba(79,195,247,.25) !important;
  border-color: var(--border) !important;
}

/* 7) Menu look-and-feel */
.dropdown-dark .Select-menu-outer {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin-top: 4px !important;
  background: #ffffff !important;
}
.dropdown-dark .Select-option {
  padding: 6px 10px !important;
}

/* 8) Ensure no 'inner chip' background appears on selected value */
.dropdown-dark .Select-value {
  background: transparent !important;
  border: 0 !important;
}

/* === Fix dropdown boxes: always visible, white background === */
#property-type .Select-control,
#listing-status .Select-control,
#parking .Select-control,
.dropdown-dark .Select-control {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  min-height: 34px !important;
  box-shadow: none !important;
}

/* === Google Places dropdown: align pin + text === */
.pac-container { /* already styled earlier; keep it */
  /* no change needed */
}

.pac-item {
  display: flex !important;
  align-items: center !important;    /* vertically center icon and text */
  line-height: 1.3 !important;
}

.pac-item .pac-icon {
  width: 18px !important;
  height: 18px !important;
  margin-right: 8px !important;
  margin-top: 0 !important;          /* remove odd upward nudge */
  align-self: center !important;     /* ensure the pin sits on the same baseline */
}

.pac-item .pac-item-query {          /* primary line of the suggestion */
  font-weight: 600;
}

/* === Submit Opinion button: size up + white text === */
#submit-opinion-button.btn {
  font-size: 16px !important;        /* bump up; tweak to taste */
  font-weight: 700 !important;
  color: #ffffff !important;         /* white text */
}

#submit-opinion-button.btn:disabled {
  opacity: 0.7;
}