/* Shared styles for sustarproperties.com — most styling is inline in each page */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; }
img { max-width: 100%; }
a { color: #3567C0; }
a:hover { color: #234A93; }
input, select, textarea, button { font-family: inherit; }
:focus-visible { outline: 3px solid #F2B84B; outline-offset: 2px; }
#offer, #top { scroll-margin-top: 16px; }
[hidden] { display: none !important; }

/* Form states */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #B42318 !important; }
.field-error { margin: 2px 0 0; color: #B42318; font-size: 14px; font-weight: 600; }
button[disabled] { opacity: 0.7; cursor: wait !important; }

/* Address suggestions dropdown */
.suggest { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 20; background: #FFFFFF; border: 1px solid #C9D0D9; border-radius: 8px; box-shadow: 0 10px 24px rgba(15,35,80,0.18); overflow: hidden; }
.suggest button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #FFFFFF; border: 0; border-bottom: 1px solid #EEF0F3; padding: 12px 14px; min-height: 44px; font-size: 15px; color: #16202C; cursor: pointer; }
.suggest button:hover, .suggest button[aria-selected="true"] { background: #F1F5FB; }
.suggest .sg-rest { color: #5B6573; }
.suggest .sg-attrib { padding: 6px 14px; font-size: 12px; color: #5B6573; text-align: right; background: #F8F9FB; }

/* Step 2 page */
.pd-legend { font-family: 'Archivo', sans-serif; font-size: 21px; font-weight: 800; color: #16202C; padding: 0 0 4px; margin-bottom: 12px; border-bottom: 1px solid #E6E3DD; width: 100%; }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 20px; }
.pd-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.pd-input { font-size: 16px; padding: 12px 14px; border: 1.5px solid #C9D0D9; border-radius: 8px; min-height: 48px; width: 100%; font-weight: 400; background: #FFFFFF; color: #16202C; }
select.pd-input { padding: 12px 10px; }
textarea.pd-input { resize: vertical; }
.req { color: #B42318; }
.pd-radios { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-radios legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 8px; }
.pd-radios label { display: flex; align-items: center; gap: 10px; font-size: 16px; min-height: 36px; cursor: pointer; }
.pd-radios input { width: 18px; height: 18px; margin: 0; }
#pd-thanks:not([hidden]) { display: flex; }

/* Phones */
@media (max-width: 760px) {
  .hide-phone { display: none; }
  header > div { flex-wrap: nowrap !important; padding: 12px 16px !important; }
  header nav > a:not([href^="tel:"]) { display: none !important; }
  header nav { gap: 0 !important; }
  header a[href^="tel:"] { white-space: nowrap; font-size: 16px !important; border: 1.5px solid #3567C0; border-radius: 8px; padding: 9px 12px; min-height: 44px; display: inline-flex !important; align-items: center; gap: 6px; }
  h1 { font-size: 34px !important; }
  h2 { font-size: 28px !important; }
  section > div[style*="padding: 88px 24px"] { padding: 56px 20px !important; }
  section > div[style*="padding: 72px 24px"] { padding: 40px 20px 48px !important; gap: 32px !important; }
  section > div[style*="padding: 80px 24px"] { padding: 56px 20px !important; }
  .offer-form { padding: 22px !important; }
  .offer-form h2 { font-size: 21px !important; }
  .pd-card { padding: 24px 18px !important; }
  #pd-thanks h1 { font-size: 28px !important; }
}