/* ==========================================================================
   Huispagina — Recranet accommodatie-detail (<rn-accommodation-detail>)
   volgens de styleguide "Vakantiehuis detailpagina".

   Recranet rendert in de light DOM met .rn-*-klassen; hun utilities en
   component-styles zijn deels !important / attribuut-gescoped, dus waar we
   die overschrijven gebruiken we ook !important. Knoppen die NIET geel mogen
   krijgen :not(#hd) (id-specificiteit) om de brede gele Recranet-knopregel
   in site.css te verslaan.

   Layout: de detail-host wordt een grid. De tussenliggende wrappers (rij,
   kolom, overview) krijgen display:contents, zodat titel + score bóven de
   galerij komen en de boekingskaart een eigen sticky kolom rechts krijgt —
   zonder de Angular-DOM aan te raken.
   ========================================================================== */

rn-accommodation-detail{
  --hd-bg:#F2EADB; --hd-surface:#fff; --hd-surface-muted:#FBF8F2;
  --hd-border:#E5DECF; --hd-divider:#EDE6D8;
  --hd-ink:#1F1D1A; --hd-ink-body:#4A453E; --hd-ink-soft:#5E5850; --hd-ink-muted:#8A8276; --hd-ink-disabled:#CFC8BA;
  --hd-yellow:#F2C417; --hd-yellow-hover:#E6B70A;
  --hd-green:#2E9E44; --hd-green-dark:#1F7A35; --hd-green-tint:#E6F4E9;
  --hd-blue:#1E88E5; --hd-blue-dark:#1565C0; --hd-blue-tint:#D6E9FB;
  --hd-pink:#E59AA3; --hd-pink-tint:#FCE8EA;
  --hd-serif:'Cormorant Garamond',Georgia,serif; --hd-sans:'Quicksand',system-ui,sans-serif;
  --hd-sh-xs:0 1px 2px rgba(31,29,26,.06); --hd-sh-md:0 4px 16px rgba(0,0,0,.15); --hd-sh-lg:0 12px 40px rgba(31,29,26,.08);
  --hd-pad:36px; --hd-sticky:136px;

  display:grid!important;grid-template-columns:minmax(0,1fr);column-gap:40px;row-gap:0;
  min-width:0;max-width:100%;
  font-family:var(--hd-sans);color:var(--hd-ink);-webkit-font-smoothing:antialiased;
}

/* 1. Grid-opbouw
   ========================================================================== */
rn-accommodation-detail>.rn-row,
rn-accommodation-detail>.rn-row>.rn-col-lg-8,
rn-accommodation-detail #rn-accommodation-overview,
rn-accommodation-detail rn-accommodation-detail-overview,
rn-accommodation-detail .rn-accommodation-header-section{display:contents!important}

rn-accommodation-detail>*{grid-column:1/-1;min-width:0}
rn-accommodation-detail>rn-accommodation-action-bar{order:-3}
rn-accommodation-detail .rn-accommodation-header-section>.rn-h1,
rn-accommodation-detail .rn-accommodation-header-section>.rn-d-lg-none{order:-2;min-width:0}
rn-accommodation-detail>.rn-accommodation-gallery{order:-1}
rn-accommodation-detail>.rn-row>.rn-col-lg-4{width:auto!important;max-width:none!important;flex:none!important;padding:0!important;margin-top:16px;min-width:0}

/* Losse "Zeitraum auswählen"-balk onderaan: de boekingskaart is sticky. */
rn-accommodation-detail>.rn-row>.rn-col-lg-8>.rn-accommodation-details-section.rn-d-lg-block{display:none!important}

@media (min-width:992px){
  rn-accommodation-detail{grid-template-columns:minmax(0,1fr) 360px}
  rn-accommodation-detail .rn-accommodation-header-section>.rn-h1{grid-column:1}
  rn-accommodation-detail .rn-accommodation-header-section>.rn-d-lg-none{display:block!important;grid-column:2;align-self:end;justify-self:end}
  /* Rij 1 actiebalk, 2 titel, 3 galerij; daarna loopt de kaartkolom mee. */
  rn-accommodation-detail>.rn-row>.rn-col-lg-4{grid-column:2;grid-row:4/span 30;margin-top:40px}
}

/* 2. Tabs (actiebalk) als pill-groep
   ========================================================================== */
rn-accommodation-detail>rn-accommodation-action-bar{overflow:hidden}
rn-accommodation-detail .rn-accommodation-action-bar{margin:0!important;min-width:0}
rn-accommodation-detail .rn-component-nav-container{margin:0!important;max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none}
rn-accommodation-detail .rn-component-nav{border:0!important;gap:0!important}
rn-accommodation-detail .rn-accommodation-action-bar .rn-nav.rn-nav-pills{
  display:inline-flex!important;flex-wrap:nowrap!important;gap:4px;padding:4px!important;margin:0!important;max-width:100%;overflow-x:auto;
  background:var(--hd-surface);border-radius:999px;box-shadow:var(--hd-sh-xs);scrollbar-width:none;
}
rn-accommodation-detail .rn-accommodation-action-bar .rn-nav-item{flex:none}
rn-accommodation-detail .rn-accommodation-action-bar .rn-nav.rn-nav-pills .rn-nav-link{
  display:block!important;padding:9px 16px!important;border:0!important;border-radius:999px!important;background:transparent!important;
  color:var(--hd-ink-soft)!important;font:600 14px/1.2 var(--hd-sans)!important;white-space:nowrap;transition:background .2s,color .2s;
}
rn-accommodation-detail .rn-accommodation-action-bar .rn-nav.rn-nav-pills .rn-nav-link:hover{color:var(--hd-ink)!important;border:0!important}
rn-accommodation-detail .rn-accommodation-action-bar .rn-nav.rn-nav-pills .rn-nav-link.active{background:var(--hd-ink)!important;color:#fff!important}
rn-accommodation-detail .rn-accommodation-action-bar .rn-icon-action-bar{display:none!important}

/* 3. Kop: eyebrow + titel + score
   ========================================================================== */
rn-accommodation-detail .rn-accommodation-header-section>.rn-h1{
  margin:28px 0 0!important;font-family:var(--hd-serif)!important;font-weight:600!important;font-size:56px!important;
  line-height:1!important;letter-spacing:-.01em;color:var(--hd-ink)!important;
}
rn-accommodation-detail .rn-accommodation-header-section>.rn-h1::before{
  content:"Domburg · Zeeland";display:block;margin-bottom:8px;
  font:600 13px/1.3 var(--hd-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--hd-ink-muted);
}
rn-accommodation-detail .rn-accommodation-header-section>.rn-d-lg-none{margin-top:16px}

/* Score als tekstballon + "Fantastisch / (9 beoordelingen)" */
rn-accommodation-detail .rn-accommodation-header-section .rn-accommodation-rating{
  display:grid!important;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:12px;line-height:1.3;
}
rn-accommodation-detail .rn-accommodation-header-section .rn-accommodation-rating-average{
  grid-row:1/3;background:var(--hd-green);color:#fff;font-size:18px;font-weight:700;padding:8px 12px;border-radius:12px 12px 12px 2px;
}
rn-accommodation-detail .rn-accommodation-header-section .rn-accommodation-rating-average-icon,
rn-accommodation-detail .rn-accommodation-header-section .rn-accommodation-rating>.rn-ml-1:not(.rn-accommodation-rating-label){display:none!important}
rn-accommodation-detail .rn-accommodation-header-section .rn-accommodation-rating-average-label{color:#fff!important}
rn-accommodation-detail .rn-accommodation-header-section .rn-accommodation-rating-label{display:flex!important;flex-direction:column;margin:0!important}
rn-accommodation-detail .rn-accommodation-header-section .rn-accommodation-rating-label-description{font-size:15px;font-weight:700;color:var(--hd-ink)}
rn-accommodation-detail .rn-accommodation-header-section .rn-accommodation-rating-label-score{margin:0!important;font-size:13px;color:var(--hd-blue)!important;cursor:pointer}

/* 4. Galerij (mozaïek 2fr / 1fr / 1fr)
   ========================================================================== */
rn-accommodation-detail .rn-media-grid{position:relative;margin:24px 0 0!important;border-radius:24px!important;overflow:hidden}
rn-accommodation-detail .rn-media-grid>.rn-accommodation-grid-item-row{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;height:480px;margin:0!important;
}
rn-accommodation-detail .rn-media-grid .rn-accommodation-grid-item-column{width:auto!important;max-width:none!important;flex:none!important;padding:0!important;min-width:0;height:100%}
rn-accommodation-detail .rn-media-grid .rn-accommodation-grid-item-column>.rn-accommodation-grid-item-row{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;height:100%!important;margin:0!important;
}
rn-accommodation-detail rn-accommodation-media-grid-item,
rn-accommodation-detail rn-accommodation-media-grid-item>div,
rn-accommodation-detail rn-image.rn-accommodation-grid-item-image{display:block;width:100%;height:100%}
rn-accommodation-detail .rn-media-grid img.rn-image{display:block;width:100%!important;height:100%!important;object-fit:cover}
rn-accommodation-detail:not(#hd) .rn-media-grid>button.rn-btn{
  position:absolute!important;right:16px;bottom:16px;z-index:2;
  background:var(--hd-surface)!important;color:var(--hd-ink)!important;border:0!important;border-radius:999px!important;
  padding:11px 18px!important;font:700 14px/1 var(--hd-sans)!important;box-shadow:var(--hd-sh-md)!important;transition:background .15s;
}
rn-accommodation-detail:not(#hd) .rn-media-grid>button.rn-btn:hover{background:var(--hd-yellow)!important}
@media (max-width:767.98px){
  rn-accommodation-detail .rn-media-grid>.rn-accommodation-grid-item-row{grid-template-columns:minmax(0,1fr);height:300px}
}

/* 5. Kaarten
   ========================================================================== */
/* Introkaart = drie grid-items (lead, kenmerken, beschrijving) als één kaart */
rn-accommodation-detail .rn-accommodation-header-section>.rn-h2,
rn-accommodation-detail .rn-accommodation-features-section,
rn-accommodation-detail .rn-accommodation-description-section{background:var(--hd-surface);padding-inline:var(--hd-pad)!important}
rn-accommodation-detail .rn-accommodation-header-section>.rn-h2{
  margin:40px 0 0!important;padding-top:var(--hd-pad)!important;border-radius:24px 24px 0 0;
  font-family:var(--hd-serif)!important;font-weight:500!important;font-size:28px!important;line-height:1.25!important;color:var(--hd-ink)!important;text-wrap:pretty;
}
rn-accommodation-detail .rn-accommodation-features-section{padding-top:28px!important;margin:0!important}
rn-accommodation-detail .rn-accommodation-description-section{padding-top:28px!important;padding-bottom:var(--hd-pad)!important;margin:0!important;border-radius:0 0 24px 24px}

rn-accommodation-detail .rn-accommodation-details-section{
  display:block;margin:16px 0 0!important;padding:var(--hd-pad)!important;background:var(--hd-surface)!important;
  border:0!important;border-radius:24px!important;box-shadow:none!important;
}
rn-accommodation-detail .rn-accommodation-details-section .rn-h3{
  margin:0 0 24px!important;font-family:var(--hd-serif)!important;font-weight:600!important;font-size:32px!important;line-height:1.1!important;color:var(--hd-ink)!important;
}
/* Geen kaart-in-kaart */
rn-accommodation-detail .rn-accommodation-details-section .rn-panel{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
rn-accommodation-detail .rn-accommodation-details-section .rn-panel-section{padding:0!important;border:0!important;background:none!important}

/* Knop-varianten (styleguide .link-underline / .btn--outline / .btn--primary) */
rn-accommodation-detail:not(#hd) .rn-accommodation-description-section button.rn-btn,
rn-accommodation-detail:not(#hd) #rn-accommodation-facilities button.rn-btn-white{
  margin-top:14px;padding:0!important;border:0!important;border-bottom:2px solid var(--hd-yellow)!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;color:var(--hd-ink)!important;font:700 15px/1.4 var(--hd-sans)!important;text-decoration:none!important;
}
rn-accommodation-detail .rn-accommodation-description-section button.rn-btn span,
rn-accommodation-detail #rn-accommodation-facilities button.rn-btn-white span{background:none!important;color:inherit!important}

/* 6. Kenmerken als tegels
   ========================================================================== */
rn-accommodation-detail .rn-accommodation-features-list{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px!important;margin:0!important;
  background:var(--hd-divider);border:1px solid var(--hd-divider);border-radius:16px;overflow:hidden;color:var(--hd-ink);
}
rn-accommodation-detail .rn-accommodation-features-list .feature-list-item{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:6px;
  margin:0!important;padding:16px 18px!important;background:var(--hd-surface-muted)!important;border:0!important;box-shadow:none!important;
}
rn-accommodation-detail .rn-accommodation-features-list .feature-list-item>span{font-size:17px!important;font-weight:700;line-height:1.3;color:var(--hd-ink)}
rn-accommodation-detail .rn-accommodation-features-list .feature-list-item>.rn-accommodation-features-list-item-icon{margin:0!important;font-size:14px!important;color:var(--hd-ink-muted)!important}

/* Beschrijving */
rn-accommodation-detail .rn-accommodation-description p{margin:0!important;font-size:16px!important;line-height:1.75!important;color:var(--hd-ink-body)!important}

/* 7. Voorzieningen
   ========================================================================== */
rn-accommodation-detail #rn-accommodation-facilities{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:16px}
rn-accommodation-detail #rn-accommodation-facilities>.rn-h3{grid-column:1;grid-row:1}
rn-accommodation-detail #rn-accommodation-facilities>.rn-mt-3{grid-column:2;grid-row:1;margin:0!important}
rn-accommodation-detail #rn-accommodation-facilities>.rn-mt-3 button.rn-btn-white{margin:0;font-size:14px!important}
rn-accommodation-detail #rn-accommodation-facilities>rn-accommodation-facility-list{grid-column:1/-1}
rn-accommodation-detail .rn-accommodation-facilities-columns.rn-d-flex{
  display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0!important;overflow:visible!important;
}
rn-accommodation-detail .rn-accommodation-facilities-column,
rn-accommodation-detail .rn-accommodation-facilities-list-items{display:contents!important}
rn-accommodation-detail .rn-accommodation-facilities-list-items>li{
  display:flex;align-items:center;padding:14px 16px!important;border:0!important;border-radius:14px;background:var(--hd-surface-muted);
}
rn-accommodation-detail rn-accommodation-facility-list-item{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;line-height:1.3;color:var(--hd-ink)}
rn-accommodation-detail .rn-accommodation-facilities-list-item-icon{
  flex:none;display:grid!important;place-items:center;width:22px;height:22px;margin:0!important;border-radius:50%;
  background:var(--hd-green-tint);color:var(--hd-green)!important;font-size:11px;
}
rn-accommodation-detail .rn-accommodation-facilities-list-item-icon svg{width:12px!important;height:12px!important}

/* 8. Beschikbaarheid & kalender
   ========================================================================== */
rn-accommodation-detail .rn-legend-list-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px}
rn-accommodation-detail .rn-legend-list-heading .rn-h3{margin:0!important}
rn-accommodation-detail:not(#hd) .rn-legend-heading-info button.rn-btn,
rn-accommodation-detail:not(#hd) .rn-reviews-list-heading-info button.rn-btn{
  background:var(--hd-surface)!important;border:1px solid var(--hd-border)!important;border-radius:999px!important;box-shadow:none!important;
  color:var(--hd-ink)!important;font:700 13px/1 var(--hd-sans)!important;padding:8px 14px!important;
}
rn-accommodation-detail:not(#hd) .rn-legend-heading-info button.rn-btn:hover,
rn-accommodation-detail:not(#hd) .rn-reviews-list-heading-info button.rn-btn:hover{background:var(--hd-surface-muted)!important}

/* Maandkeuze */
rn-accommodation-detail .rn-availability-calendar-controls{margin-bottom:16px}
rn-accommodation-detail .rn-availability-calendar-controls .rn-input-group-text{background:var(--hd-surface-muted);border-color:var(--hd-border);border-radius:999px 0 0 999px;color:var(--hd-ink-soft)}
rn-accommodation-detail .rn-availability-calendar-controls .rn-custom-select{border-color:var(--hd-border);border-radius:0 999px 999px 0;font:600 14px var(--hd-sans);color:var(--hd-ink)}

rn-accommodation-detail .rn-availability-calendar-container{border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
rn-accommodation-detail .rn-availability-calendar-month-container{border:0!important;padding:0!important}
rn-accommodation-detail .rn-availability-calendar-floating-controls{padding:0!important}
@media (min-width:768px){
  rn-accommodation-detail .rn-availability-calendar-row{flex-wrap:nowrap!important;gap:32px}
  rn-accommodation-detail .rn-availability-calendar-col{flex:1 1 0!important;max-width:none!important}
}
@media (max-width:767.98px){
  rn-accommodation-detail .rn-availability-calendar-col+.rn-availability-calendar-col{margin-top:24px}
}
/* Vorige/volgende: ronde gele knoppen */
rn-accommodation-detail .rn-availability-calendar-container button.rn-btn-white{
  width:40px;height:40px;padding:0!important;border:0!important;border-radius:50%!important;
  background:var(--hd-yellow)!important;color:var(--hd-ink)!important;box-shadow:none!important;font-size:16px!important;
}
rn-accommodation-detail .rn-availability-calendar-container button.rn-btn-white:hover{background:var(--hd-yellow-hover)!important}
rn-accommodation-detail .rn-availability-calendar-container button.rn-btn-white:disabled{opacity:.35}
rn-accommodation-detail .rn-availability-calendar-month-header .rn-h4{
  font:700 16px/40px var(--hd-sans)!important;padding:0!important;margin:0 0 6px!important;text-align:center;text-transform:capitalize;color:var(--hd-ink)!important;
}
rn-accommodation-detail .rn-availability-calendar-month-day-of-week{height:auto!important;padding:0 0 8px!important;font-size:12px;font-weight:600;color:var(--hd-ink-muted)!important}

/* Dagcellen — 2px marge rondom, gekleurde tegel met radius 10 */
rn-accommodation-detail .rn-availability-calendar-month-dates{background:none!important}
rn-accommodation-detail .rn-availability-calendar-month-date{height:44px!important;padding:2px;background:transparent!important;border:0!important;font-size:14px;font-weight:700;color:transparent}
rn-accommodation-detail .rn-availability-calendar-month-date-label,
rn-accommodation-detail .rn-btn-availability-calendar-date{
  display:flex!important;align-items:center;justify-content:center;width:100%;height:40px!important;padding:0!important;
  border:0!important;border-radius:10px!important;font:700 14px/1 var(--hd-sans)!important;box-shadow:none!important;
}
rn-accommodation-detail .rn-btn-availability-calendar-date{position:relative;overflow:hidden}
rn-accommodation-detail .rn-btn-availability-calendar-date span{position:relative;z-index:1}
rn-accommodation-detail .rn-btn-availability-calendar-date::before,
rn-accommodation-detail .rn-btn-availability-calendar-date::after{content:none!important}

/* Verleden / niet beschikbaar */
rn-accommodation-detail .rn-availability-calendar-month-date-disabled{color:var(--hd-ink-disabled)}
rn-accommodation-detail .rn-availability-calendar-month-date-disabled .rn-availability-calendar-month-date-label{background:transparent!important;color:var(--hd-ink-disabled)!important}

/* Beschikbaar (klikbaar): vol groen met witte cijfers, zodat het opvalt */
rn-accommodation-detail .rn-availability-calendar-month-date-eligible .rn-btn-availability-calendar-date{background:var(--hd-green)!important;color:#fff!important}
rn-accommodation-detail .rn-availability-calendar-month-date-eligible .rn-btn-availability-calendar-date:hover{background:var(--hd-green-dark)!important}
/* Wisseldag: ochtend bezet (vertrek vorige gast) / middag bezet (aankomst volgende) */
rn-accommodation-detail .rn-availability-calendar-month-date-eligible.rn-availability-calendar-month-date-assigned-am .rn-btn-availability-calendar-date{background:linear-gradient(135deg,#DC3545 50%,var(--hd-green) 50%)!important;color:#fff!important}
rn-accommodation-detail .rn-availability-calendar-month-date-eligible.rn-availability-calendar-month-date-assigned-pm .rn-btn-availability-calendar-date{background:linear-gradient(135deg,var(--hd-green) 50%,#DC3545 50%)!important;color:#fff!important}

/* Beschikbaar maar geen aankomst/vertrek */
rn-accommodation-detail .rn-availability-calendar-month-date-ineligible .rn-availability-calendar-month-date-label{background:#F1F8F2!important;color:#9DCBA8!important}
/* Bezet */
rn-accommodation-detail .rn-availability-calendar-month-date-ineligible.rn-availability-calendar-month-date-assigned-day .rn-availability-calendar-month-date-label,
rn-accommodation-detail .rn-availability-calendar-month-date-eligible.rn-availability-calendar-month-date-assigned-day .rn-availability-calendar-month-date-label{background:var(--hd-pink-tint)!important;color:var(--hd-pink)!important;text-decoration:line-through}
rn-accommodation-detail .rn-availability-calendar-month-date-ineligible.rn-availability-calendar-month-date-assigned-am .rn-availability-calendar-month-date-label{background:linear-gradient(135deg,var(--hd-pink-tint) 50%,var(--hd-green-tint) 50%)!important;color:var(--hd-pink)!important}
rn-accommodation-detail .rn-availability-calendar-month-date-ineligible.rn-availability-calendar-month-date-assigned-pm .rn-availability-calendar-month-date-label{background:linear-gradient(135deg,var(--hd-green-tint) 50%,var(--hd-pink-tint) 50%)!important;color:var(--hd-pink)!important}

/* Geselecteerd verblijf: aaneengesloten blauwe band, begin/eind vol blauw */
rn-accommodation-detail .rn-availability-calendar-month-date-active{padding-inline:0}
rn-accommodation-detail .rn-availability-calendar-month-date-active .rn-availability-calendar-month-date-label,
rn-accommodation-detail .rn-availability-calendar-month-date-active .rn-btn-availability-calendar-date{background:var(--hd-blue-tint)!important;color:var(--hd-blue-dark)!important;border-radius:0!important;text-decoration:none}
rn-accommodation-detail rn-availability-calendar-date:has(>.rn-availability-calendar-month-date-active):not(rn-availability-calendar-date:has(>.rn-availability-calendar-month-date-active)+rn-availability-calendar-date) .rn-availability-calendar-month-date-label,
rn-accommodation-detail rn-availability-calendar-date:has(>.rn-availability-calendar-month-date-active):not(rn-availability-calendar-date:has(>.rn-availability-calendar-month-date-active)+rn-availability-calendar-date) .rn-btn-availability-calendar-date{background:var(--hd-blue)!important;color:#fff!important;border-radius:10px 0 0 10px!important}
rn-accommodation-detail .rn-availability-calendar-month-date-active-end-date{padding-inline:0}
rn-accommodation-detail .rn-availability-calendar-month-date-active-end-date .rn-availability-calendar-month-date-label,
rn-accommodation-detail .rn-availability-calendar-month-date-active-end-date .rn-btn-availability-calendar-date{background:var(--hd-blue)!important;color:#fff!important;border-radius:0 10px 10px 0!important;text-decoration:none}

/* Aanbod-regel onder de kalender (foto · naam · periode · knop) */
rn-accommodation-detail .rn-accommodation-availability-panel-section+.rn-accommodation-availability-panel-section{margin-top:24px!important;padding-top:24px!important;border-top:1px solid var(--hd-divider)!important}
rn-accommodation-detail .rn-reservation-offer-horizontal .rn-h3{margin:0 0 4px!important;font:700 16px/1.3 var(--hd-sans)!important}
rn-accommodation-detail .rn-reservation-offer-image rn-image{overflow:hidden;border-radius:12px}
rn-accommodation-detail .rn-reservation-offer-details-list-horizontal{margin:0;padding:0;list-style:none;font-size:14px;color:var(--hd-ink-soft)}

/* Hoofdknoppen (Boek / Kies periode) = gele pill */
rn-accommodation-detail button.rn-btn-default,
rn-accommodation-detail a.rn-btn-outline-gray{
  background:var(--hd-yellow)!important;color:var(--hd-ink)!important;border:0!important;border-radius:999px!important;box-shadow:none!important;
  padding:11px 20px!important;font:700 14px/1.2 var(--hd-sans)!important;transition:background .15s;
}
rn-accommodation-detail button.rn-btn-default:hover,
rn-accommodation-detail a.rn-btn-outline-gray:hover{background:var(--hd-yellow-hover)!important;color:var(--hd-ink)!important}

/* 9. Locatie
   ========================================================================== */
rn-accommodation-detail .rn-accommodation-location-map{height:380px!important;border-radius:16px!important;overflow:hidden}
rn-accommodation-detail .rn-accommodation-location-details-list{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin:18px 0 0;padding:0;list-style:none;
}
rn-accommodation-detail .rn-accommodation-location-details-list li:first-child{font-size:15px;font-weight:600;color:var(--hd-ink)}
rn-accommodation-detail .rn-accommodation-location-details-list li:first-child .rn-reservation-offer-details-list-item-icon{display:none}
rn-accommodation-detail .rn-accommodation-location-details-list a{
  display:inline-block;padding:10px 18px;border:1px solid var(--hd-border);border-radius:999px;
  font-size:14px;font-weight:700;color:var(--hd-ink)!important;text-decoration:none!important;
}
rn-accommodation-detail .rn-accommodation-location-details-list a::after{content:" →"}
rn-accommodation-detail .rn-accommodation-location-details-list a:hover{background:var(--hd-surface-muted)}
@media (max-width:767.98px){rn-accommodation-detail .rn-accommodation-location-map{height:260px!important}}

/* 10. Beoordelingen
   ========================================================================== */
rn-accommodation-detail .rn-reviews-list-heading{gap:16px;margin:0 0 24px!important;padding:0!important;border:0!important}
rn-accommodation-detail .rn-reviews-list-heading .rn-h3{margin:0!important}
rn-accommodation-detail .rn-reviews-list-heading-rating{margin:0!important;align-items:center}
rn-accommodation-detail .rn-reviews-list-heading-label-description{font-size:15px;color:var(--hd-ink)}
rn-accommodation-detail .rn-reviews-list-heading-label-score{font-size:13px;color:var(--hd-ink-muted)}
rn-accommodation-detail .rn-reviews-list-heading-average-icon,
rn-accommodation-detail .rn-reviews-list-item-score-icon{display:none!important}
rn-accommodation-detail .rn-reviews-list-heading-average-label{
  position:static!important;display:inline-block;width:auto;background:var(--hd-green);color:#fff;
  font-size:18px;font-weight:700;padding:8px 12px;border-radius:12px 12px 12px 2px;
}

rn-accommodation-detail .rn-reviews-list{display:flex;flex-direction:column;gap:24px}
rn-accommodation-detail .rn-reviews-list-item{
  display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;
  margin:0!important;padding:0 0 24px!important;border-bottom:1px solid var(--hd-divider);
}
rn-accommodation-detail .rn-reviews-list-item{position:relative}
rn-accommodation-detail .rn-reviews-list-item-score-section{position:static!important;grid-column:1;grid-row:1;margin:0!important;padding:0!important;width:auto!important}
rn-accommodation-detail .rn-reviews-list-item-score{position:static!important;width:auto!important;height:auto!important;line-height:1}
rn-accommodation-detail .rn-reviews-list-item-score-label{
  position:static!important;display:inline-block;width:auto!important;background:var(--hd-green);color:#fff!important;
  font-size:14px!important;font-weight:700;padding:5px 9px;border-radius:10px 10px 10px 2px;
}
rn-accommodation-detail .rn-reviews-list-item-content-section{display:contents!important;padding:0!important;margin:0!important}
rn-accommodation-detail .rn-reviews-list-item .rn-h4{grid-column:2;grid-row:1;margin:0!important;font:700 18px/1.3 var(--hd-sans)!important;color:var(--hd-ink)!important}
rn-accommodation-detail .rn-reviews-list-item-content-body{grid-column:1/-1;margin:14px 0 16px!important;font-size:15px!important;line-height:1.7!important;color:var(--hd-ink-body)!important}
rn-accommodation-detail .rn-reviews-list-item-details-list{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--hd-ink-muted);
}
rn-accommodation-detail .rn-reviews-list-item-details-list li{display:flex;align-items:center;gap:6px;margin:0!important}
rn-accommodation-detail .rn-reviews-list-item-details-list li:first-child span:last-child{font-weight:600;color:var(--hd-ink)}
rn-accommodation-detail .rn-reviews-list-item-details-list .rn-badge-light{
  background:var(--hd-bg)!important;color:var(--hd-ink-soft)!important;border:0!important;border-radius:999px!important;
  font-size:13px!important;font-weight:600!important;padding:3px 10px!important;
}
rn-accommodation-detail .rn-stars-star-placeholder{color:var(--hd-border)!important}
rn-accommodation-detail .rn-stars-star-active{color:var(--hd-yellow)!important}
rn-accommodation-detail .rn-reviews-list-footer{margin-top:24px}
rn-accommodation-detail .rn-reviews-list-footer .rn-text-center{text-align:left!important}

/* 11. Boekingskaart (sidebar)
   ========================================================================== */
rn-accommodation-detail rn-accommodation-detail-sidebar .rn-panel{
  top:var(--hd-sticky)!important;background:var(--hd-surface)!important;border:0!important;border-radius:24px!important;
  box-shadow:var(--hd-sh-lg)!important;padding:28px!important;
}
rn-accommodation-detail rn-accommodation-detail-sidebar .rn-panel-section{padding:0!important;border:0!important;background:none!important}
rn-accommodation-detail rn-accommodation-detail-sidebar .rn-h1{
  display:block;margin:0!important;font-family:var(--hd-serif)!important;font-weight:600!important;font-size:26px!important;line-height:1.1!important;color:var(--hd-ink)!important;
}
/* Score staat al bovenaan de pagina */
rn-accommodation-detail rn-accommodation-detail-sidebar rn-review-stats-inline{display:none!important}
rn-accommodation-detail rn-accommodation-detail-sidebar .rn-panel-section-offer-period{margin-top:6px!important}
rn-accommodation-detail rn-accommodation-detail-sidebar .rn-panel-section-offer-period .rn-h3{
  margin:0 0 20px!important;font:500 13px/1.4 var(--hd-sans)!important;color:var(--hd-ink-muted)!important;
}
rn-accommodation-detail rn-accommodation-detail-sidebar .rn-reservation-offer-details-list{
  padding:12px 14px;border:1px solid var(--hd-border);border-radius:14px;font-size:15px;font-weight:600;color:var(--hd-ink);
}
rn-accommodation-detail .rn-reservation-offer-details-list-item-icon-invalid{color:var(--hd-ink-muted)!important}
rn-accommodation-detail .rn-reservation-offer-details-list-item-icon-valid{color:var(--hd-green)!important}
rn-accommodation-detail rn-accommodation-detail-sidebar .rn-reservation-offer-price-and-btn{margin-top:24px}
rn-accommodation-detail .rn-reservation-offer-price-from-label{font-size:13px;color:var(--hd-ink-muted)}
rn-accommodation-detail rn-accommodation-detail-sidebar .rn-reservation-offer-price-label{
  display:block;margin-top:2px;font:700 36px/1.1 var(--hd-sans)!important;letter-spacing:-.01em;color:var(--hd-green)!important;
}
rn-accommodation-detail .rn-reservation-offer-price-caption{font-size:12px;color:var(--hd-ink-muted)}
rn-accommodation-detail .rn-reservation-offer-price-caption-check{color:var(--hd-green)}
rn-accommodation-detail rn-accommodation-detail-sidebar button.rn-btn-default.rn-btn-lg{
  width:100%;margin:22px 0 0!important;padding:16px!important;border-radius:14px!important;font-size:16px!important;
}

/* 12. Smal scherm
   ========================================================================== */
@media (max-width:720px){
  rn-accommodation-detail{--hd-pad:24px}
  rn-accommodation-detail .rn-accommodation-header-section>.rn-h1{font-size:40px!important;margin-top:20px!important}
  rn-accommodation-detail .rn-accommodation-header-section>.rn-h2{font-size:22px!important;margin-top:24px!important}
  rn-accommodation-detail .rn-accommodation-details-section .rn-h3{font-size:26px!important}
  rn-accommodation-detail #rn-accommodation-facilities{grid-template-columns:minmax(0,1fr)}
  rn-accommodation-detail #rn-accommodation-facilities>.rn-mt-3{grid-column:1;grid-row:3;margin-top:16px!important}
}