/* Kaige FlexDesk front-end. Kleuren via --kfd-* zodat het thema ze kan overnemen. */
.kfd-app, .kfd-prices, .kfd-spaces, .kfd-contract, .kfd-account {
	--kfd-ink: var(--fd-ink, #161815);
	--kfd-muted: var(--fd-muted, #5d625a);
	--kfd-bg: var(--fd-paper, #f6f3ee);
	--kfd-card: var(--fd-card, #ffffff);
	--kfd-line: var(--fd-line, #e3ddd2);
	--kfd-accent: var(--fd-moss, #2f5d37);
	--kfd-accent-ink: #ffffff;
	--kfd-soft: var(--fd-moss-soft, #e6efe4);
	--kfd-wood: var(--fd-wood, #c49a6c);
	--kfd-warn: #b4441f;
	--kfd-radius: 14px;
	color: var(--kfd-ink);
}

.kfd-app { position: relative; }
.kfd-loading { padding: 3rem 0; color: var(--kfd-muted); }
.kfd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-width: 0; gap: 2rem; align-items: start; }
.kfd-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; min-width: 0; }
.kfd-main > *, .kfd-step { min-width: 0; }

.kfd-step__title { display: flex; align-items: center; gap: .65rem; margin: 0 0 .6rem; font-size: 1.15rem; line-height: 1.3; }
.kfd-step__n { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--kfd-accent); color: var(--kfd-accent-ink); font-size: .85rem; font-weight: 700; flex: none; }
.kfd-hint { margin: 0 0 .9rem; color: var(--kfd-muted); font-size: .95rem; }

.kfd-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--kfd-card); border: 1px solid var(--kfd-line); justify-self: start; }
.kfd-tab { border: 0; background: transparent; padding: .55rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 600; color: var(--kfd-muted); cursor: pointer; }
.kfd-tab.is-on { background: var(--kfd-accent); color: var(--kfd-accent-ink); }

.kfd-dates { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .1rem .75rem; scroll-snap-type: x proximity; }
.kfd-date { flex: 0 0 4.6rem; display: grid; justify-items: center; gap: .1rem; padding: .65rem .3rem; border: 1px solid var(--kfd-line); border-radius: 12px; background: var(--kfd-card); color: var(--kfd-ink); font: inherit; cursor: pointer; scroll-snap-align: start; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kfd-date:hover { border-color: var(--kfd-accent); transform: translateY(-1px); }
.kfd-date.is-on { background: var(--kfd-accent); border-color: var(--kfd-accent); color: var(--kfd-accent-ink); box-shadow: 0 6px 18px rgba(47, 93, 55, .25); }
.kfd-date__dow, .kfd-date__mon { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.kfd-date__day { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.kfd-date--more { border-style: dashed; }

.kfd-plan { container-type: inline-size; position: relative; border-radius: var(--kfd-radius); overflow: hidden; background: #efe9df; border: 1px solid var(--kfd-line); }
.kfd-plan__img { display: block; width: 100%; height: auto; }
.kfd-pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .4rem; padding: .3rem .65rem .3rem .35rem; border-radius: 999px; border: 2px solid #fff; background: rgba(22, 24, 21, .78); color: #fff; font: inherit; font-size: .78rem; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .15s, background .15s; }
.kfd-pin__dot { width: .8rem; height: .8rem; border-radius: 50%; background: #9aa096; flex: none; }
.kfd-pin.is-free .kfd-pin__dot { background: #6fd27e; box-shadow: 0 0 0 4px rgba(111, 210, 126, .3); }
.kfd-pin.is-free:hover { transform: translate(-50%, -50%) scale(1.06); }
.kfd-pin.is-on { background: var(--kfd-accent); }
.kfd-pin.is-taken { opacity: .7; cursor: not-allowed; }

.kfd-any { justify-self: start; margin-top: .85rem; padding: .55rem 1rem; border: 1px dashed var(--kfd-accent); border-radius: 999px; background: transparent; color: var(--kfd-accent); font: inherit; font-weight: 600; cursor: pointer; }
.kfd-any.is-on { background: var(--kfd-soft); border-style: solid; }

.kfd-desks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin-top: .85rem; }
.kfd-desk { display: grid; gap: .3rem; text-align: left; padding: .9rem 1rem; border: 1px solid var(--kfd-line); border-radius: 12px; background: var(--kfd-card); color: var(--kfd-ink); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kfd-desk:hover:not(:disabled) { border-color: var(--kfd-accent); }
.kfd-desk.is-on { border-color: var(--kfd-accent); box-shadow: inset 0 0 0 1px var(--kfd-accent), 0 6px 18px rgba(47, 93, 55, .14); }
.kfd-desk.is-taken { opacity: .55; cursor: not-allowed; }
.kfd-desk__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem .5rem; }
.kfd-desk__top strong { white-space: nowrap; }
.kfd-desk small { color: var(--kfd-muted); }
.kfd-desk__tags { font-size: .78rem; color: var(--kfd-muted); }
.kfd-badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: #eceae5; color: var(--kfd-muted); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.kfd-badge.is-free { background: var(--kfd-soft); color: var(--kfd-accent); }

.kfd-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.kfd-hour { display: grid; padding: .6rem .3rem; border: 1px solid var(--kfd-line); border-radius: 10px; background: var(--kfd-card); color: var(--kfd-ink); font: inherit; cursor: pointer; }
.kfd-hour small { color: var(--kfd-muted); font-size: .75rem; }
.kfd-hour.is-on { background: var(--kfd-accent); border-color: var(--kfd-accent); color: #fff; }
.kfd-hour.is-on small { color: rgba(255, 255, 255, .8); }
.kfd-hour.is-taken { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.kfd-summary { position: sticky; top: 6rem; padding: 1.4rem; border-radius: var(--kfd-radius); background: var(--kfd-card); border: 1px solid var(--kfd-line); box-shadow: 0 18px 40px rgba(22, 24, 21, .08); }
.kfd-summary h3 { margin: 0 0 1rem; font-size: 1.2rem; }
.kfd-rows { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0 0 1rem; font-size: .95rem; }
.kfd-rows dt { color: var(--kfd-muted); }
.kfd-rows dd { margin: 0; font-weight: 600; text-align: right; }
.kfd-total { display: flex; justify-content: space-between; margin: 0; padding-top: .8rem; border-top: 1px solid var(--kfd-line); font-size: 1.05rem; }
.kfd-total b { font-size: 1.35rem; }
.kfd-total--incl { padding-top: .2rem; border: 0; color: var(--kfd-muted); font-size: .9rem; margin-bottom: 1rem; }
.kfd-error { margin: .75rem 0; padding: .7rem .9rem; border-radius: 10px; background: #fbeae4; color: var(--kfd-warn); font-size: .92rem; }
.kfd-fine { margin: .9rem 0 0; padding-left: 1.1rem; color: var(--kfd-muted); font-size: .82rem; line-height: 1.5; }
.kfd-fine li + li { margin-top: .3rem; }
p.kfd-fine { padding-left: 0; }
.kfd-done__title { font-weight: 700; color: var(--kfd-accent); margin: 0 0 .5rem; }
.kfd-done ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.kfd-errors { color: var(--kfd-warn); }

.kfd-btn { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; padding: .85rem 1.4rem; border: 2px solid var(--kfd-accent); border-radius: 999px; background: var(--kfd-accent); color: var(--kfd-accent-ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.kfd-btn:hover { background: #244a2b; border-color: #244a2b; color: #fff; transform: translateY(-1px); }
.kfd-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.kfd-btn--ghost { background: transparent; color: var(--kfd-accent); }
.kfd-btn--ghost:hover { background: var(--kfd-soft); color: var(--kfd-accent); }
.kfd-btn--block { width: 100%; }
.kfd-link { margin-top: .75rem; padding: 0; border: 0; background: none; color: var(--kfd-accent); font: inherit; text-decoration: underline; cursor: pointer; }

.kfd-app :focus-visible, .kfd-prices :focus-visible, .kfd-contract :focus-visible { outline: 3px solid var(--kfd-wood); outline-offset: 2px; }

/* Op een smalle plattegrond alleen stippen; de naam verschijnt bij aanwijzen of kiezen. */
@container (max-width: 820px) {
	.kfd-pin { padding: .3rem; }
	.kfd-pin__label { display: none; }
	.kfd-pin:hover, .kfd-pin:focus-visible, .kfd-pin.is-on { z-index: 2; padding: .3rem .65rem .3rem .35rem; }
	.kfd-pin:hover .kfd-pin__label, .kfd-pin:focus-visible .kfd-pin__label, .kfd-pin.is-on .kfd-pin__label { display: inline; }
}

/* Prijzen */
.kfd-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: stretch; }
.kfd-price { display: flex; flex-direction: column; padding: 2rem; border-radius: 20px; background: var(--kfd-card); border: 1px solid var(--kfd-line); }
.kfd-price.is-featured { background: var(--kfd-ink); color: #f3efe7; border-color: var(--kfd-ink); }
.kfd-price__kicker { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kfd-wood); }
.kfd-price h3 { margin: .3rem 0 .6rem; font-size: 1.5rem; color: inherit; }
.kfd-price__amount { margin: 0; font-size: 2.6rem; font-weight: 800; line-height: 1.1; }
.kfd-price__amount small { font-size: .9rem; font-weight: 500; opacity: .75; }
.kfd-price__sub { margin: .4rem 0 1.2rem; opacity: .75; font-size: .92rem; }
.kfd-price ul { margin: 0 0 1.6rem; padding: 0; list-style: none; display: grid; gap: .55rem; }
.kfd-price li { position: relative; padding-left: 1.6rem; }
.kfd-price li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: .55rem; border-left: 2px solid var(--kfd-wood); border-bottom: 2px solid var(--kfd-wood); transform: rotate(-45deg); }
.kfd-price .kfd-btn { margin-top: auto; }
.kfd-price.is-featured .kfd-btn { background: #f3efe7; border-color: #f3efe7; color: var(--kfd-ink); }
.kfd-price.is-featured .kfd-btn:hover { background: #fff; border-color: #fff; }
.kfd-price__avail { margin: .8rem 0 0; font-size: .85rem; text-align: center; opacity: .8; }

/* Plekken */
.kfd-spaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.kfd-space { border-radius: var(--kfd-radius); overflow: hidden; background: var(--kfd-card); border: 1px solid var(--kfd-line); }
.kfd-space img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kfd-space__body { padding: 1.1rem 1.2rem 1.3rem; }
.kfd-space h3 { margin: .2rem 0 .4rem; }
.kfd-space p { margin: 0; color: var(--kfd-muted); }
.kfd-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.kfd-tags li { padding: .2rem .6rem; border-radius: 999px; background: var(--kfd-soft); color: var(--kfd-accent); font-size: .78rem; font-weight: 600; }

/* Mijn account */
.kfd-contract { margin: 0 0 1.25rem; padding: 1.4rem; border: 1px solid var(--kfd-line); border-radius: var(--kfd-radius); background: var(--kfd-card); }
.kfd-contract header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.kfd-contract h3 { margin: 0; }
.kfd-contract .kfd-rows dd { text-align: left; }
.kfd-contract__pay { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .9rem 1rem; border-radius: 10px; background: #fff6e6; }
.kfd-contract__cancel { margin: 0; }
.kfd-account__note { color: var(--kfd-muted); font-size: .92rem; }

@media (max-width: 960px) {
	.kfd-layout { grid-template-columns: minmax(0, 1fr); }
	.kfd-summary { position: static; }
}
@media (max-width: 600px) {
	.kfd-price { padding: 1.5rem; }
	.kfd-price__amount { font-size: 2.2rem; }
	.kfd-rows dd { text-align: left; }
	.kfd-rows { grid-template-columns: 1fr; gap: .1rem; }
	.kfd-rows dt { margin-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.kfd-app *, .kfd-prices * { transition: none; }
}