/* ---------------------------------------------------------------
   Apex27 listings plugin — Lova overrides

   Selectors below were read from the plugin's own stylesheet
   (assets/css/style.css) rather than guessed. The rules being
   overridden are:

     .card.property-card > .card-body        { background: rgba(0,0,0,.05) }
     .card.property-card.featured > .card-body { background: darkslategrey; color: white }
     .featured-badge                         { background: rgba(255,0,0,.75) }
     .apex27-container                       { max-width: 120rem }

   Note .featured is on the CARD, not the badge — target
   .featured-badge for the flag itself.
   --------------------------------------------------------------- */

/* Page background: the plugin greys it. */
html, body { background: var(--white) !important; }

/* Match the theme's content width instead of 120rem. */
.apex27-container {
  max-width: var(--wrap) !important;
  width: 100% !important;
  padding: 0 32px !important;
}

/* The plugin's heading margins are very large (6rem). */
.apex27-container h1,
.apex27-container h2,
.apex27-container h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  margin-top: 3.5rem !important;
  margin-bottom: 1.5rem !important;
}
.apex27-container h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
  font-size: 1.35rem !important;
}
.apex27-container { font-family: var(--sans); }

/* ── Property cards ───────────────────────── */
.card.property-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(22,18,28,.04), 0 10px 26px rgba(22,18,28,.05);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.card.property-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(93,11,147,.10), 0 26px 54px rgba(93,11,147,.18);
}
.card.property-card > .card-body {
  background: #fff !important;
  color: var(--body) !important;
  padding: 24px !important;
}
/* Featured: a purple accent rather than a dark green fill. */
.card.property-card.featured > .card-body {
  background: #fff !important;
  color: var(--body) !important;
  border-left: 4px solid var(--purple);
}
.card.property-card .property-card-details a { color: var(--ink); }
.card.property-card .property-card-details a:hover { color: var(--purple); }

/* The featured flag itself (red by default). */
.featured-badge {
  background: var(--purple) !important;
  color: #fff !important;
  font-family: var(--sans);
  font-size: 11px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  padding: 4px 10px !important;
}

/* ── Buttons ───────────────────────── */
.apex27-container a[class*="btn"], .apex27-container button,
.apex27-container input[type="submit"], .apex27-container .button {
  background: var(--purple) !important;
  border: 1px solid var(--purple) !important;
  color: #fff !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  padding: 13px 24px !important;
  border-radius: 4px !important;
  transition: all .22s;
}
.apex27-container a[class*="btn"]:hover, .apex27-container button:hover,
.apex27-container input[type="submit"]:hover {
  background: var(--purple-deep) !important;
  border-color: var(--purple-deep) !important;
}

/* ── Search filters and enquiry form ───────────────────────── */
.apex27-container select, .apex27-container input[type="text"],
.apex27-container input[type="email"], .apex27-container input[type="tel"],
.apex27-container textarea {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
}
.apex27-container select:focus, .apex27-container input:focus,
.apex27-container textarea:focus {
  outline: 0 !important;
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(123,26,180,.1) !important;
}
.apex27-container label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
}

.apex27-container img { max-width: 100%; }