/* ============================================
   Ramaker & Associates — GPR Prospect Hub
   ramaker.css
   ============================================ */

:root {
  --orange:       #e67e22;
  --orange-dark:  #d35400;
  --orange-light: #fef3e8;
  --blue:         #0f85a9;
  --blue-dark:    #093653;
  --blue-light:   #37add1;
  --blue-bg:      #eff4fb;
  --navy:         #1a2332;
  --navy-light:   #243447;
  --white:        #ffffff;
  --gray-50:      #f9fafb;
  --gray-100:     #f3f4f6;
  --gray-200:     #e5e7eb;
  --gray-300:     #d1d5db;
  --gray-400:     #9ca3af;
  --gray-500:     #6b7280;
  --gray-600:     #4b5563;
  --gray-700:     #374151;
  --gray-800:     #1f2937;
  --green:        #16a34a;
  --green-light:  #dcfce7;
  --red:          #dc2626;
  --red-light:    #fee2e2;

  --header-h: 64px;
  --footer-h: 72px;
  --progress-h: 4px;
  --content-max: 720px;
  --border-r: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --transition: all .2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: var(--gray-800);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
}

/* ── Progress Bar ── */
#progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--progress-h);
  background: var(--gray-200);
  z-index: 1000;
}
#progress-fill {
  height: 100%;
  background: var(--blue-light);
  width: 0%;
  transition: width .5s ease;
}

/* ── Header ── */
#site-header {
  position: fixed;
  top: var(--progress-h); left: 0; right: 0;
  height: var(--header-h);
  background: linear-gradient(to right, #093653, #0f85a9);
  z-index: 999;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-mark {
  width: 38px;
  height: 38px;
  background: var(--blue-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--orange);
  flex-shrink: 0;
}
.logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.logo-name {
  font-size: .9rem;
  font-weight: 700;
  color: white;
  line-height: 1.2;
}
.logo-tagline {
  font-size: .7rem;
  color: rgba(255,255,255,.6);
  font-weight: 400;
  letter-spacing: .02em;
}
.step-indicator {
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
}

/* ── Form Container ── */
#form-container {
  padding-top: calc(var(--progress-h) + var(--header-h));
  padding-bottom: var(--footer-h);
  min-height: 100vh;
}

/* ── Steps ── */
.step {
  display: none;
  animation: stepIn .3s ease;
}
.step.active { display: block; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px 24px 32px;
}

.step-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gray-800);
  line-height: 1.2;
  margin-bottom: 10px;
}
h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.3;
}
.step-desc {
  font-size: .95rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ── Service Type Cards ── */
.service-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--border-r);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.service-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.service-card.selected {
  border-color: var(--blue);
  background: var(--blue-bg);
  box-shadow: var(--shadow-md);
}
.service-card-icon {
  width: 48px;
  height: 48px;
  background: var(--blue-bg);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}
.service-card.selected .service-card-icon {
  background: var(--blue);
}
.service-card-icon .material-icons-round {
  font-size: 1.5rem;
  color: var(--blue);
  transition: var(--transition);
}
.service-card.selected .service-card-icon .material-icons-round {
  color: white;
}
.service-card-body {
  flex: 1;
}
.service-card-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 6px;
}
.service-card-body p {
  font-size: .875rem;
  color: var(--gray-500);
  line-height: 1.55;
  margin-bottom: 12px;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--gray-600);
  letter-spacing: .02em;
}
.service-card.selected .tag {
  background: rgba(15,133,169,.15);
  color: var(--blue-dark);
}
.service-card-select {
  flex-shrink: 0;
  padding-top: 2px;
}
.service-card-select .material-icons-round {
  font-size: 1.4rem;
  color: var(--gray-300);
  transition: var(--transition);
}
.service-card.selected .service-card-select .material-icons-round {
  color: var(--blue);
  /* Replace icon via JS */
}

/* ── Form Grid ── */
.form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group.full  { flex: 1 1 100%; }
.form-group.half  { flex: 1 1 calc(50% - 8px); min-width: 140px; }
.form-group.flex-3 { flex: 3 1 200px; }
.form-group.flex-1 { flex: 1 1 80px; min-width: 80px; }

label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: .01em;
}
.req { color: var(--blue); }

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--gray-800);
  background: white;
  transition: var(--transition);
  appearance: none;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(15,133,169,.12);
}
input.error, select.error { border-color: var(--red); }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
::placeholder { color: var(--gray-400); }

/* ── SMS Opt-In Card ── */
.sms-optin-card {
  background: linear-gradient(135deg, var(--blue-bg) 0%, #daeef6 100%);
  border: 1.5px solid rgba(15,133,169,.25);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sms-optin-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sms-optin-icon {
  width: 42px;
  height: 42px;
  background: var(--blue);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sms-optin-icon .material-icons-round { color: white; font-size: 1.3rem; }
.sms-optin-pitch {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sms-optin-pitch strong {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gray-800);
}
.sms-optin-pitch span {
  font-size: .825rem;
  color: var(--gray-500);
  line-height: 1.5;
}
.sms-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 9px;
  transition: var(--transition);
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.sms-checkbox-label:hover {
  border-color: var(--blue);
  background: var(--blue-bg);
}
.sms-checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sms-checkbox-custom {
  width: 22px;
  height: 22px;
  border: 2px solid var(--gray-300);
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background: white;
}
.sms-checkbox-label input:checked ~ .sms-checkbox-custom {
  background: var(--blue);
  border-color: var(--blue);
}
.sms-checkbox-custom::after {
  content: '';
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity .15s ease;
}
.sms-checkbox-label input:checked ~ .sms-checkbox-custom::after { opacity: 1; }
.sms-checkbox-text {
  font-size: .9rem;
  font-weight: 600;
  color: var(--gray-700);
  line-height: 1.4;
}
.sms-legal {
  font-size: .72rem;
  color: var(--gray-400);
  line-height: 1.6;
  display: none;
  padding: 10px 12px;
  background: white;
  border-radius: 7px;
  border: 1px solid var(--gray-100);
}
.sms-legal.visible { display: block; }
.sms-legal strong { color: var(--gray-500); font-weight: 600; }
.sms-legal-links {
  display: block;
  margin-top: 6px;
}
.sms-legal-links a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}
.sms-legal-links a:hover { text-decoration: underline; }

/* ── No Address Checkbox ── */
.no-address-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--gray-500);
  line-height: 1.5;
  font-weight: 400;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  transition: var(--transition);
}
.no-address-label:hover {
  border-color: var(--blue);
  background: var(--blue-bg);
  color: var(--gray-700);
}
.no-address-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.no-address-check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background: white;
}
.no-address-label input:checked ~ .no-address-check {
  background: var(--blue);
  border-color: var(--blue);
}
.no-address-check::after {
  content: '';
  width: 4px;
  height: 7px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity .15s ease;
}
.no-address-label input:checked ~ .no-address-check::after { opacity: 1; }

/* Dimmed address field when no-address checked */
input.field-optional {
  background: var(--gray-50);
  color: var(--gray-400);
}

.form-divider {
  position: relative;
  text-align: center;
  margin: 8px 0 4px;
}
.form-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--gray-200);
}
.form-divider span {
  position: relative;
  background: var(--gray-50);
  padding: 0 12px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Map Step ── */
.map-step-full {
  position: fixed;
  inset: 0;
  top: calc(var(--progress-h) + var(--header-h));
  bottom: var(--footer-h);
  display: none;
  flex-direction: column;
  /* No transform animation — WebGL + CSS transform = compositing artifacts */
  animation: none;
}
.map-step-full.active {
  display: flex;
  animation: mapStepFade .25s ease forwards;
}
@keyframes mapStepFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#map {
  flex: 1;
  width: 100%;
  cursor: crosshair;
}

/* Map header overlay */
.map-ui-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  pointer-events: none;
}
.map-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: rgba(9,54,83,.96);
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.map-title-block .step-eyebrow { color: var(--blue-light); margin-bottom: 4px; }
.map-title-block h2 { color: white; font-size: 1rem; }
.map-area-badge {
  text-align: right;
  flex-shrink: 0;
  pointer-events: none;
}
.area-acres {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1.1;
}
.area-sqft {
  font-size: .75rem;
  color: var(--gray-400);
  font-weight: 500;
}
.map-point-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(9,54,83,.85);
  backdrop-filter: blur(8px);
  color: var(--gray-300);
  font-size: .8rem;
  font-weight: 600;
  padding: 6px 14px;
  margin: 8px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
}
.map-point-counter .material-icons-round {
  font-size: 1rem;
  color: var(--blue-light);
}

/* Map footer bar */
.map-footer-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(9,54,83,.96);
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.map-footer-center {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--gray-300);
  font-weight: 500;
}
.hint-icon { font-size: 1.1rem; color: var(--blue-light); }

/* Mapbox custom markers — keep orange for satellite visibility */
.map-marker {
  width: 30px;
  height: 30px;
  background: var(--orange);
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  font-family: 'Inter', sans-serif;
}
.map-marker:hover { transform: scale(1.15); }
.map-marker.first-point {
  background: white;
  color: var(--orange);
  border-color: var(--orange);
}
.map-marker.first-point.pulsing {
  animation: pulse-ring 1.2s ease infinite;
  cursor: pointer;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(230,126,34,.6), 0 2px 8px rgba(0,0,0,.35); }
  70%  { box-shadow: 0 0 0 12px rgba(230,126,34,0), 0 2px 8px rgba(0,0,0,.35); }
  100% { box-shadow: 0 0 0 0 rgba(230,126,34,0), 0 2px 8px rgba(0,0,0,.35); }
}

/* ── Travel Card ── */
.travel-card {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--border-r);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.travel-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gray-500);
  font-size: .95rem;
}
.travel-loading .material-icons-round { color: var(--blue); font-size: 1.3rem; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.travel-result {
  display: flex;
  align-items: center;
  gap: 20px;
}
.travel-result-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.travel-result-icon.halfday { background: var(--green-light); }
.travel-result-icon.halfday .material-icons-round { color: var(--green); font-size: 1.6rem; }
.travel-result-icon.fullday { background: var(--blue-bg); }
.travel-result-icon.fullday .material-icons-round { color: var(--blue); font-size: 1.6rem; }

.travel-result-body { flex: 1; }
.travel-result-type {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 3px;
}
.travel-result-meta {
  font-size: .85rem;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.travel-result-distance {
  font-size: .8rem;
  color: var(--gray-400);
}
.travel-result-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--orange);
}

/* ── Map Tour Modal ── */
.tour-overlay {
  /* Use fixed (not absolute) to avoid iOS Safari position:absolute-inside-fixed bugs */
  position: fixed;
  top: calc(var(--progress-h) + var(--header-h));
  bottom: var(--footer-h);
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(9,54,83,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tour-overlay.hidden { display: none; }

/* Locate modal must always sit above the polygon tour modal */
#locate-modal-overlay { z-index: 60; }

.tour-modal {
  background: white;
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}

.tour-screen {
  display: none;
  padding: 28px 28px 24px;
  animation: stepIn .25s ease;
}
.tour-screen.active { display: block; opacity: 1; }

.tour-icon-wrap {
  width: 64px;
  height: 64px;
  background: var(--blue-bg);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
}
.tour-icon-wrap .material-icons-round {
  font-size: 2rem;
  color: var(--blue);
}

.tour-modal h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 10px;
}
.tour-modal p {
  font-size: .9rem;
  color: var(--gray-500);
  line-height: 1.65;
  margin-bottom: 8px;
}
.tour-modal p strong { color: var(--gray-700); }

.tour-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-100);
}

.tour-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-200);
  transition: var(--transition);
}
.tour-dot.active {
  background: var(--blue);
  width: 22px;
  border-radius: 4px;
}

/* SVG Diagram */
.tour-diagram-wrap {
  margin: 0 0 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
}
.tour-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SVG animations */
.svg-dot-anim  { transition: opacity .3s ease; }
.svg-line-anim { transition: stroke-dashoffset .4s ease; }
.svg-fill-anim { transition: opacity .5s ease; }

/* Close diagram — matches the orange map marker style for teaching */
.tour-close-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0 20px;
}
.close-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.close-dot {
  width: 48px;
  height: 48px;
  background: white;
  border: 3px solid var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--orange);
  font-family: 'Inter', sans-serif;
}
.pulsing-demo {
  animation: pulse-ring 1.4s ease infinite;
}
.close-arrow .material-icons-round {
  font-size: 2rem;
  color: var(--blue-light);
  animation: bounce-down .9s ease infinite;
}
.close-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: .04em;
}

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ── Locate Modal Tips ── */
.locate-nav-tips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.locate-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  font-size: .85rem;
  color: var(--gray-600);
  line-height: 1.45;
}
.locate-tip .material-icons-round {
  font-size: 1.2rem;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 1px;
}
.locate-tip strong { color: var(--gray-800); }

/* Cemetery Pin Marker — keep orange for satellite visibility */
.cemetery-pin {
  width: 0;
  height: 0;
  position: relative;
}
.cemetery-pin::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -16px;
  width: 32px;
  height: 32px;
  background: var(--orange);
  border: 3px solid white;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
  animation: pin-drop .35s cubic-bezier(.34,1.56,.64,1);
}
.cemetery-pin::after {
  content: '';
  position: absolute;
  top: -12px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  transform: rotate(-45deg);
  margin-left: 7px;
  margin-top: 7px;
}
@keyframes pin-drop {
  from { transform: rotate(-45deg) scale(0) translateY(-20px); opacity: 0; }
  to   { transform: rotate(-45deg) scale(1) translateY(0); opacity: 1; }
}

/* Locate mode cursor */
.map-locate-mode { cursor: crosshair !important; }

/* ── Nav Tips Grid ── */
.nav-tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 4px;
}
.nav-tip {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.nav-tip-icon {
  width: 56px;
  height: 56px;
  background: var(--blue-dark);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.nav-tip-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-700);
  line-height: 1.2;
}
.nav-tip-methods {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-tip-methods span {
  font-size: .7rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.method-icon { font-size: .85rem; line-height: 1; }

/* Pan animation */
.nav-anim-pan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nav-hand {
  font-size: 1.6rem;
  color: var(--blue-light);
  animation: pan-slide 2s ease-in-out infinite;
}
@keyframes pan-slide {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-7px); }
  75%       { transform: translateX(7px); }
}
.pan-arrows {
  display: flex;
  gap: 12px;
}
.pan-arrows .material-icons-round {
  font-size: .9rem;
  color: var(--gray-500);
  opacity: .6;
}

/* Zoom In animation */
.nav-anim-zoom-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.zoom-glass {
  font-size: 1.6rem;
  color: var(--blue-light);
}
.nav-anim-zoom-in .zoom-glass {
  animation: zoom-in-pulse 1.8s ease-in-out infinite;
}
@keyframes zoom-in-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.25); }
}
.nav-anim-zoom-out .zoom-glass {
  animation: zoom-out-pulse 1.8s ease-in-out infinite;
}
@keyframes zoom-out-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(.75); }
}

/* Pinch fingers */
.pinch-fingers {
  display: flex;
  gap: 4px;
  font-size: .85rem;
  margin-top: -2px;
}
.pinch-fingers.spread .f-left  { animation: finger-spread-left  1.8s ease-in-out infinite; }
.pinch-fingers.spread .f-right { animation: finger-spread-right 1.8s ease-in-out infinite; }
.pinch-fingers.pinch  .f-left  { animation: finger-pinch-left   1.8s ease-in-out infinite; }
.pinch-fingers.pinch  .f-right { animation: finger-pinch-right  1.8s ease-in-out infinite; }

@keyframes finger-spread-left  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes finger-spread-right { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes finger-pinch-left   { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes finger-pinch-right  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }

/* Click animation */
.nav-anim-click {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.click-finger {
  font-size: 1.6rem;
  color: var(--blue-light);
  animation: tap-down 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes tap-down {
  0%, 60%, 100% { transform: scale(1) translateY(0); }
  40%           { transform: scale(.88) translateY(3px); }
}
.click-ripple {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--blue-light);
  animation: ripple-out 2s ease-out infinite;
  opacity: 0;
}
@keyframes ripple-out {
  0%        { transform: scale(.3); opacity: .8; }
  35%, 100% { transform: scale(1.8); opacity: 0; }
}

/* ── Point Confirmation Toast ── */
.point-toast {
  position: fixed;
  top: calc(var(--progress-h) + var(--header-h) + 80px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--blue-dark);
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.1);
}
.point-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.point-toast .material-icons-round {
  font-size: 1.1rem;
  color: var(--green);
}

/* ── Info Box ── */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: .85rem;
  color: var(--gray-600);
  line-height: 1.55;
}
.info-box .material-icons-round {
  font-size: 1.1rem;
  color: var(--gray-400);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Questionnaire ── */
.question-group {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gray-100);
}
.question-group:last-child { border-bottom: none; }
.q-label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 12px;
  line-height: 1.4;
}
.q-hint {
  font-size: .8rem;
  font-weight: 400;
  color: var(--gray-400);
  margin-left: 4px;
}
.q-badge-addon {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  background: var(--orange-light);
  color: var(--orange-dark);
  border: 1px solid #f5cba7;
  border-radius: 20px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: .01em;
}
.q-sublabel {
  font-size: .86rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: -6px 0 12px;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.radio-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cb-item, .rb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--gray-700);
  transition: var(--transition);
  font-family: inherit;
  line-height: 1.4;
}
.cb-item:hover, .rb-item:hover {
  border-color: var(--blue);
  background: var(--blue-bg);
}
.cb-item input, .rb-item input {
  width: auto;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--blue);
}
.cb-item input { border: none; box-shadow: none; }
.rb-item input { border: none; box-shadow: none; }

/* ── Service Pricing List ── */
.pricing-area-summary {
  background: var(--blue-dark);
  color: white;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pricing-area-summary .material-icons-round { color: var(--orange); }
.pricing-area-summary strong { color: var(--orange); }

.service-pricing-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.pricing-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.pricing-row.selected {
  border-color: var(--blue);
  background: var(--blue-bg);
}
.pricing-row.locked { opacity: .5; pointer-events: none; }
.pricing-row.locked.available { opacity: 1; pointer-events: auto; }
.pricing-row.included { pointer-events: none; }
.pricing-row.included .pricing-check { cursor: default; }

.pricing-check {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
  background: white;
}
.pricing-check:hover { border-color: var(--blue); }
.pricing-check.checked {
  background: var(--blue);
  border-color: var(--blue);
}
.pricing-check .material-icons-round { font-size: 1.1rem; color: var(--gray-300); }
.pricing-check.checked .material-icons-round { color: white; }
.pricing-check .icon-check { display: none; }
.pricing-check.checked .icon-add { display: none; }
.pricing-check.checked .icon-check { display: block; color: white; }
.pricing-check .icon-lock { display: none; color: var(--gray-300); }
.pricing-row.required .pricing-check { pointer-events: none; }

.pricing-info { flex: 1; }
.pricing-name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-desc-text {
  font-size: .8rem;
  color: var(--gray-500);
  line-height: 1.45;
}
.required-badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--blue);
  color: white;
  padding: 2px 7px;
  border-radius: 20px;
}
.pricing-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-700);
  min-width: 80px;
  text-align: right;
  white-space: nowrap;
}

.pricing-total-card {
  background: var(--blue-dark);
  color: white;
  border-radius: 12px;
  padding: 20px 22px;
}
.total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 600;
}
.total-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--orange);
}
.total-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .78rem;
  color: var(--gray-400);
  line-height: 1.5;
}
.total-note .material-icons-round { font-size: .9rem; margin-top: 1px; flex-shrink: 0; }

/* Spot Pricing Card */
.spot-pricing-card {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--border-r);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.spot-rate-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue);
  margin-bottom: 6px;
}
.spot-rate-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 6px;
}
.spot-rate-desc {
  font-size: .875rem;
  color: var(--gray-500);
  margin-bottom: 16px;
  line-height: 1.55;
}
.spot-rate-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
}
.spot-rate-price span {
  font-size: .85rem;
  font-weight: 500;
  color: var(--gray-400);
}

/* ── Review Summary ── */
#review-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}
.review-block {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.review-block-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue);
  margin-bottom: 12px;
}
.review-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: .875rem;
  border-bottom: 1px solid var(--gray-100);
  gap: 16px;
}
.review-row:last-child { border-bottom: none; }
.review-row-label { color: var(--gray-500); flex-shrink: 0; }
.review-row-value { color: var(--gray-800); font-weight: 500; text-align: right; }
.review-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  margin-top: 8px;
  border-top: 2px solid var(--gray-200);
}
.review-total-label { font-weight: 700; color: var(--gray-700); }
.review-total-value { font-size: 1.4rem; font-weight: 800; color: var(--orange); }

/* ── Submit Footer ── */
.submit-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.privacy-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--gray-400);
}
.privacy-note .material-icons-round { font-size: .95rem; }
.btn-submit {
  width: 100%;
  max-width: 400px;
  padding: 15px 28px;
  font-size: 1rem;
  gap: 10px;
}

/* ── Confirmation ── */
.center-content { text-align: center; max-width: 520px; }
.confirm-icon {
  width: 72px;
  height: 72px;
  background: var(--green-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.confirm-icon .material-icons-round {
  font-size: 2.2rem;
  color: var(--green);
}
.center-content h1 { text-align: center; }
.center-content .step-desc { text-align: center; }
.confirm-details {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px auto;
  max-width: 400px;
  box-shadow: var(--shadow-sm);
}
.confirm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--gray-600);
}
.confirm-item .material-icons-round { color: var(--blue); font-size: 1.1rem; }
.confirm-portal-cta {
  background: var(--orange-light);
  border: 1px solid #f5cba7;
  border-radius: 14px;
  padding: 24px 28px;
  margin: 24px 0 0;
  max-width: 440px;
  width: 100%;
  text-align: center;
}
.confirm-portal-msg {
  font-size: .9rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-bottom: 18px;
}
.confirm-portal-btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 13px 32px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background .15s;
}
.confirm-portal-btn:hover { background: var(--orange-dark); }
.confirm-cred-hint {
  font-size: .76rem;
  color: var(--gray-400);
  margin-top: 12px;
  line-height: 1.5;
}

.confirm-tagline {
  font-size: .875rem;
  color: var(--gray-400);
  margin-top: 24px;
}

/* ── Navigation Footer ── */
#nav-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  background: white;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 12px;
  z-index: 999;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}

/* Map step nav override */
.map-step-full.active ~ #nav-footer { display: none; }

.nav-error {
  font-size: .8rem;
  color: var(--red);
  font-weight: 500;
  text-align: center;
  flex: 1;
}

/* ── Buttons ── */
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 9px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue);
  color: white;
  box-shadow: 0 2px 8px rgba(15,133,169,.35);
}
.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 4px 14px rgba(15,133,169,.4);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
@keyframes btn-ready-ring {
  0%   { outline: 3px solid rgba(230,126,34,.85); outline-offset: 1px; }
  65%  { outline: 3px solid rgba(230,126,34,0);   outline-offset: 9px; }
  100% { outline: 3px solid rgba(230,126,34,0);   outline-offset: 9px; }
}
.btn-primary.btn-ready {
  transition: background-color .2s ease, transform .2s ease;
  animation: btn-ready-ring 1.6s ease-out infinite;
}
.btn-primary:disabled {
  background: var(--gray-300);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn-ghost {
  background: transparent;
  color: var(--gray-600);
  border: 1.5px solid var(--gray-200);
}
.btn-ghost:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--gray-800);
}
.btn-ghost.dark {
  color: var(--gray-300);
  border-color: rgba(255,255,255,.2);
}
.btn-ghost.dark:hover {
  background: rgba(255,255,255,.08);
  color: white;
}
.btn-primary .material-icons-round,
.btn-ghost  .material-icons-round { font-size: 1.1rem; }

/* ── Map Confirmation Sheet ── */
.map-confirm-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.map-confirm-sheet.visible {
  transform: translateY(0);
  pointer-events: auto;
}
.confirm-sheet-inner {
  background: var(--blue-dark);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 -8px 32px rgba(0,0,0,.35);
}
.confirm-sheet-area-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.confirm-sheet-check .material-icons-round {
  font-size: 2rem;
  color: var(--green);
}
.confirm-sheet-numbers { flex: 1; }
.confirm-sheet-acres {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1.1;
}
.confirm-sheet-sqft {
  font-size: .8rem;
  color: var(--gray-400);
  font-weight: 500;
}
.confirm-sheet-question {
  font-size: .9rem;
  font-weight: 600;
  color: white;
  flex: 0 0 100%;
}
.confirm-sheet-buttons {
  display: flex;
  gap: 10px;
}
.confirm-sheet-btn { flex: 1; justify-content: center; }
.confirm-sheet-reset-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: var(--gray-500);
  line-height: 1.4;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 12px;
}
.btn-reset-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--gray-300);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  flex-shrink: 0;
}
.btn-reset-inline:hover {
  background: rgba(255,255,255,.15);
  color: white;
}
.btn-reset-inline .material-icons-round { font-size: .9rem; }

/* Draggable marker */
.map-marker.draggable {
  cursor: grab;
  box-shadow: 0 0 0 3px rgba(15,133,169,.5), 0 2px 8px rgba(0,0,0,.35);
}
.map-marker.draggable:active { cursor: grabbing; }

/* ── Mapbox attribution override ── */
.mapboxgl-ctrl-attrib { font-size: 10px !important; }
.mapboxgl-ctrl-logo { display: none !important; }

/* ── Editable GPS Cards ─────────────────────── */
.egps-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.egps-card {
  display: block;
  cursor: pointer;
  border-radius: 14px;
  border: 2px solid var(--gray-200);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  overflow: hidden;
}
.egps-card input[type="radio"] { display: none; }
.egps-card:has(input:checked) {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(230,126,34,.15);
}
.egps-card-inner {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.egps-icon {
  font-size: 2rem;
  color: var(--orange);
  margin-bottom: 6px;
}
.egps-card:has(input[value="no"]) .egps-icon { color: var(--gray-400); }
.egps-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--gray-800);
}
.egps-price {
  font-size: .88rem;
  font-weight: 600;
  color: var(--orange-dark);
}
.egps-card:has(input[value="no"]) .egps-price { color: var(--gray-500); }
.egps-desc {
  font-size: .8rem;
  color: var(--gray-500);
  line-height: 1.45;
  margin-top: 2px;
}

/* ── Building Step ──────────────────────────── */
.building-spinner {
  margin-bottom: 24px;
}
.spinner-arc {
  transform-origin: 32px 32px;
  animation: spin-arc 1.4s linear infinite;
}
@keyframes spin-arc {
  to { transform: rotate(360deg); }
}
.building-checklist {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  width: 100%;
  text-align: left;
}
.bc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .92rem;
  color: var(--gray-400);
  opacity: .4;
  transition: opacity .3s, color .3s;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--gray-100);
}
.bc-item .bc-icon { font-size: 1.1rem; flex-shrink: 0; }
.bc-item > span:nth-child(2) { flex: 1; }
.bc-item .bc-check { font-size: 1rem; color: var(--orange); opacity: 0; transition: opacity .25s; }
.bc-item.bc-active {
  opacity: 1;
  color: var(--gray-700);
  background: var(--orange-light);
}
.bc-item.bc-done {
  opacity: 1;
  color: var(--gray-700);
}
.bc-item.bc-done .bc-check { opacity: 1; }

.building-countdown {
  margin-top: 28px;
  font-size: .95rem;
  color: var(--gray-500);
  letter-spacing: .01em;
  animation: fade-in .4s ease;
}
.building-countdown #countdown-num {
  display: inline-block;
  min-width: 1.2ch;
  font-weight: 700;
  color: var(--orange);
  font-size: 1.1rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  h1 { font-size: 1.4rem; }
  .step-content { padding: 28px 16px 24px; }
  .header-inner { padding: 0 16px; }
  #nav-footer { padding: 0 16px; }
  .form-group.half { flex: 1 1 100%; }
  .service-card { flex-wrap: wrap; }
  .service-card-select { display: none; }
  .total-number { font-size: 1.25rem; }
  .map-header-bar { flex-direction: column; gap: 8px; }
  .map-area-badge { text-align: left; }
  .egps-cards { grid-template-columns: 1fr; }
}