/*
 * SCG Configurator — Gravity Forms Style
 * Exact match to reference: digitalexpress/_form-configurator.scss
 * All critical values are concrete (not var()) to prevent cascade failures.
 */

/* ══════════════════════════════════════════════════════
   1. SCOPE RESET
   ══════════════════════════════════════════════════════ */
body #scg-wrap .scg-gf *,
body #scg-wrap .scg-gf *::before,
body #scg-wrap .scg-gf *::after {
  box-sizing: border-box !important;
}

body #scg-wrap .scg-gf div,
body #scg-wrap .scg-gf li,
body #scg-wrap .scg-gf ul,
body #scg-wrap .scg-gf ol,
body #scg-wrap .scg-gf fieldset,
body #scg-wrap .scg-gf table,
body #scg-wrap .scg-gf td,
body #scg-wrap .scg-gf tr,
body #scg-wrap .scg-gf tbody,
body #scg-wrap .scg-gf thead {
  margin: initial !important;
  padding: initial !important;
}

/* ══════════════════════════════════════════════════════
   2. GF WRAPPER — set CSS vars + reset
   ══════════════════════════════════════════════════════ */
body #scg-wrap .scg-gf,
body #scg-wrap .scg-gf .gform_wrapper,
body #scg-wrap .scg-gf .gform-theme.gform_wrapper,
body #scg-wrap .scg-gf .gform-theme.gform_wrapper form {
  /* These vars are read by GF's own theme layer */
  --field-padding-block:         2rem 1.5rem;
  --field-padding-inline:        4rem;
  --field-border-radius-top:     10px 10px 0 0;
  --field-border-radius-bot:     0 0 10px 10px;
  --label-bg-color:              rgba(244,244,238,1);
  --field-border:                1px solid rgba(17,17,17,.25);
  --input-color:                 #111111;
  --gf-local-color:              #111111;
  --input-font-size:             clamp(16px,1.6rem,18px);
  --gf-local-font-size:          clamp(16px,1.6rem,18px);
  --gf-local-line-height:        1.4;
  --input-padding-top-bottom:    1.3rem;
  --gf-field-choice-gap:         5px 10px;
  --gf-form-footer-margin-y-start: 0;
  --form-row-margin-top-bottom:  0;
  --form-row-margin-left-right:  2.5rem;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: 'Work Sans', system-ui, sans-serif !important;
}

/* ══════════════════════════════════════════════════════
   3. FIELDS LIST
   ══════════════════════════════════════════════════════ */
body #scg-wrap .scg-gf ul.gform_fields,
body #scg-wrap .scg-gf ol.gform_fields,
body #scg-wrap .scg-gf .gform_fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  row-gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════
   4. HIDDEN FIELDS
   ══════════════════════════════════════════════════════ */
body #scg-wrap .scg-gf .gfield--type-hidden,
body #scg-wrap .scg-gf .gfield_hidden {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   5. HONEYPOT — zero footprint
   ══════════════════════════════════════════════════════ */
body #scg-wrap .scg-gf .gform_validation_container,
body #scg-wrap .scg-gf div.gform_validation_container,
body #scg-wrap .scg-gf li.gform_validation_container,
body #scg-wrap .scg-gf .gfield--type-honeypot,
body #scg-wrap .scg-gf .gfield.gfield_visibility_hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════
   6. FIELD CARDS — decorated fields
   Structure: cream header (label + desc) + white body (input)
   Uses concrete values — not var() — for guaranteed rendering
   ══════════════════════════════════════════════════════ */
body #scg-wrap .scg-gf .gfield:not(.-no-decor):not(.gfield--type-hidden):not(.gform_validation_container) {
  margin-bottom: 24px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  background: transparent !important;
}

/* Apply border to each inner piece — this is how the "card" forms */
body #scg-wrap .scg-gf .gfield:not(.-no-decor) .gfield_label {
  display: block !important;
  background-color: rgba(244,244,238,1) !important;
  border: 1px solid rgba(17,17,17,.25) !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 1.5rem 4rem 0.8rem 2rem !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #111111 !important;
  width: 100% !important;
  margin: 0 !important;
  font-family: 'Work Sans', system-ui, sans-serif !important;
  order: 0 !important;
}

body #scg-wrap .scg-gf .gfield:not(.-no-decor) .gfield_description:not(.gform_fileupload_rules) {
  display: block !important;
  background-color: rgba(244,244,238,1) !important;
  border-left: 1px solid rgba(17,17,17,.25) !important;
  border-right: 1px solid rgba(17,17,17,.25) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 4rem 1.6rem 2rem !important;
  font-size: clamp(14px,1.5rem,16px) !important;
  font-weight: 400 !important;
  color: #111 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  font-family: 'Work Sans', system-ui, sans-serif !important;
  order: 1 !important;
}
}
body #scg-wrap .scg-gf .gfield:not(.-no-decor):not(.gfield--type-hidden):not(.gform_validation_container) .gfield_description:not(.gform_fileupload_rules) {
    font-size: clamp(14px, 1.5rem, 15px) !important;
    color: #111 !important;
}

body #scg-wrap .scg-gf .gfield:not(.-no-decor) .ginput_container {
  display: block !important;
  background: #ffffff !important;
  border: 1px solid rgba(17,17,17,.25) !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  overflow: hidden !important;
  padding: 2rem 4rem 1.5rem !important;
  margin: 0 !important;
  order: 2 !important;
}

body #scg-wrap .scg-gf .gfield:not(.-no-decor) .ginput_preview_list {
    background-color: #ffffff !important;
    border-left: 1px solid rgb(255 255 255) !important;
    border-right: 1px solid rgb(255 255 255) !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0.5rem 2rem !important;
    order: 1 !important;
}

/* ══════════════════════════════════════════════════════
   7. INPUTS
   ══════════════════════════════════════════════════════ */
body #scg-wrap .scg-gf input[type="text"],
body #scg-wrap .scg-gf input[type="email"],
body #scg-wrap .scg-gf input[type="tel"],
body #scg-wrap .scg-gf input[type="phone"],
body #scg-wrap .scg-gf input[type="number"],
body #scg-wrap .scg-gf select {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17,17,17,.22) !important;
  border-radius: 10px !important;
  font-family: 'Work Sans', system-ui, sans-serif !important;
  font-size: clamp(16px,1.6rem,18px) !important;
  font-weight: 400 !important;
  color: #111111 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
  transition: border-color .2s ease !important;
}

body #scg-wrap .scg-gf textarea {
  display: block !important;
  width: 100% !important;
  min-height: 130px !important;
  padding: 12px 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17,17,17,.22) !important;
  border-radius: 10px !important;
  font-family: 'Work Sans', system-ui, sans-serif !important;
  font-size: clamp(16px,1.6rem,18px) !important;
  font-weight: 400 !important;
  color: #111111 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

body #scg-wrap .scg-gf input[type="text"]:focus,
body #scg-wrap .scg-gf input[type="email"]:focus,
body #scg-wrap .scg-gf input[type="tel"]:focus,
body #scg-wrap .scg-gf textarea:focus {
  border-color: rgba(17,17,17,.5) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════
   8. GLASS DIMENSIONS (.form-field-size)
   Letter labels (A, B, C…) are injected by JS as .scg-dim-label spans.
   CSS counters removed — they reset incorrectly when GF adds rows.
   ══════════════════════════════════════════════════════ */

/* Hide GF list controls */
body #scg-wrap .scg-gf .gfield_list_icons,
body #scg-wrap .scg-gf .gfield_header_item--icons,
body #scg-wrap .scg-gf .add_list_item,
body #scg-wrap .scg-gf .delete_list_item,
body #scg-wrap .scg-gf .gfield_list_header,
body #scg-wrap .scg-gf .gfield_list thead,
body #scg-wrap .scg-gf .gfield_list th {
  display: none !important;
}

/* Container */
body #scg-wrap .scg-gf .form-field-size .gfield_list,
body #scg-wrap .scg-gf .form-field-size .gfield_list_group,
body #scg-wrap .scg-gf .form-field-size .gfield_list tbody {
  display: block !important;
  width: 100% !important;
  border: none !important;
}

/* Each row — horizontal flex: letter LEFT, input RIGHT */
body #scg-wrap .scg-gf .form-field-size .gfield_list_group_item,
body #scg-wrap .scg-gf .form-field-size .gfield_list tr {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;   /* letter first (left), then input */
  gap: 12px !important;
  margin-bottom: 14px !important;
  width: clamp(260px, 70%, 39rem) !important;
  border: none !important;
  padding: 4px 0 !important;
  background: transparent !important;
  list-style: none !important;
}

/* JS-injected letter label */
body #scg-wrap .scg-gf .scg-dim-label {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  width: 22px !important;
  flex-shrink: 0 !important;
  text-align: left !important;
  display: block !important;
  line-height: 1 !important;
}

/* Remove ::before and ::after — JS handles labels now */
body #scg-wrap .scg-gf .form-field-size .gfield_list_group_item::before,
body #scg-wrap .scg-gf .form-field-size .gfield_list tr::before,
body #scg-wrap .scg-gf .form-field-size .gfield_list_group_item::after,
body #scg-wrap .scg-gf .form-field-size .gfield_list tr::after {
  display: none !important;
  content: none !important;
}

/* Input cell fills remaining space */
body #scg-wrap .scg-gf .form-field-size .gfield_list_group_item td,
body #scg-wrap .scg-gf .form-field-size .gfield_list_group_item .gfield_list_cell,
body #scg-wrap .scg-gf .form-field-size .gfield_list tr td {
  flex: 1 !important;
  border: none !important;
  padding: 0 !important;
}

/* Fallback: generic list field (no .form-field-size class) */
body #scg-wrap .scg-gf .ginput_container_list .gfield_list {
  display: block !important;
  width: 100% !important;
  border: none !important;
  border-collapse: collapse !important;
}
body #scg-wrap .scg-gf .ginput_container_list .gfield_list tbody,
body #scg-wrap .scg-gf .ginput_container_list .gfield_list thead { display: block !important; }

body #scg-wrap .scg-gf .ginput_container_list .gfield_list_group_item,
body #scg-wrap .scg-gf .ginput_container_list .gfield_list tr {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  width: clamp(260px, 70%, 39rem) !important;
}
body #scg-wrap .scg-gf .ginput_container_list .gfield_list_group_item::before,
body #scg-wrap .scg-gf .ginput_container_list .gfield_list tr::before,
body #scg-wrap .scg-gf .ginput_container_list .gfield_list_group_item::after,
body #scg-wrap .scg-gf .ginput_container_list .gfield_list tr::after {
  display: none !important;
  content: none !important;
}
body #scg-wrap .scg-gf .ginput_container_list .gfield_list td {
  flex: 1 !important;
  border: none !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════
   FORM CONFIRMATION / SUCCESS MESSAGE
   After successful submit: hide form, show message centered
   Font: brolimo, 60px, center — matches reference site
   ══════════════════════════════════════════════════════ */

/* When GF shows the confirmation, the .gform_wrapper switches to
   .gf_ajax_postback. We use this to signal step-4 to reflow. */
body #scg-wrap .scg-gf .gform_confirmation_wrapper {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

body #scg-wrap .scg-gf .gform_confirmation_message,
body #scg-wrap .scg-gf .gform_confirmation_wrapper p,
body #scg-wrap .scg-gf .gform_confirmation_wrapper div {
  font-family: 'brolimo', Georgia, serif !important;
  font-size: clamp(32px, 5vw, 60px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: #111111 !important;
  text-align: center !important;
  letter-spacing: -0.01em !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}
#scg-wrap #scg-s4[data-confirmed] .scg-s4-head {
  display: none !important;
}

div#gform_drag_drop_area_2_8 {
    border-radius: 2.6rem !important;
}
.gform-theme--framework .gfield:where(.gfield--type-fileupload,.gfield--input-type-fileupload) .gform_drop_area::before{
	visibility:hidden;
    padding-top: 0px !important;
    margin: 0px !important;
    margin-top: -19px !important;
}
button#gform_browse_button_2_8 {
    box-shadow: unset !important;
    color:#0077D9 !important;
font-weight: 400 !important;
    text-decoration: underline;
}
body #scg-wrap .scg-gf #gform_wrapper_2 #gform_2_validation_container {
  background: #FDF8F7 !important;
  padding: 20px 16px !important;
  margin-bottom: 40px !important;
}

#scg-wrap .scg-gf #gform_wrapper_2 #gform_submit_button_2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 50px !important;
  padding: 12px 64px 12px 25px !important;
  cursor: pointer !important;
  background-color: #e8d15f !important;
  background-image: url(https://darkred-flamingo-574830.hostingersite.com/wp-content/uploads/2026/03/arrow.svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 16rem center !important;
  background-size: 22px 14px !important;
  color: #1A1A1A !important;
  border: 2px solid #e8d15f !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background-position 0.3s ease, background-color 0.3s ease !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#scg-wrap .scg-gf #gform_wrapper_2 #gform_submit_button_2:hover {
background-color:#d4b84a;
}

body #scg-wrap .scg-gf .gfield:not(.-no-decor):not(.gfield--type-hidden):not(.gform_validation_container) .gfield_description:not(.gform_fileupload_rules){
	color:#111 !important;
}
 @media (max-width:1200px)
{
#scg-wrap .scg-gf #gform_wrapper_2 #gform_submit_button_2 {
  background-position: right 9rem center !important;
}
}


@media (max-width:900px)
{
#scg-wrap .scg-gf #gform_wrapper_2 #gform_submit_button_2 {
  background-position: right 15rem center !important;
}
}
@media (max-width:600px)
{
#scg-wrap .scg-gf #gform_wrapper_2 #gform_submit_button_2 {
  background-position: right 6rem center !important;
}
}
@media (max-width: 375px) {
    #scg-wrap .scg-gf #gform_wrapper_2 #gform_submit_button_2 {
        background-position: right 4rem center !important;
    }
}