/* koffiegeld.nl, calculator (live example + drawer "Rit narekenen"). Themed via --kfg-* tokens; the defaults below are the landing's own light/blue palette. A page that needs another look overrides them on . */ :root{ --kfg-accent:#1d4ed8;--kfg-accent-d:#1e40af;--kfg-on-accent:#fff; --kfg-ink:#0f172a;--kfg-dim:#64748b;--kfg-line:#e2e8f0; --kfg-bg:#f8fafc;--kfg-card:#fff;--kfg-soft:#f8fafc;--kfg-input:#fff; --kfg-focus:rgba(29,78,216,.12);--kfg-scheme:light; --kfg-shadow:0 8px 30px rgba(15,23,42,.06);--kfg-overlay:rgba(15,23,42,.45);--kfg-drawer-shadow:-20px 0 60px rgba(15,23,42,.25); --kfg-notice-bg:#fff7ed;--kfg-notice-line:#fdba74;--kfg-notice-ink:#9a3412; --kfg-bad:#dc2626;--kfg-bad-bg:rgba(220,38,38,.06);--kfg-warn:#d97706; } /* live card (on the page and in the drawer) */ .kfg-live{background:var(--kfg-card);border:1px solid var(--kfg-line);border-radius:14px;margin-top:30px;overflow:hidden;box-shadow:var(--kfg-shadow);color:var(--kfg-ink)} .kfg-live .head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--kfg-line);flex-wrap:wrap} .kfg-live .head b{color:var(--kfg-ink)} .kfg-live .head span{font-size:13px;color:var(--kfg-dim)} .kfg-after{margin-top:16px;font-size:14.5px;color:var(--kfg-dim);max-width:680px} /* trip editor */ /* the two date-time fields keep at least 180px so "28-08-2026 14:30" never wraps; "Opbouw" absorbs the rest */ .kfg-trips{--trip-cols:36px minmax(180px,1fr) minmax(180px,1fr) minmax(0,1.3fr) 96px 30px;font-size:14.5px;color:var(--kfg-ink);padding:6px 20px 16px} .kfg-trips-head,.kfg-trips-row{display:grid;grid-template-columns:var(--trip-cols);gap:10px;align-items:start} .kfg-trips-head{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--kfg-dim);background:var(--kfg-soft);margin:0 -20px;padding:10px 20px;border-bottom:1px solid var(--kfg-line)} .kfg-trips-row{padding:10px 0;border-top:1px solid var(--kfg-line)} .kfg-trips-body>.kfg-trips-row:first-child{border-top:none} .kfg-trips-number{font-weight:600;color:var(--kfg-dim);font-size:13px;padding-top:10px} .kfg-trips-cell{display:flex;flex-direction:column;gap:3px;min-width:0} .kfg-trips-row[data-status=invalid] .kfg-dt[data-field=to] .kfg-dt-trigger{border-color:var(--kfg-warn)} .kfg-trips-weekday{font-size:11.5px;color:var(--kfg-dim);padding-left:2px;min-height:14px} .kfg-trips-message{font-size:11.5px;padding-left:2px} .kfg-trips-message:empty{display:none} .kfg-trips-message.hint{color:var(--kfg-warn)} .kfg-trips-message.err{color:var(--kfg-bad);font-weight:600} .kfg-trips-breakdown{font-size:13px;color:var(--kfg-dim);padding-top:9px;line-height:1.4;min-width:0} .kfg-trips-breakdown-text{color:var(--kfg-ink)} .kfg-trips-why[hidden]{display:none} .kfg-trips-why{display:block;background:none;border:none;padding:0;font:inherit;font-size:12.5px;color:var(--kfg-accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .kfg-trips-amount{text-align:right;font-variant-numeric:tabular-nums;padding-top:8px} .kfg-trips-amount b{display:block;font-size:15px;white-space:nowrap;color:var(--kfg-ink)} .kfg-trips-amount small{display:block;font-size:11px;color:var(--kfg-dim);line-height:1.3} .kfg-trips-row[data-status=multi_day] .kfg-trips-amount b{color:var(--kfg-accent)} .kfg-trips-actions{display:flex;justify-content:flex-end;padding-top:7px} .kfg-trips-actions button{width:26px;height:26px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--kfg-dim);cursor:pointer;font:inherit;font-size:13px;line-height:1;padding:0} .kfg-trips-actions button:hover{border-color:var(--kfg-line);color:var(--kfg-ink)} .kfg-trips-explanation{font-size:13px;color:var(--kfg-dim);padding:0 0 12px 56px;line-height:1.5} .kfg-trips-explanation ol{margin:0;padding-left:18px;display:grid;gap:3px} .kfg-trips-explanation li:last-child{color:var(--kfg-ink);font-weight:600} .kfg-trips-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--kfg-line);padding-top:12px;margin-top:2px} .kfg-ghost{font:inherit;font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;border:1px solid var(--kfg-line);background:var(--kfg-card);color:var(--kfg-ink);cursor:pointer} .kfg-ghost:hover{border-color:var(--kfg-accent);color:var(--kfg-accent)} .kfg-trips-total{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--kfg-dim)} .kfg-trips-total b{font-size:22px;color:var(--kfg-ink);font-variant-numeric:tabular-nums} /* "Mail mij deze berekening": appears once the visitor's own trips have amounts */ .kfg-mail{border-top:1px solid var(--kfg-line);margin-top:12px;padding-top:14px;display:grid;gap:10px} .kfg-mail[hidden]{display:none} .kfg-mail-hp{position:absolute;left:-9999px;height:0;width:0;opacity:0} .kfg-mail-lead{display:grid;gap:2px} .kfg-mail-lead b{font-size:14.5px;color:var(--kfg-ink)} .kfg-mail-lead span{font-size:13px;color:var(--kfg-dim)} .kfg-mail-row{display:flex;gap:8px;flex-wrap:wrap} .kfg-mail-address{flex:1 1 210px;min-width:0;font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--kfg-line);border-radius:9px;background:var(--kfg-input);color:var(--kfg-ink);outline:none;transition:.15s} .kfg-mail-address:focus{border-color:var(--kfg-accent);box-shadow:0 0 0 3px var(--kfg-focus)} .kfg-mail-send{font:inherit;font-size:13.5px;font-weight:700;padding:9px 14px;border-radius:9px;border:none;background:var(--kfg-accent);color:var(--kfg-on-accent);cursor:pointer} .kfg-mail-send:hover{background:var(--kfg-accent-d)} .kfg-mail-send:disabled{opacity:.6;cursor:default} .kfg-mail-msg{display:none;font-size:12.5px;color:var(--kfg-bad);font-weight:600} .kfg-mail-msg.show{display:block} .kfg-mail-done{font-size:14px;font-weight:600;color:var(--kfg-ink)} /* custom datetime picker (calendar + manual time), replaces : lets a picked date with no time yet show as a red "tijd", which the native control cannot express. */ .kfg-dt-trigger{font:inherit;font-size:14.5px;font-variant-numeric:tabular-nums;padding:8px 10px;border:1px solid var(--kfg-line);border-radius:8px;background:var(--kfg-input);color:var(--kfg-ink);outline:none;min-width:0;width:100%;text-align:left;cursor:pointer;transition:.12s} .kfg-dt-trigger:hover{border-color:var(--kfg-accent)} .kfg-dt-trigger:focus-visible{border-color:var(--kfg-accent);box-shadow:0 0 0 3px var(--kfg-focus)} .kfg-dt-trigger.is-empty{color:var(--kfg-dim)} .kfg-dt-missing{color:var(--kfg-bad);font-weight:600} /* Fixed, not absolute, and placed by positionDtPopover(): the card (.kfg-live) has overflow:hidden for its rounded corners, which clipped an absolute popover to the card and left a white slab over the row. z-index clears the mobile CTA bar (60) and stays under the drawer (90) and the consent banner (98). max-height keeps it usable on a short viewport, and makes the placement clamp exact. */ .kfg-dt-popover{position:fixed;z-index:65;width:270px;max-height:calc(100vh - 16px);overflow-y:auto;background:var(--kfg-card);border:1px solid var(--kfg-line);border-radius:12px;box-shadow:var(--kfg-shadow);padding:14px} .kfg-dt-popover[hidden]{display:none} .kfg-dt-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .kfg-dt-cal-head strong{font-size:13.5px;color:var(--kfg-ink)} .kfg-dt-nav{border:none;background:none;cursor:pointer;color:var(--kfg-accent);font:inherit;font-size:16px;padding:2px 8px;border-radius:6px} .kfg-dt-nav:hover{background:var(--kfg-soft)} .kfg-dt-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center} .kfg-dt-dow{font-size:10.5px;color:var(--kfg-dim);font-weight:700;padding-bottom:3px} .kfg-dt-day{border:none;background:none;padding:6px 0;border-radius:8px;cursor:pointer;font:inherit;font-size:12.5px;color:var(--kfg-ink)} .kfg-dt-day:hover{background:var(--kfg-soft)} .kfg-dt-day.is-other{color:var(--kfg-line)} .kfg-dt-day.is-today{font-weight:800;color:var(--kfg-accent)} .kfg-dt-day.is-selected{background:var(--kfg-accent);color:var(--kfg-on-accent)} .kfg-dt-time-row{margin-top:10px} .kfg-dt-time-row label{display:flex;flex-direction:column;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--kfg-dim);font-weight:700} .kfg-dt-time-input{font:inherit;font-size:15px;font-weight:400;text-transform:none;letter-spacing:normal;font-variant-numeric:tabular-nums;padding:7px 9px;border:1px solid var(--kfg-line);border-radius:8px;background:var(--kfg-input);color:var(--kfg-ink);outline:none} .kfg-dt-time-input:focus{border-color:var(--kfg-accent);box-shadow:0 0 0 3px var(--kfg-focus)} /* overlapping trips: the one departing later is flagged and left out of the total, the other one is marked lightly. Flagged rows stretch into the card's side gutters so the marker sits at the card edge and never touches the row number. */ .kfg-trips-row[data-conflict=culprit],.kfg-trips-row[data-conflict=partner]{position:relative;margin:0 -20px;padding-left:20px;padding-right:20px} .kfg-trips-row[data-conflict=culprit]::before,.kfg-trips-row[data-conflict=partner]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--kfg-warn)} .kfg-trips-row[data-conflict=culprit]::before{background:var(--kfg-bad)} .kfg-trips-row[data-conflict=culprit]{background:var(--kfg-bad-bg)} .kfg-trips-row[data-conflict=culprit] .kfg-dt[data-field=from] .kfg-dt-trigger{border-color:var(--kfg-bad)} .kfg-trips-row[data-conflict=partner] .kfg-dt[data-field=to] .kfg-dt-trigger{border-color:var(--kfg-warn)} .kfg-trips-row[data-conflict=culprit] .kfg-trips-amount small{color:var(--kfg-bad);font-weight:600} .kfg-trips-row[data-conflict=culprit] .kfg-trips-breakdown-text{color:var(--kfg-dim);text-decoration:line-through} .kfg-trips-overlap{grid-column:1/-1;font-size:12.5px;font-weight:600;color:var(--kfg-bad);padding:0 0 4px 46px} .kfg-trips-overlap[hidden]{display:none} .kfg-trips-count em{font-style:normal;color:var(--kfg-bad);font-weight:600} /* drawer "Rit narekenen" */ .kfg-fab{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:8px;font:inherit;font-size:15px;font-weight:700;padding:13px 18px;border-radius:99px;border:none;background:var(--kfg-accent);color:var(--kfg-on-accent);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.15s} .kfg-fab:hover{background:var(--kfg-accent-d);transform:translateY(-1px)} @media(max-width:760px){.kfg-fab{bottom:82px;right:14px;padding:11px 14px;font-size:14px}} .kfg-overlay{position:fixed;inset:0;background:var(--kfg-overlay);z-index:80} .kfg-overlay[hidden],.kfg-drawer[hidden]{display:none} .kfg-drawer{position:fixed;top:0;right:0;bottom:0;width:min(1080px,100%);z-index:90;background:var(--kfg-bg);color:var(--kfg-ink);box-shadow:var(--kfg-drawer-shadow);display:flex;flex-direction:column;animation:kfg-in .22s ease-out} @keyframes kfg-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}} .kfg-drawer header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--kfg-line);background:var(--kfg-card)} .kfg-drawer header b{display:block;font-size:18px;color:var(--kfg-ink)} .kfg-drawer header small{color:var(--kfg-dim);font-size:13px} .kfg-close{width:36px;height:36px;border-radius:8px;border:1px solid var(--kfg-line);background:var(--kfg-card);color:var(--kfg-ink);cursor:pointer;font-size:15px} .kfg-drawer-body{flex:1;overflow:auto;padding:20px 24px} .kfg-drawer-body .kfg-live{margin-top:0} .kfg-drawer footer{padding:14px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--kfg-line);background:var(--kfg-card)} .kfg-drawer footer .btn{display:block;width:100%;text-align:center;margin:0} @media(max-width:640px){.kfg-drawer{top:auto;height:90vh;width:100%;border-radius:18px 18px 0 0;animation-name:kfg-up}@keyframes kfg-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}} /* mobile */ @media(max-width:760px){ .kfg-trips{padding:6px 14px 14px} .kfg-trips-head{display:none} .kfg-trips-row{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);row-gap:8px} .kfg-trips-breakdown{grid-column:2/span 2;padding-top:0} .kfg-trips-amount{grid-column:2/span 2;text-align:left;display:flex;gap:8px;align-items:baseline;padding-top:0} .kfg-trips-actions{grid-column:1;grid-row:2;justify-content:flex-start;padding-top:0} .kfg-trips-explanation{padding-left:0} .kfg-trips-row[data-conflict=culprit],.kfg-trips-row[data-conflict=partner]{margin:0 -14px;padding-left:14px;padding-right:14px} .kfg-trips-overlap{padding-left:0} } /* server calculation in flight / failed */ .kfg-trips.is-busy .kfg-trips-amount b,.kfg-trips.is-busy .kfg-trips-total b{opacity:.55;transition:opacity .2s} .kfg-trips-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 4px;padding:10px 14px;border-radius:10px;background:var(--kfg-notice-bg);border:1px solid var(--kfg-notice-line);color:var(--kfg-notice-ink);font-size:13.5px} .kfg-trips-notice[hidden]{display:none}