/* Arro Crushing — Project Fit Questionnaire (popup component)
   ------------------------------------------------------------------
   Self-contained. Every class is prefixed `arro-` so it cannot collide
   with the host site's styles. No page background, no header, no logo —
   the panel simply floats over whatever page opens it.

   Brand green #12843f sampled from arrocrushing.com.
   ------------------------------------------------------------------ */

.arro-q {
  --arro-green: #12843f;
  --arro-green-dark: #0d6330;
  --arro-green-light: #0da34e;
  --arro-green-tint: #eaf4ee;
  --arro-ink: #1c1f1d;
  --arro-muted: #6b7280;
  --arro-line: #e2e5e3;
  --arro-card: #ffffff;
  --arro-amber: #b06f00;
  --arro-amber-tint: #fdf6e7;
  --arro-red: #b3261e;

  /* Backdrop behind the floating panel. Set to `transparent` if the host
     page already dims the screen behind its own modal layer. */
  --arro-scrim: rgba(0, 0, 0, .5);

  --arro-radius: 14px;
  --arro-shadow: 0 24px 60px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .12);
  /* Oswald is a condensed face. It is narrower than a normal UI font, so the
     sizes and letter-spacing below are tuned up slightly to stay readable.
     To use Oswald for headings only, point --arro-font at a normal sans. */
  --arro-font: 'Oswald', 'Arial Narrow', Helvetica, Arial, sans-serif;
  --arro-font-head: 'Oswald', 'Arial Narrow', Helvetica, Arial, sans-serif;
}

.arro-q, .arro-q * { box-sizing: border-box; }
.arro-q[hidden] { display: none !important; }

/* ---------------- Overlay + floating panel ---------------- */
.arro-q.arro-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  background: var(--arro-scrim);
  animation: arro-fade .18s ease both;
}
.arro-q.arro-inline { display: block; }

.arro-panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: var(--arro-card);
  border-radius: var(--arro-radius);
  box-shadow: var(--arro-shadow);
  overflow: hidden;
  font-family: var(--arro-font);
  color: var(--arro-ink);
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  animation: arro-pop .22s cubic-bezier(.2, .8, .3, 1) both;
}
.arro-inline .arro-panel { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08); margin: 0 auto; }

@keyframes arro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes arro-pop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes arro-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .arro-q.arro-modal, .arro-panel, .arro-step, .arro-note, .arro-feedback { animation: none !important; }
  .arro-progress-fill { transition: none; }
}

/* ---------------- Close button ---------------- */
.arro-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--arro-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}
.arro-close:hover { background: #f0f2f1; color: var(--arro-ink); }
.arro-close:focus-visible { outline: 3px solid var(--arro-green-light); outline-offset: 2px; }

/* ---------------- Progress ---------------- */
.arro-progress-track {
  height: 4px;
  background: #e6e9e7;
  overflow: hidden;
}
.arro-progress-fill {
  height: 100%;
  background: var(--arro-green);
  width: 0;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.arro-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--arro-muted);
  padding: 13px 30px 0;
  padding-right: 58px; /* clear the close button */
  letter-spacing: .1px;
}

/* ---------------- Step body ---------------- */
.arro-step {
  padding: 14px 30px 26px;
  animation: arro-rise .22s ease both;
}

.arro-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--arro-green);
  margin: 0 0 10px;
}
.arro-q h1.arro-title {
  font-family: var(--arro-font-head);
  font-size: 28px;
  line-height: 1.22;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: .1px;
  color: var(--arro-ink);
  padding-right: 34px;
}
.arro-help { color: var(--arro-muted); font-size: 15px; font-weight: 400; margin: 0 0 18px; }
.arro-title + .arro-options, .arro-title + .arro-fields { margin-top: 20px; }

/* ---------------- Option cards ---------------- */
.arro-options { display: grid; gap: 10px; }
.arro-opt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--arro-line);
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.arro-opt:hover { border-color: #b9c2bc; background: #fbfcfb; }
.arro-opt:focus-visible { outline: 3px solid var(--arro-green-light); outline-offset: 2px; }
.arro-opt[aria-pressed="true"] {
  border-color: var(--arro-green);
  background: var(--arro-green-tint);
  box-shadow: inset 0 0 0 1px var(--arro-green);
}
.arro-tick {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 2px solid #c4cbc6;
  border-radius: 50%;
  margin-top: 2px;
  display: grid;
  place-items: center;
  transition: border-color .15s, background .15s;
}
.arro-opt.arro-multi .arro-tick { border-radius: 5px; }
.arro-opt[aria-pressed="true"] .arro-tick { border-color: var(--arro-green); background: var(--arro-green); }
.arro-tick svg { opacity: 0; }
.arro-opt[aria-pressed="true"] .arro-tick svg { opacity: 1; }
.arro-opt-label { display: block; font-weight: 500; font-size: 16.5px; letter-spacing: .3px; }
.arro-opt-desc { display: block; color: var(--arro-muted); font-size: 14px; font-weight: 400; margin-top: 3px; line-height: 1.45; }

/* ---------------- Notes and feedback ---------------- */
.arro-note {
  border-left: 3px solid var(--arro-amber);
  background: var(--arro-amber-tint);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin-top: 16px;
  animation: arro-rise .22s ease both;
}
.arro-note b { display: block; margin-bottom: 4px; font-size: 15.5px; font-weight: 500; }
.arro-note p { margin: 0; font-size: 15px; font-weight: 300; color: #5a4a2a; }
.arro-feedback {
  border-left: 3px solid var(--arro-green);
  background: var(--arro-green-tint);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 300;
  color: #1c4c31;
  animation: arro-rise .22s ease both;
}

/* ---------------- Fields ---------------- */
.arro-fields { display: grid; gap: 17px; }
.arro-field.arro-half { grid-column: span 1; }
@media (min-width: 560px) {
  .arro-fields { grid-template-columns: 1fr 1fr; }
  .arro-field { grid-column: 1 / -1; }
  .arro-field.arro-half { grid-column: span 1; }
}
.arro-field > label, .arro-sub-label {
  display: block;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .3px;
  margin-bottom: 7px;
  color: var(--arro-ink);
}
.arro-req { color: var(--arro-green); }
.arro-q input[type="text"], .arro-q input[type="email"], .arro-q input[type="tel"],
.arro-q input[type="date"], .arro-q select, .arro-q textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .2px;
  padding: 11px 13px;
  border: 1.5px solid var(--arro-line);
  border-radius: 8px;
  background: #fff;
  color: var(--arro-ink);
  transition: border-color .15s, box-shadow .15s;
}
.arro-q input:focus, .arro-q select:focus, .arro-q textarea:focus {
  outline: none;
  border-color: var(--arro-green);
  box-shadow: 0 0 0 3px rgba(18, 132, 63, .15);
}
.arro-q textarea { resize: vertical; min-height: 104px; }
.arro-checkbox-row { display: flex; align-items: center; gap: 9px; }
.arro-checkbox-row input { width: 18px; height: 18px; accent-color: var(--arro-green); }
.arro-checkbox-row label { font-weight: 300; font-size: 15px; margin: 0; }
.arro-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.arro-chip {
  border: 1.5px solid var(--arro-line);
  background: #fff;
  border-radius: 99px;
  padding: 9px 17px;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .3px;
  color: var(--arro-ink);
  cursor: pointer;
  transition: all .15s;
}
.arro-chip:hover { border-color: #b9c2bc; }
.arro-chip[aria-pressed="true"] {
  border-color: var(--arro-green);
  background: var(--arro-green);
  color: #fff;
  font-weight: 500;
}
.arro-error { color: var(--arro-red); font-size: 13.5px; margin: 6px 0 0; font-weight: 500; }
.arro-q .arro-invalid { border-color: var(--arro-red); }

/* ---------------- File upload ---------------- */
.arro-drop {
  border: 2px dashed #c8cfca;
  border-radius: 10px;
  padding: 24px 18px;
  text-align: center;
  background: #fafbfa;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.arro-drop:hover, .arro-drop.arro-over { border-color: var(--arro-green); background: var(--arro-green-tint); }
.arro-drop p { margin: 6px 0 0; font-size: 13px; color: var(--arro-muted); }
.arro-drop b { font-size: 15px; }
.arro-file-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.arro-file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--arro-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}
.arro-file-list .arro-sz { color: var(--arro-muted); font-size: 12.5px; }
.arro-file-list button {
  border: 0; background: none; color: var(--arro-red);
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
}

/* ---------------- Nav ---------------- */
.arro-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--arro-line);
}
.arro-nav-right { display: flex; gap: 10px; align-items: center; }
.arro-btn {
  font: inherit;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .6px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 12px 26px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, transform .05s;
}
.arro-btn:active { transform: translateY(1px); }
.arro-btn:focus-visible { outline: 3px solid var(--arro-green-light); outline-offset: 2px; }
.arro-btn-primary { background: var(--arro-green); color: #fff; }
.arro-btn-primary:hover { background: var(--arro-green-dark); }
.arro-btn-primary[disabled] { background: #a9b5ad; cursor: not-allowed; }
.arro-btn-ghost { background: transparent; color: var(--arro-muted); padding-left: 4px; }
.arro-btn-ghost:hover { color: var(--arro-ink); }
.arro-btn-skip { background: transparent; color: var(--arro-muted); border-color: var(--arro-line); }
.arro-btn-skip:hover { border-color: #b9c2bc; color: var(--arro-ink); }

/* ---------------- Milestone + result ---------------- */
.arro-centered { text-align: center; padding: 22px 8px 4px; }
.arro-result { text-align: center; padding: 40px 30px 34px; }
.arro-mark {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.arro-good .arro-mark { background: var(--arro-green-tint); color: var(--arro-green); }
.arro-neutral .arro-mark { background: #eef1f4; color: #3a3a3a; }
.arro-stop .arro-mark { background: #f4f0ea; color: #3a3a3a; }
.arro-q .arro-result h1, .arro-q .arro-centered h1 {
  font-family: var(--arro-font-head);
  font-size: 27px;
  margin: 0 0 10px;
  font-weight: 600;
  letter-spacing: .1px;
  color: var(--arro-ink);
}
.arro-result p, .arro-centered p { color: var(--arro-muted); max-width: 470px; margin: 0 auto 8px; font-size: 16px; font-weight: 300; }
.arro-meta { font-size: 13px; color: var(--arro-muted); margin-top: 14px; }
.arro-result .arro-actions { margin-top: 24px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.arro-spinner {
  width: 16px; height: 16px;
  border: 2.5px solid #d8ddd9;
  border-top-color: var(--arro-green);
  border-radius: 50%;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  animation: arro-spin .7s linear infinite;
}
@keyframes arro-spin { to { transform: rotate(360deg); } }

/* ---------------- Mobile ---------------- */
@media (max-width: 560px) {
  .arro-q.arro-modal { padding: 0; align-items: stretch; }
  .arro-panel { max-width: none; border-radius: 0; min-height: 100%; margin: 0; }
  .arro-progress-meta { padding: 13px 58px 0 20px; }
  .arro-step { padding: 12px 20px 22px; }
  .arro-result { padding: 34px 20px 28px; }
  .arro-q h1.arro-title { font-size: 23px; }
  .arro-btn { padding: 12px 18px; font-size: 15px; letter-spacing: .4px; }
}