/* LatePoint Recipe Extras — Global border-radius polish (v1.3.0)
 *
 * Scoped to the LP booking form widget. One coordinated radius scale:
 *
 *   - Main container (booking-form-element):  15px  (FORCED — overrides
 *                                                     LP's "rounded" /
 *                                                     "flat" theme toggle)
 *   - Cards / panels / plate items:           15px
 *   - Inputs / qty fields / timeslot tiles:   12px
 *   - Action buttons / pills / qty +/- :      10px
 *   - Datepicker:                             LP defaults (untouched)
 *
 * v1.3.0 changelog:
 *   - Forced 15px on the main booking container (was inheriting LP's
 *     "Round corners" / "Flat" theme setting).
 *   - Dropped all custom datepicker radius styling — LP's own values
 *     take over (no more competing radii on the calendar).
 *   - Collapsed the 16/20px split into ONE 15px standard so every
 *     box visually agrees.
 * ===================================================================*/


/* ===================================================================
 * Main booking container — FORCE 15px regardless of LP theme setting
 * ===================================================================*/

.latepoint-booking-form-element,
.latepoint-booking-form-element.skin-rounded,
.latepoint-booking-form-element.skin-flat,
.latepoint-booking-form-element .latepoint-body,
.latepoint-body.latepoint-booking-form-element {
	border-radius: 20px !important;
	overflow: hidden;
}


/* ===================================================================
 * Cards, panels, large containers — 15px
 * ===================================================================*/

.latepoint-booking-form-element .latepoint-summary-w,
.latepoint-booking-form-element .latepoint-side-panel-i,
.latepoint-booking-form-element .latepoint-form-w,
.latepoint-booking-form-element .latepoint-form-w form,
.latepoint-booking-form-element .latepoint-step-content,
.latepoint-booking-form-element .white-box,
.latepoint-booking-form-element .os-form-w {
	border-radius: 15px;
}

/* ===================================================================
 * v1.4.10 — LP lightbox / popup / modal.
 *
 * Matches the 20px of the main booking container so the popup feels
 * consistent with the rest of the form. Covers all common LP modal
 * selectors (lightbox-w/lightbox-i/lightbox-content, plus the
 * latepoint-popup variants used by some LP Pro builds).
 * ===================================================================*/

.latepoint-lightbox-w .latepoint-lightbox-i,
.latepoint-lightbox-w .latepoint-lightbox-content,
.latepoint-lightbox-content,
.latepoint-popup,
.latepoint-popup-content,
.latepoint-modal,
.latepoint-modal-content,
.os-popup,
.os-popup-content {
	border-radius: 20px !important;
	overflow: hidden;
}


/* ===================================================================
 * Selectable items / plates / option cards — 15px
 * ===================================================================*/

.latepoint-booking-form-element .os-item,
.latepoint-booking-form-element .os-item.selected,
.latepoint-booking-form-element .os-item.has-quantity,
.latepoint-booking-form-element .os-selectable-item,
.latepoint-booking-form-element .os-selectable-item.selected,
.latepoint-booking-form-element .os-priced-item,
.latepoint-booking-form-element .os-item-i,
.latepoint-booking-form-element .latepoint-service-item,
.latepoint-booking-form-element .latepoint-agent-item,
.latepoint-booking-form-element .latepoint-location-item,
.latepoint-booking-form-element .lp-menu-plate {
	border-radius: 15px !important;
}


/* ===================================================================
 * Messages, summary blocks, sub-panels — 15px
 * ===================================================================*/

.latepoint-booking-form-element .os-form-message-w,
.latepoint-booking-form-element .latepoint-message,
.latepoint-booking-form-element .info-box,
.latepoint-booking-form-element .summary-box-wrapper,
.latepoint-booking-form-element .summary-price-breakdown-wrapper,
.latepoint-booking-form-element .os-form-group {
	border-radius: 15px;
}

.latepoint-booking-form-element .latepoint-summary-w .summary-box-content,
.latepoint-booking-form-element .latepoint-summary-w .summary-row {
	border-radius: 12px;
}


/* ===================================================================
 * Form inputs — 12px (one notch tighter than cards)
 * ===================================================================*/

.latepoint-booking-form-element input[type="text"],
.latepoint-booking-form-element input[type="email"],
.latepoint-booking-form-element input[type="tel"],
.latepoint-booking-form-element input[type="password"],
.latepoint-booking-form-element input[type="number"],
.latepoint-booking-form-element textarea,
.latepoint-booking-form-element select,
.latepoint-booking-form-element .os-form-control,
.latepoint-booking-form-element .latepoint-form-control,
.latepoint-booking-form-element .item-quantity-selector-input,
.latepoint-booking-form-element .dp-timepicker-trigger,
.latepoint-booking-form-element .dp-timebox,
.latepoint-booking-form-element .dp-timeslot {
	border-radius: 12px !important;
}


/* ===================================================================
 * Buttons, pills, chips — 10px
 * ===================================================================*/

.latepoint-booking-form-element .latepoint-btn,
.latepoint-booking-form-element .latepoint-next-btn,
.latepoint-booking-form-element .latepoint-prev-btn,
.latepoint-booking-form-element .latepoint-btn-step-next,
.latepoint-booking-form-element .latepoint-btn-step-prev,
.latepoint-booking-form-element .os-next-btn,
.latepoint-booking-form-element .os-prev-btn,
.latepoint-booking-form-element button.latepoint-btn-primary,
.latepoint-booking-form-element button.latepoint-btn-secondary,
.latepoint-booking-form-element .latepoint-btn-block,
.latepoint-booking-form-element .os-btn,
.latepoint-booking-form-element button[type="submit"],
.latepoint-booking-form-element .item-quantity-selector,
.latepoint-booking-form-element .item-quantity-selector-minus,
.latepoint-booking-form-element .item-quantity-selector-plus,
.latepoint-booking-form-element .latepoint-time-slot,
.latepoint-booking-form-element .os-time-slot,
.latepoint-booking-form-element .latepoint-tag,
.latepoint-booking-form-element .latepoint-badge,
.latepoint-booking-form-element .lp-menu-counter,
.latepoint-booking-form-element .lp-extras-cap-counter {
	border-radius: 10px !important;
}


/* ===================================================================
 * Datepicker — intentionally untouched.
 *
 * v1.2.x added rules on .os-datepicker-*, .os-day, .latepoint-datepicker
 * that fought LP's native calendar styling. Removed in v1.3.0; the
 * calendar renders with LatePoint's own values again.
 * ===================================================================*/


/* ===================================================================
 * v1.3.20 — User-supplied CSS for body + heading wrap.
 * Override LP defaults to match the polished container look.
 * ===================================================================*/

.latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-body {
	padding: 20px !important;
	flex: 1 !important;
	overflow-y: auto !important;
	transition: padding .2s ease, min-height .2s ease, background .2s ease !important;
	position: relative !important;
	min-height: 200px !important;
}

.latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w {
	background-color: #fff !important;
	padding: 15px 15px 15px 20px !important;
	border-bottom: 1px solid rgba(0, 0, 0, .05) !important;
	text-align: left !important;
	display: flex !important;
	align-items: center !important;
}


/* ===================================================================
 * v1.3.22 — Defensive icon-font protection.
 *
 * The +/- buttons, Atrás/Siguiente prev/next buttons, and other LP
 * icon-font elements rely on LP's icon font being applied via ::before
 * pseudo-elements. CSS transitions applied to ancestor elements can
 * sometimes interrupt the icon font's rendering during state changes.
 * Disabling transitions on icon pseudos keeps them stable.
 * ===================================================================*/

.latepoint-booking-form-element [class*="latepoint-icon-"]::before,
.latepoint-booking-form-element [class*="latepoint-icon-"]::after,
.latepoint-booking-form-element .item-quantity-selector-plus::before,
.latepoint-booking-form-element .item-quantity-selector-plus::after,
.latepoint-booking-form-element .item-quantity-selector-minus::before,
.latepoint-booking-form-element .item-quantity-selector-minus::after,
.latepoint-booking-form-element .latepoint-prev-btn::before,
.latepoint-booking-form-element .latepoint-prev-btn::after,
.latepoint-booking-form-element .latepoint-next-btn::before,
.latepoint-booking-form-element .latepoint-next-btn::after,
.latepoint-booking-form-element .os-prev-btn::before,
.latepoint-booking-form-element .os-prev-btn::after,
.latepoint-booking-form-element .os-next-btn::before,
.latepoint-booking-form-element .os-next-btn::after {
	transition: none !important;
	animation: none !important;
}


/* ===================================================================
 * v1.3.24 — Date picker step polish.
 *
 * The .time-selector-w container (and its .times-header child) ship
 * with LP defaults that produce asymmetric left padding on the
 * datepicker step — content was pushed inward on the left for no
 * visible reason. Reset to symmetric flush-left/right inside the
 * already-padded .latepoint-body container.
 *
 * Targets the datepicker step only via .step-datepicker-w prefix so
 * the .time-selector-w doesn't get touched elsewhere (LP also uses
 * it inside the recurring-suggestion wrapper).
 * ===================================================================*/

.latepoint-booking-form-element .step-datepicker-w .time-selector-w,
.latepoint-booking-form-element .step-datepicker-w .time-selector-w.style-timebox,
.latepoint-booking-form-element .step-datepicker-w .time-selector-w.with-end-time {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.latepoint-booking-form-element .step-datepicker-w .time-selector-w .times-header {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	justify-content: center !important;
	text-align: center !important;
}

.latepoint-booking-form-element .step-datepicker-w .os-dates-and-times-w {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ===================================================================
 * v1.4.11 — Mobile web-app feel.
 *
 * On phones the LP form takes the full viewport; rounded outer
 * corners feel out of place against the screen edges. Flatten the
 * outermost containers below 768px so the booking flow reads like
 * a native app.
 *
 * Inner cards (plate items, summary box, messages, inputs) keep
 * their radius — they're still on a card-on-card layout inside the
 * form, where rounded corners make sense.
 * ===================================================================*/

@media (max-width: 767px) {
	.latepoint-booking-form-element,
	.latepoint-booking-form-element.skin-rounded,
	.latepoint-booking-form-element.skin-flat,
	.latepoint-booking-form-element .latepoint-body,
	.latepoint-body.latepoint-booking-form-element,
	.latepoint-booking-form-element .latepoint-summary-w,
	.latepoint-booking-form-element .latepoint-side-panel-i,
	.latepoint-booking-form-element .latepoint-form-w,
	.latepoint-booking-form-element .latepoint-form-w form,
	.latepoint-booking-form-element .latepoint-step-content,
	.latepoint-booking-form-element .os-form-w,
	.latepoint-lightbox-w,
	.latepoint-lightbox-w .latepoint-lightbox-i,
	.latepoint-lightbox-w .latepoint-lightbox-content,
	.latepoint-lightbox-content,
	.latepoint-popup,
	.latepoint-popup-content,
	.latepoint-modal,
	.latepoint-modal-content,
	.os-popup,
	.os-popup-content {
		border-radius: 0 !important;
	}
}