html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #333;
}
/* ===== Global Typography ===== */
h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 500; /* Medium */
  font-size: 38px;
  line-height: 53px;
  margin: 0 0 1rem;
}

h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 32px;
  line-height: 45px;
  margin: 0 0 1rem;
}

h2.alt {
  font-family: 'Playfair Display', serif;
  font-weight: 800; /* ExtraBold */
  font-size: 32px;
  line-height: 44px;
}

h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 24px;
  line-height: 35px;
  margin: 0 0 0.75rem;
}

h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin: 0 0 0.5rem;
}

h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 23px;
  margin: 0 0 0.5rem;
}

h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

/* ===== Top Bar ===== */
.top-bar {
  height: 34px;
  background-color: rgba(31, 69, 110, 1);
  display: flex;
  justify-content: flex-end;  
  align-items: center;
  padding: 0 2rem;
  gap: 1.5rem;
  color: white;
  font-size: 0.9rem;
}
.top-bar a {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.top-bar a:hover {
  text-decoration: underline;
}

.phone {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

/* ===== Main Nav ===== */
.main-nav {
  height: 70px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.logo img {
  height: 40px;
}

/* Nav links */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 0; /* spacing handled by widths + dividers */
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px; /* matches nav bar height */
}

/* Fixed widths from Sketch */
.nav-item.assessment { width: 103px; }
.nav-item.map        { width: 131px; }
.nav-item.list       { width: 163px; }

.nav-item a {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600; /* SemiBold */
  text-transform: uppercase;
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;

  white-space: nowrap;       /* keeps text on one line */
}

.nav-item a:hover {
  color: #004aad;
}

/* Divider lines */
.divider {
  width: 1px;
  height: 29px; /* matches Sketch */
  background-color: rgba(153, 153, 153, 1);
  margin: 0 20px; /* adjust for exact Sketch spacing */
}
/* Space around each divider — adjust to match Sketch */
.nav-links li.divider:nth-of-type(2) {
  margin: 0 38px; /* between Assessment + Map */
}
.nav-links li.divider:nth-of-type(4) {
  margin: 0 42px; /* between Map + List */
}

/* Sign-in button */
.signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 110px;   /* wider */
  height: 38px;   /* taller */
  border-radius: 19px;  /* half the height for the pill shape */
  background-color: rgba(8, 110, 157, 1);
  border: none;
  cursor: pointer;

  font-family: 'Open Sans', sans-serif;
  font-size: 13px;   /* a little larger text */
  font-weight: 700;
  line-height: 18px;
  color: #fff;
  text-align: center;
  padding: 0;
}

.signin:hover {
  background-color: #066b8d;
}

.signin-icon {
  height: 18px;  /* slightly bigger to match new size */
  width: auto;
  flex-shrink: 0;
}



/* ===== Accent Bar ===== */
.accent-bar {
  height: 3px;
  border-top: 4px solid rgba(31, 69, 110, 1);
}

/* ===== Hero ===== */
.hero {
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  margin: 2rem auto;
  max-width: 1334px;

  background-image: 
    linear-gradient(233deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.5) 100%),
    url("assets/heroimage.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;


  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}
.hero-content {
  padding: 2rem;
}
.hero input {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  width: 60%;
  max-width: 400px;
  border: none;
  border-radius: 8px;
}

/* === Homepage Search Bar === */
.search-bar {
  position: relative;
  display: inline-block;
}

.search-bar input {
  width: 360px;
  height: 40px;
  padding: 0 40px 0 14px; /* room for icon on right */
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
}

.search-bar input::placeholder {
  color: rgba(153, 153, 153, 1);
  font-style: italic;
}

/* Icon styling */
.search-bar i {
  position: absolute;
  right: 14px;
  top: 65%;
  transform: translateY(-50%);
  font-size: 16px;
  color: rgba(153, 153, 153, 1);
  pointer-events: none; /* lets user click through the icon into the input */
}



/* ===== Mission ===== */
.mission {
  max-width: 1334px;      /* match Sketch width */
  margin: 4rem auto;
  padding: 0 2rem;
  text-align: left;
}

.mission h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 600;       /* SemiBold */
  color: rgba(51, 51, 51, 1);
  margin-bottom: 1.5rem;
}

.mission p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(51, 51, 51, 1);
  margin: 0 0 1.25rem 0;  /* space between paragraphs */
}

.mission p:last-child {
  margin-bottom: 0;       /* no extra space after the last paragraph */
}
/* ===== What Makes Us Different ===== */
.difference {
  max-width: 1334px;
  margin: 4rem auto;
  padding: 0 2rem;
}

/* Title with divider lines */
.difference-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;               /* spacing between line + heading */
  margin-bottom: 3rem;     /* ~48px if root font-size = 16px */
}

.difference-title h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 600;        /* SemiBold */
  color: rgba(51, 51, 51, 1);
  text-align: center;
  line-height: 45px;
  margin: 0;
  white-space: nowrap;
}

.difference-title .line {
  flex-shrink: 0;
  width: 470px;
  height: 1px;
  border-top: 1px solid rgba(204, 204, 204, 1);
}

/* Icon row */
.difference-icons {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  text-align: center;
  align-items: flex-start;
}

.icon-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Fixed wrapper ensures icon bottoms align */
.icon-img {
  height: 105px;                /* tallest icon height from Sketch */
  display: flex;
  align-items: flex-end;        /* bottom-align the SVG */
  justify-content: center;
}

/* Prevent inline baseline weirdness */
.icon-img img {
  display: block;
}

/* Exact icon sizes */
.icon-img img.paper-pen { width: 108px; height: 105px; }
.icon-img img.laptop {    width: 121px; height: 98px; }
.icon-img img.money {     width: 126px; height: 94px; }

/* Captions: always 12px below icon */
.caption {
  margin-top: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: rgba(51, 51, 51, 1);
  text-align: center;
}

.caption.short { max-width: 244px; }
.caption.wide {  max-width: 430px; }

/* Vertical dividers */
.divider-vertical {
  width: 1px;
  height: 152px;
  background-color: rgba(204, 204, 204, 1);
  align-self: flex-end; /* lines end with icons */
}

/* Horizontal divider */
.divider-horizontal {
  width: 1368px;
  height: 1px;
  margin: 62px auto 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* ===== Find the Right Care ===== */
.care {
  max-width: 1334px;
  margin: 4rem auto;
  padding: 0 2rem;
}

.care h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 600; /* SemiBold */
  color: rgba(51, 51, 51, 1);
  margin-bottom: 2rem;
  line-height: 45px;
}

.care-grid {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.care-card {
  width: 656px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Image */
.care-img {
  width: 656px;
  height: 209px;
  border-radius: 20px;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Title */
.care-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
  margin: 0 0 0.75rem;
  line-height: 35px;
}

/* Paragraph */
.care-card p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 1.5;
  margin: 0 0 1.5rem;
  max-width: 656px;
}

/* Blue button */
.care-btn {
  width: 149px;
  height: 33px;
  border-radius: 16.5px;
  background-color: rgba(8, 110, 157, 1); /* Blue */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.care-btn span {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

/* Hover state for both <button> and <a> */
.care-btn:hover {
  background-color: #066b8d; /* darker blue */
}

/* ===== Overlay ===== */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1400;
}

#overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ===== Sign-In Sidebar ===== */
.signin-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 337px; /* +4 px wider for perfect fit */
  height: 100vh;
  border-left: 1px solid rgba(204, 204, 204, 1);
  background: #fff;
  box-sizing: border-box;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1500;
  overflow-y: auto;
}
.signin-sidebar.open {
  transform: translateX(0);
}

/* ===== Close “×” Button ===== */
.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 15px;
  height: 21px;
  color: rgba(0, 0, 0, 1);
  font-family: "Font Awesome 6 Pro", "FontAwesome", sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  background: none;
  border: none;
  line-height: 21px;
  cursor: pointer;
}


/* ===== Inside Sidebar ===== */
.signin-content {
  padding: 45px 12px 45px 12px; /* moved content 4 px left/right */
  font-family: "Open Sans", sans-serif;
  color: rgba(51, 51, 51, 1);
}
.signin-content h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 20px;
}

/* ===== Labels & Inputs ===== */
.signin-content label {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  color: rgba(51, 51, 51, 1);
}
.signin-content input[type="text"],
.signin-content input[type="password"] {
  width: 301px;
  height: 34px;
  margin-bottom: 16px;
  box-shadow: 0 0 0 1px rgba(102, 102, 102, 1),
              0 1px 0 0 inset rgba(0, 0, 0, 0.1);
  border: none;
  padding: 0 10px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  background-color: #fff;
}
.signin-content input::placeholder {
  color: rgba(153, 153, 153, 1);
  font-style: italic;
}

/* ===== Keep Me Signed In / Forgot Password ===== */
/* Row layout stays the same */
.keep-signed { display:flex; justify-content:space-between; align-items:center; margin:10px 0 20px; }
.checkbox-group { display:flex; align-items:center; gap:6px; }

/* Unchecked box (exact to spec) */
.checkbox-group input[type="checkbox"]{
  width:13px; height:13px;
  border:1px solid rgba(153,153,153,1);
  border-radius:1px;
  background-color:rgba(238,238,238,1);
  appearance:none; outline:none; cursor:pointer;
  position:relative;
}

/* Checked box (exact to spec) */
.checkbox-group input[type="checkbox"]:checked{
  border:1px solid rgba(19,56,190,1);
  background-color:rgba(19,56,190,1);
}

/* White check mark: crisp, centered SVG (9x7) */
.checkbox-group input[type="checkbox"]:checked::after{
  content:"";
  position:absolute; inset:0;              /* fill the 13x13 box */
  background-repeat:no-repeat;
  background-position:center;              /* perfectly centered */
  background-size:9px 7px;                 /* matches spec */
  /* thin, clean check path (white) */
  background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9">\
<path d="M1 5.2 L4.2 8 L11 1.2" stroke="%23FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
}

/* Label */
.checkbox-group label{
  color:rgba(51,51,51,1);
  font:400 12px "Open Sans", sans-serif;
  line-height:1; display:flex; align-items:center;
}

/* small visual nudge to balance with Forgot Password */
.checkbox-group label {
  color: rgba(51, 51, 51, 1);
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  position: relative;
  top: 1px;   /* moves just the text down by ~1px */
}

/* Forgot password link */
.forgot {
  white-space: nowrap;
  color: rgba(8, 110, 157, 1);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  text-align: right;
}


/* ===== Divider + Create Account Alignment Fix ===== */
.signin-divider {
  width: 300px;
  height: 1px;
  border: 1px solid rgba(204, 204, 204, 1);
  margin: 32px auto;           /* centers divider inside sidebar */
}

.create-account {
  width: 301px;
  color: rgba(51, 51, 51, 1);
  font-family: "Open Sans", sans-serif;
  margin: 0 auto;              /* centers entire section under divider */
  text-align: left;            /* keeps text aligned to the left edge */
}

/* Header */
.create-account h2 {
  width: 301px;
  height: 35px;
  color: rgba(51, 51, 51, 1);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 24px;
  margin-top: 0px;
  margin-bottom: 16px;
}

/* Description paragraph */
.create-account .create-text {
  width: 301px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 16px;
}

/* Bullet list */
.create-account .create-benefits {
  list-style-type: disc;
  padding-left: 18px;          /* indent bullets neatly */
  margin-bottom: 24px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

/* Button */
.create-btn {
  width: 157px;
  height: 31px;
  border: 1px solid rgba(8, 110, 157, 1);
  border-radius: 15.5px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  margin-left: 0;              /* aligns button with text */
}

.create-btn span {
  color: rgba(8, 110, 157, 1);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  line-height: 1;
}

.create-btn:hover {
  background: rgba(8, 110, 157, 0.1);
}

/* ===== Sign-In Button ===== */
.signin-btn {
  width: 88px;
  height: 33px;
  border-radius: 16.5px;
  background-color: rgba(8, 110, 157, 1);
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: center;
  margin-bottom: 32px;
}
.signin-btn:hover {
  background-color: #066b8d;
}







/* === Tighten spacing below Sign-In section === */
.signin-content form {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Reduce overall gap below the Sign-In button */
.signin-btn {
  margin-bottom: 16px !important; /* was 32px; tighter for balance */
}

/* Remove extra top margin stacking from the divider */
.signin-divider {
  margin-top: 16px !important;    /* was 32px; pairs evenly with button */
  margin-bottom: 32px;            /* keep space before “Create An Account” */
}











#popupNoAccount {
  width: 430px;
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 12px;
  background-color: #fff;
  padding: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 1000;
}

#popupNoAccount.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}


/* ===== Footer ===== */
footer {
  background: #004aad;
  color: white;
  text-align: center;
  padding: 1rem;
}

                                              /* ===== Map & Choices ===== */
.map-choices {
  max-width: 1334px;
  margin: 48px auto;
  padding: 0 2rem;
}

.map-choices h2 {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 900;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 24px;
}

/* ---- Map Container ---- */
.map-container {
  position: relative;
  width: 1334px;
  height: 697px;
  border: 1px solid rgba(151,151,151,1);
  background: rgba(216,216,216,1);
  margin-bottom: 48px;
  --sidebar-w: 317px;
}

/* Map fills container */
#map {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 0;
}

/* ===== SIDEBAR + ICON BOX ===== */
.filter-sidebar {
  width: 317px;
  height: 696px;
  border: 1px solid rgba(151, 151, 151, 1);
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-20px);
  transition: all 0.3s ease;

  /* exact 36px padding above Filter Selection */
  padding: 36px 29.5px 0 29.5px;
  box-sizing: border-box;
}

.map-container.sidebar-open .filter-sidebar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/* ===== INFO SIDEBAR ===== */
.info-sidebar {
  width: 317px;
  height: 696px;
  border: 1px solid rgba(151, 151, 151, 1);
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1002;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20px);
  transition: all 0.3s ease;
  padding: 36px 29.5px;
  box-sizing: border-box;
  pointer-events: none; /* added so it's not clickable when hidden */
}

.map-container.info-open .info-sidebar {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto; /* clickable when visible */
}

.info-content {
  font-family: 'Open Sans', sans-serif;
  color: rgba(51, 51, 51, 1);
}

.info-content h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin-bottom: 12px;
  color: rgba(8, 110, 157, 1);
}

/* ===== ICON BOX ===== */
.filter-info-box {
  width: 48px;
  height: 79px;
  border: 1px solid rgba(151, 151, 151, 1);
  background: #fff;
  position: absolute;
  top: 0;
  left: 317px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.3s ease;
}

/* Slide icon box only when *both* sidebars are closed */
.map-container:not(.sidebar-open):not(.info-open) .filter-info-box {
  transform: translateX(-317px);
}

/* ICON BUTTONS */
.icon-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:first-child img {
  width: 31px;
  height: 27px;
}

.icon-btn:last-child img {
  width: 27px;
  height: 27px;
}

/* ---- FILTER TITLE ---- */
.filter-title {
  width: 138px;
  height: 26px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: rgba(51, 51, 51, 1);
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;

  /* replaces margin spacing — use padding to lock 36px gap below */
  margin: 0 auto; /* exact 36px between title and City/Zip label */
}

.filter-sidebar .filter-label:first-of-type {
  margin-top: 36px; /* absolute spacing from title */
}

/* ---- LABELS ---- */
.filter-label,
.radius-label,
.care-label,
.facility-label {
  width: 258px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  display: block;
  text-align: left;
  margin: 0 0 4px 0; /* 4px gap above input */
}

/* ---- INPUTS + SELECTS ---- */
.filter-input,
.care-select,
.facility-select {
  width: 258px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid rgba(102, 102, 102, 1);
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin: 0 0 36px 0; /* 36px gap between each element */
}

.filter-input::placeholder {
  color: rgba(153, 153, 153, 1);
  font-style: italic;
}

/* ---- DROPDOWNS ---- */
.care-select,
.facility-select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13"><path fill="%23999999" d="M4 8.5l-4-4h8z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 8px 13px;
  padding-right: 24px;
}

/* ---- RADIUS CONTROL ---- */
/* ---- RADIUS CONTROL (pixel-accurate from Sketch) ---- */
.radius-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 36px;
}

/* Left Arrow Box */
.radius-btn.left {
  width: 24px;
  height: 36px;
  border: 1px solid rgba(102, 102, 102, 1);
  background-color: rgba(238, 238, 238, 0.33);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* Middle Box (Number Field) */
.radius-input {
  width: 41px;
  height: 32px;
  background-color: #fff;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 19px;

  border: none;
  box-shadow:
    0 -1px 0 0 rgba(102, 102, 102, 1),
    0 1px 0 0 rgba(102, 102, 102, 1);
}

/* Right Arrow Box */
.radius-btn.right {
  width: 24px;
  height: 36px;
  border: 1px solid rgba(102, 102, 102, 1);
  background-color: rgba(238, 238, 238, 0.33);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* Arrows (using text or icon font) */
.radius-btn .arrow {
  font-size: 14px;
  font-weight: 700;
  color: rgba(8, 110, 157, 1);
  line-height: 1;
}

/* ---- SEARCH BUTTON ---- */
.search-btn {
  width: 88px;
  height: 33px;
  border-radius: 16.5px;
  background: rgba(8, 110, 157, 1);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  border: none;
  cursor: pointer;

  /* align left with inputs */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0; /* remove auto centering */
}

.search-btn:hover {
  background: #066b8d;
}

/* ---- FORM CONTAINER SPACING ---- */
.filter-form {
  display: flex;
  flex-direction: column;
  gap: 36px; /* ensures consistent vertical spacing */
}

.data-disclaimer {
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 10px;
  color: rgba(102, 102, 102, 1); /* subtle gray */
  text-align: center;
  margin-top: 8px;
  max-width: 1322px; /* match progress/map width */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
  border-top: 1px solid rgba(220, 220, 220, 1);
  padding-top: 6px;
  position: relative;
}




                                                    /* ===== List Your Business Page ===== */
/* ===== List Your Business Page ===== */
.list-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 40px 0 40px;          /* 48 px below header */
  background-color: #fff;
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 80px);         /* fills viewport minus header height */
  overflow: hidden;                   /* removes scroll */
}

.list-content {
  max-width: 1063px;
  width: 100%;
  color: rgba(51, 51, 51, 1);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Heading */
.list-content h1 {
  width: 398px;
  height: 45px;
  color: rgba(51, 51, 51, 1);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 24px;                /* 24 px gap to description */
}

/* Description */
.list-description {
  width: 1063px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 24px;                /* 24 px gap before bullets */
}

/* Bullet list */
.list-benefits {
  width: 900px;
  margin-left: 25px;
  margin-bottom: 24px;                /* 24 px gap before button */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  list-style-type: disc;
}

.list-benefits li {
  margin-bottom: 12px;                /* 12 px between bullets */
}

.list-benefits strong {
  font-weight: 700;
  color: rgba(8, 110, 157, 1);
}

/* ===== List Now Button ===== */
.list-btn {
  width: 120px;
  height: 36px;
  border: 1px solid rgba(8, 110, 157, 1);
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin-left: auto;                  /* align right */
  margin-bottom: 0;                   /* keep footer tight */
}

.list-btn span {
  color: rgba(8, 110, 157, 1);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  line-height: 1;
  position: relative;
  top: 1px;                           /* optical centering */
}

.list-btn:hover {
  background: rgba(8, 110, 157, 0.1);
}

/* Footer anchored visually at bottom */
footer {
  margin-top: auto;
  width: 100%;
}



/* ===== Popup Overlay ===== */
#popupOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 900;
}

/* Active overlay */
#popupOverlay.active {
  opacity: 1;
  visibility: visible;
}

/* ===== Popup Container ===== */
.popup-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 430px;
  height: auto;
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 12px;
  background-color: #fff;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 1000;
}

/* Show popup */
.popup-container.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* ===== Popup Text Styling ===== */
.popup-container h2 {
  width: 406px;
  height: 26px;
  color: rgba(51, 51, 51, 1);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 12px;
}

.popup-container p {
  width: 406px;
  color: rgba(51, 51, 51, 1);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ===== Buttons ===== */
.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Cancel */
.popup-cancel {
  width: 86px;
  height: 31px;
  border: 1px solid rgba(8, 110, 157, 1);
  border-radius: 15.5px;
  background: transparent;
  color: rgba(8, 110, 157, 1);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}
.popup-cancel:hover {
  background: rgba(8, 110, 157, 0.1);
}

/* Continue */
.popup-continue {
  width: 102px;
  height: 33px;
  border-radius: 16.5px;
  background-color: rgba(8, 110, 157, 1);
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  border: none;
  cursor: pointer;
  text-align: center;
}
.popup-continue:hover {
  background-color: #066b8d;
}

/* ===== Popup Form Container ===== */
#popupForm {
  width: 430px;
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 12px;
  background-color: #fff;
  padding: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 1000;
}

/* Active popup */
#popupForm.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* ===== Header ===== */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.popup-header h2 {
  width: 165px;
  height: 26px;
  color: rgba(51, 51, 51, 1);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}

/* X Button */
.popup-close {
  width: 15px;
  height: 21px;
  color: rgba(102, 102, 102, 1);
  font-family: "Font Awesome 6 Pro", "FontAwesome", sans-serif;
  font-size: 20px;
  font-weight: 900;
  background: none;
  border: none;
  cursor: pointer;
}

/* ===== Form Elements ===== */
#businessForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#businessForm label {
  color: rgba(51, 51, 51, 1);
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

#businessForm input[type="text"],
#businessForm input[type="email"],
#businessForm textarea {
  width: 406px;
  box-shadow: 0 0 0 1px rgba(102, 102, 102, 1),
              0 1px 0 0 inset rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 2px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  color: rgba(51, 51, 51, 1);
}

#businessForm input::placeholder,
#businessForm textarea::placeholder {
  color: rgba(153, 153, 153, 1);
  font-family: "Open Sans", sans-serif;
  font-style: italic;
}

/* Questions textarea */
#businessForm textarea {
  height: 99px;
  resize: none;
}

/* ===== Buttons (Shared for all popups) ===== */
.popup-actions {
  display: flex;
  justify-content: space-between;   /* cancel left, submit/continue right */
  align-items: center;
  margin-top: 8px;
  padding: 0 4px;                   /* small horizontal spacing inside popup */
  gap: 0;                           /* remove gap so they're flush at ends */
}

/* Cancel (shared) */
.popup-cancel {
  width: 102px;                     /* match width with submit for balance */
  height: 33px;                     /* consistent button height */
  border: 1px solid rgba(8, 110, 157, 1);
  border-radius: 16.5px;            /* same rounding as submit */
  background: transparent;
  color: rgba(8, 110, 157, 1);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  line-height: 1;
}
.popup-cancel:hover {
  background: rgba(8, 110, 157, 0.1);
}

/* Continue / Submit (shared) */
.popup-continue,
.popup-submit {
  width: 102px;                     /* exact same size as cancel */
  height: 33px;
  border-radius: 16.5px;
  background-color: rgba(8, 110, 157, 1);
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  border: none;
  cursor: pointer;
  text-align: center;
  line-height: 1;
}
.popup-continue:hover,
.popup-submit:hover {
  background-color: #066b8d;
}

/* ===== Thank-You Popup ===== */
#popupThankYou {
  width: 430px;
  height: 226px;
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 12px;
  background-color: #fff;
  padding: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 1000;
}

/* Active state */
#popupThankYou.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Header */
#popupThankYou .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#popupThankYou h2 {
  width: 406px;
  height: 26px;
  color: rgba(51, 51, 51, 1);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}

/* X button (same as other popups) */
#popupThankYou .popup-close {
  width: 15px;
  height: 21px;
  color: rgba(102, 102, 102, 1);
  font-family: "Font Awesome 6 Pro", "FontAwesome", sans-serif;
  font-size: 20px;
  font-weight: 900;
  background: none;
  border: none;
  cursor: pointer;
}

/* Body text */
#popupThankYou .thankyou-text {
  width: 406px;
  color: rgba(51, 51, 51, 1);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
#popupThankYou .thankyou-text p {
  margin-bottom: 12px;
}

/* universal close (×) button positioning fix */
.popup-close {
  position: absolute;
  top: 14px;         /* pushes it up into the top corner */
  right: 18px;       /* equal spacing from right edge */
  background: none;
  border: none;
  font-size: 20px;
  font-weight: 900;
  color: rgba(102, 102, 102, 1);
  cursor: pointer;
  line-height: 1;
}

/* ===== Form Buttons (Cancel Left, Submit Right) ===== */
#popupForm .popup-actions {
  display: flex;
  justify-content: space-between;   /* pushes cancel left, submit right */
  align-items: center;
  margin-top: 8px;
  padding: 0 4px;                   /* small horizontal breathing room */
}

#popupForm .popup-cancel {
  width: 86px;
  height: 31px;
  border: 1px solid rgba(8, 110, 157, 1);
  border-radius: 15.5px;
  background: transparent;
  color: rgba(8, 110, 157, 1);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}
#popupForm .popup-cancel:hover {
  background: rgba(8, 110, 157, 0.1);
}

#popupForm .popup-submit {
  width: 102px;
  height: 33px;
  border-radius: 16.5px;
  background-color: rgba(8, 110, 157, 1);
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  border: none;
  cursor: pointer;
  text-align: center;
}
#popupForm .popup-submit:hover {
  background-color: #066b8d;
}

/* ===== Fix "Create Account" button inside No Account popup ===== */
#popupNoAccount .popup-continue {
  width: 157px;                        /* same width as sidebar button */
  height: 31px;                        /* same height */
  border-radius: 15.5px;               /* same rounded corners */
  border: none;                        /* clean solid style */
  background-color: rgba(8, 110, 157, 1); /* blue background */
  color: #fff;                         /* white text */
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  text-decoration: none;               /* remove underline */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

#popupNoAccount .popup-continue:hover {
  background-color: #066b8d;           /* darker blue on hover */
}





                                              /* ============================
                                               ASSESSMENT INTRO SECTION
                                               ============================ */
.assessment-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 430px;
  height: 430px;
  margin: 80px auto;
  border: 1px solid rgba(151, 151, 151, 1);
  background-color: rgba(31, 69, 110, 1);
  border-radius: 16px;
  padding: 30px;
  box-sizing: border-box;
  text-align: center;
}

.assessment-title {
  color: rgba(31, 69, 110, 1);
  font-family: "Poppins-Bold", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  margin-bottom: 25px;
  /* removed background, width, height, radius, padding */
}

.assessment-text {
  color: rgba(51, 51, 51, 1);
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  text-align: center;
  margin-top: 52;
  margin-bottom: 48px;
  max-width: 370px; /* keeps text width comfortable, optional */
  /* removed background, width, height, radius, padding */
}


.start-btn {
  width: 152px;
  height: 33px;
  border-radius: 16.5px;
  background-color: rgba(8, 110, 157, 1);
  border: none;
  color: #fff;
  font-family: "OpenSans-Bold", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.start-btn:hover {
  background-color: rgba(6, 85, 122, 1);
}



/* container (gray track) PROGRESSSSSSS */
#progress {
  width: 1322px;
  height: 12px; /* 2px inner + 12px top + 12px bottom = 26 total */
  background-color: rgba(204, 204, 204, 1);
  border-radius: 13px;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
}

/* blue progress fill — same thickness as gray */
#progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 12px; /* identical visual thickness */
  background-color: rgba(31, 69, 110, 1);
  border-radius: 13px;
  width: 0;                 /* JS will animate this */
  transition: width 0.3s ease;
}


/* =======================
   OUTER BLUE BOX
   ======================= */
.assessment-frame {
  width: 430px;
  height: 430px;
  background-color: rgba(31, 69, 110, 1);
  border: 1px solid rgba(151, 151, 151, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60px auto;
  box-sizing: border-box;
}

/* =======================
   INNER WHITE BOX
   ======================= */
.assessment-inner {
  width: 398px;
  height: 398px;
  border: 1px solid rgba(151, 151, 151, 1);
  background-color: #fff;
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 32px 25px 70px;   /* 32 px top, extra bottom room for buttons */
  text-align: center;
}

/* =======================
   QUESTION TITLE (every step)
   ======================= */
.question-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 32px; /* ensures each question starts 32px from top */
  box-sizing: border-box;
  display: none;
  animation: fadeIn 0.4s ease;
}

.question-step.active {
  display: block;
}

.question-step > * {
  max-width: 365px; /* adjust between 300–340 for best look */
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.question-step h2 {
  margin: 0 auto 24px auto;
  color: rgba(31, 69, 110, 1);
  font-family: "Poppins-Bold", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
}


/* --------------------
   RADIO BUTTONS
   -------------------- */
.question-step input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 50%;
  background-color: rgba(238, 238, 238, 1);
  cursor: pointer;
  margin-right: 8px;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* selected (blue inner dot) */
.question-step input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgba(19, 56, 190, 1);
  border: 1px solid rgba(19, 56, 190, 1);
  transform: translate(-50%, -50%);
}

/* --------------------
   CHECKBOXES
   -------------------- */
/* --------------------
   CHECKBOXES
   -------------------- */
.question-step input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 1px;
  background-color: rgba(238, 238, 238, 1);
  cursor: pointer;
  margin-right: 8px;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* selected state: blue box + white check */
.question-step input[type="checkbox"]:checked {
  border: 1px solid rgba(19, 56, 190, 1);
  background-color: rgba(19, 56, 190, 1);
}

/* white checkmark (9×7 px) */
.question-step input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 7px;
  background-color: rgba(255, 255, 255, 1);
  transform: translate(-50%, -50%) rotate(0deg);
  clip-path: polygon(14% 44%, 0 60%, 38% 100%, 100% 20%, 84% 0%, 38% 72%);
}


.question-step label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 320px; /* narrower for better alignment */
  margin: 0 auto 24px auto;
  color: rgba(51, 51, 51, 1);
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.question-step label::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 320px;
  height: 1px;
  border-bottom: 1px solid rgba(151, 151, 151, 1);
}

/* =======================
   BACK / NEXT BUTTONS (inside box)
   ======================= */
.buttons {
  position: absolute;
  bottom: 25px;               /* inside white box */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 42px;
  box-sizing: border-box;
}

.back-btn,
.next-btn {
  width: 76px;
  height: 33px;
  border-radius: 16.5px;
  background-color: rgba(8, 110, 157, 1);
  border: none;
  color: #fff;
  font-family: "OpenSans-Bold", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.back-btn:hover,
.next-btn:hover {
  background-color: rgba(6, 85, 122, 1);
}

/* =======================
   NAV VISIBILITY
   ======================= */
#navButtons {
  display: none;
}


/* =======================
   ASSESSMENT RESULTS PAGE
   ======================= */
.result-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 32px;
  padding-bottom: 40px;
}

.result-text {
  color: rgba(8, 110, 157, 1);
  font-family: "Poppins-Bold", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  margin: 10px 0 20px 0;
  text-align: center;
}

.result-sub {
  color: rgba(51, 51, 51, 1);
  font-family: "OpenSans-SemiBold", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  margin: 6px 0;
}

.result-inner .start-btn {
  margin-top: 30px;
}

/* =======================
   ANIMATION
   ======================= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

no-results-banner {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 69, 110, 0.95);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}