/** * /book/ — "Option D / app style" look (2026-10-18), matching the home page (home-d-N.css). * Look only: pale blue page, white rounded card, rounded service cards with a blue "Select +" pill, * blue rounded day boxes and time pills, red pill Next. LatePoint's flow and markup are untouched; * every category and service stays visible (no tabs). Loads after book-simple-5.css; bump N on each edit (Cloudflare). * $D = html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element */ /* ---------- Page + card ---------- */ html body .lqb.lqb--simple, html body.has-booking-hero .lqb.lqb--simple.booking-hero { background: #f2f6fa !important; } html body .lqb.lqb--simple .lqb-shell { background: transparent !important; max-width: 820px !important; } html body .lqb.lqb--simple .lqhh-wrap .lqhh { border-radius: 24px !important; overflow: hidden !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area { background: #ffffff !important; border-radius: 24px !important; padding: 20px 20px 8px !important; box-shadow: 0 8px 28px rgba(12, 74, 125, .10) !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-booking-form-element, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-form-w { background: #ffffff !important; } /* ---------- Steps: rounded pills ---------- */ html body .lqb.lqb--simple .lqb-head { padding: 0 0 16px !important; } html body .lqb.lqb--simple .lqb-progress { background: transparent !important; border: 0 !important; padding: 0 !important; } html body .lqb.lqb--simple .lqb-steps { gap: 8px !important; } html body .lqb.lqb--simple .lqb-steps li { flex-direction: row !important; justify-content: center !important; gap: 8px !important; background: #ffffff !important; border-radius: 26px !important; padding: 8px 10px !important; box-shadow: 0 2px 12px rgba(12, 74, 125, .07) !important; } html body .lqb.lqb--simple .lqb-steps li + li::after { display: none !important; } html body .lqb.lqb--simple .lqb-num { width: 32px !important; height: 32px !important; border-radius: 16px !important; background: #e3ecf5 !important; color: #0c4a7d !important; border: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; } html body .lqb.lqb--simple .lqb-steps li.is-current { background: #0c4a7d !important; } html body .lqb.lqb--simple .lqb-steps li.is-current .lqb-num { background: #ffffff !important; color: #0c4a7d !important; } html body .lqb.lqb--simple .lqb-steps li.is-current strong { color: #ffffff !important; } html body .lqb.lqb--simple .lqb-steps li.is-done .lqb-num { background: #AD0303 !important; color: #ffffff !important; } html body .lqb.lqb--simple .lqb-steps li.is-done strong { color: #0c4a7d !important; } /* ---------- Step 1: categories + service cards ---------- */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-w { border: 0 !important; border-radius: 0 !important; background: transparent !important; margin: 0 0 22px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-info-w .os-item-i { background: transparent !important; padding: 0 0 10px !important; gap: 12px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-info-w:hover .os-item-i { background: transparent !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-info-w .os-item-img-w { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 16px !important; background-color: #e3ecf5 !important; background-size: 70% !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-info-w .os-item-name, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-info-w .os-item-name-w * { color: #0c4a7d !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-info-w .os-item-name-w .os-item-desc, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-info-w .os-item-name-w .os-item-desc * { color: #4a5565 !important; font-size: 14px !important; font-weight: 500 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-w .os-services { padding: 0 !important; gap: 12px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-i { background: #ffffff !important; border: 2px solid #e6ecf3 !important; border-radius: 20px !important; padding: 16px 18px !important; box-shadow: 0 2px 12px rgba(12, 74, 125, .07) !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item:hover .os-item-i, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item.selected .os-item-i { border-color: #AD0303 !important; background: #ffffff !important; box-shadow: 0 8px 22px rgba(12, 74, 125, .12) !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-name { color: #1c2430 !important; font-weight: 700 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-desc { color: #4a5565 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-price { font-size: 20px !important; } /* "Select +" pill, blue like the home page "Book +" */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-i::after { content: "Select +" !important; background: #0c4a7d !important; border-radius: 22px !important; padding: 11px 18px !important; font-size: 15px !important; white-space: pre !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item:hover .os-item-i::after, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item.selected .os-item-i::after { background: #AD0303 !important; } /* ---------- Step 2: calendar + times ---------- */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-day .os-day-box { border-radius: 14px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-day:not(.os-not-available):not(.os-day-passed):not(.selected) .os-day-box { background: #f2f6fa !important; border: 1.5px solid #f2f6fa !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-day:not(.os-not-available):not(.os-day-passed):not(.selected):hover .os-day-box { border-color: #0c4a7d !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-day.os-today:not(.selected) .os-day-box { border: 1.5px dashed #0c4a7d !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-day.selected .os-day-box, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-day.os-today.selected .os-day-box { background: #0c4a7d !important; border: 1.5px solid #0c4a7d !important; box-shadow: 0 8px 18px rgba(12, 74, 125, .28) !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-day.selected .os-day-number { color: #ffffff !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-month-prev-btn, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-month-next-btn { border-radius: 20px !important; background: #e3ecf5 !important; color: #0c4a7d !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-month-prev-btn:hover, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-month-next-btn:hover { background: #0c4a7d !important; color: #ffffff !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .timeslots .dp-timepicker-trigger:not(.is-booked):not(.is-off) { background: #f2f6fa !important; border: 1.5px solid #f2f6fa !important; border-radius: 22px !important; font-weight: 600 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .timeslots .dp-timepicker-trigger:not(.is-booked):not(.is-off):hover { border-color: #0c4a7d !important; color: #0c4a7d !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .timeslots .dp-timepicker-trigger.selected, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .timeslots .dp-timepicker-trigger.selected:hover { background: #0c4a7d !important; border-color: #0c4a7d !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(12, 74, 125, .28) !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .timeslots .dp-timepicker-trigger { border-radius: 22px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .times-header-label span { color: #0c4a7d !important; border-bottom-color: #c9d8e8 !important; } /* ---------- Step 3: details ---------- */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-form-group .os-form-control, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-form-phonefield-group .lp_iti { border-radius: 14px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-form-checkbox-group label { border-radius: 16px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-step-tabs .os-step-tab.active { border-bottom-color: #0c4a7d !important; } /* ---------- Back / Next: pills ---------- */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .latepoint-footer .latepoint-btn.latepoint-next-btn, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .latepoint-footer .latepoint-btn.latepoint-prev-btn { clip-path: none !important; border-radius: 28px !important; min-height: 52px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .latepoint-footer .latepoint-btn.latepoint-next-btn:not(.disabled) { box-shadow: 0 8px 22px rgba(173, 3, 3, .25) !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .latepoint-footer .latepoint-btn.latepoint-prev-btn { background: #e3ecf5 !important; color: #0c4a7d !important; } html body.has-booking-hero button.lp-form-center-next.lp-form-center-next { clip-path: none !important; border-radius: 28px !important; } /* ---------- Visit info: rounded white cards ---------- */ html body .lqb.lqb--simple .lqb-info { background: transparent !important; } html body .lqb.lqb--simple .lqb-info > div, html body .lqb.lqb--simple .lqb-more { background: #ffffff !important; border: 0 !important; border-radius: 20px !important; padding: 18px !important; box-shadow: 0 2px 12px rgba(12, 74, 125, .07); } html body .lqb.lqb--simple .lqb-more { padding: 0 18px !important; } /* ---------- Phone ---------- */ @media (max-width: 768px) { html body .lqb.lqb--simple .lqb-shell { padding: 0 12px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area { padding: 14px 12px 6px !important; border-radius: 20px !important; } html body .lqb.lqb--simple .lqb-steps { gap: 4px !important; } html body .lqb.lqb--simple .lqb-steps li { flex-direction: column !important; padding: 8px 2px !important; gap: 4px !important; border-radius: 18px !important; } html body .lqb.lqb--simple .lqb-steps strong { font-size: 12px !important; } html body .lqb.lqb--simple .lqb-num { width: 28px !important; height: 28px !important; font-size: 14px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-i { padding: 14px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-info-w .os-item-name { font-size: 20px !important; } /* phone action bar (theme.js): white floating pill bar like the home dock, red pill Next */ html body.has-booking-hero .lp-floating-cart-fab.lp-booking-action-bar { left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; width: auto !important; background: #ffffff !important; border-top: 0 !important; border-radius: 34px !important; box-shadow: 0 8px 28px rgba(12, 74, 125, .22) !important; } html body.has-booking-hero .lp-floating-cart-fab.lp-booking-action-bar .lp-bar-btn { clip-path: none !important; border-radius: 26px !important; } html body.has-booking-hero .lp-floating-cart-fab.lp-booking-action-bar .lp-bar-btn.lp-bar-prev, html body.has-booking-hero .lp-floating-cart-fab.lp-booking-action-bar .lp-bar-btn.lp-bar-cart { background: #e3ecf5 !important; color: #0c4a7d !important; } html body.has-booking-hero .lp-floating-cart-fab.lp-booking-action-bar .lp-bar-btn.lp-bar-next { background: #AD0303 !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(173, 3, 3, .28) !important; } html body.has-booking-hero .lp-floating-cart-fab.lp-booking-action-bar .lp-bar-btn.is-disabled, html body.has-booking-hero .lp-floating-cart-fab.lp-booking-action-bar .lp-bar-btn[disabled] { background: #eef2f6 !important; color: #94a3b8 !important; box-shadow: none !important; } } /* ---------- fixes after first check ---------- */ /* category heading: no grey box, just icon + blue text */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-w .os-item-category-info-w, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-w .os-item-category-info-w .os-item-i { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* service: one card only (LatePoint's outer item had its own frame) */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 20px !important; } /* step numbers: round, not skewed */ html body .lqb.lqb--simple .lqb-steps .lqb-num { clip-path: none !important; transform: none !important; } html body .lqb.lqb--simple .lqb-steps .lqb-num::before, html body .lqb.lqb--simple .lqb-steps .lqb-num::after { display: none !important; } @media (max-width: 768px) { html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-price-w { padding: 0 !important; min-width: 0 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-price { padding: 0 !important; text-align: left !important; } } /* ====================================================================== Closer to the Option D booking design (2026-10-18): picture header, category pills, plain service rows with a round + button, no step-1 heading. book-tabs-N.js adds the pills + durations. ====================================================================== */ /* ---------- Header: picture + white sheet with logo, name, place ---------- */ .lqb .lqbh { background: #fff; border-radius: 24px; overflow: hidden; margin: 0 0 16px; box-shadow: 0 8px 28px rgba(12, 74, 125, .10); } .lqb .lqbh-pic { position: relative; height: 260px; background: #e3ecf5; } .lqb .lqbh-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .lqb .lqbh-btn { position: absolute; top: 16px; width: 44px; height: 44px; border-radius: 22px; background: #fff; color: #0c4a7d !important; display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none !important; box-shadow: 0 2px 10px rgba(12, 74, 125, .12); } .lqb .lqbh-back { left: 16px; } .lqb .lqbh-wa { right: 16px; } .lqb .lqbh-sheet { position: relative; margin-top: -32px; background: #fff; border-radius: 28px 28px 0 0; padding: 20px 24px; display: flex; align-items: center; gap: 14px; } .lqb .lqbh-logo { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 32px; background: #fff; border: 2px solid #e3ecf5; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lqb .lqbh-logo img { width: 52px; height: auto; display: block; } html body .lqb .lqbh .lqbh-name { margin: 0 !important; font-size: 26px !important; line-height: 1.1 !important; font-weight: 800 !important; color: #0c4a7d !important; } .lqb .lqbh-place { margin: 4px 0 0; display: flex; align-items: center; gap: 5px; font-size: 14px; color: #4a5565; } .lqb .lqbh-place svg { color: #AD0303; flex: 0 0 14px; } /* ---------- Step 1: no "Service Selection" heading, pills instead of category headings ---------- */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element.current-step-booking__services .latepoint-heading-w { display: none !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .lqbt + .os-item-categories-main-parent .os-item-category-w .os-item-category-info-w { display: none !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-categories-main-parent .os-item-category-w.lqbt-off { display: none !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-categories-main-parent .os-item-category-w { margin: 0 !important; } .lqb .lqbt { display: flex; gap: 8px; overflow-x: auto; margin: 4px 0 12px; padding: 2px 0 6px; scrollbar-width: none; } .lqb .lqbt::-webkit-scrollbar { display: none; } .lqb .lqbt-pill { flex: 0 0 auto; height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: #f2f6fa; color: #1c2430; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; } .lqb .lqbt-pill:hover { background: #e3ecf5; } .lqb .lqbt-pill.is-on { background: #0c4a7d; color: #fff; font-weight: 700; } /* ---------- Service rows: name + minutes, price, round + (red tick when picked) ---------- */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-item-category-w .os-services { gap: 0 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-i { flex-wrap: nowrap !important; gap: 12px !important; background: transparent !important; border: 0 !important; border-radius: 16px !important; box-shadow: inset 0 -1px 0 #eef2f7 !important; padding: 12px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item:hover .os-item-i { background: #f7fafc !important; border: 0 !important; box-shadow: inset 0 -1px 0 #eef2f7 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item.selected .os-item-i { background: #fbe9e9 !important; border: 0 !important; box-shadow: none !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-name-w { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-name { font-size: 17px !important; font-weight: 700 !important; color: #1c2430 !important; text-transform: none !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-desc { display: none !important; } .lqb .lqbt-meta { display: block; margin-top: 2px; font-size: 14px; color: #4a5565; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-price-w { flex: 0 0 auto !important; margin: 0 !important; width: auto !important; min-width: 0 !important; text-align: right !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-price { color: #1c2430 !important; font-size: 17px !important; font-weight: 700 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-price-label { display: none !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-i::after { content: "+" !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border-radius: 20px !important; background: #0c4a7d !important; color: #fff !important; font-size: 26px !important; font-weight: 500 !important; line-height: 38px !important; text-align: center !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item:hover .os-item-i::after { background: #0c4a7d !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item.selected .os-item-i::after { content: "\2713" !important; background: #AD0303 !important; font-size: 20px !important; font-weight: 800 !important; } @media (max-width: 768px) { html body .lqb.lqb--simple .lqb-shell .lqbh { margin: 0 -12px 14px; border-radius: 0 0 24px 24px; } .lqb .lqbh-pic { height: 220px; } .lqb .lqbh-sheet { padding: 18px 20px; } html body .lqb .lqbh .lqbh-name { font-size: 24px !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-i { flex-wrap: nowrap !important; row-gap: 0 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-name-w { flex: 1 1 auto !important; width: auto !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-price { font-size: 17px !important; text-align: right !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-services .os-item .os-item-i::after { margin-left: 0 !important; } } .lqb .lqbh-sheet, .lqb .lqbh-sheet > div { text-align: left; min-width: 0; } .lqb .lqbh-place { justify-content: flex-start; } .lqb .lqbt-pill:focus { outline: none; } .lqb .lqbt-pill:focus-visible { outline: 3px solid rgba(12, 74, 125, .35); outline-offset: 2px; } /* ---------- Fonts as in the Option D design (icons keep their own font) ---------- */ html body .lqb.lqb--simple, html body .lqb.lqb--simple *:not(i):not([class*="icon"]):not([class*="fa-"]) { font-family: 'Source Sans 3', system-ui, sans-serif !important; } html body .lqb.lqb--simple .lqbh .lqbh-name, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-heading-text, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-current-month-label-w, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-current-month-label-w * { font-family: 'Barlow Semi Condensed', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .os-heading-text { font-size: 23px !important; color: #0c4a7d !important; } /* header sheet: left-aligned like the design (theme rules centred it) */ html body .lqb.lqb--simple .lqbh .lqbh-name, html body .lqb.lqb--simple .lqbh .lqbh-place { text-align: left !important; } html body .lqb.lqb--simple .lqbh .lqbh-place { display: flex !important; color: #4a5565 !important; font-size: 14px !important; } /* no tall empty card under a short list (LatePoint gives the form a fixed min height) */ html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .latepoint-form-w, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .latepoint-body, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .latepoint-step-content, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w .latepoint-booking-form-element .latepoint-form { min-height: 0 !important; } html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-w, html body.has-booking-hero:not(.has-customer-dashboard) .lqb.lqb--simple .lqb-form.booking-area .latepoint-booking-form-element { min-height: 0 !important; height: auto !important; } /* Owner 2026-10-18: "if it is not in the artifact, don't show it" — the Option D booking board has no step bar, no visit-info cards and no second centred Next button. (Hours/location: home page; waitlist: /waitlist/.) */ html body .lqb.lqb--simple .lqb-head, html body .lqb.lqb--simple .lqb-progress, html body .lqb.lqb--simple .lqb-info { display: none !important; } html body.has-booking-hero button.lp-form-center-next.lp-form-center-next { display: none !important; } /* LatePoint icons keep their icon font (the Source Sans rule above turned the month arrows into boxes) */ html body .lqb.lqb--simple i.latepoint-icon, html body .lqb.lqb--simple i.latepoint-icon::before, html body .lqb.lqb--simple [class*="latepoint-icon-"]::before { font-family: "latepointIcons" !important; } /* pale blue to the footer, no white band under a short list */ html body.has-booking-hero:not(.has-customer-dashboard):has(.lqb.lqb--simple) { background: #f2f6fa !important; } html body .lqb.lqb--simple { min-height: calc(100vh - 64px); padding-bottom: 110px !important; } /* ====================================================================== One-screen booking (inc/book-d.php + assets/js/book-dpage-N.js), as the "D · App style — mobile booking" board, with the D desktop layout (list left, "Your booking" panel right) on wide screens. ====================================================================== */ .lqd2 { font-family: 'Source Sans 3', system-ui, sans-serif; color: #1c2430; } .lqd2 button { font-family: inherit; } .lqd2 [hidden] { display: none !important; } .lqd2-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #e6ecf3; background: #fff; border-radius: 0; margin: 0 0 18px; } .lqd2-tabs button { height: 48px; background: transparent; border: 0; border-bottom: 3px solid transparent; font-size: 16px; font-weight: 600; color: #4a5565; cursor: pointer; } .lqd2-tabs button.is-on { border-bottom-color: #0c4a7d; color: #0c4a7d; font-weight: 700; } .lqd2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; } .lqd2-main { min-width: 0; } .lqd2-pills { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 10px; padding: 2px 0 6px; scrollbar-width: none; } .lqd2-pills::-webkit-scrollbar { display: none; } .lqd2-pill { flex: 0 0 auto; height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: #f2f6fa; color: #1c2430; font-size: 15px; font-weight: 600; cursor: pointer; } .lqd2-pill.is-on { background: #0c4a7d; color: #fff; font-weight: 700; } .lqd2-pill:focus-visible, .lqd2-row:focus-visible, .lqd2-day:focus-visible, .lqd2-time:focus-visible, .lqd2-tabs button:focus-visible { outline: 3px solid rgba(12, 74, 125, .35); outline-offset: 2px; } .lqd2-list { list-style: none; margin: 0; padding: 0; } .lqd2-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 0; border: 0; border-bottom: 1px solid #eef2f7; background: transparent; text-align: left; cursor: pointer; color: inherit; } .lqd2-row.is-on { background: #fbe9e9; border-radius: 16px; border-bottom-color: transparent; padding: 12px; margin: 0 -12px; width: calc(100% + 24px); } .lqd2-row-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .lqd2-row-t b { font-size: 17px; font-weight: 700; line-height: 1.3; } .lqd2-row-t small { font-size: 14px; color: #4a5565; } .lqd2-row-p { font-size: 17px; font-weight: 700; white-space: nowrap; } .lqd2-row-b { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; } .lqd2-add { background: #0c4a7d; } .lqd2-tick { background: #AD0303; display: none; } .lqd2-row.is-on .lqd2-add { display: none; } .lqd2-row.is-on .lqd2-tick { display: flex; } .lqd2-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .lqd2-facts li { background: #f2f6fa; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: #4a5565; } .lqd2-facts b { color: #0c4a7d; font-size: 16px; } .lqd2-hours p { margin: 0 0 16px; font-size: 16px; line-height: 1.55; } .lqd2-hours b { color: #0c4a7d; } .lqd2-hours a, .lqd2-msg a { color: #AD0303; font-weight: 600; } .lqd2-side { position: sticky; top: 100px; background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 8px 28px rgba(12, 74, 125, .12); display: flex; flex-direction: column; gap: 14px; } .lqd2-side-h { margin: 0; font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 26px; font-weight: 700; color: #0c4a7d; } .lqd2-picked { display: flex; align-items: center; gap: 12px; background: #f2f6fa; border-radius: 16px; padding: 14px; } .lqd2-picked > span { flex: 1 1 auto; display: flex; flex-direction: column; } .lqd2-picked b { font-size: 17px; } .lqd2-picked small { font-size: 14px; color: #4a5565; } .lqd2-hint, .lqd2-note, .lqd2-pay { margin: 0; font-size: 14px; color: #4a5565; } .lqd2-pay { font-size: 15px; } .lqd2-when { display: flex; flex-direction: column; gap: 10px; } .lqd2-when h2 { margin: 6px 0 0; font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 21px; font-weight: 700; color: #0c4a7d; } .lqd2-days { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 7); gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .lqd2-days::-webkit-scrollbar { display: none; } .lqd2-day { height: 64px; border: 0; border-radius: 16px; background: #f2f6fa; color: #1c2430; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 0; } .lqd2-day-w { font-size: 13px; } .lqd2-day-n { font-size: 19px; font-weight: 700; } .lqd2-day.is-on { background: #0c4a7d; color: #fff; } .lqd2-day.is-shut { background: #fff; color: #8a94a3; text-decoration: line-through; cursor: default; } .lqd2-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lqd2-time { height: 44px; border: 0; border-radius: 22px; background: #f2f6fa; color: #1c2430; font-size: 15px; font-weight: 600; cursor: pointer; } .lqd2-time.is-on { background: #0c4a7d; color: #fff; } .lqd2-cta-w { position: sticky; bottom: 16px; z-index: 50; display: flex; justify-content: flex-end; margin-top: 18px; pointer-events: none; } .lqd2-cta { pointer-events: auto; width: 360px; max-width: 100%; height: 60px; border-radius: 30px; background: #AD0303; color: #fff !important; text-decoration: none !important; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font-weight: 700; font-size: 18px; box-shadow: 0 8px 24px rgba(173, 3, 3, .28); } .lqd2-cta:hover { background: #8A0202; } .lqd2-cta.is-off { background: #c9ced6; box-shadow: none; } /* LatePoint form after the hand-over: back link */ .lqb .lqd2-change { display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 0 0 12px; padding: 0 18px 0 12px; border-radius: 22px; background: #fff; color: #0c4a7d !important; font-weight: 700; font-size: 15px; text-decoration: none !important; box-shadow: 0 2px 12px rgba(12, 74, 125, .07); } /* The one-screen page sits in the white card like the mockup sheet */ html body .lqb.lqb--simple .lqb-shell:has(.lqd2) { max-width: 1100px !important; } html body .lqb.lqb--simple .lqd2 { background: #fff; border-radius: 24px; padding: 6px 22px 22px; box-shadow: 0 8px 28px rgba(12, 74, 125, .10); } html body .lqb.lqb--simple .lqb-shell:has(.lqd2) .lqbh { margin-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: none; } html body .lqb.lqb--simple .lqb-shell:has(.lqd2) .lqd2 { border-radius: 0 0 24px 24px; } @media (max-width: 960px) { .lqd2-grid { grid-template-columns: 1fr; gap: 18px; } .lqd2-side { position: static; box-shadow: none; padding: 0; border-radius: 0; } .lqd2-side-h, .lqd2-picked, .lqd2-hint { display: none !important; } .lqd2-cta-w { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); margin: 0; } .lqd2-cta { width: 100%; } html body .lqb.lqb--simple:has(.lqd2) { padding-bottom: 120px !important; } html body .lqb.lqb--simple .lqd2 { padding: 4px 20px 24px; } } @media (max-width: 768px) { html body .lqb.lqb--simple .lqb-shell:has(.lqd2) .lqbh { margin: 0 -12px; border-radius: 0; } html body .lqb.lqb--simple .lqb-shell:has(.lqd2) .lqd2 { margin: 0 -12px; border-radius: 0; } html body .lqb.lqb--simple .lqb-shell:has(.lqd2) .lqbh-sheet { border-radius: 28px 28px 0 0; } } /* fixes: theme rules force

/