.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-1b84a08:#9D0625;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================================
   PENNDWELL — Showcase IDX mobile  v5.0  (complete, consolidated)
   Location: Elementor > Site Settings > Custom CSS
   Replaces everything previously in this box. Nothing else needed.

   Scopes used, deliberately:
     .sidx-small-screen    — IDX's mobile root on the search widget
     .sidx-modal-container — the "More" panel, appended to <body> OUTSIDE
                             .sidx-small-screen, so rules scoped to that
                             root never reach it
     @media (max-width:767px) — the listing detail page, whose root is
                             .sidx-medium-screen at phone widths

   Not touched: `position` on .sidx-floating-menu-anchor, which positions
   the dropdown menus.
   ========================================================================= */


/* -- 1. Nothing may be wider than the screen ----------------------------- */

.sidx-small-screen,
.sidx-small-screen .sidx-container,
.sidx-small-screen .sidx-search-grid,
.sidx-small-screen .sidx-search-grid__form,
.sidx-small-screen .sidx-search-grid__map,
.sidx-small-screen .sidx-search-grid__results,
.sidx-small-screen .sidx-searchform,
.sidx-small-screen .sidx-searchform * {
  max-width: 100% !important;
}


/* -- 2. The form is a vertical stack of rows ---------------------------- */

.sidx-small-screen .sidx-searchform {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}


/* -- 3. Each row wraps instead of overflowing --------------------------- */

.sidx-small-screen .sidx-searchform > div,
.sidx-small-screen .sidx-searchform .sidx-basic,
.sidx-small-screen .sidx-searchform [class*="advanced"],
.sidx-small-screen .sidx-searchform [class*="row"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}


/* -- 4. The location field owns a full-width row of its own ------------- */

.sidx-small-screen .sidx-searchform .sidx-locations-field-wrapper,
.sidx-small-screen .sidx-searchform [class*="locations"],
.sidx-small-screen .sidx-searchform [class*="locations"] > * {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}


/* -- 5. Every control shrinks to its content and becomes a pill --------- */

.sidx-small-screen .sidx-searchform .sidx-field,
.sidx-small-screen .sidx-searchform .sidx-streamlined-toggle,
.sidx-small-screen .sidx-searchform button,
.sidx-small-screen .sidx-searchform [class*="field"]:not([class*="options"]),
.sidx-small-screen .sidx-searchform [class*="pill"],
.sidx-small-screen .sidx-searchform [class*="toggle"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Containers that merely hold a control must not become pills themselves. */
.sidx-small-screen .sidx-searchform .sidx-range,
.sidx-small-screen .sidx-searchform .sidx-beds-and-baths,
.sidx-small-screen .sidx-searchform .sidx-streamlined-search,
.sidx-small-screen .sidx-searchform .sidx-dropdown,
.sidx-small-screen .sidx-searchform .sidx-field-options,
.sidx-small-screen .sidx-searchform .sidx-floating-menu-anchor {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}

.sidx-small-screen .sidx-searchform .sidx-beds-and-baths {
  display: flex !important;
  gap: 8px !important;
}


/* -- 6. The submit button keeps a fixed tap target ---------------------- */

.sidx-small-screen .sidx-searchform button[type="submit"],
.sidx-small-screen .sidx-searchform [class*="submit"] {
  flex: 0 0 auto !important;
  min-width: 52px !important;
  min-height: 44px !important;
}


/* -- 7. Save Search sits right-aligned on its own line ------------------ */

.sidx-small-screen .sidx-searchform .sidx-save-search-pill {
  align-self: flex-end !important;
  min-height: 40px !important;
  padding: 0 18px !important;
}


/* -- 8. Search input sizing --------------------------------------------- */

.sidx-small-screen .sidx-searchform .sidx-suggestions-input {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

.sidx-small-screen .sidx-searchform .sidx-suggestions-input input {
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 0 0 0 6px !important;
  border-radius: 0 !important;
}


/* -- 9. Autocomplete must not be clipped or painted behind the map ------ */

.sidx-small-screen .sidx-search-grid__form,
.sidx-small-screen .sidx-searchform,
.sidx-small-screen .sidx-basic,
.sidx-small-screen .sidx-locations-field-wrapper,
.sidx-small-screen .sidx-dropdown,
.sidx-small-screen .sidx-floating-menu-anchor {
  overflow: visible !important;
}

.sidx-small-screen .sidx-suggestions,
.sidx-small-screen .sidx-floating-menu {
  z-index: 60 !important;
}


/* -- 10. Search widget stacks above the map widget ---------------------- */

@media (max-width: 1024px) {
  .sidx-container:has(.sidx-searchform) {
    position: relative !important;
    z-index: 40 !important;
  }
}


/* -- 11. iOS focus-zoom -------------------------------------------------
      Safari zooms the whole page when a focused input is under 16px and
      never zooms back. Deliberately NOT scoped to .sidx-small-screen: the
      "More" panel renders in .sidx-modal-container, appended to <body>,
      outside that root.                                                   */

.sidx-container input,
.sidx-container select,
.sidx-container textarea,
.sidx-modal-container input,
.sidx-modal-container select,
.sidx-modal-container textarea {
  font-size: 16px !important;
}


/* -- 12. More modal: readable, single column, correct stacking ----------
      GUARDED with :has(). Several EMPTY .sidx-modal-container divs sit in
      the DOM on every page load. Unguarded rules turn them into
      full-screen overlays.                                                */

@media (max-width: 1024px) {

  .sidx-modal-container:has(select),
  .sidx-modal-container:has(input) {
    position: relative !important;
    z-index: 100000 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .sidx-modal-container:has(select) > div,
  .sidx-modal-container:has(select) > div > div,
  .sidx-modal-container:has(input) > div,
  .sidx-modal-container:has(input) > div > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
}


/* -- 13. Listing detail, phone only: reorder and de-duplicate ----------
      .sidx-left-column and .sidx-right-column are dissolved with
      display:contents, so their children become siblings of one another
      and can be ordered across what are normally two separate parents.

      Resulting order:
        location map -> main photo -> price card -> ONE action bar ->
        description -> Schedule Showing and all remaining cards ->
        mortgage calculator

      Hidden on phones: the stacked photo strip with its Quickview button,
      and every duplicate Save/Ask/Tour/Hide/Share bar after the first.

      Scoped to <=767px, so tablet and desktop are untouched. The listing
      page root is .sidx-medium-screen at phone widths, which is why this
      is a media query rather than a .sidx-small-screen rule.             */

@media (max-width: 767px) {

  .sidx-columns {
    display: flex !important;
    flex-direction: column !important;
  }

  .sidx-columns > .sidx-left-column,
  .sidx-columns > .sidx-right-column {
    display: contents !important;
  }

  /* anything not named below keeps its natural place in the middle */
  .sidx-columns > .sidx-left-column > *,
  .sidx-columns > .sidx-right-column > * {
    order: 10 !important;
  }

  .sidx-columns .pd-subject-location          { order: 1 !important; }
  .sidx-columns .sidx-carousel                { order: 2 !important; }
  .sidx-columns .pd-facts-card                { order: 3 !important; }
  .sidx-columns .sidx-primary-actions         { order: 4 !important; }
  .sidx-columns .pd-listing-description,
  .sidx-columns .pd-listing-description__toggle { order: 5 !important; }
  .sidx-columns .mortgage-calculator          { order: 30 !important; }

  /* the stacked photo strip and its Quickview button */
  .sidx-columns .sidx-photo-array             { display: none !important; }

  /* ONE action bar only.
     Rule A: inside any parent, hide every .sidx-primary-actions that has
             an earlier .sidx-primary-actions sibling.
     Rule B: hide the right column's copies outright, since the left
             column already supplies the one that survives.
     Written this way rather than with :first-of-type so that at least one
     bar always survives regardless of sibling element types.            */
  .sidx-columns .sidx-primary-actions ~ .sidx-primary-actions {
    display: none !important;
  }
  .sidx-columns > .sidx-right-column .sidx-primary-actions {
    display: none !important;
  }
}/* End custom CSS */