/* "Past hij op mijn auto?" ([roovtop_past_hij]). Uses the theme tokens (tokens.css), with fallbacks. */
.rv-fit{--f-ink:var(--ink,#1D1A15);--f-cream:var(--cream,#F6EFDD);--f-sand:var(--sand,#E8DCC2);--f-stone:var(--stone,#665C50);--f-line:var(--line,rgba(29,26,21,.15));
  display:flex;flex-direction:column;gap:14px;margin:10px 0 40px;color:var(--f-ink)}
.rv-fit [hidden]{display:none!important}
.rv-fit h2{font-family:var(--serif,Georgia,serif);font-weight:var(--serif-w,300);font-size:clamp(24px,3vw,30px);line-height:1.12;letter-spacing:var(--track-serif,0);margin:0 0 16px}
.rv-fit-step{scroll-margin-top:110px;position:relative;background:var(--f-sand);padding:28px 28px 30px;margin:0!important}
.rv-fit-num{font-family:var(--mono,monospace);font-size:13px;text-transform:uppercase;color:var(--f-stone);margin:0 0 6px!important}
.rv-fit-small{font-size:13.5px;line-height:1.5;color:var(--f-stone);margin:10px 0 0!important}
.rv-fit-small a{color:inherit}
.rv-fit-error{margin:12px 0 0!important;font-size:14px;color:#8a1c1c}
.rv-fit-note{background:var(--f-cream);padding:12px 14px;font-size:14px;line-height:1.45;margin:0 0 14px!important}
.rv-fit-note a{color:inherit}

/* licence plate: a Dutch plate, yellow with the blue EU strip */
.rv-fit-plate{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.rv-plate{display:flex;align-items:stretch;height:58px;border:2px solid var(--f-ink);border-radius:6px;background:#F7C900;overflow:hidden;flex:0 1 300px;min-width:0}
.rv-plate-nl{display:flex;align-items:flex-end;justify-content:center;width:34px;padding-bottom:6px;background:#003399;color:#fff;font:600 13px/1 var(--sans,sans-serif)}
.rv-plate input{flex:1;min-width:0;border:0;background:transparent;font:600 30px/1 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#111;padding:0 10px}
.rv-plate input::placeholder{color:rgba(17,17,17,.3)}
.rv-plate input:focus{outline:none}
.rv-plate:focus-within{box-shadow:0 0 0 3px var(--f-cream),0 0 0 5px var(--f-ink)}
.rv-fit-go,.rv-fit-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--accent-btn,#FFFF00);color:var(--on-accent,#1D1A15);border:1px solid var(--f-ink);border-radius:9999px;font:400 var(--btn,13px)/1 var(--mono,monospace);text-transform:uppercase;padding:var(--btn-pad,12px 20px);min-height:var(--tap,44px);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.rv-fit-go:hover,.rv-fit-cta:hover{background:var(--f-ink);color:var(--accent,#FFFF00)}
.rv-fit-cta.is-ghost{background:transparent}
.rv-fit-cta.is-ghost:hover{background:var(--f-ink);color:var(--f-cream)}
.rv-fit-plate.is-busy .rv-fit-go{opacity:.55;pointer-events:none}
.rv-fit-plate.is-busy .rv-fit-go::after{content:"…"}

.rv-fit-car{background:var(--f-cream);padding:18px 20px;margin-top:4px}
.rv-fit-carname{font-family:var(--serif,Georgia,serif);font-weight:var(--serif-w,300);font-size:26px;line-height:1.15;margin:0!important}
.rv-fit-load{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--f-line);margin:14px 0 0!important;padding-top:12px}
.rv-fit-load span{font-size:14px}
.rv-fit-load b{font:400 18px/1 var(--mono,monospace)}
.rv-fit-link{background:none;border:0;padding:0;margin-top:12px;text-align:left;font:400 13px/1.6 var(--mono,monospace);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;color:var(--f-ink);cursor:pointer}

/* roof types and yes/no choices */
.rv-fit-roofs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rv-fit-roof,.rv-fit-choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--f-cream);border:1px solid transparent;padding:14px 12px;cursor:pointer;color:var(--f-ink);font:inherit;transition:border-color .15s,background .15s}
/* roof-type drawings (fit-check.js, ICONS): the car light, the roof edge and the detail that matters in ink */
.rv-fit-roof svg{width:100%;height:auto;margin:0 0 10px}
.rv-fit-roof svg .r-shadow{fill:var(--f-sand);opacity:.75}
.rv-fit-roof svg .r-glass{fill:var(--f-sand);opacity:.7}
.rv-fit-roof svg .r-roof{fill:#FCF9F1}
.rv-fit-roof svg .r-body{fill:none;stroke:var(--f-ink);stroke-width:.95;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity .15s}
.rv-fit-roof svg .r-edge{fill:none;stroke:var(--f-ink);stroke-width:1.15;stroke-linejoin:round}
.rv-fit-roof svg .fd{fill:none;stroke:var(--f-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rv-fit-roof svg .fd-flat{stroke-width:3.2}
.rv-fit-roof svg .fd-thin{stroke-width:1.1}
.rv-fit-roof svg .fp{fill:var(--f-ink);stroke:var(--f-ink);stroke-width:.6;stroke-linejoin:round}
.rv-fit-roof svg .fp-top{fill:#4a443b}
.rv-fit-roof:hover svg .r-body,.rv-fit-roof[aria-checked="true"] svg .r-body{opacity:.7}
.rv-fit-roof b,.rv-fit-choice b{font-weight:500;font-size:15px;line-height:1.2}
.rv-fit-roof small,.rv-fit-choice small{font-size:12.5px;line-height:1.35;color:var(--f-stone)}
.rv-fit-roof:hover,.rv-fit-choice:hover{border-color:var(--f-line)}
.rv-fit-roof[aria-checked="true"],.rv-fit-choice[aria-checked="true"]{border-color:var(--f-ink);box-shadow:inset 0 0 0 1px var(--f-ink)}
.rv-fit-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rv-fit-own{margin-top:16px}
.rv-fit-own label,.rv-fit-loadin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:15px}
.rv-fit-kg{display:inline-flex;align-items:center;gap:8px;font:400 15px/1 var(--mono,monospace)}
.rv-fit-kg input{width:90px;height:44px;border:1px solid var(--f-ink);background:var(--f-cream);font:400 18px/1 var(--mono,monospace);text-align:right;padding:0 10px}
.rv-fit-step[data-step="bars"] .rv-fit-note{margin:16px 0 0!important}
/* the answer about our roof bars (Tom 2026-11-10): a soft green box with a tick when a set fits, a soft red one with a cross
   when none does; the same two colours as the verdict in the booking form (booking-form.css .rv-fit-verdict) */
.rv-fit-note.is-ok,.rv-fit-note.is-no{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;padding:14px 16px;border:1px solid;scroll-margin-top:120px;animation:rv-fit-note-in .3s ease-out}
.rv-fit-note.is-ok{background:#E6EEDA;border-color:rgba(46,125,50,.45)}
.rv-fit-note.is-no{background:#F6DFD6;border-color:rgba(168,55,43,.45)}
.rv-fit-note-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.rv-fit-note.is-ok .rv-fit-note-icon{background:#2E7D32}
.rv-fit-note.is-no .rv-fit-note-icon{background:#A8372B}
.rv-fit-note-icon svg{width:16px;height:16px}
.rv-fit-note-txt strong{display:block;font-weight:500;font-size:15px;line-height:1.35;margin:2px 0 3px}
@keyframes rv-fit-note-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rv-fit-note.is-ok,.rv-fit-note.is-no{animation:none}}

/* result */
.rv-fit-result{background:transparent;padding:18px 0 0}
.rv-fit-tents{display:flex;flex-direction:column;gap:10px}
.rv-fit-tent{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center;background:var(--f-sand);padding:12px}
.rv-fit-img{display:block;aspect-ratio:1;background:var(--f-sand);overflow:hidden}   /* the card photos are cut-outs; on sand, like the tent overview */
.rv-fit-img img{width:100%;height:100%;object-fit:contain;display:block}
.rv-fit-txt{min-width:0}
.rv-fit-txt h3{font-family:var(--sans,sans-serif);font-size:20px;font-weight:500;margin:2px 0 6px!important}
.rv-fit-txt h3 a{text-decoration:none!important;color:inherit}
.rv-fit-txt p{margin:0 0 12px!important;font-size:14px;line-height:1.45}
.rv-fit-badge{display:inline-block;font:400 12px/1 var(--mono,monospace)!important;text-transform:uppercase;padding:5px 9px;border-radius:9999px;margin:0 0 4px!important;border:1px solid var(--f-ink)}
.rv-fit-tent.is-ok .rv-fit-badge{background:var(--f-ink);color:var(--f-cream)}
.rv-fit-tent.is-no{opacity:.72}
.rv-fit-tent.is-no .rv-fit-badge{border-style:dashed}
.rv-fit-explain{font-size:13px;line-height:1.5;color:var(--f-stone);margin:16px 0 0!important}

@media(max-width:720px){
  .rv-fit-step{padding:22px 18px 24px}
  .rv-fit-roofs{grid-template-columns:1fr 1fr}
  .rv-fit-roofs .rv-fit-roof:last-child{grid-column:1/-1}
  .rv-fit-roofs .rv-fit-roof:last-child svg{width:calc(50% - 4px)}   /* the fifth card spans the row; its drawing keeps the size of the others */
  .rv-fit-choices{grid-template-columns:1fr}
  /* phone: photo and name side by side, the sum and a full-width button under them */
  .rv-fit-tent{grid-template-columns:76px 1fr;column-gap:14px;row-gap:4px;align-items:start;padding:12px 12px 14px}
  .rv-fit-txt{display:contents}
  .rv-fit-img{grid-row:1/span 2}
  .rv-fit-badge{grid-column:2;align-self:end;justify-self:start}
  .rv-fit-txt h3{grid-column:2;align-self:start;font-size:18px;margin:4px 0 0!important}
  .rv-fit-txt p:not(.rv-fit-badge){grid-column:1/-1;margin:10px 0 4px!important}
  .rv-fit-tent .rv-fit-cta{grid-column:1/-1;width:100%;white-space:normal;text-align:center;line-height:1.25}
  .rv-fit-tents>.rv-fit-cta{width:100%}
  .rv-plate{flex-basis:100%}
  .rv-fit-go{flex:1}
}

/* no Dutch plate: make, model, year and body by hand */
.rv-fit-manual{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.rv-fit-manual label{display:flex;flex-direction:column;gap:6px;font:400 12px/1 var(--mono,monospace);text-transform:uppercase;color:var(--f-stone)}
.rv-fit-manual select{height:48px;border:1px solid var(--f-ink);border-radius:0;background:var(--f-cream);font:400 15px/1.2 var(--sans,sans-serif);color:var(--f-ink);padding:0 36px 0 12px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 fill=%27none%27 stroke=%27%231D1A15%27 stroke-width=%271.4%27%3E%3Cpath d=%27M1 1.5l5 5 5-5%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.rv-fit-manual select:disabled{opacity:.5}
.rv-fit-manual-go{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:4px}
.rv-fit-manual-go .rv-fit-link{margin:0}
.rv-fit-manual.is-busy .rv-fit-go{opacity:.55;pointer-events:none}
.rv-fit-switch{margin:14px 0 0!important}
.rv-fit-switch .rv-fit-link{margin:0}
.rv-fit-tents>.rv-fit-cta{align-self:flex-start;margin-top:6px}
.rv-fit-explain a{color:inherit}
@media(max-width:720px){
  .rv-fit-manual{grid-template-columns:1fr}
  .rv-fit-manual-go .rv-fit-go{flex:1 1 100%}
}
/* inside the theme dialog (?embed=1): no page around it, so a little less air */
.rv-fit[data-mode="embed"]{margin:0}
.rv-fit[data-mode="embed"] .rv-fit-step{scroll-margin-top:12px}
.rv-fit[data-mode="embed"] .rv-fit-note{scroll-margin-top:16px}

/* the car card: what we found and what we already know about it (refined 2026-10-01) */
.rv-fit-carname{font-size:28px!important}
.rv-fit-bits{margin-top:4px!important}
.rv-fit-spec{margin:14px 0 0;border-top:1px solid var(--f-line)}
.rv-fit-spec div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--f-line)}
.rv-fit-spec dt{font:400 12px/1.3 var(--mono,monospace);text-transform:uppercase;color:var(--f-stone)}
.rv-fit-spec dd{margin:0;font-size:15px;text-align:right}
.rv-fit-spec dd .rv-fit-link{margin:0 0 0 10px;font-size:12px}
.rv-fit-car .rv-fit-small+.rv-fit-link,.rv-fit-spec+.rv-fit-link{margin-top:14px}

/* the answer first: a dark panel like the booking bar, a yellow tick when a tent fits */
.rv-fit-verdict{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;background:var(--ink-2,#2A2620);color:var(--f-cream);padding:22px 24px;margin:0 0 12px}
.rv-fit-verdict-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(246,239,221,.5)}
.rv-fit-verdict-icon svg{width:24px;height:24px}
.rv-fit-verdict.is-ok .rv-fit-verdict-icon{background:var(--accent-btn,#FFFF00);color:var(--f-ink);border-color:var(--accent-btn,#FFFF00)}
.rv-fit-verdict-head{font-family:var(--serif,Georgia,serif);font-weight:var(--serif-w,300);font-size:clamp(22px,2.6vw,27px);line-height:1.15;margin:2px 0 8px!important}
.rv-fit-verdict-sub{font-size:14.5px;line-height:1.5;margin:0!important;color:rgba(246,239,221,.82)}

/* how much of what the roof may carry a tent takes */
.rv-fit-meter{margin:10px 0 8px}
.rv-fit-meter-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font:400 12px/1.2 var(--mono,monospace);text-transform:uppercase;color:var(--f-stone)}
.rv-fit-meter-top b{font-weight:400;color:var(--f-ink)}
.rv-fit-meter-bar{height:6px;border-radius:3px;background:var(--f-cream);overflow:hidden}
.rv-fit-meter-bar i{display:block;height:100%;border-radius:3px;background:var(--f-ink);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.rv-fit-meter.is-over .rv-fit-meter-bar i{background:repeating-linear-gradient(-45deg,var(--f-ink) 0 3px,transparent 3px 6px)}
.rv-fit-line{font-size:14px;color:var(--f-stone)}
.rv-fit-tent .rv-fit-badge.is-soon{background:transparent;color:var(--f-ink)}   /* fits, but not for rent yet */
.rv-fit-disclaimer{font-size:13px;line-height:1.5;color:var(--f-stone);margin:14px 0 0!important}
.rv-fit-disclaimer a{color:inherit}
.rv-fit-how{margin-top:10px}
.rv-fit-how summary{cursor:pointer;font:400 12px/1.4 var(--mono,monospace);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;list-style:none}
.rv-fit-how summary::-webkit-details-marker{display:none}
.rv-fit-how p{font-size:13.5px;line-height:1.55;color:var(--f-stone);margin:10px 0 0!important}
@media(max-width:720px){
  .rv-fit-verdict{grid-template-columns:36px 1fr;gap:12px;padding:18px}
  .rv-fit-verdict-icon{width:36px;height:36px}
  .rv-fit-carname{font-size:24px!important}
  .rv-fit-tent .rv-fit-meter{grid-column:1/-1}
  .rv-fit-result{padding:16px 0 0}   /* the answer and the cards line up with the step blocks above */
}
@media(prefers-reduced-motion:reduce){.rv-fit-meter-bar i{transition:none}}