/* /css/vibes.css */

/* Container & Typography */
.w-form {
  max-width: 500px;
  margin: 2rem auto;
  padding: 24px;
  background: #F7F2EA;
  border-radius: 8px;
  color: #1A1A1A;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
}

/* Standard Fields */
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #DDD;
  border-radius: 4px;
  background: #FFFFFF;
  color: #1A1A1A;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Radios & Checkboxes */
.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.radio-group label,
.checkbox-group label {
  font-weight: 400;
}
input[type="radio"],
input[type="checkbox"] {
  accent-color: #1A1A1A;
  margin-right: 4px;
}

/* Vibe Intro */
.vibe-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.vibe-subtitle {
  margin-top: 0;
  font-weight: 400;
  font-size: 0.9rem;
}

/* Sliders */
.slider-wrap {
  margin-bottom: 16px;
}
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

/* Base slider – transparent track so JS‐drawn gradient shows */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: none;      /* remove solid white */
  border: 1px solid #DDD;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Chrome/Safari track & thumb */
.range-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent !important;
  border-radius: 4px;
  border: none;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 20px;
  border-radius: 3px;
  background: #1A1A1A;
  margin-top: -6px;      /* center vertically */
  cursor: pointer;
  border: none;
}

/* Firefox track & thumb */
.range-slider::-moz-range-track {
  height: 8px;
  background: transparent !important;
  border-radius: 4px;
}
.range-slider::-moz-range-thumb {
  width: 6px;
  height: 20px;
  border-radius: 3px;
  background: #1A1A1A;
  cursor: pointer;
  border: none;
}

/* IE/Edge track & thumb */
.range-slider::-ms-track {
  width: 100%;
  height: 8px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.range-slider::-ms-fill-lower,
.range-slider::-ms-fill-upper {
  background: transparent !important;
  border-radius: 4px;
}
.range-slider::-ms-thumb {
  width: 6px;
  height: 20px;
  border-radius: 3px;
  background: #1A1A1A;
  cursor: pointer;
  border: none;
}

/* Submit Button */
.w-button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #1A1A1A;
  background: transparent;
  color: #1A1A1A;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}
.w-button:hover {
  background: #1A1A1A;
  color: #FFFFFF;
}

/* Webflow Success / Error */
.w-form-done,
.w-form-fail {
  display: none;
  margin-top: 16px;
  font-size: 0.9rem;
}

/* ── Added slider‐question spacing & styling ── */
.slider-question {
  display: block;
  margin-bottom: 4px;        /* less space to the slider */
  font-size: 0.875rem;       /* smaller text */
  font-weight: bold;         /* bold text */
}

/* increase gap after each slider before the next question */
.slider-wrap {
  margin-top: 8px;           /* space above slider */
  margin-bottom: 24px;       /* more space below slider */
}

/* ── Override submit button to match app buttons ── */
.w-button {
  background: linear-gradient(45deg, #3e2f1b, #5a4025);
  color: #b49e85;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 200ms ease, background 200ms ease;
}

.w-button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(45deg, #5a4025, #3e2f1b);
}

/* slider-question tweaks */
.slider-question {
  display:block;
  margin:0 0 4px;       /* tighter above slider */
  font-size:0.8rem;     /* smaller */
  font-weight:bold;
  color:var(--green);
}

/* extra gap below each slider block */
.slider-wrap { margin-bottom:24px; }

/* full-width “Save” button matching app style */
#wrapper-override{}
.w-button {
  width:100%;
  background:linear-gradient(45deg,var(--green),var(--green-light));
  color:var(--gold);
  border:none;
  border-radius:0.5rem;
  box-shadow:var(--button-shadow);
  padding:1rem;
  font-size:1.1rem;
  transition:transform 200ms var(--ease),background 200ms var(--ease);
}
.w-button:hover:not(:disabled){
  transform:translateY(-2px);
  background:linear-gradient(45deg,var(--green-light),var(--green));
}
/* ─── Tabs ─────────────────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  border-bottom: 2px solid #DDD;
}
.tab-nav__item {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 600;
}
.tab-nav__item.active {
  border-color: var(--green);
  color: var(--green);
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
  animation: fadeIn 200ms ease;
}

/* Simple fadeIn */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}