/* Everline Fence — Gravity Forms brand skin (GF 2.7 "Orbital" theme).
   Loaded when GF is active. Makes the multi-step quote form read as the site's
   .quote-card: forest/gold, Manrope, pill buttons, fence-type radios as picker cards. */

/* rebrand the Orbital theme's accent in one move (buttons, focus, checked, progress) */
.gform_wrapper.gform-theme--orbital{
  --gf-color-primary:#1f5b46;
  --gf-color-primary-rgb:31,91,70;
  --gf-color-primary-contrast:#ffffff;
  --gf-color-primary-darker:#17352c;
  --gf-color-primary-lighter:#2f755b;
  --gf-ctrl-radius:11px;
  --gf-ctrl-border-color-focus:#1f5b46;
  font-family:Manrope,system-ui,sans-serif;
}

/* labels */
.gform_wrapper .gfield_label{font-size:var(--fs-2xs)!important;font-weight:800!important;color:var(--ink)!important;letter-spacing:.2px;margin-bottom:8px}
/* GF paints the nested .gfield_required_asterisk with higher specificity than the
   parent, so the original parent-only rule never reached it and 16 asterisks
   rendered in GF's default rgb(121,0,0) — the only off-brand colour on the site. */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_asterisk,
.gform_wrapper .gfield_required_asterisk{color:var(--muted)!important;font-weight:600}
.gform_wrapper .gfield_description,.gform_wrapper .instruction{color:var(--muted);font-size:var(--fs-2xs)}

/* inputs / selects / textarea → match .field */
.gform_wrapper .gfield input[type=text],
.gform_wrapper .gfield input[type=email],
.gform_wrapper .gfield input[type=tel],
.gform_wrapper .gfield input[type=number],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea{
  border-radius:11px!important;border:1px solid var(--line)!important;font-size:var(--fs-base)!important;
  padding:12px 13px!important;background:#fff!important;color:var(--ink)!important;box-shadow:none!important;
  height:auto!important;line-height:1.4!important
}
/* one custom dropdown arrow — appearance:none kills the native one (was doubling) */
.gform_wrapper .gfield select{
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b665f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center/16px!important;
  padding-right:38px!important
}
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus{border-color:var(--forest)!important;box-shadow:none!important;outline:none}
.gform_wrapper .gfield input[type=checkbox],
.gform_wrapper .gfield input[type=radio]{accent-color:var(--forest)}

/* fence-type radios → the .option picker cards WITH image thumbnails + subtitles */
.gform_wrapper .ev-fence-type .gfield_radio{display:grid!important;grid-template-columns:repeat(2,1fr);gap:12px}
.gform_wrapper .ev-fence-type .gchoice{
  border:1.5px solid var(--line);border-radius:15px;padding:13px 15px;margin:0;position:relative;
  display:flex!important;align-items:center!important;gap:16px!important;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}
.gform_wrapper .ev-fence-type .gchoice:hover{border-color:var(--forest-2);box-shadow:0 8px 22px rgba(31,91,70,.12)}
.gform_wrapper .ev-fence-type .gchoice:hover::before{transform:scale(1.06)}
.gform_wrapper .ev-fence-type .gchoice:has(input:checked){border-color:var(--forest);background:#f0f8f4}
.gform_wrapper .ev-fence-type .gchoice:has(input:checked)::before{box-shadow:0 0 0 2px var(--forest)}
/* hide the radio circle — the card + highlight IS the picker (like the custom form) */
.gform_wrapper .ev-fence-type input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
/* image thumbnail per fence type */
.gform_wrapper .ev-fence-type .gchoice::before{
  content:"";width:60px;height:60px;flex:none;border-radius:12px;background:var(--sand) center/cover no-repeat;
  transition:box-shadow .2s,transform .2s
}
.gform_wrapper .ev-fence-type .gchoice:has(input[value="Wood"])::before{background-image:url('../images/wood-fence.jpeg')}
.gform_wrapper .ev-fence-type .gchoice:has(input[value="Vinyl"])::before{background-image:url('../images/vinyl-fence.jpeg')}
.gform_wrapper .ev-fence-type .gchoice:has(input[value="Chain Link"])::before{background-image:url('../images/chain-link-fence.jpeg')}
.gform_wrapper .ev-fence-type .gchoice:has(input[value="Aluminum"])::before{background-image:url('../images/aluminum-fence.jpeg')}
/* title + subtitle (subtitle injected per type, matching the custom cards) */
.gform_wrapper .ev-fence-type .gchoice label{font-weight:800;font-size:var(--fs-md);cursor:pointer;margin:0;line-height:1.3;display:block;color:var(--ink)}
.gform_wrapper .ev-fence-type .gchoice label::after{display:block;font-weight:600;font-size:var(--fs-2xs);color:var(--muted);margin-top:2px}
.gform_wrapper .ev-fence-type .gchoice:has(input[value="Wood"]) label::after{content:"Cedar & pressure-treated"}
.gform_wrapper .ev-fence-type .gchoice:has(input[value="Vinyl"]) label::after{content:"Low-maintenance"}
.gform_wrapper .ev-fence-type .gchoice:has(input[value="Chain Link"]) label::after{content:"Residential & commercial"}
.gform_wrapper .ev-fence-type .gchoice:has(input[value="Aluminum"]) label::after{content:"Pools & front yards"}

/* single-column, full-width fields (no empty right half) + tight spacing to fit one screen */
.gform_wrapper .gform_fields{display:grid!important;grid-template-columns:1fr!important;grid-row-gap:15px!important;row-gap:15px!important}
.gform_wrapper .gfield{grid-column:1/-1!important;margin:0!important}
.gform_wrapper .gfield input:not([type=checkbox]):not([type=radio]),.gform_wrapper .gfield select,.gform_wrapper .gfield textarea{width:100%!important}
.gform_wrapper .gform_page{padding:0!important}

/* "Popular fence style" + "Post size" → clean 2-option pills (no radio dots) */
.gform_wrapper .ev-choice-pills .gfield_radio{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.gform_wrapper .ev-choice-pills .gchoice{
  border:1.5px solid var(--line);border-radius:12px;padding:13px 12px;margin:0!important;min-height:48px;
  display:flex!important;align-items:center!important;justify-content:center;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}
.gform_wrapper .ev-choice-pills .gchoice:hover{border-color:var(--forest-2);box-shadow:0 6px 16px rgba(31,91,70,.10)}
.gform_wrapper .ev-choice-pills .gchoice:has(input:checked){border-color:var(--forest);background:#f0f8f4}
.gform_wrapper .ev-choice-pills input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.gform_wrapper .ev-choice-pills .gchoice label{font-weight:700;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;margin:0}

/* add-on checkboxes → the .check rows */
.gform_wrapper .gfield--type-checkbox .gfield_checkbox{display:grid;gap:10px}
.gform_wrapper .gfield--type-checkbox .gchoice{
  background:#f8faf9;border:1px solid #eef2f0;border-radius:12px;padding:13px 16px;margin:0;
  display:flex!important;align-items:center!important;gap:14px!important;transition:border-color .15s,background .15s
}
.gform_wrapper .gfield--type-checkbox .gchoice:hover{border-color:var(--line);background:#f2f6f4}
.gform_wrapper .gfield--type-checkbox .gchoice input[type=checkbox]{width:20px;height:20px;flex:none;margin:0;accent-color:var(--forest);cursor:pointer}
.gform_wrapper .gfield--type-checkbox .gchoice label{font-weight:700;font-size:var(--fs-sm);margin:0;cursor:pointer;color:var(--ink)}

/* multi-step progress bar → forest, clean */
.gform_wrapper .gf_progressbar_title{font-size:var(--fs-xs);font-weight:800;color:var(--muted);text-transform:none;letter-spacing:0;margin-bottom:8px}
.gform_wrapper .gf_progressbar_wrapper{margin-bottom:16px}
.gform_wrapper .gf_progressbar{background:#e9e4d8!important;border-radius:999px!important;height:8px!important;box-shadow:none!important;overflow:hidden!important;padding:0!important}
.gform_wrapper .gf_progressbar_percentage{background:var(--forest)!important;border-radius:999px!important;height:8px!important;font-size:0!important;color:transparent!important;text-indent:-9999px}
.gform_wrapper .gf_progressbar_percentage span{display:none!important}

/* buttons → the brand pills */
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button,
.gform_wrapper .gform_previous_button{
  border-radius:999px!important;font-weight:800!important;font-size:var(--fs-sm)!important;padding:13px 24px!important;
  font-family:inherit!important;border:1px solid transparent!important;cursor:pointer;
  transition:transform .18s,box-shadow .18s;width:auto
}
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button{background:var(--forest)!important;color:#fff!important}
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(31,91,70,.28)}
.gform_wrapper .gform_previous_button{background:#fff!important;color:var(--ink)!important;border-color:var(--line)!important}
.gform_wrapper .gform_footer,.gform_wrapper .gform_page_footer{padding-top:8px}
.gform_wrapper .gform_page_footer .gform_next_button{width:100%}
.gform_wrapper .gform_footer .gform_button{width:100%}

/* validation */
.gform_wrapper .gfield_error input,.gform_wrapper .gfield_error select{border-color:#c0392b!important}
.gform_wrapper .validation_message{color:#8d3b2e;font-size:var(--fs-xs);margin-top:6px}

/* confirmation (matches .form-thanks) */
.ev-gf-thanks{text-align:center;padding:22px 8px}
.ev-gf-thanks h3{font-family:'Playfair Display',serif;font-size:26px;color:var(--forest);margin:0 0 10px}
.ev-gf-thanks p{color:var(--muted);line-height:1.6;margin:0 0 8px}
.ev-gf-thanks a{color:var(--forest);font-weight:800;text-decoration:none}