/**
 * BookSnap Frontend — Premium Calendar
 * All rules scoped under .booksnap-wrap
 * @package BookSnap @since 1.0.0
 */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
.booksnap-wrap {
	--bs-accent:     #4F46E5;
	--bs-accent-h:   #4338CA;
	--bs-accent-l:   #EEF2FF;
	--bs-accent-m:   #C7D2FE;
	--bs-bg:         #FFFFFF;
	--bs-bg2:        #F8F9FC;
	--bs-border:     #E5E7EB;
	--bs-border2:    #D1D5DB;
	--bs-text1:      #111827;
	--bs-text2:      #374151;
	--bs-text3:      #6B7280;
	--bs-text4:      #9CA3AF;
	--bs-green:      #059669;
	--bs-green-bg:   #ECFDF5;
	--bs-amber:      #D97706;
	--bs-amber-bg:   #FFFBEB;
	--bs-red:        #DC2626;
	--bs-red-bg:     #FEF2F2;
	--bs-radius:     16px;
	--bs-radius-sm:  10px;
	--bs-shadow:     0 4px 28px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
	--bs-shadow-lg:  0 24px 64px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.07);
	--bs-font:       -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	--bs-mono:       "SF Mono", "Fira Code", ui-monospace, monospace;
	--bs-ease:       cubic-bezier(.4,0,.2,1);

	font-family: var(--bs-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--bs-text1);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	max-width: 860px;
	margin: 0 auto;
}

.booksnap-wrap *, .booksnap-wrap *::before, .booksnap-wrap *::after {
	box-sizing: inherit;
}

/* ── Loading spinner ──────────────────────────────────────────────────────── */
.bs-cal-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

@keyframes bsSpin { to { transform: rotate(360deg); } }

.bs-cal-spinner,
.bs-spin {
	width: 36px; height: 36px;
	border: 3px solid var(--bs-accent-m);
	border-top-color: var(--bs-accent);
	border-radius: 50%;
	animation: bsSpin .75s linear infinite;
	display: inline-block;
	flex-shrink: 0;
}

.bs-spin-sm {
	width: 14px; height: 14px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bsSpin .6s linear infinite;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
}

/* ── Widget shell ─────────────────────────────────────────────────────────── */
.bs-widget {
	background: var(--bs-bg);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow);
	border: 1px solid var(--bs-border);
	overflow: hidden;
}

/* Gradient header */
.bs-widget-header {
	background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-h) 100%);
	padding: 20px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bs-widget-title {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.025em;
}

.bs-widget-subtitle {
	font-size: 12.5px;
	color: rgba(255,255,255,.72);
	margin-top: 2px;
}

.bs-tz-badge {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	color: rgba(255,255,255,.8);
	background: rgba(255,255,255,.18);
	padding: 5px 11px;
	border-radius: 20px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Two-column body ─────────────────────────────────────────────────────── */
.bs-widget-body {
	display: grid;
	grid-template-columns: 1fr 260px;
	min-width: 0;
	/* align-items: start — each column only grows to its content height.
	   Height equality is enforced by giving both panels the same fixed height. */
	align-items: start;
}

/* Each grid child needs min-width: 0 to respect column width */
.bs-cal-panel,
.bs-slots-panel {
	min-width: 0;
}

@media (max-width: 640px) {
	.bs-widget-body { grid-template-columns: 1fr; }
}

/* ── Calendar panel ──────────────────────────────────────────────────────── */
.bs-cal-panel {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	/* Same fixed height as slots panel — keeps both columns equal */
	height: 520px;
}

/* Month navigator */
.bs-month-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.bs-month-label {
	font-size: 16px;
	font-weight: 700;
	color: var(--bs-text1);
	letter-spacing: -.02em;
}

.bs-nav-btn {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1.5px solid var(--bs-border);
	background: var(--bs-bg);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bs-text2);
	transition: all .15s var(--bs-ease);
	padding: 0;
	flex-shrink: 0;
}

.bs-nav-btn:hover {
	background: var(--bs-accent-l);
	border-color: var(--bs-accent-m);
	color: var(--bs-accent);
	transform: scale(1.08);
}

.bs-nav-btn svg { display: block; }

/* Day-of-week headers */
.bs-dow-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 8px;
}

.bs-dow {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--bs-text4);
	padding: 4px 2px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ── Calendar grid ────────────────────────────────────────────────────────── */
.bs-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	transition: opacity .2s;
}

.bs-grid--loading { opacity: .45; pointer-events: none; }

/* Date cell */
.bs-day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: var(--bs-radius-sm);
	cursor: default;
	/* ── THE BOX STYLE — gives each date a clear visual boundary ── */
	border: 1.5px solid var(--bs-border);
	background: var(--bs-bg2);
	transition: all .15s var(--bs-ease);
	user-select: none;
	gap: 3px;
}

.bs-day-num {
	font-size: 13px;
	font-weight: 500;
	color: var(--bs-text2);
	line-height: 1;
}

/* Available days — clickable, accent border on hover */
.bs-day--available,
.bs-day--few {
	cursor: pointer;
	background: var(--bs-bg);
}

.bs-day--available:hover {
	background: var(--bs-accent-l);
	border-color: var(--bs-accent);
}

.bs-day--available:hover .bs-day-num { color: var(--bs-accent); }

.bs-day--few:hover {
	background: var(--bs-amber-bg);
	border-color: var(--bs-amber);
}

/* Today highlight */
.bs-day--today { border-color: var(--bs-accent-m); background: var(--bs-accent-l); }
.bs-day--today .bs-day-num { color: var(--bs-accent); font-weight: 700; }

/* Selected state */
.bs-day--selected {
	background: var(--bs-accent) !important;
	border-color: var(--bs-accent-h) !important;
	box-shadow: 0 4px 14px rgba(79,70,229,.35);
}
.bs-day--selected .bs-day-num { color: #fff !important; font-weight: 700; }
.bs-day--selected .bs-day-dot { background: rgba(255,255,255,.7) !important; }

/* Past and unavailable */
.bs-day--past, .bs-day--none {
	opacity: .38;
	background: var(--bs-bg2);
}

/* Empty cells */
.bs-day--empty {
	border: none;
	background: transparent;
	cursor: default;
}

/* Availability dot */
.bs-day-dot {
	width: 5px; height: 5px;
	border-radius: 50%;
	flex-shrink: 0;
}

.bs-day-dot--available { background: var(--bs-accent); }
.bs-day-dot--few       { background: var(--bs-amber);  }
.bs-day-dot--full      { background: var(--bs-red);    }

/* Full days — keep the dot but dim */
.bs-day--full { opacity: .55; cursor: default; }

/* ── Legend ───────────────────────────────────────────────────────────────── */
.bs-legend {
	display: flex;
	gap: 16px;
	/* auto top-margin pushes legend to the very bottom of the panel
	   so it aligns with the bottom of the slots list on the right */
	margin-top: auto;
	padding-top: 14px;
	flex-wrap: wrap;
}

.bs-legend span {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	color: var(--bs-text3);
}

.bs-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.bs-dot--av   { background: var(--bs-accent); }
.bs-dot--few  { background: var(--bs-amber);  }
.bs-dot--full { background: var(--bs-red);    }

/* ── Slots panel ──────────────────────────────────────────────────────────── */
.bs-slots-panel {
	border-left: 1px solid var(--bs-border);
	background: var(--bs-bg2);
	padding: 20px 16px 16px;
	display: flex;
	flex-direction: column;
	height: 520px;
	overflow: hidden; /* panel itself never scrolls */
	min-width: 0;
}

/* Fixed header inside panel — never scrolls */
.bs-slots-header,
.bs-slots-date,
.bs-slots-placeholder,
.bs-slots-spinner {
	flex-shrink: 0;
}

/* Scrolling slot list — fills remaining height after header */
.bs-slots-scroll {
	flex: 1;
	overflow-y: scroll;   /* always show track — no layout shift */
	overflow-x: hidden;
	min-width: 0;
	margin-right: -16px; /* pull scrollbar to panel edge */
	padding-right: 16px; /* restore content padding */
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
}

.bs-slots-scroll::-webkit-scrollbar { width: 4px; }
.bs-slots-scroll::-webkit-scrollbar-track { background: transparent; }
.bs-slots-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.bs-slots-scroll::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Slot list inside the scroll container */
.bs-slots-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
	width: 100%;
}

@media (max-width: 640px) {
	.bs-slots-panel {
		border-left: none;
		border-top: 1px solid var(--bs-border);
		height: auto;
		max-height: 320px;
		overflow-y: auto;
	}
	.bs-cal-panel {
		height: auto;
	}
}

.bs-slots-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	text-align: center;
	padding: 24px 12px;
	color: var(--bs-text4);
	gap: 10px;
}

.bs-slots-placeholder p {
	font-size: 13px;
	margin: 0;
	color: var(--bs-text3);
}

.bs-slots-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 200px;
}

.bs-slots-header {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--bs-text4);
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 6px;
}

.bs-slots-date {
	font-size: 14px;
	font-weight: 700;
	color: var(--bs-text1);
	margin-bottom: 12px;
	letter-spacing: -.01em;
}

/* ── Individual slot button ───────────────────────────────────────────────── */
.bs-slot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 10px;
	background: var(--bs-bg);
	border: 1.5px solid var(--bs-border);
	border-radius: var(--bs-radius-sm);
	cursor: pointer;
	font-family: var(--bs-font);
	font-size: 12.5px;
	text-align: left;
	width: 100%;
	max-width: 100%;  /* never wider than panel */
	box-sizing: border-box;
	transition: all .15s var(--bs-ease);
	overflow: hidden; /* clip any overflow */
}

.bs-slot:hover:not([disabled]) {
	border-color: var(--bs-accent);
	background: var(--bs-accent-l);
	transform: translateX(2px);
}

.bs-slot--full { opacity: .45; cursor: not-allowed; }

.bs-slot-time {
	font-weight: 600;
	font-size: 12.5px;
	color: var(--bs-text1);
	white-space: nowrap;
	flex: 1;           /* fill available space */
	min-width: 0;      /* allow shrinking */
	overflow: hidden;
	text-overflow: ellipsis;
}

.bs-slot-right {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
}

.bs-slot:hover:not([disabled]) .bs-slot-time { color: var(--bs-accent); }

/* Availability badges */
.bs-sbadge {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 20px;
	white-space: nowrap;
}

.bs-sbadge--open { background: var(--bs-green-bg); color: var(--bs-green); }
.bs-sbadge--few  { background: var(--bs-amber-bg); color: var(--bs-amber); }
.bs-sbadge--full { background: #f3f4f6;            color: var(--bs-text3); }

/* ── Modal overlay ────────────────────────────────────────────────────────── */
.bs-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	animation: bsFadeIn .18s var(--bs-ease);
	/* Fallback variables in case this element is outside .booksnap-wrap */
	--bs-accent:    #4F46E5;
	--bs-accent-h:  #4338CA;
	--bs-accent-l:  #EEF2FF;
	--bs-accent-m:  #C7D2FE;
	--bs-bg:        #FFFFFF;
	--bs-bg2:       #F8F9FC;
	--bs-border:    #E5E7EB;
	--bs-border2:   #D1D5DB;
	--bs-text1:     #111827;
	--bs-text2:     #374151;
	--bs-text3:     #6B7280;
	--bs-text4:     #9CA3AF;
	--bs-green:     #059669;
	--bs-green-bg:  #ECFDF5;
	--bs-amber:     #D97706;
	--bs-amber-bg:  #FFFBEB;
	--bs-red:       #DC2626;
	--bs-red-bg:    #FEF2F2;
	--bs-radius:    16px;
	--bs-radius-sm: 10px;
	--bs-shadow-lg: 0 24px 64px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.07);
	--bs-ease:      cubic-bezier(.4,0,.2,1);
	--bs-font:      -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	--bs-mono:      "SF Mono", "Fira Code", ui-monospace, monospace;
}

@keyframes bsFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bsSlideUp { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* ── Modal card — always white, never transparent */
.bs-modal {
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: var(--bs-shadow-lg);
	width: 100%;
	max-width: 460px;
	max-height: 92vh;
	/* overflow: hidden on outer keeps the border-radius corners intact.
	   The inner body scrolls independently — no square corners from scrollbar */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bs-border);
	animation: bsSlideUp .22s var(--bs-ease);
	isolation: isolate;
	position: relative;
}

/* Gradient header inside modal — fixed, never scrolls */
.bs-modal-head {
	background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-h) 100%);
	padding: 22px 22px 18px;
	position: relative;
	border-radius: 20px 20px 0 0;
	flex-shrink: 0;
}

.bs-modal-pretitle {
	font-size: 11px;
	color: rgba(255,255,255,.65);
	text-transform: uppercase;
	letter-spacing: .09em;
	margin-bottom: 5px;
}

.bs-modal-title {
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.025em;
	margin-bottom: 12px;
}

.bs-modal-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.bs-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: rgba(255,255,255,.88);
	background: rgba(255,255,255,.18);
	padding: 4px 10px;
	border-radius: 20px;
}

/* Close button — perfectly circular, always visible */
.bs-modal-x {
	position: absolute;
	top: 14px; right: 14px;
	width: 30px; height: 30px;
	border-radius: 50% !important;
	border: 2px solid rgba(255,255,255,.6);
	background: rgba(0,0,0,.25);
	color: #ffffff !important;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
	line-height: 1;
	font-family: var(--bs-font);
	padding: 0;
	flex-shrink: 0;
}

.bs-modal-x:hover {
	background: rgba(0,0,0,.45);
	border-color: rgba(255,255,255,.9);
	color: #ffffff !important;
}

/* Scrollable form body — flex-grow so it fills remaining space */
.bs-modal-body {
	background: #FFFFFF;
	padding: 22px 22px 4px;
	overflow-y: auto;
	flex: 1;
	/* Custom thin scrollbar */
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
}

.bs-modal-body::-webkit-scrollbar { width: 4px; }
.bs-modal-body::-webkit-scrollbar-track { background: transparent; }
.bs-modal-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.bs-modal-body::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Form fields inside modal ─────────────────────────────────────────────── */

.bs-err {
	background: var(--bs-red-bg);
	border: 1px solid #fecaca;
	color: var(--bs-red);
	font-size: 13px;
	padding: 10px 13px;
	border-radius: 8px;
	margin-bottom: 16px;
}

.bs-field { margin-bottom: 14px; }

.bs-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 440px) { .bs-field-row { grid-template-columns: 1fr; } }

.bs-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bs-text2);
	margin-bottom: 5px;
}

.bs-req { color: var(--bs-red); margin-left: 2px; }
.bs-optional { color: var(--bs-text4); font-weight: 400; }

.bs-input, .bs-textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--bs-border2);
	border-radius: 8px;
	font-size: 14px;
	font-family: var(--bs-font);
	color: var(--bs-text1);
	background: #fff;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}

.bs-input:focus, .bs-textarea:focus {
	border-color: var(--bs-accent);
	box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}

.bs-input::placeholder, .bs-textarea::placeholder { color: var(--bs-text4); }
.bs-textarea { resize: vertical; min-height: 72px; }

.bs-field--err .bs-input,
.bs-field--err .bs-textarea { border-color: var(--bs-red); box-shadow: 0 0 0 3px rgba(220,38,38,.08); }

.bs-ferr { display: block; font-size: 11.5px; color: var(--bs-red); margin-top: 3px; }

.bs-hp { display: none !important; }

/* Fixed footer — never scrolls */
.bs-modal-foot {
	background: #FFFFFF;
	padding: 16px 22px 22px;
	border-top: 1px solid var(--bs-border);
	flex-shrink: 0;
	border-radius: 0 0 20px 20px;
}

.bs-submit {
	width: 100%;
	padding: 13px 20px;
	background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-h) 100%);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	font-family: var(--bs-font);
	cursor: pointer;
	transition: all .18s var(--bs-ease);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow: 0 4px 14px rgba(79,70,229,.28);
	letter-spacing: -.01em;
	margin-bottom: 10px;
}

.bs-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79,70,229,.38); }
.bs-submit:active { transform: none; }
.bs-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

.bs-secure {
	text-align: center;
	font-size: 11.5px;
	color: var(--bs-text4);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

/* ── Confirmation screen ──────────────────────────────────────────────────── */
.bs-confirm {
	background: #FFFFFF;
	padding: 36px 28px 28px;
	text-align: center;
	border-radius: 20px;
}

@keyframes bsPop {
	0%   { transform: scale(.5); opacity: 0; }
	70%  { transform: scale(1.12); }
	100% { transform: scale(1); opacity: 1; }
}

.bs-confirm-icon {
	width: 64px; height: 64px;
	background: var(--bs-green-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	animation: bsPop .4s var(--bs-ease);
}

.bs-confirm-title {
	font-size: 21px;
	font-weight: 700;
	color: var(--bs-text1);
	letter-spacing: -.025em;
	margin-bottom: 6px;
}

.bs-confirm-desc {
	font-size: 14px;
	color: var(--bs-text3);
	margin-bottom: 18px;
}

.bs-confirm-ref {
	display: inline-block;
	font-family: var(--bs-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--bs-accent);
	background: var(--bs-accent-l);
	padding: 7px 16px;
	border-radius: 8px;
	margin-bottom: 8px;
}

.bs-confirm-detail {
	font-size: 13px;
	color: var(--bs-text2);
	margin-bottom: 20px;
}

.bs-cal-links {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.bs-cal-lnk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1.5px solid var(--bs-border);
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bs-text2);
	text-decoration: none;
	transition: all .15s;
	background: #fff;
}

.bs-cal-lnk:hover { border-color: var(--bs-accent-m); color: var(--bs-accent); background: var(--bs-accent-l); }

.bs-confirm-close {
	width: 100%;
	padding: 11px 20px;
	border: 1.5px solid #D1D5DB;
	border-radius: 10px;
	background: #ffffff;
	color: #374151;
	font-size: 14px;
	font-weight: 500;
	font-family: var(--bs-font);
	cursor: pointer;
	transition: all .15s;
}

.bs-confirm-close:hover {
	background: #F3F4F6;
	border-color: #9CA3AF;
	color: #111827;
}

/* ── Mobile tweaks ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.bs-modal { border-radius: 16px; }
	.bs-modal-head { border-radius: 16px 16px 0 0; }
	.bs-confirm { padding: 28px 18px 20px; }
}

/* ── Login prompt (guest visitors) ───────────────────────────────────────── */
.bs-login-prompt {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--bs-accent-l);
	border: 1px solid var(--bs-accent-m);
	border-radius: var(--bs-radius-sm);
	padding: 9px 13px;
	font-size: 13px;
	color: var(--bs-text2);
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.bs-login-prompt-icon { font-size: 15px; flex-shrink: 0; }

.bs-login-prompt-link {
	color: var(--bs-accent);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bs-login-prompt-link:hover { text-decoration: underline; }

/* ── Logged-in banner (pre-filled) ───────────────────────────────────────── */
.bs-loggedin-banner {
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--bs-green-bg);
	border: 1px solid #A7F3D0;
	border-radius: var(--bs-radius-sm);
	padding: 8px 13px;
	font-size: 13px;
	color: var(--bs-green);
	margin-bottom: 16px;
}

.bs-loggedin-icon {
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

/* ── Account toggle in booking modal ─────────────────────────────────────── */

.bs-acct-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bs-bg2);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-sm);
	padding: 8px 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.bs-acct-toggle-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--bs-text3);
	white-space: nowrap;
}

.bs-acct-toggle-btns {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.bs-acct-tb {
	padding: 5px 12px;
	border: 1.5px solid #CBD5E1;
	border-radius: 6px;
	background: #ffffff;
	font-size: 12.5px;
	font-weight: 500;
	font-family: var(--bs-font);
	color: #374151;
	cursor: pointer;
	transition: all .14s;
}

.bs-acct-tb:hover {
	border-color: var(--bs-accent);
	color: var(--bs-accent);
	background: var(--bs-accent-l);
}

.bs-acct-tb--active {
	background: var(--bs-accent);
	border-color: var(--bs-accent);
	color: #ffffff !important;
}

.bs-acct-tb--active:hover {
	background: #4338CA;
	border-color: #4338CA;
	color: #ffffff !important;
}

/* Inline login/register panels */
.bs-acct-panel {
	background: var(--bs-accent-l);
	border: 1px solid var(--bs-accent-m);
	border-radius: var(--bs-radius-sm);
	padding: 14px 14px 10px;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bs-inline-login-btn {
	align-self: flex-start;
	padding: 7px 18px;
	background: var(--bs-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--bs-font);
	cursor: pointer;
	transition: background .15s;
}

.bs-inline-login-btn:hover { background: #4338CA; }
.bs-inline-login-btn:disabled { opacity: .6; cursor: not-allowed; }

.bs-inline-login-msg {
	font-size: 12.5px;
	padding: 6px 0;
	font-weight: 500;
}

.bs-register-note {
	font-size: 12.5px;
	color: var(--bs-text2);
	margin: 0;
}