/* ==========================================================================
   Booking Dates Grid  [booking_dates_grid]
   ========================================================================== */

/* -- Wrapper -- */
.bdg-wrap {
width: 100%;
}

/* -- Shared row grid -- */
.bdg-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
}

/* -- Header row -- */
.bdg-row--head {
background-color: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.bdg-row--head .bdg-cell {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #fff;
padding: 0.85rem 1rem;
}

.bdg-row--head .bdg-cell:nth-child(1) { text-align: left; }
.bdg-row--head .bdg-cell:nth-child(2) { text-align: center; }
.bdg-row--head .bdg-cell:nth-child(3) { text-align: right; }

/* -- Data rows -- */
.bdg-row:not(.bdg-row--head) {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
border-left: 3px solid transparent;
transition: background-color 0.2s ease, border-left-color 0.2s ease;
}

.bdg-row:not(.bdg-row--head):last-child {
border-bottom: none;
}

.bdg-row:not(.bdg-row--head):hover {
background-color: rgba(255, 114, 13, 0.06);
border-left-color: #ff720d;
}

/* -- Cells -- */
.bdg-cell {
padding: 1.1rem 1rem;
color: #fff;
}

.bdg-cell--date {
text-align: left;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
}

.bdg-cell--status {
text-align: center;
}

.bdg-cell--action {
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 1rem;
}

/* -- Status pills -- */
.bdg-pill {
display: inline-block;
padding: 0.3em 0.85em;
border-radius: 2em;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.6;
white-space: nowrap;
}

.bdg-pill--available  { background-color: rgba(34, 197, 94, 0.18);  color: #4ade80; }
.bdg-pill--guaranteed { background-color: rgba(34, 197, 94, 0.18);  color: #4ade80; }
.bdg-pill--sold       { background-color: rgba(239, 68, 68, 0.15);  color: #f87171; }
.bdg-pill--closed     { background-color: rgba(107, 114, 128, 0.2); color: #d1d5db; }
.bdg-pill--waitlist   { background-color: rgba(249, 115, 22, 0.15); color: #fb923c; }

/* -- Mobile -- */
@media ( max-width: 768px ) {

.bdg-row--head {
	display: none;
}

/* Card layout: date + pill on top row, button spanning full width below */
.bdg-row:not(.bdg-row--head) {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"date status"
		"action action";
	gap: 0.5rem 0.75rem;
	padding: 1.1rem 0rem;
	align-items: center;
	border-left: 3px solid transparent;
}

.bdg-row:not(.bdg-row--head):hover {
	border-left-color: #ff720d;
}

/* Remove label pseudo-elements — layout speaks for itself */
.bdg-cell::before {
	display: none;
}

.bdg-cell {
	padding: 0;
}

.bdg-cell--date {
	grid-area: date;
	font-size: 0.75rem;
}

.bdg-cell--status {
	grid-area: status;
	text-align: right;
}

.bdg-cell--action {
	grid-area: action;
	justify-content: stretch;
	padding-right: 0;
}

/* Force the WeTavel wrapper div and button to fill the full width */
.bdg-cell--action > div {
	width: 100% !important;
	display: block !important;
	text-align: center !important;
}

.bdg-cell--action button {
	width: 100% !important;
	padding: 8px 15px !important;
	font-size: 14px !important;
	border-radius: 8px !important;
	display: block !important;
	box-sizing: border-box !important;
	line-height: 1.4 !important;
}

}
