/* ReallyHolidays — hoofdstylesheet
   Kleuren: teal #14807D / #0E6360 · flamingo #E187A0 · zand #F6EFE4 · crème #FCF8F1 · zonsondergang #DE9159 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FCF8F1; font-family: 'Manrope', sans-serif; color: #23322F; }
/* Decoratieve absolute elementen (siercirkels, palmen-emoji) mogen nooit
   horizontale scroll veroorzaken op mobiel. 'clip' i.p.v. 'hidden' zodat
   position:sticky (de navbar) blijft werken. */
html, body { overflow-x: clip; }

/* Palmen op de achtergrond */
body::before, body::after {
  content: ""; position: fixed; bottom: 0; width: 300px; height: 88vh; max-height: 900px;
  z-index: 0; pointer-events: none; background-repeat: no-repeat;
  background-position: bottom center; background-size: contain; opacity: .07;
}
body::before { left: -70px; background-image: url("../assets/palm.png"); }
body::after { right: -70px; transform: scaleX(-1); background-image: url("../assets/palm.png"); }
@media (max-width: 1100px) { body::before, body::after { display: none; } }

a { color: #14807D; text-decoration: none; }
a:hover { color: #0E6360; }
main { max-width: 1400px; margin: 0 auto; }
input, button, select, textarea { font-family: 'Manrope', sans-serif; }
::selection { background: #F3C4CF; color: #23322F; }
.accent-i { font-style: italic; color: #E187A0; }

/* ── Animaties ── */
@keyframes rhFloatA { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(8deg); } }
@keyframes rhFloatChip { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes rhFloatB { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(18px) rotate(-6deg); } }
@keyframes rhBob { 0%,100% { transform: translateY(0); opacity:.9 } 50% { transform: translateY(8px); opacity:.35 } }
@keyframes rhPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes rhPop { 0% { transform: scale(.94); opacity:0 } 100% { transform: scale(1); opacity:1 } }
@keyframes rhSun { 0%,100% { transform: translateY(0) scale(1); opacity:.9 } 50% { transform: translateY(-10px) scale(1.05); opacity:1 } }
/* Vakantieslinger: kaartjes wiegen zachtjes aan het touw */
@keyframes rhHang {
  0%,100% { transform: rotate(calc(var(--tilt, 0deg) - .7deg)); }
  50%     { transform: rotate(calc(var(--tilt, 0deg) + .7deg)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Scroll-reveal */
.rh-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rh-reveal.rh-in { opacity: 1; transform: none; }

/* Taalvlaggen */
.rh-flag { background: none; border: none; cursor: pointer; padding: 2px; border-radius: 6px; transition: transform .15s, opacity .15s; display: inline-flex; opacity: .4; }
.rh-flag:hover { transform: scale(1.18); }
.rh-flag.active { opacity: 1; }
.rh-flag img { width: 26px; height: 18px; border-radius: 3px; display: block; box-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* Vakantieslinger (stat-kaarten) */
.rh-stats { position: relative; }
.rh-garland { position: absolute; left: -20px; right: -20px; top: -50px; width: calc(100% + 40px); height: 86px; pointer-events: none; z-index: 0; }
@keyframes rhSwing { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.rh-garland .swing { transform-box: fill-box; transform-origin: 50% 0%; animation: rhSwing 3.8s ease-in-out infinite; }
.rh-stat-card {
  position: relative; text-align: center; padding: 26px 18px 22px; border-radius: 22px; background: #fff;
  box-shadow: 0 26px 50px -34px rgba(20,60,58,.5); transition: box-shadow .3s;
  transform-origin: 50% -30px; animation: rhHang 5.5s ease-in-out infinite; z-index: 1;
}
.rh-stat-card:nth-child(2) { --tilt: -1.4deg; border: 1px solid #EFE8DA; }
.rh-stat-card:nth-child(3) { --tilt: 1.2deg;  border: 1px solid #F3E3E9; animation-delay: -1.4s; }
.rh-stat-card:nth-child(4) { --tilt: -1deg;   border: 1px solid #F2E6D3; animation-delay: -2.8s; }
.rh-stat-card:nth-child(5) { --tilt: 1.4deg;  border: 1px solid #DFEAF3; animation-delay: -4.2s; }
.rh-stat-card:hover { box-shadow: 0 34px 60px -30px rgba(20,128,125,.55); }
.rh-stat-pin {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  color: #fff; font-size: 20px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 3px solid #fff;
}
.rh-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 700; line-height: 1; margin-top: 14px; }
.rh-stat-lbl { font-size: 13.5px; font-weight: 800; margin-top: 5px; }
.rh-stat-sub { font-size: 11.5px; font-weight: 600; margin-top: 3px; }

/* Kalender */
.rh-cal-day { text-align: center; padding: 16px 0; border-radius: 12px; font-size: 16px; font-weight: 700; }
.rh-cal-day.free { background: #E7F5F1; color: #0E6360; border: 1px solid #BFE3DA; }
.rh-cal-day.busy { background: #F8D3DF; color: #a24d67; border: 1px solid #EBB6C6; }
.rh-cal-day.past { background: #F5F1E8; color: #c3bba9; border: 1px solid transparent; text-decoration: line-through; opacity: .6; }
.rh-cal-day.pad { background: none; border: none; }

/* Foto's altijd netjes ingekaderd */
.rh-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: 100% !important; display: block; }
.rh-cover-abs { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: 100% !important; }

/* Galerij */
.rh-gal { transition: opacity .5s ease; opacity: 0; z-index: 1; }
.rh-gal.on { opacity: 1; z-index: 2; }

/* Wat-te-doen kaarten */
.area-card { background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid #F0E9DB; transition: transform .3s, box-shadow .3s; }
.area-card:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -30px rgba(20,60,58,.4); }
.ac-img { position: relative; height: 160px; }
.ac-time { position: absolute; top: 12px; left: 12px; background: rgba(35,50,47,.78); color: #fff; padding: 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.ac-txt { padding: 20px 22px 22px; }
.ac-txt h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.ac-txt p { font-size: 13.5px; line-height: 1.55; color: #6b7572; margin: 0; }

/* Waarom-kaarten */
.why-card { background: #fff; border-radius: 22px; padding: 28px 24px; border: 1px solid #F0E9DB; text-align: center; transition: transform .3s, box-shadow .3s; }
.why-card:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -30px rgba(20,60,58,.4); }
.why-ico { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.why-card h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 8px; }
.why-card p { font-size: 13.5px; line-height: 1.55; color: #6b7572; margin: 0; }

/* Review-kaarten */
.rev-band { position: relative; background: linear-gradient(160deg, #E7F5F1 0%, #FDF0F4 55%, #FBF1E6 100%); border: 1px solid #EFE4D8; border-radius: 32px; padding: 50px 44px 46px; overflow: hidden; }
.rev-band::before { content: ""; position: absolute; right: -70px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(20,128,125,.10); }
.rev-band::after { content: ""; position: absolute; left: -60px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: rgba(225,135,160,.14); }
.rev-band > div { position: relative; z-index: 1; }
.rev-card { position: relative; background: #fff; border-radius: 22px; padding: 36px 28px 30px; box-shadow: 0 22px 40px -32px rgba(20,60,58,.4); border: 1px solid #F0E9DB; transition: transform .3s, box-shadow .3s; }
.rev-card:hover { transform: translateY(-5px); box-shadow: 0 30px 52px -30px rgba(20,60,58,.45); }
.rev-card::before { content: "\201C"; position: absolute; top: 8px; right: 20px; font-family: 'Cormorant Garamond', serif; font-size: 84px; line-height: 1; color: #F3C4CF; pointer-events: none; }
.rev-card:nth-child(1) { border-top: 4px solid #14807D; }
.rev-card:nth-child(2) { border-top: 4px solid #E187A0; }
.rev-card:nth-child(3) { border-top: 4px solid #DE9159; }
.rev-card .stars { color: #DE9159; letter-spacing: 2px; margin-bottom: 14px; }
.rev-card p { font-size: 15px; line-height: 1.7; color: #3d4744; margin: 0 0 22px; }
.rev-who { display: flex; align-items: center; gap: 12px; }
.rev-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.rev-name { font-weight: 700; font-size: 14px; }
.rev-from { font-size: 12.5px; color: #8a938f; }

/* Mini-kalender in boekingsformulier */
.bc-day { text-align: center; padding: 7px 0; border-radius: 8px; font-size: 12px; font-weight: 700; }
.bc-day.free { background: #EFF7F4; color: #0E6360; border: 1px solid #DCEEE7; cursor: pointer; transition: background .15s; }
.bc-day.free:hover { background: #CFE9E0; }
.bc-day.busy { background: #F8D3DF; color: #a24d67; border: 1px solid #EBB6C6; }
.bc-day.past { color: #c3bba9; opacity: .55; }
.bc-day.pad { background: none; }
.bc-day.sel { background: #5FB3AD; color: #fff; border-color: #5FB3AD; }
.bc-day.in { background: #0E6360; color: #fff; border-color: #0E6360; }

/* Knoppen algemeen */
button { -webkit-tap-highlight-color: transparent; }
.btn-hover-lift { transition: transform .2s, background .2s, box-shadow .2s; }
.btn-hover-lift:hover { transform: translateY(-2px); }

/* Burger & mobiel menu */
.rh-burger { display: none; }
.rh-mobile-menu { display: none; padding: 6px 20px 18px; flex-direction: column; gap: 2px; border-top: 1px solid rgba(35,50,47,.08); }
.rh-mobile-menu.open { display: flex; }
.rh-mobile-menu a { color: #3d4744; font-weight: 600; padding: 12px 4px; }

/* Modal & admin zichtbaarheid */
.hidden { display: none !important; }

/* Hero */
.rh-hero-img { width: 100%; height: 560px; object-fit: cover; display: block; }

/* ── Responsief ── */
/* Chips in hero: op tablet-breedtes overlappen ze de titel — eerder verplaatsen/verbergen */
@media (max-width: 1080px) {
  .rh-sun-chip { display: none !important; }
  .rh-award-chip { right: 14px !important; top: auto !important; bottom: 52px !important; padding: 8px 11px 8px 8px !important; transform: scale(.92); }
  .rh-award-chip .score-badge { width: 38px !important; height: 38px !important; font-size: 15px !important; }
}
@media (max-width: 900px) {
  .rh-navlinks { gap: 18px !important; }
  .rh-grid4 { grid-template-columns: 1fr 1fr !important; }
  .rh-grid3 { grid-template-columns: 1fr !important; }
  .rh-showcase { grid-template-columns: 1fr !important; }
  .rh-book { grid-template-columns: 1fr !important; }
  .rh-loc { grid-template-columns: 1fr !important; gap: 34px !important; }
  .rh-about { grid-template-columns: 1fr !important; }
  .rh-foot { grid-template-columns: 1fr 1fr !important; }
  .rh-loyal { grid-template-columns: 1fr !important; }
  .rh-code-row { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .rh-nav { padding: 12px 16px !important; }
  .rh-navlinks { gap: 10px !important; }
  .rh-navlinks .rh-navlink { display: none !important; }
  .rh-burger { display: inline-flex !important; }
  .rh-hero-wrap { border-radius: 22px !important; }
  .rh-hero-img { height: 470px; }
  .rh-hero-pad { padding: 0 26px !important; }
  .rh-sun-chip { display: none !important; }
  .rh-hero-h1 { font-size: 38px !important; }
  .rh-hero-p { font-size: 16px !important; }
  .rh-stats { margin: -26px 16px 0 !important; grid-template-columns: 1fr 1fr !important; gap: 26px 12px !important; }
  .rh-stat-card { animation: none; transform: none; padding: 22px 12px 18px !important; }
  .rh-garland { display: none; }
  .rh-sec { padding-left: 20px !important; padding-right: 20px !important; }
  .rh-beach { height: 230px !important; }
  .rh-beach-inner { left: 22px !important; right: 22px !important; }
  .rh-beach-h2 { font-size: 27px !important; }
  .rh-h2 { font-size: 34px !important; }
  .rh-loc-imgs { grid-template-rows: 150px 150px !important; }
  .rh-book-photo { min-height: 240px !important; padding: 34px 26px !important; order: 2; }
  .rh-book { display: flex !important; flex-direction: column; }
  .rh-book-form { padding: 28px 20px !important; order: 1; }
  .rh-about-txt { padding: 48px 28px !important; }
  /* Groepsfoto op mobiel volledig tonen (geen zijkanten afsnijden) */
  .rh-about-img { min-height: 0 !important; height: auto !important; aspect-ratio: 1500 / 1001; }
  .rh-cta { padding: 50px 26px !important; }
  .rh-cta-h2 { font-size: 36px !important; }
  .rh-modal { padding: 22px 20px 26px !important; }
  .rh-tabrow { gap: 12px !important; }
  .rh-tabrow button { padding: 10px 18px 10px 10px !important; }
  .rh-tabrow .tab-title { font-size: 21px !important; }
  .rh-loyal-wrap { padding: 34px 24px !important; }
  .rev-band { padding: 28px 18px 26px !important; }
  .rev-card::before { font-size: 60px; right: 14px; }
  .rh-cal-card { padding: 20px 12px 24px !important; }
  .rh-cal-day { padding: 10px 0; font-size: 13.5px; border-radius: 9px; }
  #loyal h2 { font-size: 30px !important; }
  .rh-gallery-panel { min-height: 320px !important; }
  .rh-showcase-txt { padding: 26px 22px 28px !important; }
  .rh-admin { width: 100vw !important; max-width: 100vw !important; }
}
@media (max-width: 460px) {
  .rh-grid4 { grid-template-columns: 1fr !important; }
  .rh-foot { grid-template-columns: 1fr !important; }
  .rh-hero-h1 { font-size: 32px !important; }
  .rh-stats { grid-template-columns: 1fr 1fr !important; }
}

/* Focus-zichtbaarheid voor toetsenbord */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #14807D; outline-offset: 2px; border-radius: 6px;
}

/* Home-keuze knoppen: groot en duidelijk */
.home-tab { position: relative; transition: transform .25s, box-shadow .25s; }
.home-tab:hover { transform: translateY(-4px); }
.home-tab .tab-check { display: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #14807D; font-weight: 900; font-size: 14px; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.home-tab.active { box-shadow: 0 22px 44px -16px rgba(14,99,96,.65); transform: scale(1.05); }
.home-tab.active .tab-check { display: inline-flex; }
.home-tab[data-home="flamingo"].active { box-shadow: 0 22px 44px -16px rgba(225,135,160,.7); }
.home-tab[data-home="flamingo"].active .tab-check { color: #C0567A; }
/* Statkaart-typografie steviger */
.rh-stat-num { font-size: 50px; }
.rh-stat-lbl { font-size: 14.5px; color: #23322F; }
@media (max-width: 720px) {
  .rh-award-chip { display: none !important; }
  .home-tab { padding: 10px 22px 10px 10px !important; }
  .home-tab .tab-title { font-size: 21px !important; }
  .home-tab img { width: 44px !important; height: 44px !important; }
}

/* Hero: langzame zoom + krachtige CTA's */
@keyframes rhZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.rh-hero-img { animation: rhZoom 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.rh-cta-main { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(120deg,#E187A0,#DE9159); color:#fff; padding:17px 32px; border-radius:100px; font-weight:800; font-size:15.5px; box-shadow:0 18px 40px -12px rgba(222,111,140,.75); transition:transform .25s, box-shadow .25s; }
.rh-cta-main:hover { color:#fff; transform:translateY(-3px); box-shadow:0 24px 50px -12px rgba(222,111,140,.85); }
.rh-cta-main .cta-arrow { transition:transform .25s; font-size:17px; }
.rh-cta-main:hover .cta-arrow { transform:translateX(5px); }
.rh-cta-ghost { display:inline-flex; align-items:center; background:rgba(255,255,255,.94); color:#0E6360; padding:16px 28px; border-radius:100px; font-weight:700; font-size:15px; box-shadow:0 12px 28px -14px rgba(0,0,0,.5); transition:transform .25s, background .25s; }
.rh-cta-ghost:hover { color:#0E6360; background:#fff; transform:translateY(-3px); }
/* FAQ nieuw */
.faq-item { background:#fff; border:1px solid #F0E9DB; border-radius:18px; overflow:hidden; transition:box-shadow .3s, transform .3s; }
.faq-item:hover { box-shadow:0 18px 36px -26px rgba(20,60,58,.45); }
.faq-item.open { box-shadow:0 22px 44px -26px rgba(20,60,58,.5); }
.faq-q { width:100%; display:flex; align-items:center; gap:14px; padding:17px 20px; background:none; border:none; cursor:pointer; font-size:15.5px; font-weight:700; color:#23322F; text-align:left; font-family:'Manrope',sans-serif; }
.faq-emoji { flex:none; width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:19px; }
.faq-arrow { margin-left:auto; color:#14807D; transition:transform .25s; font-size:13px; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a > div { padding:0 20px 18px 74px; font-size:14.5px; line-height:1.65; color:#5b6764; }
.faq-seasons { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.faq-seasons span { padding:7px 13px; border-radius:100px; font-size:12.5px; font-weight:800; }
@media (max-width: 900px) { .rh-faqgrid { grid-template-columns:1fr !important; } .faq-a > div { padding-left:20px; } }
@media (max-width: 720px) {
  .rh-hero-btns { flex-direction:column; align-items:stretch !important; }
  .rh-cta-main, .rh-cta-ghost { justify-content:center; }
  .rh-hero-img { animation:none; }
}

/* Boekingsstappen */
.book-step { display:flex; align-items:center; gap:11px; margin:20px 0 10px; }
.book-step:first-child { margin-top:0; }
.book-step .num { flex:none; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#14807D,#2AA6A0); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px -6px rgba(14,99,96,.6); }
.book-step .lbl { font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#0E6360; }
.book-step::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,#DCE9E6,transparent); }

/* Mobiel: hero groeit mee met de inhoud, knoppen altijd volledig zichtbaar */
@media (max-width: 720px) {
  .rh-hero-img { position: absolute; inset: 0; width: 100%; height: 100% !important; }
  .rh-hero-pad { position: relative !important; inset: auto !important; padding: 104px 24px 72px !important; }
  .rh-hero-h1 { font-size: 34px !important; }
  .rh-cta-h2 { font-size: 34px !important; }
  .rh-cta { padding: 56px 24px !important; }
}

/* Hero-slideshow: twee foto's wisselen elke 3 s met zachte overgang */
.rh-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rh-hero-wrap { min-height: 620px; }
.rh-hero-alt { opacity: 0; transition: opacity 1.2s ease; }
.rh-hero-alt.show { opacity: 1; }