/* ============================================================================
   Booking page share (.bps-*)
   The "your booking page is live" card — setup wizard final step + dashboard.
   Loaded from components/layouts/base.blade.php (never @push('css'), or it
   paints one unstyled frame on every wire:navigate into the dashboard).
   ========================================================================== */

.bps-card {
	background: #ffffff;
	border: 1px solid #e5e9f0;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
	padding: 18px 20px 20px;
	position: relative;
}

/* public/style.css sets a global `a { display: block }`, which would break the
   CTA out onto its own line and orphan anything beside it. Scope it back. */
.bps-card a {
	display: inline-flex;
}

.bps-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding-right: 34px;
}

.bps-title {
	font-size: 16px;
	font-weight: 700;
	color: #1a2b3c;
	margin: 0;
}

.bps-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 11px;
	border-radius: 999px;
	background: #e5f5ec;
	color: #0f7a3d;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	flex-shrink: 0;
}

.bps-pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
}

.bps-body {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.bps-main {
	flex: 1;
	min-width: 0;
}

.bps-row {
	display: flex;
	align-items: center;
	gap: 10px;
	/* No wrapping above mobile: with flex-wrap the browser wraps BEFORE it
	   shrinks, which pushed Open onto its own line in the narrower wizard card.
	   nowrap lets the link chip shrink and ellipsize instead. The mobile block
	   below restores stacking. */
	flex-wrap: nowrap;
}

/* The link chip is a real <button> — clicking it copies the link, same as the
   Copy button. Everything below the `overflow` line strips the default button
   chrome so it still reads as the link field it always was. */
.bps-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	max-width: 100%;
	width: auto;
	/* Must be able to shrink, or the address pushes Copy/Open onto a second
	   line in the narrower wizard card. The label ellipsizes instead. */
	flex: 0 1 auto;
	min-width: 0;
	padding: 0 14px;
	border: 1px solid #d7dde6;
	border-radius: 8px;
	background: #f9fbfd;
	font-size: 13.5px;
	font-weight: 600;
	color: #003264;
	overflow: hidden;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.bps-link:hover {
	background: #f2f6fa;
	border-color: #c3ccd8;
	color: #003264;
}

.bps-link-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bps-link i {
	color: var(--ed-text-muted);
	font-size: 13px;
	flex-shrink: 0;
}

.bps-btn {
	height: 40px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px solid #003264;
	background: #ffffff;
	color: #003264;
	white-space: nowrap;
	width: auto;
}

.bps-btn:hover {
	background: #f2f6fa;
	color: #003264;
}

.bps-btn-primary {
	background: #003264;
	border-color: #003264;
	color: #ffffff;
}

.bps-btn-primary:hover {
	background: #14457A;
	color: #ffffff;
}

.bps-btn-icon {
	width: 40px;
	padding: 0;
}

.bps-sub {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	margin: 10px 0 0;
}

.bps-qr {
	flex: 0 0 96px;
	text-align: center;
}

.bps-qr img {
	width: 96px;
	height: 96px;
	border: 1px solid #d7dde6;
	border-radius: 8px;
	background: #ffffff;
	display: block;
}

.bps-qr-cap {
	font-size: 11px;
	color: var(--ed-text-muted);
	margin-top: 6px;
}

/* Dashboard-only: the QR opens under the row rather than sitting beside it.
   Width is pinned to the code itself so the caption centers under the image
   instead of across the whole card. */
.bps-qr-drop {
	margin-top: 14px;
	width: 96px;
}

.bps-dismiss {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 0;
	background: transparent;
	color: var(--ed-text-muted);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bps-dismiss:hover {
	background: #f0f3f7;
	color: #3c4c5d;
}

@media (max-width: 575.98px) {
	.bps-body {
		flex-direction: column;
	}

	/* Stack the link and its buttons on a phone rather than squeezing them. */
	.bps-row {
		flex-wrap: wrap;
	}

	.bps-qr {
		flex: 0 0 auto;
		align-self: flex-start;
	}

	.bps-link,
	.bps-btn {
		width: 100%;
	}

	.bps-btn-icon {
		width: 100%;
	}
}