/* ==========================================================
   Roomcility zonder en met
   Links losse briefjes, rechts een afspraak in Outlook met het
   taakvenster van Roomcility. Label, icoon, pen en handschrift
   komen uit rc-core.css. De animatie start met .is-play,
   gezet door rc-vergelijk.js als het blok in beeld komt.
   ========================================================== */

.rc-vz {
	--rc-vz-bg: #fff;
	--rc-vz-panel: var(--rc-bg-2);
	--rc-outlook: #0F6CBD;
	--rc-vz-pt: 120px;
	--rc-vz-pb: 130px;
	--rc-vz-pt-m: 72px;
	--rc-vz-pb-m: 90px;
	/* Tijdlijn van de animatie */
	--_strike: .9s;
	--_win: 1.8s;
	--_tick: 2.4s;
	--_done: 3.6s;

	position: relative;
	overflow: hidden;
	padding: var(--rc-vz-pt) 0 var(--rc-vz-pb);
	background: var(--rc-vz-bg);
	color: var(--rc-ink);
}
.rc-vz__wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* ── Kop ── */
.rc-vz__kop { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.rc-vz__hand { margin: 0 0 10px; font-size: 34px; color: var(--rc-ink-2); transform: rotate(-4deg); transform-origin: 50% 50%; }
.rc-vz__title {
	margin: 0;
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--rc-ink);
	text-wrap: balance;
}
.rc-vz__intro { margin: 20px auto 0; max-width: 54ch; font-size: 17px; line-height: 1.6; color: var(--rc-ink-2); }

/* ── Indeling ── */
.rc-vz__grid {
	display: grid;
	grid-template-columns: minmax(0, .86fr) 100px minmax(0, 1.14fr);
	row-gap: 18px;
	align-items: center;
}
.rc-vz__tag { justify-self: center; grid-row: 1; }
.rc-vz__tag--zonder { grid-column: 1; }
.rc-vz__tag--met { grid-column: 3; }
.rc-vz__zonder { grid-row: 2; grid-column: 1; align-self: start; }
.rc-vz__arrow { grid-row: 2; grid-column: 2; justify-self: center; width: 120px; height: 80px; --rc-pen-width: 2.6; --rc-pen-delay: 1.4s; --rc-pen-speed: .6s; }
.rc-vz__met { grid-row: 2; grid-column: 3; align-self: start; display: flex; flex-direction: column; }

/* ── Zonder, losse briefjes ── */
.rc-vz__zonder {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 14px;
	padding: 44px 18px 40px;
	border-radius: 28px;
	background: var(--rc-vz-panel);
	border: 1px dashed #D5DDEA;
}
.rc-vz__note {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(28, 36, 64, .09);
	padding: 14px 16px 15px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--rc-ink-2);
	opacity: 0;
	transform: translateY(calc(var(--y) + 12px)) rotate(var(--r));
	transition: opacity .4s, transform .6s var(--rc-ease), background .4s, color .4s, box-shadow .4s;
	transition-delay: calc(var(--i) * .1s);
}
.rc-vz__note b { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: 13.5px; color: var(--rc-ink); transition: color .4s; }
.rc-vz__note .rc-ic { --rc-ic-size: 28px; background: var(--rc-bg); color: var(--rc-ink-2); }
.rc-vz__strike { position: absolute; left: -8px; top: 46%; width: calc(100% + 16px); height: 22px; --rc-pen-width: 2.6; --rc-pen-speed: .4s; --rc-pen-delay: var(--_strike); }
.rc-vz.is-play .rc-vz__note { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)); }
.rc-vz.is-struck .rc-vz__note { background: #FAFBFD; box-shadow: 0 4px 12px rgba(28, 36, 64, .05); color: var(--rc-ink-3); transition-delay: 0s; }
.rc-vz.is-struck .rc-vz__note b { color: var(--rc-ink-3); }

.rc-vz__count {
	grid-column: 1 / -1;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -58px;
	margin: 0;
	text-align: center;
	font-size: 28px;
	color: var(--rc-ink-2);
	opacity: 0;
	transition: opacity .5s 1.6s;
}
.rc-vz.is-play .rc-vz__count { opacity: 1; }

/* ── Met, afspraak in Outlook ── */
.rc-vz__win {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 30px 70px rgba(27, 62, 156, .16), 0 2px 6px rgba(28, 36, 64, .06);
	overflow: hidden;
	font-family: "Segoe UI", var(--rc-font);
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transition: opacity .6s var(--_win), transform .8s var(--rc-ease) var(--_win);
}
.rc-vz.is-play .rc-vz__win { opacity: 1; transform: none; }

.rc-vz__bar { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; background: var(--rc-outlook); color: #fff; font-size: 13px; }
.rc-vz__bar .rc-svg { font-size: 17px; }
.rc-vz__bar b { font-weight: 600; }
.rc-vz__bar span { opacity: .8; }
.rc-vz__bar i { width: 10px; height: 10px; margin-left: 6px; border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 2px; }
.rc-vz__bar i:first-of-type { margin-left: auto; height: 6px; border-width: 0 0 1.5px; border-radius: 0; }

.rc-vz__ribbon { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid #E1E5EB; font-size: 12.5px; color: #424242; white-space: nowrap; overflow: hidden; }
.rc-vz__ribbon span { padding: 6px 10px; border-radius: 6px; }
.rc-vz__ribbon .rc-vz__send { margin-right: 6px; background: var(--rc-outlook); color: #fff; font-weight: 600; }
.rc-vz__ribbon .rc-vz__tab { display: flex; align-items: center; gap: 6px; background: var(--rc-accent-soft); color: var(--rc-accent-deep); font-weight: 600; box-shadow: inset 0 -2px 0 var(--rc-accent); }
.rc-vz__tab img { width: 16px; height: auto; }

.rc-vz__body { display: grid; grid-template-columns: minmax(0, 1fr) 214px; min-height: 330px; }
.rc-vz__form { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; font-size: 13px; color: #242424; }
.rc-vz__subject { padding-bottom: 10px; border-bottom: 1px solid #E1E5EB; font-size: 19px; font-weight: 600; }
.rc-vz__row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid #F0F2F5; }
.rc-vz__row > .rc-svg { margin-right: 6px; font-size: 16px; color: #616161; }
.rc-vz__row span { padding: 4px 9px; border-radius: 4px; background: #F5F5F5; }
.rc-vz__row span.is-extern { background: #EAF2FB; }
.rc-vz__row span.is-room { background: #DFF2E1; color: #0E5C2F; }
.rc-vz__row em { padding: 0 2px; font-style: normal; color: #616161; }
.rc-vz__lines { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.rc-vz__lines i { height: 7px; border-radius: 4px; background: #EEF0F3; }
.rc-vz__lines i:last-child { width: 62%; }

/* Taakvenster van Roomcility */
.rc-vz__pane { padding: 14px 14px 16px; border-left: 1px solid #E1E5EB; background: #FAFBFD; font-family: var(--rc-font); }
.rc-vz__pane-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--rc-ink); }
.rc-vz__pane-h img { width: 22px; height: auto; }
.rc-vz__pane p { margin: 6px 0 12px; font-size: 12px; color: var(--rc-ink-2); }
.rc-vz__pane ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rc-vz__pane li { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(28, 36, 64, .06); font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--rc-ink); }
.rc-vz__pane .rc-ic { --rc-ic-size: 26px; }
.rc-vz__tick { flex-shrink: 0; width: 18px; height: 16px; margin-left: auto; --rc-pen-width: 2.6; --rc-pen-speed: .35s; --rc-pen-delay: calc(var(--_tick) + var(--i) * .25s); }

.rc-vz__done { position: relative; align-self: center; margin: 34px 0 0; font-size: 30px; opacity: 0; transition: opacity .5s var(--_done); }
.rc-vz.is-play .rc-vz__done { opacity: 1; }
.rc-vz__done > .rc-vz__loop { position: absolute; left: -26px; top: -16px; bottom: auto; width: calc(100% + 52px); height: calc(100% + 30px); --rc-pen-width: 2.2; --rc-pen-delay: calc(var(--_done) + .1s); --rc-pen-speed: 1s; }

/* ── Tablet en mobiel ── */
@media (max-width: 1100px) {
	.rc-vz { padding: var(--rc-vz-pt-m) 0 var(--rc-vz-pb-m); }
	.rc-vz__wrap { padding: 0 20px; }
	.rc-vz__kop { margin-bottom: 40px; }
	.rc-vz__hand { font-size: 28px; }
	.rc-vz__title { font-size: 31px; }
	.rc-vz__intro { font-size: 16px; }
	.rc-vz__grid { grid-template-columns: 1fr; row-gap: 14px; max-width: 680px; margin: 0 auto; }
	.rc-vz__tag,
	.rc-vz__zonder,
	.rc-vz__arrow,
	.rc-vz__met { grid-row: auto; grid-column: auto; }
	.rc-vz__zonder { gap: 10px 8px; padding: 30px 12px 22px; }
	.rc-vz__note { padding: 11px 11px 12px; font-size: 12px; --y: 0px !important; }
	.rc-vz__note b { gap: 7px; font-size: 12.5px; }
	.rc-vz__note .rc-ic { --rc-ic-size: 24px; }
	.rc-vz__count { position: static; margin-top: 8px; font-size: 24px; }
	.rc-vz__arrow { width: 80px; height: 90px; margin: 6px 0; transform: rotate(90deg); }
	.rc-vz__body { grid-template-columns: 1fr; }
	.rc-vz__pane { border-left: 0; border-top: 1px solid #E1E5EB; }
	.rc-vz__ribbon span:not(.rc-vz__send):not(.rc-vz__tab):not(:nth-child(2)) { display: none; }
	.rc-vz__pane li { font-size: 13.5px; }
	.rc-vz__done { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.rc-vz__note,
	.rc-vz__count,
	.rc-vz__win,
	.rc-vz__done { opacity: 1; transform: translateY(var(--y, 0)) rotate(var(--r, 0)); transition: none; }
	.rc-vz__win { transform: none; }
}