/* Riverside Booking – booking form, confirmation & tracking UI.
   Uses Riverside Laundry theme tokens when available, with fallbacks. */
.rlb, .rlb-confirm, .rlb-track { --b-navy: var(--rvl-navy, #0c2a43); --b-ink: var(--rvl-ink, #0f2233); --b-blue: var(--rvl-blue, #1b6fa8); --b-sky: var(--rvl-sky, #f3f8fc); --b-blue-100: var(--rvl-blue-100, #e3f0f9); --b-border: var(--rvl-border, #e2ebf2); --b-text: var(--rvl-text, #3f5468); --b-muted: var(--rvl-muted, #6b7f92); --b-serif: var(--rvl-serif, Georgia, serif); --b-radius: 14px; color: var(--b-text); }
.rlb *, .rlb-confirm *, .rlb-track * { box-sizing: border-box; }
.rlb [hidden], .rlb-confirm [hidden], .rlb-track [hidden] { display: none !important; }
.rlb h2, .rlb h3, .rlb-confirm h1, .rlb-confirm h2, .rlb-track h2, .rlb-track h3 { font-family: var(--b-serif); color: var(--b-ink); margin: 0; }
.rlb-hp { position: absolute; left: -9999px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* Layout */
.rlb { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.rlb__main { display: grid; gap: 14px; min-width: 0; }
.rlb-side-sticky { position: sticky; top: 96px; display: grid; gap: 14px; }

/* Stepper */
.rlb-stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px 14px; border: 1px solid var(--b-border); border-radius: 999px; background: var(--b-sky); }
.rlb-stepper__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 12px; color: var(--b-text); text-decoration: none; }
.rlb-stepper__item + .rlb-stepper__item::before { content: "›"; position: absolute; left: -8px; color: var(--b-muted); font-size: 20px; }
.rlb-stepper__item strong { display: block; color: var(--b-ink); font-size: 14px; }
.rlb-stepper__item small { color: var(--b-muted); font-size: 12px; }
.rlb-stepper__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--b-blue-100); color: var(--b-blue); font-weight: 600; flex-shrink: 0; }
.rlb-stepper__item.is-active .rlb-stepper__num { background: var(--b-navy); color: #fff; }
.rlb-stepper__item.is-done .rlb-stepper__num { background: var(--b-blue); color: #fff; }

/* Cards */
.rlb-card { padding: 20px 22px; border: 1px solid var(--b-border); border-radius: var(--b-radius); background: #fff; scroll-margin-top: 110px; }
.rlb-card__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.rlb-card__head h2 { font-size: 19px; }
.rlb-card__head h2 em { font-family: inherit; font-style: normal; font-weight: 400; font-size: 15px; color: var(--b-muted); }
.rlb-card__head p { margin: 2px 0 0; font-size: 13.5px; color: var(--b-muted); }
.rlb-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--b-blue); color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0; }

/* Fields */
.rlb-grid { display: grid; gap: 12px; }
.rlb-grid--addr { grid-template-columns: 1fr 1fr 110px 120px; }
.rlb-grid--addr .rlb-field--wide { grid-column: span 2; }
.rlb-grid--date { grid-template-columns: 1fr 1fr 1.05fr; align-items: end; }
.rlb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rlb-field { display: block; margin: 0; }
.rlb-field > span:first-child:not(.rlb-input):not(.screen-reader-text) { display: block; font-size: 13px; font-weight: 600; color: var(--b-ink); margin-bottom: 6px; }
.rlb-input { position: relative; display: flex; align-items: center; }
.rlb-input > svg { position: absolute; left: 13px; color: var(--b-muted); pointer-events: none; }
.rlb-input--area > svg { top: 13px; }
.rlb-input input, .rlb-input select, .rlb-input textarea { width: 100%; min-height: 46px; padding: 11px 12px 11px 40px; border: 1.5px solid var(--b-border); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; color: var(--b-ink); appearance: none; }
.rlb-input--plain input { padding-left: 12px; }
.rlb-input textarea { resize: vertical; min-height: 80px; }
.rlb-input--select::after { content: ""; position: absolute; right: 15px; width: 8px; height: 8px; border-right: 2px solid var(--b-muted); border-bottom: 2px solid var(--b-muted); transform: rotate(45deg) translateY(-3px); pointer-events: none; }
.rlb-input input:focus, .rlb-input select:focus, .rlb-input textarea:focus { outline: none; border-color: var(--b-blue); box-shadow: 0 0 0 4px rgba(27, 111, 168, .12); }
.rlb-input.is-invalid input, .rlb-input.is-invalid select { border-color: #c0392b; }
.rlb-err { display: block; min-height: 0; font-style: normal; font-size: 12.5px; color: #c0392b; margin-top: 4px; }
.rlb-err:empty { display: none; }
.rlb-count { display: block; text-align: right; font-size: 12px; color: var(--b-muted); margin-top: 4px; }
.rlb-area-note { margin: 10px 0 0; font-size: 13px; color: #135e41; }
.rlb-sameday { display: flex; gap: 12px; padding: 14px; border-radius: 12px; background: var(--b-sky); color: var(--b-blue); }
.rlb-sameday strong { color: var(--b-ink); font-family: var(--b-serif); }
.rlb-sameday p { margin: 2px 0 0; font-size: 12.5px; color: var(--b-muted); }
.rlb-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13.5px; cursor: pointer; }
.rlb-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--b-navy); flex-shrink: 0; }

/* Services */
.rlb-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rlb-svc { border: 1.5px solid var(--b-border); border-radius: 12px; overflow: hidden; background: #fff; transition: border-color .2s, box-shadow .2s; }
.rlb-svc.is-selected { border: 2px solid var(--b-blue); box-shadow: 0 8px 22px rgba(27, 111, 168, .14); }
.rlb-svc__label { display: block; cursor: pointer; }
.rlb-svc__check { position: absolute; opacity: 0; pointer-events: none; }
.rlb-svc__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #f1f7fc, #d6e6f2); }
.rlb-svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rlb-svc__ph { display: grid; place-items: center; height: 100%; color: rgba(27, 111, 168, .45); }
.rlb-svc__tick { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid #c8d6e2; }
.rlb-svc.is-selected .rlb-svc__tick { background: var(--b-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--b-blue); }
.rlb-svc__check:focus-visible + .rlb-svc__media { outline: 3px solid rgba(27, 111, 168, .45); }
.rlb-svc__body { display: block; padding: 10px 12px 12px; }
.rlb-svc__body strong { display: block; font-family: var(--b-serif); color: var(--b-ink); font-size: 15px; }
.rlb-svc__body small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--b-muted); margin: 2px 0 6px; line-height: 1.4; }
.rlb-svc__body b { color: var(--b-ink); font-size: 15px; }
.rlb-svc__body i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--b-muted); }
.rlb-svc__qty { padding: 0 12px 12px; }
.rlb-svc__qty label > span:first-child { display: block; font-size: 12px; font-weight: 600; color: var(--b-ink); margin-bottom: 4px; }
.rlb-svc__qty small { display: block; font-size: 11px; color: var(--b-muted); margin-top: 4px; }
.rlb-stepper-input { display: grid; grid-template-columns: 34px 1fr 34px; border: 1.5px solid var(--b-border); border-radius: 8px; overflow: hidden; }
.rlb-stepper-input button { border: 0; background: var(--b-sky); color: var(--b-ink); font-size: 18px; cursor: pointer; }
.rlb-stepper-input input { width: 100%; border: 0; text-align: center; font: inherit; font-weight: 600; min-height: 34px; -moz-appearance: textfield; }
.rlb-stepper-input input::-webkit-outer-spin-button, .rlb-stepper-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Add-ons */
.rlb-addons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rlb-addon { border: 1.5px solid var(--b-border); border-radius: 12px; padding: 10px 12px; transition: border-color .2s; }
.rlb-addon.is-selected { border-color: var(--b-blue); background: var(--b-sky); }
.rlb-addon label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rlb-addon__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--b-blue-100); color: var(--b-blue); flex-shrink: 0; }
.rlb-addon__text { flex: 1; }
.rlb-addon__text strong { display: block; font-size: 13.5px; color: var(--b-ink); }
.rlb-addon__text small { font-size: 12px; color: var(--b-muted); }
.rlb-addon__check { width: 20px; height: 20px; accent-color: var(--b-navy); }
.rlb-addon__qty { width: 100%; margin-top: 8px; min-height: 34px; border: 1.5px solid var(--b-border); border-radius: 8px; padding: 4px 10px; font: inherit; }

/* Side panels */
.rlb-panel { padding: 20px; border: 1px solid var(--b-border); border-radius: var(--b-radius); background: #fff; }
.rlb-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }
.rlb-panel__head h2 { font-size: 22px; }
.rlb-panel__head h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.rlb-panel__head small { font-family: var(--rvl-sans, sans-serif); font-weight: 400; font-size: 13px; color: var(--b-muted); }
.rlb-edit { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; font-weight: 600; color: var(--b-blue); text-decoration: none; }
.rlb-summary__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rlb-summary__empty { font-size: 14px; color: var(--b-muted); padding: 12px; background: var(--b-sky); border-radius: 10px; }
.rlb-summary__row { display: flex; justify-content: space-between; gap: 12px; }
.rlb-summary__row strong { display: block; color: var(--b-ink); font-size: 14.5px; }
.rlb-summary__row small { color: var(--b-muted); font-size: 12px; }
.rlb-summary__amt { text-align: right; white-space: nowrap; }
.rlb-summary__row--addon { padding-left: 12px; border-left: 2px solid var(--b-blue-100); }
.rlb-promo { margin: 14px 0; font-size: 13px; }
.rlb-promo summary { cursor: pointer; color: var(--b-blue); font-weight: 600; list-style: none; }
.rlb-promo summary::-webkit-details-marker { display: none; }
.rlb-promo__row { display: flex; gap: 8px; margin-top: 8px; }
.rlb-promo__row input { flex: 1; min-height: 38px; border: 1.5px solid var(--b-border); border-radius: 8px; padding: 6px 10px; font: inherit; text-transform: uppercase; }
.rlb-promo__row button { border: 0; border-radius: 8px; background: var(--b-navy); color: #fff; padding: 0 14px; cursor: pointer; }
.rlb-promo__msg.is-error { color: #c0392b; }
.rlb-promo__msg.is-ok { color: #135e41; }
.rlb-totals { margin: 0; padding-top: 12px; border-top: 1px solid var(--b-border); display: grid; gap: 6px; font-size: 14px; }
.rlb-totals > div { display: flex; justify-content: space-between; gap: 10px; }
.rlb-totals dt small { color: var(--b-muted); font-size: 11.5px; }
.rlb-totals dd { margin: 0; color: var(--b-ink); }
.rlb-totals__grand { padding-top: 8px; margin-top: 4px; }
.rlb-totals__grand dt, .rlb-totals__grand dd { font-family: var(--b-serif); font-size: 22px; font-weight: 700; color: var(--b-ink); }
.rlb-deposit { background: linear-gradient(120deg, #eaf4fb, #f6fafd); border-color: transparent; }
.rlb-deposit__head { display: flex; gap: 12px; align-items: flex-start; color: var(--b-blue); }
.rlb-deposit__head > div { flex: 1; }
.rlb-deposit__head h3 { font-size: 17px; }
.rlb-deposit__head h3 small { font-weight: 400; font-size: 12px; color: var(--b-muted); font-family: var(--rvl-sans, sans-serif); }
.rlb-deposit__head p { margin: 2px 0 0; font-size: 13px; color: var(--b-text); }
.rlb-deposit__head > strong { font-family: var(--b-serif); font-size: 26px; color: var(--b-blue); }
.rlb-ticks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.rlb-ticks li { position: relative; padding-left: 22px; }
.rlb-ticks li::before { content: "✓"; position: absolute; left: 2px; color: var(--b-blue); font-weight: 700; }
.rlb-secure { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--b-muted); }
.rlb-payment-element { min-height: 60px; }
.rlb-muted { color: var(--b-muted); font-size: 13px; margin: 0; }
.rlb-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rlb-trust > div { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--b-sky); color: var(--b-blue); }
.rlb-trust p { margin: 0; font-size: 12px; color: var(--b-muted); }
.rlb-trust strong { display: block; color: var(--b-blue); font-size: 12.5px; }
.rlb-alert { padding: 12px 14px; border-radius: 10px; background: #fdecea; color: #8c2a20; font-size: 14px; }
.rlb-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border: 0; border-radius: 12px; background: var(--b-navy); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.rlb-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(12, 42, 67, .22); }
.rlb-submit[disabled] { opacity: .65; cursor: progress; transform: none; }
.rlb-foot { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 0; font-size: 12px; color: var(--b-muted); text-align: center; }

/* ---------- Confirmation ---------- */
.rlb-confirm__hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f6fafd, #eef5fb); }
.rlb-confirm__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; max-width: 1288px; margin: 0 auto; padding: 48px 24px; }
.rlb-confirm__title { display: flex; align-items: center; gap: 18px; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; }
.rlb-confirm__badge { display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: #bfe6ea; color: var(--b-navy); }
.rlb-confirm__badge--pending { background: #fff2cc; color: #8a5a00; }
.rlb-confirm__sub { font-family: var(--b-serif); font-size: clamp(24px, 2.6vw, 34px); color: var(--b-ink); margin: 6px 0 14px; }
.rlb-confirm__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.rlb-confirm__actions a, .rlb-confirm__actions button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-radius: 10px; border: 1.5px solid #c8d6e2; background: #fff; color: var(--b-ink); font: inherit; font-weight: 600; font-size: 14.5px; text-decoration: none; cursor: pointer; }
.rlb-confirm__actions .is-primary { background: var(--b-navy); border-color: var(--b-navy); color: #fff; }
.rlb-summary-card { padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(12, 42, 67, .14); }
.rlb-summary-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rlb-summary-card__head h2 { font-size: 22px; }
.rlb-pill { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 999px; background: #e6f6ef; color: #135e41; font-size: 13px; font-weight: 600; }
.rlb-pill--warn { background: #fff5e0; color: #7a4d00; }
.rlb-pill--muted { background: #eef1f4; color: #50575e; }
.rlb-kv { margin: 0; display: grid; gap: 0; }
.rlb-kv > div { display: grid; grid-template-columns: 24px 140px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--b-border); border-radius: 10px; margin-top: -1px; font-size: 14px; }
.rlb-kv > div > svg { color: var(--b-blue); }
.rlb-kv dt { color: var(--b-ink); font-weight: 600; }
.rlb-kv dd { margin: 0; color: var(--b-ink); }
.rlb-kv dd small { display: block; color: var(--b-muted); }
.rlb-progress { max-width: 1288px; margin: 0 auto; padding: 28px 24px 0; }
.rlb-progress__card { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 28px; border-radius: 18px; background: var(--b-sky); }
.rlb-progress__card h2 { font-size: clamp(24px, 2.6vw, 32px); }
.rlb-progress__card p { margin: 6px 0 0; }
.rlb-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--b-blue); margin-bottom: 8px; }
.rlb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.rlb-steps li { position: relative; text-align: center; padding: 0 6px; }
.rlb-steps li::before { content: ""; position: absolute; top: 24px; left: -50%; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, #b7cbdb 0 6px, transparent 6px 12px); z-index: 0; }
.rlb-steps li:first-child::before { display: none; }
.rlb-steps li.is-done::before, .rlb-steps li.is-current::before { background: var(--b-blue); }
.rlb-steps__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; background: #fff; color: var(--b-blue); border: 1px solid var(--b-border); }
.rlb-steps li.is-done .rlb-steps__dot { background: var(--b-blue); color: #fff; border-color: var(--b-blue); }
.rlb-steps li.is-current .rlb-steps__dot { background: var(--b-blue); color: #fff; box-shadow: 0 0 0 6px rgba(27, 111, 168, .18); }
.rlb-steps strong { display: block; font-size: 14px; color: var(--b-ink); }
.rlb-steps small { display: block; font-size: 12px; color: var(--b-muted); margin-top: 2px; }
.rlb-manage { margin-top: 16px; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--b-border); }
.rlb-manage p { margin: 0 0 10px; font-size: 14px; }
.rlb-manage .rlb-danger { border: 1.5px solid #e4b9b4; background: #fff; color: #8c2a20; border-radius: 10px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.rlb-notice { max-width: 760px; margin: 40px auto; padding: 28px; text-align: center; border-radius: 18px; background: var(--b-sky); }

/* ---------- Tracking ---------- */
.rlb-track__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--b-border); box-shadow: 0 8px 24px rgba(12, 42, 67, .07); }
.rlb-track__form .rlb-submit { min-height: 46px; padding: 0 24px; width: auto; }
.rlb-track__result { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.rlb-track__panel { padding: 24px; border-radius: 18px; background: var(--b-sky); }
.rlb-track__panel h2 { font-size: 26px; margin-bottom: 4px; }
.rlb-timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.rlb-timeline li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.rlb-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: #cfdde8; }
.rlb-timeline li.is-done:not(:last-child)::before { background: var(--b-blue); }
.rlb-timeline__dot { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #fff; color: var(--b-muted); border: 1px solid var(--b-border); }
.rlb-timeline li.is-done .rlb-timeline__dot { background: var(--b-navy); color: #fff; border-color: var(--b-navy); }
.rlb-timeline li.is-current .rlb-timeline__dot { background: var(--b-blue); color: #fff; border-color: var(--b-blue); box-shadow: 0 0 0 6px rgba(27, 111, 168, .15); }
.rlb-timeline strong { display: block; color: var(--b-ink); }
.rlb-timeline small { color: var(--b-muted); }

@media (max-width: 1100px) {
	.rlb { grid-template-columns: 1fr; }
	.rlb-side-sticky { position: static; }
	.rlb-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rlb-confirm__inner, .rlb-progress__card, .rlb-track__result { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.rlb-stepper { border-radius: 14px; grid-template-columns: 1fr; }
	.rlb-stepper__item + .rlb-stepper__item::before { display: none; }
	.rlb-grid--addr, .rlb-grid--date, .rlb-grid--3, .rlb-trust, .rlb-track__form { grid-template-columns: 1fr; }
	.rlb-grid--addr .rlb-field--wide { grid-column: auto; }
	.rlb-services { grid-template-columns: 1fr 1fr; gap: 8px; }
	.rlb-steps { grid-template-columns: 1fr; gap: 14px; text-align: left; }
	.rlb-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; text-align: left; }
	.rlb-steps li::before { display: none; }
	.rlb-steps__dot { margin: 0; }
	.rlb-kv > div { grid-template-columns: 24px 1fr; }
	.rlb-kv dd { grid-column: 2; }
}