/* luggagesorted-booking.css
   /book page — brand: navy #02163b, off-white #f6f3f1
   Loaded only on the /book page (via wp_enqueue_style conditional on that URL).
   Global resets and body/header rules removed — handled by the child theme.
*/

/* ── Main layout ─────────────────────────────── */

.lsb-main {
	max-width: 720px;
	margin: 0 auto;
	padding: 28px 24px 120px;
}
.lsb-page-title {
	font-size: 26px;
	font-weight: 700;
	color: #02163b;
	margin-bottom: 24px;
	letter-spacing: -.02em;
}

/* ── Section cards ───────────────────────────── */

.lsb-section {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 14px;
	border: 1px solid #e4e0dd;
}
.lsb-section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #8c8f94;
	margin-bottom: 14px;
}

/* ── Date / time grid ────────────────────────── */

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

.lsb-field label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #646970;
	margin-bottom: 5px;
}
.lsb-field input,
.lsb-field select {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1.5px solid #d0ccc9;
	border-radius: 7px;
	font-size: 15px;
	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: 12px;
	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: 12px;
	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: 36px !important;
}

/* ── Bag rows ────────────────────────────────── */

.lsb-bag-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid #f0eded;
}
.lsb-bag-row:first-child { padding-top: 0; }
.lsb-bag-row:last-child  { border-bottom: none; padding-bottom: 0; }

.lsb-bag-icon {
	flex-shrink: 0;
	width: 52px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lsb-bag-icon img {
	max-width: 52px;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.lsb-bag-info { flex: 1; min-width: 0; }
.lsb-bag-name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #02163b;
}
.lsb-bag-desc {
	display: block;
	font-size: 12px;
	color: #8c8f94;
	margin-top: 2px;
}

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

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

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

.lsb-qty {
	display: flex !important;
	align-items: center !important;
	border: 1.5px solid #d0ccc9;
	border-radius: 7px;
	overflow: hidden;
	flex-shrink: 0;
}
.lsb-qty__btn {
	width: 36px !important;
	height: 38px !important;
	min-width: 36px !important;
	background: #f6f3f1 !important;
	border: none !important;
	cursor: pointer;
	font-size: 20px;
	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: #f6f3f1 !important;
    outline: none !important;
    box-shadow: none !important;
}
.lsb-qty__btn:hover:not(:disabled) { background: #ebe7e4 !important; }
.lsb-qty__btn:active:not(:disabled) { background: #d8d4d0 !important; }
.lsb-qty__btn:disabled { opacity: .3; cursor: default; }

.lsb-qty__val {
	width: 38px !important;
	min-width: 38px !important;
	max-width: 38px !important;
	height: 38px !important;
	border: none !important;
	border-left: 1.5px solid #d0ccc9 !important;
	border-right: 1.5px solid #d0ccc9 !important;
	background: #fff !important;
	text-align: center !important;
	font-size: 15px !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; }

/* ── Summary & CTA ───────────────────────────── */

.lsb-summary-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.lsb-total-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #8c8f94;
	margin-bottom: 4px;
}
.lsb-total-amount {
	font-size: 32px;
	font-weight: 700;
	color: #02163b;
	letter-spacing: -.04em;
	line-height: 1;
}
.lsb-total-bags {
	font-size: 13px;
	color: #8c8f94;
	margin-top: 5px;
}

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

.lsb-cta {
	width: 100%;
	height: 54px;
	background: #02163b;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 14px;
	letter-spacing: .01em;
	transition: background .15s, opacity .15s;
}
.lsb-cta:hover:not(:disabled) { background: #031d4e; }
.lsb-cta:disabled { opacity: .4; cursor: not-allowed; }

/* ── 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);
}