/**
 * Vereecke Rental Manager - v2 booking front-end.
 *
 * Loaded only when the v2 planner renders, so a site still on the classic
 * planner never downloads any of this. Everything is namespaced under .vrmx to
 * keep it away from Avada's styles, and all colours come from --vrmx-brand,
 * which the shortcode sets from the plugin's brand colour setting.
 *
 * Two deliberate layout decisions, both fixing real defects in the classic
 * planner:
 *
 *  1. The summary is compact by design (small thumbnail, tight rows). A sticky
 *     element that is taller than the viewport can never be scrolled to the
 *     bottom, which is exactly what went wrong before. max-height + overflow is
 *     the second line of defence.
 *  2. Below 1000px the summary is not hidden - it becomes a fixed bottom bar.
 *     Hiding it is what left phone users unable to see which machine and which
 *     dates they were booking.
 *
 * Two things this file has to know about Avada, because the planner is dropped
 * into a Fusion Builder column and cannot control its own parent:
 *
 *  a. Fusion wraps column content in .fusion-column-wrapper, which is
 *     display:flex; flex-direction:column. Per the flexbox spec an auto margin
 *     on the cross axis cancels align-items:stretch, so "max-width + auto
 *     margins" alone makes the planner collapse to its content width (585px in
 *     a 1180px column). width:100% below is what prevents that. Rule of thumb
 *     for this theme: never centre with auto margins without also setting a
 *     width.
 *  b. Avada's header is position:fixed and shrinks to 65px once the page
 *     scrolls (body.avada-sticky-shrinkage), so anything sticky has to start
 *     below it - see --vrmx-header-h.
 */
.vrmx {
    --vrmx-brand: #c8102e;
    --vrmx-brand-dark: #8c0d20;
    --vrmx-brand-soft: #fff1f3;
    --vrmx-ink: #1b1b1f;
    --vrmx-muted: #6b6b74;
    --vrmx-line: #e4e0e2;
    --vrmx-ok: #0d8a52;
    --vrmx-ok-soft: #e8f5ee;
    --vrmx-warn: #996800;
    --vrmx-warn-soft: #fff8ea;
    --vrmx-err: #b42318;
    --vrmx-radius: 14px;
    /**
     * Where the desktop summary column pins itself.
     *
     * Avada's header is position:fixed and 65px tall once it has shrunk, so a
     * sticky element pinned at 24px slides underneath it. Only --vrmx-header-h
     * needs changing if the header height ever changes; the gap is the
     * breathing room between the header and the card, and is reused at the
     * bottom of the card in the max-height below.
     */
    --vrmx-header-h: 65px;
    --vrmx-sticky-gap: 24px;
    --vrmx-sticky-top: calc(var(--vrmx-header-h) + var(--vrmx-sticky-gap));
    /* Width of the month grid. Change this one value to resize the calendar. */
    --vrmx-cal-width: 320px;
    /**
     * Required, not cosmetic: without it Fusion Builder's flex column shrinks
     * the planner to its content width. See note (a) in the file header.
     */
    width: 100%;
    /**
     * Overall reading width. Without this the planner stretches to whatever the
     * page template gives it - on a 2048px viewport that is ~1700px, which makes
     * every row look sparse and leaves the calendar marooned. Raise or remove it
     * if you want it to fill the page.
     */
    --vrmx-max-width: 1240px;
    max-width: var(--vrmx-max-width);
    margin-inline: auto;
    color: var(--vrmx-ink);
    font-size: 15px;
    line-height: 1.55;
}
/**
 * Logged-in admins get the WordPress admin bar, which pushes Avada's fixed
 * header down by 32px. Without this the summary tucks under the header for
 * editors while looking fine to customers - which is how the overlap gets
 * "fixed" twice.
 */
body.admin-bar .vrmx { --vrmx-header-h: 97px; }
.vrmx *,
.vrmx *::before,
.vrmx *::after { box-sizing: border-box; }
/**
 * Both of these are single-column grids below 1000px. A grid column with no
 * explicit size is an `auto` track, and an auto track is never narrower than
 * its content's min-content width - which the form's text inputs push to about
 * 395px. The track then grows past its 352px container, Avada's
 * overflow-x: hidden clips whatever sticks out, and the right-hand side of
 * every step card is simply gone. Because .vrmx__flow is a single column, one
 * wide step widened the shared track for all of them, so even the collapsed
 * headers lost their "Wijzig" link.
 *
 * Chrome computed that min-content contribution wide enough to overflow while
 * Firefox did not, which is why this only ever showed up on Chrome mobile.
 *
 * minmax(0, 1fr) caps the track at the container width and lets the content
 * shrink instead of the track growing. Do not remove the 0 - `1fr` on its own
 * is `minmax(auto, 1fr)` and brings the whole problem straight back.
 */
.vrmx__grid { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.vrmx__flow { display: grid; gap: 12px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.vrmx-empty {
    padding: 22px;
    border: 1px solid #e4e0e2;
    border-radius: 14px;
    background: #fff;
}
.vrmx-alert {
    margin: 0 0 16px;
    padding: 13px 15px;
    border-radius: 12px;
    border: 1px solid var(--vrmx-line);
    font-weight: 600;
}
.vrmx-alert--success { background: var(--vrmx-ok-soft); border-color: #bfe3d0; color: #075c38; }
.vrmx-alert--error { background: #fff2f0; border-color: #f3c9c4; color: var(--vrmx-err); }
.vrmx-alert:focus { outline: 2px solid var(--vrmx-brand); outline-offset: 2px; }
/* ------------------------------------------------------------------ steps */
.vrmx-step {
    background: #fff;
    border: 1px solid var(--vrmx-line);
    border-radius: var(--vrmx-radius);
    overflow: hidden;
    /* planner.js scrolls the newly opened step into view; without this it would
       land behind Avada's fixed header. Same offset as the sticky summary. */
    scroll-margin-top: var(--vrmx-sticky-top);
}
.vrmx-step.is-current { border-color: var(--vrmx-brand); box-shadow: 0 0 0 1px var(--vrmx-brand); }
.vrmx-step.is-locked { opacity: .55; }
.vrmx-step__head {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    margin: 0;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.vrmx-step.is-locked .vrmx-step__head { cursor: not-allowed; }
.vrmx-step__head:focus-visible { outline: 2px solid var(--vrmx-brand); outline-offset: -2px; }
.vrmx-step__num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ececed;
    color: var(--vrmx-muted);
    font-size: 13px;
    font-weight: 700;
}
.vrmx-step.is-current .vrmx-step__num { background: var(--vrmx-brand); color: #fff; }
.vrmx-step.is-done .vrmx-step__num { background: var(--vrmx-ok-soft); color: var(--vrmx-ok); }
.vrmx-step__text { flex: 1 1 auto; min-width: 0; }
.vrmx-step__title { display: block; font-weight: 700; }
.vrmx-step__opt { font-weight: 400; color: var(--vrmx-muted); }
.vrmx-step__recap {
    display: block;
    color: var(--vrmx-muted);
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vrmx-step.is-current .vrmx-step__recap { display: none; }
.vrmx-step__edit { flex: 0 0 auto; color: var(--vrmx-brand); font-weight: 600; font-size: 13.5px; }
.vrmx-step.is-current .vrmx-step__edit,
.vrmx-step.is-locked .vrmx-step__edit { display: none; }
.vrmx-step__body { display: none; padding: 0 16px 18px; }
.vrmx-step.is-current .vrmx-step__body { display: block; }
/* --------------------------------------------------------------- machines */
.vrmx-machines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.vrmx-machines > li { margin: 0; }
.vrmx-machine {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 1px solid var(--vrmx-line);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
.vrmx-machine:hover { border-color: var(--vrmx-brand); }
.vrmx-machine:focus-visible { outline: 2px solid var(--vrmx-brand); outline-offset: 2px; }
.vrmx-machine[aria-pressed="true"] { border-color: var(--vrmx-brand); box-shadow: inset 0 0 0 1px var(--vrmx-brand); }
.vrmx-machine[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vrmx-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.vrmx-machine__img {
    display: block;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #dcdce0, #eeeef1);
}
.vrmx-machine__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vrmx-machine__body { display: grid; gap: 2px; padding: 10px 12px 12px; }
.vrmx-machine__name { font-weight: 700; }
.vrmx-machine__sub,
.vrmx-machine__specs,
.vrmx-machine__note { color: var(--vrmx-muted); font-size: 13px; }
.vrmx-machine__note { color: var(--vrmx-warn); }
.vrmx-machine__price { font-weight: 700; font-size: 13.5px; }
.vrmx-machine__price span { font-weight: 400; color: var(--vrmx-muted); font-size: 12.5px; }
/* ----------------------------------------------------------- option rows */
.vrmx-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vrmx-fieldset + .vrmx-fieldset { margin-top: 12px; }
.vrmx-legend { padding: 0 0 8px; font-weight: 700; font-size: 14px; }
.vrmx-opts { display: grid; gap: 8px; }
.vrmx-opt {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--vrmx-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}
.vrmx-opt:hover { border-color: var(--vrmx-brand); }
.vrmx-opt:focus-within { outline: 2px solid var(--vrmx-brand); outline-offset: 2px; }
.vrmx-opt.is-on { border-color: var(--vrmx-brand); background: var(--vrmx-brand-soft); box-shadow: inset 0 0 0 1px var(--vrmx-brand); }
.vrmx-opt.is-off { opacity: .5; cursor: not-allowed; background: #fafafa; }
.vrmx-opt input { width: 19px; height: 19px; margin: 0; flex: 0 0 auto; accent-color: var(--vrmx-brand); }
.vrmx-opt__t { flex: 1 1 auto; min-width: 0; }
.vrmx-opt__t b { display: block; }
.vrmx-opt__t span { color: var(--vrmx-muted); font-size: 13px; }
.vrmx-opt__p { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
/* A group with a single possible answer is a statement, not a fake choice. */
.vrmx-fact {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--vrmx-line);
    border-radius: 12px;
    background: #f7f7f9;
    font-size: 14px;
}
.vrmx-fact b { display: block; }
.vrmx-fact span { color: var(--vrmx-muted); }
.vrmx-note {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--vrmx-brand-soft);
    color: var(--vrmx-brand-dark);
    font-size: 13.5px;
    font-weight: 600;
}
.vrmx-live {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--vrmx-ok-soft);
    color: #075c38;
    font-size: 13.5px;
    font-weight: 600;
}
.vrmx-live.is-warn { background: var(--vrmx-warn-soft); color: var(--vrmx-warn); }
.vrmx-live.is-error { background: #fff2f0; color: var(--vrmx-err); }
/* ---------------------------------------------------------------- calendar */
/**
 * The month grid is deliberately not full width - 7 columns across a 1600px step
 * turns every day into a huge block. But a capped grid left-aligned in a wide card
 * leaves a dead area beside it that looks like a failed load, so the legend, the
 * chosen period and the Volgende button sit in that space instead of underneath.
 *
 * This is driven by a container query, not a media query: how much room the step
 * has depends on whether the desktop summary column is present, not on the size of
 * the screen.
 */
.vrmx-step__body { container-type: inline-size; }
.vrmx-when {
    display: grid;
    grid-template-columns: minmax(0, var(--vrmx-cal-width)) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--vrmx-line);
}
.vrmx-when__cal { min-width: 0; }
.vrmx-when__side {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}
/* The side column holds the legend, so it does not need to wrap tightly. */
.vrmx-when__side .vrmx-legend { flex-direction: column; gap: 7px; margin-top: 0; }
.vrmx-when__side .vrmx-live { margin: 0; }
.vrmx-when__side .vrmx-submit { margin-top: 2px; max-width: 320px; }
.vrmx-when__side .vrmx-hint { margin-top: 0; }
/**
 * Fallback for browsers without container queries (Safari 15 and older, so
 * iPhones that never got iOS 16). There the @container block below never
 * applies and the calendar would keep its two-column layout on a phone, which
 * overflows exactly like .vrmx__flow used to. On a phone the two rules want the
 * same thing, so this is free everywhere else.
 */
@media (max-width: 700px) {
    .vrmx-when { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .vrmx-when__cal { max-width: none; }
}
/* Not enough room beside the grid: stack, and let the calendar use the width. */
@container (max-width: 680px) {
    .vrmx-when { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .vrmx-when__cal { max-width: none; }
    .vrmx-when__side .vrmx-legend { flex-direction: row; }
}
.vrmx-cal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.vrmx-cal-top b { font-size: 14.5px; }
.vrmx-cal-nav { display: flex; gap: 6px; }
.vrmx-cal-nav button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--vrmx-line);
    border-radius: 9px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.vrmx-cal-nav button:hover:not(:disabled) { border-color: var(--vrmx-brand); }
.vrmx-cal-nav button:disabled { opacity: .4; cursor: not-allowed; }
.vrmx-cal-nav button:focus-visible { outline: 2px solid var(--vrmx-brand); outline-offset: 1px; }
/* A month is only ever 7 columns wide; letting it fill a 600px step made every
   day a 80px block. Capped so the cells read as a compact datepicker. */
.vrmx-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.vrmx-cal__wd {
    padding-bottom: 2px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--vrmx-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vrmx-day {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--vrmx-line);
    border-radius: 7px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.vrmx-day:hover:not(:disabled) { border-color: var(--vrmx-brand); }
.vrmx-day:focus-visible { outline: 2px solid var(--vrmx-brand); outline-offset: 1px; z-index: 1; }
.vrmx-day.is-blank { border: 0; background: none; cursor: default; }
.vrmx-day:disabled { cursor: not-allowed; color: #b9b9c0; background: #fafafa; }
.vrmx-day.is-taken { background: #fdeceb; border-color: #f6d6d3; color: #a8635e; }
.vrmx-day.is-taken::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(180, 35, 24, .16) 4px 8px);
}
.vrmx-day.is-part { background: var(--vrmx-warn-soft); border-color: #f0dfbe; color: #8a6d2f; }
.vrmx-day.is-range { background: var(--vrmx-brand-soft); border-color: #f3c6cd; color: var(--vrmx-brand-dark); }
.vrmx-day.is-selected { background: var(--vrmx-brand); border-color: var(--vrmx-brand); color: #fff; }
.vrmx-day.is-today::before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}
.vrmx-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--vrmx-muted); }
.vrmx-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -2px;
    border: 1px solid var(--vrmx-line);
    border-radius: 4px;
}
.vrmx-legend .is-free { background: #fff; }
.vrmx-legend .is-part { background: var(--vrmx-warn-soft); border-color: #f0dfbe; }
.vrmx-legend .is-taken { background: #fdeceb; border-color: #f6d6d3; }
.vrmx-skeleton {
    height: 220px;
    border-radius: 10px;
    background: linear-gradient(100deg, #f2f2f4 30%, #e9e9ec 50%, #f2f2f4 70%);
    background-size: 300% 100%;
    animation: vrmx-shimmer 1.2s linear infinite;
}
@keyframes vrmx-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .vrmx-skeleton { animation: none; } }
/* ------------------------------------------------------------ accessories */
.vrmx-acc { display: grid; gap: 8px; }
.vrmx-accrow {
    display: grid;
    grid-template-columns: auto 46px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 13px;
    border: 1px solid var(--vrmx-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}
.vrmx-accrow:hover:not(.is-off) { border-color: var(--vrmx-brand); }
.vrmx-accrow:focus-within { outline: 2px solid var(--vrmx-brand); outline-offset: 2px; }
.vrmx-accrow.is-on { border-color: var(--vrmx-brand); background: var(--vrmx-brand-soft); box-shadow: inset 0 0 0 1px var(--vrmx-brand); }
.vrmx-accrow.is-off { opacity: .55; cursor: not-allowed; background: #fafafa; }
.vrmx-accrow input { width: 19px; height: 19px; margin: 0; accent-color: var(--vrmx-brand); }
.vrmx-accrow__img { width: 46px; height: 46px; border-radius: 9px; background: linear-gradient(135deg, #dcdce0, #eeeef1); overflow: hidden; }
.vrmx-accrow__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vrmx-accrow__t { min-width: 0; }
.vrmx-accrow__t b { display: block; }
.vrmx-accrow__t span { display: block; color: var(--vrmx-muted); font-size: 13px; }
.vrmx-accrow__t .vrmx-why { color: var(--vrmx-err); font-weight: 600; }
.vrmx-accrow__p { font-weight: 700; white-space: nowrap; }
/* ------------------------------------------------------------------ forms */
.vrmx-grid2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.vrmx-f { display: grid; gap: 5px; min-width: 0; }
.vrmx-f--full { grid-column: 1 / -1; }
.vrmx-f > label { font-size: 13.5px; font-weight: 600; }
.vrmx-f input,
.vrmx-f textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d3d0d2;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: inherit;
}
.vrmx-f input:focus,
.vrmx-f textarea:focus { outline: 2px solid var(--vrmx-brand); outline-offset: -1px; border-color: var(--vrmx-brand); }
.vrmx-f.has-error input,
.vrmx-f.has-error textarea { border-color: var(--vrmx-err); background: #fff8f7; }
.vrmx-err { color: var(--vrmx-err); font-size: 12.5px; font-weight: 600; }
.vrmx-req { color: var(--vrmx-err); }
.vrmx-details { margin-top: 12px; border: 1px solid var(--vrmx-line); border-radius: 12px; background: #fff; }
.vrmx-details > summary {
    padding: 11px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    list-style: none;
}
.vrmx-details > summary::-webkit-details-marker { display: none; }
.vrmx-details > summary::after { content: " ▾"; color: var(--vrmx-muted); }
.vrmx-details[open] > summary::after { content: " ▴"; }
.vrmx-details > div { padding: 0 14px 14px; }
.vrmx-quote { margin-top: 12px; border: 1px solid var(--vrmx-line); border-radius: 12px; overflow: hidden; }
.vrmx-quote h4 { margin: 0; padding: 10px 13px; background: #f7f7f9; font-size: 13.5px; }
.vrmx-quote dl { margin: 0; padding: 6px 13px 11px; display: grid; gap: 4px; font-size: 13.5px; }
.vrmx-quote dl > div { display: flex; justify-content: space-between; gap: 12px; }
.vrmx-quote dt { color: var(--vrmx-muted); }
.vrmx-quote dd { margin: 0; font-weight: 600; text-align: right; }
.vrmx-quote .is-total { margin-top: 3px; padding-top: 6px; border-top: 1px solid var(--vrmx-line); }
.vrmx-quote .is-total dt { color: inherit; font-weight: 700; }
.vrmx-terms { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; }
.vrmx-terms input { width: 19px; height: 19px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--vrmx-brand); }
.vrmx-terms a { color: var(--vrmx-brand); }
.vrmx-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 14px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: var(--vrmx-brand);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.vrmx-submit:hover { background: var(--vrmx-brand-dark); }
.vrmx-submit[disabled] { opacity: .65; cursor: progress; }
.vrmx-submit:focus-visible { outline: 3px solid var(--vrmx-brand-dark); outline-offset: 2px; }
.vrmx-errsum {
    margin: 0 0 12px;
    padding: 11px 13px;
    border: 1px solid #f3c9c4;
    border-radius: 10px;
    background: #fff2f0;
    color: var(--vrmx-err);
    font-size: 13.5px;
}
.vrmx-errsum b { display: block; margin-bottom: 3px; }
.vrmx-errsum ul { margin: 0; padding-left: 18px; }
.vrmx-hint { margin: 10px 0 0; color: var(--vrmx-muted); font-size: 12.5px; }
/* ---------------------------------------------------------------- summary */
.vrmx-card { background: #fff; border: 1px solid var(--vrmx-line); border-radius: var(--vrmx-radius); }
.vrmx-card__h { display: flex; gap: 11px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--vrmx-line); }
.vrmx-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #dcdce0, #eeeef1);
    overflow: hidden;
}
.vrmx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vrmx-card__h b { display: block; font-size: 14.5px; }
.vrmx-card__h span { color: var(--vrmx-muted); font-size: 12.5px; }
.vrmx-sum { margin: 0; padding: 12px 15px; display: grid; gap: 7px; font-size: 13.5px; }
.vrmx-sum > div { display: flex; justify-content: space-between; gap: 10px; }
.vrmx-sum dt { color: var(--vrmx-muted); }
.vrmx-sum dd { margin: 0; font-weight: 600; text-align: right; }
.vrmx-sum .is-sub dt { padding-left: 10px; }
.vrmx-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 15px; border-top: 1px solid var(--vrmx-line); }
.vrmx-total span { color: var(--vrmx-muted); font-size: 12px; }
.vrmx-total b { font-size: 19px; }
/* ------------------------------------------------------------- bottom bar */
.vrmx-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: #fff;
    border-top: 1px solid var(--vrmx-line);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .1);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.vrmx-bar__top {
    width: 100%;
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.vrmx-bar__top:focus-visible { outline: 2px solid var(--vrmx-brand); outline-offset: -2px; }
.vrmx-bar .vrmx-thumb { width: 42px; height: 34px; }
.vrmx-bar__t { flex: 1 1 auto; min-width: 0; }
.vrmx-bar__t b,
.vrmx-bar__t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrmx-bar__t b { font-size: 13.5px; }
.vrmx-bar__t span { color: var(--vrmx-muted); font-size: 12px; }
.vrmx-bar__p { flex: 0 0 auto; text-align: right; }
.vrmx-bar__p b { display: block; font-size: 16px; }
.vrmx-bar__p span { color: var(--vrmx-muted); font-size: 11px; }
.vrmx-bar__chev { flex: 0 0 auto; color: var(--vrmx-muted); transition: transform .15s ease; }
.vrmx-bar.is-open .vrmx-bar__chev { transform: rotate(180deg); }
/* max-height twice on purpose: on iOS Safari `vh` is the *large* viewport, so
   46vh is taller than what you can actually see while the toolbars are up. The
   dvh line wins where it is supported and is ignored everywhere else. */
.vrmx-bar__sheet { display: none; border-top: 1px solid var(--vrmx-line); max-height: 46vh; max-height: 46dvh; overflow: auto; }
.vrmx-bar.is-open .vrmx-bar__sheet { display: block; }
.vrmx-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* ------------------------------------------------------------ breakpoints */
@media (min-width: 1000px) {
    .vrmx__grid { grid-template-columns: minmax(0, 1fr) 340px; }
    .vrmx__side {
        position: sticky;
        /* Below Avada's fixed header, not under it - see --vrmx-header-h. */
        top: var(--vrmx-sticky-top);
        /* Never taller than the screen: an over-tall sticky block cannot be
           scrolled to its own bottom, which is the bug this replaces. From
           where it is pinned down to one gap above the bottom of the screen. */
        max-height: calc(100vh - var(--vrmx-sticky-top) - var(--vrmx-sticky-gap));
        /* Same iOS reason as .vrmx-bar__sheet: vh overshoots the visible area,
           which would bring back the summary you cannot scroll to the end of. */
        max-height: calc(100dvh - var(--vrmx-sticky-top) - var(--vrmx-sticky-gap));
        overflow: auto;
    }
    /* The bar is a phone and tablet affordance only. */
    .vrmx-bar { display: none !important; }
}
@media (max-width: 999px) {
    /* No hidden summary. The aside collapses and the fixed bar takes over,
       so the machine, the dates and the price stay visible at all times. */
    .vrmx__side { display: none; }
    /* Room for the fixed bar so it never covers the submit button. */
    .vrmx { padding-bottom: 92px; }
}
@media (max-width: 640px) {
    .vrmx { --vrmx-cal-width: 100%; }
    .vrmx-day { font-size: 14px; }
    .vrmx-machines { grid-template-columns: 1fr; }
    .vrmx-grid2 { grid-template-columns: 1fr; }
    .vrmx-machine__img { aspect-ratio: 16 / 9; }
    .vrmx-step__head { padding: 13px 14px; }
    .vrmx-step__body { padding: 0 14px 16px; }
    .vrmx-accrow { grid-template-columns: auto 1fr auto; }
    .vrmx-accrow__img { display: none; }
}
@media (prefers-contrast: more) {
    .vrmx-step,
    .vrmx-opt,
    .vrmx-accrow,
    .vrmx-machine { border-color: #767680; }
}
/**
 * "Volgende" - the way out of every step.
 *
 * This used to be a quiet outlined button. It read as a secondary option, so
 * customers did not see it as the way forward and clicked around looking for
 * one. It is now the same red as the primary button, only slightly shorter, so
 * every step ends in an obvious next click. The class name is kept because
 * planner.js builds every step button with it.
 */
.vrmx-submit--secondary {
    background: var(--vrmx-brand);
    color: #fff;
    border: 1px solid var(--vrmx-brand);
    min-height: 46px;
    font-size: 15px;
}
.vrmx-submit--secondary:hover {
    background: var(--vrmx-brand-dark);
    border-color: var(--vrmx-brand-dark);
}
/* A disabled Volgende is waiting for input, not working - cursor:progress
   (inherited from .vrmx-submit) would claim something is happening. */
.vrmx-submit--secondary[disabled] {
    cursor: not-allowed;
}