:root {
	--apl-sb-accent: #3730d6;
	--apl-sb-accent-dark: #2a24ad;
	--apl-sb-safe-bottom: env(safe-area-inset-bottom, 0px);
	--apl-sb-safe-top: env(safe-area-inset-top, 0px);
}

.apl-sb-svg-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.apl-sb-step-icon { display: inline-flex; align-items: center; color: var(--apl-sb-accent); }
.apl-sb-category-card .apl-sb-icon { color: var(--apl-sb-accent); }

.apl-sb-wizard {
	display: flex;
	gap: 24px;
	max-width: 1100px;
	margin: 24px auto;
	align-items: flex-start;
	font-size: 15px;
	color: #1f2430;
	-webkit-tap-highlight-color: transparent;
}

.apl-sb-mobile-bar,
.apl-sb-mobile-progress-track {
	display: none;
}

/* Native-app step transition, applied on every breakpoint */
.apl-sb-step { display: none; }
.apl-sb-step.apl-sb-step-active {
	display: block;
	animation: aplSbStepIn 0.32s cubic-bezier(.22,.68,0,1);
}

@keyframes aplSbStepIn {
	from { opacity: 0; transform: translateX(16px); }
	to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.apl-sb-step.apl-sb-step-active { animation: none; }
}

.apl-sb-main {
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border: 1px solid #e6e6ef;
	border-radius: 10px;
	padding: 24px;
}

.apl-sb-sidebar {
	flex: 0 0 300px;
	background: #fff;
	border: 1px solid #e6e6ef;
	border-radius: 10px;
	padding: 20px;
	position: sticky;
	top: 24px;
}

.apl-sb-sidebar h3 {
	margin-top: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
}

.apl-sb-progress {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.apl-sb-progress li {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	opacity: 0.55;
}

.apl-sb-progress li.apl-sb-active,
.apl-sb-progress li.apl-sb-done {
	opacity: 1;
}

.apl-sb-progress-num {
	flex: 0 0 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

.apl-sb-progress li.apl-sb-active .apl-sb-progress-num {
	border-color: #3730d6;
	color: #3730d6;
}

.apl-sb-progress li.apl-sb-done .apl-sb-progress-num {
	background: #1a1a2e;
	border-color: #1a1a2e;
	color: #fff;
}

.apl-sb-progress p {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: #777;
}

.apl-sb-step h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 19px;
	margin-top: 0;
}

.apl-sb-required { color: #d63638; }

.apl-sb-subtext { color: #666; margin-top: -6px; }

.apl-sb-pincode-row { display: flex; gap: 10px; max-width: 360px; }

.apl-sb-pincode-row input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
}

.apl-sb-btn {
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 14px;
	cursor: pointer;
	font-weight: 600;
}

.apl-sb-btn-primary { background: #3730d6; color: #fff; }
.apl-sb-btn-primary:hover { background: #2a24ad; }
.apl-sb-btn-primary:disabled { background: #b6b3ee; cursor: not-allowed; }

.apl-sb-btn-secondary { background: #f1f1f6; color: #1f2430; }

.apl-sb-message { margin-top: 10px; font-size: 14px; }
.apl-sb-message.apl-sb-error { color: #d63638; }
.apl-sb-message.apl-sb-success { color: #1a7e3c; }

.apl-sb-mode-tabs {
	display: inline-flex;
	background: #f1f1f6;
	border-radius: 10px;
	padding: 4px;
	margin-top: 22px;
	gap: 4px;
}

.apl-sb-mode-tab {
	border: none;
	background: transparent;
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #555;
	cursor: pointer;
}

.apl-sb-mode-tab.apl-sb-mode-tab-active {
	background: #fff;
	color: var(--apl-sb-accent);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.apl-sb-amc-badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }

.apl-sb-amc-badge {
	display: inline-block;
	background: rgba(55,48,214,0.08);
	color: var(--apl-sb-accent);
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 20px;
}

.apl-sb-category-grid,
.apl-sb-package-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 14px;
}

/* Category tiles are compact squares, not stretched to fill the row like the
   description-heavy package cards below — capped width + justify-content
   keeps them square-sized instead of growing to divide up the leftover row. */
.apl-sb-category-grid {
	grid-template-columns: repeat(auto-fill, minmax(120px, 150px));
	justify-content: start;
}

.apl-sb-category-card {
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid #e2e2ec;
	border-radius: 10px;
	padding: 12px;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.apl-sb-category-card .apl-sb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin: 0 auto 8px;
	
	font-size: 22px;
	font-weight: 800;
	overflow: hidden;
}

.apl-sb-category-card img.apl-sb-icon {
	object-fit: contain;
	padding: 6px;
	box-sizing: border-box;
}

.apl-sb-category-card.apl-sb-selected,
.apl-sb-category-card:hover {
	border-color: #3730d6;
	box-shadow: 0 0 0 1px #3730d6 inset;
}

/* Two visually distinct cards within step 1: pincode entry, then featured camps. */
.apl-sb-inner-card {
	border: 1px solid #e2e2ec;
	border-radius: 10px;
	padding: 20px;
}

.apl-sb-pincode-card { margin-bottom: 20px; }

.apl-sb-society-cards { margin-bottom: 0; }
.apl-sb-society-heading { font-size: 15px; margin: 0 0 10px; }

.apl-sb-society-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.apl-sb-society-card {
	border: 1px solid #e2e2ec;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.apl-sb-society-img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	display: block;
}

.apl-sb-society-body { padding: 12px 14px; }
.apl-sb-society-body h4 { margin: 6px 0 4px; font-size: 14.5px; }
.apl-sb-society-body p { margin: 0 0 6px; font-size: 12.5px; color: #666; }

.apl-sb-society-meta { color: #8a8a99 !important; font-size: 11.5px !important; }

.apl-sb-society-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.apl-sb-society-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
	background: #eef;
	color: #3730d6;
}

.apl-sb-society-badge-live { background: #e6f7e6; color: #1a7e3c; }

.apl-sb-society-pincode {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
	background: #fff4e0;
	color: #92600a;
}

.apl-sb-society-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.apl-sb-society-book-btn { width: 100%; padding: 8px 0; font-size: 13px; }

.apl-sb-society-cal-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #3730d6;
	text-decoration: none;
	padding: 6px 0;
	border: 1px solid #e2e2ec;
	border-radius: 8px;
}
.apl-sb-society-cal-link:hover { background: #f7f7fb; }

.apl-sb-package-card {
	border: 1px solid #e2e2ec;
	border-radius: 10px;
	padding: 16px;
	cursor: pointer;
	position: relative;
}

.apl-sb-package-card.apl-sb-selected {
	border-color: #3730d6;
	box-shadow: 0 0 0 1px #3730d6 inset;
}

.apl-sb-package-card .apl-sb-package-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 700;
	margin-bottom: 8px;
	padding-right: 34px; /* keep clear of the absolutely-positioned .apl-sb-check circle (right:12px, width:20px) */
}

.apl-sb-package-card .apl-sb-price { color: #3730d6; font-weight: 700; white-space: nowrap; }

.apl-sb-package-card ul {
	margin: 0;
	padding-left: 18px;
	font-size: 13.5px;
	color: #444;
}

.apl-sb-package-card .apl-sb-check {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	color: #fff;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.apl-sb-package-card.apl-sb-selected .apl-sb-check { background: #3730d6; }

.apl-sb-date-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
}

.apl-sb-date-chip {
	flex: 0 0 auto;
	min-width: 78px;
	border: 1px solid #e2e2ec;
	border-radius: 8px;
	padding: 10px 12px;
	text-align: center;
	cursor: pointer;
}

.apl-sb-date-chip.apl-sb-selected { background: #3730d6; color: #fff; border-color: #3730d6; }
.apl-sb-date-chip .apl-sb-date-num { font-size: 20px; font-weight: 700; display: block; }
.apl-sb-date-chip .apl-sb-slot-dot { font-size: 11px; margin-top: 4px; display: block; }
.apl-sb-date-chip.apl-sb-full { opacity: 0.4; pointer-events: none; }

.apl-sb-time-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.apl-sb-time-chip {
	border: 1px solid #e2e2ec;
	border-radius: 8px;
	padding: 10px 16px;
	cursor: pointer;
	text-align: center;
	min-width: 100px;
}

.apl-sb-time-chip.apl-sb-selected { background: #3730d6; color: #fff; border-color: #3730d6; }
.apl-sb-time-chip.apl-sb-full { opacity: 0.45; pointer-events: none; }
.apl-sb-time-chip small { display: block; font-size: 11px; margin-top: 3px; }

.apl-sb-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.apl-sb-field-grid label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 5px; }
.apl-sb-field-grid label.apl-sb-full { grid-column: 1 / -1; }
.apl-sb-field-grid input {
	padding: 9px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-weight: 400;
	font-size: 14px;
}

.apl-sb-field-grid input[readonly] {
	background: #f4f4f8;
	color: #666;
	cursor: not-allowed;
}

.apl-sb-review-card { border: 1px solid #e2e2ec; border-radius: 10px; padding: 18px; margin-top: 12px; }
.apl-sb-review-row { display: flex; justify-content: space-between; padding: 6px 0; }
.apl-sb-review-balance { font-size: 12.5px; color: #666; }

.apl-sb-confirmed { text-align: center; padding: 20px 0 8px; }
.apl-sb-confirmed h2 { margin: 4px 0 6px; }
.apl-sb-confirmed .apl-sb-review-card { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; }
.apl-sb-confirmed .apl-sb-btn { margin-top: 22px; }

.apl-sb-confirmed-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: #e6f7e6;
	color: #1a7e3c;
	display: flex;
	align-items: center;
	justify-content: center;
}

.apl-sb-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 26px;
	border-top: 1px solid #eee;
	padding-top: 16px;
}

.apl-sb-nav-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.apl-sb-total { font-weight: 700; }

@media (max-width: 782px) {
	/* Belt-and-braces against horizontal overflow: mobile Chrome/Safari will
	   actually grow the whole layout viewport to fit an unclipped overflowing
	   element rather than just showing a scrollbar — once that happens the
	   inflated width sticks for the rest of the page's life, so every step
	   after the offending one renders too wide too (exactly the "package and
	   slot screens aren't mobile friendly" symptom). Clipping at the root
	   means a stray wide element degrades gracefully instead of blowing up
	   the whole layout. */
	html, body { overflow-x: hidden; max-width: 100%; }
	body { overscroll-behavior-y: contain; }

	/* Full-screen native-app takeover: this stylesheet only loads on the
	   page carrying the [apl_service_booking] shortcode, so it's safe to
	   hide the theme's own header/breadcrumb-title/footer here — without
	   this, the wizard's fixed app bar below still had to sit under ~400px
	   of site chrome (logo header + breadcrumb + "Book a Service" H1)
	   before any usable content appeared. */
	#site-header,
	#page-header,
	#site-footer { display: none !important; }

	#site-content,
	#site-content .container-xxl,
	#site-content article { margin: 0 !important; padding: 0 !important; max-width: none !important; }

	.apl-sb-wizard {
		flex-direction: column;
		margin: 0;
		max-width: 100%;
		overflow-x: hidden;
		gap: 0;
		padding-top: calc(52px + var(--apl-sb-safe-top) + 3px);
	}

	.apl-sb-main { max-width: 100%; overflow-x: hidden; box-sizing: border-box; }

	/* Sidebar stepper becomes the compact top app bar instead */
	.apl-sb-sidebar { display: none; }

	.apl-sb-mobile-bar {
		display: flex;
		align-items: center;
		gap: 10px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 52px;
		padding: var(--apl-sb-safe-top) 8px 0;
		background: rgba(255,255,255,0.92);
		backdrop-filter: saturate(180%) blur(12px);
		-webkit-backdrop-filter: saturate(180%) blur(12px);
		border-bottom: 1px solid #eee;
		z-index: 50;
	}

	.apl-sb-mobile-back {
		flex: 0 0 auto;
		width: 36px;
		height: 36px;
		border: none;
		background: transparent;
		color: var(--apl-sb-accent);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.apl-sb-mobile-back:active { background: rgba(55,48,214,0.12); }

	.apl-sb-mobile-title-wrap {
		flex: 1 1 auto;
		text-align: center;
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.apl-sb-mobile-title { font-size: 15px; font-weight: 700; }
	.apl-sb-mobile-count { font-size: 11px; color: #888; }
	.apl-sb-mobile-bar-spacer { flex: 0 0 36px; }

	.apl-sb-mobile-progress-track {
		display: block;
		position: fixed;
		top: calc(52px + var(--apl-sb-safe-top));
		left: 0;
		right: 0;
		height: 3px;
		background: #eee;
		z-index: 50;
	}

	.apl-sb-mobile-progress-fill {
		height: 100%;
		width: 20%;
		background: var(--apl-sb-accent);
		transition: width 0.25s ease;
	}

	.apl-sb-main {
		border: none;
		border-radius: 0;
		padding: 16px 16px calc(96px + var(--apl-sb-safe-bottom));
		flex: 1 1 auto;
	}

	/* Fixed native-style bottom action bar */
	.apl-sb-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-top: 1px solid #eee;
		margin-top: 0;
		padding: 10px 14px calc(10px + var(--apl-sb-safe-bottom));
		box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
		z-index: 40;
	}

	.apl-sb-nav-right { flex: 1 1 auto; }
	.apl-sb-nav-right .apl-sb-btn { flex: 1 1 auto; }
	.apl-sb-total { flex: 0 0 auto; }

	.apl-sb-btn {
		min-height: 48px;
		font-size: 15px;
		border-radius: 10px;
	}

	.apl-sb-mobile-back svg { pointer-events: none; }

	/* Bigger touch targets + single-column, list-style cards. Selectors are
	   ID-qualified (#apl-sb-wizard ...) so these unambiguously beat the
	   equal-specificity desktop auto-fill/minmax rules above regardless of
	   cascade order — those rules were intermittently winning here and
	   sizing columns up to their 150px desktop cap, overflowing a 3-column
	   mobile row well past the screen edge. */
	#apl-sb-wizard .apl-sb-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.apl-sb-category-card { padding: 14px 8px; min-width: 0; }

	#apl-sb-wizard .apl-sb-package-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.apl-sb-package-card { padding: 16px; }

	/* Featured camp cards: 2-per-row grid instead of a horizontal-scroll
	   strip — easier to scan at a glance on a phone than swiping sideways. */
	.apl-sb-society-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.apl-sb-society-img { height: 80px; }
	.apl-sb-society-body { padding: 10px; }
	.apl-sb-society-body h4 { font-size: 13px; }
	.apl-sb-society-body p { font-size: 11.5px; }
	.apl-sb-society-badge,
	.apl-sb-society-pincode { font-size: 9.5px; padding: 2px 6px; }
	.apl-sb-society-book-btn { font-size: 12px; padding: 7px 0; }
	.apl-sb-society-cal-link { font-size: 11px; padding: 5px 0; }

	.apl-sb-pincode-row { max-width: none; }
	.apl-sb-pincode-row input,
	.apl-sb-field-grid input,
	.apl-sb-address-form input {
		font-size: 16px; /* prevents iOS auto-zoom on focus */
		min-height: 46px;
	}

	.apl-sb-field-grid { grid-template-columns: 1fr; }

	.apl-sb-date-strip {
		scroll-snap-type: x proximity;
		margin: 0 -16px;
		padding: 4px 16px 10px;
	}

	.apl-sb-date-chip {
		scroll-snap-align: start;
		min-width: 68px;
		min-height: 76px;
	}

	.apl-sb-time-grid { gap: 10px; }
	.apl-sb-time-chip { flex: 1 1 calc(50% - 10px); min-height: 52px; }

	.apl-sb-sidebar { position: static; width: 100%; }
}

/* ---------- "How would you like to book?" modal (society camp cards) ---------- */

.apl-sb-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 17, 40, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100;
}

.apl-sb-modal {
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 28px;
	max-width: 400px;
	width: 100%;
	text-align: center;
}

.apl-sb-modal h3 { margin: 0 0 8px; font-size: 18px; }

.apl-sb-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #999;
}

.apl-sb-modal-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}