/* ============================================
   SKYLARC - BOOK A PICKUP
   Theme layer applied over Bootstrap 5.3 to match the
   Skylarc website design system (staging.skylarc.co.nz).
   Loaded after bootstrap.min.css.
   ============================================ */

:root {
	/* Brand colours */
	--color-primary: #ff6600;
	--color-primary-dark: #e55a00;
	--color-primary-soft: #fff3eb;
	--color-primary-soft-hover: #ffe8d4;
	--color-dark: #312a2f;
	--color-text-primary: #1f1a1d;
	--color-text-secondary: #605b5e;
	--color-text-muted: #6f6a6e;
	--color-surface-muted: #f9fafc;
	--color-border: #d8dae5;
	--color-border-input: #d9dce2;
	--color-bg-input: #fafafa;

	/* Typography */
	--font-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Radii */
	--radius-card: 24px;
	--radius-panel: 16px;
	--radius-input: 8px;
	--radius-pill: 9999px;

	/* Shadows */
	--shadow-card: 0 2px 8px rgba(17, 17, 17, 0.04);
	--shadow-panel: 0 14px 24px rgba(0, 0, 0, 0.1);
	--shadow-interactive: 0 8px 16px rgba(17, 17, 17, 0.12);

	/* Buttons */
	--btn-lg-min-h: 52px;
	--btn-md-h: 44px;

	/* Bootstrap variable overrides */
	--bs-primary: #ff6600;
	--bs-primary-rgb: 255, 102, 0;
	--bs-link-color: #ff6600;
	--bs-link-color-rgb: 255, 102, 0;
	--bs-link-hover-color: #e55a00;
	--bs-link-hover-color-rgb: 229, 90, 0;
	--bs-body-color: #1f1a1d;
	--bs-body-color-rgb: 31, 26, 29;
	--bs-body-font-family: var(--font-primary);
	--bs-border-color: #d8dae5;
	--bs-border-radius: 8px;
	--bs-border-radius-sm: 6px;
	--bs-border-radius-lg: 16px;
	--bs-secondary-color: #605b5e;
	--bs-emphasis-color: #1f1a1d;
}

/* ============================================
   BASE
   ============================================ */

body {
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 24px;
	color: var(--color-text-primary);
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body > .container {
	flex: 1 0 auto;
	max-width: 1280px;
	padding-bottom: 64px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	color: var(--color-text-primary);
	letter-spacing: -0.02em;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3, h4, h5 { font-weight: 600; }

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.text-muted {
	color: var(--color-text-muted) !important;
}

/* ============================================
   SITE HEADER (dark band + navbar pill + page title)
   ============================================ */

.sky-header {
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
	background-image: linear-gradient(180deg, #3a3238 0%, #2c2529 100%);
	padding: 16px 24px 56px 24px;
	margin-bottom: 48px;

	/* Creates a stacking context so the negative z-index layers below sit above the band's own
	   background rather than disappearing behind the page. */
	isolation: isolate;
}

.sky-header__images {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/* Two layers only — the script swaps the next photo onto whichever one is hidden and trades their
   opacity.

   These are 320x180 thumbnails rather than the full size photos, which are far too tall to crop into
   a shallow banner and far too heavy to cycle. Blurring and over-scaling turns the small source into
   a deliberate soft backdrop instead of a stretched one. The negative inset hides the soft edge the
   blur leaves behind. */
.sky-header__image {
	position: absolute;
	inset: -20px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(6px) saturate(1.15);
	transform: scale(1.05);
	opacity: 0;
	transition: opacity 1.4s ease;
}

.sky-header__image--active {
	opacity: 1;
}

/* Keeps the heading and navigation legible over whatever the photos happen to be. */
.sky-header__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(31, 26, 29, 0.62) 0%, rgba(31, 26, 29, 0.82) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.sky-header__image {
		transition: none;
	}
}

.sky-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 8px 8px 32px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(12px);
}

.sky-nav__logo img {
	display: block;
	height: 34px;
	width: auto;
}

.sky-nav__links {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sky-nav__links a {
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.14px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sky-nav__links a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.sky-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-md-h);
	padding: 0 28px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sky-nav__cta:hover {
	background: var(--color-primary-dark);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--shadow-interactive);
}

.sky-title {
	max-width: 1280px;
	margin: 48px auto 0 auto;
	text-align: center;
	color: #ffffff;
}

.sky-title h1 {
	color: #ffffff;
	font-size: 60px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 600;
	margin: 0;
}

.sky-title p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.18px;
	margin: 16px 0 0 0;
}

/* ============================================
   SITE FOOTER
   ============================================ */

.sky-footer {
	flex-shrink: 0;
	background: var(--color-dark);
	color: #ffffff;
	padding: 64px 24px 32px 24px;
	margin-top: 64px;
}

.sky-footer__container {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	justify-content: space-between;
}

.sky-footer__brand {
	max-width: 380px;
}

.sky-footer__brand img {
	height: 40px;
	width: auto;
	margin-bottom: 24px;
}

.sky-footer__brand p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 16px;
	line-height: 24px;
	margin: 0;
}

.sky-footer__column-title {
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	margin: 0 0 16px 0;
}

.sky-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sky-footer__list a,
.sky-footer__bottom a {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.14px;
	text-decoration: none;
}

.sky-footer__list a:hover,
.sky-footer__bottom a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.sky-footer__bottom {
	max-width: 1280px;
	margin: 48px auto 0 auto;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
}

.sky-footer__bottom p {
	color: rgba(255, 255, 255, 0.55);
	font-size: 14px;
	line-height: 20px;
	margin: 0;
}

.sky-footer__bottom-links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn,
.sky-footer .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-md-h);
	padding: 0 28px;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	border-radius: var(--radius-pill);
	border-width: 1px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-interactive);
	text-decoration: none;
}

.btn:focus-visible,
.btn:focus {
	box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.25);
	outline: none;
}

/* Primary — solid orange, the main action on a page. */
.btn-primary,
input.btn-primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
input.btn-primary:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: #ffffff;
}

/* Secondary — soft orange, supporting actions. */
.btn-secondary,
input.btn-secondary,
span.btn-secondary {
	background-color: var(--color-primary-soft);
	border-color: var(--color-primary-soft);
	color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
input.btn-secondary:hover,
span.btn-secondary:hover {
	background-color: var(--color-primary-soft-hover);
	border-color: var(--color-primary-soft-hover);
	color: var(--color-primary);
}

/* Outline — used by the Yes/No radio group. */
.btn-outline-primary {
	border-color: var(--color-border);
	color: var(--color-text-primary);
	background-color: #ffffff;
}

.btn-outline-primary:hover {
	background-color: var(--color-primary-soft);
	border-color: var(--color-primary-soft);
	color: var(--color-primary);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

/* Grouped pills keep their rounded ends rather than Bootstrap's squared inner edges. */
.btn-group {
	gap: 8px;
}

.btn-group > .btn,
.btn-group > .btn:first-child,
.btn-group > .btn:last-child,
.btn-group > .btn:not(:first-child),
.btn-group > .btn:not(:last-child) {
	border-radius: var(--radius-pill) !important;
}

.btn-toolbar {
	gap: 8px;
}

/* ============================================
   FORMS
   ============================================ */

.form-control,
.form-select {
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.14px;
	color: var(--color-text-primary);
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-input);
	min-height: var(--btn-lg-min-h);
	padding: 0 16px;
}

textarea.form-control {
	padding: 16px;
	min-height: 114px;
}

.form-control::placeholder {
	color: var(--color-text-secondary);
}

.form-control:focus,
.form-select:focus {
	background-color: #ffffff;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
	color: var(--color-text-primary);
}

.form-label {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.14px;
	color: var(--color-text-secondary);
	margin-bottom: 6px !important;
}

.form-label .text-danger {
	color: var(--color-primary) !important;
}

/* Include-in-pickup toggle */
.form-switch .form-check-input {
	width: 40px;
	height: 22px;
	background-color: #e6e8ee;
	border-color: #e6e8ee;
	cursor: pointer;
}

.form-switch .form-check-input:checked {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.form-switch .form-check-input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
}

.form-check-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-secondary);
	cursor: pointer;
	padding-left: 4px;
}

/* ============================================
   CARDS
   ============================================ */

.card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: #ffffff;
	box-shadow: var(--shadow-card);
	overflow: hidden;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
	border-color: #c3c7d6;
	box-shadow: var(--shadow-interactive);
}

.card-header {
	background: var(--color-surface-muted);
	border-bottom: 1px solid var(--color-border);
	padding: 20px 24px;
	font-size: 16px;
	line-height: 24px;
	color: var(--color-text-secondary);
}

.card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
}

.card-footer {
	background: var(--color-surface-muted);
	border-top: 1px solid var(--color-border);
	padding: 16px 24px;
}

.card-img-top {
	border-radius: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.card-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
}

.card-text {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.14px;
	color: var(--color-text-muted);
}

/* The price line on a product card. Pinned to the bottom so prices align
   across a row of cards whose titles wrap to different heights. */
.card-body h2.card-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 34px;
	color: var(--color-text-primary);
	margin: auto 0 0 0;
	padding-top: 16px;
}

.card-body .form-switch {
	margin: 12px 0 0 0;
}

/* Lede copy that introduces a step. Constrained to a comfortable measure
   rather than running the full width of the container. */
.sky-lede {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	color: var(--color-text-secondary);
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.18px;
}

/* The single-column panels on Step 1 / Step 5 sit closer to the website's
   contact form card than to the product grid cards. */
.sky-panel .card {
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-panel);
}

.sky-panel .card:hover {
	transform: none;
	box-shadow: var(--shadow-panel);
}

.sky-panel .card-body {
	padding: 32px;
}

.container .sky-panel h2.sky-panel__title {
	font-size: 24px;
	font-weight: 600;
	line-height: 34px;
	letter-spacing: -0.02em;
	margin: 0 0 8px 0;
}

/* Inside a panel the lede is left-aligned supporting copy, not a centred banner. */
.sky-panel .sky-lede {
	margin-left: 0;
	margin-right: 0;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: normal;
}

/* A selectable option row — used for the pickup location chooser. */
.sky-choice {
	display: block;
	padding: 18px 24px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: #ffffff;
	color: var(--color-text-primary);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sky-choice + .sky-choice {
	margin-top: 12px;
}

.sky-choice:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-soft);
	color: var(--color-primary);
	text-decoration: none;
}

.btn-lg {
	min-height: var(--btn-lg-min-h);
	font-size: 16px;
	line-height: 24px;
	padding: 0 32px;
}

/* ============================================
   PICKUP TIME TABLES
   ============================================ */

.table {
	--bs-table-bg: #ffffff;
	--bs-table-striped-bg: var(--color-surface-muted);
	--bs-table-hover-bg: var(--color-primary-soft);
	--bs-table-color: var(--color-text-primary);
	margin-bottom: 0;
}

.table > :not(caption) > * > * {
	padding: 0;
	border-bottom-color: #edeff5;
}

.table a {
	padding: 12px 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--color-text-primary);
	transition: color 0.15s ease;
}

.table a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

/* ============================================
   PANELS / ALERTS / MISC
   ============================================ */

.bg-light {
	background-color: var(--color-primary-soft) !important;
}

.border.rounded,
.rounded {
	border-radius: var(--radius-panel) !important;
	border-color: var(--color-border) !important;
}

.bg-info-subtle {
	background-color: var(--color-primary-soft) !important;
}

/* Messages float clear of the header band rather than over the navigation. */
#Message {
	position: fixed !important;
	top: 96px;
	right: 24px;
	left: auto;
	width: auto;
	max-width: 420px;
}

.alert {
	border-radius: var(--radius-panel);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-panel);
	font-size: 14px;
	line-height: 20px;
}

/* Status colours follow the website's listing-status palette: a solid-colour
   message on a soft tint of that same colour. */
.alert-danger {
	background-color: #fee2e2;
	border-color: #fecaca;
	color: #991b1b;
}

.alert-success {
	background-color: #dcfce7;
	border-color: #bbf7d0;
	color: #166534;
}

.alert-warning {
	background-color: #fff3eb;
	border-color: #ffd9bf;
	color: #9a3d00;
}

img.img-fluid {
	border-radius: var(--radius-panel);
}

/* Section headings inside the flow ("Pickup Location", "Select a Pickup Time"). */
.container h2 {
	font-size: 40px;
	line-height: 52px;
	letter-spacing: -0.02em;
	margin: 32px 0 8px 0;
}

.container h3 {
	font-size: 22px;
	line-height: 30px;
	letter-spacing: -0.02em;
}

.container h4 {
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.18px;
	font-weight: 500;
	color: var(--color-text-secondary);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
	.sky-title h1 {
		font-size: 40px;
		line-height: 48px;
	}

	.sky-nav__links {
		display: none;
	}
}

@media (max-width: 767px) {
	.sky-header {
		padding: 12px 16px 40px 16px;
		margin-bottom: 32px;
	}

	.sky-nav {
		padding: 8px 8px 8px 16px;
	}

	.sky-nav__logo img {
		height: 28px;
	}

	.sky-title {
		margin-top: 32px;
	}

	.sky-title h1 {
		font-size: 32px;
		line-height: 40px;
	}

	.container h2 {
		font-size: 28px;
		line-height: 36px;
	}

	.sky-footer__container {
		gap: 32px;
	}

	#Message {
		top: 80px;
		right: 16px;
		left: 16px;
		max-width: none;
	}
}