/* LatePoint booking wizard + customer cabinet skinned to the Bouncy Buddies design system.
   Loaded after latepoint front.css (functions.php). Overrides only; plugin files untouched.
   Tokens mirror bricks_global_classes: Karla body, Libre Caslon Display headings, Plum 500 #8A4159,
   pink CTA #F097B6 / hover #D97695, blush #FDEFF3, sage #E7EDE6, ink #1B1715 / #6B6058, hairline #E8DCD8. */

:root {
  --latepoint-brand-primary: #8A4159;
  --latepoint-body-color: #1B1715;
  --latepoint-headings-color: #1B1715;
  --latepoint-color-text-faded: #6B6058;
  --latepoint-timeslot-selected-color: #8A4159;
  --latepoint-side-panel-bg: #FDEFF3;
  --latepoint-summary-panel-bg: #FDEFF3;
  --latepoint-calendar-weekday-label-color: #6B6058;
  --latepoint-calendar-weekday-label-bg: transparent;
  --latepoint-border-radius: 6px;
  --latepoint-border-radius-sm: 6px;
  --latepoint-border-radius-md: 6px;
  --latepoint-border-radius-lg: 6px;
  --bb-hairline: #E8DCD8;
  --bb-card: #FFFCFC;
  --bb-pink: #F097B6;
  --bb-pink-hover: #D97695;
}

/* ---- type ---- */
.latepoint-w, .latepoint-w * { font-family: 'Karla', -apple-system, system-ui, sans-serif; }
.latepoint-w [class*="latepoint-icon"], .latepoint-w .latepoint-icon { font-family: 'latepointIcons' !important; }
.latepoint-w { font-size: 18px; line-height: 1.5; color: var(--latepoint-body-color); }
.latepoint-w h1, .latepoint-w h2, .latepoint-w h3, .latepoint-w h4, .latepoint-w h5,
.latepoint-w .latepoint-step-desc-w h3, .latepoint-w .os-step-header h3, .latepoint-w .latepoint-questions h5 {
  font-family: 'Libre Caslon Display', Georgia, serif !important; font-weight: 400; letter-spacing: 0; color: #1B1715;
}
.latepoint-w .os-step-header h3, .latepoint-w .latepoint-step-desc-w h3 { font-size: 28px; line-height: 1.2; }
.latepoint-w .latepoint-step-desc, .latepoint-w .latepoint-step-desc *, .latepoint-w .latepoint-questions p { font-family: 'Karla', sans-serif !important; font-size: 16px; color: #6B6058; line-height: 1.6; }

/* ---- shell ---- */
.latepoint-w .latepoint-booking-form-element {
  border: 1px solid var(--bb-hairline); border-radius: 6px; box-shadow: none; background: #fff;
}
.latepoint-w .latepoint-side-panel { background: var(--latepoint-side-panel-bg); border-right: 1px solid var(--bb-hairline); border-radius: 0; padding: 40px 32px 28px; }
.latepoint-w .latepoint-side-panel svg .latepoint-step-svg-highlight { fill: var(--bb-pink); }
.latepoint-w .latepoint-side-panel svg .latepoint-step-svg-base { fill: #8A4159; opacity: .15; }
.latepoint-w .latepoint-heading-w, .latepoint-w .latepoint-footer { border-radius: 0; }
.latepoint-w .latepoint-footer { border-top: 1px solid var(--bb-hairline); background: #fff; }
.latepoint-w .latepoint-progress ul li { color: #6B6058; }
.latepoint-w .latepoint-progress ul li.active, .latepoint-w .latepoint-progress ul li.completed { color: #8A4159; }

/* ---- selectable items (services, categories, durations, extras, agents) ---- */
.latepoint-w .os-item-i {
  background: var(--bb-card); border: 1px solid var(--bb-hairline); border-radius: 6px; box-shadow: none;
  transition: border-color 160ms cubic-bezier(.22,.61,.36,1), background-color 160ms cubic-bezier(.22,.61,.36,1);
}
.latepoint-w .os-item-i:hover { border-color: #8A4159; background: #fff; }
.latepoint-w .os-item.selected .os-item-i, .latepoint-w .os-selectable-item.selected .os-item-i {
  border-color: #8A4159; box-shadow: 0 0 0 1px #8A4159; background: #fff;
}
.latepoint-w .os-item-name, .latepoint-w .os-item-category-name, .latepoint-w .os-duration-name { font-weight: 500; color: #1B1715; }
.latepoint-w .os-item-desc { color: #6B6058; font-size: 16px; }
.latepoint-w .os-item-price, .latepoint-w .os-duration-price, .latepoint-w .os-duration-value { color: #8A4159; font-weight: 500; white-space: nowrap; }
.latepoint-w .os-item-price-label, .latepoint-w .os-duration-label, .latepoint-w .os-duration-value-label { color: #6B6058; }
.latepoint-w .os-item-i .os-item-img-w:not(.os-with-avatar) { border-radius: 6px; flex: 0 0 56px; height: 56px; background-size: cover; margin-right: 16px; }
/* agents: round avatars; "Any Agent" gets our paw icon on blush instead of the plugin's stock photo */
.latepoint-w .os-item-i .os-with-avatar .os-avatar { border-radius: 50%; background-size: cover; background-color: #FDEFF3; }
.latepoint-w .os-item[data-item-id="any"] .os-avatar { background-image: url(/wp-content/uploads/2026/09/lucide-paw-print.svg) !important; background-size: 46% !important; background-repeat: no-repeat; background-position: center; }
.latepoint-w .os-item-i:hover .os-item-img-w { transform: none; }
/* size-tier grid: 2 columns so "S · bis 10 kg" labels never wrap awkwardly */
.latepoint-w .os-service-durations.os-three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- calendar + timeslots ---- */
.latepoint-w .os-day-box { border-radius: 999px; }
.latepoint-w .os-day-box.os-day-current .os-day-number { color: #8A4159; font-weight: 700; }
.latepoint-w .os-day-box.selected, .latepoint-w .os-day-box.selected .os-day-number { background: #8A4159; color: #fff; }
.latepoint-w .os-day-status { background: #EFE6E3; }
.latepoint-w .os-day-status .day-available { background-color: var(--bb-pink); }
.latepoint-w .os-day.selected .os-day-box, .latepoint-w .os-day-box.selected { background: #8A4159; color: #fff; }
.latepoint-w .os-day.selected .os-day-box .os-day-number { color: #fff; }
.latepoint-w .os-weekdays { color: #6B6058; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.latepoint-w .os-current-month-label { font-family: 'Libre Caslon Display', Georgia, serif !important; font-size: 22px; }
/* timeslot chips: timebox style (.dp-timebox, default green) + timeline style (.dp-timeslot) */
.latepoint-w .dp-timebox { background-color: var(--bb-card); border: 1px solid var(--bb-hairline); border-radius: 999px !important; color: #1B1715; font-weight: 500; padding: 8px 6px; }
.latepoint-w .dp-timebox:hover { background-color: #FDEFF3; border-color: #8A4159; }
.latepoint-w .dp-timebox.selected, .latepoint-w .dp-timebox.selected:hover { background-color: #8A4159; border-color: #8A4159; color: #fff; }
.latepoint-w .dp-timebox.is-off, .latepoint-w .reschedule-calendar-wrapper .dp-timebox.is-booked { background-color: #F7F3F2; border-color: transparent; color: #B8ADA7; }
.latepoint-w .style-timebox .times-header .th-line { background-color: var(--bb-hairline); }
.latepoint-w .latepoint-booking-form-element .dp-timeslot, .latepoint-w .reschedule-calendar-wrapper .dp-timeslot {
  background-color: var(--bb-card); border: 1px solid var(--bb-hairline); border-radius: 999px; box-shadow: none; color: #1B1715; font-weight: 500;
}
.latepoint-w .latepoint-booking-form-element .dp-timeslot:hover, .latepoint-w .reschedule-calendar-wrapper .dp-timeslot:hover { background-color: #FDEFF3; border-color: #8A4159; }
.latepoint-w .latepoint-booking-form-element .dp-timeslot.selected, .latepoint-w .reschedule-calendar-wrapper .dp-timeslot.selected,
.latepoint-w .latepoint-booking-form-element .dp-timeslot.selected:hover { background-color: #8A4159; border-color: #8A4159; color: #fff; }
.latepoint-w .latepoint-booking-form-element .dp-timeslot.not-available, .latepoint-w .latepoint-booking-form-element .dp-timeslot.disabled { opacity: .35; }

/* ---- form fields ---- */
.latepoint-w .os-form-control, .latepoint-w input.os-form-control, .latepoint-w select.os-form-control, .latepoint-w textarea.os-form-control {
  border: 1px solid var(--bb-hairline) !important; border-radius: 6px !important; background: #fff !important;
  padding: 14px 14px !important; font-size: 18px !important; color: #1B1715 !important; line-height: 1.4;
}
.latepoint-w .os-form-control:focus { border-color: #8A4159 !important; box-shadow: 0 0 0 1px #8A4159 !important; }
.latepoint-w .os-form-group label, .latepoint-w .os-form-label { font-size: 15px; color: #6B6058; letter-spacing: .02em; }
.latepoint-w .os-form-group.has-error .os-form-control { border-color: #B23A48 !important; }

/* ---- buttons (pill, pink with plum text = clsBtnPrimary; outline = clsBtnGhost) ---- */
.latepoint-w .latepoint-btn, .latepoint-w .latepoint-btn-primary, .latepoint-w .latepoint-next-btn {
  background: var(--bb-pink); color: #8A4159; border-radius: 999px; padding: 15px 28px; font-weight: 500; font-size: 17px;
  border: none; box-shadow: none; transition: background-color 160ms cubic-bezier(.22,.61,.36,1);
}
.latepoint-w .latepoint-btn:hover, .latepoint-w .latepoint-btn-primary:hover, .latepoint-w .latepoint-next-btn:hover { background: var(--bb-pink-hover); color: #8A4159; }
.latepoint-w .latepoint-prev-btn, .latepoint-w .latepoint-btn-outline, .latepoint-w .latepoint-btn-secondary, .latepoint-w .latepoint-btn-white, .latepoint-w .latepoint-btn-grey {
  background: transparent; color: #8A4159; border: 1px solid #8A4159; border-radius: 999px; padding: 14px 24px; font-weight: 500;
}
.latepoint-w .latepoint-prev-btn:hover, .latepoint-w .latepoint-btn-outline:hover { background: #FDEFF3; color: #8A4159; }
.latepoint-w .latepoint-btn-danger { background: transparent; color: #B23A48; border: 1px solid #B23A48; border-radius: 999px; }
.latepoint-w .latepoint-btn-link { background: none; color: #8A4159; text-decoration: underline; padding: 0; }

/* ---- summary / confirmation / cabinet ---- */
/* one appointment per order: hide the cart's "add another item" box */
.latepoint-w .latepoint-add-another-item-trigger { display: none !important; }
.latepoint-w .os-summary-contents { background: var(--latepoint-summary-panel-bg); border-radius: 6px; }
.latepoint-w .os-cart-item { border: 1px solid var(--bb-hairline); border-radius: 6px; background: var(--bb-card); padding: 10px; }
.latepoint-w .latepoint-summary-w .summary-header .summary-header-label { background-color: transparent; font-family: 'Libre Caslon Display', Georgia, serif !important; font-weight: 400; color: #1B1715; }
.latepoint-w .latepoint-summary-w .summary-header { border-bottom-color: var(--bb-hairline); }
.latepoint-w .latepoint-confirmation-w, .latepoint-w .latepoint-customer-box, .latepoint-w .latepoint-login-form-w {
  border: 1px solid var(--bb-hairline); border-radius: 6px; background: var(--bb-card);
}
.latepoint-w a { color: #8A4159; }

/* ---- 601–767px: the plugin only stacks its side panel at ≤600px; our mobile breakpoint is 767 ---- */
@media (min-width: 601px) and (max-width: 767px) {
  .latepoint-w .latepoint-booking-form-element { flex-direction: column; }
  .latepoint-w .latepoint-side-panel { flex: 0 0 auto !important; width: 100% !important; max-width: none; border-right: 0; border-bottom: 1px solid var(--bb-hairline); padding: 24px 20px; }
  .latepoint-w .latepoint-form-w { width: 100%; }
  .latepoint-w .latepoint-side-panel svg, .latepoint-w .latepoint-side-panel .latepoint-step-desc-library { display: none; }
  .latepoint-w .latepoint-side-panel .latepoint-questions { display: none; }
}

/* ---- phones ---- */
@media (max-width: 767px) {
  .latepoint-w .latepoint-side-panel { padding: 24px 20px 16px; }
  .latepoint-w .os-step-header h3, .latepoint-w .latepoint-step-desc-w h3 { font-size: 24px; }
  .latepoint-w .os-service-durations.os-three-columns { grid-template-columns: 1fr; }
  .latepoint-w .latepoint-btn, .latepoint-w .latepoint-next-btn, .latepoint-w .latepoint-prev-btn { padding: 13px 20px; font-size: 16px; }
}

/* Stage 5 B2: tap targets on phones (month arrows were 28px, lightbox summary trigger 30px) */
.latepoint-w .os-month-prev-btn, .latepoint-w .os-month-next-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.latepoint-w .latepoint-lightbox-summary-trigger { min-height: 44px; display: inline-flex; align-items: center; }

/* Stage 5 a11y: LatePoint grey (#7c85a3, 3.7:1) → warm grey 4.5:1+ */
.latepoint-w .os-item-desc, .latepoint-w .os-item-price-label, .latepoint-w .os-item-sub-name { color: #6B6058 !important; }

/* ---- Round 3 (client 2026-10-04) ------------------------------------------------------------------------
   Side panel removed (shortcode hide_side_panel="yes"): the wizard fills the full content width of the
   booking section (~83% of a 1440 screen). Slot header shows the date only ("Pick a slot for" → '' in gettext). */
.latepoint-w.latepoint-hide-side-panel, .latepoint-w.latepoint-hide-side-panel .latepoint-booking-form-element { max-width: none; width: 100%; }
/* LatePoint fixes the step column at 470px; with the side panel gone it takes all the room next to the summary */
@media (min-width: 768px) {
  .latepoint-w.latepoint-hide-side-panel .latepoint-form-w { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
  .latepoint-w.latepoint-hide-side-panel .latepoint-summary-w { flex: 0 0 340px !important; width: 340px !important; }
}
.latepoint-w .times-header-label { font-weight: 600; }

/* Inline field errors (assets/js/latepoint-ux.js mirrors LatePoint's .os-invalid) — the combined list at the top
   of the form is hidden while the fields carry their own message. */
.latepoint-w .os-form-group.os-invalid .os-form-control { border-color: #B3261E !important; box-shadow: 0 0 0 1px #B3261E; }
.latepoint-w .bb-field-error { display: block; margin-top: 6px; font-family: Karla, sans-serif; font-size: 14px; line-height: 1.35; color: #B3261E; }
.latepoint-w .bb-field-error::before { content: "! "; font-weight: 700; }
.latepoint-booking-form-element:has(.os-form-group.os-invalid) .latepoint-message.latepoint-message-error { display: none !important; }

/* Service "Details" button + dialog (assets/js/latepoint-ux.js) */
.latepoint-w .bb-svc-details { -webkit-appearance: none; appearance: none; align-self: flex-start; margin-top: 6px; padding: 10px 0; min-height: 44px; background: none; border: 0; font-family: Karla, sans-serif; font-size: 15px; font-weight: 500; color: #8A4159; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); cursor: pointer; }
.latepoint-w .bb-svc-details:hover { text-decoration-color: currentColor; }
.latepoint-w .os-service-selector .os-item-name-w { display: flex; flex-direction: column; align-items: flex-start; }
.bb-svc-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 14px; background: #FFFCFC; color: #1B1715; box-shadow: 0 24px 64px rgba(44,17,25,.28); }
.bb-svc-dialog::backdrop { background: rgba(138,65,89,.55); backdrop-filter: blur(3px); }
.bb-svc-body { padding: 36px 36px 32px; font-family: Karla, sans-serif; font-size: 17px; line-height: 1.6; }
.bb-svc-body h3 { font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.15; margin: 0 40px 12px 0; }
.bb-svc-body p { margin: 0 0 14px; }
.bb-svc-lead { font-size: 19px; color: #5B2338; }
.bb-svc-prices { width: 100%; border-collapse: collapse; margin: 18px 0 12px; }
.bb-svc-prices caption { text-align: left; font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #8A4159; padding-bottom: 8px; }
.bb-svc-prices th, .bb-svc-prices td { padding: 12px 0; border-top: 1px solid #E8DCD8; text-align: left; font-weight: 500; }
.bb-svc-prices th span { font-weight: 400; color: #6F625B; margin-left: 6px; }
.bb-svc-prices td { text-align: right; font-family: "Libre Caslon Display", Georgia, serif; font-size: 22px; color: #5B2338; }
.bb-svc-note { font-size: 15px; color: #6F625B; }
.bb-svc-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: #F8F3F0; color: #5B2338; font-size: 26px; line-height: 1; cursor: pointer; }
.bb-svc-close:hover { background: #FDEFF3; }
@media (max-width: 478px) { .bb-svc-body { padding: 28px 20px 24px; } .bb-svc-body h3 { font-size: 26px; } }

/* Puppy Grooming Journey bundle tile (round 3): the three visits as numbered steps joined by a dashed line,
   same language as the Salon page journey. Markup = bundle short_description in latepoint-seed.php. */
.latepoint-w .bb-journey-mini { display: flex; gap: 0; margin-top: 14px; position: relative; }
.latepoint-w .bb-journey-mini > span { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; position: relative; padding-right: 12px; font-family: Karla, sans-serif; font-size: 15px; font-weight: 600; color: #1B1715; line-height: 1.3; }
.latepoint-w .bb-journey-mini b { width: 30px; height: 30px; border-radius: 50%; background: #8A4159; color: #FFFCFC; display: flex; align-items: center; justify-content: center; font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; font-size: 16px; margin-bottom: 6px; position: relative; z-index: 1; }
.latepoint-w .bb-journey-mini > span:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 36px; right: 6px; height: 2px; background: repeating-linear-gradient(90deg, #D9A9BA 0 5px, transparent 5px 10px); }
.latepoint-w .bb-journey-mini em { font-style: normal; font-weight: 400; font-size: 14px; color: #6F625B; }
@media (max-width: 478px) { .latepoint-w .bb-journey-mini { flex-direction: column; gap: 10px; } .latepoint-w .bb-journey-mini > span { flex-direction: row; align-items: center; gap: 10px; } .latepoint-w .bb-journey-mini b { margin: 0; } .latepoint-w .bb-journey-mini > span::after { display: none; } }