/* luggagesorted-booking.css
   Shared booking form (lsh_render_booking_form()) — used on both /book and
   the homepage. Brand: navy #02163b, yellow #ffc107, off-white #f6f3f1.
   Loaded on both pages via lsh_enqueue_booking_assets().
   Global resets and body/header rules removed — handled by the child theme.
*/

/* ── Main layout (the /book page's own outer wrapper) ──────── */

.lsb-main {
	max-width: 720px;
	margin: 0 auto;
	padding: 28px 24px 120px;
}

/* ── Outer branded panel ───────────────────────────────────── */
/* height:100% lets the panel fill a stretched CSS Grid column (the
   homepage's three-column grid uses align-items:stretch) so the hero / map /
   form column bottoms line up regardless of content length. */

.lsb-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	background: #02163b;
	padding: 10px;
	border: 4px solid #02163b;
	border-radius: 22px;
	box-shadow: 0 0 0 3px #ffc107;
}
.lsb-panel__banner {
	background: #ffc107;
	color: #000;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -.01em;
	text-align: center;
	padding: 16px 10px;
	border-radius: 14px;
}
.lsb-panel__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #fff;
	padding: 16px;
	border-radius: 14px;
}
.lsb-panel__footer {
	background: #02163b;
	padding: 4px;
}

/* ── Date / time row ───────────────────────────────────────── */

.lsb-times {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}
@media (max-width: 480px) {
	.lsb-times { grid-template-columns: 1fr; }
}

.lsb-field label {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #1e293b;
	margin-bottom: 4px;
}
.lsb-field input,
.lsb-field select {
	width: 100%;
	height: 40px;
	padding: 0 10px;
	border: 1.5px solid #d0ccc9;
	border-radius: 7px;
	font-size: 14px;
	color: #1d2327;
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	transition: border-color .14s, box-shadow .14s;
}
.lsb-field input:focus,
.lsb-field select:focus {
	border-color: #02163b;
	box-shadow: 0 0 0 3px rgba(2,22,59,.1);
}
.lsb-field-hint {
	font-size: 12px;
	color: #8c8f94;
	margin-top: 6px;
	line-height: 1.4;
}

.lsb-select-wrap { position: relative; }
.lsb-select-wrap::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #646970;
	pointer-events: none;
}

/* Date field — calendar icon (no chevron) */
.lsb-date-wrap { position: relative; }
.lsb-date-wrap::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23646970' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1.5'/%3E%3Cpath d='M5 1v3M11 1v3M1.5 6.5h13'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
	pointer-events: none;
}
/* Give the alt input enough right padding so text clears the icon */
.lsb-date-wrap input {
	padding-right: 32px !important;
}

/* ── Bags ───────────────────────────────────────────────────── */

.lsb-bags {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: 14px;
	padding: 16px 12px 14px;
	border: 2px solid #02163b;
	border-radius: 14px;
}
.lsb-bags__label {
	position: absolute;
	top: -13px;
	left: 12px;
	display: inline-block;
	background: #ffc107;
	color: #000;
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 4px 12px;
	border-radius: 999px;
	border: 2px solid #02163b;
}

.lsb-bag-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid #e4e0dd;
}
.lsb-bag-row:first-of-type { padding-top: 0; }
.lsb-bag-row:last-of-type  { border-bottom: none; padding-bottom: 0; }

.lsb-bag-icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #ffc107;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lsb-bag-icon img {
	max-width: 27px;
	max-height: 27px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.lsb-bag-info { flex: 1; min-width: 0; }
.lsb-bag-name {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #02163b;
}
.lsb-bag-desc {
	display: block;
	font-size: 13px;
    color: #414651;
	margin-top: 1px;
}

.lsb-bag-price {
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 700;
	color: #02163b;
	min-width: 26px;
	text-align: right;
}

/* ── Quantity control ────────────────────────── */

/* !important guards override Astra's broad input/button normalisation
   that loads on both pages via get_header(). */

.lsb-qty {
	display: flex !important;
	align-items: center !important;
	border: 1.5px solid #02163b;
	border-radius: 7px;
	overflow: hidden;
	flex-shrink: 0;
}
.lsb-qty__btn {
	width: 30px !important;
	height: 32px !important;
	min-width: 30px !important;
	background: #fff !important;
	border: none !important;
	cursor: pointer;
	font-size: 18px;
	font-weight: 300;
	color: #02163b !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	transition: background .1s;
	-webkit-user-select: none;
	user-select: none;
	line-height: 1;
	padding: 0 !important;
	margin: 0 !important;
}
.lsb-qty__btn:focus,
.lsb-qty__btn:active,
.lsb-qty__btn:focus-visible {
    background: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}
.lsb-qty__btn:hover:not(:disabled) { background: #fdf6e3 !important; }
.lsb-qty__btn:active:not(:disabled) { background: #fbeec7 !important; }
.lsb-qty__btn:disabled { opacity: .3; cursor: default; }

.lsb-qty__val {
	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	height: 32px !important;
	border: none !important;
	border-left: 1.5px solid #02163b !important;
	border-right: 1.5px solid #02163b !important;
	background: #fff !important;
	text-align: center !important;
	font-size: 14px !important;
	font-weight: 600;
	color: #1d2327;
	-moz-appearance: textfield;
	appearance: textfield;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	padding: 0 !important;
}
.lsb-qty__val::-webkit-inner-spin-button,
.lsb-qty__val::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Narrow widths (iPhone SE etc.): the flex row's align-items:center vertically
   centers price/stepper against the *whole row height* — once the name+desc
   column wraps to 2-3 lines, that centering lands them mid-paragraph, reading
   as overlapping text. Switch to a grid that top-aligns icon/name/price and
   drops the stepper to its own full-width row underneath, so wrapped
   descriptions never fight with anything beside them. Placed here, after the
   base .lsb-qty* rules, so these !important overrides actually win the
   cascade (same selector + same !important ties go to source order — an
   earlier attempt placed this block before the base rules and silently lost). */
@media (max-width: 480px) {
	.lsb-bag-row {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"icon info  price"
			"qty  qty   qty";
		align-items: start;
		row-gap: 8px;
		column-gap: 10px;
	}
	.lsb-bag-icon  { grid-area: icon; }
	.lsb-bag-info  { grid-area: info; min-width: 0; }
	.lsb-bag-price { grid-area: price; padding-top: 4px; }

	/* Bigger, full-width, equal-thirds touch targets. */
	.lsb-qty {
		grid-area: qty;
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr;
		width: 100%;
	}
	.lsb-qty__btn,
	.lsb-qty__val {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 48px !important;
		font-size: 20px !important;
	}
}

/* ── Referral discount preview ─────────────────── */
/* Only rendered (via JS) when a referral coupon is active and bags are
   selected — mirrors the exact figure the guest sees at checkout.
   .lsb-panel__body is a flex column; margin-top:auto anchors this callout
   into whatever empty space sits below the bag list, just above PAY,
   instead of crowding directly under the last bag row. */

.lsb-discount:not(:empty) {
	margin-top: auto;
	padding: 12px 14px;
	border: 2px dashed #02163b;
	border-radius: 10px;
	background: #fffbea;
}
.lsb-discount__row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #646970;
	padding: 2px 0;
}
.lsb-discount__row--off { color: #1a7a4a; font-weight: 600; }
.lsb-discount__row--total {
	font-family: 'Oswald', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #02163b;
	border-top: 1px dashed #02163b;
	margin-top: 4px;
	padding-top: 6px;
}

/* ── Note (informational, not an error) ────────── */
/* "Today's slots have finished, showing tomorrow's" — a neutral heads-up,
   not a red warning. */

.lsb-note {
	font-size: 15px;
	color: #7a5f00;
	background: #fff8e1;
	border-radius: 6px;
	padding: 0;
	margin: 0;
	display: none;
}
.lsb-note:not(:empty) {
	display: block;
	padding: 8px 10px;
}

/* ── Error + CTA ──────────────────────────────── */

.lsb-error {
	font-size: 13px;
	color: #ff8a80;
	margin: 0;
	display: none;
}
.lsb-error:not(:empty) { display: block; }

/* Default variant (/book's "Add to cart") — yellow, since the button sits
   inside the panel's own navy footer strip: navy-on-navy would vanish. */
.lsb-cta {
	width: 100%;
	height: 62px;
	background: #ffc107;
	color: #000;
	border: 2px solid #ffc107;
	border-radius: 16px;
	font-family: 'Oswald', sans-serif;
	font-size: 26px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}
.lsb-cta:hover:not(:disabled) { background: #e0a800; border-color: #e0a800; }
.lsb-cta:disabled { opacity: .4; cursor: not-allowed; }

/* Green PAY variant — the homepage's express-checkout button. Disabled state
   keeps the green (per Glenn's mockup) instead of greying out. */
.lsb-cta--pay {
	background: #3cb54a;
	border-color: #3cb54a;
	position: relative;
	padding-left: 30px;
}
.lsb-cta--pay::before {
	content: '';
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}
.lsb-cta--pay:hover:not(:disabled) { background: #2f9a3d; border-color: #2f9a3d; }
.lsb-cta--pay:disabled { opacity: .55; }

/* ── Flatpickr — brand overrides ─────────────── */

.flatpickr-calendar {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	border-radius: 12px;
	border: 1px solid #e4e0dd;
	box-shadow: 0 8px 32px rgba(2,22,59,.14);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: #02163b; }

/* Month header */
.flatpickr-months {
	border-radius: 12px 12px 0 0;
	background: #02163b;
}
.flatpickr-months .flatpickr-month {
	background: #02163b;
	color: #fff;
	height: 52px;
	border-radius: 12px 12px 0 0;
}
.flatpickr-current-month {
	font-size: 15px;
	font-weight: 600;
	padding-top: 14px;
	color: #fff;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
	background: #02163b;
	color: #fff;
}
.flatpickr-current-month input.cur-year {
	color: #fff;
	font-weight: 600;
	pointer-events: none;
}
/* Year: hide spinner arrows so it reads as plain text like the month */
.numInputWrapper { pointer-events: none; }
.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown { display: none; }

/* Prev / next month arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	color: #fff !important;
	fill: #fff !important;
	top: 10px;
	padding: 6px;
	border-radius: 6px;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background: rgba(255,255,255,.15);
	color: #fff !important;
	fill: #fff !important;
}

/* Weekday header */
.flatpickr-weekdays {
	background: #02163b;
	padding-bottom: 4px;
}
span.flatpickr-weekday {
	background: #02163b;
	color: rgba(255,255,255,.6);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* Day grid */
.flatpickr-days {
	border-left: 1px solid #e4e0dd;
	border-right: 1px solid #e4e0dd;
}
.dayContainer { padding: 6px; gap: 2px; }

.flatpickr-day {
	border-radius: 7px;
	font-size: 14px;
	height: 42px;
	line-height: 42px;
	max-width: 42px;
	color: #1d2327;
	border: none;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
	background: #e8ecf4;
	border-color: transparent;
	color: #02163b;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
	background: #02163b;
	border-color: #02163b;
	color: #fff;
	font-weight: 600;
}
.flatpickr-day.today {
	border: 2px solid #02163b;
	font-weight: 700;
	color: #02163b;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: #02163b;
	border-color: #02163b;
	color: #fff;
}
/* today + selected: .today comes later in source so its color wins — restore white */
.flatpickr-day.today.selected,
.flatpickr-day.today.selected:hover,
.flatpickr-day.today.selected:focus {
	background: #02163b;
	border-color: #02163b;
	color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	color: #d0ccc9;
	text-decoration: none;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: #a09b96;
}

/* Alt input — inherits .lsb-field input styles, ensure caret shows */
.flatpickr-input.flatpickr-alt-input { cursor: pointer; }

/* ── Flatpickr backdrop ──────────────────────── */
.lsb-fp-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 9998; /* below flatpickr calendar (99999) */
	transition: background .18s ease;
}
.lsb-fp-backdrop--visible {
	background: rgba(0, 0, 0, .3);
}