/* Gravity Forms: TotalSurvey-like look & touch targets */

/* Progress bar */
.gform_wrapper .gf_progressbar{ height:8px !important; background:#eee; border-radius:999px; overflow:hidden; margin:8px 0 24px }
.gform_wrapper .gf_progressbar_percentage{ background: var(--brand-brown) !important; color:transparent !important }

/* Form title rule (KEEP) */
.gform_heading .gform_title{ font-size:clamp(22px,3.2vw,28px); margin:0 }
.gform_heading{ margin-bottom:10px }
.gform_heading::after{ content:""; display:block; height:8px; width:180px; border-radius:999px; background:var(--brand-brown); margin-top:10px }

/* Inputs */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select{
  width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; background:#fff; transition: box-shadow .2s, border-color .2s;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus{ border-color: var(--brand-brown); box-shadow:0 0 0 4px var(--brand-brown-100) }

/* Choice fields — requested background #f7f7f7 */
.gfield_radio li, .gfield_checkbox li{ display:inline-block; vertical-align:top; margin:6px 6px 6px 0 }
.gfield_radio label, .gfield_checkbox label{
  display:block; min-height:44px; padding:10px 14px; border:1px solid #e5e7eb; border-radius:12px;
  background:#f7f7f7; color:#111; font-weight:500; user-select:none; transition: border-color .2s, background .2s, box-shadow .2s;
}
.gfield_radio label:hover, .gfield_checkbox label:hover{ border-color:#d1d5db }

/* Hide native controls to avoid double UI */
.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"]{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  width:1px; height:1px;
}

/* Checked state */
.gfield_radio input[type="radio"]:checked + label,
.gfield_checkbox input[type="checkbox"]:checked + label{
  background: var(--brand-brown-100);
  border-color: var(--brand-brown);
  box-shadow: inset 0 0 0 2px var(--brand-brown);
}

/* "Other" option full width and last */
.gfield_radio li.is-other, .gfield_checkbox li.is-other{ display:block !important; width:100% }
.gfield_radio li.is-other input[type="text"],
.gfield_checkbox li.is-other input[type="text"]{ width:100%; margin-top:8px; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; }

/* Tabs (light) */
.gform_wrapper .gf_tab, .gform_wrapper .gp-tabs-tab{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; margin-right:8px; color:#374151;
}
.gform_wrapper .gf_tab.is-active, .gform_wrapper .gp-tabs-tab.is-active{
  border-color: var(--brand-brown); box-shadow: inset 0 0 0 2px var(--brand-brown); background: var(--brand-brown-100); color:#111;
}

/* Opt-in icons (non-numeric/emoji labels) */
.gform_wrapper .gstouch-icons .gfield_radio label,
.gform_wrapper.gstouch-icons .gfield_radio label,
.gform_wrapper .gstouch-icons .gfield_checkbox label,
.gform_wrapper.gstouch-icons .gfield_checkbox label{ position:relative; padding-left:48px; justify-content:flex-start }
.gform_wrapper .gstouch-icons .gfield_radio label::before,
.gform_wrapper.gstouch-icons .gfield_radio label::before{ content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:999px; border:2px solid #d1d5db; background:#fff }
.gform_wrapper .gstouch-icons .gfield_radio input[type="radio"]:checked + label::before,
.gform_wrapper.gstouch-icons .gfield_radio input[type="radio"]:checked + label::before{ border-color: var(--brand-brown); background: radial-gradient(var(--brand-brown) 0 45%, transparent 46% 100%) }
.gform_wrapper .gstouch-icons .gfield_checkbox label::before,
.gform_wrapper.gstouch-icons .gfield_checkbox label::before{ content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:6px; border:2px solid #d1d5db; background:#fff }
.gform_wrapper .gstouch-icons .gfield_checkbox input[type="checkbox"]:checked + label::before,
.gform_wrapper.gstouch-icons .gfield_checkbox input[type="checkbox"]:checked + label::before{ border-color: var(--brand-brown); background: var(--brand-brown) }
.gform_wrapper .gstouch-icons .gfield_checkbox input[type="checkbox"]:checked + label::after,
.gform_wrapper.gstouch-icons .gfield_checkbox input[type="checkbox"]:checked + label::after{ content:"✓"; position:absolute; left:19px; top:50%; transform:translateY(-56%); font-size:16px; font-weight:800; color:#fff }

/* Don't add icons inside Likert tables */
.gform_wrapper .gsurvey-likert label::before, .gform_wrapper .gsurvey-likert label::after{ content:none !important }
.gform_wrapper .gsurvey-likert label{ padding-left: initial; justify-content: center; }

/* Buttons (catch-all, brown) */
.gform_wrapper .gform_footer, .gform_wrapper .gform_page_footer{ margin-top:20px; display:flex; gap:10px; align-items:center }
.gform_wrapper .gform_button,
.gform_wrapper .button.gform_button,
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_page_footer .gform_button,
.gform_wrapper .button.gform_next_button,
.gform_wrapper .button.gform_previous_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button{
  border-radius:12px; padding:12px 18px; border:1px solid var(--brand-brown);
  background:var(--brand-brown); color:#fff; font-weight:600; cursor:pointer;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .button.gform_button:hover,
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_page_footer .gform_button:hover,
.gform_wrapper .button.gform_next_button:hover,
.gform_wrapper .button.gform_previous_button:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_previous_button:hover{
  background: var(--brand-brown-600); border-color: var(--brand-brown-600);
}

/* Place the pills in the Gravity Forms heading, aligned with the title */
.gform_wrapper .gform_heading{ position: relative; margin-bottom: 20px; }
.gform_wrapper .gform_heading .survey-pills{
  position: absolute;
  right: 0;           /* to the right of the title */
  top: 0;             /* same baseline as the title */
  margin: 0;
}

/* Keep the nice brown rule under the form title */
.gform_heading .gform_title{ padding-right: 240px; } /* roughly the width of two pills; adjust if needed */

/* Responsive: stack under the title on small screens */
@media (max-width: 700px){
  .gform_wrapper .gform_heading .survey-pills{
    position: static;
    margin-top: 8px;
  }
  .gform_heading .gform_title{ padding-right: 0; }
}

/* Base banner */
.gesuite-banner{
  display:block;
  padding:12px 14px;
  margin:0 0 16px;
  border:1px solid transparent;
  border-radius:10px;
  line-height:1.45;
  font-size:14px;
}
.gesuite-banner h4{
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
}
.gesuite-banner p{ margin:0; }
.gesuite-banner code{
  background:rgba(0,0,0,.04);
  padding:.1em .3em;
  border-radius:4px;
  font-size:90%;
}

/* Variants */
.gesuite-banner--warning{           /* orange */
  background:#fff7e6;
  border-color:#ffd28a;
}
.gesuite-banner--warning h4{ color:#8a6100; }

.gesuite-banner--danger{            /* red */
  background:#ffecec;
  border-color:#ff9aa2;
}
.gesuite-banner--danger h4{ color:#b00020; }

.gesuite-banner--info{              /* blue (if you use it) */
  background:#eef5ff;
  border-color:#bcd2ff;
}
.gesuite-banner--info h4{ color:#174ea6; }

.gesuite-banner--success{           /* green (if you use it) */
  background:#f1fff3;
  border-color:#bce8c5;
}
.gesuite-banner--success h4{ color:#0f6b2b; }

/* Optional: make links inside banners look intentional */
.gesuite-banner a{
  text-decoration:underline;
  font-weight:600;
}