/**
 * WeStyle Booking — front end (tokens only).
 * Datepicker booked state + legend, cart "reserved" line, rental cards,
 * progress stepper, tracker form. Mobile-first.
 */

/* Datepicker: booked days */
.ui-datepicker td.ws-booked span,
.ui-datepicker td.ws-booked a {
	background: var(--ws-cream-deep) !important;
	color: var(--ws-muted) !important;
	text-decoration: line-through;
	border-color: transparent !important;
	opacity: 1;
}

.ws-bk-legend-front {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-4);
	margin: var(--ws-space-2) 0 0;
	font-size: var(--ws-fs-xs);
	color: var(--ws-ink-soft);
}
.ws-bk-legend-front__item { display: inline-flex; align-items: center; gap: var(--ws-space-1); }
.ws-bk-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid var(--ws-line);
	background: var(--ws-bg);
}
.ws-bk-dot--booked { background: var(--ws-cream-deep); border-color: var(--ws-cream-deep); }

/* Cart */
.ws-bk-reserved {
	margin: var(--ws-space-1) 0 0;
	font-size: var(--ws-fs-xs);
	color: var(--ws-success);
}

/* Rental cards */
.ws-bk-account { display: grid; gap: var(--ws-space-4); margin: 0 0 var(--ws-space-6); font-family: var(--ws-font-body); }
.ws-bk-account__h {
	font-family: var(--ws-font-display);
	font-size: var(--ws-fs-xl);
	color: var(--ws-ink);
	margin: var(--ws-space-4) 0 0;
}
.ws-bk-card {
	background: var(--ws-bg);
	border: 1px solid var(--ws-line);
	border-radius: var(--ws-radius);
	box-shadow: var(--ws-shadow-sm);
	padding: var(--ws-space-4);
	display: grid;
	gap: var(--ws-space-4);
	transition: box-shadow var(--ws-dur) var(--ws-ease);
}
.ws-bk-card:hover { box-shadow: var(--ws-shadow); }
.ws-bk-card--cancelled { opacity: 0.7; }
.ws-bk-card__head { display: flex; gap: var(--ws-space-4); align-items: flex-start; }
.ws-bk-card__media { flex: 0 0 72px; }
.ws-bk-card__media img,
.ws-bk-card__img {
	width: 72px;
	height: 92px;
	object-fit: cover;
	border-radius: var(--ws-radius-sm);
	display: block;
}
.ws-bk-card__info { min-width: 0; }
.ws-bk-card__title {
	font-family: var(--ws-font-display);
	font-size: var(--ws-fs-lg);
	line-height: 1.2;
	margin: 0 0 var(--ws-space-1);
	color: var(--ws-ink);
}
.ws-bk-card__dates { margin: 0; font-weight: 600; color: var(--ws-ink); font-size: var(--ws-fs-sm); }
.ws-bk-card__logistics { margin: 2px 0 var(--ws-space-2); color: var(--ws-ink-soft); font-size: var(--ws-fs-xs); }

.ws-bk-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--ws-radius-pill);
	font-size: var(--ws-fs-xs);
	font-weight: 600;
	background: var(--ws-cream);
	color: var(--ws-ink-soft);
}
.ws-bk-pill--confirmed,
.ws-bk-pill--out_for_delivery,
.ws-bk-pill--with_customer { background: var(--ws-rose-tint); color: var(--ws-rose-deep); }
.ws-bk-pill--deposit_refunded { background: var(--ws-success-tint); color: var(--ws-success); }
.ws-bk-pill--cancelled { background: var(--ws-danger-tint); color: var(--ws-danger); }
.ws-bk-pill--conflict,
.ws-bk-pill--pending_payment { background: var(--ws-gold-tint); color: var(--ws-ink); }

/* Stepper */
.ws-bk-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	position: relative;
}
.ws-bk-steps::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: var(--ws-line);
}
.ws-bk-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ws-space-1);
	font-size: 11px;
	line-height: 1.25;
	color: var(--ws-muted);
}
.ws-bk-steps__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ws-bg);
	border: 2px solid var(--ws-line);
	position: relative;
	z-index: 1;
}
.ws-bk-steps__item.is-done .ws-bk-steps__dot { background: var(--ws-rose); border-color: var(--ws-rose); }
.ws-bk-steps__item.is-current .ws-bk-steps__dot { border-color: var(--ws-rose); box-shadow: 0 0 0 4px var(--ws-rose-tint); }
.ws-bk-steps__item.is-done,
.ws-bk-steps__item.is-current { color: var(--ws-ink); }
.ws-bk-steps__item.is-current { font-weight: 600; }

.ws-bk-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-2) var(--ws-space-4);
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--ws-line);
	padding-top: var(--ws-space-3);
	font-size: var(--ws-fs-sm);
	color: var(--ws-ink-soft);
}
.ws-bk-card__links { display: flex; flex-wrap: wrap; gap: var(--ws-space-2); }
.ws-bk-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--ws-space-3);
	border-radius: var(--ws-radius-pill);
	border: 1px solid var(--ws-line);
	color: var(--ws-ink);
	text-decoration: none;
	font-size: var(--ws-fs-sm);
	transition: border-color var(--ws-dur) var(--ws-ease), color var(--ws-dur) var(--ws-ease);
}
.ws-bk-link:hover { border-color: var(--ws-rose); color: var(--ws-rose); }
.ws-bk-link--wa { border-color: var(--ws-whatsapp); }

.ws-bk-notes {
	margin: 0;
	padding: var(--ws-space-3);
	list-style: none;
	background: var(--ws-cream);
	border-radius: var(--ws-radius-sm);
	font-size: var(--ws-fs-xs);
	color: var(--ws-ink-soft);
	display: grid;
	gap: var(--ws-space-1);
}
.ws-bk-empty { color: var(--ws-ink-soft); }
.ws-bk-empty a { color: var(--ws-rose); }

/* Tracker */
.ws-bk-tracker { display: grid; gap: var(--ws-space-4); max-width: 560px; }
.ws-bk-tracker__form {
	display: grid;
	gap: var(--ws-space-3);
	padding: var(--ws-space-5);
	background: var(--ws-cream);
	border-radius: var(--ws-radius);
}
.ws-bk-tracker__form label { display: grid; gap: var(--ws-space-1); font-size: var(--ws-fs-sm); color: var(--ws-ink); }
.ws-bk-tracker__form input {
	min-height: 44px;
	border: 1px solid var(--ws-line);
	border-radius: var(--ws-radius-sm);
	padding: 0 var(--ws-space-3);
	background: var(--ws-bg);
}
.ws-bk-btn {
	min-height: 44px;
	border: 0;
	border-radius: var(--ws-radius-pill);
	background: var(--ws-rose);
	color: var(--ws-bg);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--ws-dur) var(--ws-ease);
}
.ws-bk-btn:hover { background: var(--ws-rose-deep); }

@media (min-width: 768px) {
	.ws-bk-card { padding: var(--ws-space-5); }
	.ws-bk-card__media { flex-basis: 88px; }
	.ws-bk-card__media img,
	.ws-bk-card__img { width: 88px; height: 112px; }
	.ws-bk-steps__item { font-size: var(--ws-fs-xs); }
}