/*
 * Booking flow (/booking-preview/), design D-037; the Roadside Retro skin (D-048) is the last section.
 * Colours from the theme palette (Customizer > Colors),
 * like the product pages (D-036): 1 navy, 2 bright blue, 3/4 text, 5/6 muted, 7 borders, 8 light
 * background, 11 green; yellow for the promo, as on the product pages.
 */
.rlt-bk-page {
	/* Roadside Retro roles (D-048): navy outlines and text, red accents, paper on cream, mustard tags. */
	--bk-navy: var(--global-palette3, #1b2a4a);
	--bk-blue: var(--global-palette1, #b8322b);
	--bk-ink: var(--global-palette3, #1b2a4a);
	--bk-text: var(--global-palette4, #1b2a4a);
	--bk-muted: var(--global-palette5, #4a5672);
	--bk-faint: var(--global-palette6, #6e7891);
	--bk-line: var(--global-palette7, #c9bfa9);
	--bk-soft: var(--global-palette8, #f6efe2);
	--bk-paper: var(--global-palette9, #fff8ec);
	--bk-green: var(--global-palette11, #1f6b3a);
	--bk-yellow: var(--global-palette14, #e9b23a);
	--bk-radius: 14px;
	color: var(--bk-text);
	background: linear-gradient(180deg, var(--bk-soft) 0, #fff 520px);
	padding-bottom: 4rem;
}

/* ---- title band ---- */
.rlt-bk-hero { background: var(--bk-navy); color: #fff; padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(4.5rem, 8vw, 6rem); position: relative; overflow: hidden; }
.rlt-bk-hero::after { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bk-blue) 55%, transparent), transparent 70%); pointer-events: none; }
.rlt-bk-hero-inner, .rlt-bk-wrap { max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: 0 var(--global-content-edge-padding, 1.5rem); position: relative; }
.rlt-bk-hero h1 { color: #fff; margin: .6rem 0 0; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); letter-spacing: -.02em; }
.rlt-bk-hero-sub { margin: .5rem 0 0; font-size: 1.15rem; opacity: .9; max-width: 56ch; }
.rlt-bk-preview { display: inline-block; margin: 0; font-size: .85rem; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .35rem .9rem; }
.rlt-bk-preview a, .rlt-bk-preview a:visited { color: #fff; }
.rlt-bk-wrap { margin-top: clamp(-3.75rem, -6vw, -3rem); }

/* ---- layout ---- */
.rlt-bk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.rlt-bk-steps { display: grid; gap: .9rem; min-width: 0; }

/* ---- steps ---- */
/* min-width: 0 on grid children: wide content scrolls inside its card instead of stretching it. */
.rlt-bk-step, .rlt-bk-step-body, .rlt-bk-summary { min-width: 0; }
.rlt-bk-step { background: #fff; border: 1px solid var(--bk-line); border-radius: var(--bk-radius); box-shadow: 0 1px 2px rgba(11, 26, 38, .04); scroll-margin-top: 90px; transition: box-shadow .2s, border-color .2s; }
.rlt-bk-step.is-active { border-color: color-mix(in srgb, var(--bk-blue) 45%, var(--bk-line)); box-shadow: 0 1px 2px rgba(11, 26, 38, .05), 0 14px 36px rgba(11, 26, 38, .09); }
.rlt-bk-step.is-later { background: color-mix(in srgb, #fff 60%, var(--bk-soft)); box-shadow: none; }
.rlt-bk-step.is-later .rlt-bk-step-head { opacity: .55; }
.rlt-bk-step-head { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem; }
.rlt-bk-num { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .95rem; background: var(--bk-soft); color: var(--bk-muted); }
.rlt-bk-step.is-active .rlt-bk-num { background: var(--bk-blue); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--bk-blue) 16%, transparent); }
.rlt-bk-num.is-done { background: var(--bk-green); color: #fff; }
.rlt-bk-num .rlt-bk-icon svg { width: 1rem; height: 1rem; }
.rlt-bk-step-titles { flex: 1 1 auto; min-width: 0; }
.rlt-bk-step h2 { margin: 0; font-size: 1.15rem; color: var(--bk-ink); letter-spacing: -.01em; outline: none; }
.rlt-bk-step-summary { margin: .1rem 0 0; color: var(--bk-muted); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.rlt-bk-change { flex: 0 0 auto; background: none; border: 1px solid var(--bk-line); color: var(--bk-blue); font-weight: 700; font-size: .88rem; border-radius: 999px; padding: .35rem .9rem; cursor: pointer; box-shadow: none; }
button.rlt-bk-change:hover, button.rlt-bk-change:focus-visible { border-color: var(--bk-blue); background: color-mix(in srgb, var(--bk-blue) 6%, #fff); color: var(--bk-blue); }
.rlt-bk-step-body { padding: 0 1.25rem 1.35rem; animation: rlt-bk-in .25s ease; }
@keyframes rlt-bk-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rlt-bk-muted { color: var(--bk-muted); margin: 0 0 .9rem; }
.rlt-bk-small { font-size: .88rem; margin: 1rem 0 0; }
.rlt-bk-empty { background: var(--bk-soft); border-radius: 12px; padding: .9rem 1rem; margin: 0; }
.rlt-bk-icon { display: inline-flex; }
.rlt-bk-icon svg { width: 1.15rem; height: 1.15rem; }

/* Buttons the theme would otherwise colour: every button here sets its own colours. */
.rlt-bk button { font-family: inherit; box-shadow: none; text-transform: none; letter-spacing: normal; }

/* ---- 1 trailer cards ---- */
.rlt-bk-trailers { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .75rem; }
button.rlt-bk-trailer { display: flex; flex-direction: column; text-align: left; background: #fff; color: var(--bk-text); border: 2px solid var(--bk-line); border-radius: 14px; padding: .5rem .5rem .75rem; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
button.rlt-bk-trailer:hover, button.rlt-bk-trailer:focus-visible { border-color: color-mix(in srgb, var(--bk-blue) 55%, var(--bk-line)); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11, 26, 38, .09); background: #fff; color: var(--bk-text); }
button.rlt-bk-trailer.is-on { border-color: var(--bk-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bk-blue) 15%, transparent); }
.rlt-bk-trailer-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--bk-soft); }
.rlt-bk-trailer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rlt-bk-badge { position: absolute; left: 6px; top: 6px; background: var(--bk-green); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .15rem .5rem; }
.rlt-bk-trailer-name { font-weight: 700; color: var(--bk-ink); margin: .55rem .25rem 0; line-height: 1.25; font-size: .95rem; }
.rlt-bk-trailer-price { margin: .2rem .25rem 0; color: var(--bk-muted); font-size: .88rem; }

/* ---- 2 pickup style ---- */
.rlt-bk-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
button.rlt-bk-mode { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i t" "i x" "i n"; column-gap: .9rem; align-items: start; text-align: left; background: #fff; color: var(--bk-text); border: 2px solid var(--bk-line); border-radius: 14px; padding: 1.1rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.rlt-bk-mode:hover:not(:disabled), button.rlt-bk-mode:focus-visible { border-color: color-mix(in srgb, var(--bk-blue) 55%, var(--bk-line)); background: #fff; color: var(--bk-text); }
button.rlt-bk-mode.is-on { border-color: var(--bk-blue); background: color-mix(in srgb, var(--bk-blue) 5%, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bk-blue) 14%, transparent); }
button.rlt-bk-mode.is-off { cursor: not-allowed; opacity: .6; background: var(--bk-soft); }
.rlt-bk-mode-icon { grid-area: i; width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--bk-blue) 10%, #fff); color: var(--bk-blue); }
.rlt-bk-mode-icon svg { width: 1.9rem; height: 1.9rem; }
.rlt-bk-mode.is-on .rlt-bk-mode-icon { background: var(--bk-blue); color: #fff; }
.rlt-bk-mode-title { grid-area: t; font-weight: 800; color: var(--bk-ink); font-size: 1.05rem; }
.rlt-bk-mode-text { grid-area: x; color: var(--bk-muted); font-size: .92rem; margin-top: .2rem; line-height: 1.4; }
.rlt-bk-mode-note { grid-area: n; margin-top: .45rem; font-size: .8rem; font-weight: 700; color: var(--bk-muted); }

/* Days without times never react to hover or touch (the theme's button hover would otherwise colour them). */
.rlt-bk-warn { color: #8a5a00; background: #fff7e0; border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; margin: .9rem 0 0; }

.rlt-bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }

/* 7 PM extension: a switch-style toggle */
.rlt-bk-ext { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; margin-top: 1.1rem; padding: .9rem 1rem; border: 1px solid var(--bk-line); border-radius: 12px; cursor: pointer; background: #fff; }
.rlt-bk-ext.is-on { border-color: var(--bk-green); background: color-mix(in srgb, var(--bk-green) 5%, #fff); }
.rlt-bk-ext input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rlt-bk-switch { width: 44px; height: 26px; border-radius: 999px; background: var(--bk-line); position: relative; transition: background .15s; }
.rlt-bk-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.rlt-bk-ext.is-on .rlt-bk-switch { background: var(--bk-green); }
.rlt-bk-ext.is-on .rlt-bk-switch::after { transform: translateX(18px); }
.rlt-bk-ext input:focus-visible + .rlt-bk-switch { outline: 3px solid var(--bk-blue); outline-offset: 2px; }
.rlt-bk-ext strong { color: var(--bk-ink); }
.rlt-bk-ext span span { color: var(--bk-muted); }

/* ---- summary ---- */
.rlt-bk-summary { position: sticky; top: var(--rlt-summary-top, 1.25rem); background: #fff; border: 1px solid var(--bk-line); border-radius: var(--bk-radius); padding: 1.25rem; box-shadow: 0 1px 2px rgba(11, 26, 38, .05), 0 18px 44px rgba(11, 26, 38, .1); outline: none; }
.admin-bar .rlt-bk-summary { top: var(--rlt-summary-top, calc(1.25rem + 32px)); }
.rlt-bk-sum-head { display: grid; grid-template-columns: 84px 1fr; gap: .9rem; align-items: center; }
.rlt-bk-sum-head img, .rlt-bk-sum-ph { width: 84px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--bk-soft); display: block; }
.rlt-bk-sum-kicker { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bk-faint); }
.rlt-bk-sum-head strong { display: block; color: var(--bk-ink); line-height: 1.25; margin-top: .1rem; }
.rlt-bk-sum-price { display: block; font-size: .88rem; color: var(--bk-muted); margin-top: .15rem; }
.rlt-bk-promo { display: flex; gap: .45rem; align-items: flex-start; margin: 1rem 0 0; background: var(--bk-yellow); color: var(--bk-ink); font-weight: 700; font-size: .88rem; line-height: 1.35; border-radius: 10px; padding: .55rem .75rem; }
.rlt-bk-promo .rlt-bk-icon svg { width: 1rem; height: 1rem; margin-top: .08rem; }
.rlt-bk-sum-rows { margin-top: 1.1rem; display: grid; gap: .9rem; }
.rlt-bk-sum-row { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.rlt-bk-sum-row > .rlt-bk-icon { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--bk-blue) 9%, #fff); color: var(--bk-blue); }
.rlt-bk-sum-row.is-empty > .rlt-bk-icon { background: var(--bk-soft); color: var(--bk-faint); }
.rlt-bk-sum-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bk-faint); }
.rlt-bk-sum-value { display: block; font-weight: 700; color: var(--bk-ink); }
.rlt-bk-sum-row.is-empty .rlt-bk-sum-value { font-weight: 500; color: var(--bk-faint); }
.rlt-bk-sum-sub { display: block; font-size: .85rem; color: var(--bk-muted); }
.rlt-bk-sum-total { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--bk-line); display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .1rem .5rem; }
.rlt-bk-sum-total > span:first-child { color: var(--bk-muted); font-weight: 600; }
.rlt-bk-sum-total strong { font-size: 1.5rem; color: var(--bk-ink); letter-spacing: -.01em; }
.rlt-bk-sum-total .rlt-bk-sum-sub { grid-column: 1 / -1; }
button.rlt-bk-primary { display: block; width: 100%; margin-top: 1rem; background: var(--bk-blue); color: #fff; border: 0; border-radius: 12px; padding: .95rem 1rem; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
button.rlt-bk-primary:disabled { background: var(--bk-soft); color: var(--bk-muted); cursor: not-allowed; }
button.rlt-bk-secondary { display: block; width: 100%; margin-top: 1rem; background: #fff; color: var(--bk-blue); border: 2px solid color-mix(in srgb, var(--bk-blue) 40%, #fff); border-radius: 12px; padding: .7rem 1rem; font-weight: 700; cursor: pointer; }
button.rlt-bk-secondary:hover, button.rlt-bk-secondary:focus-visible { border-color: var(--bk-blue); background: color-mix(in srgb, var(--bk-blue) 5%, #fff); color: var(--bk-blue); }
.rlt-bk-status { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 0; border-radius: 12px; padding: .65rem .85rem; font-weight: 700; font-size: .92rem; }
.rlt-bk-status.is-ok { background: color-mix(in srgb, var(--bk-green) 10%, #fff); color: var(--bk-green); }
.rlt-bk-status.is-bad { background: #fdeeee; color: #9b1c1c; }
.rlt-bk-status.is-wait { background: var(--bk-soft); color: var(--bk-muted); }
.rlt-bk-note { margin: .75rem 0 0; font-size: .8rem; color: var(--bk-faint); text-align: center; }
.rlt-bk-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; background: #fdeeee; color: #9b1c1c; border: 1px solid #f2c4c4; border-radius: 12px; padding: .8rem 1rem; font-weight: 600; }
.rlt-bk-alert .rlt-bk-secondary { width: auto; margin: 0; }
.rlt-bk-error { background: #fff; border-radius: var(--bk-radius); padding: 1.25rem; color: #9b1c1c; font-weight: 600; }

/* ---- extras (add-ons), D-039 ---- */
.rlt-bk-extras { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.rlt-bk-extra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; border: 1px solid var(--bk-line); border-radius: 12px; padding: .5rem .6rem; background: #fff; }
.rlt-bk-extra.is-on { border-color: var(--bk-blue); background: color-mix(in srgb, var(--bk-blue) 5%, #fff); }
.rlt-bk-extra-photo { width: 3rem; height: 3rem; border-radius: 8px; overflow: hidden; background: var(--bk-soft); }
.rlt-bk-extra-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rlt-bk-extra-name { display: block; font-weight: 700; color: var(--bk-ink); font-size: .92rem; line-height: 1.25; }
.rlt-bk-extra-price { display: block; font-size: .82rem; color: var(--bk-muted); }
.rlt-bk-qty { display: inline-flex; align-items: center; gap: .15rem; }
button.rlt-bk-qty-btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--bk-line); background: #fff; color: var(--bk-blue); font-weight: 800; font-size: 1.15rem; line-height: 1; padding: 0; cursor: pointer; }
button.rlt-bk-qty-btn:hover:not(:disabled), button.rlt-bk-qty-btn:focus-visible { border-color: var(--bk-blue); background: color-mix(in srgb, var(--bk-blue) 6%, #fff); color: var(--bk-blue); }
button.rlt-bk-qty-btn:disabled { color: var(--bk-faint); cursor: not-allowed; opacity: .6; }
.rlt-bk-qty-n { min-width: 1.5rem; text-align: center; font-weight: 800; color: var(--bk-ink); }
button.rlt-bk-more { display: block; margin: .6rem auto 0; background: none; border: 0; color: var(--bk-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: .4rem .6rem; }
button.rlt-bk-more:hover, button.rlt-bk-more:focus-visible { color: var(--bk-navy); background: none; }
.rlt-bk-extras-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.rlt-bk-extras-actions button { width: auto; margin: 0; }
.rlt-bk-extras-more { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.rlt-bk-extras-more:empty { display: none; }
.rlt-bk-extras-more button { width: auto; margin: 0; }
button.rlt-bk-primary.rlt-bk-inline { padding: .75rem 1.25rem; font-size: 1rem; }

/* ---- loading placeholders ---- */
.rlt-bk-sk { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--bk-soft) 25%, color-mix(in srgb, var(--bk-soft) 40%, #fff) 50%, var(--bk-soft) 75%); background-size: 200% 100%; animation: rlt-bk-sk 1.2s infinite linear; }
@keyframes rlt-bk-sk { to { background-position: -200% 0; } }
.rlt-bk-sk-chip { height: 2.6rem; }

/* ---- phone bar ---- */
.rlt-bk-bar { display: none; }
@media (max-width: 960px) {
	.rlt-bk { grid-template-columns: minmax(0, 1fr); }
	.rlt-bk-step { scroll-margin-top: 140px; }
	.rlt-bk-summary { position: static; scroll-margin-top: 80px; }
	.rlt-bk-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 16px calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--bk-line); box-shadow: 0 -8px 24px rgba(11, 26, 38, .1); }
	.rlt-bk-bar strong { display: block; font-size: .9rem; color: var(--bk-ink); }
	.rlt-bk-bar span { font-size: .82rem; color: var(--bk-muted); }
	a.rlt-bk-bar-btn, a.rlt-bk-bar-btn:visited, button.rlt-bk-bar-btn { flex: 0 0 auto; width: auto; margin: 0; border: 0; font: inherit; font-weight: 700; cursor: pointer; background: var(--bk-navy); color: #fff !important; text-decoration: none; font-weight: 700; border-radius: 10px; padding: .6rem 1rem; }
	html.rlt-bk-has-bar body { padding-bottom: 72px; }
}
@media (max-width: 560px) {
	.rlt-bk-modes { grid-template-columns: 1fr; }
	.rlt-bk-trailers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
	.rlt-bk-step-head { padding: .95rem 1rem; }
	.rlt-bk-step-summary { white-space: normal; }
	.rlt-bk-step-body { padding: 0 1rem 1.1rem; }
	.rlt-bk-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rlt-bk-extras { grid-template-columns: minmax(0, 1fr); }
	.rlt-bk-extras-actions button, .rlt-bk-extras-more button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.rlt-bk-page *, .rlt-bk-page *::after { animation: none !important; transition: none !important; }
}

/* ---- Roadside Retro skin (D-048) ---- */
.rlt-bk-page { background: var(--bk-soft); }
.rlt-bk-hero { background: var(--bk-soft); color: var(--bk-navy); padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.rlt-bk-hero::after { display: none; }
.rlt-bk-hero h1 { color: var(--bk-navy); font-weight: 400; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); }
.rlt-bk-hero-sub { color: var(--bk-muted); opacity: 1; }
.rlt-bk-preview { background: var(--bk-paper); border: 2px solid var(--bk-navy); border-radius: 8px; color: var(--bk-navy); }
.rlt-bk-preview a, .rlt-bk-preview a:visited { color: var(--bk-blue); }
.rlt-bk-wrap { margin-top: 0; }
.rlt-bk-step { background: var(--bk-paper); border: 2px solid var(--bk-navy); box-shadow: 4px 4px 0 var(--bk-navy); }
.rlt-bk-step.is-active { border-color: var(--bk-navy); box-shadow: 5px 5px 0 var(--bk-navy); }
.rlt-bk-step.is-later { background: transparent; border-color: color-mix(in srgb, var(--bk-navy) 45%, transparent); box-shadow: none; }
.rlt-bk-step.is-active .rlt-bk-step-body { border-top: 2px dashed var(--bk-navy); margin: 0 1.25rem; padding: 1.1rem 0 1.35rem; }
.rlt-bk-num { width: 2.6rem; height: 2.6rem; font-family: var(--global-heading-font-family, Georgia, serif); font-weight: 400; font-size: 1.15rem; background: var(--bk-paper); color: var(--bk-navy); border: 2px solid var(--bk-navy); }
.rlt-bk-step.is-active .rlt-bk-num { background: var(--bk-blue); color: var(--bk-paper); box-shadow: none; }
.rlt-bk-num.is-done { background: var(--bk-navy); color: var(--bk-paper); }
.rlt-bk-step h2 { font-weight: 400; font-size: 1.35rem; }
button.rlt-bk-change { border: 0; border-radius: 0; padding: .35rem .2rem; color: var(--bk-blue); text-decoration: underline; text-underline-offset: 3px; }
button.rlt-bk-change:hover, button.rlt-bk-change:focus-visible { background: none; color: var(--global-palette2, #9a2621); }
.rlt-bk-empty { background: var(--bk-soft); border: 2px dashed var(--bk-navy); }
button.rlt-bk-trailer { background: #fff; border: 2px solid var(--bk-navy); border-radius: 12px; box-shadow: 3px 3px 0 var(--bk-navy); }
button.rlt-bk-trailer:hover, button.rlt-bk-trailer:focus-visible { border-color: var(--bk-navy); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bk-navy); background: #fff; }
button.rlt-bk-trailer.is-on { border-color: var(--bk-navy); outline: 3px solid var(--bk-blue); outline-offset: 2px; box-shadow: 3px 3px 0 var(--bk-navy); }
.rlt-bk-trailer-photo { border: 2px solid var(--bk-navy); border-radius: 8px; }
.rlt-bk-badge { background: var(--bk-blue); border: 2px solid var(--bk-navy); border-radius: 6px; }
.rlt-bk-trailer-price { color: var(--bk-navy); font-weight: 600; }
button.rlt-bk-mode { background: #fff; border: 2px solid var(--bk-navy); border-radius: 12px; }
button.rlt-bk-mode:hover:not(:disabled), button.rlt-bk-mode:focus-visible { border-color: var(--bk-navy); background: #fff; box-shadow: 3px 3px 0 var(--bk-navy); }
button.rlt-bk-mode.is-on, button.rlt-bk-mode.is-on:hover { background: var(--bk-navy); border-color: var(--bk-navy); color: var(--bk-paper); box-shadow: 3px 3px 0 var(--bk-yellow); }
button.rlt-bk-mode.is-on .rlt-bk-mode-title { color: var(--bk-paper); }
button.rlt-bk-mode.is-on .rlt-bk-mode-text, button.rlt-bk-mode.is-on .rlt-bk-mode-note { color: var(--bk-soft); }
button.rlt-bk-mode.is-off { background: var(--bk-soft); border-style: dashed; }
.rlt-bk-mode-icon { background: var(--bk-yellow); color: var(--bk-navy); border: 2px solid var(--bk-navy); }
.rlt-bk-mode.is-on .rlt-bk-mode-icon { background: var(--bk-yellow); color: var(--bk-navy); }
.rlt-bk-warn { color: var(--bk-navy); background: color-mix(in srgb, var(--bk-yellow) 30%, var(--bk-paper)); border: 2px solid var(--bk-navy); }
.rlt-bk-ext { border: 2px solid var(--bk-navy); background: #fff; }
.rlt-bk-ext.is-on { border-color: var(--bk-navy); background: color-mix(in srgb, var(--bk-green) 8%, #fff); }
.rlt-bk-switch { background: var(--bk-line); border: 2px solid var(--bk-navy); box-sizing: content-box; }
/* summary: an order ticket with a navy top */
.rlt-bk-summary { background: var(--bk-paper); border: 2px solid var(--bk-navy); box-shadow: 5px 5px 0 var(--bk-navy); overflow: hidden; }
.rlt-bk-sum-head { margin: -1.25rem -1.25rem 0; padding: 1rem 1.25rem; background: var(--bk-navy); }
.rlt-bk-sum-head img, .rlt-bk-sum-ph { border: 2px solid var(--bk-soft); }
.rlt-bk-sum-kicker { color: var(--bk-yellow); }
.rlt-bk-sum-head strong { color: var(--bk-paper); font-family: var(--global-heading-font-family, Georgia, serif); font-weight: 400; font-size: 1.2rem; }
.rlt-bk-sum-price { color: var(--bk-soft); }
.rlt-bk-promo { background: var(--bk-yellow); border: 2px solid var(--bk-navy); border-radius: 8px; }
.rlt-bk-sum-row > .rlt-bk-icon { background: var(--bk-yellow); color: var(--bk-navy); border: 2px solid var(--bk-navy); }
.rlt-bk-sum-row.is-empty > .rlt-bk-icon { background: var(--bk-soft); color: var(--bk-faint); border-style: dashed; }
.rlt-bk-sum-label { color: var(--bk-navy); }
.rlt-bk-sum-total { border-top: 2px dotted var(--bk-line); }
.rlt-bk-sum-total strong { font-family: var(--global-heading-font-family, Georgia, serif); font-weight: 400; color: var(--bk-blue); }
button.rlt-bk-primary { background: var(--bk-blue); color: var(--bk-paper); border: 2px solid var(--bk-navy); border-radius: 10px; box-shadow: 3px 3px 0 var(--bk-navy); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
button.rlt-bk-primary:hover:not(:disabled), button.rlt-bk-primary:focus-visible { background: var(--global-palette2, #9a2621); color: var(--bk-paper); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bk-navy); }
button.rlt-bk-primary:disabled { background: var(--bk-soft); color: var(--bk-muted); border: 2px dashed var(--bk-navy); box-shadow: none; }
button.rlt-bk-secondary { background: var(--bk-paper); color: var(--bk-navy); border: 2px solid var(--bk-navy); border-radius: 10px; }
button.rlt-bk-secondary:hover, button.rlt-bk-secondary:focus-visible { border-color: var(--bk-navy); background: #fff; color: var(--bk-navy); box-shadow: 3px 3px 0 var(--bk-navy); }
.rlt-bk-status { border: 2px solid currentColor; }
.rlt-bk-status.is-wait { border-style: dashed; }
.rlt-bk-extra { border: 2px solid var(--bk-navy); background: #fff; }
.rlt-bk-extra.is-on { border-color: var(--bk-navy); background: color-mix(in srgb, var(--bk-yellow) 22%, #fff); box-shadow: 3px 3px 0 var(--bk-navy); }
.rlt-bk-extra-photo { border: 2px solid var(--bk-navy); }
button.rlt-bk-qty-btn { border: 2px solid var(--bk-navy); color: var(--bk-navy); background: var(--bk-paper); }
button.rlt-bk-qty-btn:hover:not(:disabled), button.rlt-bk-qty-btn:focus-visible { border-color: var(--bk-navy); background: var(--bk-yellow); color: var(--bk-navy); }
button.rlt-bk-more { color: var(--bk-blue); }
@media (max-width: 960px) {
	.rlt-bk-bar { background: var(--bk-navy); border-top: 3px solid var(--bk-yellow); box-shadow: none; }
	.rlt-bk-bar strong { color: var(--bk-paper); font-family: var(--global-heading-font-family, Georgia, serif); font-weight: 400; font-size: 1.05rem; }
	.rlt-bk-bar span { color: var(--bk-soft); }
	button.rlt-bk-bar-btn:disabled { opacity: .6; cursor: wait; }
	a.rlt-bk-bar-btn, a.rlt-bk-bar-btn:visited, button.rlt-bk-bar-btn { background: var(--bk-yellow); color: var(--bk-navy) !important; border: 2px solid var(--bk-soft); }
}
@media (max-width: 560px) {
	.rlt-bk-step.is-active .rlt-bk-step-body { margin: 0 1rem; padding: 1rem 0 1.1rem; }
	.rlt-bk-sum-head { margin: -1.25rem -1.25rem 0; }
}

/* ---- start with your dates or a trailer (D-049) ---- */
.rlt-bk-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
button.rlt-bk-start-opt { display: flex; flex-direction: column; gap: .15rem; text-align: left; background: var(--bk-paper); color: var(--bk-navy); border: 2px solid var(--bk-navy); border-radius: 12px; padding: .85rem 1rem; cursor: pointer; box-shadow: none; transition: transform .12s ease, box-shadow .12s ease; }
button.rlt-bk-start-opt strong { font-family: var(--global-heading-font-family, Georgia, serif); font-weight: 400; font-size: 1.1rem; }
button.rlt-bk-start-opt span { font-size: .88rem; color: var(--bk-muted); }
button.rlt-bk-start-opt:hover, button.rlt-bk-start-opt:focus-visible { background: #fff; color: var(--bk-navy); box-shadow: 3px 3px 0 var(--bk-navy); }
button.rlt-bk-start-opt.is-on, button.rlt-bk-start-opt.is-on:hover { background: var(--bk-navy); color: var(--bk-paper); box-shadow: 3px 3px 0 var(--bk-yellow); }
button.rlt-bk-start-opt.is-on span { color: var(--bk-soft); }
/* trailers that don't fit the chosen window: still shown, greyed, with the reason */
button.rlt-bk-trailer.is-off, button.rlt-bk-trailer.is-off:hover { cursor: not-allowed; opacity: .6; transform: none; box-shadow: none; border-style: dashed; background: var(--bk-soft); }
button.rlt-bk-trailer.is-off img { filter: grayscale(.8); }
.rlt-bk-trailer-why { margin: .35rem .25rem 0; font-size: .82rem; font-weight: 700; color: var(--bk-blue); line-height: 1.3; }
.rlt-bk-sk-card { aspect-ratio: 4 / 5; border-radius: 12px; }
@media (max-width: 560px) {
	.rlt-bk-start { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
	button.rlt-bk-start-opt { padding: .7rem .9rem; }
}
/* the pickup-style cards keep their text at the top when one card is taller (D-050) */
button.rlt-bk-mode { align-content: start; }

/* ---- Booqable's price for each line (D-052) ---- */
.rlt-bk-price { margin-top: 1.1rem; padding-top: 1rem; border-top: 2px dotted var(--bk-line); }
.rlt-bk-price-lines { list-style: none; margin: .4rem 0 .5rem; padding: 0; display: grid; gap: .35rem; }
.rlt-bk-price-lines li { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; font-size: .92rem; color: var(--bk-text); }
.rlt-bk-price-lines strong { white-space: nowrap; color: var(--bk-navy); }
.rlt-bk-fields {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.rlt-bk-steps > .rlt-bk-fields { display: grid; gap: .9rem; }

#rlt-bk-bar-price { min-width: 0; }
#rlt-bk-bar-price span { white-space: normal; }

/* QA: make pending changes, return options and narrow-screen recovery clear. */
.rlt-bk-trailer-option { min-width: 0; display: grid; gap: .5rem; align-content: start; }
.rlt-bk-trailer-option > .rlt-bk-trailer { width: 100%; height: 100%; }
.rlt-bk-trailer-option > a { padding: .2rem .6rem; font-size: .85rem; }
.rlt-bk-extension-info, .rlt-bk-ext { border: 2px solid var(--bk-navy); padding: 1rem; border-radius: 10px; background: var(--bk-cream, #fff8ec); }
.rlt-bk-extension-info p { margin: .4rem 0; }
.rlt-bk-ext { background: #fff1bc; }
.rlt-bk-ext input { min-width: 22px; min-height: 22px; }
.rlt-bk-step-head { flex-wrap: wrap; }
.rlt-bk-step-body a { display: inline-block; margin-bottom: .5rem; }
.rlt-bk-summary > a.rlt-bk-sum-link { display: block; margin: .55rem 0 0; font-size: .85rem; font-weight: 600; color: var(--bk-navy); }
.rlt-bk-summary > a.rlt-bk-sum-link + a.rlt-bk-sum-link { margin-top: .2rem; }
.rlt-bk-trailer-spec { margin: .15rem .25rem 0; color: var(--bk-muted); font-size: .78rem; line-height: 1.35; }
.rlt-bk-summary { scroll-margin-top: 150px; overflow-wrap: anywhere; }
/* D-102: keep the desktop summary below the actual sticky header, with its bottom controls reachable
   even when the rental details are taller than the available window. Phones retain the existing bottom bar. */
@media (min-width: 961px) {
	.rlt-bk-summary { box-sizing: border-box; max-height: calc(100dvh - var(--rlt-summary-top, 1.25rem) - 16px); overflow-y: auto; }
}
.rlt-bk-extras-actions { flex-wrap: wrap; }
@media (max-width: 960px) {
 html.rlt-bk-has-bar body { padding-bottom: calc(var(--rlt-booking-bar-height, 120px) + 24px); }
 .rlt-bk-summary { margin-bottom: 1.5rem; }
 .rlt-bk-bar { align-items: center; }
}

/* ---- D-071: deposits in the summary, "are you sure" before clearing, earlier return for a booked trailer ---- */
.rlt-bk-deposits { border-top: 1px dashed var(--bk-line); padding-top: .45rem; }
.rlt-bk-confirm { margin: .75rem 0 1rem; padding: .85rem 1rem; border: 2px solid var(--bk-navy); border-radius: 10px; background: var(--bk-paper, #fff); }
.rlt-bk-confirm p { margin: 0 0 .6rem; font-weight: 600; color: var(--bk-navy); }
.rlt-bk-confirm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.rlt-bk-confirm-actions button { width: auto; margin: 0; }
button.rlt-bk-earlier { width: 100%; margin-top: .4rem; font-size: .88rem; }

/* ---- D-071 follow-up (N13): on phones the extras buttons stay in view above the price bar while the list scrolls ---- */
@media (max-width: 960px) {
	.rlt-bk-extras-actions { position: sticky; bottom: var(--rlt-booking-bar-height, 72px); z-index: 5; margin-top: .75rem; padding: .6rem 0 .75rem; background: var(--bk-paper); box-shadow: 0 -12px 14px -12px rgba(11, 26, 38, .35); }
}

/* ---- D-091: the rental period as the Booqable store's dialog (like D-077's; replaces D-078's inline month) ----
   The step is a "Select a rental period" bar; the dialog has From and Until (date and time each), the month (two
   on wide screens), and the chosen end's times as tiles grouped by hour, each pickup tile marked with who can do
   it: a key for Self-Service, a person for With staff. */
.rlt-bk button.rlt-bk-period { display: flex; align-items: center; gap: .9rem; width: 100%; margin: 0; padding: .85rem 1.1rem; border: 2px solid var(--bk-navy); border-radius: 10px; background: var(--bk-navy); color: var(--bk-paper); text-align: left; line-height: 1.3; cursor: pointer; box-shadow: 3px 3px 0 var(--bk-yellow); }
.rlt-bk button.rlt-bk-period:hover, .rlt-bk button.rlt-bk-period:focus-visible { background: var(--bk-blue); color: #fff; }
.rlt-bk button.rlt-bk-period:focus-visible { outline: 3px solid var(--bk-navy); outline-offset: 3px; }
.rlt-bk-period-icon svg { width: 1.6rem; height: 1.6rem; }
.rlt-bk-period-text { display: grid; gap: .1rem; min-width: 0; }
.rlt-bk-period-text strong { font-size: 1.05rem; }
.rlt-bk-period-text span { font-size: .9rem; opacity: .9; }
.rlt-bk-period-go { margin-left: auto; font-size: 1.7rem; line-height: 1; }
html.rlt-bk-pp-open { overflow: hidden; }
.rlt-bk-pp { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 2vh 16px; }
.rlt-bk-pp-back { position: absolute; inset: 0; background: rgba(11, 26, 38, .55); }
.rlt-bk-pp-box { position: relative; display: flex; flex-direction: column; width: min(860px, 100%); max-height: 96vh; overflow: auto; background: var(--bk-paper); border: 2px solid var(--bk-navy); border-radius: 14px; box-shadow: 6px 6px 0 var(--bk-navy); color: var(--bk-navy); }
.rlt-bk .rlt-bk-pp button { margin: 0; line-height: 1.2; }
.rlt-bk-pp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 2px solid var(--bk-navy); }
.rlt-bk-pp-head h3 { margin: 0; font-family: var(--global-heading-font-family, Georgia, serif); font-weight: 400; font-size: 1.3rem; color: var(--bk-navy); }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-close { width: 2.4rem; height: 2.4rem; padding: 0; border: 2px solid var(--bk-navy); border-radius: 50%; background: #fff; color: var(--bk-navy); font-size: 1.4rem; cursor: pointer; }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-close:hover, .rlt-bk .rlt-bk-pp button.rlt-bk-pp-close:focus-visible { background: var(--bk-navy); color: var(--bk-paper); }
.rlt-bk-pp-fields { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.4rem; padding: .8rem 1.2rem 1rem; background: var(--bk-soft); border-bottom: 1px solid var(--bk-line); }
.rlt-bk-pp-field { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .5rem; }
.rlt-bk-pp-label { grid-column: 1 / -1; font-size: .85rem; font-weight: 700; }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-input { display: flex; align-items: center; justify-content: space-between; gap: .4rem; height: 2.75rem; padding: 0 .7rem; border: 2px solid color-mix(in srgb, var(--bk-navy) 30%, var(--bk-line)); border-radius: 8px; background: #fff; color: var(--bk-navy); font-size: 1rem; font-weight: 600; text-align: left; font-variant-numeric: tabular-nums; cursor: pointer; }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-input.is-empty { color: var(--bk-faint); font-weight: 500; }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-input.is-on { border-color: var(--bk-navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-blue) 25%, transparent); }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-input.is-self { border-color: var(--bk-green); color: var(--bk-green); }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-input:disabled { background: color-mix(in srgb, #fff 55%, var(--bk-soft)); cursor: default; }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-input:focus-visible { outline: 3px solid var(--bk-navy); outline-offset: 2px; }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-clear { position: absolute; top: .55rem; right: 1.2rem; padding: .1rem .2rem; border: 0; background: none; color: var(--bk-muted); font-size: .85rem; cursor: pointer; }
.rlt-bk .rlt-bk-pp button.rlt-bk-pp-clear:disabled { visibility: hidden; }
/* icons: a key for Self-Service, a person for With staff */
.rlt-bk-ic { display: inline-flex; vertical-align: middle; }
.rlt-bk-ic svg { width: 1rem; height: 1rem; }
.rlt-bk-ic.is-self { color: var(--bk-green); }
.rlt-bk-ic.is-staff { color: var(--bk-navy); }
/* the month (left) and the panel (right): a second month, or the chosen end's times */
.rlt-bk-pp-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .7rem; border-top: 1px solid var(--bk-line); border-bottom: 1px solid var(--bk-line); }
.rlt-bk-pp-body > .rlt-bk-when-cal { padding: .9rem 1.2rem; }
.rlt-bk-pp-panel { min-width: 0; border-left: 1px solid var(--bk-line); }
.rlt-bk-pp-panel.is-month > .rlt-bk-when-cal { padding: .9rem 1.2rem; }
.rlt-bk-pp-panel.is-times { background: var(--bk-soft); }
.rlt-bk-cal-nav { display: grid; grid-template-columns: 2.3rem 1fr 2.3rem; align-items: center; text-align: center; margin-bottom: .5rem; }
.rlt-bk-cal-nav strong { font-size: 1.02rem; color: var(--bk-navy); }
.rlt-bk button.rlt-bk-nav { width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%; border: 2px solid var(--bk-navy); background: var(--bk-paper); color: var(--bk-navy); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.rlt-bk button.rlt-bk-nav:hover:not(:disabled), .rlt-bk button.rlt-bk-nav:focus-visible { background: var(--bk-navy); color: var(--bk-paper); }
.rlt-bk button.rlt-bk-nav:disabled { opacity: .3; cursor: default; }
.rlt-bk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; isolation: isolate; --bk-range: color-mix(in srgb, var(--bk-yellow) 40%, #fff); }
.rlt-bk-cal.is-loading { opacity: .45; }
/* Opening the picker (or a new month): acknowledge the wait immediately, before availability arrives. */
.rlt-bk-when-cal { position: relative; }
.rlt-bk-month-loading { position: absolute; inset: 3.8rem 1.2rem 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; background: var(--bk-paper); color: var(--bk-navy); border: 1px dashed var(--bk-line); border-radius: 10px; font-size: .9rem; font-weight: 700; }
.rlt-bk-loading-wheel { display: block; width: 32px; height: 32px; border: 4px solid var(--bk-line); border-top-color: var(--bk-blue); border-radius: 50%; animation: rlt-bk-loading-turn .8s linear infinite; }
@keyframes rlt-bk-loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rlt-bk-loading-wheel { animation: none; } }
.rlt-bk-cal-h { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bk-muted); padding-bottom: .3rem; }
.rlt-bk button.rlt-bk-day { position: relative; height: 2.75rem; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 2px solid transparent; border-radius: 999px; background: transparent; color: var(--bk-navy); font-size: .98rem; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.rlt-bk button.rlt-bk-day:disabled, .rlt-bk button.rlt-bk-day:disabled:hover { background: transparent; color: var(--bk-faint); font-weight: 400; text-decoration: line-through; cursor: default; }
.rlt-bk button.rlt-bk-day.is-open:hover, .rlt-bk button.rlt-bk-day.is-open:focus-visible { background: var(--bk-yellow); }
.rlt-bk button.rlt-bk-day:focus { outline: none; }
.rlt-bk button.rlt-bk-day:focus-visible { outline: 3px solid var(--bk-navy); outline-offset: 1px; }
.rlt-bk button.rlt-bk-day.is-today .rlt-bk-day-n { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.rlt-bk-day-key svg { width: .8rem; height: .8rem; }
/* the rental: the pickup red, the return navy, the days between shaded */
.rlt-bk button.rlt-bk-day.is-range, .rlt-bk button.rlt-bk-day.is-range:disabled { border-radius: 0; background: var(--bk-range); color: var(--bk-navy); text-decoration: none; }
/* Join the band behind each rounded endpoint, only towards a neighboring selected day on the same row.
   The calendar's isolated layer keeps these connectors behind the date bubbles, above the calendar paper. */
.rlt-bk button.rlt-bk-day::before { position: absolute; z-index: -1; inset: -2px; background: var(--bk-range); pointer-events: none; }
.rlt-bk button.rlt-bk-day.is-from:has(+ .is-range, + .is-until):not(:nth-child(7n))::before,
.rlt-bk .is-range + button.rlt-bk-day.is-until:not(:nth-child(7n + 1))::before,
.rlt-bk .is-from + button.rlt-bk-day.is-until:not(:nth-child(7n + 1))::before { content: ''; }
.rlt-bk button.rlt-bk-day.is-from::before { left: 50%; }
.rlt-bk button.rlt-bk-day.is-until::before { right: 50%; }
.rlt-bk button.rlt-bk-day.is-from, .rlt-bk button.rlt-bk-day.is-from:hover, .rlt-bk button.rlt-bk-day.is-from:disabled { background: var(--bk-blue); border-color: var(--bk-navy); color: var(--bk-paper); text-decoration: none; font-weight: 800; }
.rlt-bk button.rlt-bk-day.is-until, .rlt-bk button.rlt-bk-day.is-until:hover { background: var(--bk-navy); border-color: var(--bk-navy); color: var(--bk-paper); font-weight: 800; }
.rlt-bk button.rlt-bk-day.is-from.is-until { background: linear-gradient(135deg, var(--bk-blue) 50%, var(--bk-navy) 50%); }
.rlt-bk-day.is-from .rlt-bk-ic, .rlt-bk-day.is-until .rlt-bk-ic { color: var(--bk-paper); }
.rlt-bk-legend { display: flex; align-items: center; gap: .35rem; margin: .7rem 0 0; font-size: .85rem; color: var(--bk-muted); }
/* the times: tiles grouped by hour */
.rlt-bk-tiles { padding: .9rem 1.2rem 1rem; }
.rlt-bk-hours { display: grid; gap: .55rem; max-height: 21rem; overflow-y: auto; padding-right: .2rem; }
.rlt-bk-hour { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: start; }
.rlt-bk-hour-label { display: flex; align-items: baseline; gap: .15rem; padding-top: .55rem; }
.rlt-bk-hour-label strong { font-size: 1.15rem; }
.rlt-bk-hour-label small { font-size: .72rem; font-weight: 700; }
.rlt-bk-hour-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.rlt-bk .rlt-bk-pp button.rlt-bk-tile { display: flex; align-items: center; justify-content: center; gap: .45rem; height: 2.75rem; padding: 0 .4rem; border: 2px solid color-mix(in srgb, var(--bk-navy) 25%, var(--bk-line)); border-radius: 8px; background: #fff; color: var(--bk-navy); font-size: .98rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.rlt-bk .rlt-bk-pp button.rlt-bk-tile:hover, .rlt-bk .rlt-bk-pp button.rlt-bk-tile:focus-visible { border-color: var(--bk-navy); background: color-mix(in srgb, var(--bk-yellow) 35%, #fff); }
.rlt-bk .rlt-bk-pp button.rlt-bk-tile.is-self { border-color: var(--bk-green); background: color-mix(in srgb, var(--bk-green) 9%, #fff); color: var(--bk-green); }
.rlt-bk .rlt-bk-pp button.rlt-bk-tile.is-on { border-color: var(--bk-navy); background: var(--bk-navy); color: var(--bk-paper); box-shadow: 2px 2px 0 var(--bk-yellow); }
/* A1 (D-094): full pickup labels in 64 px tiles; return times keep their simpler 44 px tiles. */
.rlt-bk .rlt-bk-pp button.rlt-bk-tile.is-pickup { flex-direction: column; gap: 3px; height: 64px; padding: 5px; border-color: #8c9bac; background: #fffdf8; box-shadow: 0 1px 1px #1b2a4a10; }
.rlt-bk .rlt-bk-pp button.rlt-bk-tile.is-pickup.is-self { border-color: var(--bk-green); background: #eff8eb; }
.rlt-bk-tile.is-pickup .rlt-bk-tile-time { color: var(--bk-navy); font-size: 16px; font-weight: 800; line-height: 18px; }
.rlt-bk-tile-labels { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.rlt-bk-tile-label { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 17px; padding: 1px 3px; border: 1px solid; border-radius: 4px; font-size: 11px; font-weight: 800; line-height: 13px; }
.rlt-bk-tile-label.is-self { background: #c5eab8; color: #124d25; border-color: #69a653; }
.rlt-bk-tile-label.is-staff { background: #c9dff6; color: #143b62; border-color: #7a9fc3; }
.rlt-bk-tile-label .rlt-bk-ic { flex-shrink: 0; color: inherit; }
.rlt-bk-tile-label .rlt-bk-ic svg { width: 13px; height: 13px; }
.rlt-bk .rlt-bk-pp button.rlt-bk-tile.is-pickup:hover { border-color: var(--bk-navy); background: #fff4d6; }
.rlt-bk .rlt-bk-pp button.rlt-bk-tile.is-pickup:focus-visible { outline: 3px solid var(--bk-navy); outline-offset: 2px; }
.rlt-bk .rlt-bk-pp button.rlt-bk-tile.is-pickup.is-on { border-color: var(--bk-navy); background: #fff4d6; color: var(--bk-navy); box-shadow: 2px 2px 0 var(--bk-yellow); }
.rlt-bk-tile.is-pickup.is-on .rlt-bk-tile-time::after { content: ' ✓'; font-size: 13px; }
/* Conditional options/errors sit above the calendar; the footer contains only Cancel and Apply. */
.rlt-bk-pp .rlt-bk-when-notes { padding: 0 1.2rem; }
.rlt-bk-when-notes > * { margin: .8rem 0 0; }
.rlt-bk-when-notes:empty { display: none; }
.rlt-bk-self-note { display: block; padding: .6rem .8rem; border: 2px solid var(--bk-green); border-radius: 10px; background: #fff; color: var(--bk-text); line-height: 1.45; }
.rlt-bk-self-note strong { color: var(--bk-green); }
.rlt-bk-self-note a, .rlt-bk-step-body .rlt-bk-self-note a { display: inline; margin: 0; color: var(--bk-blue); font-weight: 700; }
.rlt-bk-when-foot { display: flex; justify-content: flex-end; align-items: center; gap: .6rem 1rem; padding: .8rem 1.2rem; background: var(--bk-paper); }
.rlt-bk-when-foot button.rlt-bk-secondary, .rlt-bk-when-foot button.rlt-bk-primary { width: auto; margin: 0; }
@media (max-width: 760px) {
	.rlt-bk-pp-panel.is-month { display: none; } /* one month on narrow screens */
	.rlt-bk-pp-body { grid-template-columns: minmax(0, 1fr); }
	.rlt-bk-pp-panel { border-left: 0; border-top: 1px solid var(--bk-line); }
	.rlt-bk-hours { max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
	.rlt-bk-pp { padding: 0; align-items: stretch; }
	.rlt-bk-pp-box { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
	.rlt-bk-pp-head, .rlt-bk-pp-fields, .rlt-bk-pp-body > .rlt-bk-when-cal, .rlt-bk-tiles, .rlt-bk-pp .rlt-bk-when-notes, .rlt-bk-when-foot { padding-left: 16px; padding-right: 16px; }
	.rlt-bk-pp-fields { grid-template-columns: minmax(0, 1fr); }
	.rlt-bk .rlt-bk-pp button.rlt-bk-pp-clear { right: 16px; }
	.rlt-bk-when-foot { position: sticky; bottom: 0; z-index: 2; }
	.rlt-bk-when-foot button.rlt-bk-secondary, .rlt-bk-when-foot button.rlt-bk-primary { flex: 1 1 0; }
}

/* The self-service card (owner, 2026-11-11): a short "You'll need" list; at its bottom the eligible trailers (links)
   and "Full Self Service Requirements". Links can't be inside the card's button, so that part (.rlt-bk-mode-below)
   is laid over the card's bottom, and the button keeps room for it with a hidden copy of the same text in the same
   column width (.rlt-bk-mode-room), however it wraps. Left/right: border + padding (+ icon and gap). */
.rlt-bk-mode-wrap { position: relative; display: grid; }
.rlt-bk-mode-wrap > button.rlt-bk-mode { width: 100%; height: 100%; grid-template-areas: "i t" "i x" "i n" "i l"; }
.rlt-bk-mode-list { display: block; margin: .2rem 0 0; }
.rlt-bk-mode-li { display: block; position: relative; padding-left: 1rem; }
.rlt-bk-mode-li::before { content: "\2022"; position: absolute; left: .15rem; }
.rlt-bk-mode-need { display: block; font-weight: 700; color: var(--bk-ink); }
.rlt-bk-mode-room, .rlt-bk-mode-below { display: block; font-size: .9rem; line-height: 1.4; }
.rlt-bk-mode-room { grid-area: l; margin-top: .6rem; visibility: hidden; }
.rlt-bk-mode-below { position: absolute; left: calc(2px + 1.1rem + 3rem + .9rem); right: calc(2px + 1.1rem); bottom: calc(2px + 1.1rem); color: var(--bk-muted); pointer-events: none; }
.rlt-bk-mode-below a { pointer-events: auto; color: var(--bk-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.rlt-bk-mode-below a:hover, .rlt-bk-mode-below a:focus-visible { color: var(--bk-navy); }
.rlt-bk-mode-eligible { display: block; font-weight: 700; color: var(--bk-ink); }
.rlt-bk-mode-room .rlt-bk-mode-trailer, .rlt-bk-mode-room .rlt-bk-mode-link { font-weight: 700; }
.rlt-bk-mode-link { display: block; margin-top: .45rem; }
/* not the steps' usual link spacing (inline-block, margin below): the hidden copy has none */
.rlt-bk-step-body .rlt-bk-mode-below a { display: inline; margin: 0; }
.rlt-bk-step-body .rlt-bk-mode-below a.rlt-bk-mode-link { display: block; margin: .45rem 0 0; }
.rlt-bk-mode-wrap:has(> button.rlt-bk-mode.is-on) .rlt-bk-mode-below { color: var(--bk-soft); }
.rlt-bk-mode-wrap:has(> button.rlt-bk-mode.is-on) .rlt-bk-mode-below a { color: var(--bk-yellow); }
button.rlt-bk-mode.is-on .rlt-bk-mode-need { color: var(--bk-paper); }

/* ---- "Find a pickup time" on other pages (D-093): only the dialog, over the page ---- */
.rlt-bk-page.rlt-bk-browse { padding: 0; background: none; }
.rlt-bk-browse .rlt-bk { display: block; }

/* ---- The rental period dialog without jumps (D-093) ---- */
/* Top-aligned: a taller or shorter dialog grows at the bottom instead of moving up and down as a whole. */
@media (min-width: 561px) { .rlt-bk-pp { align-items: flex-start; padding-top: max(2vh, 16px); } } /* phones: full screen */
/* Wide screens: the times panel is always the same height (it scrolls inside), and the month view keeps that
   height, so tapping a day or a time field doesn't resize the dialog. */
@media (min-width: 761px) {
	.rlt-bk-pp-panel.is-times .rlt-bk-hours { height: 21rem; max-height: none; align-content: start; }
	.rlt-bk-pp-body { min-height: 26.75rem; } /* the times panel's height (measured: 427 px at 16 px text) */
}
/* A day's times on their way: tile-sized placeholders, not an empty panel. */
.rlt-bk-pp .rlt-bk-tile-sk { display: block; height: 2.75rem; border-radius: 8px; }
.rlt-bk-pp .rlt-bk-tile-sk.is-pickup { height: 64px; }
/* Answers that take a moment: what is shown dims, only after a short wait (quick answers don't flash). */
.rlt-bk-pp-body .rlt-bk-tiles, .rlt-bk-pp-body .rlt-bk-cal { transition: opacity .15s; }
.rlt-bk-pp-body.is-busy .rlt-bk-tiles, .rlt-bk-pp-body.is-busy .rlt-bk-cal { opacity: .6; transition: opacity .2s .3s; }