/* ---- Page scroll lock ---- */
body.axis-lock { overflow: hidden; }

/* ---- Backdrop ---- */
.axis-fit-modal{
  position: fixed;
  inset: 0;
  padding: clamp(12px, 2.8vw, 24px);
  display: grid;
  place-items: center;              /* center both axes */
  background: rgba(0,0,0,.5);
  z-index: 99999;
}

/* ---- Dialog ---- */
.axis-fit-dialog{
  width: min(900px, 96vw);
  max-height: min(92svh, 780px);   /* cap to viewport */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  overflow: hidden;                 /* inner areas handle scroll */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Close */
.axis-fit-close{
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

/* Header */
.axis-fit-title{
  margin: 0;
  padding: 18px 20px 6px 20px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
}
.axis-fit-intro,
.axis-fit-returning{
  margin: 0;
  padding: 0 20px 12px 20px;
  font-size: 14px;
  color: #425a57;
}

/* Progress */
.axis-fit-progress{
  height: 4px;
  background: #edf3f2;
  margin: 0 20px 10px 20px;
  border-radius: 999px;
  overflow: hidden;
}
.axis-fit-progress__bar{
  height: 100%;
  width: 0%;
  background: #0C7C74;
  transition: width .25s ease;
}

/* ---- Scroll area: only the form scrolls ---- */
.axis-fit-form{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 20px 16px 20px;
  scrollbar-gutter: stable;
}

/* Steps */
.axis-step[hidden]{ display:none !important; }
.axis-step{ padding: 8px 0; }

/* Units row */
.axis-fit-units{
  display:flex; align-items:center; gap:10px;
  padding: 8px 0 12px;
  border-bottom: 1px solid #eef2f0;
  margin-bottom: 12px;
}
.axis-fit-units__label{ color:#60706e; font-size: 13px; }

/* Form grid */
.axis-grid{ display:grid; gap:12px; }
.axis-grid--two{ grid-template-columns: 1fr 1fr; }
@media (max-width: 640px){ .axis-grid--two{ grid-template-columns: 1fr; } }

/* Inputs */
.axis-field{ display:flex; flex-direction:column; gap:6px; }
.axis-label-text{ font-size:13px; color:#2a3b39; }
.axis-field input[type="number"],
.axis-field input[type="email"],
.axis-field select{
  width:100%; border:1px solid #dbe5e3; border-radius:10px;
  padding:10px 12px; font-size:14px;
}

/* ---- Hide in-content step actions (footer mirrors them) ---- */
.axis-step .axis-actions{ display:none !important; }
/* but keep actions inside feedback cards visible */
.axis-fit-feedback .axis-actions{ display:flex !important; gap:8px; flex-wrap:wrap; }

/* ---- Sticky footer (always visible) ---- */
.axis-fit-footer{
  position: relative;
  border-top: 1px solid #eef2f0;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.axis-fit-footer__left,
.axis-fit-footer__right{
  display:flex; gap:10px; flex-wrap:wrap;
}

/* Footer buttons */
.axis-footer-btn{
  border-radius: 10px;
  border: 1px solid #0C7C74;
  background: #0C7C74;
  color:#fff;
  padding: 10px 14px;
  cursor: pointer;
}
.axis-footer-btn--secondary{
  border-color:#c7d6d3;
  background:#f6fbfa;
  color:#1a2d2b;
}

/* Recommendation cards (two columns on wide screens) */
.axis-fit-picks{
  display: grid;
  gap: 12px;
}
@media (min-width: 720px){
  .axis-fit-picks{ grid-template-columns: 1fr 1fr; }
}
.fit-card{
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  border: 1px solid #e6efed;
  border-radius: 12px;
  padding: 12px;
}
.fit-media img{ width:84px; height:84px; object-fit:cover; border-radius:8px; }
.fit-headline{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fit-badge{ font-size:12px; border-radius:999px; padding:3px 8px; background:#eefaf7; color:#0C7C74; }
.fit-size{ font-size:16px; margin:0; }
.fit-meta{ margin:6px 0 10px 16px; padding:0; }
.fit-meta li{ margin:2px 0; }

/* No-match + feedback */
.axis-no-match{
  border: 1px dashed #d4dfdd;
  border-radius: 12px;
  padding: 12px;
}
.axis-fit-feedback{ margin-top: 8px; }

/* Compact tweaks for short laptops */
@media (max-height: 740px){
  .axis-fit-dialog{ max-height: 88svh; }
  .fit-media img{ width:72px; height:72px; }
  .fit-size{ font-size: 15px; }
  .axis-field input{ padding: 8px 10px; }
}
@media (max-height: 640px){
  .axis-fit-title{ padding: 14px 16px 4px; }
  .axis-fit-intro, .axis-fit-returning{ padding: 0 16px 8px; }
  .axis-fit-progress{ margin: 0 16px 8px; }
  .axis-fit-form{ padding: 0 16px 12px; }
  .fit-card{ grid-template-columns: 70px 1fr; gap: 10px; }
  .fit-media img{ width:70px; height:70px; }
}