/* ==========================================================
   Roomcility prijzen
   Rekenhulp met een schuif voor het aantal gebruikers, de
   pakketten met prijs en minimum, en extra's naast het pakket.
   ========================================================== */

.rc-pr { --rc-pr-bg: var(--rc-bg); --rc-pr-night: var(--rc-night); background: var(--rc-pr-bg); color: var(--rc-ink); }
.rc-pr__wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.rc-pr__hand { margin: 0 0 8px; font-size: 30px; color: var(--rc-ink-2); transform: rotate(-4deg); }
.rc-pr__title { margin: 0; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--rc-ink); text-wrap: balance; }
.rc-pr__lead { max-width: 54ch; margin: 20px 0 0; font-size: 17px; line-height: 1.65; color: var(--rc-ink-2); }

/* ── Intro ── */
.rc-pr__intro { padding: 120px 0 40px; text-align: center; }
.rc-pr__intro .rc-pr__hand { font-size: 32px; }
.rc-pr__h1 { max-width: 15ch; margin: 0 auto; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.03; font-weight: 800; letter-spacing: -.035em; color: var(--rc-ink); text-wrap: balance; }
.rc-pr__intro .rc-pr__lead { margin: 22px auto 0; font-size: 17.5px; }

/* ── Rekenhulp ── */
.rc-pr__calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); border-radius: 32px; background: #fff; box-shadow: var(--rc-shadow); overflow: hidden; }
.rc-pr__cl { padding: 40px; }
.rc-pr__cl h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--rc-ink-2); }
.rc-pr__count { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; }
.rc-pr__count b { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.rc-pr__count span { font-size: 16px; color: var(--rc-ink-2); }
.rc-pr__range { position: relative; margin: 26px 0 0; }
.rc-pr__range input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: linear-gradient(90deg, var(--rc-accent) var(--p, 20%), #E3E9F3 var(--p, 20%)); outline: none; }
.rc-pr__range input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border: 3px solid var(--rc-accent); border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(21, 103, 206, .3); cursor: pointer; }
.rc-pr__range input::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid var(--rc-accent); border-radius: 50%; background: #fff; cursor: pointer; }
.rc-pr__ticks { position: relative; height: 22px; margin-top: 10px; font-size: 12px; font-weight: 600; color: #9AA6BD; }
.rc-pr__ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rc-pr__ticks span:first-child { transform: none; }
.rc-pr__ticks span:last-child { transform: translateX(-100%); }

.rc-pr__steps { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 34px; }
.rc-pr .rc-pr__st { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.rc-pr .rc-pr__st:hover,
.rc-pr .rc-pr__st:focus { background: none; color: inherit; }
.rc-pr__st i { display: block; width: 100%; height: var(--h); border-radius: 10px 10px 4px 4px; background: #E6EEF9; transition: background .3s, transform .3s var(--rc-ease); }
.rc-pr__st b { font-size: 14px; font-weight: 800; color: var(--rc-ink-2); transition: color .3s; }
.rc-pr__st small { position: absolute; bottom: -24px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #9AA6BD; }
.rc-pr__st.is-on i { background: linear-gradient(180deg, #3E9BE9, #1E5FC4); transform: scaleY(1.04); transform-origin: bottom; }
.rc-pr__st.is-on b { color: var(--rc-accent); }
.rc-pr__st.is-on small { color: var(--rc-ink); }
.rc-pr__cap { margin: 38px 0 0; font-size: 13px; color: var(--rc-ink-2); }

.rc-pr__cr { position: relative; display: flex; flex-direction: column; padding: 40px 36px; background: linear-gradient(135deg, #3E9BE9, #1E5FC4 55%, #1B3E9C); color: #fff; overflow: hidden; }
.rc-pr__cr::before { content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 50%; }
.rc-pr__pkg { position: relative; align-self: flex-start; padding: 6px 18px; font-family: var(--rc-hand); font-size: 28px; font-weight: 600; }
.rc-pr__pkg .rc-pen { position: absolute; left: -10px; top: -8px; width: calc(100% + 20px); height: calc(100% + 16px); --rc-pen: #fff; --rc-pen-width: 2.2; }
.rc-pr__price { margin-top: 22px; }
.rc-pr__price b { display: block; font-size: 60px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.rc-pr__price span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.rc-pr__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14px; color: rgba(255, 255, 255, .85); }
.rc-pr__total b { font-size: 26px; font-weight: 800; color: #fff; }
.rc-pr__min { min-height: 18px; margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .8); }
.rc-pr__sp { flex: 1; min-height: 26px; }
.rc-pr__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; color: var(--rc-accent); transition: transform .2s var(--rc-ease); }
.rc-pr__cta:hover { transform: translateY(-2px); color: var(--rc-accent); }
.rc-pr__foot { margin: 14px 0 0; font-size: 12px; text-align: center; color: rgba(255, 255, 255, .7); }

/* ── Secties ── */
.rc-pr__sec { padding: 100px 0 0; }
.rc-pr__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 40px; }
.rc-pr__head .rc-pr__lead { margin: 0; }
.rc-pr__inc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rc-pr__inc > div { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(28, 36, 64, .04); font-size: 15px; font-weight: 600; }
.rc-pr__ck { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--rc-accent-soft); color: var(--rc-accent); }
.rc-pr__ck svg { width: 14px; height: 14px; }

/* ── Pakketten ── */
.rc-pr__pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rc-pr__pk--1 { grid-template-columns: 1fr; }
.rc-pr__pk--2 { grid-template-columns: repeat(2, 1fr); }
.rc-pr__pk--4 { grid-template-columns: repeat(4, 1fr); }
.rc-pr__pkc { position: relative; padding: 30px 28px; border: 2px solid transparent; border-radius: 26px; background: #fff; box-shadow: var(--rc-shadow); transition: border-color .3s, transform .3s var(--rc-ease); }
.rc-pr__pkc.is-on { border-color: var(--rc-accent); transform: translateY(-4px); }
.rc-pr__tag { position: absolute; top: -13px; left: 26px; padding: 4px 12px; border-radius: 999px; background: var(--rc-accent); font-size: 12px; font-weight: 700; color: #fff; opacity: 0; transition: opacity .3s; }
.rc-pr__pkc.is-on .rc-pr__tag { opacity: 1; }
.rc-pr__pkc h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; color: var(--rc-ink); }
.rc-pr__rng { margin: 4px 0 0; font-size: 14px; color: var(--rc-ink-2); }
.rc-pr__from { margin: 18px 0 0; font-size: 14px; color: var(--rc-ink-2); }
.rc-pr__from b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--rc-ink); }
.rc-pr__pmin { margin: 2px 0 0; font-size: 13px; color: var(--rc-ink-2); }
.rc-pr__pkc ul { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid #EEF2F8; list-style: none; }
.rc-pr__pkc li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.rc-pr__pkc li.is-plus { font-weight: 700; }
.rc-pr__pkc li .rc-svg { flex-shrink: 0; margin-top: 2px; font-size: 17px; color: var(--rc-accent); }
.rc-pr__note { margin: 22px 0 0; font-size: 14px; text-align: center; color: var(--rc-ink-2); }

/* ── Extra ── */
.rc-pr__ex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rc-pr__exc { position: relative; padding: 28px 26px; border-radius: 24px; background: #fff; box-shadow: var(--rc-shadow); }
.rc-pr__lbl { display: inline-block; margin-bottom: 16px; padding: 4px 12px; border-radius: 999px; background: #EEF2F8; font-size: 12px; font-weight: 700; color: var(--rc-ink-2); }
.rc-pr__exc .rc-ic { position: absolute; right: 24px; top: 24px; --rc-ic-size: 44px; }
.rc-pr__exc b { display: block; font-size: 18px; letter-spacing: -.01em; }
.rc-pr__exc p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--rc-ink-2); }
.rc-pr__exc.is-dark { background: var(--rc-pr-night); color: #fff; }
.rc-pr__exc.is-dark .rc-pr__lbl { background: var(--rc-accent); color: #fff; }
.rc-pr__exc.is-dark p { color: #B7C3DD; }
.rc-pr__exc.is-dark .rc-ic { background: rgba(255, 255, 255, .1); color: #9DBDF0; }
.rc-pr__end { height: 110px; }

/* ── Tablet ── */
@media (max-width: 1100px) {
	.rc-pr__wrap { padding: 0 20px; }
	.rc-pr__intro { padding: 84px 0 24px; }
	.rc-pr__h1 { font-size: 38px; }
	.rc-pr__intro .rc-pr__lead { font-size: 16px; }
	.rc-pr__calc { grid-template-columns: 1fr; }
	.rc-pr__cl { padding: 26px 20px; }
	.rc-pr__cr { padding: 28px 24px; }
	.rc-pr__sec { padding: 70px 0 0; }
	.rc-pr__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 26px; }
	.rc-pr__inc { grid-template-columns: 1fr 1fr; }
	.rc-pr__pk,
	.rc-pr__ex { grid-template-columns: 1fr; gap: 14px; }
	.rc-pr__pkc.is-on { transform: none; }
	.rc-pr__end { height: 80px; }
}

/* ── Mobiel ── */
@media (max-width: 600px) {
	.rc-pr__inc { grid-template-columns: 1fr; gap: 8px; }
	.rc-pr__count b { font-size: 46px; }
	.rc-pr__steps { height: 120px; gap: 4px; }
	.rc-pr__st b { font-size: 11.5px; }
	.rc-pr__st small { font-size: 10px; }
	.rc-pr__ticks span:nth-child(even) { display: none; }
	.rc-pr__price b { font-size: 50px; }
}