.nas-booking-wrapper {
	--nas-booking-bg: #0b0e14;
	--nas-booking-title-color: #f8fafc;
	--nas-booking-accent: #f3cc7a;
	--nas-booking-slot-bg: #151922;
	--nas-booking-slot-selected: #22c55e;
	--nas-booking-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   NOVA ADMIN SUITE — BOOKING CALENDAR ENGINE (OBSIDIAN GOLD THEME)
   ========================================================================== */

.nas-booking-wrapper {
	font-family: var(--nas-booking-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	max-width: 960px;
	margin: 30px auto;
	background: var(--nas-booking-bg, #0b0e14);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(243, 204, 122, 0.1);
	color: var(--nas-booking-title-color, #f8fafc);
	overflow: hidden;
	position: relative;
}

.nas-booking-header {
	padding: 28px 32px 20px;
	background: linear-gradient(180deg, rgba(21, 25, 34, 0.8) 0%, rgba(11, 14, 20, 0.4) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.nas-booking-title {
	font-size: 24px;
	font-weight: 700;
	margin: 0;
	color: #ffffff;
	letter-spacing: -0.02em;
	display: flex;
	align-items: center;
	gap: 10px;
}

.nas-booking-title span.nas-gold-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #f3cc7a;
	border-radius: 50%;
	box-shadow: 0 0 12px rgba(243, 204, 122, 0.8);
}

.nas-booking-subtitle {
	font-size: 14px;
	color: #94a3b8;
	margin: 4px 0 0 0;
}

/* Steps progress indicator */
.nas-booking-steps {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nas-step-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	transition: all 0.3s ease;
}

.nas-step-pill.active {
	background: rgba(243, 204, 122, 0.15);
	border-color: rgba(243, 204, 122, 0.4);
	color: #f3cc7a;
	box-shadow: 0 0 14px rgba(243, 204, 122, 0.2);
}

.nas-step-pill.completed {
	background: rgba(16, 185, 129, 0.12);
	border-color: rgba(16, 185, 129, 0.3);
	color: #34d399;
}

/* Content Area */
.nas-booking-body {
	padding: 32px;
}

.nas-booking-step-content {
	display: none;
	animation: nasFadeIn 0.3s ease forwards;
}

.nas-booking-step-content.active {
	display: block;
}

@keyframes nasFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Step 1: Services Grid */
.nas-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

.nas-service-card {
	background: #11151f;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 22px;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.nas-service-card:hover {
	transform: translateY(-2px);
	border-color: rgba(243, 204, 122, 0.4);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(243, 204, 122, 0.15);
}

.nas-service-card.selected {
	border-color: #f3cc7a;
	background: linear-gradient(180deg, #161b26 0%, #11151f 100%);
	box-shadow: 0 0 0 2px #f3cc7a, 0 8px 24px rgba(0, 0, 0, 0.5);
}

.nas-service-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.nas-service-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 9999px;
	letter-spacing: 0.05em;
}

.nas-badge-free {
	background: rgba(16, 185, 129, 0.15);
	color: #34d399;
	border: 1px solid rgba(16, 185, 129, 0.3);
}

.nas-badge-paid {
	background: rgba(243, 204, 122, 0.15);
	color: #f3cc7a;
	border: 1px solid rgba(243, 204, 122, 0.3);
}

.nas-service-duration {
	font-size: 12px;
	color: #94a3b8;
	display: flex;
	align-items: center;
	gap: 4px;
}

.nas-service-name {
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 8px 0;
}

.nas-service-desc {
	font-size: 13px;
	color: #94a3b8;
	line-height: 1.5;
	margin: 0 0 16px 0;
}

.nas-service-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nas-service-price {
	font-size: 17px;
	font-weight: 800;
	color: #f3cc7a;
}

.nas-service-zoom-tag {
	font-size: 11px;
	color: #60a5fa;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Step 2: Calendar & Time Grid */
.nas-datetime-container {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 28px;
}

@media (max-width: 768px) {
	.nas-datetime-container {
		grid-template-columns: 1fr;
	}
}

/* Calendar Month Picker */
.nas-calendar-box {
	background: #11151f;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 20px;
}

.nas-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.nas-cal-title {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
}

.nas-cal-nav-btn {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #cbd5e1;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
}

.nas-cal-nav-btn:hover {
	background: rgba(243, 204, 122, 0.2);
	color: #f3cc7a;
	border-color: #f3cc7a;
}

.nas-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	text-align: center;
}

.nas-cal-day-label {
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	padding: 6px 0;
}

.nas-cal-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: #cbd5e1;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s;
}

.nas-cal-day:hover:not(.disabled):not(.empty) {
	background: rgba(243, 204, 122, 0.15);
	border-color: rgba(243, 204, 122, 0.4);
	color: #f3cc7a;
}

.nas-cal-day.selected {
	background: var(--nas-booking-slot-selected, #22c55e);
	color: #ffffff;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(243, 204, 122, 0.4);
}

.nas-cal-day.disabled {
	color: #334155;
	background: transparent;
	cursor: not-allowed;
	opacity: 0.4;
}

.nas-cal-day.empty {
	background: transparent;
	cursor: default;
}

.nas-cal-day.today {
	border-color: rgba(243, 204, 122, 0.4);
}

/* Time Slots Picker */
.nas-slots-box {
	background: #11151f;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.nas-slots-title {
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 14px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nas-slots-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	max-height: 290px;
	overflow-y: auto;
	padding-right: 4px;
}

.nas-slot-pill {
	background: var(--nas-booking-slot-bg, rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #cbd5e1;
	cursor: pointer;
	transition: all 0.2s ease;
}

.nas-slot-pill:hover:not(.occupied) {
	background: rgba(243, 204, 122, 0.15);
	border-color: rgba(243, 204, 122, 0.4);
	color: #f3cc7a;
}

.nas-slot-pill.selected {
	background: var(--nas-booking-slot-selected, #22c55e);
	color: #ffffff;
	font-weight: 700;
	border-color: var(--nas-booking-slot-selected, #22c55e);
	box-shadow: 0 4px 12px rgba(243, 204, 122, 0.3);
}

.nas-slot-pill.occupied {
	background: rgba(255, 255, 255, 0.02);
	color: #475569;
	border-color: rgba(255, 255, 255, 0.03);
	cursor: not-allowed;
	text-decoration: line-through;
}

.nas-no-slots-msg {
	color: #94a3b8;
	font-size: 13px;
	text-align: center;
	padding: 30px 0;
	font-style: italic;
}

/* Step 3: Client Details Form */
.nas-booking-form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

@media (max-width: 600px) {
	.nas-booking-form {
		grid-template-columns: 1fr;
	}
}

.nas-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nas-form-group.full-width {
	grid-column: 1 / -1;
}

.nas-form-group label {
	font-size: 13px;
	font-weight: 600;
	color: #cbd5e1;
}

.nas-form-group input,
.nas-form-group textarea {
	background: #11151f;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 14px;
	color: #ffffff;
	outline: none;
	transition: all 0.2s;
}

.nas-form-group input:focus,
.nas-form-group textarea:focus {
	border-color: #f3cc7a;
	box-shadow: 0 0 0 3px rgba(243, 204, 122, 0.15);
}

.nas-booking-summary-card {
	grid-column: 1 / -1;
	background: rgba(21, 25, 34, 0.6);
	border: 1px solid rgba(243, 204, 122, 0.2);
	border-radius: 12px;
	padding: 18px 22px;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}

.nas-summary-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.nas-summary-label {
	font-size: 11px;
	text-transform: uppercase;
	color: #64748b;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.nas-summary-value {
	font-size: 15px;
	font-weight: 700;
	color: #f8fafc;
}

/* Actions & Buttons */
.nas-booking-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nas-btn-prev,
.nas-btn-next {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	border: none;
}

.nas-btn-prev {
	background: #151922;
	color: #94a3b8;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.nas-btn-prev:hover {
	background: #1c2230;
	color: #ffffff;
}

.nas-btn-next {
	background: var(--nas-booking-slot-selected, #22c55e);
	color: #ffffff;
	box-shadow: 0 4px 16px rgba(243, 204, 122, 0.35);
}

.nas-btn-next:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(243, 204, 122, 0.5);
}

.nas-btn-next:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Success View */
.nas-success-card {
	text-align: center;
	padding: 30px 20px;
}

.nas-success-icon {
	width: 64px;
	height: 64px;
	background: rgba(16, 185, 129, 0.15);
	border: 2px solid #10b981;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #34d399;
	margin-bottom: 20px;
	box-shadow: 0 0 24px rgba(16, 185, 129, 0.3);
}

.nas-success-title {
	font-size: 24px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 8px 0;
}

.nas-success-desc {
	font-size: 14px;
	color: #94a3b8;
	max-width: 500px;
	margin: 0 auto 24px;
	line-height: 1.6;
}

.nas-success-zoom-box {
	background: rgba(37, 99, 235, 0.12);
	border: 1px solid rgba(59, 130, 246, 0.3);
	border-radius: 12px;
	padding: 16px 20px;
	max-width: 500px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.nas-zoom-btn {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: #ffffff !important;
	padding: 8px 18px;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.nas-cal-export-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.nas-cal-export-btn {
	background: #151922;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #cbd5e1 !important;
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s;
}

.nas-cal-export-btn:hover {
	border-color: #f3cc7a;
	color: #f3cc7a !important;
}
/* Component-owned colours: keep theme button/heading rules from mixing light and dark palettes. */
.nas-booking-wrapper {
 background: var(--nas-booking-bg, #0b0e14) !important;
 color: var(--nas-booking-readable-title, var(--nas-booking-title-color, #f8fafc)) !important;
 --nas-booking-panel-bg: var(--nas-booking-bg, #0b0e14);
 --nas-booking-slot-text: #f8fafc;
 --nas-booking-selected-text: #111111;
 --nas-booking-muted: #cbd5e1;
 --nas-booking-accent-text: #f3cc7a;
}
.nas-booking-wrapper :is(.nas-booking-header,.nas-calendar-box,.nas-slots-box,.nas-booking-summary-card,.nas-service-card,.nas-success-zoom-box) {
 background: var(--nas-booking-panel-bg) !important;
 color: var(--nas-booking-readable-title, var(--nas-booking-title-color)) !important;
}
.nas-booking-wrapper :is(.nas-booking-title,.nas-cal-title,.nas-slots-title,.nas-service-title,.nas-summary-value,.nas-success-title,.nas-form-group label,.nas-slots-title span) {
 color: var(--nas-booking-readable-title, var(--nas-booking-title-color)) !important;
}
.nas-booking-wrapper :is(.nas-booking-subtitle,.nas-cal-day-label,.nas-no-slots-msg,.nas-summary-label,.nas-service-desc,.nas-success-desc) {
 color: var(--nas-booking-muted) !important;
}
.nas-booking-wrapper .nas-slot-pill,
.nas-booking-wrapper .nas-form-group :is(input,textarea),
.nas-booking-wrapper .nas-btn-prev,
.nas-booking-wrapper .nas-cal-nav-btn {
 background: var(--nas-booking-slot-bg) !important;
 color: var(--nas-booking-slot-text) !important;
 opacity: 1;
 -webkit-text-fill-color: currentColor;
}
.nas-booking-wrapper .nas-cal-day {
 color: var(--nas-booking-readable-title, var(--nas-booking-title-color)) !important;
 background: var(--nas-booking-panel-bg) !important;
}
.nas-booking-wrapper .nas-slot-pill.occupied,
.nas-booking-wrapper .nas-cal-day.disabled {
 opacity: 1;
 text-decoration: line-through;
 border-style: dashed;
 cursor: not-allowed;
}
.nas-booking-wrapper :is(.nas-slot-pill.selected,.nas-cal-day.selected,.nas-btn-next) {
 background: var(--nas-booking-slot-selected) !important;
 color: var(--nas-booking-selected-text) !important;
 opacity: 1;
 -webkit-text-fill-color: currentColor;
}
.nas-booking-wrapper .nas-btn-next:disabled {opacity:1; border:1px dashed currentColor; box-shadow:none;}
.nas-booking-wrapper :is(.nas-slot-pill,.nas-cal-nav-btn,.nas-btn-prev,.nas-btn-next):focus-visible {outline:2px solid currentColor;outline-offset:3px;}
.nas-booking-wrapper .nas-slot-pill {font:inherit; min-height:44px; width:100%; margin:0;}
.nas-booking-wrapper :is(.nas-service-price,.nas-summary-value#nas-summary-price,#nas-success-datetime) {color:var(--nas-booking-accent-text) !important;}
.nas-booking-wrapper .nas-form-group :is(input,textarea)::placeholder {color:var(--nas-booking-slot-text);opacity:1;}
.nas-booking-wrapper .nas-success-zoom-box strong {color:var(--nas-booking-readable-title, var(--nas-booking-title-color)) !important;}
.nas-booking-wrapper .nas-success-zoom-box span {color:var(--nas-booking-muted) !important;}
.nas-booking-wrapper .nas-cal-export-btn {background:var(--nas-booking-slot-bg) !important;color:var(--nas-booking-slot-text) !important;}
.nas-booking-wrapper .nas-zoom-btn {background:#1d4ed8 !important;color:#ffffff !important;}
/* Interpolating foreground and background independently can create unreadable intermediate frames. */
.nas-booking-wrapper :is(.nas-slot-pill,.nas-cal-day,.nas-cal-nav-btn,.nas-btn-prev,.nas-btn-next,.nas-service-card,.nas-step-pill,.nas-cal-export-btn) {transition-property:transform,box-shadow,border-color;}
.nas-booking-wrapper .nas-service-name {color:var(--nas-booking-readable-title, var(--nas-booking-title-color)) !important;}
.nas-booking-wrapper :is(.nas-service-duration,.nas-service-zoom-tag) {color:var(--nas-booking-muted) !important;}
.nas-booking-wrapper :is(.nas-step-pill,.nas-service-badge) {background:var(--nas-booking-slot-bg) !important;color:var(--nas-booking-slot-text) !important;}
.nas-booking-wrapper :is(.nas-step-pill.active,.nas-step-pill.completed) {background:var(--nas-booking-slot-selected) !important;color:var(--nas-booking-selected-text) !important;}
.nas-booking-wrapper .nas-success-icon {color:var(--nas-booking-accent-text) !important;}