/* Booth Booking – demo styles. Στο τελικό θέμα αυτά γίνονται Tailwind tokens. */

.bbk-fp {
	--bbk-available: #2bb673;
	--bbk-available-hover: #1f9a5e;
	--bbk-mine: #f39200;
	--bbk-held: #b8bfc8;
	--bbk-booked: #374151;
	--bbk-sponsor: #7b3fe4;
	--bbk-blocked: #e5e7eb;
	--bbk-ink: #111827;
	--bbk-muted: #6b7280;
	--bbk-line: #e5e7eb;
	--bbk-radius: 10px;

	position: relative;
	container-type: inline-size;
	color: var(--bbk-ink);
	font-size: 15px;
	line-height: 1.45;
}

/* ---------------------------------------------------------------- Legend */

.bbk-fp__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--bbk-muted);
}
.bbk-fp__legend li { display: flex; align-items: center; gap: 6px; margin: 0; }
.bbk-fp__legend i {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, .15);
}

/* ---------------------------------------------------------------- Layout */

.bbk-fp__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}

.bbk-fp__map {
	overflow-x: auto;
	border: 1px solid var(--bbk-line);
	border-radius: var(--bbk-radius);
	background: #fff;
	-webkit-overflow-scrolling: touch;
}
.bbk-fp__map[data-loading] { opacity: .5; }
.bbk-fp__svg { display: block; width: 100%; height: auto; min-width: 820px; }

/* Με βάση το πλάτος του container, όχι της οθόνης: το θέμα μπορεί να έχει στενή στήλη περιεχομένου. */
@container (max-width: 1000px) {
	.bbk-fp__layout { grid-template-columns: 1fr; }
	.bbk-fp__panel { position: static; }
}

.bbk-fp [hidden] { display: none !important; }

/* ---------------------------------------------------------------- Booths */

.bbk-fp [data-booth] { outline: none; }
.bbk-fp .bbk-shape {
	transition: fill .15s ease;
	stroke: #ffffff;
	stroke-width: 2;
}
/* Κείμενα του SVG (και ετικέτες εκτός θέσεων) να μην «κλέβουν» το κλικ. */
.bbk-fp__svg text { pointer-events: none; }
.bbk-fp [data-booth] text { fill: #fff; }

.bbk-fp [data-state="available"] { cursor: pointer; }
.bbk-fp [data-state="available"] .bbk-shape,
.bbk-fp__legend [data-state="available"] { fill: var(--bbk-available); background: var(--bbk-available); }
.bbk-fp [data-state="available"]:is(:hover, :focus-visible) .bbk-shape { fill: var(--bbk-available-hover); }

.bbk-fp [data-state="mine"] { cursor: pointer; }
.bbk-fp [data-state="mine"] .bbk-shape,
.bbk-fp__legend [data-state="mine"] { fill: var(--bbk-mine); background: var(--bbk-mine); }
.bbk-fp [data-state="mine"] .bbk-shape { stroke: var(--bbk-ink); stroke-width: 3; }

.bbk-fp :is([data-state="held"]) .bbk-shape,
.bbk-fp__legend [data-state="held"] { fill: var(--bbk-held); background: var(--bbk-held); }

.bbk-fp :is([data-state="booked"], [data-state="reserved"]) .bbk-shape,
.bbk-fp__legend [data-state="booked"] { fill: var(--bbk-booked); background: var(--bbk-booked); }

.bbk-fp [data-state="sponsor"] .bbk-shape,
.bbk-fp__legend [data-state="sponsor"] { fill: var(--bbk-sponsor); background: var(--bbk-sponsor); }

.bbk-fp [data-state="blocked"] .bbk-shape,
.bbk-fp__legend [data-state="blocked"] { fill: var(--bbk-blocked); background: var(--bbk-blocked); }
.bbk-fp [data-state="blocked"] text { fill: var(--bbk-muted); }

.bbk-fp [data-booth]:focus-visible .bbk-shape { stroke: var(--bbk-ink); stroke-width: 4; }

/* Το αίτημα είναι σε εξέλιξη (το «loading» που είδες στο σινεμά) */
.bbk-fp [data-booth][data-loading] { animation: bbk-pulse .7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes bbk-pulse { to { opacity: .35; } }

/* Κάποιος άλλος την πρόλαβε */
.bbk-fp [data-booth].is-denied { animation: bbk-denied .5s ease 2; }
@keyframes bbk-denied { 50% { opacity: .2; } }

/* ----------------------------------------------------------------- Panel */

.bbk-fp__panel {
	position: sticky;
	top: 20px;
	padding: 18px;
	border: 1px solid var(--bbk-line);
	border-radius: var(--bbk-radius);
	background: #fff;
}
.bbk-fp__title { margin: 0 0 10px; font-size: 18px; }
.bbk-fp__empty, .bbk-fp__note { margin: 0 0 12px; color: var(--bbk-muted); font-size: 13px; }

.bbk-fp__list { margin: 0; padding: 0; list-style: none; }
.bbk-fp__item {
	display: grid;
	grid-template-columns: 1fr auto 28px;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--bbk-line);
}
.bbk-fp__item strong { display: block; }
.bbk-fp__item span { font-size: 13px; color: var(--bbk-muted); }
.bbk-fp__item-side { text-align: right; }
.bbk-fp__item-side b { display: block; font-size: 14px; }
.bbk-fp__item time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--bbk-muted); }
.bbk-fp__item time.is-urgent { color: #c0392b; font-weight: 700; }
.bbk-fp__remove {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--bbk-line);
	border-radius: 50%;
	background: #fff;
	color: var(--bbk-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.bbk-fp__remove:hover { color: var(--bbk-ink); border-color: var(--bbk-ink); }

.bbk-fp__total {
	display: flex;
	justify-content: space-between;
	margin: 12px 0;
	font-size: 16px;
}

.bbk-fp__cta {
	display: block;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--bbk-ink);
	color: #fff !important;
	text-align: center;
	text-decoration: none !important;
	font-weight: 600;
}
.bbk-fp__cta[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* -------------------------------------------------------- Tooltip/toast */

.bbk-fp__tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	display: grid;
	gap: 2px;
	min-width: 170px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--bbk-ink);
	color: #fff;
	font-size: 13px;
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.bbk-fp__tooltip[hidden] { display: none; }
.bbk-fp__tooltip span { color: #d1d5db; }
.bbk-fp__tooltip em { margin-top: 4px; font-style: normal; font-weight: 600; }
.bbk-fp__tooltip em[data-state="available"] { color: #6ee7a8; }
.bbk-fp__tooltip em[data-state="mine"] { color: #fbbf24; }

.bbk-fp__toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 9999;
	max-width: min(92vw, 480px);
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--bbk-ink);
	color: #fff;
	font-size: 14px;
	transform: translateX(-50%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.bbk-fp__toast[data-type="error"] { background: #b42318; }
.bbk-fp [data-state="held"] text { fill: var(--bbk-ink); }

/* Κάτοψη από εικόνα (editor): ημιδιάφανες θέσεις ώστε να φαίνεται το σχέδιο από κάτω. */
.bbk-fp__svg--image [data-booth] .bbk-shape {
	fill-opacity: .78;
	stroke-width: 1.5px;
	vector-effect: non-scaling-stroke;
}
.bbk-fp__svg--image [data-state="mine"] .bbk-shape { fill-opacity: .95; stroke-width: 3px; }
.bbk-fp__svg--image [data-state="blocked"] .bbk-shape { fill-opacity: .55; }