/* My Bookings block. Container + per-booking cards (.kab-booking on .b-card).
   Colours/type/radius via tokens; composes .b-card / .b-pill / .b-kicker / .btn. */

.kab-bookings__title{
	font-family:var(--font-display); font-weight:var(--display-w);
	letter-spacing:var(--display-ls); line-height:1.1;
	font-size:1.5rem; color:var(--ink); margin:0 0 1rem;
}
.kab-bookings__list{ display:flex; flex-direction:column; gap:14px; }
.kab-bookings__loading{ color:var(--muted); font-size:.95rem; }

.kab-bookings__empty{ padding:var(--card-pad); text-align:center; }
.kab-bookings__empty-text{ margin:0 0 .85rem; color:var(--ink-soft); }

.kab-booking{ padding:var(--card-pad); overflow:hidden; }
.kab-booking__body{ min-width:0; }

/* Accommodation photo. Narrow screens: a top banner that bleeds to the card
   edges (negates the card padding) with the top corners rounded to the card
   radius. */
.kab-booking__photo{
	margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
	height:170px; overflow:hidden; background:var(--surface2);
	border-radius:var(--radius) var(--radius) 0 0;
}
.kab-booking__photo img{
	width:100%; height:100%; object-fit:cover; display:block;
}

/* Wide screens: lay the photo out as a left column beside the content instead
   of a tall banner. The card drops its own padding (the photo bleeds to the
   edges; the content column carries the padding). */
@media (min-width:680px){
	.kab-booking--has-photo{ display:flex; align-items:stretch; padding:0; }
	.kab-booking--has-photo .kab-booking__photo{
		flex:0 0 240px; margin:0; height:auto;
		border-radius:var(--radius) 0 0 var(--radius);
	}
	.kab-booking--has-photo .kab-booking__body{
		flex:1 1 auto; min-width:0; padding:var(--card-pad);
	}
}

.kab-booking__head{ display:flex; gap:14px; align-items:flex-start; }
.kab-booking__icon{
	flex:0 0 auto; display:grid; place-items:center;
	width:42px; height:42px; border-radius:999px;
	background:color-mix(in srgb, var(--accent) 12%, transparent);
	color:var(--accent); font-size:1.05rem;
}
.kab-booking__titles{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.kab-booking__title{
	font-family:var(--font-display); font-weight:var(--display-w);
	font-size:1.12rem; line-height:1.15; color:var(--ink); margin:0;
}
.kab-booking__attrs{
	margin:.85rem 0 0; color:var(--ink-soft); font-size:.88rem; line-height:1.55;
}
.kab-booking__actions{
	display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem;
}
.kab-booking__actions .btn{ flex:0 1 auto; }

.kab-booking__confirm{
	display:flex; flex-wrap:wrap; align-items:center; gap:8px;
	margin-top:.85rem; padding:10px 12px;
	background:var(--no-bg); border-radius:var(--radius-sm);
}
.kab-booking__confirm-text{ font-size:.88rem; color:var(--no); margin-right:auto; }

.kab-booking__notice{
	margin-top:.85rem; padding:10px 12px; border-radius:var(--radius-sm);
	font-size:.86rem; line-height:1.45;
}
.kab-booking__notice--info{ background:var(--surface2); color:var(--ink-soft); }
.kab-booking__notice--success{ background:var(--ok-bg); color:var(--ok); }
.kab-booking__notice--error{ background:var(--no-bg); color:var(--no); }

.kab-booking__faq{
	margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line);
	display:flex; flex-direction:column; gap:.75rem;
}
.kab-booking__faq-loading, .kab-booking__faq-empty{ color:var(--muted); font-size:.88rem; margin:0; }
.kab-booking__faq-q{ margin:0 0 .2rem; font-size:.95rem; font-weight:600; color:var(--ink); }
.kab-booking__faq-a{ margin:0; font-size:.88rem; line-height:1.55; color:var(--ink-soft); }

/* Inline payment status. Compact when fully paid (just a pill); the
   outstanding (--due) variant gets a separator + room for the unpaid rows. */
.kab-booking__pay{ margin-top:.7rem; }
.kab-booking__pay--due{ margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line); }
.kab-booking__pay-sum{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:.7rem; }
.kab-booking__pay-totals{ font-size:.84rem; color:var(--ink-soft); }
.kab-booking__pay-list{ display:flex; flex-direction:column; gap:6px; }
.kab-booking__pay-row{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:9px 11px; background:var(--surface2); border-radius:var(--radius-sm);
}
.kab-booking__pay-left{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kab-booking__pay-label{ font-weight:600; font-size:.9rem; color:var(--ink); }
.kab-booking__pay-meta{ font-size:.78rem; color:var(--muted); }
.kab-booking__pay-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.kab-booking__pay-amt{ font-weight:700; font-size:.9rem; color:var(--ink); }

@media (max-width:480px){
	.kab-booking__actions{ flex-direction:column; }
	.kab-booking__actions .btn{ width:100%; justify-content:center; }
}