@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --hap-ha-navy:#071a31;
  --hap-ha-navy-2:#0b2747;
  --hap-ha-red:#e92d2d;
  --hap-ha-soft:#f5f7fb;
  --hap-ha-white:#fff;
  --hap-ha-muted:#6d7888;
  --hap-ha-shadow:0 24px 80px rgba(2,13,28,.22);
  --hap-ha-container:1240px;
}

.hap-ha-container{
  width:min(var(--hap-ha-container), calc(100% - 48px));
  margin:0 auto;
}

/* Hero widget */
.hap-ha-hero{
  position:relative;
  min-height:620px;
  color:#fff;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--hap-ha-navy);
}
.hap-ha-hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,#193757,#071a31);
  background-size:cover;
  background-position:center right;
}
.hap-ha-hero-bg:after{
  content:"";
  position:absolute;
  right:6%;
  bottom:0;
  width:min(650px, 52vw);
  height:78%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.16) 10% 11%, transparent 11% 20%, rgba(255,255,255,.14) 20% 21%, transparent 21% 30%, rgba(255,255,255,.12) 30% 31%, transparent 31%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  clip-path:polygon(0 38%, 30% 22%, 30% 8%, 60% 0, 60% 16%, 100% 28%, 100% 100%, 0 100%);
  opacity:.65;
}
.hap-ha-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(3,15,30,.96) 0%, rgba(3,15,30,.84) 38%, rgba(3,15,30,.35) 74%, rgba(3,15,30,.12) 100%),
    linear-gradient(180deg, rgba(3,15,30,.2), rgba(3,15,30,.68));
}
.hap-ha-hero-content{position:relative;z-index:2;padding:92px 0 120px}
.hap-ha-hero-copy{max-width:570px}
.hap-ha-hero h1{
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(44px,5vw,76px);
  line-height:1.02;
  margin:0 0 20px;
  color:#fff;
}
.hap-ha-hero h1 strong{
  display:block;
  color:var(--hap-ha-red);
  font-weight:700;
}
.hap-ha-line{
  display:block;
  width:58px;
  height:3px;
  background:var(--hap-ha-red);
  margin:0 0 28px;
}
.hap-ha-hero p{
  max-width:560px;
  color:rgba(255,255,255,.9);
  font-size:18px;
  margin:0 0 34px;
}
.hap-ha-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hap-ha-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 28px;
  border:1px solid var(--hap-ha-red);
  background:var(--hap-ha-red);
  color:#fff!important;
  text-decoration:none!important;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.hap-ha-btn:hover{background:#ff3838;border-color:#ff3838;color:#fff!important}
.hap-ha-btn-outline{background:transparent;border-color:rgba(255,255,255,.65)}
.hap-ha-btn-outline:hover{background:#fff;border-color:#fff;color:var(--hap-ha-navy)!important}
.hap-ha-search-overlap{
  position:relative;
  z-index:6;
  margin-top:-48px;
}

/* Zoekbalk widget */
.hap-ha-search-wrap{
  background:rgba(7,26,49,.98);
  box-shadow:var(--hap-ha-shadow);
  padding:18px;
}
.hap-ha-search{
  display:grid;
  grid-template-columns:1.05fr 1.25fr 1.05fr 1fr;
  gap:14px;
}
.hap-ha-search label{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:64px;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  padding:9px 14px;
}
.hap-ha-search span{
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.2;
}
.hap-ha-search select,
.hap-ha-search input{
  width:100%;
  border:0;
  background:transparent;
  color:#fff;
  outline:0;
  padding:0;
  font-size:15px;
  font-weight:700;
}
.hap-ha-search option{color:var(--hap-ha-navy)}
.hap-ha-search input::placeholder{color:#fff;opacity:1}
.hap-ha-search button{
  min-height:64px;
  border:1px solid var(--hap-ha-red);
  background:var(--hap-ha-red);
  color:#fff;
  text-transform:uppercase;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
}
.hap-ha-search button:hover{background:#ff3838;border-color:#ff3838}
.hap-ha-search-wrap.is-compact .hap-ha-search{
  grid-template-columns:1fr 1fr auto;
}
.hap-ha-search-wrap.is-compact .hap-ha-search label:nth-child(3){display:none}

/* Override bestaande shortcode output naar laatste ontwerp */
.hap-offer-wrap,
.hap-detail,
.hap-schedule-box{
  font-family:Inter, Arial, sans-serif;
}
.hap-filter{
  background:rgba(7,26,49,.98)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:var(--hap-ha-shadow)!important;
  padding:18px!important;
  gap:14px!important;
  margin:0 0 34px!important;
  grid-template-columns:1fr 1fr 1fr 1fr!important;
}
.hap-filter label{
  color:#fff!important;
  font-size:12px!important;
  font-weight:500!important;
  margin:0 0 4px!important;
}
.hap-filter > div{
  min-height:64px;
  border:1px solid rgba(255,255,255,.14);
  padding:9px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hap-filter input,
.hap-filter select{
  color:#fff!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  font-size:15px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.hap-filter option{color:var(--hap-ha-navy)!important}
.hap-filter input::placeholder{color:rgba(255,255,255,.85)!important}
.hap-filter button,
.hap-btn{
  border-radius:0!important;
  background:var(--hap-ha-red)!important;
  color:#fff!important;
  box-shadow:none!important;
  border:1px solid var(--hap-ha-red)!important;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:13px;
  font-weight:800;
}
.hap-filter button{
  min-height:64px!important;
}
.hap-btn:hover,
.hap-filter button:hover{
  background:#ff3838!important;
  border-color:#ff3838!important;
  color:#fff!important;
}

.hap-property-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:24px!important;
}
.hap-card{
  border:0!important;
  border-radius:0!important;
  box-shadow:0 16px 40px rgba(7,26,49,.12)!important;
  background:#071a31!important;
  color:#fff!important;
  overflow:hidden!important;
}
.hap-card:hover,
.hap-card.is-hover{
  transform:translateY(-3px)!important;
  box-shadow:0 24px 50px rgba(7,26,49,.18)!important;
}
.hap-card-image{
  height:230px!important;
  border-radius:0!important;
  background-color:#dbe2ee!important;
}
.hap-card-image:after{
  background:linear-gradient(180deg, transparent 36%, rgba(3,14,29,.93) 100%)!important;
}
.hap-card-body{
  padding:20px!important;
}
.hap-card h3,
.hap-card h3 a,
.hap-card-bottom strong{
  color:#fff!important;
}
.hap-location,
.hap-card-topline,
.hap-card small{
  color:rgba(255,255,255,.76)!important;
}
.hap-card-facts span{
  border-radius:0!important;
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
}
.hap-status{
  border-radius:0!important;
  padding:6px 9px!important;
  background:#fff!important;
  color:var(--hap-ha-navy)!important;
}
.hap-status-available{background:var(--hap-ha-red)!important;color:#fff!important}
.hap-status-option{background:#fff!important;color:var(--hap-ha-navy)!important}
.hap-status-rented{background:#d7dbe2!important;color:#071a31!important}
.hap-card-bottom{
  align-items:center!important;
}

/* Detailpagina */
.hap-detail{
  max-width:1240px;
  margin:0 auto;
}
.hap-detail h2,
.hap-detail h3{
  color:var(--hap-ha-navy)!important;
  font-family:"Playfair Display", Georgia, serif;
}
.hap-gallery-item{
  border-radius:0!important;
}
.hap-facts,
.hap-application,
.hap-map-wrap,
.hap-schedule-box{
  border-radius:0!important;
  border:1px solid #e6ebf1!important;
  box-shadow:0 16px 40px rgba(7,26,49,.08)!important;
}
.hap-form input,
.hap-form textarea,
.hap-form select,
.hap-schedule-box select{
  border-radius:0!important;
}
.hap-form input:focus,
.hap-form textarea:focus,
.hap-form select:focus,
.hap-schedule-box select:focus{
  border-color:var(--hap-ha-red)!important;
  box-shadow:0 0 0 3px rgba(233,45,45,.12)!important;
}

/* Elementor editor clean */
.elementor-editor-active .hap-offer-wrap,
.elementor-editor-active .hap-ha-search-wrap{
  min-height:60px;
}

@media (max-width:1200px){
  .hap-property-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:980px){
  .hap-ha-search,
  .hap-filter{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .hap-ha-search button,
  .hap-filter button{
    grid-column:span 2;
  }
  .hap-property-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:700px){
  .hap-ha-container{
    width:min(100% - 32px, var(--hap-ha-container));
  }
  .hap-ha-hero{
    min-height:auto;
  }
  .hap-ha-hero-content{
    padding:58px 0 92px;
  }
  .hap-ha-hero h1{
    font-size:40px;
  }
  .hap-ha-hero p{
    font-size:16px;
  }
  .hap-ha-hero-actions{
    display:grid;
  }
  .hap-ha-btn{
    width:100%;
  }
  .hap-ha-search-overlap{
    margin-top:-36px;
  }
  .hap-ha-search-wrap{
    padding:12px;
  }
  .hap-ha-search,
  .hap-ha-search-wrap.is-compact .hap-ha-search,
  .hap-filter{
    grid-template-columns:1fr!important;
  }
  .hap-ha-search button,
  .hap-filter button{
    grid-column:auto;
    width:100%;
  }
  .hap-filter > div{
    min-height:58px;
  }
  .hap-property-grid{
    grid-template-columns:1fr!important;
  }
  .hap-card-image{
    height:220px!important;
  }
}



/* Extra complete pagina-opmaak 1.2 */
.hap-ha-page-hero{
  background:linear-gradient(135deg, #071a31, #0b2747);
  color:#fff;
  padding:84px 0 54px;
}
.hap-ha-page-hero h1{
  margin:0;
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(32px, 4vw, 56px);
  line-height:1.1;
}
.hap-ha-page-hero p{
  max-width:760px;
  color:rgba(255,255,255,.84);
  font-size:18px;
  margin:14px 0 0;
}
.hap-ha-eyebrow{
  display:inline-flex;
  color:var(--hap-ha-red);
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.hap-ha-page-section{
  padding:68px 0 86px;
  background:#fff;
}
.hap-ha-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:28px;
}
.hap-ha-section-head h2,
.hap-ha-split h2{
  margin:0;
  color:var(--hap-ha-navy);
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(30px, 3vw, 46px);
  line-height:1.1;
}
.hap-ha-section-head h2:after{
  content:"";
  display:block;
  width:54px;
  height:3px;
  background:var(--hap-ha-red);
  margin-top:14px;
}
.hap-ha-section-head a{
  color:var(--hap-ha-red);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
}
.hap-ha-split{
  padding:84px 0;
  background:linear-gradient(135deg, #071a31, #0b2747);
  color:#fff;
}
.hap-ha-split-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hap-ha-split h2{
  color:#fff;
}
.hap-ha-split p{
  font-size:18px;
  color:rgba(255,255,255,.78);
}
.hap-ha-split-box{
  border:1px solid rgba(255,255,255,.15);
  padding:38px;
  background:rgba(255,255,255,.04);
}
.hap-ha-split-box ul{
  list-style:none;
  padding:0;
  margin:0;
}
.hap-ha-split-box li{
  padding:14px 0 14px 34px;
  border-bottom:1px solid rgba(255,255,255,.1);
  position:relative;
  font-weight:700;
}
.hap-ha-split-box li:last-child{border-bottom:0}
.hap-ha-split-box li:before{
  content:"";
  width:10px;
  height:10px;
  background:var(--hap-ha-red);
  position:absolute;
  left:0;
  top:22px;
}
.hap-offer-wrap,
.hap-detail,
.hap-schedule-box,
.hap-ha-page-hero,
.hap-ha-page-section,
.hap-ha-split{
  font-family:Inter, Arial, sans-serif;
}
.hap-offer-wrap h1,
.hap-offer-wrap h2,
.hap-offer-wrap h3,
.hap-detail h1,
.hap-detail h2,
.hap-detail h3{
  font-family:"Playfair Display", Georgia, serif;
}

@media (max-width:700px){
  .hap-ha-page-hero{
    padding:56px 0 38px;
  }
  .hap-ha-page-hero p{
    font-size:16px;
  }
  .hap-ha-page-section{
    padding:50px 0 62px;
  }
  .hap-ha-section-head{
    display:block;
  }
  .hap-ha-split{
    padding:56px 0;
  }
  .hap-ha-split-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .hap-ha-split-box{
    padding:24px;
  }
}