/* Public Frontend Booking Wizard Styling */

:root {
	--pub-primary: #0D3B30; /* Dark Forest Green */
	--pub-primary-hover: #072a22;
	--pub-primary-light: #f4f7f6;
	--pub-secondary: #C29F68; /* Luxury Gold */
	--pub-secondary-hover: #b3925a;
	--pub-success: #61CE70; /* Accent Green */
	--pub-success-light: #eefaf0;
	--pub-danger: #b42318;
	--pub-danger-light: #fff2ed;
	--pub-text: #393939; /* Dark Gray */
	--pub-text-muted: #707070;
	--pub-border: #D6C7B3; /* Cream Border */
	--pub-bg: #f8fafc;
	
	--pub-radius: 32px; /* Premium Rounded Card */
	--pub-shadow: 0 15px 40px -10px rgba(13, 59, 48, 0.08), 0 5px 20px -10px rgba(0, 0, 0, 0.04);
	
	--pub-font-header: 'Playfair Display', Georgia, serif;
	--pub-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.salon-booking-flow-wrapper {
	font-family: var(--pub-font-body);
	color: var(--pub-text);
	max-width: 900px;
	margin: 40px auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.salon-booking-flow-card {
	background-color: #FCF6EC !important;
	border-radius: var(--pub-radius) !important;
	border: 1.5px solid var(--pub-border) !important;
	box-shadow: var(--pub-shadow) !important;
	overflow: hidden;
}

/* Header & Steps Indicator */
.flow-header {
	padding: 40px;
	background: #FCF6EC !important;
	border-bottom: 1.5px solid var(--pub-border) !important;
	text-align: center;
}

.flow-header h2 {
	font-family: var(--pub-font-header) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	margin: 0 0 12px 0 !important;
	color: var(--pub-primary) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
}

.flow-header p {
	font-size: 14.5px;
	color: var(--pub-text-muted);
	margin: 0 0 30px 0;
}

.flow-steps-indicator {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	max-width: 600px;
	margin: 0 auto;
}

.step-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	position: relative;
	width: 70px;
}

.step-number {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: white;
	border: 2px solid var(--pub-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--pub-text-muted);
	transition: all 0.25s ease;
	z-index: 2;
}

.step-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--pub-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.step-indicator.active .step-number {
	background-color: var(--pub-secondary);
	border-color: var(--pub-secondary);
	color: white;
	box-shadow: 0 0 10px rgba(194, 159, 104, 0.4);
}

.step-indicator.active .step-label {
	color: var(--pub-secondary);
	font-weight: 700;
}

.step-indicator.completed .step-number {
	background-color: var(--pub-secondary);
	border-color: var(--pub-secondary);
	color: white;
}

.step-line {
	flex-grow: 1;
	height: 2px;
	background-color: var(--pub-border);
	margin-top: 15px; /* Alignment with circle centers (top align starts at 0, circle height is 32px, half is 16px minus 1px) */
	z-index: 1;
}

.step-indicator.completed + .step-line,
.step-line.completed {
	background-color: var(--pub-secondary);
}

/* Wizard Panels Body */
#salon-public-booking-wizard {
	padding: 40px;
}

.wizard-step-panel {
	display: none;
}

.wizard-step-panel.active {
	display: block;
	animation: slideIn 0.3s ease;
}

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

.wizard-step-panel h3 {
	font-family: var(--pub-font-header) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	margin: 0 0 25px 0 !important;
	color: var(--pub-primary) !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.wizard-step-panel h3 i {
	color: var(--pub-secondary) !important;
}

/* Branch Cards Grid (Step 1) */
.branch-cards-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 30px;
}

.branch-select-card {
	cursor: pointer;
	position: relative;
	display: block;
}

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

.branch-card-body {
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 16px !important;
	padding: 24px 20px !important;
	display: flex !important;
	gap: 15px !important;
	transition: all 0.25s ease !important;
	background-color: white !important;
	position: relative;
}

.branch-card-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: var(--pub-secondary);
	color: white;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.15);
	opacity: 0;
	transform: scale(0.7);
	transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: 10;
}

.branch-select-card input[type="radio"]:checked + .branch-card-body .branch-card-badge {
	opacity: 1;
	transform: scale(1);
}

.branch-icon {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	background-color: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--pub-secondary);
	flex-shrink: 0;
	border: 1px solid #E2D7C5;
	transition: all 0.25s ease;
}

.branch-details h4 {
	margin: 0 0 6px 0;
	font-family: var(--pub-font-header);
	font-size: 17px;
	font-weight: 700;
	color: var(--pub-primary);
}

.branch-details p.address {
	margin: 0 0 10px 0;
	font-size: 13px;
	color: var(--pub-text-muted);
	line-height: 1.4;
}

.branch-details i {
	width: 14px;
	margin-right: 4px;
	color: var(--pub-secondary);
}

.branch-card-links {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	margin-top: 8px;
}

.branch-card-link {
	color: var(--pub-secondary) !important;
	text-decoration: none !important;
	font-weight: 600;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.branch-card-link:hover {
	color: var(--pub-primary) !important;
}

.link-divider {
	color: #E2D7C5;
	font-size: 11px;
}

.branch-select-card input[type="radio"]:checked + .branch-card-body {
	border-color: var(--pub-secondary) !important;
	background-color: rgba(194, 159, 104, 0.05) !important;
	box-shadow: 0 8px 24px rgba(194, 159, 104, 0.12) !important;
}

.branch-select-card input[type="radio"]:checked + .branch-card-body .branch-icon {
	background-color: var(--pub-primary) !important;
	border-color: var(--pub-primary) !important;
	color: white !important;
}

/* Service Cards Grid (Step 2) */
.step-subtitle {
	font-family: var(--pub-font-body) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--pub-secondary) !important;
	letter-spacing: 1px !important;
	margin-bottom: 6px !important;
	text-transform: uppercase !important;
	display: block !important;
}

.step-title {
	font-family: var(--pub-font-header) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
	margin-top: 0 !important;
	margin-bottom: 25px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.services-category-filter {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-bottom: 25px !important;
}

.category-filter-btn {
	background-color: transparent !important;
	border: 1.5px solid #E2D7C5 !important;
	color: var(--pub-text-muted) !important;
	padding: 8px 24px !important;
	border-radius: 30px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
	font-family: var(--pub-font-body) !important;
}

.category-filter-btn:hover {
	border-color: var(--pub-secondary) !important;
	color: var(--pub-secondary) !important;
}

.category-filter-btn.active {
	background-color: var(--pub-primary) !important;
	border-color: var(--pub-primary) !important;
	color: white !important;
}

.services-selection-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 15px !important;
	margin-bottom: 30px !important;
	max-height: 480px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 8px 16px 8px 8px !important;
	box-sizing: border-box !important;
}

.services-selection-summary {
	font-family: var(--pub-font-body) !important;
	font-size: 13.5px !important;
	color: var(--pub-text-muted) !important;
	margin-top: 15px !important;
	margin-bottom: 20px !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-weight: 500 !important;
}

.services-selection-summary i {
	color: var(--pub-secondary) !important;
}

.services-selection-summary .selected-count {
	color: var(--pub-primary) !important;
	font-weight: 700 !important;
}

.services-selection-summary .total-count {
	font-weight: 600 !important;
}

/* Premium slim custom scrollbars */
.services-selection-grid::-webkit-scrollbar,
.staff-radios-grid::-webkit-scrollbar,
.portal-time-slots::-webkit-scrollbar,
.time-slots-grid::-webkit-scrollbar {
	width: 6px;
}
.services-selection-grid::-webkit-scrollbar-track,
.staff-radios-grid::-webkit-scrollbar-track,
.portal-time-slots::-webkit-scrollbar-track,
.time-slots-grid::-webkit-scrollbar-track {
	background: transparent;
}
.services-selection-grid::-webkit-scrollbar-thumb,
.staff-radios-grid::-webkit-scrollbar-thumb,
.portal-time-slots::-webkit-scrollbar-thumb,
.time-slots-grid::-webkit-scrollbar-thumb {
	background: rgba(194, 159, 104, 0.3); /* Gold transparent thumb */
	border-radius: 4px;
}
.services-selection-grid::-webkit-scrollbar-thumb:hover,
.staff-radios-grid::-webkit-scrollbar-thumb:hover,
.portal-time-slots::-webkit-scrollbar-thumb:hover,
.time-slots-grid::-webkit-scrollbar-thumb:hover {
	background: rgba(194, 159, 104, 0.6);
}

.service-selection-card {
	cursor: pointer !important;
	position: relative !important;
	display: block;
	width: 100% !important;
}

.service-selection-card input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

.service-card-inner {
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 16px !important;
	padding: 18px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	background-color: white !important;
	transition: all 0.25s ease !important;
	height: auto !important;
	gap: 20px !important;
	position: relative !important;
}

.service-icon-circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1.5px solid #E2D7C5;
	background-color: #fdfbf7;
	color: var(--pub-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
	transition: all 0.25s ease;
}

.service-main-info {
	flex-grow: 1 !important;
	min-width: 0 !important;
	text-align: left !important;
}

.service-main-info h4 {
	margin: 0 0 4px 0 !important;
	font-family: var(--pub-font-header) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
}

.service-main-info p.desc {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--pub-text-muted) !important;
	line-height: 1.4 !important;
}

.service-price {
	font-family: var(--pub-font-body) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
	min-width: 90px !important;
	text-align: right !important;
}

.service-duration {
	font-size: 13px !important;
	color: var(--pub-text-muted) !important;
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	min-width: 90px !important;
}

.service-duration i {
	color: var(--pub-secondary) !important;
}

.service-select-wrapper {
	min-width: 90px !important;
	display: flex !important;
	justify-content: flex-end !important;
}

.service-select-indicator {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.btn-select-text {
	padding: 8px 22px !important;
	border-radius: 30px !important;
	border: 1.5px solid var(--pub-primary) !important;
	color: var(--pub-primary) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-align: center !important;
	transition: all 0.2s ease !important;
}

.service-selection-card:hover .btn-select-text {
	background-color: var(--pub-primary) !important;
	color: white !important;
}

.selected-icon-badge {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--pub-secondary) !important;
	color: white !important;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	box-shadow: 0 2px 6px rgba(194, 159, 104, 0.3) !important;
}

.service-selection-card input[type="checkbox"]:checked + .service-card-inner {
	border-color: var(--pub-secondary) !important;
	background-color: rgba(194, 159, 104, 0.05) !important;
	box-shadow: 0 6px 18px rgba(194, 159, 104, 0.1) !important;
}

.service-selection-card input[type="checkbox"]:checked + .service-card-inner .service-icon-circle {
	background-color: var(--pub-primary) !important;
	border-color: var(--pub-primary) !important;
	color: white !important;
}

.service-selection-card input[type="checkbox"]:checked + .service-card-inner .btn-select-text {
	display: none !important;
}

.service-selection-card input[type="checkbox"]:checked + .service-card-inner .selected-icon-badge {
	display: flex !important;
}

/* Step 3 Layout */
.step-3-columns-grid {
	display: grid !important;
	grid-template-columns: 1.15fr 1.15fr 0.9fr !important;
	gap: 20px !important;
	margin-bottom: 30px !important;
	align-items: start !important;
}

.step-3-column {
	display: flex !important;
	flex-direction: column !important;
}

/* Custom Calendar styling */
.custom-calendar-container {
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 16px !important;
	padding: 15px !important;
	background-color: white !important;
}

.calendar-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 15px !important;
}

.calendar-header button {
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	font-size: 14px !important;
	color: var(--pub-primary) !important;
	padding: 6px 10px !important;
	transition: all 0.2s ease !important;
}

.calendar-header button:hover {
	color: var(--pub-secondary) !important;
}

.calendar-month-year {
	font-family: var(--pub-font-header) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	color: var(--pub-primary) !important;
}

.calendar-weekdays {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	text-align: center !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #94a3b8 !important;
	margin-bottom: 10px !important;
}

.calendar-days-grid {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 5px !important;
}

.cal-day {
	height: 34px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	color: var(--pub-primary) !important;
}

.cal-day:hover {
	background-color: rgba(194, 159, 104, 0.1) !important;
	color: var(--pub-secondary) !important;
}

.cal-day.active {
	background-color: var(--pub-primary) !important;
	color: white !important;
	box-shadow: 0 4px 10px rgba(21, 64, 55, 0.25) !important;
}

.cal-day.today {
	border: 1.5px solid var(--pub-secondary) !important;
}

.cal-day.disabled {
	color: #cbd5e1 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

.cal-day.other-month {
	color: #e2e8f0 !important;
}

/* Staff Select style */
.staff-radios-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	max-height: 380px !important;
	overflow-y: auto !important;
	padding-right: 8px !important;
}

.staff-radio-card {
	cursor: pointer !important;
	position: relative !important;
	display: block !important;
}

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

.staff-card-inner {
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 16px !important;
	padding: 12px 15px !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background-color: white !important;
	transition: all 0.25s ease !important;
	position: relative !important;
}

.staff-radio-card input[type="radio"]:checked + .staff-card-inner {
	border-color: var(--pub-secondary) !important;
	background-color: rgba(194, 159, 104, 0.05) !important;
	box-shadow: 0 6px 18px rgba(194, 159, 104, 0.08) !important;
}

.staff-avatar {
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	border: 1.5px solid #E2D7C5 !important;
	background-color: #fdfbf7 !important;
	color: var(--pub-secondary) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 18px !important;
	flex-shrink: 0 !important;
	background-size: cover !important;
	background-position: center !important;
	transition: all 0.25s ease !important;
}

.staff-radio-card input[type="radio"]:checked + .staff-card-inner .staff-avatar {
	background-color: var(--pub-primary) !important;
	border-color: var(--pub-primary) !important;
	color: white !important;
}

.staff-name-wrap {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

.staff-name-wrap h4 {
	margin: 0 !important;
	font-family: var(--pub-font-header) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
}

.staff-name-wrap .staff-role {
	font-size: 11px !important;
	color: var(--pub-text-muted) !important;
	margin-top: 1px !important;
}

.btn-view-staff-bio {
	font-size: 10.5px !important;
	color: var(--pub-secondary) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	display: inline-block !important;
	margin-top: 3px !important;
	font-weight: 600 !important;
	width: fit-content !important;
}

.btn-view-staff-bio:hover {
	color: var(--pub-primary) !important;
}

.staff-radio-circle {
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	border: 1.5px solid #E2D7C5 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 9px !important;
	color: transparent !important;
	transition: all 0.2s ease !important;
	flex-shrink: 0 !important;
}

.staff-radio-card input[type="radio"]:checked + .staff-card-inner .staff-radio-circle {
	border-color: var(--pub-secondary) !important;
	background-color: var(--pub-secondary) !important;
	color: white !important;
}

/* Staff Bio Popup Modal styling */
.staff-bio-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 999999 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
}

.staff-bio-modal.active {
	display: flex !important;
}

.staff-bio-modal-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(13, 26, 23, 0.45) !important;
	backdrop-filter: blur(8px) !important;
}

.staff-bio-modal-content {
	position: relative !important;
	background: white !important;
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 24px !important;
	padding: 30px !important;
	width: 90% !important;
	max-width: 400px !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
	z-index: 10 !important;
	text-align: center !important;
	animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

.btn-close-bio-modal {
	position: absolute !important;
	top: 15px !important;
	right: 15px !important;
	font-size: 26px !important;
	color: #94a3b8 !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	line-height: 1 !important;
}

.btn-close-bio-modal:hover {
	color: var(--pub-primary) !important;
}

.bio-avatar {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	border: 2px solid #E2D7C5 !important;
	margin: 0 auto 15px auto !important;
	background-size: cover !important;
	background-position: center !important;
}

.bio-name {
	font-family: var(--pub-font-header) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
	margin: 0 0 4px 0 !important;
}

.bio-role {
	font-size: 13px !important;
	color: var(--pub-secondary) !important;
	font-weight: 600 !important;
	display: block !important;
	margin-bottom: 4px !important;
}

.bio-exp {
	font-size: 11px !important;
	background: rgba(229, 184, 66, 0.12) !important;
	color: #b48608 !important;
	padding: 2px 8px !important;
	border-radius: 4px !important;
	display: inline-block !important;
	font-weight: 600 !important;
	margin-bottom: 15px !important;
}

.bio-description {
	font-size: 13px !important;
	color: #475569 !important;
	line-height: 1.5 !important;
	border-top: 1px dashed #e2e8f0 !important;
	padding-top: 15px !important;
	text-align: left !important;
}

/* Time Slots Picker */
.step-3-section-title,
.step-4-section-title,
.step-5-section-title {
	font-family: var(--pub-font-header) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
	margin-bottom: 20px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	border-bottom: 1.5px solid #E2D7C5 !important;
	padding-bottom: 10px !important;
}

.date-picker-input-wrap {
	margin-bottom: 24px !important;
}

.date-picker-input-wrap label {
	font-family: var(--pub-font-body) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--pub-primary) !important;
	margin-bottom: 8px !important;
	display: block !important;
}

.date-picker-input-wrap input[type="date"] {
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 12px !important;
	padding: 12px 16px !important;
	font-family: var(--pub-font-body) !important;
	font-size: 14px !important;
	width: 100% !important;
	color: var(--pub-primary) !important;
	font-weight: 600 !important;
	background-color: white !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease !important;
}

.date-picker-input-wrap input[type="date"]:focus {
	border-color: var(--pub-secondary) !important;
	box-shadow: 0 0 0 4px rgba(229, 184, 66, 0.15) !important;
	outline: none !important;
}

.time-slots-wrapper label {
	font-family: var(--pub-font-body) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--pub-primary) !important;
	margin-bottom: 12px !important;
	display: block !important;
}

.time-slots-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 12px !important;
	max-height: 280px !important;
	overflow-y: auto !important;
	padding: 4px !important;
}

.time-slot-pill {
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 30px !important; /* Oval pill */
	padding: 10px 5px !important;
	text-align: center !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	cursor: pointer !important;
	background-color: white !important;
	color: var(--pub-primary) !important;
	transition: all 0.2s ease !important;
	font-family: var(--pub-font-body) !important;
}

.time-slot-pill:hover {
	border-color: var(--pub-secondary) !important;
	color: var(--pub-secondary) !important;
	background-color: #fdfbf7 !important;
}

.time-slot-pill.active {
	background-color: var(--pub-primary) !important;
	border-color: var(--pub-primary) !important;
	color: white !important;
	box-shadow: 0 4px 12px rgba(21, 64, 55, 0.2) !important;
}

.time-slot-pill.disabled {
	opacity: 0.35 !important;
	background-color: #f1f5f9 !important;
	border-color: #e2e8f0 !important;
	color: #94a3b8 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Step 4 Layout */
.step-4-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 35px;
	margin-bottom: 30px;
}

.contact-form-inputs {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.booking-summary-box {
	background-color: #f8fafc;
	border: 1px solid var(--pub-border);
	border-radius: 12px;
	padding: 24px;
	height: fit-content;
}

.booking-summary-box h4 {
	margin: 0 0 16px 0;
	font-family: var(--pub-font-header);
	font-size: 15px;
	font-weight: 750;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #0f172a;
}

.summary-details-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.summary-item {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	line-height: 1.4;
}

.summary-item .lbl {
	color: var(--pub-text-muted);
	font-weight: 500;
}

.summary-item .val {
	font-weight: 600;
	text-align: right;
	max-width: 180px;
}

.summary-item.total-row {
	font-size: 15px;
	padding: 6px 0;
}

.summary-item.total-row .lbl {
	color: #0f172a;
	font-weight: 700;
}

.summary-item.total-row .val {
	font-weight: 800;
	font-size: 17px;
}

.price-highlight {
	color: var(--pub-primary);
}

.deposit-highlight {
	color: var(--pub-warning);
}

.deposit-notice-card {
	background-color: #fffbeb;
	border: 1px dashed #fcd34d;
	border-radius: 8px;
	padding: 12px;
	font-size: 12px;
	color: #92400e;
	line-height: 1.4;
}

.deposit-notice-card p {
	margin: 0;
}

.deposit-notice-card i {
	margin-right: 4px;
}

/* Buttons Controls Wrapper */
.wizard-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--pub-border);
	padding-top: 25px;
}

/* Success Screen (Step 5) */
#booking-success-panel {
	padding: 20px 40px 40px 40px;
}

.booking-success-message {
	text-align: center;
	max-width: 550px;
	margin: 0 auto;
}

.success-icon {
	font-size: 60px;
	color: var(--pub-success);
	margin-bottom: 20px;
}

.booking-success-message h2 {
	font-family: var(--pub-font-header);
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 10px 0;
}

.booking-success-message p {
	color: var(--pub-text-muted);
	font-size: 14.5px;
	margin: 0 0 30px 0;
}

.success-details-receipt {
	background-color: #fdfbf7 !important;
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 16px !important;
	padding: 24px !important;
	text-align: left !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.success-details-receipt p {
	margin: 0;
	font-size: 14px;
	display: flex;
	justify-content: space-between;
}

.booking-success-message .btn-reset-booking-flow {
	margin-top: 28px !important;
}

.receipt-payment-status {
	border-top: 1px dashed var(--pub-border);
	padding-top: 15px;
	margin-top: 5px;
}

.bank-transfer-instructions {
	margin-top: 12px !important;
	background-color: white !important;
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 12px !important;
	padding: 15px !important;
}

.bank-transfer-instructions p {
	font-size: 12.5px;
	color: var(--pub-text-muted);
	margin-bottom: 10px;
	display: block;
}

.bank-details-box {
	background-color: #fdfbf7 !important;
	border-radius: 8px !important;
	padding: 12px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.bank-details-box p {
	margin: 0;
	font-size: 13px;
	color: #0f172a;
}

.salon-input, .salon-textarea {
	padding: 12px 16px !important;
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	outline: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background-color: white !important;
	transition: all 0.15s ease !important;
	font-family: var(--pub-font-body) !important;
}

.salon-input:focus, .salon-textarea:focus {
	border-color: var(--pub-secondary) !important;
	box-shadow: 0 0 0 3px rgba(194, 159, 104, 0.15) !important;
}

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

.salon-form-group label {
	font-weight: 600;
	font-size: 13px;
	color: #0f172a;
}

.salon-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 12px 26px !important;
	border-radius: 30px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer !important;
	border: 1px solid transparent !important;
	transition: all 0.2s ease !important;
	font-family: var(--pub-font-body) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	line-height: 1.5 !important;
	height: auto !important;
	min-height: auto !important;
}

.salon-btn-primary {
	background-color: var(--pub-primary) !important;
	color: white !important;
	border-color: var(--pub-primary) !important;
}

.salon-btn-primary:hover {
	background-color: var(--pub-primary-hover) !important;
	color: white !important;
	border-color: var(--pub-primary-hover) !important;
}

.salon-btn-secondary {
	background-color: transparent !important;
	border: 1.5px solid var(--pub-primary) !important;
	color: var(--pub-primary) !important;
}

.salon-btn-secondary:hover {
	border-color: var(--pub-primary-hover) !important;
	background-color: rgba(13, 59, 48, 0.05) !important;
	color: var(--pub-primary-hover) !important;
}

.salon-btn:disabled,
.salon-btn[disabled] {
	background-color: #e2e8f0 !important;
	color: #94a3b8 !important;
	border-color: #e2e8f0 !important;
	cursor: not-allowed !important;
}

/* Responsive breakpoint styling */
@media (max-width: 768px) {
	.branch-cards-grid,
	.services-selection-grid {
		grid-template-columns: 1fr;
	}
	
	.step-3-columns-grid,
	.step-4-grid,
	.step-5-columns-grid {
		grid-template-columns: 1fr !important;
	}
	
	.time-slots-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	#salon-public-booking-wizard,
	.flow-header {
		padding: 24px;
	}
	
	.flow-steps-indicator {
		gap: 4px;
	}
	
	.step-label {
		display: none;
	}
}

/* Custom Validation Styles */
.field-error-message {
	color: #dc2626 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	margin-top: 6px !important;
	display: block !important;
	animation: shakeError 0.2s ease-in-out;
}

.salon-input.has-error,
.salon-textarea.has-error {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

@keyframes shakeError {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* Frontend CRM Portal Fullscreen Styles */
.salon-portal-fullscreen {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 999999 !important;
	background-color: #f8fafc !important;
	overflow: auto !important;
	box-sizing: border-box;
}

.salon-portal-fullscreen select,
.salon-portal-fullscreen input,
.salon-portal-fullscreen button,
.salon-portal-fullscreen textarea {
	box-sizing: border-box;
}

/* Luxury CRM Login Overlay */
.login-overlay {
	background-color: #fffaf0 !important;
	background-image:
		linear-gradient(115deg, rgba(194, 159, 104, 0.08) 0 1px, transparent 1px 28px),
		repeating-radial-gradient(ellipse at 8% 20%, rgba(194, 159, 104, 0.18) 0 1px, transparent 2px 15px),
		repeating-radial-gradient(ellipse at 92% 82%, rgba(194, 159, 104, 0.12) 0 1px, transparent 2px 18px),
		linear-gradient(180deg, #fffaf0 0%, #fffdf8 46%, #fff8ea 100%) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 16px;
	position: relative;
}

.login-overlay:before,
.login-overlay:after {
	content: "";
	position: fixed;
	inset: auto auto 8% -120px;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(194, 159, 104, 0.28);
	border-radius: 44% 56% 48% 52%;
	transform: rotate(-24deg);
	pointer-events: none;
}

.login-overlay:after {
	inset: -130px -120px auto auto;
	width: 520px;
	height: 520px;
	transform: rotate(20deg);
	opacity: 0.55;
}

.salon-portal-login-card {
	background: rgba(255, 255, 255, 0.88) !important;
	border: 1.5px solid rgba(194, 159, 104, 0.88) !important;
	border-radius: 30px !important;
	box-shadow: 0 18px 52px rgba(13, 59, 48, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
	max-width: 500px;
	padding: 34px 52px 28px !important;
	position: relative;
	text-align: center;
	width: min(100%, 500px);
	z-index: 1;
}

.salon-portal-login-card:before {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 24px;
	border: 1px solid rgba(194, 159, 104, 0.16);
	pointer-events: none;
}

.salon-portal-login-card h2 {
	color: var(--pub-primary);
	font-family: var(--pub-font-header);
	font-size: clamp(32px, 4.2vw, 44px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	margin: 0 0 12px;
}

.salon-portal-login-card p {
	color: #766d62;
	font-size: 14.5px;
	line-height: 1.48;
	margin: 0 auto 22px;
	max-width: 360px;
}

.login-logo {
	align-items: center;
	background: radial-gradient(circle at 35% 25%, #2b654e 0%, #0d3b30 58%, #09291f 100%) !important;
	border: 2px solid #f2d487;
	border-radius: 20px;
	box-shadow: 0 10px 22px rgba(13, 59, 48, 0.22), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
	color: #f6d98d;
	display: flex;
	font-size: 32px;
	height: 78px;
	justify-content: center;
	margin: 0 auto 20px;
	position: relative;
	width: 78px;
}

.login-logo.has-site-logo {
	background: #ffffff !important;
	padding: 8px;
}

.login-logo.has-site-logo img {
	display: block;
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: 100%;
}

.login-logo-sparkle {
	color: #fff3b6;
	font-family: Georgia, serif;
	font-size: 22px;
	left: 50%;
	position: absolute;
	top: 8px;
	transform: translateX(-50%);
	text-shadow: 0 0 16px rgba(255, 238, 153, 0.65);
}

.login-logo.text-danger {
	background: #fff2ed !important;
	border-color: #f4b8aa;
	box-shadow: 0 14px 28px rgba(180, 35, 24, 0.12) !important;
	color: var(--pub-danger) !important;
}

.login-title-divider {
	align-items: center;
	color: var(--pub-secondary);
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 0 auto 14px;
	max-width: 210px;
}

.login-title-divider:before,
.login-title-divider:after {
	background: linear-gradient(90deg, transparent, rgba(194, 159, 104, 0.7));
	content: "";
	height: 1px;
	width: 76px;
}

.login-title-divider:after {
	background: linear-gradient(90deg, rgba(194, 159, 104, 0.7), transparent);
}

.login-title-divider span {
	font-family: Georgia, serif;
	font-size: 20px;
	line-height: 1;
}

.login-error-message {
	align-items: flex-start;
	background: var(--pub-danger-light) !important;
	border: 1.5px solid #f1b7a9 !important;
	border-radius: 14px !important;
	color: var(--pub-danger) !important;
	display: flex;
	font-size: 14.5px;
	font-weight: 500;
	gap: 12px;
	line-height: 1.42;
	margin: 0 0 20px;
	padding: 13px 16px !important;
	text-align: left;
}

.login-error-message i {
	align-items: center;
	border: 2px solid currentColor;
	border-radius: 999px;
	display: inline-flex;
	flex: 0 0 24px;
	font-size: 13px;
	height: 24px;
	justify-content: center;
	margin-top: 2px;
	width: 24px;
}

.login-error-message-static {
	display: flex !important;
	margin-bottom: 20px;
}

.login-field-group {
	margin: 0 0 16px !important;
	text-align: left;
}

.login-field-group label {
	color: var(--pub-primary);
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 8px;
}

.login-input-wrap {
	position: relative;
}

.login-input-wrap > i {
	color: #4d6b4b;
	font-size: 18px;
	left: 19px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.salon-portal-login-card .salon-input {
	background: rgba(255, 255, 255, 0.82) !important;
	border: 1.5px solid rgba(194, 159, 104, 0.82) !important;
	border-radius: 12px !important;
	color: var(--pub-primary) !important;
	font-size: 15px !important;
	height: 50px !important;
	padding: 0 48px 0 54px !important;
}

.salon-portal-login-card .salon-input::placeholder {
	color: #aaa39b !important;
}

.salon-portal-login-card .salon-input:focus {
	border-color: var(--pub-secondary) !important;
	box-shadow: 0 0 0 4px rgba(194, 159, 104, 0.16) !important;
}

.login-password-toggle {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #9d968f !important;
	cursor: pointer;
	display: flex;
	font-size: 17px;
	height: 36px;
	justify-content: center;
	padding: 0 !important;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	z-index: 2;
}

.login-password-toggle:hover,
.login-password-toggle:focus {
	color: var(--pub-primary) !important;
	outline: none !important;
}

.login-options-row {
	align-items: center;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	margin: 4px 0 22px;
}

.login-remember-check {
	align-items: center;
	color: var(--pub-primary);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 12px;
}

.login-remember-check input {
	height: 1px !important;
	opacity: 0;
	position: absolute;
	width: 1px !important;
}

.remember-checkmark {
	align-items: center;
	background: #ffffff;
	border: 1.5px solid rgba(13, 59, 48, 0.24);
	border-radius: 6px;
	color: transparent;
	display: inline-flex;
	flex: 0 0 20px;
	height: 20px;
	justify-content: center;
	width: 20px;
}

.login-remember-check input:checked + .remember-checkmark {
	background: var(--pub-primary);
	border-color: var(--pub-primary);
	color: #ffffff;
}

.login-forgot-link {
	border-bottom: 1px dotted var(--pub-secondary);
	color: #b18333 !important;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none !important;
}

.login-forgot-link:hover {
	color: var(--pub-primary) !important;
}

#btn-portal-login-submit {
	align-items: center !important;
	background: linear-gradient(135deg, #0d3b30 0%, #173f31 100%) !important;
	border: 1.5px solid #d7ab4b !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 28px rgba(13, 59, 48, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
	color: #ffe6a4 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	font-family: var(--pub-font-header);
	font-size: 18px !important;
	font-weight: 700 !important;
	gap: 10px !important;
	justify-content: center !important;
	margin-top: 0 !important;
	min-height: 52px !important;
	padding: 11px 24px !important;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18) !important;
	transition: all 0.22s ease !important;
	width: 100% !important;
}

#btn-portal-login-submit:hover,
#btn-portal-login-submit:focus {
	background: linear-gradient(135deg, #082a22 0%, #123428 100%) !important;
	box-shadow: 0 16px 34px rgba(13, 59, 48, 0.32), 0 0 0 4px rgba(194, 159, 104, 0.16) !important;
	color: #fff1bc !important;
	outline: none !important;
	transform: translateY(-1px);
}

#btn-portal-login-submit:disabled {
	cursor: wait !important;
	opacity: 0.78;
	transform: none;
}

.login-card-flourish {
	height: 28px;
	margin: 20px auto 0;
	position: relative;
	width: 220px;
}

.login-card-flourish:before,
.login-card-flourish:after {
	background: linear-gradient(90deg, transparent, rgba(194, 159, 104, 0.75));
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	top: 14px;
	width: 88px;
}

.login-card-flourish:after {
	background: linear-gradient(90deg, rgba(194, 159, 104, 0.75), transparent);
	left: auto;
	right: 0;
}

.login-card-flourish {
	background:
		radial-gradient(circle at 50% 50%, transparent 0 6px, rgba(194, 159, 104, 0.75) 7px 8px, transparent 9px),
		linear-gradient(135deg, transparent 43%, rgba(194, 159, 104, 0.75) 44% 46%, transparent 47%) center / 32px 28px no-repeat;
}

.login-access-denied-card {
	max-width: 480px;
}

@media (max-width: 720px) {
	.login-overlay {
		align-items: flex-start;
		padding: 22px 14px;
	}

	.salon-portal-login-card {
		border-radius: 28px !important;
		padding: 30px 20px 24px !important;
	}

	.login-logo {
		border-radius: 18px;
		font-size: 29px;
		height: 68px;
		margin-bottom: 16px;
		width: 68px;
	}

	.login-logo-sparkle {
		font-size: 19px;
		top: 6px;
	}

	.salon-portal-login-card h2 {
		font-size: 32px;
	}

	.salon-portal-login-card p,
	.login-error-message {
		font-size: 15px;
	}

	.login-options-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	#btn-portal-login-submit {
		font-size: 19px !important;
		min-height: 58px !important;
	}
}

/* Step 5: Deposit Confirmation Layout */
/* Step 5: Deposit Confirmation Layout (Mockup 3 Columns) */
.step-5-columns-grid {
	display: grid !important;
	grid-template-columns: 1fr 1.35fr 1fr !important;
	gap: 20px !important;
	margin-bottom: 25px !important;
	align-items: stretch !important;
}

/* Card base styles */
.deposit-amount-card,
.bank-transfer-card,
.scan-to-pay-card {
	background-color: white !important;
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 20px !important;
	padding: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: 0 4px 12px rgba(13, 26, 23, 0.02) !important;
	box-sizing: border-box !important;
}

/* Deposit Amount Card */
.deposit-amount-card {
	border-color: var(--pub-secondary) !important;
	background-color: rgba(194, 159, 104, 0.03) !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.deposit-amount-card .amount-title {
	font-family: var(--pub-font-header) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin-bottom: 12px !important;
}

.deposit-amount-card .amount-value {
	font-size: 38px !important;
	font-weight: 800 !important;
	color: var(--pub-primary) !important;
	font-family: var(--pub-font-header) !important;
	margin-bottom: 15px !important;
}

.deposit-amount-card .amount-footer {
	font-size: 12px !important;
	color: #64748b !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	line-height: 1.4 !important;
}

.deposit-amount-card .amount-footer i {
	color: var(--pub-secondary) !important;
	font-size: 14px !important;
}

/* Bank Transfer Card Table style */
.bank-transfer-card {
	justify-content: flex-start !important;
}

.bank-transfer-card .step-5-section-title {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 15px !important;
	font-size: 14px !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.bank-transfer-card .step-5-section-title i {
	color: var(--pub-secondary) !important;
}

.bank-details-table {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	margin-bottom: 15px !important;
	flex: 1 !important;
}

.bank-table-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	border-bottom: 1px dashed #f1f5f9 !important;
	padding-bottom: 8px !important;
}

.bank-table-row:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.bank-table-row .lbl {
	font-size: 12px !important;
	color: var(--pub-text-muted) !important;
	font-weight: 500 !important;
}

.bank-table-row .val-wrap {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.bank-table-row .val {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
	text-align: right !important;
}

.bank-transfer-card .btn-copy-bank {
	background: none !important;
	border: none !important;
	color: var(--pub-secondary) !important;
	cursor: pointer !important;
	padding: 2px 4px !important;
	font-size: 12px !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
}

.bank-transfer-card .btn-copy-bank:hover {
	color: var(--pub-primary) !important;
}

.bank-transfer-card .bank-instructions {
	font-size: 11px !important;
	color: #64748b !important;
	line-height: 1.4 !important;
	margin-top: auto !important;
}

/* Scan to Pay Card style */
.scan-to-pay-card {
	align-items: center !important;
	text-align: center !important;
}

.scan-to-pay-card .step-5-section-title {
	font-size: 14px !important;
	margin-bottom: 12px !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.qr-code-wrapper {
	background-color: white !important;
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 12px !important;
	padding: 12px !important;
	position: relative !important;
	margin-bottom: 12px !important;
	width: 140px !important;
	height: 140px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

.qr-code-wrapper img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

.scan-to-pay-card .qr-code-footer {
	font-size: 11px !important;
	color: #64748b !important;
	line-height: 1.4 !important;
}

/* Checkbox confirmation custom label */
.deposit-confirm-checkbox {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 20px 0 !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	color: var(--pub-primary) !important;
	cursor: pointer !important;
	padding: 12px 16px !important;
	background: #fdfbf7 !important;
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 12px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.deposit-confirm-checkbox input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	border: 1.5px solid var(--pub-border) !important;
	border-radius: 4px !important;
	background-color: white !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}

.deposit-confirm-checkbox input[type="checkbox"]:checked {
	background-color: var(--pub-secondary) !important;
	border-color: var(--pub-secondary) !important;
}

.deposit-confirm-checkbox input[type="checkbox"]:checked::after {
	content: "\f00c" !important;
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 900 !important;
	font-size: 11px !important;
	color: white !important;
	position: absolute !important;
}

/* CUSTOMER PORTAL STYLE */
.salon-customer-portal-wrapper {
	font-family: var(--pub-font-body);
	color: var(--pub-text);
	max-width: 1000px;
	margin: 40px auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.customer-portal-header {
	text-align: center;
	margin-bottom: 30px;
}

.customer-portal-header h2 {
	font-family: var(--pub-font-header) !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
	margin: 0 0 8px 0 !important;
	letter-spacing: 1.5px !important;
}

.customer-portal-header p {
	font-size: 14.5px !important;
	color: var(--pub-text-muted) !important;
	margin: 0 !important;
}

/* Lookup Form Card */
.portal-lookup-card {
	background: #FCF6EC !important;
	border: 1.5px solid var(--pub-border) !important;
	border-radius: 20px !important;
	padding: 30px 40px !important;
	box-shadow: var(--pub-shadow) !important;
	margin-bottom: 30px;
}

.lookup-card-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 25px;
}

.lookup-icon-wrap {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(194, 159, 104, 0.1);
	border: 1px solid rgba(194, 159, 104, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pub-secondary);
	font-size: 22px;
	flex-shrink: 0;
}

.lookup-title-wrap h3 {
	margin: 0 0 4px 0 !important;
	font-family: var(--pub-font-header) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
	letter-spacing: 0.5px !important;
}

.lookup-title-wrap p {
	margin: 0 !important;
	font-size: 13.5px !important;
	color: var(--pub-text-muted) !important;
}

.lookup-inline-form {
	margin-bottom: 20px;
}

.lookup-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 20px;
	align-items: flex-end;
}

.lookup-form-row .salon-form-group {
	margin: 0 !important;
}

.lookup-form-row .salon-form-group label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--pub-primary) !important;
	margin-bottom: 6px !important;
	display: block !important;
}

.portal-input-icon {
	position: relative !important;
	width: 100% !important;
}

.portal-input-icon i {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--pub-secondary) !important;
	font-size: 15px !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

.portal-input-icon input {
	padding-left: 42px !important;
}

.lookup-btn {
	background-color: var(--pub-primary) !important;
	color: white !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 14px 28px !important;
	border-radius: 8px !important;
	height: 46px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer !important;
	border: none !important;
	transition: all 0.2s ease !important;
}

.lookup-btn:hover {
	background-color: var(--pub-primary-hover) !important;
	transform: translateY(-1px) !important;
}

.lookup-card-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--pub-text-muted);
	border-top: 1px dashed var(--pub-border);
	padding-top: 15px;
}

.lookup-card-footer i {
	color: var(--pub-secondary);
}

/* Two Column Details View */
.portal-details-two-columns {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 30px;
	align-items: start;
	margin-top: 40px;
}

/* Left Card: Appointment Details */
.portal-left-details-card {
	background: white !important;
	border: 1.5px solid var(--pub-border) !important;
	border-radius: 20px !important;
	padding: 30px !important;
	box-shadow: 0 10px 30px rgba(13, 59, 48, 0.03) !important;
}

.details-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1.5px solid #F3EDE2;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.details-card-header h3 {
	margin: 0 !important;
	font-family: var(--pub-font-header) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--pub-primary) !important;
	letter-spacing: 0.5px !important;
}

.status-badge-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.status-badge-wrap .status-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--pub-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.portal-status-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.portal-status-badge.badge-pending {
	background-color: #FEF3C7 !important;
	color: #D97706 !important;
}

.portal-status-badge.badge-confirmed {
	background-color: #0D3B30 !important;
	color: white !important;
}

.portal-status-badge.badge-completed {
	background-color: #E0F2FE !important;
	color: #0284C7 !important;
}

.portal-status-badge.badge-cancelled,
.portal-status-badge.badge-declined {
	background-color: #FEE2E2 !important;
	color: #DC2626 !important;
}

.portal-status-badge.badge-no-show {
	background-color: #F3F4F6 !important;
	color: #4B5563 !important;
}

.details-list-rows {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 25px;
}

.detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13.5px;
}

.detail-row .lbl {
	color: var(--pub-text-muted);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 10px;
}

.detail-row .lbl i {
	color: var(--pub-secondary);
	width: 16px;
	text-align: center;
}

.detail-row .val {
	font-weight: 600;
	color: var(--pub-primary);
}

/* Services section inside left card */
.details-services-section {
	border-top: 1.5px solid #F3EDE2;
	padding-top: 20px;
	margin-bottom: 25px;
}

.details-services-section .section-title {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--pub-text);
	letter-spacing: 1px;
	margin-bottom: 12px;
}

.portal-services-list-table {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.service-item-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 20px;
	font-size: 13.5px;
	padding-bottom: 8px;
	border-bottom: 1px dashed #EDE5D9;
}

.service-item-row:last-child {
	border-bottom: none;
}

.service-item-row .name {
	font-weight: 500;
	color: var(--pub-text);
}

.service-item-row .duration {
	color: var(--pub-text-muted);
	font-size: 13px;
}

.service-item-row .price {
	font-weight: 600;
	color: var(--pub-primary);
}

/* Totals section inside left card */
.details-totals-section {
	border-top: 1.5px solid #F3EDE2;
	padding-top: 20px;
}

.total-amount-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.total-amount-row .lbl {
	font-weight: 700;
	font-size: 13px;
	color: var(--pub-primary);
	letter-spacing: 0.5px;
}

.total-amount-row .val {
	font-weight: 700;
	font-size: 18px;
	color: var(--pub-primary);
}

.deposit-status-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.deposit-status-row .lbl {
	font-weight: 700;
	font-size: 12px;
	color: var(--pub-text-muted);
	letter-spacing: 0.5px;
}

.deposit-status-row .val-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.deposit-status-row .val-badge.paid {
	background-color: #0D3B30 !important;
	color: white !important;
}

.deposit-status-row .val-badge.unpaid {
	background-color: #fee2e2 !important;
	color: #dc2626 !important;
}

/* Right Column Action Panels */
.portal-right-actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.portal-action-accordion {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(13, 59, 48, 0.02);
	border: 1px solid var(--pub-border);
}

.portal-action-accordion .accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	transition: all 0.2s ease;
}

.portal-action-accordion .accordion-header .hdr-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.portal-action-accordion .accordion-header .hdr-left i {
	font-size: 16px;
}

.portal-action-accordion .accordion-header.bg-green {
	background-color: var(--pub-primary) !important;
	color: white !important;
}

.portal-action-accordion .accordion-header.bg-green:hover {
	background-color: var(--pub-primary-hover) !important;
}

.portal-action-accordion .accordion-header.border-red {
	background-color: white !important;
	border-bottom: 1px solid #fee2e2 !important;
}

.portal-action-accordion .accordion-header.text-red {
	color: #dc2626 !important;
}

.portal-action-accordion .accordion-header.border-red:hover {
	background-color: #fffafb !important;
}

.portal-action-accordion .accordion-body {
	background-color: white !important;
	padding: 24px;
	border-top: 1px solid #F3EDE2;
}

.reschedule-layout-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 20px;
	margin-bottom: 20px;
}

.reschedule-layout-grid .small-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--pub-primary);
	letter-spacing: 0.5px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.portal-calendar {
	max-width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.portal-calendar .calendar-header {
	padding: 10px 0 !important;
	background: transparent !important;
	border-bottom: 1px solid #EDE5D9 !important;
}

.portal-calendar-month-year {
	font-family: var(--pub-font-header) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	color: var(--pub-primary) !important;
}

.portal-calendar .calendar-weekdays {
	font-size: 11px !important;
	color: var(--pub-text-muted) !important;
	margin-top: 8px !important;
}

.portal-calendar .calendar-days-grid {
	gap: 4px !important;
	margin-top: 6px !important;
}

.portal-calendar .cal-day {
	height: 28px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
}

.portal-time-slots {
	display: grid;
	grid-template-columns: 1fr !important;
	gap: 8px;
	max-height: 230px;
	overflow-y: auto;
	padding-right: 5px;
}

.portal-time-slots-wrapper {
	position: relative;
}

.portal-time-slot-pill {
	border: 1.5px solid #E2D7C5 !important;
	border-radius: 8px !important;
	padding: 10px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-align: center !important;
	cursor: pointer !important;
	background-color: white !important;
	transition: all 0.15s ease !important;
	color: var(--pub-primary) !important;
}

.portal-time-slot-pill:hover {
	border-color: var(--pub-secondary) !important;
	color: var(--pub-secondary) !important;
}

.portal-time-slot-pill.active {
	background-color: var(--pub-primary) !important;
	border-color: var(--pub-primary) !important;
	color: white !important;
}

.btn-confirm-reschedule {
	width: 100% !important;
	background-color: var(--pub-secondary) !important;
	color: white !important;
	font-weight: 700 !important;
	padding: 12px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	letter-spacing: 0.5px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	border: none !important;
	cursor: pointer !important;
}

.btn-confirm-reschedule:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

.cancel-warning-text {
	font-size: 13px;
	color: var(--pub-text-muted);
	line-height: 1.5;
	margin-bottom: 20px;
}

.btn-danger-cancel {
	width: 100% !important;
	background-color: white !important;
	border: 1.5px solid #fee2e2 !important;
	color: #dc2626 !important;
	font-weight: 700 !important;
	padding: 12px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.btn-danger-cancel:hover {
	background-color: #fee2e2 !important;
}

.btn-danger-cancel:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.back-lookup-btn {
	width: 100% !important;
	background-color: transparent !important;
	border: 1.5px solid var(--pub-border) !important;
	color: var(--pub-text) !important;
	font-weight: 600 !important;
	padding: 12px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	cursor: pointer !important;
	margin-top: 15px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	transition: all 0.2s ease !important;
}

.back-lookup-btn:hover {
	background-color: #FCF6EC !important;
	border-color: var(--pub-secondary) !important;
	color: var(--pub-secondary) !important;
}

.portal-readonly-notice {
	display: flex;
	gap: 12px;
	background-color: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 16px;
	border-radius: 8px;
	font-size: 13.5px;
	color: #475569;
	align-items: center;
	line-height: 1.4;
}

.portal-readonly-notice i {
	font-size: 20px;
	color: var(--pub-secondary);
}

.slots-loading-text, .slots-empty-text, .slots-error-text {
	padding: 20px 0;
	font-size: 12.5px;
	font-weight: 500;
	text-align: center;
	color: var(--pub-text-muted);
}

.slots-error-text {
	color: #dc2626;
}

@media (max-width: 900px) {
	.portal-details-two-columns {
		grid-template-columns: 1fr;
		gap: 25px;
	}
	
	.reschedule-layout-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.portal-time-slots {
		grid-template-columns: repeat(4, 1fr) !important;
		max-height: 160px;
	}
}

@media (max-width: 600px) {
	.portal-lookup-card {
		padding: 24px 20px !important;
	}
	
	.lookup-card-header {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
	
	.lookup-form-row {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.lookup-btn {
		width: 100% !important;
		justify-content: center;
	}
	
	.portal-time-slots {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Category filter buttons bar */
.services-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	border-bottom: 1.5px solid #E2D7C5 !important;
	padding-bottom: 15px;
}

.category-filter-btn {
	background-color: white !important;
	border: 1px solid var(--pub-border) !important;
	border-radius: 20px !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--pub-text) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	font-family: var(--pub-font-body) !important;
}

.category-filter-btn:hover {
	border-color: var(--pub-secondary) !important;
	color: var(--pub-secondary) !important;
	background-color: rgba(194, 159, 104, 0.05) !important;
}

.category-filter-btn.active {
	background-color: var(--pub-secondary) !important;
	border-color: var(--pub-secondary) !important;
	color: white !important;
	box-shadow: 0 4px 10px rgba(194, 159, 104, 0.25) !important;
}

/* Mobile-first fixes for the public booking flow */
@media (max-width: 782px) {
	html,
	body {
		overflow-x: hidden;
	}

	.salon-booking-flow-wrapper {
		margin: 16px auto !important;
		max-width: 100% !important;
		padding: 0 14px !important;
		width: 100% !important;
	}

	.salon-booking-flow-card {
		border-radius: 26px !important;
		overflow: hidden !important;
		width: 100% !important;
	}

	.flow-header {
		padding: 26px 20px 22px !important;
	}

	.flow-header h2 {
		font-size: clamp(26px, 8vw, 38px) !important;
		line-height: 1.04 !important;
		margin-bottom: 12px !important;
		overflow-wrap: anywhere;
	}

	.flow-header p {
		font-size: 14px !important;
		line-height: 1.45 !important;
		margin-bottom: 24px !important;
	}

	.flow-steps-indicator {
		align-items: center !important;
		display: grid !important;
		gap: 8px !important;
		grid-template-columns: 34px 1fr 34px 1fr 34px 1fr 34px 1fr 34px !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.step-indicator {
		gap: 0 !important;
		width: 34px !important;
	}

	.step-number {
		font-size: 13px !important;
		height: 34px !important;
		width: 34px !important;
	}

	.step-label {
		display: none !important;
	}

	.step-line {
		margin-top: 0 !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	#salon-public-booking-wizard,
	#booking-success-panel {
		padding: 24px !important;
	}

	.step-subtitle {
		font-size: 12px !important;
		letter-spacing: 0.7px !important;
	}

	.step-title,
	.wizard-step-panel h3 {
		font-size: clamp(22px, 6.4vw, 30px) !important;
		line-height: 1.12 !important;
		margin-bottom: 22px !important;
		overflow-wrap: anywhere;
	}

	.branch-cards-grid,
	.services-selection-grid,
	.step-3-columns-grid,
	.step-4-grid,
	.step-5-columns-grid,
	.portal-details-two-columns,
	.lookup-form-row {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 16px !important;
		width: 100% !important;
	}

	.branch-card-body,
	.service-card-inner,
	.staff-card-inner,
	.booking-summary-box,
	.deposit-amount-card,
	.bank-transfer-card,
	.scan-to-pay-card,
	.portal-lookup-card,
	.portal-left-details-card {
		border-radius: 14px !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.branch-card-body {
		align-items: flex-start !important;
		gap: 13px !important;
		padding: 18px 16px !important;
	}

	.branch-icon,
	.service-icon-circle {
		border-radius: 12px !important;
		flex: 0 0 44px !important;
		height: 44px !important;
		width: 44px !important;
	}

	.branch-details {
		min-width: 0 !important;
		width: 100% !important;
	}

	.branch-details h4 {
		font-size: 16px !important;
		line-height: 1.2 !important;
		margin-bottom: 6px !important;
		overflow-wrap: anywhere;
	}

	.branch-details p.address {
		font-size: 12.5px !important;
		line-height: 1.35 !important;
	}

	.branch-card-links {
		align-items: flex-start !important;
		flex-wrap: wrap !important;
		gap: 6px 8px !important;
	}

	.branch-card-link {
		font-size: 12px !important;
		line-height: 1.2 !important;
	}

	.service-card-inner {
		align-items: center !important;
		display: grid !important;
		gap: 6px 12px !important;
		grid-template-columns: 42px minmax(0, 1fr) auto !important;
		grid-template-rows: auto auto !important;
		padding: 14px !important;
	}

	.service-main-info,
	.service-price,
	.service-duration,
	.service-select-wrapper {
		min-width: 0 !important;
		text-align: left !important;
	}

	.service-main-info h4 {
		font-size: 16px !important;
		line-height: 1.22 !important;
		margin: 0 !important;
		overflow-wrap: anywhere;
	}

	.service-main-info p.desc {
		display: none !important;
	}

	.service-icon-circle {
		grid-column: 1 !important;
		grid-row: 1 / 3 !important;
	}

	.service-main-info {
		grid-column: 2 / 4 !important;
		grid-row: 1 !important;
	}

	.service-price {
		font-size: 15px !important;
		grid-column: 2 !important;
		grid-row: 2 !important;
		justify-self: start !important;
		line-height: 1.2 !important;
		min-width: 0 !important;
	}

	.service-duration {
		font-size: 12.5px !important;
		grid-column: 2 !important;
		grid-row: 2 !important;
		justify-self: start !important;
		line-height: 1.2 !important;
		margin-left: 64px !important;
		min-width: 0 !important;
	}

	.service-select-wrapper {
		grid-column: 3 !important;
		grid-row: 2 !important;
		justify-content: flex-end !important;
		min-width: 0 !important;
	}

	.btn-select-text {
		font-size: 12px !important;
		padding: 6px 16px !important;
	}

	.selected-icon-badge {
		height: 28px !important;
		width: 28px !important;
	}

	.services-selection-grid,
	.staff-radios-grid,
	.time-slots-grid,
	.portal-time-slots {
		max-height: none !important;
		overflow: visible !important;
		padding-right: 0 !important;
	}

	.services-category-filter {
		flex-wrap: nowrap !important;
		gap: 8px !important;
		margin-left: -2px !important;
		margin-right: -2px !important;
		overflow-x: auto !important;
		overscroll-behavior-x: contain;
		padding-left: 2px !important;
		padding-right: 2px !important;
		padding-bottom: 10px !important;
		scrollbar-width: none;
	}

	.services-category-filter::-webkit-scrollbar {
		display: none;
	}

	.category-filter-btn {
		flex: 0 0 auto !important;
		font-size: 12.5px !important;
		padding: 8px 14px !important;
		white-space: nowrap !important;
	}

	.services-selection-grid {
		max-height: 52vh !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		padding: 4px 4px 14px !important;
		scrollbar-width: thin;
	}

	.services-selection-grid::-webkit-scrollbar {
		width: 5px;
	}

	.services-selection-grid::-webkit-scrollbar-thumb {
		background: rgba(194, 159, 104, 0.45);
		border-radius: 999px;
	}

	.custom-calendar-container {
		padding: 12px !important;
	}

	.date-column {
		order: 1 !important;
	}

	.time-column {
		order: 2 !important;
	}

	.staff-column {
		order: 3 !important;
	}

	.calendar-days-grid {
		gap: 4px !important;
	}

	.cal-day {
		aspect-ratio: 1 !important;
		height: auto !important;
		min-height: 34px !important;
		width: 100% !important;
	}

	.time-slots-grid {
		gap: 10px !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		max-height: 34vh !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		padding: 4px 4px 12px !important;
		scrollbar-width: thin;
	}

	.time-slots-grid::-webkit-scrollbar {
		width: 5px;
	}

	.time-slots-grid::-webkit-scrollbar-thumb {
		background: rgba(194, 159, 104, 0.45);
		border-radius: 999px;
	}

	.time-slot-pill {
		font-size: 13px !important;
		min-height: 38px !important;
		padding: 8px 5px !important;
	}

	.step-3-section-title,
	.step-4-section-title {
		font-size: 12px !important;
		line-height: 1.2 !important;
	}

	.booking-summary-box {
		padding: 18px !important;
	}

	.scan-to-pay-card {
		order: 1 !important;
	}

	.deposit-amount-card {
		order: 2 !important;
	}

	.bank-transfer-card {
		order: 3 !important;
	}

	.scan-to-pay-card .step-5-section-title {
		font-size: 15px !important;
		margin-bottom: 14px !important;
	}

	.qr-code-wrapper {
		height: min(72vw, 240px) !important;
		margin-bottom: 14px !important;
		padding: 14px !important;
		width: min(72vw, 240px) !important;
	}

	.scan-to-pay-card .qr-code-footer {
		font-size: 12px !important;
		max-width: 260px !important;
	}

	.summary-item {
		gap: 12px !important;
	}

	.summary-item .val {
		max-width: 55% !important;
		overflow-wrap: anywhere !important;
	}

	.wizard-buttons {
		align-items: stretch !important;
		gap: 12px !important;
		padding-top: 20px !important;
	}

	.wizard-buttons .salon-btn {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		padding: 11px 14px !important;
		white-space: normal !important;
	}

	.success-details-receipt,
	.bank-details-box {
		padding: 16px !important;
	}

	.success-details-receipt p {
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 4px !important;
	}

	.booking-success-message .btn-reset-booking-flow {
		margin-top: 24px !important;
		min-width: 190px !important;
	}
}

@media (max-width: 480px) {
	.salon-booking-flow-wrapper {
		margin: 10px auto !important;
		padding: 0 10px !important;
	}

	.salon-booking-flow-card {
		border-radius: 20px !important;
	}

	.flow-header {
		padding: 22px 16px 18px !important;
	}

	#salon-public-booking-wizard,
	#booking-success-panel {
		padding: 20px 14px !important;
	}

	.flow-steps-indicator {
		grid-template-columns: 30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px !important;
		gap: 6px !important;
	}

	.step-indicator,
	.step-number {
		height: 30px !important;
		width: 30px !important;
	}

	.step-number {
		font-size: 12px !important;
	}

	.branch-card-body,
	.service-card-inner,
	.staff-card-inner {
		padding: 14px !important;
	}

	.branch-icon,
	.service-icon-circle {
		flex-basis: 40px !important;
		height: 40px !important;
		width: 40px !important;
	}

	.service-card-inner {
		grid-template-columns: 38px minmax(0, 1fr) auto !important;
		gap: 6px 10px !important;
		padding: 12px !important;
	}

	.service-main-info {
		grid-column: 2 / 4 !important;
	}

	.service-main-info h4 {
		font-size: 15px !important;
	}

	.service-duration {
		margin-left: 56px !important;
	}

	.btn-select-text {
		padding: 5px 13px !important;
	}

	.services-selection-grid {
		max-height: 48vh !important;
	}

	.qr-code-wrapper {
		height: min(78vw, 230px) !important;
		width: min(78vw, 230px) !important;
	}

	.time-slots-grid,
	.portal-time-slots {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	}

	.time-slots-grid {
		max-height: 32vh !important;
	}

	.time-slot-pill {
		min-height: 36px !important;
	}

	.wizard-buttons {
		flex-direction: column !important;
	}

	.wizard-buttons > div:empty {
		display: none !important;
	}

	.wizard-buttons .salon-btn {
		width: 100% !important;
	}
}

/* Override WordPress Media Library z-index to display on top of CRM portal */
.media-modal-backdrop {
	z-index: 1000000 !important;
}

.media-modal {
	z-index: 1000001 !important;
}

.media-modal .media-router .media-menu-item {
	background: #ffffff !important;
	border: 1px solid rgba(13, 59, 48, 0.18) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	color: var(--pub-primary) !important;
	line-height: 1.3 !important;
	margin: 0 6px 0 0 !important;
	padding: 7px 13px !important;
}

.media-modal .media-router .media-menu-item:hover,
.media-modal .media-router .media-menu-item:focus {
	background: var(--pub-primary-light) !important;
	border-color: var(--pub-secondary) !important;
	color: var(--pub-primary) !important;
	box-shadow: none !important;
	outline: none !important;
}

.media-modal .media-router .media-menu-item.active,
.media-modal .media-router .media-menu-item.active:hover,
.media-modal .media-router .media-menu-item.active:focus {
	background: var(--pub-primary) !important;
	border-color: var(--pub-primary) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

.media-modal .media-modal-close {
	background: #ffffff !important;
	border: 1px solid rgba(13, 59, 48, 0.25) !important;
	border-radius: 18px !important;
	box-shadow: none !important;
	color: var(--pub-primary) !important;
}

.media-modal .media-modal-close:hover,
.media-modal .media-modal-close:focus {
	background: var(--pub-primary-light) !important;
	border-color: var(--pub-primary) !important;
	box-shadow: 0 0 0 3px rgba(13, 59, 48, 0.12) !important;
	outline: none !important;
}

.media-modal .media-modal-close .media-modal-icon:before {
	color: var(--pub-primary) !important;
}

.media-modal .button-primary {
	background: var(--pub-primary) !important;
	border-color: var(--pub-primary) !important;
	box-shadow: none !important;
	color: #ffffff !important;
	text-shadow: none !important;
}

.media-modal .button-primary:hover,
.media-modal .button-primary:focus {
	background: var(--pub-primary-hover) !important;
	border-color: var(--pub-primary-hover) !important;
	box-shadow: 0 0 0 3px rgba(13, 59, 48, 0.12) !important;
	color: #ffffff !important;
}