/* OSAM Bookings — front-end form. Override via the CSS variables below, Elementor controls or Settings → Appearance. */
.osb-booking {
	--osb-accent: #3b5bdb;
	--osb-text: #1f2933;
	--osb-bg: #ffffff;
	--osb-radius: 10px;
	--osb-border: rgba(31, 41, 51, .14);
	--osb-muted: rgba(31, 41, 51, .62);
	--osb-soft: rgba(59, 91, 219, .08);
	--osb-on-accent: #fff;
	--osb-gap: 16px;
	--osb-font-size: 15px;
	color: var(--osb-text);
	background: var(--osb-bg);
	border: 1px solid var(--osb-border);
	border-radius: calc(var(--osb-radius) + 4px);
	padding: clamp(16px, 3vw, 28px);
	font-size: var(--osb-font-size);
	line-height: 1.5;
	box-sizing: border-box;
	max-width: 100%;
	position: relative;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.osb-booking {
		--osb-border: color-mix(in srgb, var(--osb-text) 14%, transparent);
		--osb-muted: color-mix(in srgb, var(--osb-text) 62%, transparent);
		--osb-soft: color-mix(in srgb, var(--osb-accent) 9%, transparent);
	}
}
.osb-booking *, .osb-booking *::before, .osb-booking *::after { box-sizing: border-box; }
.osb-booking button { font: inherit; color: inherit; cursor: pointer; text-transform: none; letter-spacing: normal; line-height: inherit; box-shadow: none; text-shadow: none; }
.osb-booking button:disabled { cursor: default; }
.osb-booking :focus-visible { outline: 2px solid var(--osb-accent); outline-offset: 2px; }
.osb-booking.osb-is-busy .osb-body { opacity: .7; pointer-events: none; }

.osb-booking .osb-loading { color: var(--osb-muted); padding: 24px 0; text-align: center; }
.osb-booking .osb-loading::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border: 2px solid var(--osb-border); border-top-color: var(--osb-accent); border-radius: 50%; animation: osb-spin .8s linear infinite; }
@keyframes osb-spin { to { transform: rotate(360deg); } }

.osb-booking .osb-title { font-size: 1.25em; font-weight: 700; margin: 0 0 4px; color: var(--osb-text); outline: none; }
.osb-booking .osb-subtitle, .osb-booking .osb-muted { color: var(--osb-muted); margin: 0 0 var(--osb-gap); }
.osb-booking .osb-empty { color: var(--osb-muted); padding: 16px 0; }

/* Tabs */
.osb-booking .osb-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--osb-soft); border-radius: 99px; margin-bottom: var(--osb-gap); }
.osb-booking .osb-tab { border: 0; background: transparent; padding: 6px 16px; border-radius: 99px; font-weight: 600; }
.osb-booking .osb-tab.is-active { background: var(--osb-accent); color: var(--osb-on-accent); }

/* Progress */
.osb-booking .osb-progress { list-style: none; margin: 0 0 calc(var(--osb-gap) * 1.5); padding: 0; display: flex; gap: 8px; counter-reset: osb; flex-wrap: wrap; }
.osb-booking .osb-progress li { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; font-size: .85em; color: var(--osb-muted); padding-top: 8px; border-top: 3px solid var(--osb-border); margin: 0; }
.osb-booking .osb-progress li b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8em; background: var(--osb-border); color: var(--osb-text); }
.osb-booking .osb-progress li span, .osb-booking .osb-progress li button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osb-booking .osb-progress li button { border: 0; background: none; padding: 0; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.osb-booking .osb-progress li.is-done, .osb-booking .osb-progress li.is-current { border-top-color: var(--osb-accent); color: var(--osb-text); }
.osb-booking .osb-progress li.is-done b, .osb-booking .osb-progress li.is-current b { background: var(--osb-accent); color: var(--osb-on-accent); }
@media (max-width: 560px) { .osb-booking .osb-progress li:not(.is-current) span, .osb-booking .osb-progress li:not(.is-current) button { display: none; } .osb-booking .osb-progress li { flex: 0 1 auto; } .osb-booking .osb-progress li.is-current { flex: 1 1 auto; } }

/* Chips */
.osb-booking .osb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 var(--osb-gap); }
.osb-booking .osb-chip { border: 1px solid var(--osb-border); background: transparent; border-radius: 99px; padding: 4px 14px; font-size: .9em; }
.osb-booking .osb-chip.is-active { background: var(--osb-accent); border-color: var(--osb-accent); color: var(--osb-on-accent); }

/* Cards (services, staff, events) */
.osb-booking .osb-cards, .osb-booking .osb-events { display: grid; gap: 10px; margin-top: 12px; }
.osb-booking .osb-cards--staff { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.osb-booking .osb-card, .osb-booking .osb-event {
	display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
	padding: 14px 16px; background: var(--osb-bg); color: var(--osb-text);
	border: 1px solid var(--osb-border); border-radius: var(--osb-radius);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.osb-booking .osb-card:hover:not(:disabled), .osb-booking .osb-event:hover:not(:disabled), .osb-booking .osb-card.is-selected { border-color: var(--osb-accent); box-shadow: 0 0 0 1px var(--osb-accent); }
.osb-booking .osb-card__dot { flex: none; width: 10px; height: 40px; border-radius: 99px; background: var(--osb-item, var(--osb-accent)); }
.osb-booking .osb-card__img, .osb-booking .osb-event__img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--osb-radius) - 2px); }
.osb-booking .osb-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.osb-booking .osb-card__name { font-weight: 600; }
.osb-booking .osb-card__meta { color: var(--osb-muted); font-size: .9em; }
.osb-booking .osb-card__desc { color: var(--osb-muted); font-size: .88em; }
.osb-booking .osb-card__desc p { margin: 0; }
.osb-booking .osb-card__price { flex: none; font-weight: 700; white-space: nowrap; }
.osb-booking .osb-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; background: var(--osb-soft); color: var(--osb-accent); font-weight: 700; font-size: 1.1em; }
.osb-booking .osb-event__date { flex: none; width: 56px; text-align: center; border-radius: calc(var(--osb-radius) - 2px); background: var(--osb-item, var(--osb-accent)); color: #fff; padding: 6px 0; font-size: .8em; text-transform: uppercase; line-height: 1.2; }
.osb-booking .osb-event__date b { display: block; font-size: 1.6em; }
.osb-booking .osb-event__left { font-size: .82em; font-weight: 600; color: var(--osb-accent); margin-top: 2px; }
.osb-booking .osb-event.is-full { opacity: .55; }
.osb-booking .osb-event.is-full .osb-event__left { color: var(--osb-muted); }
@media (max-width: 480px) { .osb-booking .osb-event__img, .osb-booking .osb-card__img { display: none; } }

/* Calendar + slots */
.osb-booking .osb-datetime { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr); gap: calc(var(--osb-gap) * 1.5); align-items: start; }
@media (max-width: 700px) { .osb-booking .osb-datetime { grid-template-columns: 1fr; } }
.osb-booking .osb-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.osb-booking .osb-cal__title { font-weight: 700; }
.osb-booking .osb-cal__nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--osb-border); background: transparent; font-size: 1.2em; line-height: 1; padding: 0; }
.osb-booking .osb-cal__nav:disabled { opacity: .3; }
.osb-booking .osb-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.osb-booking .osb-cal__grid.is-loading { opacity: .5; }
.osb-booking .osb-cal__dow { text-align: center; font-size: .75em; color: var(--osb-muted); text-transform: uppercase; padding: 4px 0; }
.osb-booking .osb-cal__day { aspect-ratio: 1; border: 0; background: transparent; border-radius: calc(var(--osb-radius) - 2px); padding: 0; color: var(--osb-muted); opacity: .45; position: relative; }
.osb-booking .osb-cal__day.is-available { opacity: 1; color: var(--osb-text); background: var(--osb-soft); font-weight: 600; }
.osb-booking .osb-cal__day.is-available:hover { box-shadow: inset 0 0 0 1px var(--osb-accent); }
.osb-booking .osb-cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.osb-booking .osb-cal__day.is-selected { background: var(--osb-accent); color: var(--osb-on-accent); }
.osb-booking .osb-slots__date { font-weight: 700; margin: 4px 0 10px; }
.osb-booking .osb-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto; padding: 2px; }
.osb-booking .osb-slot { border: 1px solid var(--osb-border); background: var(--osb-bg); border-radius: calc(var(--osb-radius) - 2px); padding: 9px 6px; font-weight: 600; display: flex; flex-direction: column; align-items: center; }
.osb-booking .osb-slot small { font-weight: 400; font-size: .75em; color: var(--osb-muted); }
.osb-booking .osb-slot:hover, .osb-booking .osb-slot.is-selected { border-color: var(--osb-accent); background: var(--osb-accent); color: var(--osb-on-accent); }
.osb-booking .osb-slot:hover small, .osb-booking .osb-slot.is-selected small { color: inherit; }

/* Details */
.osb-booking .osb-details-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: calc(var(--osb-gap) * 1.5); align-items: start; margin-top: 12px; }
@media (max-width: 760px) { .osb-booking .osb-details-wrap { grid-template-columns: 1fr; } .osb-booking .osb-summary { order: -1; } }
.osb-booking .osb-details { display: flex; flex-wrap: wrap; gap: 0 var(--osb-gap); margin: 0; }
.osb-booking .osb-fields { display: contents; }
.osb-booking .osb-field { margin: 0 0 14px; flex: 1 1 100%; min-width: 0; border: 0; padding: 0; }
.osb-booking .osb-field--half { flex: 1 1 calc(50% - var(--osb-gap)); min-width: 200px; }
.osb-booking .osb-field > label, .osb-booking .osb-field legend { display: block; font-weight: 600; font-size: .9em; margin-bottom: 4px; padding: 0; }
.osb-booking .osb-req { color: var(--osb-accent); }
.osb-booking .osb-field input:not([type=checkbox]):not([type=radio]), .osb-booking .osb-field select, .osb-booking .osb-field textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--osb-border); border-radius: calc(var(--osb-radius) - 2px);
	background: var(--osb-bg); color: var(--osb-text); font: inherit; min-height: 44px; margin: 0; box-shadow: none;
}
.osb-booking .osb-field input:focus, .osb-booking .osb-field select:focus, .osb-booking .osb-field textarea:focus { border-color: var(--osb-accent); outline: none; box-shadow: 0 0 0 3px var(--osb-soft); }
.osb-booking .osb-field--check label, .osb-booking .osb-radios label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.osb-booking .osb-field--check input, .osb-booking .osb-radios input, .osb-booking .osb-method input { accent-color: var(--osb-accent); margin-top: 4px; }
.osb-booking .osb-radios { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.osb-booking .osb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.osb-booking .osb-methods { flex: 1 1 100%; border: 0; padding: 0; margin: 4px 0 14px; display: grid; gap: 8px; }
.osb-booking .osb-methods legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.osb-booking .osb-method { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--osb-border); border-radius: calc(var(--osb-radius) - 2px); cursor: pointer; }
.osb-booking .osb-method.is-selected { border-color: var(--osb-accent); box-shadow: 0 0 0 1px var(--osb-accent); }
.osb-booking .osb-method span { display: flex; flex-direction: column; }
.osb-booking .osb-method small { color: var(--osb-muted); }
.osb-booking .osb-terms { flex: 1 1 100%; }
.osb-booking .osb-terms a { color: var(--osb-accent); }

/* Summary */
.osb-booking .osb-summary, .osb-booking .osb-done__card { background: var(--osb-soft); border-radius: var(--osb-radius); padding: 16px 18px; }
.osb-booking .osb-summary h4 { margin: 0 0 8px; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--osb-muted); }
.osb-booking .osb-summary__item { font-weight: 700; margin: 0 0 8px; }
.osb-booking .osb-summary dl, .osb-booking .osb-done__card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .92em; }
.osb-booking .osb-summary dt, .osb-booking .osb-done__card dt { color: var(--osb-muted); margin: 0; }
.osb-booking .osb-summary dd, .osb-booking .osb-done__card dd { margin: 0; text-align: right; }
.osb-booking .osb-summary__total { display: flex; justify-content: space-between; border-top: 1px solid var(--osb-border); margin: 12px 0 0; padding-top: 10px; font-size: 1.05em; }

/* Buttons & actions */
.osb-booking .osb-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex: 1 1 100%; margin-top: var(--osb-gap); flex-wrap: wrap; }
.osb-booking .osb-actions--center { justify-content: center; }
.osb-booking .osb-btn { border-radius: calc(var(--osb-radius) - 2px); padding: 11px 22px; font-weight: 600; border: 1px solid transparent; min-height: 44px; transition: filter .15s, background .15s; }
.osb-booking .osb-btn--primary { background: var(--osb-accent); color: var(--osb-on-accent); margin-left: auto; }
.osb-booking .osb-btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.osb-booking .osb-btn--primary:disabled { opacity: .7; }
.osb-booking .osb-btn--ghost { background: transparent; border-color: var(--osb-border); color: var(--osb-text); }
.osb-booking .osb-btn--danger { color: #c92a2a; }
.osb-booking .osb-actions--center .osb-btn--primary { margin-left: 0; }

/* Alerts & done */
.osb-booking .osb-alert { padding: 10px 14px; border-radius: calc(var(--osb-radius) - 2px); margin-bottom: var(--osb-gap); }
.osb-booking .osb-alert--error { background: #fff0f0; color: #a61e1e; border: 1px solid #f5c2c2; }
.osb-booking .osb-done { text-align: center; max-width: 480px; margin: 0 auto; }
.osb-booking .osb-done__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; background: #e6f4ea; color: #1e7e34; }
.osb-booking .osb-done--info .osb-done__icon { background: var(--osb-soft); color: var(--osb-accent); }
.osb-booking .osb-done--error .osb-done__icon { background: #fff0f0; color: #a61e1e; }
.osb-booking .osb-done__card { text-align: left; margin: var(--osb-gap) 0; }

/* ===== Display options (Settings → Appearance, shortcode attributes, Elementor) ===== */

/* Designs */
.osb-booking.osb-design-card { box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -6px rgba(16, 24, 40, .08); }
.osb-booking.osb-design-flat { border-color: transparent; background: var(--osb-soft); box-shadow: none; }
@supports (color: color-mix(in srgb, red, blue)) { .osb-booking.osb-design-flat { background: color-mix(in srgb, var(--osb-accent) 7%, var(--osb-bg)); } }
.osb-booking.osb-design-flat .osb-summary, .osb-booking.osb-design-flat .osb-done__card { background: var(--osb-bg); }
.osb-booking.osb-design-minimal { border: 0; background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.osb-booking.osb-design-minimal .osb-card, .osb-booking.osb-design-minimal .osb-event { border-width: 0 0 1px; border-radius: 0; padding-left: 0; padding-right: 0; background: transparent; }
.osb-booking.osb-design-minimal .osb-card:hover:not(:disabled), .osb-booking.osb-design-minimal .osb-event:hover:not(:disabled), .osb-booking.osb-design-minimal .osb-card.is-selected { box-shadow: none; border-color: var(--osb-accent); }
.osb-booking.osb-design-minimal .osb-cards, .osb-booking.osb-design-minimal .osb-events { gap: 0; }

/* Grid layout for services */
.osb-booking.osb-layout-grid .osb-cards:not(.osb-cards--staff) { grid-template-columns: repeat(var(--osb-cols, 2), minmax(0, 1fr)); gap: 14px; }
.osb-booking.osb-cols-2 { --osb-cols: 2; }
.osb-booking.osb-cols-3 { --osb-cols: 3; }
.osb-booking.osb-cols-4 { --osb-cols: 4; }
.osb-booking.osb-layout-grid .osb-cards:not(.osb-cards--staff) .osb-card { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.osb-booking.osb-layout-grid .osb-cards:not(.osb-cards--staff) .osb-card__img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
.osb-booking.osb-layout-grid .osb-cards:not(.osb-cards--staff) .osb-card__dot { width: 100%; height: 6px; border-radius: 0; }
.osb-booking.osb-layout-grid .osb-cards:not(.osb-cards--staff) .osb-card__body { padding: 14px 16px 4px; }
.osb-booking.osb-layout-grid .osb-cards:not(.osb-cards--staff) .osb-card__price { padding: 4px 16px 16px; margin-top: auto; }
.osb-booking.osb-layout-grid.osb-design-minimal .osb-cards:not(.osb-cards--staff) .osb-card { border-width: 1px; border-radius: var(--osb-radius); }
@media (max-width: 900px) { .osb-booking.osb-cols-4, .osb-booking.osb-cols-3 { --osb-cols: 2; } }
@media (max-width: 520px) { .osb-booking.osb-layout-grid .osb-cards:not(.osb-cards--staff) { grid-template-columns: 1fr; } }

/* Button shapes */
.osb-booking.osb-btn-pill .osb-btn, .osb-booking.osb-btn-pill .osb-slot { border-radius: 999px; }
.osb-booking.osb-btn-square .osb-btn, .osb-booking.osb-btn-square .osb-slot, .osb-booking.osb-btn-square .osb-cal__day { border-radius: 0; }

/* Density */
.osb-booking.osb-density-compact { --osb-gap: 10px; padding: clamp(12px, 2vw, 18px); }
.osb-booking.osb-density-compact .osb-card, .osb-booking.osb-density-compact .osb-event { padding: 9px 12px; gap: 10px; }
.osb-booking.osb-density-compact .osb-cards, .osb-booking.osb-density-compact .osb-events { gap: 6px; }
.osb-booking.osb-density-compact .osb-slot { padding: 6px 4px; }
.osb-booking.osb-density-compact .osb-btn { padding: 8px 16px; min-height: 38px; }
.osb-booking.osb-density-compact .osb-field input:not([type=checkbox]):not([type=radio]), .osb-booking.osb-density-compact .osb-field select, .osb-booking.osb-density-compact .osb-field textarea { padding: 7px 10px; min-height: 38px; }
.osb-booking.osb-density-compact .osb-field { margin-bottom: 10px; }

/* Visibility toggles */
.osb-booking.osb-hide-images .osb-card__img, .osb-booking.osb-hide-images .osb-event__img, .osb-booking.osb-hide-images img.osb-avatar { display: none; }
.osb-booking.osb-hide-descriptions .osb-card__desc { display: none; }
.osb-booking.osb-hide-durations .osb-card__duration { display: none; }
.osb-booking.osb-hide-prices .osb-card__price { display: none; }
.osb-booking.osb-hide-filter .osb-chips { display: none; }
.osb-booking.osb-hide-progress .osb-progress { display: none; }
.osb-booking.osb-hide-summary .osb-summary { display: none; }
.osb-booking.osb-hide-summary .osb-details-wrap { grid-template-columns: 1fr; }
.osb-booking.osb-hide-seats-left .osb-seats-left, .osb-booking.osb-hide-seats-left .osb-event__left { display: none; }
.osb-booking.osb-hide-seats-left .osb-event.is-full .osb-event__left { display: block; }