/* =============================================================================
   LG Booking Widget - Frontend Styles
   Uses CSS custom properties so the admin colour pickers take effect via
   inline <style> injected by JS from lgbConfig.
   ============================================================================= */

/* Injected at runtime by booking.js after theme colours are known */
:root {
	--lgb-primary:  #15215b;
	--lgb-accent2:   #ec93b0;
	--lgb-text:     #1a1a2e;
	--lgb-muted:    #6b7080;
	--lgb-border:   #d8dce8;
	--lgb-bg:       #ffffff;
	--lgb-bg-alt:   #f7f8fb;
	--lgb-radius:   0px;
	--lgb-shadow:   0 2px 12px rgba(0,0,0,.08);
}

/* ── Container ── */
.lgb-widget {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--lgb-text);
	max-width: 900px;
	margin: 0 auto;
	padding: 8px 0 40px;
}

/* ── Progress Bar ── */
.lgb-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 36px;
	flex-wrap: wrap;
	gap: 4px 0;
}

.lgb-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 70px;
}

.lgb-step__bubble {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--lgb-bg-alt);
	border: 2px solid var(--lgb-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	color: var(--lgb-muted);
	position: relative;
	transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            color 0.2s,
	            transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.lgb-step.is-done .lgb-step__bubble {
	transform: scale(1.08);
}

.lgb-step__check { display: none; }

.lgb-step__label {
	font-size: 12px;
	color: var(--lgb-muted);
	text-align: center;
	line-height: 1.3;
	max-width: 80px;
}

.lgb-step.is-active .lgb-step__bubble {
	background: var(--lgb-primary);
	border-color: var(--lgb-primary);
	color: #fff;
}
.lgb-step.is-active .lgb-step__label {
	color: var(--lgb-primary);
	font-weight: 600;
}

.lgb-step.is-done .lgb-step__bubble {
	background: #22c55e;
	border-color: #22c55e;
	color: #fff;
}
.lgb-step.is-done .lgb-step__num  { display: none; }
.lgb-step.is-done .lgb-step__check { display: block; font-size: 20px; }

.lgb-progress__line {
	flex: 1;
	height: 2px;
	background: var(--lgb-border);
	min-width: 24px;
	max-width: 120px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}
.lgb-progress__line::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #22c55e;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lgb-progress__line.is-done::after {
	transform: scaleX(1);
}

/* ── Alert ── */
.lgb-alert {
	border-radius: var(--lgb-radius);
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 14px;
	background: #fee2e2;
	color: #991b1b;
	border-left: 4px solid #ef4444;
}

/* ── Calendar-inline alert: spans both grid columns ── */
.lgb-cal-alert {
	grid-column: 1 / -1;
	margin: 16px 20px 0;
	margin-bottom: 0;
}

/* ── Panel ── */
@keyframes lgb-panel-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.lgb-panel {
	background: var(--lgb-bg);
	border: 1px solid var(--lgb-border);
	border-radius: var(--lgb-radius);
	padding: 32px 36px;
	box-shadow: var(--lgb-shadow);
	animation: lgb-panel-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
    z-index: 1;
}

.lgb-panel__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--lgb-text);
	text-align: center;
}

.lgb-panel__subtitle {
	color: var(--lgb-muted);
	margin: 0 0 28px;
	font-size: 15px;
	text-align: center;
	padding: 12px 20px;
	line-height: 1.6;
}

.lgb-section-heading {
	font-size: 15px;
	font-weight: 600;
	color: var(--lgb-text);
	margin: 0 0 16px;
}

/* ── Choice Cards (step 1) ── */
.lgb-choice-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 28px;
}

.lgb-choice-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	border: 2px solid var(--lgb-border);
	border-radius: var(--lgb-radius);
	padding: 20px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.lgb-choice-card:hover {
	border-color: var(--lgb-primary);
}

.lgb-choice-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.lgb-choice-card__radio {
	width: 22px;
	height: 22px;
	min-width: 22px;
	border-radius: 50%;
	border: 2px solid var(--lgb-border);
	margin-top: 2px;
	position: relative;
	transition: border-color .2s;
}

.lgb-choice-card input[type="radio"]:checked ~ .lgb-choice-card__radio {
	border-color: var(--lgb-primary);
	background: var(--lgb-primary);
}

.lgb-choice-card input[type="radio"]:checked ~ .lgb-choice-card__radio::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}

.lgb-choice-card input[type="radio"]:checked ~ .lgb-choice-card__content strong {
	color: var(--lgb-primary);
}

.lgb-choice-card.is-selected,
.lgb-choice-card:has(input:checked) {
	border-color: var(--lgb-primary);
	background: #f0f3fc;
}

.lgb-choice-card__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lgb-choice-card__content strong {
	font-size: 16px;
	font-weight: 600;
}

.lgb-choice-card__content span {
	font-size: 14px;
	color: var(--lgb-muted);
font-weight: 400;
}

/* ── Form Grid ── */
.lgb-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
	margin-bottom: 24px;
}

.lgb-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lgb-field--full {
	grid-column: 1 / -1;
}

.lgb-field label {
	font-size: 13px;
	font-weight: 500;
	color: var(--lgb-text);
}

.lgb-required {
	color: #ef4444;
	margin-left: 2px;
}

/* Required fields get a subtle left accent bar on the input */
.lgb-field:has(input[required]) input,
.lgb-field:has(select[required]) select,
.lgb-field:has(textarea[required]) textarea {
	border-left: 3px solid var(--lgb-primary);
	padding-left: 12px;
}
/* Remove accent once the field has a valid value */
.lgb-field--valid input,
.lgb-field--valid select,
.lgb-field--valid textarea {
	border-left-color: #22c55e !important;
}

.lgb-field input[type="text"],
.lgb-field input[type="email"],
.lgb-field input[type="tel"],
.lgb-field input[type="date"],
.lgb-field textarea,
.lgb-select-wrap select {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--lgb-border);
	font-size: 14px;
	color: var(--lgb-text);
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.lgb-field input:focus,
.lgb-field textarea:focus,
.lgb-select-wrap select:focus {
	outline: none;
	border-color: var(--lgb-primary);
	box-shadow: 0 0 0 3px rgba(26,60,143,.12);
}

.lgb-select-wrap {
	position: relative;
}

.lgb-select-wrap::after {
	content: '▾';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--lgb-muted);
	font-size: 12px;
}

.lgb-select-wrap select {
	padding-right: 36px;
	cursor: pointer;
}

/* ── Calendar ── */
.lgb-calendar-wrap {
	margin-top: 24px;
}

.lgb-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.lgb-calendar-nav__week {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.lgb-calendar-nav__week label {
	font-size: 14px;
	font-weight: 500;
}

.lgb-calendar-nav__hint {
	font-size: 13px;
	color: var(--lgb-muted);
}

.lgb-calendar-nav__arrows {
	display: flex;
	gap: 6px;
}

.lgb-cal-arrow {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--lgb-border);
	background: #fff !important;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lgb-text);
	transition: background .2s, border-color .2s;
}

.lgb-cal-arrow:hover {
	background: var(--lgb-bg-alt) !important;
	border-color: var(--lgb-primary);
}

.lgb-calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}

.lgb-cal-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lgb-cal-col__header {
	font-size: 13px;
	font-weight: 600;
	color: var(--lgb-text);
	text-align: center;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--lgb-border);
}

.lgb-slot {
	background: var(--lgb-accent2);
	color: #fff;
	border: none;
	border-radius: 7px;
	padding: 8px 6px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
	transition: transform .15s, box-shadow .15s, opacity .15s;
	width: 100%;
}

.lgb-slot:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.18);
	    background: #15215b;
}

.lgb-slot.is-selected {
	outline: 3px solid var(--lgb-primary);
	outline-offset: 2px;
}

.lgb-slot__time  { font-weight: 700; font-size: 14px; }
.lgb-slot__room  { font-size: 11px; opacity: .85; }
.lgb-slot__doc   { font-size: 11px; opacity: .85; }

.lgb-slot--empty {
	background: var(--lgb-bg-alt);
	color: var(--lgb-muted);
	border: 1.5px dashed var(--lgb-border);
	cursor: default;
	pointer-events: none;
	font-size: 20px;
}

/* ── Slot Summary ── */
.lgb-slot-summary {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	border: 2px solid var(--lgb-primary);
	border-radius: var(--lgb-radius);
	padding: 18px 20px;
	margin-bottom: 28px;
	background: #f0f3fc;
	font-size: 15px;
	line-height: 1.6;
}

.lgb-slot-summary__icon {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	background: var(--lgb-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-top: 1px;
}

.lgb-slot-summary__body {
	flex: 1;
}

.lgb-slot-summary__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--lgb-primary);
	margin-bottom: 4px;
}

.lgb-slot-summary__time {
	font-size: 17px;
	font-weight: 700;
	color: var(--lgb-text);
	margin-bottom: 4px;
}

.lgb-slot-summary__meta {
	font-size: 13px;
	color: var(--lgb-muted);
}

.lgb-slot-summary a {
	color: var(--lgb-primary);
	text-decoration: none;
	font-size: 13px;
	display: inline-block;
	margin-top: 6px;
}

.lgb-slot-summary a:hover {
	text-decoration: underline;
}

/* ── Search Results ── */
.lgb-search-results {
	margin: 8px 0 16px;
	border: 1px solid var(--lgb-border);

	overflow: hidden;
}

.lgb-patient-result {
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	font-size: 14px;
	border-bottom: 1px solid var(--lgb-border);
	transition: background .15s;
}

.lgb-patient-result:last-child { border-bottom: none; }

.lgb-patient-result:hover { background: var(--lgb-bg-alt); }

.lgb-patient-result__name { font-weight: 600; }
.lgb-patient-result__meta { color: var(--lgb-muted); font-size: 13px; }

/* ── Search notices (no match / multiple matches) ── */
.lgb-search-notice {
	padding: 14px 16px;
	border-radius: var(--lgb-radius);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 12px;
	background: var(--lgb-bg-alt);
	border: 1px solid var(--lgb-border);
}
.lgb-search-notice--error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}
.lgb-search-notice a {
	color: var(--lgb-primary);
	font-weight: 600;
	text-decoration: none;
}
.lgb-search-notice a:hover { text-decoration: underline; }

.lgb-search-actions {
	flex-wrap: wrap;
}
.lgb-search-actions .lgb-btn--next {
	min-width: 140px;
}

/* ── Buttons ── */
.lgb-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 24px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background .2s, transform .15s, box-shadow .2s;
}

.lgb-btn--next {
	background: var(--lgb-primary) !important;
	color: #fff !important;
}

.lgb-btn--next:hover {
	background: color-mix(in srgb, var(--lgb-primary) 85%, #000) !important;
	box-shadow: 0 4px 12px rgba(26,60,143,.3);
}

.lgb-btn--back {
	background: #fff !important;
	color: var(--lgb-text);
	border: 1.5px solid var(--lgb-border);
}

.lgb-btn--back:hover {
	background: var(--lgb-bg-alt) !important;
}

.lgb-btn--outline {
	background: #fff;
	color: var(--lgb-primary);
	border: 1.5px solid var(--lgb-primary);
}

.lgb-btn--outline:hover {
	background: var(--lgb-bg-alt);
}

.lgb-book-another {
	margin-top: 24px;
	width: 100%;
	justify-content: center;
}

/* ── Calendar empty state ── */
.lgb-empty-state {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px;
	text-align: center;
	color: var(--lgb-muted);
}
.lgb-empty-state__icon {
	width: 64px;
	height: 64px;
	color: var(--lgb-border);
	margin-bottom: 16px;
}
.lgb-empty-state__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--lgb-text);
	margin: 0 0 8px;
}
.lgb-empty-state__hint {
	font-size: 14px;
	margin: 0;
}

.lgb-actions {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	justify-content: center;
}

@keyframes lgb-loading-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.45; }
}

/* ── Loading / Spinner ── */
.lgb-loading {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--lgb-muted);
	font-size: 15px;
	padding: 24px 0;
	animation: lgb-loading-pulse 1.8s ease-in-out infinite;
}

.lgb-spinner {
	width: 22px;
	height: 22px;
	min-width: 22px;
	border: 3px solid var(--lgb-border);
	border-top-color: var(--lgb-primary);
	border-radius: 50%;
	animation: lgb-spin .7s linear infinite;
	/* Override the parent pulse on the spinner itself so it spins cleanly */
	animation: lgb-spin .7s linear infinite;
}

@keyframes lgb-spin {
	to { transform: rotate(360deg); }
}

/* ── Success ── */
@keyframes lgb-tick-circle {
	from { stroke-dashoffset: 151; }
	to   { stroke-dashoffset: 0; }
}
@keyframes lgb-tick-check {
	from { stroke-dashoffset: 36; }
	to   { stroke-dashoffset: 0; }
}

.lgb-confirmed {
	text-align: center;
	padding-top: 8px;
}

.lgb-success-icon {
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.lgb-tick-svg {
	width: 80px;
	height: 80px;
}

.lgb-tick-circle {
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: lgb-tick-circle 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.lgb-tick-check {
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
	animation: lgb-tick-check 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

/* ── Confirmation Card ── */
.lgb-confirm-details {
	margin: 24px auto;
	max-width: 480px;
	text-align: left;
}

.lgb-confirm-card {
	border: 1px solid var(--lgb-border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.lgb-confirm-card__rows {
	padding: 0;
}

.lgb-confirm-card__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--lgb-border);
	font-size: 14px;
}

.lgb-confirm-card__row:first-child {
	background: var(--lgb-bg-alt);
	padding: 16px 20px;
}

.lgb-confirm-card__row:last-child {
	border-bottom: none;
}

.lgb-confirm-card__label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--lgb-muted);
	font-weight: 500;
	white-space: nowrap;
	min-width: 130px;
	flex-shrink: 0;
}

.lgb-confirm-card__label svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--lgb-primary);
	opacity: 0.8;
}

.lgb-confirm-card__value {
	color: var(--lgb-text);
	font-weight: 600;
	flex: 1;
	text-align: right;
}

.lgb-confirm-card__row:first-child .lgb-confirm-card__value {
	font-size: 15px;
}

/* ── Add to calendar ── */
.lgb-atc {
	margin: 20px auto 4px;
	max-width: 520px;
	text-align: center;
}
.lgb-atc[hidden] { display: none; }
.lgb-atc__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--lgb-muted, #64748b);
	margin-bottom: 10px;
}
.lgb-atc__buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.lgb-atc__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--lgb-border, #e2e8f0);
	border-radius: 10px;
	background: #fff;
	color: var(--lgb-text, #1f2937);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.lgb-atc__btn:hover {
	border-color: #cbd5e1;
	box-shadow: 0 2px 10px rgba(15, 23, 42, .10);
}
.lgb-atc__btn:active { transform: translateY(1px); }
.lgb-atc__btn svg {
	width: 20px;
	height: 20px;
	flex: none;
	display: block;
}
@media (max-width: 480px) {
	.lgb-atc__btn { flex: 1 1 40%; justify-content: center; }
}

/* ── Confirmation Skeleton ── */
@keyframes lgb-shimmer {
	0%   { background-position: -600px 0; }
	100% { background-position:  600px 0; }
}

.lgb-confirm-loading {
	padding: 8px 0 16px;
}

.lgb-confirm-loading__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 20px 0 0;
	font-size: 14px;
	color: var(--lgb-muted);
}

.lgb-spinner--sm {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

.lgb-confirm-skeleton {
	max-width: 400px;
	margin: 0 auto;
}

.lgb-confirm-skeleton__circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin: 8px auto 20px;
	background: linear-gradient(90deg, #eee 25%, #e0e0e0 50%, #eee 75%);
	background-size: 600px 100%;
	animation: lgb-shimmer 1.4s infinite linear;
}

.lgb-confirm-skeleton__line {
	height: 18px;
	border-radius: 6px;
	margin: 0 auto 12px;
	background: linear-gradient(90deg, #eee 25%, #e0e0e0 50%, #eee 75%);
	background-size: 600px 100%;
	animation: lgb-shimmer 1.4s infinite linear;
}

.lgb-confirm-skeleton__line--title {
	width: 65%;
	height: 22px;
}

.lgb-confirm-skeleton__line--sub {
	width: 85%;
	height: 14px;
}

.lgb-confirm-skeleton__card {
	border: 1px solid var(--lgb-border);
	border-radius: 12px;
	overflow: hidden;
	margin-top: 24px;
}

.lgb-confirm-skeleton__bar {
	height: 46px;
	background: linear-gradient(90deg, #eee 25%, #e0e0e0 50%, #eee 75%);
	background-size: 600px 100%;
	animation: lgb-shimmer 1.4s infinite linear;
	border-bottom: 1px solid var(--lgb-border);
}

.lgb-confirm-skeleton__bar:last-child {
	border-bottom: none;
}

.lgb-confirm-skeleton__bar--header {
	height: 52px;
	background: linear-gradient(90deg, #c8d0e8 25%, #bdc6de 50%, #c8d0e8 75%);
	background-size: 600px 100%;
}

.lgb-confirm-skeleton__bar--short {
	height: 40px;
}

/* ── Card Save (step 5) ── */
.lgb-save-card {
	margin-top: 24px;
	border: 1.5px solid var(--lgb-primary, #15215b);
	border-radius: 10px;
	padding: 24px 20px;
	text-align: center;
}

.lgb-save-card__icon {
	color: var(--lgb-primary, #15215b);
	margin: 0 auto 12px;
	display: block;
}

.lgb-save-card__title {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--lgb-primary, #15215b);
}

.lgb-save-card__desc {
	font-size: 14px;
	color: #64748b;
	margin: 0 0 16px;
	line-height: 1.5;
}

.lgb-save-card__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.lgb-save-card__iframe-wrap {
	text-align: center;
}

.lgb-save-card__iframe-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	color: #64748b;
	margin: 0 0 12px;
}

.lgb-save-card__result {
	padding: 12px 0 4px;
}

.lgb-save-card__result svg {
	display: block;
	margin: 0 auto 10px;
}

.lgb-save-card__result--success p { color: var(--lgb-primary, #15215b); font-weight: 500; }
.lgb-save-card__result--fail   p { color: #64748b; }

/* ── Booking Error (step 5) ── */
.lgb-confirm-error {
	text-align: center;
	padding: 16px 0;
}

.lgb-confirm-error__icon {
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lgb-confirm-error__msg {
	max-width: 440px;
	margin: 0 auto;
	color: var(--lgb-muted);
	font-size: 15px;
	line-height: 1.6;
}

.lgb-confirm-error__msg p {
	margin: 0 0 10px;
}

.lgb-confirm-error__msg p:last-child {
	margin-bottom: 0;
}

/* ── WPCL Overlay loading spinner ── */
.lgb-payment-overlay__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 300px;
	color: var(--lgb-muted);
	font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
	.lgb-panel {
		padding: 20px 16px;
	}

	.lgb-choice-cards {
		grid-template-columns: 1fr;
	}

	.lgb-form-grid {
		grid-template-columns: 1fr;
	}

	.lgb-field--full {
		grid-column: 1;
	}

	.lgb-calendar {
		grid-template-columns: repeat(7, minmax(78px, 1fr));
	}

	.lgb-calendar-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Scrollbar hint on iOS */
		scroll-snap-type: x proximity;
	}

	/* Larger touch targets for week nav arrows on mobile */
	.lgb-cal-arrow {
		width: 48px;
		height: 48px;
		font-size: 26px;
	}

	.lgb-progress {
		flex-wrap: nowrap;
		gap: 0;
		margin-bottom: 28px;
	}

	.lgb-step {
		min-width: 0;
		flex-shrink: 1;
		gap: 6px;
	}

	.lgb-step__bubble { width: 32px; height: 32px; font-size: 13px; }

	.lgb-progress__line {
		flex: 1;
		min-width: 8px;
		max-width: none;
		margin-bottom: 0;
	}

	/* Hide step labels on small screens except the active one */
	.lgb-step__label { display: none; }
	.lgb-step.is-active .lgb-step__label { display: block; font-size: 11px; max-width: 64px; }

	.lgb-actions {
		flex-direction: column;
	}

	.lgb-btn { justify-content: center; }

	/* Slot summary stacks on small screens */
	.lgb-slot-summary {
		flex-direction: column;
		gap: 12px;
	}
}

/* ============================================================
   Widget description
   ============================================================ */
.lgb-widget-description {
	margin: 0 0 20px;
	color: var(--lgb-muted);
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
}

/* ============================================================
   Age Gate
   ============================================================ */
.lgb-form-grid--narrow {
	max-width: 320px;
	margin: auto;
}

/* ── Age notices (inline on the details-step DOB field since v2.27.0) ── */
.lgb-age-notice {
	border-radius: var(--lgb-radius);
	padding: 18px 20px;
	margin: 20px 0;
	font-size: 14px;
	line-height: 1.6;
}
.lgb-age-notice--blocked {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #fff5f5;
	border: 1.5px solid #fca5a5;
	border-left: 5px solid #dc2626;
	color: #7f1d1d;
	box-shadow: 0 2px 8px rgba(220,38,38,.08);
}
.lgb-age-notice--blocked .lgb-age-notice__icon {
	flex-shrink: 0;
	color: #dc2626;
	margin-top: 2px;
}
.lgb-age-notice--blocked .lgb-age-notice__body strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 6px;
	color: #991b1b;
}
.lgb-age-notice--blocked .lgb-age-notice__body p {
	margin: 0;
	font-size: 14px;
	color: #7f1d1d;
}
.lgb-age-notice--minor {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
}
.lgb-age-notice strong {
	display: block;
	margin-bottom: 6px;
}
#lgb-age-notices .lgb-age-notice {
	margin: 4px 0 0;
}

/* ============================================================
   Insurance section
   ============================================================ */
#lgb-insurance-section {
	border: 1px solid var(--lgb-border);
	border-radius: var(--lgb-radius);
	padding: 20px;
	margin-bottom: 24px;
	background: var(--lgb-bg-alt);
}

.lgb-radio-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.lgb-radio-option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	padding: 10px 16px;
	border: 2px solid var(--lgb-border);
	border-radius: var(--lgb-radius);
	transition: border-color 0.15s, background 0.15s;
}
.lgb-radio-option:has(input:checked) {
	border-color: var(--lgb-primary);
	background: color-mix(in srgb, var(--lgb-primary) 6%, white);
}

#lgb-insurer-fields {
	margin-top: 16px;
	border-top: 1px solid var(--lgb-border);
	padding-top: 16px;
}

.lgb-field-hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--lgb-muted);
}
.lgb-field-hint--warning {
	color: #b45309;
	font-weight: 500;
}
.lgb-field-hint--warning::before {
	content: '⚠ ';
}

/* ── Inline field validation states ── */
.lgb-field--error input,
.lgb-field--error textarea,
.lgb-field--error select {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.lgb-field--valid input,
.lgb-field--valid textarea,
.lgb-field--valid select {
	border-color: #22c55e !important;
}
.lgb-field-error {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #dc2626;
	font-weight: 500;
}
.lgb-field-error::before {
	content: '✕ ';
}

/* ============================================================
   Consent / preferences section
   ============================================================ */
#lgb-consents-section {
	border: 1px solid var(--lgb-border);
	border-radius: var(--lgb-radius);
	padding: 20px;
	margin-top: 8px;
	background: var(--lgb-bg-alt);
}

.lgb-consents-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lgb-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
	color: var(--lgb-text);
}
.lgb-checkbox-label input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--lgb-primary);
	cursor: pointer;
}

/* ============================================================
   Locked field indicator
   ============================================================ */
.lgb-label--locked::after {
	content: ' 🔒';
	font-size: 12px;
	opacity: 0.7;
}
select:disabled,
input:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	background: #f0f0f0;
}

@media (max-width: 600px) {
	.lgb-radio-row { flex-direction: column; gap: 10px; }
	#lgb-insurance-section { padding: 14px; }
	#lgb-consents-section   { padding: 14px; }
}

/* ── Step 4 Payment Notice ── */
.lgb-payment-notice {
	background: linear-gradient(135deg, #f0f4ff 0%, #f7f0fc 100%);
	border: 1px solid var(--lgb-border);
	border-left: 4px solid var(--lgb-primary);
	border-radius: var(--lgb-radius);
	padding: 22px 26px;
	margin: 20px 0 28px;
}

/* Top row: card icon + the amount due */
.lgb-payment-notice__top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid color-mix(in srgb, var(--lgb-primary) 14%, transparent);
}

.lgb-payment-notice__icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	background: var(--lgb-primary);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 11px;
}

.lgb-payment-notice__icon svg {
	width: 100%;
	height: 100%;
}

.lgb-payment-notice__amountwrap {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.lgb-payment-notice__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--lgb-muted);
	margin-bottom: 2px;
}

.lgb-payment-notice__amount {
	font-size: 28px;
	font-weight: 700;
	color: var(--lgb-primary);
	letter-spacing: -0.5px;
}

.lgb-payment-notice__headline {
	font-size: 15px;
	font-weight: 600;
	color: var(--lgb-text);
	margin: 0 0 14px;
	line-height: 1.45;
}

/* Security reassurance - set off in its own subtle inset row */
.lgb-payment-notice__secure {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 10px;
	padding: 10px 13px;
}

.lgb-payment-notice__lock {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: var(--lgb-primary);
}

.lgb-payment-notice__sub {
	font-size: 13px;
	color: var(--lgb-muted);
	margin: 0;
	line-height: 1.5;
}

/* ── Worldpay WPCL overlay ── */
#lgb-worldpay-wrap {
	margin-top: 8px;
}

.lgb-body-no-scroll {
	overflow: hidden;
}

.lgb-payment-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.6);
}

.lgb-payment-overlay__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #1a1a2e;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 16px;
	flex-shrink: 0;
}

.lgb-payment-overlay__bar svg {
	color: #4ade80;
	flex-shrink: 0;
}

.lgb-payment-overlay__bar span {
	flex: 1;
}

.lgb-payment-overlay__close {
	background: none;
	border: none;
	color: #9ca3af;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.lgb-payment-overlay__close:hover {
	color: #fff;
}

.lgb-payment-overlay__body {
	flex: 1;
	overflow-y: auto;
	background: #fff;
}

.lgb-payment-overlay__container {
	width: 100%;
	min-height: 100%;
}

.lgb-payment-overlay__container iframe {
	display: block;
	width: 100%;
	min-height: 600px;
	border: none;
}

.lgb-payment-error {
	background: #fff5f5;
	border: 1px solid #fecaca;
	border-radius: var(--lgb-radius);
	padding: 20px 24px;
	text-align: center;
	color: #991b1b;
}

.lgb-payment-error p {
	margin: 0 0 16px;
	font-size: 15px;
}

@media (max-width: 600px) {
	.lgb-payment-notice {
		padding: 16px 18px;
	}
	.lgb-payment-notice__icon {
		width: 40px;
		height: 40px;
		padding: 9px;
	}
	.lgb-payment-notice__amount {
		font-size: 24px;
	}
}

/* ============================================================
   Step 2 - Redesigned Book Appointment
   ============================================================ */

.lgb-step2-subtitle {
	color: var(--lgb-muted);
	font-size: 15px;
	text-align: center;
	margin: 0 0 24px;
}

/* ── Filter Row ── */
.lgb-filters-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

/* Appointment-type names can be long - give that card its own row so it has
   space, capped at 548px on desktop; Location + Practitioner share the next
   row. On mobile the parent grid collapses to a single column (see media
   query below) and these rules still produce a full-width-up-to-548 card. */
#lgb-appt-type-wrap {
	grid-column: 1 / -1;
	width: 100%;
	justify-self: start;
}

/* Video-consultation mode - JS adds .is-video-flow to .lgb-filters-row when
   the selected appointment type is a video consult. The location card is
   irrelevant in that case (patient dials in from home), so it's removed from
   the flow and the practitioner card stretches to span both columns. Keeps
   the layout visually balanced instead of leaving the practitioner stuck at
   50% width next to an empty grid cell. */
.lgb-filters-row.is-video-flow #lgb-location-wrap {
	display: none;
}
.lgb-filters-row.is-video-flow #lgb-doctor-wrap {
	grid-column: 1 / -1;
	width: 100%;
	justify-self: start;
}

.lgb-filter-card {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1.5px solid var(--lgb-border);
	border-radius: 10px;
	padding: 14px 16px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
	position: relative;
	min-width: 0;
}

.lgb-filter-card:hover {
	border-color: color-mix(in srgb, var(--lgb-primary) 45%, var(--lgb-border));
}

.lgb-filter-card:focus-within {
	border-color: var(--lgb-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lgb-primary) 12%, transparent);
}

.lgb-filter-card:has(select:disabled) {
	opacity: 0.55;
	background: var(--lgb-bg-alt);
	pointer-events: none;
}

.lgb-filter-card__icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--lgb-primary) 8%, white);
	color: var(--lgb-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lgb-filter-card__body {
	flex: 1;
	min-width: 0;
}

.lgb-filter-card__body label {
	display: block;
	font-size: 11px;
	color: var(--lgb-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 3px;
	pointer-events: none;
}

.lgb-filter-card__body .lgb-select-wrap {
	position: relative;
}

.lgb-filter-card__body .lgb-select-wrap select {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	padding: 0;
	padding-right: 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lgb-text);
	background: transparent;
	width: 100%;
	box-shadow: none;
	cursor: pointer;
	outline: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lgb-filter-card__body .lgb-select-wrap select option {
	font-weight: 400;
}

.lgb-filter-card__body .lgb-select-wrap::after {
	content: '';
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%236b7080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}

/* ── Calendar + Slots two-column wrapper ── */
.lgb-cal-slots-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1.5px solid var(--lgb-border);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
}

/* ── Shared section heading (icon + label) ── */
.lgb-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--lgb-text);
	margin-bottom: 16px;
}

.lgb-section-title svg {
	color: var(--lgb-primary);
	flex-shrink: 0;
}

/* ── Monthly Calendar (left panel) ── */
.lgb-month-cal {
	padding: 20px;
	border-right: 1.5px solid var(--lgb-border);
}

.lgb-month-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.lgb-month-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--lgb-text);
}

.lgb-month-days-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 4px;
}

.lgb-month-days-header span {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--lgb-muted);
	padding: 6px 0;
}

.lgb-month-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.lgb-month-day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: auto;
	border-radius: 0px;
	font-size: 13px;
	font-weight: 500;
	cursor: default;
	color: var(--lgb-muted);
	border: none;
	background: transparent;
	transition: background 0.15s, color 0.15s;
	line-height: 1;
}

.lgb-month-day--other-month {
	opacity: 0.3;
}

.lgb-month-day--past {
	opacity: 0.3;
}

.lgb-month-day--unavailable {
	color: var(--lgb-muted);
	opacity: 0.4;
}

.lgb-month-day--available {
    cursor: pointer;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    color: #15215b;
}

.lgb-month-day--available:hover {
	background: color-mix(in srgb, var(--lgb-primary) 10%, white);
	color: var(--lgb-primary);
}

.lgb-month-day--today:not(.lgb-month-day--selected) {
color: #ec93b0;
border-color: transparent;
}

.lgb-month-day--selected {
color: var(--lgb-primary) !important;
    font-weight: 700;
    border: 1px solid var(--lgb-primary);
    background: color-mix(in srgb, var(--lgb-primary) 10%, white);
}

/* ── Legend ── */
.lgb-month-cap-note {
	margin: 14px 0 0;
	padding: 10px 14px;
	background: var(--lgb-bg-alt, #f7f8fb);
	border: 1px solid var(--lgb-border);
	border-radius: var(--lgb-radius, 8px);
	font-size: 13px;
	line-height: 1.5;
	color: var(--lgb-muted, #64748b);
	text-align: center;
}

.lgb-cal-legend {
	display: flex;
	gap: 20px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--lgb-border);
}

.lgb-cal-legend__item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--lgb-muted);
}

.lgb-cal-legend__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.lgb-cal-legend__dot--avail   { background: var(--lgb-primary); }
.lgb-cal-legend__dot--unavail { background: var(--lgb-border); }

/* ── Time Slots Panel (right) ── */
.lgb-time-slots-panel {
	padding: 20px;
	overflow-y: auto;
	max-height: 560px;
}

/* Greyed-out state when no availability is found */
.lgb-time-slots-panel--no-avail {
	opacity: 0.4;
	pointer-events: none;
	user-select: none;
}

.lgb-selected-date-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--lgb-text);
	margin-bottom: 14px;
	min-height: 20px;
}

/* ── Slots grid (3 columns) ── */
.lgb-slots-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lgb-slots-group-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--lgb-muted);
	margin: 0;
}

.lgb-slots-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.lgb-time-slot-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 6px;
	border: 1.5px solid var(--lgb-border);
	border-radius: 6px;
	background: #fff !important;
	font-size: 13px;
	font-weight: 600;
	color: var(--lgb-primary);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lgb-time-slot-btn:hover {
	border-color: var(--lgb-primary);
	background: color-mix(in srgb, var(--lgb-primary) 6%, white);
}

.lgb-time-slot-btn--selected {
	background: var(--lgb-primary) !important;
	border-color: var(--lgb-primary) !important;
	color: #fff !important;
}

.lgb-slots-empty {
	text-align: center;
	color: var(--lgb-muted);
	font-size: 14px;
	padding: 20px 0;
	margin: 0;
}

/* ── Your Appointment summary ── */
.lgb-appt-summary {
	border: 1.5px solid var(--lgb-border);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 8px;
}

.lgb-appt-summary__header {
	display: flex;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid var(--lgb-border);
}

.lgb-appt-summary__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--lgb-text);
}

.lgb-appt-summary__heading svg {
	color: var(--lgb-primary);
}

.lgb-clear-selection {
	background: none;
	border: none;
	color: var(--lgb-primary);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
}

.lgb-clear-selection:hover {
	text-decoration: underline;
}

.lgb-appt-summary__body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 16px 20px;
	gap: 14px 16px;
}

/* Duration shown as a muted suffix after the time, e.g. "2:45pm · 15 min" */
.lgb-dur-suffix {
	color: var(--lgb-muted);
	font-weight: 500;
}

.lgb-appt-summary__col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lgb-appt-summary__label {
	font-size: 11px;
	color: var(--lgb-muted);
	font-weight: 500;
}

.lgb-appt-summary__value {
	font-size: 14px;
	font-weight: 600;
	color: var(--lgb-text);
}

.lgb-appt-summary__value--time {
	color: var(--lgb-primary);
}

.lgb-appt-summary__value--price {
	color: var(--lgb-primary);
}

/* ── Custom Select Dropdown ── */
.lgb-custom-select {
	display: block;
	position: static;
}

.lgb-custom-select__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lgb-text);
	cursor: pointer;
	padding-right: 22px;
	position: relative;
	user-select: none;
	line-height: 1.4;
	outline: none;
}

.lgb-custom-select__trigger-label {
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lgb-custom-select__trigger::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%236b7080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s ease;
	pointer-events: none;
}

.lgb-custom-select.is-open .lgb-custom-select__trigger::after {
	transform: translateY(-50%) rotate(180deg);
}

.lgb-custom-select__dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	min-width: 180px;
	background: #fff;
	border: 1.5px solid var(--lgb-border);
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
	z-index: 1050;
	overflow: hidden;
	max-height: 260px;
	overflow-y: auto;
}

.lgb-custom-select.is-open .lgb-custom-select__dropdown {
	display: block;
	animation: lgb-dropdown-in 0.15s ease;
}

@keyframes lgb-dropdown-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.lgb-custom-select__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	font-size: 14px;
	cursor: pointer;
	color: var(--lgb-text);
	transition: background 0.1s;
}

.lgb-custom-select__label {
	flex: 0 1 auto;
	min-width: 0;
	/* Allow the full appointment name to WRAP instead of truncating with an
	   ellipsis - long names were getting cut on narrow (mobile) screens. The
	   option row has no fixed height, so it just grows to fit. overflow-wrap
	   handles the rare very-long unbroken word. */
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Price badge next to an appointment type in the dropdown */
.lgb-price-badge {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 999px;
	color: var(--lgb-primary);
	background: color-mix(in srgb, var(--lgb-primary) 10%, white);
	border: 1px solid color-mix(in srgb, var(--lgb-primary) 22%, white);
	white-space: nowrap;
}

/* ── Video / Phone consultation badge ── */
.lgb-appt-mode {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 9px 4px 7px;
	border-radius: 999px;
	white-space: nowrap;
	vertical-align: middle;
}
.lgb-appt-mode svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}
.lgb-appt-mode--video {
	color: #15215b;
	background: #ec93b096;
	border: 1px solid #ec93b080;
}
.lgb-appt-mode--phone {
	color: #1d4ed8;
	background: #dbeafe;
	border: 1px solid #bfdbfe;
}

.lgb-custom-select__option:hover {
	background: color-mix(in srgb, var(--lgb-primary) 8%, white);
	color: var(--lgb-primary);
}

.lgb-custom-select__option.is-selected {
	color: var(--lgb-primary);
	font-weight: 600;
	background: color-mix(in srgb, var(--lgb-primary) 5%, white);
}

.lgb-custom-select__option--placeholder {
	color: var(--lgb-muted);
	font-weight: 400;
}

.lgb-custom-select--disabled .lgb-custom-select__trigger {
	opacity: 0.6;
	cursor: default;
}

/* ── Step 2 responsive ── */
@media (max-width: 700px) {
	.lgb-filters-row {
		grid-template-columns: 1fr;
	}

	.lgb-cal-slots-wrap {
		grid-template-columns: 1fr;
	}

	.lgb-month-cal {
		border-right: none;
		border-bottom: 1.5px solid var(--lgb-border);
	}

	.lgb-time-slots-panel {
		max-height: none;
	}

	.lgb-appt-summary__body {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 460px) {
	.lgb-month-day {
		width: 30px;
		height: 30px;
		font-size: 12px;
	}

	.lgb-appt-summary__body {
		grid-template-columns: 1fr 1fr;
	}
}