.elementor-20774 .elementor-element.elementor-element-18fed41{--display:flex;--min-height:300px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-20774 .elementor-element.elementor-element-18fed41:not(.elementor-motion-effects-element-type-background), .elementor-20774 .elementor-element.elementor-element-18fed41 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-e9264cb );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-20774 .elementor-element.elementor-element-d92b2ea{text-align:center;}.elementor-20774 .elementor-element.elementor-element-d92b2ea .elementor-heading-title{color:#FFFFFF;}.elementor-20774 .elementor-element.elementor-element-cb4b3b7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:100px;--padding-bottom:100px;--padding-left:100px;--padding-right:100px;}.elementor-20774 .elementor-element.elementor-element-2218799 > .elementor-widget-container{border-radius:10px 10px 10px 10px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-20774 .elementor-element.elementor-element-2218799 .acf-fields{gap:20px;margin:5px 5px 5px 5px;padding:20px 20px 20px 20px;}.elementor-20774 .elementor-element.elementor-element-2218799 .acf-fields>.acf-field{border-top:none;}.elementor-20774 .elementor-element.elementor-element-2218799 .acf-field[data-width]+.acf-field[data-width]{border-left:none;}.elementor-20774 .elementor-element.elementor-element-852523d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:80px;--padding-bottom:30px;--padding-left:10px;--padding-right:10px;}.elementor-20774 .elementor-element.elementor-element-852523d:not(.elementor-motion-effects-element-type-background), .elementor-20774 .elementor-element.elementor-element-852523d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-e9264cb );}.elementor-20774 .elementor-element.elementor-element-994cbb3 .elementor-heading-title{font-family:"Livvic", Sans-serif;font-weight:600;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-20774 .elementor-element.elementor-element-f400535{font-family:"Livvic", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-20774 .elementor-element.elementor-element-9aa9deb .elementor-button{background-color:#FFFFFF;font-family:"Livvic", Sans-serif;font-weight:500;fill:var( --e-global-color-e9264cb );color:var( --e-global-color-e9264cb );}.elementor-20774 .elementor-element.elementor-element-9aa9deb{border-radius:10px 10px 10px 10px;}@media(min-width:768px){.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-48264c7{width:100%;margin:o% o% o% o%;padding:o% o% o% o%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-31fc31a{width:100%;margin:o% o% o% o%;padding:o% o% o% o%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-85d2f03{width:100%;margin:o% o% o% o%;padding:o% o% o% o%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-4f2f5c1{width:100%;margin:o% o% o% o%;padding:o% o% o% o%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-77ace01{width:100%;margin:o% o% o% o%;padding:o% o% o% o%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-1c3575a{width:100%;margin:o% o% o% o%;padding:o% o% o% o%;}}@media(max-width:767px){.elementor-20774 .elementor-element.elementor-element-cb4b3b7{--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-48264c7{width:100%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-31fc31a{width:100%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-85d2f03{width:100%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-4f2f5c1{width:100%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-77ace01{width:100%;}.elementor-20774 .elementor-element.elementor-element-2218799 .elementor-repeater-item-1c3575a{width:100%;}}/* Start custom CSS for new_post, class: .elementor-element-2218799 *//* =========================================================================
   PAMARKET ONLINE — PROPERTY LISTINGS STYLE
   Paste this into the Advanced tab > Custom CSS of the widget/section
   that wraps your ACF property loop (Loop Grid / Posts / JetEngine, etc.)
   =========================================================================

   HOW TO WIRE IT UP IN ELEMENTOR:
   1. Select the widget that wraps the whole listings grid (Loop Grid,
      Posts, or JetEngine Listing Grid) and paste this WHOLE file into
      its Advanced > Custom CSS box. It will apply to everything inside it.
   2. On the elements INSIDE each card (in your Loop Item template),
      open Advanced > CSS Classes and add the class names below —
      no need to write any more CSS, just type the class name in:

        Card wrapper (Container/Div holding the whole card) -> property-card
        Featured image widget                                -> property-thumb
        Status badge text (e.g. "For Sale")   (ACF field)     -> property-badge
        Price text                             (ACF field)     -> property-price
        Title / Heading widget                                 -> property-title
        Location text (with icon)              (ACF field)     -> property-location
        The row/container holding beds/baths/sqft              -> property-meta
        Each individual meta item (Bed count, Bath count...)   -> property-meta-item
        "View Details" button                                  -> property-btn

   3. If your ACF fields use the [acf field="beds"] shortcode inside a
      plain Text Editor widget, just wrap that widget's CSS class the
      same way — the class goes on the WIDGET, this CSS handles the rest.

   ========================================================================= */

/* ---- 1. Brand variables — swap these for the exact hex from the logo ---- */
:root {
  --pm-blue: #14396B;        /* Pamarket primary blue   */
  --pm-blue-light: #1F5C9E;  /* lighter blue for accents/hover */
  --pm-maroon: #7A1E2B;      /* Pamarket maroon */
  --pm-maroon-light: #9C2E3D;
  --pm-ink: #1A1A1A;
  --pm-grey: #6B7280;
  --pm-bg: #F5F6F8;
  --pm-white: #FFFFFF;
  --pm-radius: 14px;
  --pm-shadow: 0 4px 14px rgba(20, 57, 107, 0.08);
  --pm-shadow-hover: 0 14px 34px rgba(20, 57, 107, 0.18);
}

/* ---- 2. Grid wrapper (Loop Grid / Posts container) ---- */
.elementor-loop-container,
.elementor-posts-container,
.jet-listing-grid__items {
  gap: 28px !important;
}

/* ---- 3. Card ---- */
.property-card {
  position: relative;
  background: var(--pm-white);
  border-radius: var(--pm-radius);
  overflow: hidden;
  box-shadow: var(--pm-shadow);
  border: 1px solid rgba(20, 57, 107, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.property-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pm-shadow-hover);
}

/* ---- 4. Thumbnail ---- */
.property-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--pm-radius) var(--pm-radius) 0 0;
}

.property-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}

.property-card:hover .property-thumb img {
  transform: scale(1.08);
}

/* subtle gradient so a white badge/price never disappears on a bright photo */
.property-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
  pointer-events: none;
}

/* ---- 5. Status badge (For Sale / For Rent / Sold — ACF field) ---- */
.property-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--pm-maroon);
  color: var(--pm-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  box-shadow: 0 3px 10px rgba(122, 30, 43, 0.35);
}

/* Optional second badge variant, e.g. "Featured" — add class property-badge--blue */
.property-badge.property-badge--blue {
  background: var(--pm-blue);
  box-shadow: 0 3px 10px rgba(20, 57, 107, 0.35);
  left: auto;
  right: 16px;
}

/* ---- 6. Price (ACF field) ---- */
.property-price {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  color: var(--pm-white);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.property-price span {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
  margin-left: 4px;
}

/* ---- 7. Body ---- */
.property-card .property-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.property-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pm-ink);
  margin: 0 0 6px;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.property-card:hover .property-title {
  color: var(--pm-blue);
}

/* ---- 8. Location (ACF field) ---- */
.property-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--pm-grey);
  margin-bottom: 16px;
}

.property-location::before {
  content: "\1F4CD"; /* pin emoji fallback, replace with an icon widget if preferred */
  font-size: 13px;
  filter: grayscale(1) brightness(0.4) sepia(1) hue-rotate(180deg);
}

/* ---- 9. Meta row: beds / baths / sqft (ACF fields) ---- */
.property-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px solid #ECEEF1;
}

.property-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pm-ink);
}

.property-meta-item i,
.property-meta-item svg {
  color: var(--pm-blue-light);
  font-size: 15px;
}

/* ---- 10. CTA button ---- */
.property-btn {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  background: var(--pm-blue);
  color: var(--pm-white) !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 9px;
  text-decoration: none !important;
  transition: background 0.25s ease, transform 0.2s ease;
}

.property-btn:hover {
  background: var(--pm-maroon);
  transform: translateY(-2px);
}

/* ---- 11. Optional: filter/search bar above the grid ---- */
.property-filters {
  background: var(--pm-bg);
  border: 1px solid rgba(20, 57, 107, 0.08);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 30px;
}

.property-filters select,
.property-filters input {
  border: 1px solid rgba(20, 57, 107, 0.18) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: var(--pm-white) !important;
}

.property-filters select:focus,
.property-filters input:focus {
  border-color: var(--pm-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(20, 57, 107, 0.12) !important;
}

.property-filters button,
.property-filters .elementor-button {
  background: var(--pm-maroon) !important;
  border: none !important;
  color: var(--pm-white) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

.property-filters button:hover,
.property-filters .elementor-button:hover {
  background: var(--pm-maroon-light) !important;
}

/* ---- 12. Responsive tweaks ---- */
@media (max-width: 767px) {
  .property-price { font-size: 19px; }
  .property-body { padding: 16px 16px 18px; }
  .property-meta { flex-wrap: wrap; row-gap: 10px; }
}

/* =========================================================================
   13. FRONT-END SUBMISSION FORM  (the [acf_form] shortcode)
   =========================================================================
   ACF renders its own markup/classes automatically — you don't add CSS
   Classes per field like the cards above. Just paste this whole file
   (or this section) into the Advanced > Custom CSS of whichever
   Elementor widget (Shortcode / HTML) contains the [acf_form] shortcode.

   If you want this scoped ONLY to that widget and not bleed elsewhere,
   add a CSS Class of "pm-listing-form" to that same Shortcode/HTML
   widget in Advanced > CSS Classes — the .elementor-20774 .elementor-element.elementor-element-2218799s below already assume
   that wrapper class is present. If you'd rather it apply site-wide to
   every ACF form, just delete ".pm-listing-form " from the .elementor-20774 .elementor-element.elementor-element-2218799s.
   ========================================================================= */

.pm-listing-form .acf-form {
  background: var(--pm-white);
  border-radius: var(--pm-radius);
  border: 1px solid rgba(20, 57, 107, 0.08);
  box-shadow: var(--pm-shadow);
  padding: 32px clamp(20px, 4vw, 44px);
  max-width: 720px;
  margin: 0 auto;
}

/* Section dividers ACF adds between field groups/tabs */
.pm-listing-form .acf-form .acf-fields > .acf-field {
  border-top: 1px solid #ECEEF1;
  padding: 18px 0 !important;
}

.pm-listing-form .acf-form .acf-fields > .acf-field:first-child {
  border-top: none;
  padding-top: 0 !important;
}

/* Field labels */
.pm-listing-form .acf-label label {
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-ink);
  margin-bottom: 6px;
}

.pm-listing-form .acf-label .acf-required {
  color: var(--pm-maroon);
}

.pm-listing-form .acf-label p.description {
  font-size: 12.5px;
  color: var(--pm-grey);
  margin-top: 2px;
}

/* Text / number / email / url / textarea / select inputs */
.pm-listing-form .acf-input input[type="text"],
.pm-listing-form .acf-input input[type="number"],
.pm-listing-form .acf-input input[type="email"],
.pm-listing-form .acf-input input[type="url"],
.pm-listing-form .acf-input input[type="tel"],
.pm-listing-form .acf-input input[type="password"],
.pm-listing-form .acf-input textarea,
.pm-listing-form .acf-input select {
  width: 100%;
  border: 1px solid rgba(20, 57, 107, 0.2) !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
  font-size: 14.5px !important;
  color: var(--pm-ink) !important;
  background: var(--pm-bg) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pm-listing-form .acf-input textarea {
  min-height: 120px;
  resize: vertical;
}

.pm-listing-form .acf-input input:focus,
.pm-listing-form .acf-input textarea:focus,
.pm-listing-form .acf-input select:focus {
  outline: none !important;
  border-color: var(--pm-blue) !important;
  background: var(--pm-white) !important;
  box-shadow: 0 0 0 3px rgba(20, 57, 107, 0.14) !important;
}

/* Select2 dropdowns (ACF uses select2 for post-object/taxonomy/select fields) */
.pm-listing-form .select2-container--default .select2-selection--single,
.pm-listing-form .select2-container--default .select2-selection--multiple {
  border: 1px solid rgba(20, 57, 107, 0.2) !important;
  border-radius: 9px !important;
  padding: 4px 4px !important;
  min-height: 44px !important;
  background: var(--pm-bg) !important;
}

.pm-listing-form .select2-container--default.select2-container--focus .select2-selection--multiple,
.pm-listing-form .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--pm-blue) !important;
  box-shadow: 0 0 0 3px rgba(20, 57, 107, 0.14) !important;
}

.pm-listing-form .select2-selection__choice {
  background: var(--pm-blue) !important;
  color: var(--pm-white) !important;
  border: none !important;
  border-radius: 6px !important;
}

/* True/False + checkbox + radio */
.pm-listing-form .acf-true-false .acf-switch,
.pm-listing-form input[type="checkbox"],
.pm-listing-form input[type="radio"] {
  accent-color: var(--pm-blue);
}

.pm-listing-form .acf-checkbox-list li,
.pm-listing-form .acf-radio-list li {
  font-size: 14px;
  margin-bottom: 6px;
}

/* Image / file upload boxes (used for the property photo gallery field) */
.pm-listing-form .acf-image-uploader,
.pm-listing-form .acf-gallery {
  border: 2px dashed rgba(20, 57, 107, 0.25) !important;
  border-radius: 10px !important;
  background: var(--pm-bg) !important;
}

.pm-listing-form .acf-gallery-add,
.pm-listing-form .acf-image-uploader .acf-button {
  background: var(--pm-blue) !important;
  border: none !important;
  color: var(--pm-white) !important;
  border-radius: 7px !important;
}

/* Google Map field key (address search bar ACF adds above the map) */
.pm-listing-form .acf-google-map .search {
  border: 1px solid rgba(20, 57, 107, 0.2) !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
}

/* Submit button + wrapper */
.pm-listing-form .acf-form-submit {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #ECEEF1;
}

.pm-listing-form input[type="submit"],
.pm-listing-form .acf-form-submit .button,
.pm-listing-form .acf-form-submit input[type="submit"] {
  background: var(--pm-maroon) !important;
  color: var(--pm-white) !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 13px 32px !important;
  border-radius: 9px !important;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.pm-listing-form input[type="submit"]:hover,
.pm-listing-form .acf-form-submit .button:hover {
  background: var(--pm-maroon-light) !important;
  transform: translateY(-2px);
}

/* Validation error state ACF adds (.acf-error) */
.pm-listing-form .acf-error .acf-input input,
.pm-listing-form .acf-error .acf-input textarea,
.pm-listing-form .acf-error .acf-input select {
  border-color: var(--pm-maroon) !important;
  background: rgba(122, 30, 43, 0.04) !important;
}

.pm-listing-form .acf-error-message {
  background: var(--pm-maroon) !important;
  color: var(--pm-white) !important;
  border-radius: 7px !important;
  font-size: 13px !important;
}

/* Prepend/append boxes (the "ZMW" badge before Property Price) */
.pm-listing-form .acf-input-prepend,
.pm-listing-form .acf-input-append {
  background: var(--pm-blue) !important;
  color: var(--pm-white) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  border: 1px solid var(--pm-blue) !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 9px 0 0 9px !important;
}

.pm-listing-form .acf-input-append {
  border-radius: 0 9px 9px 0 !important;
}

/* the input sitting next to a prepend loses its matching corner + border
   so the two visually fuse into one pill instead of two separate boxes */
.pm-listing-form .acf-input-wrap input.acf-is-prepended {
  border-radius: 0 9px 9px 0 !important;
  border-left: none !important;
}

.pm-listing-form .acf-input-wrap input.acf-is-appended {
  border-radius: 9px 0 0 9px !important;
  border-right: none !important;
}

.pm-listing-form .acf-input-prepend + .acf-input-wrap,
.pm-listing-form .acf-input-wrap:has(+ .acf-input-append) {
  display: flex !important;
}

/* Custom dropdown arrow so <select> doesn't fall back to the OS default look */
.pm-listing-form .acf-input select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2314396B' stroke-width='2' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
  cursor: pointer;
}

/* Give the whole form a clear visual identity even sitting on a white page */
.pm-listing-form .acf-form {
  border: 1px solid rgba(20, 57, 107, 0.12) !important;
  box-shadow: 0 10px 30px rgba(20, 57, 107, 0.1) !important;
  position: relative;
}

.pm-listing-form .acf-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: var(--pm-radius) var(--pm-radius) 0 0;
  background: linear-gradient(90deg, var(--pm-blue), var(--pm-maroon));
}

@media (max-width: 767px) {
  .pm-listing-form .acf-form { padding: 24px 18px; }
}/* End custom CSS */