/* Pet Pain Relief: Gravity Forms.
   Gravity Forms 3.x ships its own theme (Orbital). These rules sit on top so
   the questionnaires look like the rest of the site rather than like a plugin.
   Everything is scoped to .ppr-gf, the class set on each form, so any other
   form added later is untouched. */

.ppr-gf.gform_wrapper{margin:0}
.ppr-gf .gform_heading{display:none}

/* ------------------------------------------------------------- fields */

.ppr-gf .gfield{margin-bottom:26px}
.ppr-gf .gfield_label,
.ppr-gf legend.gfield_label{
  display:block;
  font-family:var(--body);
  font-size:1rem;font-weight:600;line-height:1.4;
  color:var(--navy);margin:0 0 10px;
  text-transform:none;letter-spacing:0;
}
.ppr-gf .gfield_required{color:var(--orange);margin-left:.25em}
.ppr-gf .gfield_description{
  margin:0 0 8px;padding:0;
  font-size:.86rem;color:rgba(27,43,60,.7);
}

.ppr-gf input[type=text],
.ppr-gf input[type=email],
.ppr-gf input[type=tel],
.ppr-gf input[type=url],
.ppr-gf input[type=number],
.ppr-gf textarea,
.ppr-gf select{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  font:inherit;font-size:.98rem;
  color:var(--navy-ink);
  box-shadow:none;
  transition:border-color .16s ease,background-color .16s ease;
}
.ppr-gf input:focus,
.ppr-gf textarea:focus,
.ppr-gf select:focus{
  outline:none;border-color:var(--orange);background:var(--white);
}
.ppr-gf textarea{resize:vertical;min-height:88px}

/* ---------------------------------------------------- radio and checkbox */

.ppr-gf .gfield_radio,
.ppr-gf .gfield_checkbox{display:flex;flex-direction:column;gap:8px}
.ppr-gf .gchoice{margin:0;position:relative}
.ppr-gf .gchoice input[type=radio],
.ppr-gf .gchoice input[type=checkbox]{
  position:absolute;opacity:0;width:1px;height:1px;
}
.ppr-gf .gchoice label{
  display:block;cursor:pointer;
  padding:11px 15px;border-radius:12px;
  border:1px solid var(--line);
  line-height:1.4;font-size:.95rem;font-weight:500;
  color:var(--navy-ink);
  transition:border-color .16s ease,background-color .16s ease;
  max-width:none;
}
.ppr-gf .gchoice input:checked + label{
  border-color:var(--orange);
  background:rgba(246,131,61,.1);
  font-weight:600;
}
.ppr-gf .gchoice input:focus-visible + label{
  outline:2px solid var(--orange);outline-offset:2px;
}

/* A short answer scale runs across the row on a wide screen and stacks on a
   phone, so eleven questions do not become eleven tall columns. */
@media (min-width:620px){
  .ppr-gf .ppr-scale .gfield_radio{flex-direction:row;flex-wrap:wrap;gap:8px}
  .ppr-gf .ppr-scale .gchoice{flex:1 1 168px}
  .ppr-gf .ppr-scale .gchoice label{
    height:100%;display:flex;align-items:center;
    font-size:.9rem;padding:11px 14px;
  }
}

/* --------------------------------------------------------- sections */

.ppr-gf .gsection{
  border:0;border-top:1px solid var(--line);
  margin:34px 0 22px;padding:26px 0 0;
}
.ppr-gf .gfield--type-section:first-child .gsection{border-top:0;margin-top:0;padding-top:0}
.ppr-gf .gsection_title{
  font-family:var(--display);
  font-size:1.12rem;font-weight:700;letter-spacing:-.01em;
  color:var(--navy);margin:0;
}

/* ---------------------------------------------------------- buttons */

.ppr-gf .gform_footer,
.ppr-gf .gform_page_footer{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin:26px 0 0;padding:0;border:0;
}
.ppr-gf .gform_button,
.ppr-gf .gform_next_button,
.ppr-gf .gform_previous_button,
.ppr-gf .gform_save_link{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:99px;border:1px solid transparent;
  padding:14px 30px;
  font:inherit;font-size:.95rem;font-weight:600;
  cursor:pointer;text-decoration:none;
  transition:background-color .16s ease,border-color .16s ease;
}
.ppr-gf .gform_button,
.ppr-gf .gform_next_button{background:var(--orange);color:#fff}
.ppr-gf .gform_button:hover,
.ppr-gf .gform_next_button:hover{background:var(--orange-deep)}
.ppr-gf .gform_previous_button{
  background:transparent;color:var(--navy);border-color:var(--line);
}
.ppr-gf .gform_previous_button:hover{border-color:var(--navy)}
.ppr-gf .gform_save_link{
  background:transparent;color:var(--navy);
  border-color:var(--line);font-weight:500;
}

/* -------------------------------------------------------- progress bar */

.ppr-gf .gf_progressbar_wrapper{margin:0 0 30px;padding:0}
.ppr-gf .gf_progressbar_title{
  margin:0 0 9px;padding:0;
  font-size:.84rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy);
}
.ppr-gf .gf_progressbar{
  height:5px;border-radius:99px;
  background:var(--line);overflow:hidden;box-shadow:none;padding:0;
}
.ppr-gf .gf_progressbar_percentage{
  height:100%;border-radius:99px;
  background:var(--orange);
  transition:width .3s ease;
}
.ppr-gf .gf_progressbar_percentage span{display:none}

/* ------------------------------------------------- validation and errors */

.ppr-gf .gform_validation_errors{
  background:rgba(246,131,61,.1);
  border:1px solid var(--orange);
  border-radius:16px;
  padding:16px 20px;margin:0 0 26px;
  box-shadow:none;
}
.ppr-gf .gform_validation_errors h2{
  font-size:1rem;font-weight:600;color:var(--navy);margin:0 0 8px;
}
.ppr-gf .gform_validation_errors ol{margin:0;padding-left:1.15em}
.ppr-gf .gform_validation_errors a{color:var(--orange-deep)}
.ppr-gf .gfield_error .gfield_label{color:var(--navy)}
.ppr-gf .gfield_error input,
.ppr-gf .gfield_error textarea,
.ppr-gf .gfield_error select{border-color:var(--orange)}
.ppr-gf .gfield_validation_message,
.ppr-gf .validation_message{
  background:transparent;border:0;
  padding:6px 0 0;margin:0;
  font-size:.84rem;font-weight:600;color:var(--orange-deep);
}

/* --------------------------------------------------------- confirmation */

.gform_confirmation_wrapper{
  background:var(--white);
  border:1px solid var(--line);
  border-left:4px solid var(--orange);
  border-radius:var(--r-md);
  padding:clamp(24px,3vw,36px);
}
.gform_confirmation_message p{margin:0 0 10px}
.gform_confirmation_message p:last-child{margin-bottom:0}
.gform_confirmation_message .ppr-score{font-size:1.1rem}
.gform_confirmation_message .ppr-score-note{font-size:.9rem;opacity:.8}

/* The calculated total is for the practice, not for the owner to watch tick
   up while they answer. Gravity Forms hides administrative fields already;
   this is a belt and braces rule in case the field is ever made visible. */
.ppr-gf .ppr-score-field{display:none}

/* ------------------------------------------------- two fields side by side */

@media (min-width:620px){
  .ppr-gf .gf_left_half{width:calc(50% - 9px);display:inline-block;vertical-align:top;margin-right:18px}
  .ppr-gf .gf_left_half + .gf_left_half{margin-right:0}
}

/* -------------------------------------- the navy panel on the contact page */

.form-wrap .ppr-gf .gfield_label,
.form-wrap .ppr-gf legend.gfield_label,
.form-wrap .ppr-gf .gsection_title{color:#fff}
.form-wrap .ppr-gf .gfield_description{color:rgba(255,255,255,.7)}
.form-wrap .ppr-gf input[type=text],
.form-wrap .ppr-gf input[type=email],
.form-wrap .ppr-gf input[type=tel],
.form-wrap .ppr-gf textarea,
.form-wrap .ppr-gf select{
  background:rgba(255,255,255,.08);
  border-color:var(--line-light);
  color:#fff;
}
.form-wrap .ppr-gf input:focus,
.form-wrap .ppr-gf textarea:focus,
.form-wrap .ppr-gf select:focus{
  background:rgba(255,255,255,.14);border-color:var(--orange);
}
.form-wrap .ppr-gf .gchoice label{border-color:var(--line-light);color:#fff}
.form-wrap .ppr-gf .gchoice input:checked + label{background:rgba(246,131,61,.22)}
.form-wrap .ppr-gf .gsection{border-top-color:var(--line-light)}
.form-wrap .ppr-gf .gf_progressbar{background:rgba(255,255,255,.18)}
.form-wrap .gform_confirmation_wrapper{
  background:rgba(255,255,255,.1);
  border-color:var(--line-light);
  color:#fff;
}

@media (max-width:620px){
  .ppr-gf .gform_footer .gform_button,
  .ppr-gf .gform_page_footer .gform_button,
  .ppr-gf .gform_page_footer .gform_next_button{flex:1 1 100%}
  .ppr-gf .gf_left_half{width:100%;margin-right:0}
}