/* Pet Pain Relief forms.
   Two looks share one engine. The panel style is the navy card used for the
   contact form beside the practice details. The page style is the full width
   questionnaire, set on paper so fifty questions do not become a wall of navy. */

/* ---------------------------------------------------------------- shared */

.ppr-form .ppr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ppr-field{margin-bottom:18px}
.ppr-field .ppr-req{margin-left:.25em;color:var(--orange)}
.ppr-field .ppr-desc{margin:0 0 8px;font-size:.86rem;opacity:.75}
.ppr-field-error{margin:6px 0 0;font-size:.84rem;font-weight:600;color:var(--orange)}

.ppr-choices{border:0;margin:0;padding:0;min-width:0}
.ppr-choices legend{padding:0;margin:0 0 10px;font-weight:600;line-height:1.4}
.ppr-choice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ppr-choice-list li{margin:0}
.ppr-choice-list input{position:absolute;opacity:0;width:1px;height:1px}
.ppr-choice-list label{
  display:block;cursor:pointer;padding:11px 15px;border-radius:12px;
  border:1px solid var(--line);line-height:1.4;font-size:.95rem;
  transition:border-color .16s ease,background-color .16s ease;
}
.ppr-choice-list input:checked + label{border-color:var(--orange);background:rgba(246,131,61,.1);font-weight:600}
.ppr-choice-list input:focus-visible + label{outline:2px solid var(--orange);outline-offset:2px}

.ppr-form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.ppr-form-actions .btn{margin-top:0}

.ppr-progress{margin:0 0 26px}
.ppr-progress-label{margin:0 0 9px;font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.ppr-progress-track{height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.ppr-progress-bar{display:block;height:100%;width:0;border-radius:99px;background:var(--orange);transition:width .3s ease}

/* Without JavaScript every step stays visible and the progress bar is hidden. */
.ppr-form:not(.is-enhanced) .ppr-progress{display:none}
.ppr-form:not(.is-enhanced) .ppr-back,
.ppr-form:not(.is-enhanced) .ppr-next{display:none}
.ppr-form:not(.is-enhanced) .ppr-submit{display:inline-flex}

.ppr-step-title{margin:0 0 20px;font-size:1.28rem}

.ppr-group{border:0;margin:0 0 26px;padding:0;min-width:0}
.ppr-group legend{padding:0;margin:0 0 14px;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}


/* ------------------------------------------------------- panel, the navy card */

.ppr-form-panel .ppr-choice-list label{border-color:var(--line-light);color:#fff}
.ppr-form-panel .ppr-choice-list input:checked + label{border-color:var(--orange);background:rgba(246,131,61,.22)}
.ppr-form-panel .ppr-progress-track{background:rgba(255,255,255,.18)}
.ppr-form-panel .ppr-group legend,
.ppr-form-panel .ppr-choices legend{color:#fff}
.ppr-form-panel .ppr-field .ppr-desc{color:rgba(255,255,255,.7)}

.ppr-form-panel .ppr-form-errors{
  background:rgba(246,131,61,.16);border:1px solid var(--orange);
  border-radius:14px;padding:14px 18px;margin:0 0 22px;color:#fff;
}

/* --------------------------------------------- page, the full width questionnaire */

.form-page{padding:clamp(40px,6vw,86px) 0 clamp(50px,7vw,100px);background:var(--paper)}
/* On a form page the header narrows to the same column as the form, so the
   breadcrumb, the heading and the questions all run down one left edge. This
   is the same treatment the single article template uses. */
.tpl-form .page-hero .shell{max-width:840px}
.tpl-form .page-hero{padding-bottom:clamp(18px,2.2vw,30px)}
.tpl-form .form-page{padding-top:clamp(14px,2vw,28px)}
.form-page-shell{max-width:840px}
.form-intro{margin-bottom:34px}
.form-outro{margin-top:34px;font-size:.94rem;opacity:.85}

.form-page .form-wrap{
  background:var(--white);color:var(--navy-ink);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.6vw,48px);
}

.ppr-form-page .ppr-field label,
.ppr-form-page .ppr-choices legend{
  color:var(--navy);text-transform:none;letter-spacing:0;
  font-size:1rem;font-weight:600;
}
.ppr-form-page .ppr-field input,
.ppr-form-page .ppr-field textarea,
.ppr-form-page .ppr-field select{
  width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;color:var(--navy-ink);
  font:inherit;font-size:.98rem;
}
.ppr-form-page .ppr-field input:focus,
.ppr-form-page .ppr-field textarea:focus,
.ppr-form-page .ppr-field select:focus{
  outline:none;border-color:var(--orange);background:var(--white);
}
.ppr-form-page .ppr-field textarea{resize:vertical;min-height:88px}
.ppr-form-page .ppr-field.has-error input,
.ppr-form-page .ppr-field.has-error textarea,
.ppr-form-page .ppr-field.has-error select{border-color:var(--orange)}
.ppr-form-page .ppr-field.has-error .ppr-choice-list label{border-color:rgba(246,131,61,.55)}

.ppr-form-page .ppr-field{margin-bottom:26px}
.ppr-form-page .ppr-field-radio{
  padding:20px 0 0;border-top:1px solid var(--line);
}
.ppr-form-page .ppr-field-radio:first-child{border-top:0;padding-top:0}

/* A short scale sits in a row on wider screens, and stacks on a phone. */
.ppr-form-page .ppr-field.is-scale .ppr-choice-list{
  flex-direction:row;flex-wrap:wrap;gap:8px;
}
.ppr-form-page .ppr-field.is-scale .ppr-choice-list li{flex:1 1 168px}
.ppr-form-page .ppr-field.is-scale .ppr-choice-list label{
  height:100%;display:flex;align-items:center;font-size:.9rem;padding:11px 14px;
}

/* Two fields side by side, for name and phone. */
.ppr-form-page .ppr-field.is-half{width:100%}
@media (min-width:620px){
  .ppr-form-page .ppr-group{display:flex;flex-wrap:wrap;gap:0 18px}
  .ppr-form-page .ppr-group legend{flex:0 0 100%}
  .ppr-form-page .ppr-group .ppr-field{flex:1 1 100%}
  .ppr-form-page .ppr-group .ppr-field.is-half{flex:1 1 calc(50% - 9px)}
}

.ppr-form-errors{
  background:rgba(246,131,61,.1);border:1px solid var(--orange);
  border-radius:16px;padding:16px 20px;margin:0 0 26px;
}
.ppr-form-errors p{margin:0 0 8px;font-weight:600}
.ppr-form-errors ul{margin:0;padding-left:1.15em}
.ppr-form-errors li{margin:0 0 4px;font-size:.93rem}

.ppr-form-success{
  background:var(--white);border:1px solid var(--line);
  border-left:4px solid var(--orange);
  border-radius:var(--r-md);padding:clamp(24px,3vw,36px);
}
.form-wrap .ppr-form-success{background:rgba(255,255,255,.1);border-color:var(--line-light);color:#fff}
.ppr-form-success h3{margin:0 0 10px;font-size:1.35rem}
.ppr-form-success p{margin:0 0 10px}
.ppr-form-success p:last-child{margin-bottom:0}
.ppr-score{font-size:1.1rem}
.ppr-score-note{font-size:.9rem;opacity:.8}

/* ------------------------------------------------------------ WPForms fallback */
/* If the practice keeps its existing WPForms forms instead of the built in
   ones, these rules give them the same look rather than the plugin default. */

.wpforms-container{max-width:none}
.wpforms-container .wpforms-field{padding:0 0 24px}
.wpforms-container .wpforms-field-label{
  font-family:var(--body);color:var(--navy);
  font-size:1rem;font-weight:600;margin-bottom:10px;
}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container textarea,
.wpforms-container select{
  width:100%!important;max-width:none!important;
  background:var(--paper);border:1px solid var(--line)!important;
  border-radius:12px!important;padding:12px 14px!important;height:auto!important;
  font:inherit!important;color:var(--navy-ink);
}
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus{outline:none;border-color:var(--orange)!important;background:var(--white)}
.wpforms-container ul.wpforms-field-required,
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-checkbox ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-checkbox li{margin:0;display:flex;align-items:flex-start;gap:10px}
.wpforms-container .wpforms-field-radio label,
.wpforms-container .wpforms-field-checkbox label{font-weight:500;line-height:1.4}
.wpforms-container button[type=submit],
.wpforms-container .wpforms-submit{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--orange)!important;border:0!important;color:#fff!important;
  border-radius:99px!important;padding:14px 30px!important;
  font:inherit!important;font-weight:600!important;cursor:pointer;
}
.wpforms-container button[type=submit]:hover,
.wpforms-container .wpforms-submit:hover{background:var(--orange-deep)!important}
.wpforms-confirmation-container-full{
  background:var(--white)!important;border:1px solid var(--line)!important;
  border-left:4px solid var(--orange)!important;border-radius:var(--r-md)!important;
  padding:24px 28px!important;color:var(--navy-ink)!important;
}

@media (max-width:620px){
  .ppr-form-page .ppr-field.is-scale .ppr-choice-list{flex-direction:column}
  .ppr-form-actions .btn{flex:1 1 100%}
}