/* ==========================================================================
   Roofing Relief — forms
   WPForms' own stylesheet is switched off in its settings, so everything the
   forms need is here and keyed off the theme's tokens. Keeping it in one file
   means the forms cannot drift from the rest of the site, and it only loads on
   the pages that actually carry a form.
   ========================================================================== */

.rr-formwrap{max-width:660px}
.wpforms-container{margin:0}
.wpforms-container form{margin:0}
.wpforms-field-container{display:grid; gap:22px}

/* ---------------------------------------------------------------- fields */
.wpforms-field{margin:0; padding:0; border:0}
.wpforms-field-label{
  display:block; font-family:var(--text); font-weight:600; font-size:15px;
  color:var(--ink); margin:0 0 7px; line-height:1.4;
}
.wpforms-required-label{color:var(--copper-ink); margin-left:2px; font-weight:600}
.wpforms-field-sublabel{
  display:block; font-family:var(--text); font-weight:500; font-size:13px;
  color:var(--muted); margin:6px 0 0;
}
.wpforms-field-description{
  font-size:14px; line-height:1.55; color:var(--muted); margin:7px 0 0;
}

.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="url"],
.wpforms-field input[type="number"],
.wpforms-field select,
.wpforms-field textarea{
  width:100%; display:block; font-family:var(--text); font-size:16px;
  line-height:1.5; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:13px 14px; appearance:none; -webkit-appearance:none;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.wpforms-field textarea{min-height:130px; resize:vertical}
.wpforms-field select{
  padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377808D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:17px;
}
.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus{
  outline:none; border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(201,128,63,.18);
}
.wpforms-field input::placeholder,
.wpforms-field textarea::placeholder{color:#9AA3AE}

/* ---------------------------------------------- radios and checkboxes
   WPForms renders the input and its label as siblings inside an <li>, so the
   li is what becomes the clickable card, not the label. */
.wpforms-field fieldset{border:0; margin:0; padding:0; min-width:0}
.wpforms-field legend.wpforms-field-label{
  display:block; float:none; width:100%; padding:0; margin:0 0 9px;
  font-family:var(--text); font-weight:600; font-size:15px; color:var(--ink);
  line-height:1.4;
}
.wpforms-field-radio ul,
.wpforms-field-checkbox ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.wpforms-field-radio li,
.wpforms-field-checkbox li{
  display:flex; align-items:center; gap:12px; margin:0;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:13px 15px;
  transition:border-color .16s var(--ease), background-color .16s var(--ease);
}
.wpforms-field-radio li:hover,
.wpforms-field-checkbox li:hover{border-color:var(--line-2)}
.wpforms-field-radio li input,
.wpforms-field-checkbox li input{
  flex:none; width:19px; height:19px; margin:0; accent-color:var(--copper);
  cursor:pointer;
}
.wpforms-field-radio label.wpforms-field-label-inline,
.wpforms-field-checkbox label.wpforms-field-label-inline{
  flex:1; margin:0; cursor:pointer; font-weight:500;
  font-family:var(--text); font-size:16px; line-height:1.45; color:var(--body);
}
.wpforms-field-radio li:has(input:checked),
.wpforms-field-checkbox li:has(input:checked){
  border-color:var(--copper); background:var(--copper-soft);
}
.wpforms-field-radio li:has(input:checked) label,
.wpforms-field-checkbox li:has(input:checked) label{color:var(--ink); font-weight:600}

/* ---------------------------------------------------------------- errors */
.wpforms-field input.wpforms-error,
.wpforms-field select.wpforms-error,
.wpforms-field textarea.wpforms-error{border-color:#B4342A; background:#FEF8F7}
label.wpforms-error,
em.wpforms-error,
.wpforms-error-container{
  display:block; font-family:var(--text); font-size:14px; font-weight:500;
  color:#B4342A; margin:7px 0 0; font-style:normal;
}
.wpforms-error-container{
  background:#FEF3F1; border:1px solid #F0C9C3; border-left:3px solid #B4342A;
  border-radius:0 var(--r) var(--r) 0; padding:13px 16px; margin:0 0 20px;
}

/* ---------------------------------------------------------------- submit */
.wpforms-submit-container{margin:26px 0 0}
.wpforms-submit-container button{font-size:16px}
.wpforms-submit-container button[disabled]{opacity:.55; cursor:progress}
.wpforms-submit-spinner{margin-left:9px; vertical-align:-2px}

/* ------------------------------------------------------- confirmation */
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full{
  background:var(--copper-soft); border:1px solid #E7D3BC;
  border-left:3px solid var(--copper);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px); margin:0;
}
.wpforms-confirmation-container-full p{color:var(--body); margin:0 0 .9em}
.wpforms-confirmation-container-full p:last-child{margin:0}
.wpforms-confirmation-container-full strong{
  font-family:var(--display); font-weight:800; font-size:19px; color:var(--ink);
  display:block; margin-bottom:2px;
}

/* ---------------------------------------------------------------- steps */
.rr-formwrap--stepped .rr-step{display:none}
.rr-formwrap--stepped .rr-step.is-on{display:grid; gap:22px}

.rr-steps__ind{
  list-style:none; margin:0 0 28px; padding:0 0 22px;
  border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 26px;
}
.rr-steps__dot{
  display:flex; align-items:center; gap:9px;
  font-family:var(--text); font-size:14px; font-weight:600; color:var(--muted);
}
.rr-steps__dot b{
  flex:none; width:25px; height:25px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--text); font-size:13px; font-weight:600;
  background:var(--bone-2); color:var(--muted);
  border:1px solid var(--line-2);
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.rr-steps__dot.is-on{color:var(--ink)}
.rr-steps__dot.is-on b{background:var(--copper); color:#12131A; border-color:var(--copper)}
.rr-steps__dot.is-done{color:var(--body)}
.rr-steps__dot.is-done b{background:var(--deep); color:#fff; border-color:var(--deep)}

.rr-steps__nav{display:flex; gap:11px; margin:26px 0 0}
.rr-steps__nav [hidden]{display:none}
.rr-steps__nav .btn{padding:15px 24px}

/* Dark bands: the forms sit on navy in a couple of places. */
.band--deep .wpforms-field-label{color:#fff}
.band--deep .wpforms-field-description,
.band--deep .wpforms-field-sublabel{color:#9FADBE}
.band--deep .wpforms-field legend.wpforms-field-label{color:#fff}
.band--deep .wpforms-field-radio li,
.band--deep .wpforms-field-checkbox li{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16);
}
.band--deep .wpforms-field-radio label.wpforms-field-label-inline,
.band--deep .wpforms-field-checkbox label.wpforms-field-label-inline{color:#C5CFDC}
.band--deep .rr-steps__ind{border-bottom-color:rgba(255,255,255,.14)}
.band--deep .rr-steps__dot{color:#9FADBE}
.band--deep .rr-steps__dot b{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#9FADBE}
.band--deep .rr-steps__dot.is-on{color:#fff}

@media (max-width:640px){
  .rr-steps__ind{gap:8px 16px}
  .rr-steps__dot span{display:none}
  .rr-steps__dot{gap:0}
  .rr-steps__nav{flex-direction:column-reverse}
  .rr-steps__nav .btn{width:100%}
  .wpforms-submit-container button{width:100%}
}