/* Abode Design Consultation Modal (v1.0.1) */


/* Gravity Forms progress bar – Abode gold */
.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_blue {
    background-color: #cdb26f !important;
    color: #000 !important;
}

div#gform_3_validation_container {
    display: none;
}

/* Modal close button – gold on hover/focus */
#abode-consult-modal .abode-consult-modal__close {
    background-color: #fff;
    color: #333;
    border: none;
}

#abode-consult-modal .abode-consult-modal__close:hover,
#abode-consult-modal .abode-consult-modal__close:focus {
    background-color: #cdb26f;
    color: #fff;
    text-decoration: none;
}

#abode-consult-modal .abode-consult-modal__close {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Modal background image with 50% white overlay */
#abode-consult-modal .abode-consult-modal__dialog {
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.5)
        ),
        url("https://www.abode-construction.com/wp-content/uploads/2025/12/Untitled-design-2025-12-05T121610.989.webp");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

#abode-consult-modal .abode-consult-modal__content {
    border-radius: 8px;
}

/* Stronger white overlay on modal background */
#abode-consult-modal .abode-consult-modal__dialog {
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0.8)
        ),
        url("https://www.abode-construction.com/wp-content/uploads/2025/12/Untitled-design-2025-12-05T121610.989.webp");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

/* Gravity Forms Next button – Abode gold */
#gform_next_button_3_51 {
    background-color: #cdb26f;
    border: 2px solid #cdb26f;
    color: #000;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Base button style (all GF buttons in modal) */
#abode-consult-modal 
.gform_wrapper 
button,
#abode-consult-modal 
.gform_wrapper 
input[type="button"],
#abode-consult-modal 
.gform_wrapper 
input[type="submit"] {
    background-color: #fff;
    border: 2px solid #cdb26f;
    color: #000;
    font-weight: 500;
    transition: 
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

/* Hover + focus state — Abode gold */
#abode-consult-modal 
.gform_wrapper 
button:hover,
#abode-consult-modal 
.gform_wrapper 
button:focus,
#abode-consult-modal 
.gform_wrapper 
input[type="button"]:hover,
#abode-consult-modal 
.gform_wrapper 
input[type="button"]:focus,
#abode-consult-modal 
.gform_wrapper 
input[type="submit"]:hover,
#abode-consult-modal 
.gform_wrapper 
input[type="submit"]:focus {
    background-color: #cdb26f;
    border-color: #cdb26f;
    color: #000;
    cursor: pointer;
}

/* Space out radio + checkbox options */
#abode-consult-modal 
.gform_wrapper 
.gfield_radio li,
#abode-consult-modal 
.gform_wrapper 
.gfield_checkbox li {
    margin-bottom: 10px;
    line-height: 1.5 !important;
}

#abode-consult-modal 
.gform_wrapper 
.gfield_radio input,
#abode-consult-modal 
.gform_wrapper 
.gfield_checkbox input {
    margin-right: 10px;
}

#abode-consult-modal 
.gform_wrapper 
.gfield {
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    #abode-consult-modal 
    .gform_wrapper 
    .gfield_radio label,
    #abode-consult-modal 
    .gform_wrapper 
    .gfield_checkbox label {
        font-size: 0.8em;
    }
}

@media (max-width: 767px) {

  /* Base option card */
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_checkbox .gchoice,
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_radio .gchoice {
      display: grid;
      grid-template-columns: 28px 1fr;
      column-gap: 12px;
      align-items: start;

      padding: 12px 14px;
      margin-bottom: 14px;

      border: 1px solid rgba(0,0,0,0.12); /* very light */
      border-radius: 10px;
      background: #fff;

      transition:
          border-color 0.2s ease,
          background-color 0.2s ease;
  }

  /* Checkbox / radio alignment */
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_checkbox .gchoice input,
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_radio .gchoice input {
      margin: 2px 0 0 0;
      width: 22px;
      height: 22px;
  }

  /* Label text */
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_checkbox .gchoice label,
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_radio .gchoice label {
      margin: 0;
      line-height: 1.35;
      font-size: 0.8em;
      color: #000;
  }

  /* Selected state (gold highlight, still subtle) */
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_checkbox .gchoice input:checked + label,
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_radio .gchoice input:checked + label {
      font-weight: 500;
  }

  /* Selected card styling */
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_checkbox .gchoice:has(input:checked),
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_radio .gchoice:has(input:checked) {
      border-color: #cdb26f;
      background: rgba(205, 178, 111, 0.12);
  }

}

@media (max-width: 767px) {

  /* Hide standard field labels */
  #abode-consult-modal 
  .gform_wrapper 
  .gfield_label {
      display: none !important;
  }

  /* Hide sub-labels (First / Last) */
  #abode-consult-modal 
  .gform_wrapper 
  .ginput_complex label {
      display: none !important;
  }

  /* Ensure inputs still feel labeled */
  #abode-consult-modal 
  .gform_wrapper 
  input::placeholder,
  #abode-consult-modal 
  .gform_wrapper 
  textarea::placeholder {
      color: #666;
      opacity: 1; /* iOS Safari fix */
  }

  /* Slightly increase input padding for clarity */
  #abode-consult-modal 
  .gform_wrapper 
  input,
  #abode-consult-modal 
  .gform_wrapper 
  textarea {
      padding-top: 14px;
      padding-bottom: 14px;
  }

}

@media (max-width: 767px) {
  #abode-consult-modal 
  .gform_wrapper 
  input:focus::placeholder,
  #abode-consult-modal 
  .gform_wrapper 
  textarea:focus::placeholder {
      opacity: 0.35;
  }
}

@media (max-width: 767px) {

  /* Reduce vertical spacing between fields */
  #abode-consult-modal 
  .gform_wrapper 
  .gfield {
      margin-bottom: 14px; /* down from ~24px */
  }

  /* Compact input + textarea height */
  #abode-consult-modal 
  .gform_wrapper 
  input[type="text"],
  #abode-consult-modal 
  .gform_wrapper 
  input[type="email"],
  #abode-consult-modal 
  .gform_wrapper 
  input[type="tel"],
  #abode-consult-modal 
  .gform_wrapper 
  input[type="number"],
  #abode-consult-modal 
  .gform_wrapper 
  textarea {
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 0.9em;
  }

  /* Reduce spacing inside complex fields (First / Last name stacks) */
  #abode-consult-modal 
  .gform_wrapper 
  .ginput_complex span {
      margin-bottom: 10px;
  }

  /* Tighten progress bar spacing */
  #abode-consult-modal 
  .gform_wrapper 
  .gf_progressbar_wrapper {
      margin-bottom: 16px;
  }

}

@media (max-width: 767px) {
  #abode-consult-modal 
  .gform_required_legend {
      font-size: 0.7em !important;
      text-align: center;
  }
}

/* Hover / focus state */
#gform_next_button_3_51:hover,
#gform_next_button_3_51:focus {
    background-color: #cdb26f;
    border-color: #cdb26f;
    color: #000;
    cursor: pointer;
}

.abode-consult-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}
.abode-consult-modal.is-open{display:block;}

.abode-consult-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.abode-consult-modal__dialog{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(760px,92vw);
  height:min(760px,92vh);
  background:#fff;
  border-radius:10px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  overflow:hidden;
}

.abode-consult-modal__close{
  position:absolute;
  top:14px;
  right:16px;
  font-size:34px;
  line-height:1;
  border:none;
  background:#fff;
  cursor:pointer;
  width:44px;
  height:44px;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

.abode-consult-modal__content{
  padding:42px;
  height:100%;
  overflow:auto;
}

.abode-consult-modal__title{
  text-align:center;
  font-family:'Playfair Display', Sans-serif !important;
  font-size:34px;
  margin:0 0 10px;
}

.abode-consult-modal__subtitle{
  text-align:center;
  margin:0 0 24px;
}