/* ============================================================================
   XZ Salon — LatePoint booking form re-theme (olive / light).
   Loaded only on /maak-een-afspraak (see functions.php). Pairs with:
     - LatePoint's own brand color, set to #79873a via its settings
       (--latepoint-brand-primary), which already tints buttons/timeslots.
     - The Dutch string overrides in mu-plugins/xz-latepoint.php.
   This file refines the surfaces the salon customer actually reads: the
   summary panel, the multi-service cart, the price totals/values, and the
   confirmation screen — so they match the rest of the site.
   All colors come from the global --xz-* palette (functions.php) with
   hard fallbacks so the form never renders un-themed.
   ========================================================================== */

.latepoint-w {
	--xz-lp: var(--xz-primary, #79873a);
	--xz-lp-dark: var(--xz-primary-dark, #5c6a2a);
	--xz-lp-rgb: var(--xz-primary-rgb, 121, 135, 58);
	--xz-lp-soft: var(--xz-primary-soft, #eef1e2);
	--xz-lp-wash: var(--xz-primary-wash, #f6f8ee);
	--xz-lp-ink: var(--xz-ink, #23271a);

	/* Re-assert LatePoint's own vars (its presets ship a broken value that
	   omits var() around the brand color for the selected timeslot). */
	--latepoint-brand-primary: var(--xz-lp);
	--latepoint-timeslot-selected-color: var(--xz-lp);
	--latepoint-headings-color: var(--xz-lp-ink);
	font-family: inherit;
}

.latepoint-w * {
	font-family: inherit;
}

/* ---- Primary buttons / nav ------------------------------------------------ */
.latepoint-w .latepoint-btn-primary,
.latepoint-w .latepoint-book-nav-btn.latepoint-next-btn,
.latepoint-w .os-form-w .latepoint-btn-primary {
	background: linear-gradient(135deg, var(--xz-lp), var(--xz-lp-dark)) !important;
	border: 0 !important;
	color: #fff !important;
	font-weight: 700 !important;
	box-shadow: 0 10px 24px rgba(var(--xz-lp-rgb), 0.30);
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.latepoint-w .latepoint-btn-primary:hover,
.latepoint-w .latepoint-book-nav-btn.latepoint-next-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(var(--xz-lp-rgb), 0.42);
	filter: brightness(1.03);
}
.latepoint-w .latepoint-book-nav-btn.latepoint-prev-btn {
	color: var(--xz-lp-dark) !important;
}
.latepoint-w a,
.latepoint-w .latepoint-btn-link {
	color: var(--xz-lp-dark);
}

/* ---- Progress bar / step dots -------------------------------------------- */
.latepoint-w .latepoint-form-steps-progress .progress-item.active,
.latepoint-w .latepoint-form-steps-progress .progress-item.passed {
	color: var(--xz-lp-dark);
}
.latepoint-w .latepoint-form-steps-progress .progress-item.active::before,
.latepoint-w .latepoint-form-steps-progress .progress-bar-line-inner {
	background-color: var(--xz-lp) !important;
}

/* ---- Selected service / agent / timeslot cards --------------------------- */
.latepoint-w .os-service-selector.selected,
.latepoint-w .os-service-selector.active,
.latepoint-w .os-item.selected,
.latepoint-w .os-selectable-item.selected,
.latepoint-w .os-item-data.selected,
.latepoint-w .os-agent-item.selected,
.latepoint-w .service-item.selected {
	border-color: var(--xz-lp) !important;
	box-shadow: 0 0 0 2px rgba(var(--xz-lp-rgb), 0.35) inset, 0 8px 20px rgba(var(--xz-lp-rgb), 0.14) !important;
}
/* The little "+" / select affordance on each service + category chevrons. */
.latepoint-w .os-item-category-info-w.with-plus .os-plus-icon,
.latepoint-w .os-service-selector .os-plus-icon,
.latepoint-w .os-select-service-btn {
	color: var(--xz-lp) !important;
}
.latepoint-w .timeslots .dp-timebox.selected,
.latepoint-w .timeslots .dp-timebox.with-tick,
.latepoint-w .dp-timepicker-trigger.selected,
.latepoint-w .time-slots .time-slot.selected,
.latepoint-w .os-time-slot.selected,
.latepoint-w .os-slot.selected,
.latepoint-w .pick-time-slots .slot.selected {
	background-color: var(--xz-lp) !important;
	border-color: var(--xz-lp) !important;
	color: #fff !important;
}
.latepoint-w .timeslots .dp-timebox:hover {
	border-color: var(--xz-lp) !important;
	color: var(--xz-lp-dark) !important;
}
.latepoint-w .os-service-selector:hover,
.latepoint-w .os-item:hover,
.latepoint-w .os-selectable-item:hover,
.latepoint-w .os-item-data:hover {
	border-color: rgba(var(--xz-lp-rgb), 0.6);
}

/* ---- Datepicker highlights ----------------------------------------------- */
.latepoint-w .day-with-slots.selected,
.latepoint-w .calendar-day.selected,
.latepoint-w .os-day.selected {
	background-color: var(--xz-lp) !important;
	color: #fff !important;
}
.latepoint-w .day-with-slots:not(.selected) {
	color: var(--xz-lp-dark);
}

/* ==========================================================================
   SUMMARY PANEL (right side / mobile drawer)
   ========================================================================== */
/* The whole summary panel is one solid white card (prevents the page's dotted
   background showing through between items) with clipped, rounded corners so the
   olive header sits cleanly at the top. */
.latepoint-w .latepoint-summary-w,
.latepoint-w .os-summary-contents {
	background: #fff !important;
	border-radius: 16px;
}
.latepoint-w .os-summary-contents {
	overflow: hidden;
}
.latepoint-w .os-summary-contents-inner {
	background: #fff !important;
	padding: 16px 16px 18px;
}

/* Olive header — covers the normal AND the ".can-checkout" variant (which
   otherwise renders the label as a white pill with dark text). */
.latepoint-w .summary-header,
.latepoint-w .summary-header.can-checkout,
.latepoint-w .os-summary-panel-header {
	background: linear-gradient(135deg, var(--xz-lp), var(--xz-lp-dark)) !important;
	border: 0 !important;
	border-radius: 16px 16px 0 0;
	padding: 12px 16px;
}
.latepoint-w .summary-header .summary-header-inner {
	background: transparent !important;
}
.latepoint-w .summary-header .summary-header-label,
.latepoint-w .summary-header.can-checkout .summary-header-label {
	color: #fff !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	font-weight: 700;
	letter-spacing: 0.3px;
}
/* Close / cart toggle on the header (shows as a bare white box by default on
   mobile because its icon glyph doesn't tint) — make it a clean translucent
   white circle with a visible white icon. */
.latepoint-w .summary-header .latepoint-lightbox-summary-trigger {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.18) !important;
	border: 1px solid rgba(255, 255, 255, 0.38) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	transition: background 0.2s ease;
}
.latepoint-w .summary-header .latepoint-lightbox-summary-trigger:hover {
	background: rgba(255, 255, 255, 0.3) !important;
}
.latepoint-w .summary-header .latepoint-lightbox-summary-trigger i,
.latepoint-w .summary-header .latepoint-lightbox-summary-trigger i::before,
.latepoint-w .summary-header .latepoint-icon-common-01 {
	color: #fff !important;
	font-size: 14px !important;
	line-height: 1 !important;
}
/* "Afrekenen" (checkout) button sitting on the olive header. */
.latepoint-w .checkout-from-summary-panel-btn {
	background: rgba(255, 255, 255, 0.18) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	color: #fff !important;
	border-radius: 999px;
	font-weight: 700;
	transition: background 0.2s ease;
}
.latepoint-w .checkout-from-summary-panel-btn i {
	color: #fff !important;
}
.latepoint-w .checkout-from-summary-panel-btn:hover {
	background: rgba(255, 255, 255, 0.3) !important;
}
/* Mobile-only checkout button row below the header keeps a clean white bg. */
.latepoint-w .checkout-from-summary-panel-btn-wrapper.os-mobile-only {
	background: #fff;
}

/* Section divider labels: "In cart" / "Individuele diensten" etc. */
.latepoint-w .pb-heading .pbh-label,
.latepoint-w .order-summary-items-heading {
	color: var(--xz-lp-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-size: 11px;
}
.latepoint-w .pb-heading .pbh-line,
.latepoint-w .order-summary-items-heading .osih-line {
	background-color: rgba(var(--xz-lp-rgb), 0.18);
}

/* ==========================================================================
   CART ITEMS — the multi-service list (summary + verify)
   ========================================================================== */
/* Make the cart items fill the panel width (LatePoint shrinks them to content
   and pads the inner-top, leaving them ~50px narrower than the price box). */
.latepoint-w .os-summary-contents-inner-top {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.latepoint-w .os-summary-contents-inner-top,
.latepoint-w .summary-panel-items-wrapper,
.latepoint-w .active-cart-item-wrapper,
.latepoint-w .cart-summary-main-section,
.latepoint-w .cart-item-wrapper,
.latepoint-w .summary-box {
	width: 100% !important;
	box-sizing: border-box;
}
.latepoint-w .summary-box,
.latepoint-w .summary-box-wrapper .summary-box {
	background: var(--xz-lp-wash);
	border: 1px solid rgba(var(--xz-lp-rgb), 0.16);
	border-radius: 14px;
	/* Internal breathing room — LatePoint ships these with 0 side padding, so
	   the service name/date were touching the card edge. */
	padding: 14px 16px !important;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
/* Comfortable spacing between the active item, the "In cart" divider and the
   items already in the cart. */
.latepoint-w .active-cart-item-wrapper {
	margin-bottom: 10px !important;
}
.latepoint-w .cart-item-wrapper {
	padding: 0 !important;
	margin: 10px 0 0 !important;
}
.latepoint-w .pb-heading {
	margin: 14px 0 10px !important;
}
.latepoint-w .cart-item-wrapper .summary-box:hover,
.latepoint-w .active-cart-item-wrapper .summary-box:hover {
	border-color: rgba(var(--xz-lp-rgb), 0.4);
	box-shadow: 0 10px 26px rgba(var(--xz-lp-rgb), 0.14);
}
/* The currently-active (just chosen) service stands out from the cart. */
.latepoint-w .active-cart-item-wrapper .summary-box {
	background: #fff;
	border-color: rgba(var(--xz-lp-rgb), 0.35);
	box-shadow: 0 8px 22px rgba(var(--xz-lp-rgb), 0.12);
}
.latepoint-w .active-cart-item-wrapper.is-separated {
	padding-bottom: 6px;
	margin-bottom: 6px;
}
.latepoint-w .sbc-big-item,
.latepoint-w .summary-box .os-service-name {
	color: var(--xz-lp-ink);
	font-weight: 700;
}
.latepoint-w .sbc-highlighted-item,
.latepoint-w .summary-box .os-service-price {
	color: var(--xz-lp-dark);
}
/* Icons inside the summary boxes take the brand tint. */
.latepoint-w .summary-box .latepoint-icon,
.latepoint-w .booking-summary-info-w .latepoint-icon {
	color: var(--xz-lp);
}

/* Remove-from-cart button. */
.latepoint-w .os-remove-item-from-cart {
	background: rgba(var(--xz-lp-rgb), 0.10);
	border-radius: 50%;
	transition: background 0.2s ease, transform 0.2s ease;
}
.latepoint-w .os-remove-item-from-cart:hover {
	background: rgba(220, 70, 70, 0.14);
	transform: rotate(90deg);
}

/* ==========================================================================
   PRICE BREAKDOWN — totals & values
   ========================================================================== */
.latepoint-w .summary-price-breakdown-wrapper {
	background: var(--xz-lp-wash);
	border: 1px solid rgba(var(--xz-lp-rgb), 0.14);
	border-radius: 14px;
	padding: 16px 18px;
	margin-top: 14px;
}
.latepoint-w .summary-price-item-w {
	padding: 4px 0;
	color: #47503a;
}
.latepoint-w .summary-price-item-w .spi-price {
	font-weight: 600;
	color: var(--xz-lp-ink);
}
.latepoint-w .summary-price-item-w.spi-sub {
	color: #7a8168;
	font-size: 13px;
}
/* Credits / already-paid rows in a positive tint. */
.latepoint-w .summary-price-item-w.spi-positive .spi-price {
	color: #2e7d32;
}
/* "Te betalen" (Balance Due) — the number the customer cares about. */
.latepoint-w .summary-price-item-w.spi-total {
	border-top: 2px solid rgba(var(--xz-lp-rgb), 0.35) !important;
	margin-top: 10px;
	padding-top: 12px;
	font-size: 17px;
	font-weight: 800;
	color: var(--xz-lp-ink);
}
.latepoint-w .summary-price-item-w.spi-total .spi-price {
	color: var(--xz-lp-dark);
	font-weight: 800;
}
.latepoint-w .price-breakdown-unfold {
	color: var(--xz-lp-dark);
	font-weight: 600;
}
.latepoint-w .pi-badge {
	background: rgba(var(--xz-lp-rgb), 0.14);
	color: var(--xz-lp-dark);
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 11px;
}

/* ==========================================================================
   CONFIRMATION SCREEN
   ========================================================================== */
.latepoint-w .confirmation-info-w {
	max-width: 720px;
	margin: 0 auto;
}
/* Success header — recolor LatePoint's green status to olive. */
.latepoint-w .summary-status-wrapper {
	background: linear-gradient(160deg, var(--xz-lp-wash), #fff);
	border: 1px solid rgba(var(--xz-lp-rgb), 0.18);
	border-radius: 18px;
	padding: 30px 24px;
	text-align: center;
	box-shadow: 0 18px 40px rgba(var(--xz-lp-rgb), 0.10);
}
.latepoint-w .summary-status-wrapper .ss-icon {
	background: linear-gradient(135deg, var(--xz-lp), var(--xz-lp-dark));
	color: #fff;
	box-shadow: 0 10px 24px rgba(var(--xz-lp-rgb), 0.4);
}
.latepoint-w .summary-status-wrapper .ss-icon::before,
.latepoint-w .summary-status-wrapper .ss-icon i {
	color: #fff;
}
.latepoint-w .summary-status-wrapper .ss-title {
	color: var(--xz-lp-ink);
	font-size: 26px;
	font-weight: 800;
	margin-top: 14px;
}
.latepoint-w .summary-status-wrapper .ss-description {
	color: #6b7358;
	margin-top: 4px;
}
.latepoint-w .ss-confirmation-number {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 6px 16px;
	background: rgba(var(--xz-lp-rgb), 0.10);
	border-radius: 999px;
	font-size: 13px;
}
.latepoint-w .ss-confirmation-number span {
	color: #6b7358;
}
.latepoint-w .ss-confirmation-number strong {
	color: var(--xz-lp-dark);
	letter-spacing: 0.5px;
}

/* Per-booking action buttons: Aan agenda toevoegen / Afdrukken / ... */
.latepoint-w .booking-full-summary-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}
.latepoint-w .booking-summary-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid rgba(var(--xz-lp-rgb), 0.28);
	border-radius: 999px;
	background: #fff;
	color: var(--xz-lp-dark) !important;
	font-weight: 600;
	font-size: 13px;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.latepoint-w .booking-summary-action-btn:hover {
	background: var(--xz-lp-wash);
	border-color: var(--xz-lp);
	transform: translateY(-1px);
}
.latepoint-w .booking-summary-action-btn.cancel-appointment-btn {
	color: #c0392b !important;
	border-color: rgba(192, 57, 43, 0.3);
}
.latepoint-w .booking-summary-action-btn.cancel-appointment-btn:hover {
	background: rgba(192, 57, 43, 0.06);
	border-color: rgba(192, 57, 43, 0.5);
}

/* Account-creation prompt block. */
.latepoint-w .confirmation-cabinet-info,
.latepoint-w .info-box {
	background: var(--xz-lp-wash);
	border: 1px solid rgba(var(--xz-lp-rgb), 0.16);
	border-radius: 14px;
}
.latepoint-w .confirmation-cabinet-link,
.latepoint-w .show-set-password-fields {
	color: var(--xz-lp-dark);
	font-weight: 700;
}

/* ==========================================================================
   FORM POLISH — service list, inputs, side panel (all steps)
   ========================================================================== */

/* Service + category rows: LatePoint ships them square with tight 10px padding.
   Round them and give room to breathe, with an olive hover. */
.latepoint-w .os-service-selector,
.latepoint-w .os-service-category-w > .os-service-category,
.latepoint-w .os-item-category-info-w {
	border-radius: 12px !important;
}
.latepoint-w .os-service-selector {
	padding: 13px 15px !important;
	margin-bottom: 10px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.latepoint-w .os-service-selector:last-child {
	margin-bottom: 0 !important;
}
.latepoint-w .os-service-selector:hover {
	border-color: rgba(var(--xz-lp-rgb), 0.55) !important;
	box-shadow: 0 6px 18px rgba(var(--xz-lp-rgb), 0.12);
}
.latepoint-w .os-service-selector.selected,
.latepoint-w .os-service-selector.active {
	background: var(--xz-lp-wash) !important;
}
/* Service price / duration meta in olive. */
.latepoint-w .os-service-selector .os-service-price,
.latepoint-w .os-item-price,
.latepoint-w .os-service-duration {
	color: var(--xz-lp-dark);
}

/* Category headers (expandable). */
.latepoint-w .os-item-category-info-w {
	padding: 14px 15px !important;
	transition: background 0.2s ease;
}
.latepoint-w .os-item-category-info-w:hover {
	background: var(--xz-lp-wash) !important;
}
.latepoint-w .os-item-category-w {
	margin-bottom: 12px;
}

/* Text inputs / selects / textareas: consistent rounding + olive focus ring. */
.latepoint-w .os-form-control,
.latepoint-w input[type="text"],
.latepoint-w input[type="email"],
.latepoint-w input[type="tel"],
.latepoint-w textarea,
.latepoint-w select {
	border-radius: 10px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.latepoint-w .os-form-control:focus,
.latepoint-w input:focus,
.latepoint-w textarea:focus,
.latepoint-w select:focus {
	border-color: var(--xz-lp) !important;
	box-shadow: 0 0 0 3px rgba(var(--xz-lp-rgb), 0.15) !important;
	outline: none !important;
}
/* Breathing room between stacked form rows. */
.latepoint-w .os-form-group {
	margin-bottom: 12px;
}
/* Phone field flag/prefix box aligns with the olive theme. */
.latepoint-w .os-phone-field-wrapper .selected-flag:hover,
.latepoint-w .iti__selected-flag:hover {
	background: var(--xz-lp-wash);
}

/* Side panel heading colour. */
.latepoint-w .latepoint-side-panel .bf-side-heading,
.latepoint-w .os-step-side-panel-heading,
.latepoint-w .latepoint-side-panel h2 {
	color: var(--xz-lp-ink);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {
	.latepoint-w .summary-status-wrapper {
		padding: 24px 16px;
		border-radius: 16px;
	}
	.latepoint-w .summary-status-wrapper .ss-title {
		font-size: 22px;
	}
	.latepoint-w .booking-summary-action-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
	/* On mobile the summary drawer opens under the sticky site header — give its
	   olive header a touch more top room so the "Overzicht" title isn't clipped. */
	.latepoint-w.show-summary-on-mobile .summary-header {
		padding-top: 16px;
		padding-bottom: 14px;
	}
	/* Comfortable side padding for the whole panel content on small screens. */
	.latepoint-w .os-summary-contents-inner {
		padding-left: 14px;
		padding-right: 14px;
	}
}