/* Listing pages: property type (property_type.php) and state (explore_neighbour.php).
 *
 * These pages show the same cards as property.php, so they carry the same CSS.
 * Every block below is copied verbatim from property.php (the inline <style>
 * there), in its own order, so the cascade is the one the cards were built for:
 *
 *   property.php   385-759    Base: page background, galaxy layer, card shimmer, hover card, gold button, Back button, breadcrumb
 *   property.php   838-901    Card base: .property-card2 and its hover
 *   property.php   921-1557   Quick view: modal shell, inner styles, backdrop, close button
 *   property.php  1559-1855   Locked-card overlay (FSBO and foreclosure rows for a free visitor)
 *   property.php  3135-3970   Listing card (the "new property card design" block)
 *   property.php  4037-4059   Grid spacing
 *   property.php  8900-9014   Pagination
 *   property.php  9079-9226   Call to action: "Connect with a local real estate expert"
 *   property.php  9256-9993   Quick view: dark premium theme
 *
 * Keep it in step with property.php: a card rule changed there belongs here
 * too. The two stylesheets the card helpers own (property-views.css and
 * property-card-passport.css) are linked separately, as on property.php.
 */

/* ---- Base: page background, galaxy layer, card shimmer, hover card, gold button, Back button, breadcrumb (property.php 385-759) ---- */
  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

  :root {
      --bg-color:          #061121;
      --surface-color:     rgba(6,17,33,0.70);
      --surface-secondary: rgba(14,30,55,0.85);
      --border-color:      rgba(235,216,176,0.18);
      --primary-text:      #eaf1f7;
      --secondary-text:    #cbd5e1;
      --accent-color:      #ebd8b0;
      --gold-primary:      #ebd8b0;
      --gold-hover:        #dfc89d;
      --gold-active:       #c5ad83;
      
      --housbe-card-bg:    rgba(6, 17, 33, 0.70) !important;
      --housbe-border:     rgba(235, 216, 176, 0.18) !important;
      --housbe-text:       #eaf1f7 !important;
      --muted:             #cbd5e1 !important;
  }

  html,
  body {
    max-width: 100%;
    /* `clip` (not `hidden`) avoids creating a vertical scroll container,
       which otherwise produces a double scrollbar on mobile. */
    overflow-x: clip;
  }

  body {
    background-color: #061121 !important;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(43,93,153,0.15) 0%, transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(235,216,176,0.10) 0%, transparent 60%) !important;
    background-attachment: fixed !important;
    color: #eaf1f7 !important;
    font-family: 'Outfit', sans-serif !important;
    position: relative;
  }

  /* ── Galaxy Background Layer ─────────────────────────── */
  #page-galaxy-bg {
      position: fixed;
      top: -50%; left: -50%;
      width: 200%; height: 200%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      background-image:
          radial-gradient(circle, rgba(255,255,255,0.30)  1px,   transparent 1px),
          radial-gradient(circle, rgba(255,255,255,0.18)  1.5px, transparent 1.5px),
          radial-gradient(circle, rgba(235,216,176,0.18)  1px,   transparent 1px) !important;
      background-size: 84px 84px, 126px 126px, 105px 105px;
      animation: pageGalaxyFloat 120s infinite linear;
      opacity: 0.35;
  }
  @keyframes pageGalaxyFloat {
      0%   { transform: translateY(0)     rotate(0deg);   }
      50%  { transform: translateY(-30px) rotate(180deg); }
      100% { transform: translateY(0)     rotate(360deg); }
  }

  /* Card rotating stars & shimmer */
  .card-stars {
      position: absolute !important;
      top: -50% !important;
      left: -50% !important;
      width: 200% !important;
      height: 200% !important;
      background-image: 
          radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
          radial-gradient(circle, rgba(255, 255, 255, 0.20) 1.5px, transparent 1.5px),
          radial-gradient(circle, rgba(235, 216, 176, 0.20) 1px, transparent 1px) !important;
      background-size: 70px 70px, 105px 105px, 84px 84px !important;
      animation: galaxyRotate 80s infinite linear !important;
      pointer-events: none !important;
      z-index: 1 !important;
      opacity: 0.55 !important;
  }

  .card-shimmer {
      position: absolute !important;
      top: -50% !important;
      left: -50% !important;
      width: 200% !important;
      height: 200% !important;
      background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.12) 50%,
          rgba(255, 255, 255, 0) 100%
        ) !important;
      transform: rotate(45deg);
      animation: luxuryCardShimmer 6s infinite linear !important;
      pointer-events: none !important;
      z-index: 2 !important;
  }

  @keyframes galaxyRotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

  @keyframes luxuryCardShimmer {
      0% { transform: rotate(45deg) translateY(120%); }
      50% { transform: rotate(45deg) translateY(-120%); }
      100% { transform: rotate(45deg) translateY(-120%); }
  }
  
  /* Premium Glowing Style (Gold & Sapphire Theme) */
  .premium-hover-card {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.14) 0%, transparent 55%),
        linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
    border: 1px solid rgba(235, 216, 176, 0.25) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-radius: 20px !important;
    box-shadow: 
        3px 5px 0 rgba(195, 145, 35, 0.45),
        4px 7px 8px rgba(0, 0, 0, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.45),
        0 5px 10px rgba(0, 0, 0, 0.32),
        0 20px 40px rgba(0, 0, 0, 0.22),
        0 0 28px rgba(235, 216, 176, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
    margin-bottom: 30px !important;
    z-index: 1 !important;
  }

  .premium-hover-card::after {
    content: '' !important;
    position: absolute !important;
    top: 6px !important; 
    left: 6px !important; 
    right: 6px !important; 
    bottom: 6px !important;
    border: 1px solid rgba(235, 216, 176, 0.13) !important;
    border-radius: 14px !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .premium-hover-card:hover {
    box-shadow: 
        4px 7px 0 rgba(215, 165, 45, 0.58),
        5px 9px 12px rgba(0, 0, 0, 0.65),
        0 18px 36px rgba(0, 0, 0, 0.55),
        0 8px 16px rgba(0, 0, 0, 0.42),
        0 28px 50px rgba(0, 0, 0, 0.28),
        0 0 36px rgba(235, 216, 176, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
    transform: translateY(-8px) scale(1.02) !important;
    border-top-color: rgba(235, 216, 176, 0.92) !important;
    border-left-color: rgba(235, 216, 176, 0.72) !important;
    border-right-color: rgba(235, 216, 176, 0.22) !important;
    border-bottom-color: rgba(235, 216, 176, 0.10) !important;
  }

  .mouse-light {
    position: absolute !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(235, 216, 176, 0.15) 0%, rgba(235, 216, 176, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
  }

  .premium-hover-card:hover .mouse-light {
    opacity: 1 !important;
  }

  .leads-btn-premium {
    background: linear-gradient(135deg, #ebd8b0 0%, #dfc89d 100%) !important;
    color: #061121 !important;
    border: 1px solid rgba(235, 216, 176, 0.4) !important;
    border-radius: 30px !important;
    padding: 10px 25px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .leads-btn-premium:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(235, 216, 176, 0.35) !important;
    background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
  }

  /* ── Back Button ─────────────────────────────────────── */
  .btn-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(6,17,33,0.6) !important;
      color: #ebd8b0 !important;
      border: 1px solid rgba(235,216,176,0.4) !important;
      padding: 0 16px;
      height: 36px;
      border-radius: 30px !important;
      text-decoration: none !important;
      font-weight: 600 !important;
      font-size: 12.5px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
      box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important;
      transition: all 0.3s ease !important;
      position: relative;
      overflow: hidden;
      width: fit-content !important;
      cursor: pointer;
      z-index: 3;
  }
  .btn-back::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(to right,
          rgba(255,255,255,0)   0%,
          rgba(255,255,255,0.4) 50%,
          rgba(255,255,255,0)   100%);
      transform: skewX(-20deg);
      animation: back-shimmer 2.5s infinite;
  }
  @keyframes back-shimmer {
      0%   { left: -100%; }
      100% { left: 200%;  }
  }
  .btn-back:hover {
      background: rgba(235,216,176,0.12) !important;
      border-color: rgba(235,216,176,0.8) !important;
      color: #ebd8b0 !important;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(235,216,176,0.2) !important;
  }
  .btn-back i { font-size: 12px; color: #ebd8b0 !important; }

  /* "Property Listings" heading — styled like the Back button pill */
  #see-result h4 {
      display: inline-flex !important;
      align-items: center;
      background: rgba(6,17,33,0.6) !important;
      color: #ebd8b0 !important;
      -webkit-text-fill-color: #ebd8b0 !important;
      border: 1px solid rgba(235,216,176,0.4) !important;
      padding: 10px 22px !important;
      border-radius: 30px !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px !important;
      box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important;
      width: fit-content !important;
  }

  /* ── Breadcrumb pills (match the Back button) ────────── */
  ul.breadcrumb {
      display: flex !important;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      list-style: none;
      margin: 0;
      padding: 0;
  }
  ul.breadcrumb > li {
      display: inline-flex;
      align-items: center;
  }
  /* Separator chevron between pills */
  ul.breadcrumb > li > i.fa-angle-right {
      color: rgba(235,216,176,0.55) !important;
      font-size: 12px !important;
  }
  .bc-link {
      display: inline-flex !important;
      align-items: center;
      gap: 7px;
      background: rgba(6,17,33,0.6) !important;
      color: #ebd8b0 !important;
      border: 1px solid rgba(235,216,176,0.4) !important;
      padding: 0 16px;
      height: 36px;
      border-radius: 30px !important;
      text-decoration: none !important;
      font-weight: 600 !important;
      font-size: 12.5px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
      box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important;
      transition: all 0.3s ease !important;
      position: relative;
      overflow: hidden;
      width: fit-content !important;
      cursor: pointer;
      z-index: 3;
  }
  .bc-link::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(to right,
          rgba(255,255,255,0)   0%,
          rgba(255,255,255,0.4) 50%,
          rgba(255,255,255,0)   100%);
      transform: skewX(-20deg);
      animation: back-shimmer 2.5s infinite;
  }
  .bc-link:hover {
      background: rgba(235,216,176,0.12) !important;
      border-color: rgba(235,216,176,0.8) !important;
      color: #ebd8b0 !important;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(235,216,176,0.2) !important;
  }
  .bc-link i { font-size: 12px; color: #ebd8b0 !important; }

  /* Current page pill — filled gold to mark "you are here" */
  .bc-link.is-current {
      background: linear-gradient(135deg, #ebd8b0 0%, #dfc89d 100%) !important;
      color: #061121 !important;
      border-color: rgba(235,216,176,0.7) !important;
      box-shadow: 0 4px 15px rgba(235,216,176,0.35) !important;
      cursor: default;
  }
  .bc-link.is-current:hover {
      transform: none;
      color: #061121 !important;
  }
  .bc-link.is-current i { color: #061121 !important; }

  /* ── Compact breadcrumb on mobile ───────────────────── */
  @media (max-width: 575px) {
      ul.breadcrumb { gap: 6px; row-gap: 6px; max-width: 100%; align-items: center; }
      ul.breadcrumb > li { margin: 0 !important; }
      ul.breadcrumb > li > i.fa-angle-right,
      ul.breadcrumb > i.fa-angle-right { display: none !important; }
      .bc-link {
          padding: 0 10px !important;
          height: 28px !important;
          font-size: 10px !important;
          letter-spacing: 0.2px !important;
          text-transform: none !important;
          gap: 4px !important;
          border-radius: 20px !important;
      }
      .bc-link i { font-size: 10px !important; }
      .bc-link.is-current { box-shadow: 0 2px 8px rgba(235,216,176,0.25) !important; }
      .breadcrumb .btn-back {
          height: 28px !important;
          padding: 0 10px !important;
          font-size: 10px !important;
          letter-spacing: 0.2px !important;
          text-transform: none !important;
          border-radius: 20px !important;
      }
      .breadcrumb .btn-back i { font-size: 10px !important; }
  }

/* ---- Card base: .property-card2 and its hover (property.php 838-901) ---- */
  .property-card2 {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.14) 0%, transparent 55%),
        linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
    border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
    border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
    border-right: 1px solid rgba(235, 216, 176, 0.12) !important;
    border-bottom: 1px solid rgba(235, 216, 176, 0.06) !important;
    border-radius: 20px !important;
    box-shadow: 
        3px 5px 0 rgba(195, 145, 35, 0.45),
        4px 7px 8px rgba(0, 0, 0, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.45),
        0 5px 10px rgba(0, 0, 0, 0.32),
        0 20px 40px rgba(0, 0, 0, 0.22),
        0 0 28px rgba(235, 216, 176, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: #fff;
    z-index: 1 !important;
    isolation: isolate !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .property-card2::after {
    content: '' !important;
    position: absolute !important;
    top: 6px !important; 
    left: 6px !important; 
    right: 6px !important; 
    bottom: 6px !important;
    border: 1px solid rgba(235, 216, 176, 0.13) !important;
    border-radius: 14px !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .property-card2:hover {
    transform: translateY(-8px) scale(1.02) !important;
    background:
        radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.18) 0%, transparent 55%),
        linear-gradient(160deg, rgba(16, 34, 62, 0.92) 0%, rgba(6, 17, 33, 0.86) 100%) !important;
    border-top-color: rgba(235, 216, 176, 0.92) !important;
    border-left-color: rgba(235, 216, 176, 0.72) !important;
    border-right-color: rgba(235, 216, 176, 0.22) !important;
    border-bottom-color: rgba(235, 216, 176, 0.10) !important;
    box-shadow:
        4px 7px 0 rgba(215, 165, 45, 0.58),
        5px 9px 12px rgba(0, 0, 0, 0.65),
        0 18px 36px rgba(0, 0, 0, 0.55),
        0 8px 16px rgba(0, 0, 0, 0.42),
        0 28px 50px rgba(0, 0, 0, 0.28),
        0 0 36px rgba(235, 216, 176, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
  }

  /* Range Sliders Premium Skin */

/* ---- Quick view: modal shell, inner styles, backdrop, close button (property.php 921-1557) ---- */
  .property-card {
    display: none;
    width: 95%;
    max-width: 920px;
    margin: 0 auto;
    background:
        radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.16) 0%, transparent 55%),
        linear-gradient(160deg, rgba(14, 30, 55, 0.98) 0%, rgba(6, 17, 33, 0.99) 100%);
    border: 1px solid rgba(235, 216, 176, 0.28);
    border-radius: 22px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(235, 216, 176, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: 92vh;
    z-index: 9999;
    color: #eaf1f7;
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 216, 176, 0.5) transparent;
  }

  #quickViewModel::-webkit-scrollbar { width: 8px; }
  #quickViewModel::-webkit-scrollbar-track { background: transparent; }
  #quickViewModel::-webkit-scrollbar-thumb {
    background: rgba(235, 216, 176, 0.4);
    border-radius: 8px;
  }
  #quickViewModel::-webkit-scrollbar-thumb:hover { background: rgba(235, 216, 176, 0.6); }

  .image-gallery {
    position: relative;
    height: 400px;
    background: #f0f0f0;
  }

  .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .thumbnails {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
  }

  .thumbnail {
    width: 60px;
    height: 60px;
    border: 3px solid white;
    border-radius: 5px;
    cursor: pointer;
    object-fit: cover;
    transition: all 0.2s;
  }

  .thumbnail:hover {
    transform: scale(1.05);
  }

  .thumbnail.active {
    border-color: #4CAF50;
  }

  .property-status {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #667eea 0%, #FF0000 100%);
    color: white;
    padding: 8px 15px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
  }

  .property-status2 {
    position: absolute;
    top: 20px;
    left: 145px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 8px 15px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
  }

  .image-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    transition: all 0.2s;
  }

  .image-nav:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
  }

  .prev {
    left: 20px;
    background: linear-gradient(135deg, #667eea 0%, #FF0000 100%);
    color: #FFF;
  }

  .next {
    right: 20px;
    background: linear-gradient(135deg, #667eea 0%, #FF0000 100%);
    color: #FFF;
  }

  .property-details {
    padding: 25px;
  }

  .price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }

  .price {
    font-size: 25px;
    font-weight: 500;
    color: #fff;
  }

  .action-buttons {
    display: flex;
    gap: 10px;
  }

  .btn-outline {
    background: transparent;
    border: 1px solid #ddd;
  }

  .btn-outline:hover {
    background: #f5f5f5;
  }

  .btn i {
    margin-right: 5px;
  }

  .property-title {
    font-size: 22px;
    margin-bottom: 5px;
    color: #fff;
  }

  .property-address {
    color: #7f8c8d;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }

  .property-address i {
    margin-right: 5px;
    color: #95a5a6;
  }

  .property-features {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px 10px;
  }

  .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .feature-value {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
  }

  .feature-label {
    font-size: 14px;
    color: #aaa;
  }

  .property-description {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .agent-section {
    display: flex;
    align-items: center;
    background: #1F2C2D;
    padding: 15px;
    border-radius: 8px;
  }

  .agent-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
  }

  .agent-info {
    flex: 1;
  }

  .agent-name {
    font-weight: 600;
    color: #fff !important;
  }

  .agent-name a {
    font-weight: 600;
    color: #fff !important;
  }

  .agent-contact {
    color: #f2f2f2;
    font-size: 14px;
  }

  .contact-agent {
    margin-left: 10px;
  }

  /* Responsive styles */
  @media (max-width: 768px) {
    .image-gallery {
      height: 300px;
    }

    .feature {
      width: 30%;
    }

    .property-card {
      width: 95%;
      height: auto;
      max-height: 85vh;
    }

    #close {
      top: 2%;
      right: 5% !important;
      font-size: 35px;
    }
  }

  @media (max-width: 480px) {
    .price-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
    }

    .agent-section {
      flex-direction: column;
      text-align: center;
    }

    .agent-image {
      margin-right: 0;
      margin-bottom: 10px;
    }

    .contact-agent {
      margin-left: 0;
      margin-top: 10px;
    }

    .image-gallery {
      height: 220px;
    }

    .thumbnails {
      bottom: 10px;
      left: 10px;
      flex-wrap: wrap;
    }

    .thumbnail {
      width: 45px;
      height: 45px;
    }

    .property-title {
      font-size: 18px;
    }

    .price {
      font-size: 20px;
    }

    .box-house .content {
      padding: 23px 5px 23px;
    }

    .property-details {
      padding: 15px;
    }

    .amenities-list {
      list-style: none;
      padding: 0;
      margin: 15px 0;
    }

    .amenities-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-size: 15px;
      color: #ddd;
    }

    .amenities-list li i {
      color: #4CAF50;
      font-size: 14px;
    }

    .agent-section {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      margin-top: 20px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .agent-image {
      margin-right: 0 !important;
      margin-bottom: 15px !important;
    }

    .agent-info {
      width: 100%;
      flex: none !important;
      display: block !important;
    }

    .agent-info>* {
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .contact-agent {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      margin-left: 0 !important;
      margin-top: 15px !important;
      padding: 0 !important;
      float: none !important;
    }

    /* Aggressively targeting any button/link/div inside contact-agent */
    .contact-agent>* {
      width: auto !important;
      min-width: 160px;
      max-width: 280px;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      margin: 0 auto !important;
      text-align: center !important;
      padding: 12px 20px !important;
      border-radius: 8px !important;
      float: none !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
    }

    /* Ensuring text and icons inside are also centered */
    .contact-agent>* * {
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
      display: block !important;
    }

    .tf-grid-layout {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
    }

    html,
    body {
      max-width: 100%;
      overflow-x: clip;
    }
  }

  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(6, 17, 33, 0.72) 0%, rgba(2, 7, 15, 0.9) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9998;
  }

  #close {
    display: none;
    position: fixed;
    top: 3%;
    right: 13%;
    width: 46px;
    height: 46px;
    text-align: center;
    line-height: 44px;
    font-size: 22px;
    z-index: 11111;
    color: #ebd8b0;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(6, 17, 33, 0.75);
    border: 1px solid rgba(235, 216, 176, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 18px rgba(235, 216, 176, 0.22);
    transition: all 0.3s ease;
  }

  #close:hover {
    color: #061121;
    background: linear-gradient(135deg, #ebd8b0 0%, #dfc89d 100%);
    border-color: rgba(235, 216, 176, 0.9);
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 26px rgba(235, 216, 176, 0.5);
  }

  .location {
    display: block;
    width: 360px;
    /* Set the width to limit how much text is displayed */
    white-space: nowrap;
    /* Prevent text from wrapping */
    overflow: hidden;
    /* Hide overflowed text */
    text-overflow: ellipsis;
    /* Add "..." to the end */
    font-size: 14px;
  }

  /* vip listing */
  .container2 {
    max-width: 1270px;
    margin: 0 auto;
    padding: 30px 0px;
  }

  .slider-container {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    background-color: #1F2C2D;
    border-radius: 8px;
  }

  .slider-track {
    display: flex;
    width: 100%;
    animation: scroll 20s linear infinite;
  }

  .slider-container:hover .slider-track {
    animation-play-state: paused;
  }

  /* (property-card2 styled in core layout section) */

  .property-image-container {
    position: relative;
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 4px;
  }

  .property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }

  .property-card:hover .property-image {
    transform: scale(1.1);
  }

  .hover-icons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .property-card2:hover .hover-icons {
    opacity: 1;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.2s;
  }

  .icon-btn:hover {
    background-color: #f0f0f0;
    transform: scale(1.1);
  }

  .icon-btn.favorite:hover {
    background-color: #ffebee;
  }

  .icon-btn.quickview:hover {
    background-color: #e3f2fd;
  }

  .icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .property-price {
    font-size: 20px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 5px;
  }

  .property-address {
    font-size: 15px;
    color: #7f8c8d;
    margin-bottom: 10px;
  }

  .property-details {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    font-size: 13px;
  }

  .property-details span {
    display: flex;
    align-items: center;
  }

  /* Quick view overlay */
  .quickview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .quickview-content {
    background-color: white;
    width: 80%;
    max-width: 800px;
    border-radius: 8px;
    padding: 20px;
    position: relative;
  }

  .close-quickview {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
  }

/* ---- Locked-card overlay (FSBO and foreclosure rows for a free visitor) (property.php 1559-1855) ---- */
  /* vip listing blured */
  .content-blur,
  .card-blur {
    filter: blur(8px);
    pointer-events: none;
  }

  .blurred-card {
    position: relative;
  }

  .property-inner {
    margin-top: -20px;
  }

  .blurred-card .blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    pointer-events: all;
    border-radius: 8px;
    /* match card's rounding if any */
  }

  .blur-overlay2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse at center, rgba(6, 17, 33, 0.35) 0%, rgba(6, 17, 33, 0.62) 100%);
    gap: 1.1rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    border-radius: 20px;
    z-index: 5;
    /* Sits ABOVE the blurred card — its own content stays sharp */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .blur-overlay2 p {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    color: #ebd8b0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
  }

  /* ---- Premium "Unlock FSBO & Foreclosure" panel ---- */
  .fsbo-lock-panel {
    width: 100%;
    max-width: 315px;
    background: linear-gradient(165deg, rgba(14, 25, 45, 0.97) 0%, rgba(8, 15, 29, 0.98) 100%);
    border: 1px solid rgba(235, 216, 176, 0.30);
    border-radius: 22px;
    padding: 20px 16px 15px;
    text-align: center;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.65),
        0 0 28px rgba(235, 216, 176, 0.10),
        inset 0 1px 0 rgba(235, 216, 176, 0.14);
  }

  .fsbo-lock-iconwrap {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
  }

  .fsbo-lock-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 25%, rgba(235, 216, 176, 0.18), rgba(6, 17, 33, 0.92) 72%);
    border: 1.5px solid rgba(235, 216, 176, 0.75);
    box-shadow: 0 0 18px rgba(235, 216, 176, 0.30), inset 0 0 12px rgba(235, 216, 176, 0.12);
  }

  .fsbo-lock-circle i {
    font-size: 20px;
    color: #ebd8b0;
    text-shadow: 0 0 10px rgba(235, 216, 176, 0.6);
  }

  .fsbo-spark {
    position: absolute;
    color: #ebd8b0;
    text-shadow: 0 0 6px rgba(235, 216, 176, 0.8);
    animation: fsboTwinkle 2.2s ease-in-out infinite;
    pointer-events: none;
    line-height: 1;
  }
  .fsbo-spark.s1 { top: -4px; right: -16px; font-size: 13px; }
  .fsbo-spark.s2 { top: 18px; right: -26px; font-size: 8px; animation-delay: .55s; }
  .fsbo-spark.s3 { bottom: -2px; left: -18px; font-size: 10px; animation-delay: 1.1s; }
  .fsbo-spark.s4 { top: -10px; left: -10px; font-size: 8px; animation-delay: 1.65s; }

  @keyframes fsboTwinkle {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.15); }
  }

  .fsbo-lock-title {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 800;
    color: #fff;
  }

  .fsbo-lock-title span {
    color: #ebd8b0;
    text-shadow: 0 0 14px rgba(235, 216, 176, 0.35);
  }

  .fsbo-lock-sub {
    margin: 0 0 13px;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65) !important;
    text-shadow: none !important;
  }

  .fsbo-lock-features {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-bottom: 14px;
  }

  .fsbo-lock-feature {
    flex: 1 1 0;
    background: rgba(235, 216, 176, 0.06);
    border: 1px solid rgba(235, 216, 176, 0.18);
    border-radius: 12px;
    padding: 9px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }

  .fsbo-lock-feature i {
    font-size: 13px;
    color: #ebd8b0;
  }

  .fsbo-lock-feature span {
    font-size: 9.5px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
  }

  .fsbo-lock-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #d4af37 0%, #ebd8b0 55%, #d4af37 100%);
    color: #0b1120 !important;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none !important;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 22px rgba(235, 216, 176, 0.30);
    transition: all 0.25s ease;
  }

  .fsbo-lock-btn i {
    color: #0b1120 !important;
    font-size: 12px;
  }

  .fsbo-lock-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: unlock-shimmer 3s infinite;
  }

  .fsbo-lock-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 30px rgba(235, 216, 176, 0.5);
  }

  .fsbo-lock-foot {
    margin: 10px 0 0;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-shadow: none !important;
  }

  .fsbo-lock-foot i {
    color: rgba(235, 216, 176, 0.7);
    margin-right: 4px;
    font-size: 10px;
  }

  /* Dark golden premium "Buy plan / Unlock" button — sits crisply above the card */
  .btn-unlock-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    color: #ebd8b0 !important;
    background: linear-gradient(135deg, #1a1408 0%, #2e2410 45%, #3d2f12 100%);
    border: 1px solid rgba(235, 216, 176, 0.55);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(235, 216, 176, 0.28),
        inset 0 1px 0 rgba(235, 216, 176, 0.30),
        inset 0 0 14px rgba(235, 216, 176, 0.10);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Golden shimmer sweep */
  .btn-unlock-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(235, 216, 176, 0) 0%,
        rgba(235, 216, 176, 0.45) 50%,
        rgba(235, 216, 176, 0) 100%);
    transform: skewX(-20deg);
    animation: unlock-shimmer 3s infinite;
  }
  @keyframes unlock-shimmer {
    0% { left: -120%; }
    60% { left: 200%; }
    100% { left: 200%; }
  }

  .btn-unlock-premium:hover {
    transform: translateY(-2px) scale(1.03);
    color: #f7e6c4 !important;
    border-color: rgba(235, 216, 176, 0.9);
    background: linear-gradient(135deg, #241a0a 0%, #3c2f13 45%, #4d3c17 100%);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.6),
        0 0 32px rgba(235, 216, 176, 0.45),
        inset 0 1px 0 rgba(235, 216, 176, 0.4),
        inset 0 0 18px rgba(235, 216, 176, 0.16);
  }
  .btn-unlock-premium i { color: #ebd8b0 !important; }


/* ---- Listing card (the "new property card design" block) (property.php 3135-3970) ---- */
  /* new property card design style start */
  :root {
    --bg: #0a1a1f;
    --card: #122a30;
    --card-soft: #17363d;
    --primary: #2f8cff;
    --accent: #ff4d5a;
    --muted: #9fb3ba;
    --text: #e9f1f3;
    --chip: rgba(255, 255, 255, 0.12);
  }

  /* (body and property-card2 styled in core layout section) */

  /* Image */
  .card-image2 {
    position: relative;
    height: 210px;
  }

  .card-image2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }

  .image-overlay2 {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .55) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all .6s ease-in-out;
  }

  .property-card2:hover .image-overlay2 {
    opacity: 1;
  }


  /* Badges */
  .badges2 {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .badge2 {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 300;
    border-radius: 999px;
    background: var(--chip);
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .badge2.primary {
    background: linear-gradient(135deg, #4aa3ff, var(--primary));
  }

  .badge2.danger {
    background: linear-gradient(135deg, #ff6b75, var(--accent));
  }

  /* Content */
  .card-body2 {
    padding: 18px 18px 20px;
  }

  .meta2 {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
  }

  .title2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    color: white !important;
  }

  /* ---------- PROVENANCE STRIP ----------
     An imported row has no photographs of its own. What the card shows is a
     Google Street View frame of the address, downloaded at publish and parked
     in propertyFile/ alongside genuine listing images — which is exactly why
     it has to say so on its face. Two separate claims, deliberately: what the
     picture IS, and what the listing IS NOT. */
  .hb-prov {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0 2px;
  }
  .hb-prov-off {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffd7da;
  }
  .hb-prov-off i { font-size: 10px; color: #ff8a94; flex: none; }
  /* The image credit, not a caption on the listing: it describes the
     photograph, so it stays visually subordinate to the claim above it. */
  .hb-prov-img {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .62);
  }

  .badge2.offmarket {
    background: rgba(255, 77, 90, .18);
    border: 1px solid rgba(255, 77, 90, .55);
    color: #ffd7da;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
  }
  /* Two lines, not one clipped/overflowing one — "Buying/Rental Opportunity
     Off-Market Property" is too long for a single-line pill at any width
     that still fits beside the icon row. */
  .badge2.offmarket-2l {
    display: inline-block;
    line-height: 1.35;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .location2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
  }

  .features2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }

  .feature2 {
    background: rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
  }

  .feature2 strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 2px;
  }

  /* Footer */
  .card-footer2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .price2-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .price2 {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
  }

  .price2 .price2-period {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #8A9FB8 !important;
    letter-spacing: normal !important;
  }

  /* RentCast valuations, not asking prices: the label above the number says
     what kind of figure this is, the line below says where it came from. */
  .price2-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    color: rgba(235, 216, 176, 0.75);
  }

  .hb-price-disclaimer {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, .55);
    max-width: 260px;
  }

  /* PRICE MOVEMENT. Sits between the figure it qualifies and the provenance
     line that qualifies both, and is absent entirely on a listing that has
     never been re-priced -- see hb_price_change() in inc/property_views.php.

     DOWN IS GREEN AND UP IS GOLD, read from the buyer's side of the table:
     this feed is browsed by people looking to buy, and a cut is the good news.
     Colour is never the only carrier -- the arrow and the words "reduced" /
     "increased" say the same thing to anyone who cannot separate the two. */
  .hb-pricemove {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    margin-bottom: 2px;
  }

  .hb-pricemove-fig {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
  }

  .hb-pricemove-arrow {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
  }

  .hb-pricemove-pct {
    font-size: 13px;
    font-weight: 700;
    opacity: .95;
  }

  .hb-pricemove.is-down .hb-pricemove-fig { color: #22C55E !important; }
  .hb-pricemove.is-up   .hb-pricemove-fig { color: #F5A623 !important; }

  .hb-pricemove-when {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .1px;
    color: #8A9FB8;
  }

  .btn2 {
    padding: 12px 22px;
    border-radius: 14px;
    border: none;
    font-weight: 300;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #4aa3ff, var(--primary));
    box-shadow: 0 10px 25px rgba(47, 140, 255, .35);
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .btn2:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(47, 140, 255, .5);
  }

  @media (max-width: 640px) {
    .property-card2 {
      width: 100% !important;
      margin: 0 auto !important;
    }

    /* Image gets more visual weight on mobile */
    .card-image2 {
      height: 250px !important;
    }

    /* Compact body so the photo dominates */
    .card-body2 {
      padding: 10px 12px 12px !important;
    }
    .badges2 {
      margin-bottom: 6px !important;
    }
    .meta2 {
      font-size: 11px !important;
      margin-bottom: 5px !important;
    }
    .title2 {
      font-size: 16px !important;
      margin-bottom: 4px !important;
    }
    .location2 {
      font-size: 13px !important;
      margin-bottom: 10px !important;
    }
    .features2 {
      display: flex !important;
      flex-direction: row !important;
      gap: 6px !important;
      margin-bottom: 10px !important;
    }
    .feature2 {
      flex: 1 !important;
      padding: 7px 4px !important;
    }
    .card-footer2 {
      padding-top: 10px !important;
    }
    /* The footer is the tightest part of a phone-width card and the price
       itself has to keep its weight, so the badge gives up a point rather
       than pushing the View Details button onto its own line. */
    .hb-pricemove-fig {
      font-size: 13.5px !important;
    }
    .hb-pricemove-pct {
      font-size: 12px !important;
    }
    .hb-pricemove-when {
      font-size: 10.5px !important;
    }

    #sortresult {
      padding: 20px 0px 20px 0px !important;
    }

    .tf-grid-layout {
      gap: 15px;
      grid-template-columns: 1fr !important;
    }
  }

  /* Viewport-entry peek — image scales up 4% the first time it scrolls into view */
  .card-image2 img {
    transform: scale(1);
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .card-image2.img-peek img {
    transform: scale(1.04);
  }

  .btn-icon {
    background: rgba(6, 17, 33, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(235, 216, 176, 0.35);
    border-radius: 50%;
    height: 38px;
    width: 38px;
    min-width: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }

  .btn-icon:hover,
  .btn-icon:active {
    background: rgba(235, 216, 176, 0.18);
    border-color: rgba(235, 216, 176, 0.8);
    transform: scale(1.1);
  }

  /* Gold icon color — overrides .gradient-text blue */
  .btn-icon i {
    font-size: 14px;
    color: #ebd8b0 !important;
  }

  /* Mobile: overlay always visible, pinned to bottom-right */
  @media (max-width: 768px) {
    .image-overlay2 {
      opacity: 1 !important;
      background: linear-gradient(
        to top,
        rgba(6, 17, 33, 0.70) 0%,
        rgba(6, 17, 33, 0.20) 45%,
        transparent 70%
      ) !important;
      align-items: flex-end !important;
      justify-content: flex-end !important;
      padding: 0 10px 10px 0 !important;
    }

    .list-btn {
      gap: 8px !important;
    }

    .btn-icon {
      height: 36px !important;
      width: 36px !important;
      min-width: 36px !important;
    }

    .btn-icon i {
      font-size: 13px !important;
    }
  }

  /* ===== Full-bleed image overlay card (image as full-card background) ===== */
  .property-card2.card-overlay {
    padding: 0 !important;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    /* THE CARD NO LONGER CLIPS ITS OWN CHILDREN.
       The four action icons sit 10px from the top of the card and their tooltip
       is drawn above them, which put it 14 of its 25 pixels outside the card —
       where .property-card2's overflow:hidden sliced it in half, leaving the
       grey stub you see on hover and none of the word.
       The clip is not what makes the card look right: the rounded corners come
       from border-radius, which already clips the background, and the photograph
       is clipped by .card-image2's own border-radius + overflow:hidden. So the
       only thing this was containing was the tooltip.
       isolation:isolate above keeps each card its own stacking context, and a
       card paints after the one before it in the grid, so a tooltip that reaches
       up into the previous card still lands on top of it. */
    overflow: visible !important;
  }

  /* Hide the dashed inner frame so the photo reads as one clean image */
  .property-card2.card-overlay::after {
    display: none !important;
  }

  /* Photo fills the entire card from top to bottom */
  .card-overlay .card-image2 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  .card-overlay .card-image2 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
  }

  /* Keep the photo clear — only a light vignette up top for the chips,
     and a solid dark+blue background over the bottom ~30% behind the text */
  .card-overlay .card-overlay-gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 20px;
    pointer-events: none;
    background:
      /* subtle dark navy glow rising from the bottom */
      linear-gradient(
        to bottom,
        rgba(18, 42, 78, 0.00) 55%,
        rgba(18, 42, 78, 0.20) 80%,
        rgba(22, 50, 92, 0.36) 100%
      ),
      /* dark readability fade (top vignette + bottom panel),
         with a slight uniform tint across the whole photo */
      linear-gradient(
        to bottom,
        rgba(6, 17, 33, 0.46) 0%,
        rgba(6, 17, 33, 0.26) 12%,
        rgba(6, 17, 33, 0.24) 28%,
        rgba(6, 17, 33, 0.24) 60%,
        rgba(6, 17, 33, 0.64) 72%,
        rgba(6, 17, 33, 0.97) 100%
      );
  }

  /* Content layer floats above the photo + gradient */
  .card-overlay .card-overlay-content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px;
  }

  /* Top chips over the upper part of the image */
  .card-overlay .overlay-top .badges2 {
    width: 100%;
    margin-bottom: 0;
    align-items: flex-start;
  }
  .card-overlay .badges2-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .card-overlay .badges2-right {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }

  /* Like / view / compare / favourite icons float over the photo, centered above the info */
  .card-overlay .overlay-actions {
    margin-top: auto;
    display: flex;
    justify-content: center;
    padding: 6px 0 14px;
  }
  .card-overlay .overlay-actions .list-btn {
    display: flex;
    gap: 10px;
  }

  /* No background box — layered shadows give a soft dark halo so text stays
     readable on any photo without a visible border/panel */
  .card-overlay .overlay-bottom .meta2 {
    color: #e2ebf2;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.95),
      0 2px 8px rgba(0, 0, 0, 0.70),
      0 0 14px rgba(0, 0, 0, 0.55);
  }
  .card-overlay .overlay-bottom .title2 {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.95),
      0 2px 10px rgba(0, 0, 0, 0.80),
      0 0 18px rgba(0, 0, 0, 0.60);
  }
  .card-overlay .overlay-bottom .location2 {
    color: #dbe6ee;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.95),
      0 2px 8px rgba(0, 0, 0, 0.70),
      0 0 14px rgba(0, 0, 0, 0.55);
  }

  /* Feature boxes: dark glass so numbers stay readable on bright or dark photos */
  .card-overlay .features2 .feature2 {
    background: rgba(6, 17, 33, 0.55);
    border: 1px solid rgba(235, 216, 176, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .card-overlay .card-footer2 {
    border-top: 1px solid rgba(235, 216, 176, 0.20);
  }
  .card-overlay .price2 {
    color: #ffffff;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.95),
      0 2px 10px rgba(0, 0, 0, 0.80),
      0 0 18px rgba(0, 0, 0, 0.60);
  }
  .card-overlay .price2-label,
  .card-overlay .hb-price-disclaimer {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  }
  /* Over a photograph the badge needs the same lift the price gets, or a pale
     green figure lands on a pale roof and disappears. */
  .card-overlay .hb-pricemove-fig,
  .card-overlay .hb-pricemove-when {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.95),
      0 2px 8px rgba(0, 0, 0, 0.70);
  }

  /* WAS: "keep the photo dominant and full-bleed on mobile too" — it forced the
     card back to a 540px photo with the text over it, which is the layout the
     redesign below replaces. Left in place it would have fought that block on
     every phone and won or lost purely on source order, which is not a thing to
     leave to chance. The redesign carries its own narrow-screen rules. */

  /* ═══════════════════════════════════════════════════════════════════════
     REDESIGN — bigger photo, information underneath.

     Everything below overrides the full-bleed rules above rather than replacing
     them, so the two can be compared and the old look restored by deleting this
     block. Nothing here touches the eight view tiles (.hbv): those keep their
     own icons and behaviour exactly as they were.
     ═══════════════════════════════════════════════════════════════════════ */

  .property-card2.card-overlay {
    /* Was 520px to hold a full-bleed photo behind a column of text. The card is
       now sized by what is in it. */
    min-height: 0;
  }

  /* THE PHOTOGRAPH — a band across the top, not the whole card. Still absolute
     so the badges and the action icons can be pinned onto it without moving any
     markup into the image container. */
  .card-overlay .card-image2 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 252px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* Only over the photo now, and much lighter: no copy sits on it any more, so
     the gradient is there to keep the badges legible and nothing else. */
  .card-overlay .card-overlay-gradient {
    top: 0;
    height: 252px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(to bottom,
        rgba(4, 11, 22, 0.62) 0%,
        rgba(4, 11, 22, 0.10) 34%,
        rgba(4, 11, 22, 0.00) 55%,
        rgba(4, 11, 22, 0.55) 100%) !important;
  }

  /* THE TEXT COLUMN CLEARS THE PHOTO WITH PADDING, NOT MARGIN.
     .card-overlay-content carries position:relative for its z-index, which makes
     it the containing block for every absolutely-positioned thing inside it —
     the badges, the action icons, the view count. Pushing it down with a margin
     therefore pushed THEM down too: they anchored to the top of the text column
     and landed on the tile strip instead of on the photograph.
     Padding keeps the box starting at the card's top edge, so top:12px is
     twelve pixels from the top of the photo, which is where it reads. */
  .card-overlay .card-overlay-content {
    padding: 252px 15px 15px !important;
    margin-top: 0;
  }

  /* ── pinned onto the photograph ─────────────────────────────────────── */

  .card-overlay .overlay-top {
    position: absolute;
    top: 12px;
    left: 13px;
    right: 13px;
    z-index: 6;
  }

  /* The view count leaves the top row and sits where a photo counter would, so
     the top-right corner belongs to the actions alone. */
  .card-overlay .overlay-top .badges2 {
    align-items: flex-start;
  }

  /* ...and the badges have to be TOLD that, because .overlay-actions is pinned
     over them rather than laid out beside them: it is a separate absolutely
     positioned sibling, so nothing about the badge row's own layout knows it
     is there.

     Left uncapped, .badges2-left takes the full inset width and the long
     provenance pill ("Buying Opportunity / Off-Market Property") runs straight
     underneath the four action icons. It only shows at narrow card widths —
     the grid is three columns, so a 1000px window gives a 311px card of which
     the icons take 170px — which is why it survives on a wide desktop and
     appears the moment the window is smaller or the badge text is longer.

     170px of icons (4 x 38px + 3 x 6px gaps) plus the 13px inset and a little
     air. Badges wrap inside what is left rather than sliding under. */
  .card-overlay .overlay-top .badges2-left {
    max-width: calc(100% - 186px);
  }
  .card-overlay .overlay-top .badges2-right {
    position: absolute;
    top: 196px;          /* 252 photo − 12 inset − chip height */
    left: 0;
  }

  .card-overlay .overlay-actions {
    position: absolute;
    top: 10px;
    right: 13px;
    left: auto;
    z-index: 6;
    margin: 0;
  }
  .card-overlay .overlay-actions .list-btn {
    gap: 6px !important;
  }
  /* Their tooltips open DOWNWARDS. The icons sit at the very top of the
     photo, and the site's .hover-tooltip opens upwards, which put "Compare"
     and the rest over the origin band above the photo. */
  .card-overlay .overlay-actions .hover-tooltip .tooltip {
    top: calc(100% + 8px);
    bottom: auto;
  }
  .card-overlay .overlay-actions .hover-tooltip .tooltip::before {
    top: -4px;
  }

  /* ── the column underneath, in the order the design asks for ────────── */

  .card-overlay .overlay-bottom {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* DOM order is: trace, publisher, title, location, features, tiles, footer —
     identical in all four renderers. The design wants the tiles first and the
     two provenance lines last, under the price. */
  .card-overlay .overlay-bottom > .hbv          { order: 1; }
  .card-overlay .overlay-bottom > .title2       { order: 2; }
  .card-overlay .overlay-bottom > .location2    { order: 3; }
  .card-overlay .overlay-bottom > .features2    { order: 4; }
  .card-overlay .overlay-bottom > .card-footer2 { order: 5; }
  /* Publisher above trace: nth-child counts the raw DOM, where trace is first. */
  .card-overlay .overlay-bottom > .meta2:nth-child(2) { order: 6; }
  .card-overlay .overlay-bottom > .meta2:nth-child(1) { order: 7; }

  .card-overlay .overlay-bottom > .hbv { margin: 12px 0 12px; }

  .card-overlay .overlay-bottom .title2 {
    font-size: 17px !important;
    line-height: 1.3 !important;
    margin: 0 0 5px !important;
    text-shadow: none !important;
  }

  .card-overlay .overlay-bottom .location2 {
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.62) !important;
    margin: 0 0 11px !important;
    text-shadow: none !important;
  }

  /* The stat row reads as figures on a card now, not chips over a photograph. */
  .card-overlay .overlay-bottom .features2 {
    /* Flex, not a fixed three-column grid: the row now carries two, three or
       four stats depending on what the listing actually knows, and every one
       of them has to come out the same width. */
    display: flex !important;
    gap: 7px;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .card-overlay .overlay-bottom .feature2 {
    flex: 1 1 0;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 8px 4px !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(235, 216, 176, 0.14);
    font-size: 10.5px !important;
    color: rgba(255, 255, 255, 0.58) !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
  }
  .card-overlay .overlay-bottom .feature2 strong {
    display: block;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 0;
  }

  .card-overlay .overlay-bottom .card-footer2 {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(235, 216, 176, 0.14) !important;
  }
  .card-overlay .overlay-bottom .price2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    text-shadow: none !important;
  }
  /* The redesigned card puts its text on the card's own ground, so the lift
     above is not merely unnecessary here, it muddies the figure. */
  .card-overlay .overlay-bottom .hb-pricemove-fig,
  .card-overlay .overlay-bottom .hb-pricemove-when {
    text-shadow: none !important;
  }

  /* The two provenance lines: quiet, and last. */
  .card-overlay .overlay-bottom .meta2 {
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.42) !important;
    margin: 0 !important;
    text-shadow: none !important;
  }
  .card-overlay .overlay-bottom > .meta2:nth-child(2) { margin-top: 12px !important; }

  /* The tile strip is on the card's own ground now, not floating over a
     photograph, so it no longer needs a plate of its own. */
  .card-overlay .overlay-bottom .hbv-card {
    background: transparent;
    border: 0;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  @media (max-width: 991px) {
    .card-overlay .card-image2,
    .card-overlay .card-overlay-gradient { height: 232px !important; }
    .card-overlay .card-overlay-content  { padding-top: 232px !important; }
    .card-overlay .overlay-top .badges2-right { top: 176px; }
  }

  /* new property card design style end */

/* ---- Grid spacing (property.php 4037-4059) ---- */
  .tf-grid-layout {
    gap: 24px !important;
  }

  #sortresult {
    padding: 20px !important;
  }

  /* EQUAL COLUMNS, WHATEVER IS IN THEM.
     The grid is repeat(3, 1fr), and a 1fr track never shrinks below the
     min-content of what sits in it. The off-market card has none to speak of;
     the Housbe card has ~400px, mostly its Property Passport row (a nowrap
     line beside the Example button). So wherever a third of the row is
     narrower than that — about 1200-1290px wide, or any browser zoomed out —
     the Housbe card's column widened and squeezed the other two (401 / 355 /
     355 at 1200px), and on a phone the single column overflowed the screen.
     min-width: 0 takes the cards out of track sizing; the row inside already
     shrinks and ellipsizes, it simply never got the chance. Unscoped by width
     on purpose: the phone's 1fr column has the same problem. */
  #sortresult > * {
    min-width: 0;
  }


/* ---- Pagination (property.php 8900-9014) ---- */
      .hb-pagination-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        margin: 48px auto;
        padding: 0 16px;
      }

      /* ── Show per-page selector ─────────────────────────── */
      .hb-perpage {
        display: inline-flex;
        align-items: center;
        gap: 12px;
      }
      .hb-perpage label {
        margin: 0;
        color: var(--secondary-text, #cbd5e1);
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
      }
      .hb-perpage select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: rgba(6, 17, 33, 0.8);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ebd8b0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        color: #eaf1f7;
        border: 1px solid rgba(235, 216, 176, 0.25);
        border-radius: 30px;
        padding: 9px 38px 9px 18px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        outline: none;
        transition: all 0.3s ease;
      }
      .hb-perpage select:hover,
      .hb-perpage select:focus {
        border-color: #ebd8b0;
        box-shadow: 0 0 15px rgba(235, 216, 176, 0.3);
        background-color: rgba(14, 30, 55, 0.9);
      }
      .hb-perpage select option {
        background: #0e1e37;
        color: #eaf1f7;
      }

      /* ── Page number buttons ────────────────────────────── */
      .hb-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
      }
      .hb-page-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 42px;
        padding: 0 12px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none !important;
        color: #eaf1f7 !important;
        background: rgba(6, 17, 33, 0.7);
        border: 1px solid rgba(235, 216, 176, 0.22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .hb-page-btn:hover {
        color: #ebd8b0 !important;
        border-color: rgba(235, 216, 176, 0.6);
        background: rgba(235, 216, 176, 0.1);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 14px rgba(235, 216, 176, 0.25);
      }
      .hb-page-btn.is-active {
        color: #061121 !important;
        background: linear-gradient(135deg, #ebd8b0 0%, #dfc89d 100%);
        border-color: rgba(235, 216, 176, 0.7);
        box-shadow: 0 4px 15px rgba(235, 216, 176, 0.35);
        cursor: default;
      }
      .hb-page-btn.is-nav {
        gap: 6px;
        font-size: 13px;
      }
      .hb-page-btn.is-disabled {
        opacity: 0.35;
        pointer-events: none;
      }
      .hb-page-ellipsis {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 42px;
        color: var(--secondary-text, #cbd5e1);
        font-weight: 700;
        letter-spacing: 1px;
      }

      @media (max-width: 480px) {
        .hb-page-btn.is-nav span { display: none; }
        .hb-page-btn { min-width: 38px; height: 38px; }
      }

/* ---- Call to action: "Connect with a local real estate expert" (property.php 9079-9226) ---- */
    .premium-cta-section {
      padding: 40px 0;
      background: transparent !important;
      background-image: none !important;
    }

    .premium-cta-card {
      background:
        /* Top Line - Gold Center */
        linear-gradient(90deg, transparent 0%, rgba(235, 216, 176, 0.1) 20%, #ebd8b0 50%, rgba(235, 216, 176, 0.1) 80%, transparent 100%) top / 100% 2px no-repeat,
        /* Bottom Line - Gold Center */
        linear-gradient(90deg, transparent 0%, rgba(235, 216, 176, 0.1) 20%, #ebd8b0 50%, rgba(235, 216, 176, 0.1) 80%, transparent 100%) bottom / 100% 2px no-repeat,
        /* Main Background */
        linear-gradient(90deg, #061121 0%, #0e1e37 50%, #061121 100%) !important;

      position: relative;
      overflow: hidden;
      min-height: 160px;
      display: flex;
      align-items: center;
      padding: 0 60px;
      font-family: 'Outfit', sans-serif !important;
      border-radius: 20px !important;
      border: none;
      box-shadow:
        0 -5px 15px rgba(235, 216, 176, 0.15),
        0 5px 15px rgba(235, 216, 176, 0.15),
        0 0 10px rgba(235, 216, 176, 0.1),
        0 10px 40px rgba(0, 0, 0, 0.5) !important;
    }

    /* Glow Bloom Effect */
    .premium-cta-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
        radial-gradient(circle at 50% 0%, rgba(235, 216, 176, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(235, 216, 176, 0.25) 0%, transparent 50%) !important;
      pointer-events: none;
      z-index: 1;
    }

    /* The PB logo watermark */
    .premium-cta-card::before {
      content: 'B';
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 240px;
      font-weight: 800;
      color: rgba(235, 216, 176, 0.03);
      z-index: 1;
      line-height: 0;
      pointer-events: none;
      font-family: sans-serif;
      letter-spacing: -10px;
    }

    .premium-cta-content-wrapper {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 30px;
    }

    .premium-cta-texts {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .premium-cta-title {
      font-size: 32px;
      font-weight: 600;
      color: #FFFFFF;
      margin: 0 0 8px 0;
      line-height: 1.2;
    }

    .premium-cta-subtitle {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
    }

    .premium-cta-btn {
      background: linear-gradient(90deg, #ebd8b0 0%, #dfc89d 100%) !important;
      color: #061121 !important;
      font-size: 16px;
      font-weight: 600;
      padding: 14px 40px;
      border-radius: 50px;
      text-decoration: none;
      box-shadow:
        0 0 0 1px rgba(235, 216, 176, 0.5),
        0 0 15px rgba(235, 216, 176, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.3) !important;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
      white-space: nowrap;
      display: inline-block;
      line-height: 1.5;
    }

    .premium-cta-btn:hover {
      transform: scale(1.02);
      box-shadow:
        0 0 0 1px rgba(235, 216, 176, 0.8),
        0 0 25px rgba(235, 216, 176, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.4) !important;
      color: #061121 !important;
    }

    .premium-cta-btn:active {
      transform: scale(0.98);
    }

    @media (max-width: 768px) {
      .premium-cta-card {
        padding: 40px 20px;
        flex-direction: column;
        text-align: center;
        height: auto;
      }

      .premium-cta-card::before {
        display: none;
      }

      .premium-cta-content-wrapper {
        flex-direction: column;
        gap: 20px;
      }

      .premium-cta-title {
        font-size: 26px;
      }
    }

/* ---- Quick view: dark premium theme (property.php 9256-9993) ---- */
  #quickViewModel {
    --qv-navy:      #061121;
    --qv-gold:      #ebd8b0;
    --qv-gold-soft: #dfc89d;
    --qv-text:      #eaf1f7;
    --qv-text-2:    #cbd5e1;
    --qv-muted:     #9fb0c3;
    --qv-line:      rgba(235, 216, 176, 0.22);
  }

  /* ---- Show / hide the two containers ---- */
  @media (max-width: 768px) {
    #quickViewModel .desktop-quickview-container { display: none !important; }
    #quickViewModel .mobile-quickview-container  { display: block !important; }
  }
  @media (min-width: 769px) {
    #quickViewModel .desktop-quickview-container { display: block !important; }
    #quickViewModel .mobile-quickview-container  { display: none !important; }
  }

  /* ==========================================================
     DESKTOP VIEW
  ========================================================== */
  #quickViewModel .desktop-quickview-container {
    background: #061121 !important;
    border-radius: 22px;
    overflow: hidden;
    pointer-events: auto;
    color: var(--qv-text);
  }

  #quickViewModel .image-gallery {
    position: relative;
    height: 400px;
    background: #04101f !important;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
  }
  #quickViewModel .image-gallery::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 17, 33, 0.75) 0%, transparent 40%);
    pointer-events: none;
  }
  #quickViewModel .main-image { width: 100%; height: 100%; object-fit: cover; }

  #quickViewModel .property-status {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    background: linear-gradient(135deg, #ebd8b0 0%, #dfc89d 100%) !important;
    color: #061121 !important;
    padding: 7px 16px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 15px rgba(235, 216, 176, 0.35);
  }
  #quickViewModel .property-status2 {
    position: absolute;
    top: 20px;
    left: 130px;
    z-index: 3;
    background: rgba(6, 17, 33, 0.72) !important;
    color: var(--qv-gold) !important;
    padding: 7px 16px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid rgba(235, 216, 176, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  #quickViewModel .thumbnails {
    position: absolute;
    bottom: 18px;
    left: 18px;
    display: flex;
    gap: 10px;
    z-index: 3;
  }
  #quickViewModel .thumbnail {
    width: 58px;
    height: 58px;
    border: 2px solid rgba(235, 216, 176, 0.35) !important;
    border-radius: 10px;
    cursor: pointer;
    object-fit: cover;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  #quickViewModel .thumbnail:hover { transform: scale(1.06); }
  #quickViewModel .thumbnail.active {
    border-color: var(--qv-gold) !important;
    box-shadow: 0 0 0 2px rgba(235, 216, 176, 0.35), 0 4px 14px rgba(235, 216, 176, 0.3);
  }

  #quickViewModel .image-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    z-index: 4;
    background: rgba(6, 17, 33, 0.7) !important;
    color: var(--qv-gold) !important;
    border: 1px solid rgba(235, 216, 176, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.25s ease;
  }
  #quickViewModel .image-nav:hover {
    background: linear-gradient(135deg, #ebd8b0 0%, #dfc89d 100%) !important;
    color: #061121 !important;
    border-color: rgba(235, 216, 176, 0.9);
  }
  #quickViewModel .image-nav.prev { left: 18px; }
  #quickViewModel .image-nav.next { right: 18px; }

  #quickViewModel .property-details {
    padding: 26px 28px 30px !important;
    background: linear-gradient(180deg, #0d1b2b 0%, #061121 100%) !important;
    color: #eaf1f7 !important;
  }
  #quickViewModel .quickview-illustrative-badge {
    position: absolute; left: 18px; bottom: 18px; z-index: 5;
    display: inline-block; max-width: calc(100% - 36px);
    padding: 7px 10px; border: 1px solid rgba(235,216,176,.48);
    border-radius: 8px; background: rgba(6,17,33,.9); color: #f4e4c3;
    font-size: 11px; font-weight: 700; line-height: 1.35;
  }
  #quickViewModel .property-details .property-title,
  #quickViewModel .property-details h4,
  #quickViewModel .property-details h6,
  #quickViewModel .property-details p { color: #eaf1f7 !important; }
  #quickViewModel .property-details .property-address { color: #cbd5e1 !important; }

  #quickViewModel .price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
  }
  #quickViewModel .price {
    font-size: 28px !important;
    font-weight: 800;
    background: linear-gradient(135deg, #f7e6c4 0%, #ebd8b0 45%, #c5ad83 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #quickViewModel .action-buttons .favourite {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 9px 20px !important;
    border-radius: 30px !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    color: var(--qv-gold) !important;
    -webkit-text-fill-color: var(--qv-gold) !important;
    background: rgba(6, 17, 33, 0.6) !important;
    border: 1px solid rgba(235, 216, 176, 0.4) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.3s ease;
  }
  #quickViewModel .action-buttons .favourite i {
    color: var(--qv-gold) !important;
    -webkit-text-fill-color: var(--qv-gold) !important;
  }
  #quickViewModel .action-buttons .favourite:hover {
    background: rgba(235, 216, 176, 0.12);
    border-color: rgba(235, 216, 176, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(235, 216, 176, 0.22);
  }

  #quickViewModel .property-title {
    font-size: 23px !important;
    font-weight: 700;
    color: var(--qv-text) !important;
    margin: 0 0 8px;
  }
  #quickViewModel .property-address {
    color: var(--qv-muted) !important;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
  }
  #quickViewModel .property-address i { color: var(--qv-gold) !important; }

  #quickViewModel .property-details iframe {
    border-radius: 14px;
    border: 1px solid var(--qv-line) !important;
    filter: saturate(0.9) brightness(0.92);
    margin-top: 4px;
  }

  #quickViewModel .property-features {
    display: flex !important;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 10px;
    border-top: 1px solid var(--qv-line) !important;
    border-bottom: 1px solid var(--qv-line) !important;
    padding: 18px 0;
    margin: 22px 0;
  }
  #quickViewModel .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: auto !important;
  }
  #quickViewModel .feature-value {
    font-size: 19px !important;
    font-weight: 700;
    color: var(--qv-gold) !important;
  }
  #quickViewModel .feature-label {
    font-size: 13px !important;
    color: var(--qv-muted) !important;
  }

  #quickViewModel .box-amenities .wg-title,
  #quickViewModel .property-details h4,
  #quickViewModel .property-details h6 {
    color: var(--qv-text) !important;
    font-weight: 700;
  }
  #quickViewModel .box-amenities ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  #quickViewModel .box-amenities .feature-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 13px;
    color: var(--qv-text-2);
    background: rgba(6, 17, 33, 0.55);
    border: 1px solid var(--qv-line);
  }
  #quickViewModel .box-amenities .feature-item::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    color: var(--qv-gold);
  }

  #quickViewModel .property-description {
    color: var(--qv-text-2) !important;
    line-height: 1.7;
    margin-bottom: 22px;
    font-size: 14.5px;
  }

  #quickViewModel .agent-section {
    display: flex !important;
    align-items: center;
    gap: 15px;
    background: linear-gradient(160deg, rgba(14, 30, 55, 0.85) 0%, rgba(6, 17, 33, 0.8) 100%) !important;
    border: 1px solid var(--qv-line) !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  #quickViewModel .agent-section .agent-image {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(235, 216, 176, 0.55);
    box-shadow: 0 0 14px rgba(235, 216, 176, 0.28);
    margin: 0 !important;
  }
  #quickViewModel .agent-info { flex: 1; }
  #quickViewModel .agent-name a,
  #quickViewModel .agent-name {
    color: var(--qv-text) !important;
    font-weight: 700;
  }
  #quickViewModel .agent-name a:hover { color: var(--qv-gold) !important; }
  #quickViewModel .agent-contact { color: var(--qv-muted) !important; font-size: 13.5px; }

  /* Gold connection buttons — Agent (Add), Lender & Owner (Send).
     Overrides the global blue .btn.gradient. Shared by desktop + mobile. */
  #quickViewModel .contactagent,
  #quickViewModel .contactlender,
  #quickViewModel .contactowner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    background: linear-gradient(135deg, #ebd8b0 0%, #dfc89d 100%) !important;
    color: #061121 !important;
    border: 1px solid rgba(235, 216, 176, 0.5) !important;
    border-radius: 30px !important;
    padding: 11px 22px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.4px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 18px rgba(235, 216, 176, 0.28) !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0;
  }
  #quickViewModel .contactagent:hover,
  #quickViewModel .contactlender:hover,
  #quickViewModel .contactowner:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(235, 216, 176, 0.42) !important;
    background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
    color: #061121 !important;
  }
  #quickViewModel .contactagent svg,
  #quickViewModel .contactlender svg,
  #quickViewModel .contactowner svg { width: 17px; height: 17px; }
  #quickViewModel .contactagent svg path,
  #quickViewModel .contactagent svg circle,
  #quickViewModel .contactlender svg path,
  #quickViewModel .contactlender svg circle,
  #quickViewModel .contactowner svg path,
  #quickViewModel .contactowner svg circle { stroke: #061121 !important; }

  /* ==========================================================
     MOBILE VIEW
  ========================================================== */
  #quickViewModel .mobile-quickview-container {
    font-family: 'Outfit', 'Inter', sans-serif;
    background:
        radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.10) 0%, transparent 55%),
        linear-gradient(160deg, rgba(14, 30, 55, 0.96) 0%, rgba(6, 17, 33, 0.99) 100%) !important;
    color: var(--qv-text) !important;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
  }

  #quickViewModel .mqv-close-overlay {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 100;
    background: rgba(6, 17, 33, 0.7) !important;
    color: var(--qv-gold) !important;
    border: 1px solid rgba(235, 216, 176, 0.45) !important;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.25s ease;
  }
  #quickViewModel .mqv-close-overlay:hover {
    background: linear-gradient(135deg, #ebd8b0 0%, #dfc89d 100%) !important;
    color: #061121 !important;
  }

  #quickViewModel .mqv-image-section { position: relative; width: 100%; height: 250px; }
  #quickViewModel .mqv-image-wrapper { width: 100%; height: 100%; position: relative; }
  #quickViewModel .mqv-main-img { width: 100%; height: 100%; object-fit: cover; }
  #quickViewModel .mqv-image-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 17, 33, 0.85) 0%, transparent 45%);
    pointer-events: none;
  }

  #quickViewModel .mqv-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 8px;
    z-index: 10;
  }
  #quickViewModel .mqv-badge {
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
  }
  #quickViewModel .mqv-badge.featured {
    background: linear-gradient(135deg, #ebd8b0 0%, #dfc89d 100%) !important;
    color: #061121 !important;
    box-shadow: 0 4px 12px rgba(235, 216, 176, 0.35);
  }
  #quickViewModel .mqv-badge.for-sale {
    background: rgba(6, 17, 33, 0.7) !important;
    color: var(--qv-gold) !important;
    border: 1px solid rgba(235, 216, 176, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  #quickViewModel .mqv-image-counter {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 6;
    background: rgba(6, 17, 33, 0.6) !important;
    border: 1px solid rgba(235, 216, 176, 0.28);
    color: var(--qv-gold) !important;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
  }
  #quickViewModel .mqv-image-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 6;
  }
  #quickViewModel .mqv-image-dots .dot {
    width: 6px;
    height: 6px;
    background: rgba(235, 216, 176, 0.35);
    border-radius: 50%;
    transition: all 0.25s ease;
  }
  #quickViewModel .mqv-image-dots .dot.active {
    background: var(--qv-gold);
    width: 18px;
    border-radius: 4px;
  }
  #quickViewModel .mqv-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--qv-gold);
    font-size: 16px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(6, 17, 33, 0.55);
    border: 1px solid rgba(235, 216, 176, 0.35);
    cursor: pointer;
    z-index: 6;
  }
  #quickViewModel .mqv-prev { left: 12px; }
  #quickViewModel .mqv-next { right: 12px; }

  #quickViewModel .mqv-body { padding: 20px; }
  #quickViewModel .mqv-price {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 5px;
    background: linear-gradient(135deg, #f7e6c4 0%, #ebd8b0 45%, #c5ad83 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #quickViewModel .mqv-title {
    font-size: 15.5px;
    color: var(--qv-text);
    margin: 0 0 5px;
    font-weight: 600;
  }
  #quickViewModel .mqv-address {
    font-size: 13.5px;
    color: var(--qv-muted);
    margin: 0 0 20px;
  }

  #quickViewModel .mqv-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 26px;
  }
  #quickViewModel .mqv-stat-box {
    background: rgba(6, 17, 33, 0.55);
    border: 1px solid var(--qv-line);
    border-radius: 12px;
    padding: 12px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #quickViewModel .mqv-stat-box .val {
    font-size: 16px;
    font-weight: 700;
    color: var(--qv-gold);
    margin-bottom: 2px;
  }
  #quickViewModel .mqv-stat-box .lbl {
    font-size: 10.5px;
    color: var(--qv-muted);
    white-space: nowrap;
  }

  #quickViewModel .mqv-section-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--qv-text);
    position: relative;
    padding-left: 12px;
  }
  #quickViewModel .mqv-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 15px;
    border-radius: 3px;
    background: linear-gradient(180deg, #ebd8b0, #c5ad83);
  }

  #quickViewModel .mqv-amenities-map { display: flex; gap: 15px; margin-bottom: 12px; }
  #quickViewModel .mqv-amenities-list { flex: 1; display: flex; flex-direction: column; gap: 9px; }
  #quickViewModel .mqv-amenity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--qv-text-2);
  }
  #quickViewModel .mqv-amenity-item i { color: var(--qv-gold); font-size: 12px; }
  #quickViewModel .mqv-see-all {
    color: var(--qv-gold);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 6px;
    display: inline-block;
  }
  #quickViewModel .mqv-see-all:hover { text-decoration: underline; }
  #quickViewModel .mqv-map-thumb {
    width: 120px;
    height: 104px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--qv-line);
    background: #04101f;
    flex-shrink: 0;
  }

  #quickViewModel .mqv-agent-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 18px;
    background: rgba(6, 17, 33, 0.5);
    border: 1px solid var(--qv-line);
    border-radius: 14px;
  }
  #quickViewModel .mqv-avatar-wrapper { position: relative; width: 46px; height: 46px; }
  #quickViewModel .mqv-agent-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(235, 216, 176, 0.5);
  }
  #quickViewModel .mqv-online-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 13px;
    height: 13px;
    background-color: var(--qv-gold);
    border: 2px solid var(--qv-navy);
    border-radius: 50%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23061121" width="8px" height="8px"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px;
  }
  #quickViewModel .mqv-agent-details { flex: 1; display: flex; flex-direction: column; }
  #quickViewModel .mqv-agent-details .name { font-size: 15px; font-weight: 700; color: var(--qv-text); }
  #quickViewModel .mqv-agent-details .role { font-size: 12.5px; color: var(--qv-gold); }
  #quickViewModel .mqv-agent-details .reply-time { font-size: 11px; color: var(--qv-muted); margin-top: 2px; }
  #quickViewModel .mqv-msg-btn {
    background: rgba(6, 17, 33, 0.6);
    color: var(--qv-gold);
    border: 1px solid rgba(235, 216, 176, 0.4);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
  }
  #quickViewModel .mqv-msg-btn:hover {
    background: rgba(235, 216, 176, 0.12);
    border-color: rgba(235, 216, 176, 0.8);
  }

  #quickViewModel .mqv-bottom-bar-container {
    background: linear-gradient(160deg, rgba(14, 30, 55, 0.9) 0%, rgba(6, 17, 33, 0.85) 100%);
    border: 1px solid var(--qv-line);
    padding: 14px;
    border-radius: 14px;
    margin-top: 10px;
  }
  #quickViewModel .mqv-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  #quickViewModel .mqv-view-full {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--qv-muted);
    font-size: 12.5px;
    white-space: nowrap;
    flex: 1;
  }
  #quickViewModel .mqv-view-full span { text-align: right; }
  #quickViewModel .mqv-view-full .favourite {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(6, 17, 33, 0.6);
    border: 1px solid rgba(235, 216, 176, 0.4);
    transition: all 0.25s ease;
  }
  #quickViewModel .mqv-view-full .favourite i { font-size: 15px; color: var(--qv-gold); }
  #quickViewModel .mqv-view-full .favourite:hover {
    background: rgba(235, 216, 176, 0.14);
    border-color: rgba(235, 216, 176, 0.85);
  }

  #quickViewModel .alert-success {
    background: rgba(20, 45, 30, 0.75) !important;
    border: 1px solid rgba(120, 200, 140, 0.4) !important;
    color: #cdebd6 !important;
    border-radius: 12px !important;
  }
  #quickViewModel .alert-success a { color: var(--qv-gold) !important; }

  /* ---- "Property added successfully" toast (#alert-box) ----
     Bootstrap .alert-success rendered white-on-mint (invisible).
     Re-themed to a readable dark navy + gold success toast. */
  #alert-box.alert.alert-success,
  #alert-box {
    display: none;
    margin: 16px auto !important;
    max-width: 620px !important;
    width: calc(100% - 32px) !important;
    padding: 14px 22px !important;
    background: linear-gradient(135deg, rgba(14, 30, 55, 0.97) 0%, rgba(6, 17, 33, 0.98) 100%) !important;
    color: #eaf1f7 !important;
    border: 1px solid rgba(235, 216, 176, 0.4) !important;
    border-left: 4px solid #ebd8b0 !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.2px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(235, 216, 176, 0.18) !important;
    text-shadow: none !important;
  }
  #alert-box.alert.alert-success::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ebd8b0;
    margin-right: 9px;
  }
  #alert-box span { color: #eaf1f7 !important; }
  #alert-box a,
  #alert-box span a {
    color: #ebd8b0 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 4px;
  }
  #alert-box a:hover,
  #alert-box span a:hover { text-decoration: underline !important; color: #f7e6c4 !important; }

/* ---- Mobile title spacing (property.php 4067-4099, filter rules left out) ---- */
  @media (max-width: 768px) {
    .flat-title {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }
    .flat-title .col-lg-12 {
      margin-top: 10px !important; /* Overrides inline 30px */
      margin-bottom: 0 !important;
    }
    .main-content {
      padding-top: 5px !important;
    }
    .section-property-layout {
      padding-top: 10px !important;
    }
  }

/* ---- Desktop layout (property.php 2377-2600, filter rules left out) ---- */
@media (min-width: 769px) {
  /* Breadcrumb -> content in one short step (the theme leaves 50px) */
  .flat-title {
    margin-bottom: 20px !important;
  }
  .section-property-layout {
    padding-top: 22px !important;
  }
  /* Cards share the bar's left and right edges instead of sitting 20px
     inside them. Scoped past the unconditional #sortresult padding rule. */
  .tab-content #sortresult {
    padding: 4px 0 20px !important;
  }
}