/*
 * LatePoint booking form - Fixfactor skin.
 *
 * Loaded only on /booking/ (see fixfactor_enqueue_assets). Everything here is
 * customer-facing; the LatePoint admin is untouched.
 *
 * WHY A STYLESHEET AND NOT A THEME OPTION
 * LatePoint ships two visual knobs - a colour scheme and a border radius. They
 * do not reach the type scale, the spacing rhythm, the focus rings or the tile
 * geometry, which is most of what makes the form read as somebody else's
 * software. This file closes that gap using the same tokens as the rest of the
 * site, so the booking step looks like the page it is embedded in.
 *
 * HOW IT SURVIVES LATEPOINT UPDATES
 * Only class names are targeted, never DOM structure or nth-child positions.
 * A class LatePoint renames simply stops being skinned - that element falls
 * back to LatePoint's own styling, which is functional. Nothing here can break
 * the form; the worst case is one section looking stock.
 *
 * Specificity is bought with the .latepoint-w wrapper rather than !important
 * wherever LatePoint's own rules allow it. The few !important declarations are
 * marked with the LatePoint rule they are beating.
 *
 * @package Fixfactor
 */

/* =========================================================================
   Scope + local aliases
   Tokens come from tokens.css. Aliased once here so the rules below read as
   booking-form intent rather than a wall of var(--teal-700).
   ========================================================================= */

.latepoint-w,
.ff-booking-context {
    --lp-action: var(--action);
    --lp-action-hover: var(--action-hover);
    --lp-accent: var(--accent);
    --lp-tint: var(--teal-tint-fill);
    --lp-tint-faint: var(--teal-tint-faint);
    --lp-tint-border: var(--teal-tint-border);
    --lp-text: var(--content-body);
    --lp-text-strong: var(--content);
    --lp-text-soft: var(--content-secondary);
    --lp-border: var(--border-neutral);
    --lp-surface: var(--surface);
    --lp-surface-alt: var(--surface-alt);
    --lp-radius: var(--radius);
    --lp-radius-input: var(--radius-input);
    --lp-radius-tag: var(--radius-tag);

    font-family: var(--font-stack);
}

/* =========================================================================
   Context banner - printed by the Fixfactor <-> LatePoint bridge when the
   visitor arrives from a device or service page.
   ========================================================================= */

.ff-booking-context {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--lp-tint-faint);
    border: 1px solid var(--lp-tint-border);
    border-radius: var(--lp-radius);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--lp-text);
}

.ff-booking-context svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--lp-action);
}

.ff-booking-context strong {
    font-weight: 700;
    color: var(--lp-text-strong);
}

/* =========================================================================
   Shell
   ========================================================================= */

.latepoint-w .latepoint-booking-form-element {
    border-radius: var(--radius-panel);
    border: 1px solid var(--lp-tint-border);
    box-shadow: none;
}

/* Not overflow:hidden on the shell - that would clip the field hint, which
   hangs below its field on purpose. The rounded corners are given to the two
   children that actually paint to the edge. */
.latepoint-w .latepoint-booking-form-element .latepoint-side-panel {
    border-radius: calc(var(--radius-panel) - 1px) 0 0 calc(var(--radius-panel) - 1px);
}

.latepoint-w .latepoint-booking-form-element .latepoint-form-w {
    border-radius: 0 calc(var(--radius-panel) - 1px) calc(var(--radius-panel) - 1px) 0;
}

.latepoint-w .latepoint-form-w {
    background: var(--lp-surface);
}

/* Side panel: LatePoint's default is a saturated brand block. Ours is the
   quiet tinted rail the rest of the site uses for supporting content. */
.latepoint-w .latepoint-booking-form-element .latepoint-side-panel {
    background: var(--lp-surface-alt);
    border-right: 1px solid var(--lp-tint-border);
    color: var(--lp-text);
}

.latepoint-w .latepoint-side-panel .latepoint-desc-title {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lp-text-strong);
}

.latepoint-w .latepoint-side-panel .latepoint-desc-content {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--lp-text-soft);
}

.latepoint-w .latepoint-side-panel .latepoint-questions {
    font-size: var(--text-sm);
    color: var(--lp-text-soft);
}

.latepoint-w .latepoint-side-panel .latepoint-questions h5 {
    color: var(--lp-text-strong);
}

.latepoint-w .latepoint-side-panel .latepoint-questions h5:before {
    background-color: var(--lp-accent);
}

/* Progress rail */
.latepoint-w .latepoint-side-panel .latepoint-progress ul li a {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--lp-text-soft);
}

.latepoint-w .latepoint-side-panel .latepoint-progress ul li a:before {
    background-color: var(--lp-border);
}

.latepoint-w .latepoint-side-panel .latepoint-progress ul li.active a,
.latepoint-w .latepoint-side-panel .latepoint-progress ul li.complete a {
    color: var(--lp-action);
    font-weight: 600;
}

.latepoint-w .latepoint-side-panel .latepoint-progress ul li.active a:before,
.latepoint-w .latepoint-side-panel .latepoint-progress ul li.complete a:before {
    background-color: var(--lp-accent);
}

/* =========================================================================
   Headings and step tabs
   ========================================================================= */

.latepoint-w .os-form-header,
.latepoint-w .os-step-header,
.latepoint-w .latepoint-section-heading,
.latepoint-w .os-heading-text {
    font-family: var(--font-stack);
    color: var(--lp-text-strong);
    letter-spacing: -0.01em;
}

.latepoint-w .os-step-tabs .os-step-tab {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--lp-text-soft);
}

.latepoint-w .os-step-tabs .os-step-tab.active {
    color: var(--lp-action);
}

.latepoint-w .os-step-tabs .os-step-tab:before {
    background-color: var(--lp-accent);
}

/* =========================================================================
   Selectable tiles - services, locations, agents, durations, payment options.
   One geometry for all of them: 1px hairline at rest, brand border plus a
   faint tint when chosen. Same idiom as the service picker on product pages,
   so a visitor who came from there recognises the control.
   ========================================================================= */

.latepoint-w .os-items .os-item,
.latepoint-w ul.os-services li a,
.latepoint-w ul.os-locations li a,
.latepoint-w ul.os-agents li a,
.latepoint-w .lp-option {
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-tint-border);
    background: var(--lp-surface);
    transition: var(--transition-border), box-shadow 0.2s ease;
}

.latepoint-w .os-items .os-item:hover,
.latepoint-w ul.os-services li a:hover,
.latepoint-w ul.os-locations li a:hover,
.latepoint-w ul.os-agents li a:hover,
.latepoint-w .lp-option:hover {
    border-color: var(--lp-accent);
    background: var(--lp-tint-faint);
}

.latepoint-w .os-items .os-item.os-selected,
.latepoint-w .os-items .os-item.selected,
.latepoint-w ul.os-services li.selected a,
.latepoint-w ul.os-locations li.selected a,
.latepoint-w ul.os-agents li.selected a,
.latepoint-w .lp-option.selected {
    border-color: var(--lp-accent);
    box-shadow: inset 0 0 0 1px var(--lp-accent);
    background: var(--lp-tint-faint);
}

.latepoint-w .os-item-name,
.latepoint-w .service-name,
.latepoint-w .lp-option-label {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--lp-text-strong);
}

.latepoint-w .os-item-desc,
.latepoint-w .service-desc,
.latepoint-w .os-item-price-label {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--lp-text-soft);
}

.latepoint-w .os-item-price,
.latepoint-w .service-price,
.latepoint-w .lp-price-value {
    font-weight: 700;
    color: var(--lp-action);
}

.latepoint-w ul.os-agents li.selected a .agent-name,
.latepoint-w ul.os-agents li a:hover .agent-name {
    color: var(--lp-action);
}

/* =========================================================================
   Calendar
   ========================================================================= */

.latepoint-w .os-current-month-label {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--lp-text-strong);
}

.latepoint-w .os-month-prev-btn,
.latepoint-w .os-month-next-btn {
    border-radius: var(--lp-radius-input);
    border: 1px solid var(--lp-tint-border);
    color: var(--lp-action);
    transition: var(--transition-border);
}

.latepoint-w .os-month-prev-btn:hover,
.latepoint-w .os-month-next-btn:hover {
    border-color: var(--lp-accent);
    background: var(--lp-tint-faint);
}

.latepoint-w .os-weekdays .weekday {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--lp-text-soft);
}

.latepoint-w .os-monthly-calendar-days .os-day .os-day-box {
    border-radius: var(--lp-radius-input);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.latepoint-w .os-monthly-calendar-days .os-day.day-available .os-day-box:hover {
    background-color: var(--lp-tint);
    color: var(--lp-action);
}

.latepoint-w .os-monthly-calendar-days .os-day.os-today .os-day-box {
    box-shadow: inset 0 0 0 1px var(--lp-accent);
}

.latepoint-w .os-monthly-calendar-days .os-day.selected .os-day-box,
.latepoint-w .os-monthly-calendar-days .os-day.os-selected .os-day-box {
    background-color: var(--lp-action);
    color: var(--lp-surface);
}

.latepoint-w .os-monthly-calendar-days .os-day.os-day-passed .os-day-box,
.latepoint-w .os-monthly-calendar-days .os-day.os-not-available .os-day-box {
    color: var(--lp-border);
}

/* =========================================================================
   Timeslots
   ========================================================================= */

.latepoint-w .dp-timeslot {
    border-radius: var(--lp-radius-input);
    border: 1px solid var(--lp-tint-border);
    font-weight: 600;
    color: var(--lp-text);
    transition: var(--transition-border), background-color 0.15s ease;
}

.latepoint-w .dp-timeslot:hover {
    border-color: var(--lp-accent);
    background: var(--lp-tint-faint);
}

.latepoint-w .dp-timeslot.selected,
.latepoint-w .dp-timeslot.selected .dp-label {
    background-color: var(--lp-action);
    border-color: var(--lp-action);
    color: var(--lp-surface);
}

.latepoint-w .times-header-label,
.latepoint-w .th-timezone {
    font-size: var(--text-sm);
    color: var(--lp-text-soft);
}

/* =========================================================================
   Form controls
   Matched to the product page and the quote form: 1.5px hairline, 10px
   radius, brand border on focus, no glow.
   ========================================================================= */

.latepoint-w .os-form-group .os-form-control,
.latepoint-w .os-form-group input[type="text"],
.latepoint-w .os-form-group input[type="email"],
.latepoint-w .os-form-group input[type="tel"],
.latepoint-w .os-form-group textarea,
.latepoint-w .os-form-group select {
    font-family: var(--font-stack);
    font-size: var(--text-base);
    color: var(--lp-text-strong);
    background: var(--lp-surface);
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-radius-input);
    transition: var(--transition-border);
}

.latepoint-w .os-form-group .os-form-control:hover {
    border-color: var(--lp-tint-border);
}

.latepoint-w .os-form-group .os-form-control:focus,
.latepoint-w .os-form-group textarea:focus,
.latepoint-w .os-form-group select:focus {
    outline: none;
    border-color: var(--lp-accent);
    box-shadow: none;
}

.latepoint-w .os-form-group label,
.latepoint-w .os-form-group .os-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--lp-text-soft);
}

.latepoint-w .os-form-group.has-value label,
.latepoint-w .os-form-group .os-form-control:focus + label {
    color: var(--lp-action);
}

.latepoint-w .os-form-desc {
    font-size: var(--text-sm);
    color: var(--lp-text-soft);
}

.latepoint-w .os-form-group.os-invalid .os-form-control {
    border-color: var(--status-error);
}

.latepoint-w .latepoint-message-error {
    background: var(--status-error-bg);
    color: var(--status-error);
    border-radius: var(--lp-radius-input);
}

.latepoint-w .latepoint-message-success {
    background: var(--status-success-bg);
    color: var(--status-success);
    border-radius: var(--lp-radius-input);
}

/* =========================================================================
   Buttons
   ========================================================================= */

.latepoint-w .latepoint-btn,
.latepoint-btn.latepoint-btn-primary {
    font-family: var(--font-stack);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--lp-radius);
    box-shadow: none;
    transition: var(--transition);
}

/* --action rather than --accent: white on #00aac4 fails AA. */
.latepoint-w .latepoint-btn-primary,
.latepoint-btn.latepoint-btn-primary {
    background-color: var(--lp-action);
    border-color: var(--lp-action);
    color: var(--lp-surface);
}

.latepoint-w .latepoint-btn-primary:hover,
.latepoint-btn.latepoint-btn-primary:hover {
    background-color: var(--lp-action-hover);
    border-color: var(--lp-action-hover);
}

.latepoint-w .latepoint-btn-secondary,
.latepoint-w .latepoint-btn-white,
.latepoint-w .latepoint-btn-grey {
    background-color: var(--lp-surface);
    border: 1px solid var(--lp-tint-border);
    color: var(--lp-action);
}

.latepoint-w .latepoint-btn-secondary:hover,
.latepoint-w .latepoint-btn-white:hover,
.latepoint-w .latepoint-btn-grey:hover {
    background-color: var(--lp-tint-faint);
    border-color: var(--lp-accent);
}

.latepoint-w .latepoint-btn-link {
    color: var(--lp-action);
}

/* =========================================================================
   Summary panel and confirmation
   ========================================================================= */

.latepoint-w .confirmation-checkmark,
.latepoint-w .booking-status-icon {
    color: var(--status-success);
}

.latepoint-w .confirmation-number,
.latepoint-w .ss-confirmation-number {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--lp-text-strong);
}

.latepoint-w .booking-item-status-pill,
.latepoint-w .invoice-status-label {
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* =========================================================================
   Focus visibility - WCAG 2.4.7. LatePoint removes outlines on several of its
   controls; every interactive element in the form gets one back.
   ========================================================================= */

.latepoint-w a:focus-visible,
.latepoint-w button:focus-visible,
.latepoint-w input:focus-visible,
.latepoint-w select:focus-visible,
.latepoint-w textarea:focus-visible,
.latepoint-w .os-item:focus-visible,
.latepoint-w .dp-timeslot:focus-visible,
.latepoint-w .os-day-box:focus-visible {
    outline: 2px solid var(--lp-action);
    outline-offset: 2px;
}

/* =========================================================================
   Mobile
   ========================================================================= */

@media (max-width: 768px) {
    .latepoint-w .latepoint-booking-form-element {
        border-radius: var(--lp-radius);
    }

    .ff-booking-context {
        margin-inline: var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .latepoint-w * {
        transition-duration: 0.01ms !important; /* beats LatePoint's inline transitions */
        animation-duration: 0.01ms !important;
    }
}

/* =========================================================================
   Field hint
   -----------------------------------------------------------------------
   A speech bubble anchored to the field it is about, with a pointer aimed at
   it - not a tinted panel with one coloured edge. The dark fill is the same
   idiom the product pages already use for their floating tooltips, so it
   reads as the site talking rather than as another form control.

   It sits above the field, not below: below, it covered the whole of the next
   field, and the space above the first field in a step is empty anyway.

   pointer-events: none, and any click anywhere dismisses it, so it never gets
   in the way of what the visitor is reaching for. Absolutely positioned, so
   showing and hiding it never moves the form.
   ========================================================================= */

.latepoint-w .ff-field-hint {
    position: absolute;
    z-index: 30;
    bottom: calc(100% + 9px);
    left: 0;
    max-width: 340px;
    padding: 10px 14px;
    background: var(--content-strong, #111111);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-tag);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.45;
    pointer-events: none;
    animation: ff-hint-in 0.18s var(--ease-material) both;
}

.latepoint-w .ff-field-hint::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 20px;
    width: 10px;
    height: 10px;
    background: inherit;
    border-radius: 2px;
    transform: rotate(45deg);
}

.latepoint-w .ff-field-hint.ff-hint-leaving {
    animation: ff-hint-out 0.14s ease both;
}

@keyframes ff-hint-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

@keyframes ff-hint-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .latepoint-w .ff-field-hint,
    .latepoint-w .ff-field-hint.ff-hint-leaving {
        animation: none;
    }
}

/* On a narrow screen the bubble spans the field rather than sitting at a
   fixed width beside it. */
@media (max-width: 600px) {
    .latepoint-w .ff-field-hint {
        left: 0;
        right: 0;
        max-width: none;
    }
}

/* =========================================================================
   Summary, verify and confirmation
   -----------------------------------------------------------------------
   LatePoint renders the same .summary-box in three places: the side panel,
   the verify step and the confirmation. Left to itself it centres the text
   and draws a dotted placeholder rail behind every heading, which reads as
   an unfinished wireframe rather than a receipt.

   One treatment for all three: left-aligned, label above value, hairline
   separators, no filled boxes. Scoped to the three roots rather than to
   .summary-box on its own, so nothing outside the summary is caught.
   ========================================================================= */

.latepoint-w .latepoint-summary-w,
.latepoint-w .confirmation-info-w,
.latepoint-w .step-verify-w {
    --lp-summary-gap: var(--space-3);
}

/* Panel shell - the side column keeps a surface, the in-step summaries do not:
   they are already inside the form's own panel. */
.latepoint-w .latepoint-summary-w {
    background: var(--lp-surface-alt);
    border: none;
    border-left: 1px solid var(--lp-tint-border);
    border-radius: 0;
    padding: var(--space-5, 1.25rem) var(--space-4);
}

/* The dotted rail LatePoint draws beside every heading. */
.latepoint-w .sbh-line,
.latepoint-w .pbh-line,
.latepoint-w .osih-line,
.latepoint-w .th-line {
    display: none;
}

.latepoint-w .summary-header,
.latepoint-w .summary-header-inner,
.latepoint-w .summary-heading,
.latepoint-w .os-summary-contents,
.latepoint-w .os-summary-contents-inner,
.latepoint-w .os-summary-contents-inner-top,
.latepoint-w .confirmation-info-w,
.latepoint-w .cart-summary-main-section,
.latepoint-w .summary-box,
.latepoint-w .summary-box-content,
.latepoint-w .summary-box-heading,
.latepoint-w .summary-boxes-columns,
.latepoint-w .cart-item-wrapper {
    text-align: left;
}

/* LatePoint right-aligns this header and pads it 5px. Its own rule carries
   the .latepoint-summary-w ancestor, so ours has to as well. */
.latepoint-w .latepoint-summary-w .summary-header,
.latepoint-w .confirmation-info-w .summary-header,
.latepoint-w .step-verify-w .summary-header {
    display: block;
    text-align: left;
    padding: 0 0 var(--space-3);
    margin: 0 0 var(--space-3);
    border-bottom: 1px solid var(--lp-tint-border);
}

.latepoint-w .latepoint-summary-w .summary-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    text-align: left;
}

.latepoint-w .latepoint-summary-w .summary-header-label {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--lp-text-strong);
}

.latepoint-w .latepoint-lightbox-summary-trigger {
    color: var(--lp-action);
}

/* LatePoint prints a dot-grid behind the summary heading - decoration that
   reads as an unrendered placeholder next to the rest of the page. */
.latepoint-w .latepoint-summary-w .summary-header .summary-header-inner {
    background-image: none;
    padding: 0;
}

/* The custom-field recap. LatePoint runs "Label: value" together inline; the
   value is the part that matters, so it gets its own line and the weight. */
.latepoint-w .summary-attributes {
    display: block;
    margin-top: var(--space-3);
}

.latepoint-w .summary-attributes span {
    display: block;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--lp-tint-border);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.35;
    color: var(--lp-text-soft);
}

/* LatePoint separates attributes with a 3px dot pinned to the right of each
   span, because it lays them out inline. Stacked, that dot ends up floating in
   the margin at the end of every line - the stray marks in the summary. */
.latepoint-w .summary-attributes > span:not(:last-child):before {
    content: none;
}

.latepoint-w .summary-attributes > span:not(:last-child) {
    margin-right: 0;
}

.latepoint-w .summary-attributes span strong {
    display: block;
    margin-top: 2px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--lp-text-strong);
}

/* LatePoint keeps these wrappers in the DOM before there is anything to put
   in them; without this they draw a rule across an empty column. */
.latepoint-w .summary-price-breakdown-wrapper:empty,
.latepoint-w .cart-summary-main-section:empty,
.latepoint-w .booking-summary-info-w:empty {
    display: none;
}

/* No boxes. A summary is a list of facts, not a set of cards. */
.latepoint-w .latepoint-summary-w .summary-box,
.latepoint-w .confirmation-info-w .summary-box,
.latepoint-w .step-verify-w .summary-box,
.latepoint-w .step-verify-w .cart-item-wrapper,
.latepoint-w .confirmation-info-w .cart-item-wrapper {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: var(--lp-summary-gap) 0;
    margin: 0;
}

.latepoint-w .latepoint-summary-w .summary-box + .summary-box,
.latepoint-w .confirmation-info-w .summary-box + .summary-box,
.latepoint-w .step-verify-w .summary-box + .summary-box,
.latepoint-w .booking-summary-info-w {
    border-top: 1px solid var(--lp-tint-border);
}

.latepoint-w .booking-summary-info-w {
    margin-top: var(--lp-summary-gap);
    padding-top: var(--lp-summary-gap);
}

/* Label above value, both readable. LatePoint's #7c85a3 is too pale against
   white to carry a booking the customer is about to pay for. */
.latepoint-w .summary-box-heading,
.latepoint-w .sbh-item,
.latepoint-w .pbh-label,
.latepoint-w .summary-header-label,
.latepoint-w .info-label {
    display: block;
    margin: 0 0 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--lp-text-soft);
}

.latepoint-w .sbc-big-item {
    font-family: var(--font-stack);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--lp-text-strong);
}

.latepoint-w .sbc-highlighted-item {
    margin-top: 2px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--lp-action);
}

.latepoint-w .sbc-main-item,
.latepoint-w .info-value {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    color: var(--lp-text-strong);
}

.latepoint-w .sbc-sub-item,
.latepoint-w .sbc-subtle-item {
    font-size: var(--text-sm);
    color: var(--lp-text-soft);
}

/* The custom-field recap: LatePoint prints "Label: value" inline and centred.
   Stacked and left-aligned, the value is what the eye lands on. */
.latepoint-w .confirmation-info-w ul,
.latepoint-w .os-summary-contents ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.latepoint-w .confirmation-info-w ul li,
.latepoint-w .os-summary-contents ul li {
    flex: none;
    display: block;
    margin: 0;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--lp-tint-border);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
    text-transform: none;
    color: var(--lp-text-soft);
}

.latepoint-w .confirmation-info-w ul li:last-child,
.latepoint-w .os-summary-contents ul li:last-child {
    border-bottom: none;
}

.latepoint-w .confirmation-info-w ul li strong,
.latepoint-w .os-summary-contents ul li strong {
    display: block;
    margin-top: 2px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--lp-text-strong);
}

.latepoint-w .confirmation-section-heading {
    margin: var(--space-4) 0 var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--lp-tint-border);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--lp-text-strong);
}

/* Price breakdown */
.latepoint-w .summary-price-breakdown-wrapper {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--lp-tint-border);
}

.latepoint-w .summary-price-item-w {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--lp-text);
}

.latepoint-w .spi-name {
    color: var(--lp-text-soft);
}

.latepoint-w .spi-price,
.latepoint-w .spi-strong {
    font-weight: 600;
    color: var(--lp-text-strong);
}

.latepoint-w .summary-price-item-w.spi-total {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--lp-tint-border);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--lp-text-strong);
}


/* =========================================================================
   Timeslots
   Deliberately NOT restyled. LatePoint's green reads as "this time is free"
   in a way a teal tile does not, and it is the only place in the flow where
   colour carries meaning rather than brand. Forcing it into the palette cost
   more than it bought.
   ========================================================================= */

.latepoint-w .times-header-label {
    color: var(--lp-text);
    font-weight: 600;
}

/* =========================================================================
   Contrast pass
   LatePoint's secondary text is #7c85a3 - 3.4:1 on white, under the 4.5:1
   that WCAG 1.4.3 asks of body text. Everything secondary moves to
   --content-secondary (#505050, 8.1:1); everything primary to near-black.
   ========================================================================= */

.latepoint-w .latepoint-desc-content,
.latepoint-w .latepoint-questions,
.latepoint-w .os-form-desc,
.latepoint-w .os-item-desc,
.latepoint-w .service-desc,
.latepoint-w .os-timezone-info,
.latepoint-w .dp-tick,
.latepoint-w .th-timezone,
.latepoint-w .ss-description {
    color: var(--lp-text-soft);
}

.latepoint-w .os-item-name,
.latepoint-w .service-name,
.latepoint-w .os-heading-text,
.latepoint-w .ss-title,
.latepoint-w .os-current-month-label {
    color: var(--lp-text-strong);
}

/* =========================================================================
   Left and right rails - padding and rhythm
   ========================================================================= */

.latepoint-w .latepoint-side-panel {
    padding: var(--space-6) var(--space-5, 1.25rem);
}

.latepoint-w .latepoint-side-panel .latepoint-step-desc {
    text-align: left;
}

.latepoint-w .latepoint-side-panel .latepoint-desc-media {
    margin-bottom: var(--space-4);
}

.latepoint-w .latepoint-side-panel .latepoint-desc-title {
    margin-bottom: var(--space-2);
}

.latepoint-w .latepoint-side-panel .latepoint-questions {
    padding-top: var(--space-4);
    border-top: 1px solid var(--lp-tint-border);
}

/* One padding, on the step content. .os-form-w sits inside it, so padding
   both was indenting the fields 24px further than the step heading above
   them. */
.latepoint-w .latepoint-form-w .latepoint-step-content {
    padding: var(--space-6);
}

.latepoint-w .latepoint-step-content .os-form-w {
    padding: 0;
}

.latepoint-w .os-form-header,
.latepoint-w .os-step-header {
    margin-bottom: var(--space-5, 1.25rem);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--lp-tint-border);
    font-size: var(--text-xl);
    font-weight: 700;
}

.latepoint-w .os-form-group {
    margin-bottom: var(--space-4);
}

.latepoint-w .os-form-buttons {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--lp-tint-border);
}

/* =========================================================================
   Last pass, from the rendered verify step
   ========================================================================= */

/* The grey rail LatePoint puts beside every summary heading. Its own rule
   carries the .summary-box-heading ancestor, so a bare .sbh-line ties on
   specificity and loses on order. */
.latepoint-w .summary-box-heading .sbh-line,
.latepoint-w .pb-heading .pbh-line,
.latepoint-w .times-header .th-line {
    display: none;
}

/* LatePoint renders the price breakdown wrapper even when there is nothing
   priced - it is not :empty, it just has no rows - and it would draw a rule
   across the bottom of the summary with nothing under it. */
.latepoint-w .summary-price-breakdown-wrapper:not(:has(.summary-price-item-w)) {
    display: none;
}

.latepoint-w .step-verify-w,
.latepoint-w .step-confirmation-w {
    padding-top: var(--space-4);
}

.latepoint-w .step-verify-w .confirmation-info-w {
    margin-top: 0;
}

.latepoint-w .step-verify-w .cart-item-wrapper {
    margin-bottom: 0;
}

/* Location and customer rows keep their thumbnail, but at the size of the
   text beside them rather than floating above it. */
.latepoint-w .summary-box-content.with-media {
    align-items: flex-start;
    gap: var(--space-3);
}

.latepoint-w .summary-box-content .os-avatar-w,
.latepoint-w .summary-box-content .os-location-image {
    margin-top: 2px;
}

/* Placeholders are the resting label on LatePoint's transparent form groups -
   they are the only thing telling the visitor what the box is for - and it
   ships them too pale to read. Verified against the stock form: this is
   LatePoint's own colour, not something the skin caused. */
.latepoint-w .os-form-group input::placeholder,
.latepoint-w .os-form-group textarea::placeholder {
    color: var(--lp-text-soft);
    opacity: 1;
}

/* LatePoint pushes the summary contents to the bottom of the column on the
   contact step. Facts about a booking belong at the top, next to the heading
   they sit under. */
.latepoint-w .latepoint-summary-w .os-summary-contents,
.latepoint-w .latepoint-summary-w .os-summary-contents-inner {
    justify-content: flex-start;
    margin-top: 0;
}

.latepoint-w .latepoint-summary-w .os-summary-contents-inner-top {
    margin-top: 0;
}

/* =========================================================================
   Correcting the booking page's own reset
   -----------------------------------------------------------------------
   The page content carries "#ff-bp h1, #ff-bp h2, #ff-bp h3, #ff-bp h4,
   #ff-bp p, #ff-bp ul, #ff-bp li { margin: 0; padding: 0 }" under a comment
   that reads "Reset only our own elements - NOT LatePoint plugin elements".
   It does not do that: the selector catches everything inside the wrapper,
   including the whole booking widget, and an ID selector outranks anything a
   stylesheet can say with classes.

   That single rule is why the padding on the field hint and on the summary
   lists silently did nothing. The proper fix is to narrow the rule in the page
   content; until that happens this hands spacing control back, scoped to the
   widget only so the page's own elements keep their reset.
   ========================================================================= */

#ff-bp .latepoint-w p,
#ff-bp .latepoint-w ul,
#ff-bp .latepoint-w li,
#ff-bp .latepoint-w h1,
#ff-bp .latepoint-w h2,
#ff-bp .latepoint-w h3,
#ff-bp .latepoint-w h4 {
    margin: revert;
    padding: revert;
}

#ff-bp .latepoint-w .confirmation-info-w ul,
#ff-bp .latepoint-w .os-summary-contents ul {
    margin: 0;
    padding: 0;
}

#ff-bp .latepoint-w .confirmation-info-w ul li,
#ff-bp .latepoint-w .os-summary-contents ul li {
    margin: 0;
    padding: var(--space-2) 0;
}

/* The dot grid behind the summary heading. LatePoint sets it on
   .summary-header:not(.can-checkout) .summary-header-inner; matching that
   exactly rather than out-specifying it keeps the intent readable. */
.latepoint-w .latepoint-summary-w .summary-header:not(.can-checkout) .summary-header-inner,
.latepoint-w .latepoint-summary-w .summary-header .summary-header-inner {
    background-image: none;
    padding: 0;
}

/* =========================================================================
   Customer block in the side summary
   -----------------------------------------------------------------------
   LatePoint lays each box in the side panel out as a row - heading on the
   left with flex: 1, value on the right - which is why "Location  Wimbledon"
   reads well. The customer box has a third child, the custom-field recap, and
   it lands as a third column: "Customer | Marcin Skwiercz | Have you visited
   us before?: No, this is my first time!" squeezed into 60px and wrapping one
   word per line.

   The recap is a row of its own, not a column beside the name.
   ========================================================================= */

.latepoint-w .latepoint-summary-w .summary-box {
    flex-wrap: wrap;
}

.latepoint-w .latepoint-summary-w .summary-box .summary-attributes {
    flex: 0 0 100%;
    width: 100%;
    margin-top: var(--space-2);
}