/*
Theme Name: RealHomes Child Theme
Theme URI: http://themeforest.net/item/real-homes-wordpress-real-estate-theme/5373914
Template: realhomes
Author: Inspiry Themes
Author URI: https://www.inspirythemes.com/
Description: Child theme for Real Homes.
Version: 1.4.2.1746960819
Updated: 2025-05-11 10:53:39

html, body {
  margin: 0;
  padding: 0;
  width: 100vw; /* viewport width */
  overflow-x: hidden; /* prevent horizontal scroll */
}

.site-wrapper, 
.header, 
.footer,
.background-container {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

*/
.elementor-location-footer {
  all: unset;
  display: block;
  width: 100%;
}
/*──────────────────────────────────────────────────────────────────────────
  1) LAYOUT: Horizontal on desktop / vertical on mobile
──────────────────────────────────────────────────────────────────────────*/

/* (A) Desktop: display the five “cards” in one row */
@media screen and (min-width: 769px) {
  /* make the container a flex‐row */
  #input_2_18 {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px; /* space between cards; can adjust */
  }

  /* allow each .gchoice card to flex-shrink/grow equally */
  #input_2_18 .gchoice {
    flex: 1 1 0;
    max-width: 200px;  /* optional: cap width so they stay uniform */
    /* remove any floats so Flexbox works cleanly */
    float: none !important;
  }

  /* make the <img> fluid inside its card */
  #input_2_18 .gfield-choice-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* (B) Tablet/Mobile: stack vertically */
@media screen and (max-width: 768px) {
  #input_2_18 {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
  }
  #input_2_18 .gchoice {
    flex: none;
    width: 100% !important;
    float: none !important;
  }
  #input_2_18 .gfield-choice-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }
}
/*───────────────────────────────────────────────────────────────────────────
  1) Make the form-footer a flex container on mobile/tablet (≤768px)
───────────────────────────────────────────────────────────────────────────*/
@media screen and (max-width: 768px) {
  /* a) Turn the page-footer into a flex context */
  #gform_wrapper_2 .gform_page_footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    gap: 10px;
  }

  /* b) Style both buttons to each occupy ~48% of width */
  #gform_wrapper_2 .gform_page_footer .gform_previous_button,
  #gform_wrapper_2 .gform_page_footer .gform_next_button {
    width: 48% !important;
    box-sizing: border-box;
  }

  /*─────────────────────────────────────────────────────────────────────────
    2) When there is ONLY the Next (“Weiter”) button, center it
       using :only-child selector
  ─────────────────────────────────────────────────────────────────────────*/
  #gform_wrapper_2 .gform_page_footer .gform_next_button:only-child {
    /* Override width so it’s not stuck to 48% on the left */
    width: 48% !important;        /* still 48% wide, but... */
    margin: 0 auto !important;    /* center it horizontally */
  }

  /* (Optional) If you want the centered Next button a bit wider than 48%,
     you could instead use something like width: 60%; margin: 0 auto; */
}
  
/*──────────────────────────────────────────────────────────────────────────
  2) CARD STYLING: White background + rounded corners + label under image
──────────────────────────────────────────────────────────────────────────*/

/* (C) Wrap the entire choice (image + label) in a white, rounded “card” */
#input_2_18 .gchoice {
  background-color: #ffffff;       /* white card */
  border-radius: 12px;             /* round all corners */
  overflow: hidden;                /* ensure child corners get clipped */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* (D) Round only the top corners of the <img> (so it lines up flush) */
#input_2_18 .gfield-choice-image-wrapper img {
  border-radius: 12px 12px 0 0; /* top‐left & top‐right rounded */
  display: block;
}

/* (E) Put the “input + label” block below the image, centered */
#input_2_18 .gfield-image-choice-wrapper-inner {
  display: felx;         /* full‐width block inside the card */
  justify-content: center !important; /* horizontally center label */
  align-items: center !important;     /* vertically center (if you add padding) */
  
  width: 100% !important;             /* fill the entire card width */
  
  box-sizing: border-box;
  padding: 0px 8px;      /* space around the text */
  text-align: center;     
  background-color: #ffffff; /* keep same white background */
  /* (You could also add border-bottom rounding here, but parent .gchoice already rounds the bottom) */
}

/* (F) Style the label text itself */
#input_2_18 .gfield-image-choice-wrapper-inner label {
  display: block;       /* force label onto its own line */
  text-align: center;      /* extra insurance that text is centered */
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: #333333;
  cursor: pointer;
}

/* Hide the radio circle if you don’t want to show it */
#input_2_18 .gfield-image-choice-wrapper-inner input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* (G) OPTIONAL: add a little hover/checked effect on each card */
#input_2_18 .gchoice:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* When a choice is selected, give it a colored border on the card */
#input_2_18 .gchoice input[type=radio]:checked + label {
  /* because our <input> is now invisible, this rule fires when label is clicked */
  /* Actually GF nests the <input> immediately before <label>, so “input + label” works */
  color: #2fae75;
  font-weight: 800;
}
#input_2_18 .gchoice input[type=radio]:checked ~ img,
#input_2_18 .gchoice input[type=radio]:checked ~ .gfield-choice-image-wrapper img {
  /* If you want the image itself to get a colored outline, you can do: */
  outline: 3px solid #2fae75;
  outline-offset: -3px;
}

/*──────────────────────────────────────────────────────────────────────────
  3) ADJUST LEGEND/TITLE ALIGNMENT (Optional)
──────────────────────────────────────────────────────────────────────────*/
#field_2_18 .gfield_label {
  text-align: center;
  font-weight: 600;
  margin-bottom: 10px;
}

/*────────────────────────────────────────────────────────────────────────────
  1) Restore native checkbox styling for every GF checkbox in Form 2 
     (step 2 and beyond). This makes sure the ✓ actually appears when clicked.
────────────────────────────────────────────────────────────────────────────*/

/* A) Re‐enable the browser’s checkbox UI for all GF checkbox inputs */
#gform_2 .gfield_checkbox input[type="checkbox"] {
  display: inline-block !important;             /* ensure it’s not display:none */
  visibility: visible !important;                /* ensure it’s not hidden */
  opacity: 1 !important;                         /* ensure it’s fully opaque */
  width: auto !important;                        /* let the browser pick a sane width */
  height: auto !important;                       /* let the browser pick a sane height */
  margin-right: 8px !important;                  /* small gap between box and label */
  
  /* Force the native “checked” box to be used */
  -webkit-appearance: checkbox !important;       /* WebKit (Safari/iOS) */
  -moz-appearance: checkbox !important;          /* Firefox */
  appearance: checkbox !important;               /* Standard */
}

/* B) If your theme or earlier CSS injected a pseudo‐element for checkboxes, hide it */
#gform_2 .gfield_checkbox li label::before,
#gform_2 .gfield_checkbox li label::after {
  display: none !important;
}

/* C) Make sure the <li> isn’t shifting the checkbox off‐screen */
#gform_2 .gfield_checkbox li {
  position: relative !important; /* ensure no overlay is covering it */
  z-index: auto !important;      /* reset any forced z‐index */
}

/* D) If your theme was adding a “custom” background on the checkbox, undo that */
#gform_2 .gfield_checkbox input[type="checkbox"] {
  background: none !important;
  border: 1px solid #666 !important; /* you can tweak border‐color as needed */
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;         /* show pointer so people know it’s clickable */
}

/* E) (Optional) Increase the tap area on mobile so it’s easier to check/uncheck */
#gform_2 .gfield_checkbox input[type="checkbox"] {
  min-width: 18px !important;
  min-height: 18px !important;
}

/*────────────────────────────────────────────────────────────────────────────
  That’s it. Once you save, reload your multi‐step form’s Step 2 on the front‐end.
  Every checkbox should now show a native ✓ when clicked. If you have other
  pages/steps under Form 2 with checkboxes, they gain the same treatment as well.
────────────────────────────────────────────────────────────────────────────*/
#gform_wrapper_3 h3.eael-contact-form-title {
  margin-bottom: 3rem !important;
}