/* Copyright (c) 2026 ADS Solutions. See LICENSE.txt for dual-license terms. */
/*
 * Customer Portal — scoped under `.cb-customer` so it can never leak into
 * the host theme even though the portal page renders without theme chrome.
 * Mirrors the .cb-avail-search scoping pattern used by the search shortcode.
 *
 * The CSS variables (--cb-c-primary, --cb-space-*, etc.) come from the
 * shared `assets/src/booking/_tokens.scss` design system enqueued by the
 * PHP bootstrap. We only define portal-specific layout + components here.
 */

.cb-customer,
.cb-customer * {
	box-sizing: border-box;
}

.cb-customer {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: var( --cb-c-text, #0f172a );
	background: var( --cb-c-background, #f3f4f6 );
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.5;
}

.cb-customer--centered {
	align-items: center;
	justify-content: center;
}

/* ── Chrome ─────────────────────────────────────────────────────────── */

.cb-customer-header {
	background: #ffffff;
	border-bottom: 1px solid rgba( 15, 23, 42, 0.08 );
}

.cb-customer-header-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.cb-customer-logo {
	max-height: 36px;
	width: auto;
}

.cb-customer-brand {
	font-weight: 700;
	font-size: 16px;
	color: var( --cb-c-text, #0f172a );
}

.cb-customer-portal-title {
	margin-left: auto;
	color: var( --cb-c-muted, #64748b );
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cb-customer-main {
	flex: 1;
	max-width: 720px;
	margin: 0 auto;
	padding: 32px 20px;
	width: 100%;
}

.cb-customer-footer {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 20px 32px;
	color: var( --cb-c-muted, #64748b );
	font-size: 12px;
	text-align: center;
	width: 100%;
}
.cb-customer-footer a {
	color: var( --cb-c-muted, #64748b );
}

/* ── Cards & typography ─────────────────────────────────────────────── */

.cb-customer-card {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.06 );
	padding: 24px;
	margin: 0 0 20px;
}
.cb-customer-card--summary dl,
.cb-customer-card--summary .cb-customer-h3 {
	margin: 0;
}

.cb-customer-h1 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.cb-customer-h2 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
}
.cb-customer-h3 {
	margin: 16px 0 8px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --cb-c-muted, #64748b );
}

.cb-customer-lede {
	margin: 0 0 16px;
	color: var( --cb-c-muted, #475569 );
	font-size: 15px;
}

.cb-customer-hint {
	margin: 16px 0 0;
	color: var( --cb-c-muted, #64748b );
	font-size: 13px;
}

/* ── Dashboard layout ───────────────────────────────────────────────── */

.cb-customer-dashboard-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 24px;
}
.cb-customer-dashboard-head h1 {
	margin: 0;
}
.cb-customer-dashboard-head > div {
	flex: 1;
}

.cb-customer-dl {
	display: grid;
	grid-template-columns: minmax( 110px, 30% ) 1fr;
	gap: 8px 16px;
	margin: 0;
	font-size: 14px;
}
.cb-customer-dl dt {
	color: var( --cb-c-muted, #64748b );
	font-weight: 500;
}
.cb-customer-dl dd {
	margin: 0;
	font-weight: 500;
}

.cb-customer-passengers {
	list-style: disc;
	padding-left: 20px;
	margin: 0;
	font-size: 14px;
}
.cb-customer-passengers li {
	margin: 2px 0;
}

/* ── Payment status card ────────────────────────────────────────────── */

.cb-customer-pay-amounts {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 12px;
	margin: 4px 0 16px;
}
.cb-customer-pay-label {
	display: block;
	font-size: 12px;
	color: var( --cb-c-muted, #64748b );
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.cb-customer-pay-value {
	display: block;
	font-size: 18px;
	font-weight: 600;
	margin-top: 2px;
}
.cb-customer-pay-bar {
	height: 6px;
	background: rgba( 15, 23, 42, 0.08 );
	border-radius: 999px;
	overflow: hidden;
	margin: 0 0 12px;
}
.cb-customer-pay-bar-fill {
	height: 100%;
	background: var( --cb-c-primary, #0ea5e9 );
	transition: width 0.3s ease;
}
.cb-customer-pay--paid    .cb-customer-pay-bar-fill { background: #16a34a; }
.cb-customer-pay--partial .cb-customer-pay-bar-fill { background: #f59e0b; }
.cb-customer-pay-msg {
	margin: 0;
	font-size: 14px;
	color: var( --cb-c-muted, #475569 );
}

/* ── Status badge ──────────────────────────────────────────────────── */

.cb-customer-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: rgba( 15, 23, 42, 0.08 );
	color: var( --cb-c-muted, #475569 );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cb-customer-status--ok      { background: rgba(  22, 163,  74, 0.12 ); color: #166534; }
.cb-customer-status--pending { background: rgba( 245, 158,  11, 0.14 ); color: #92400e; }
.cb-customer-status--off     { background: rgba( 220,  38,  38, 0.10 ); color: #991b1b; }

/* ── Forms ─────────────────────────────────────────────────────────── */

.cb-customer-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cb-customer-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}
.cb-customer-field > span {
	color: var( --cb-c-muted, #475569 );
	font-weight: 500;
	font-size: 13px;
}
.cb-customer-field input,
.cb-customer-field textarea {
	font: inherit;
	padding: 10px 12px;
	border: 1px solid rgba( 15, 23, 42, 0.16 );
	border-radius: 8px;
	background: #ffffff;
	color: var( --cb-c-text, #0f172a );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cb-customer-field input:focus,
.cb-customer-field textarea:focus {
	outline: none;
	border-color: var( --cb-c-primary, #0ea5e9 );
	box-shadow: 0 0 0 3px rgba( 14, 165, 233, 0.15 );
}

.cb-customer-error {
	background: rgba( 220, 38, 38, 0.08 );
	color: #991b1b;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
}

.cb-customer-notice {
	padding: 12px 14px;
	border-radius: 10px;
	margin: 0 0 16px;
	font-size: 14px;
}
.cb-customer-notice--muted {
	background: rgba( 15, 23, 42, 0.04 );
	color: var( --cb-c-muted, #475569 );
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.cb-customer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.cb-customer-btn {
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cb-customer-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.cb-customer-btn--primary {
	background: var( --cb-c-primary, #0ea5e9 );
	color: #ffffff;
}
.cb-customer-btn--primary:hover:not( :disabled ) { filter: brightness( 0.95 ); }
.cb-customer-btn--outline {
	background: transparent;
	color: var( --cb-c-text, #0f172a );
	border-color: rgba( 15, 23, 42, 0.18 );
}
.cb-customer-btn--outline:hover:not( :disabled ) { background: rgba( 15, 23, 42, 0.04 ); }
.cb-customer-btn--ghost {
	background: transparent;
	color: var( --cb-c-muted, #475569 );
}
.cb-customer-btn--ghost:hover:not( :disabled ) { color: var( --cb-c-text, #0f172a ); }
.cb-customer-btn--danger {
	background: #dc2626;
	color: #ffffff;
}
.cb-customer-btn--danger:hover:not( :disabled ) { filter: brightness( 0.95 ); }
.cb-customer-btn--danger-outline {
	background: transparent;
	color: #991b1b;
	border-color: rgba( 220, 38, 38, 0.4 );
}
.cb-customer-btn--danger-outline:hover:not( :disabled ) { background: rgba( 220, 38, 38, 0.06 ); }

/* ── Modal ─────────────────────────────────────────────────────────── */

.cb-customer-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 15, 23, 42, 0.5 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 100;
}
.cb-customer-modal {
	background: #ffffff;
	border-radius: 12px;
	max-width: 480px;
	width: 100%;
	padding: 24px;
	box-shadow: 0 20px 50px rgba( 15, 23, 42, 0.25 );
	max-height: 90vh;
	overflow: auto;
}
.cb-customer-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

.cb-customer-modal-overlay--receipt {
	padding: 16px;
}
.cb-customer-modal--receipt {
	max-width: 720px;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.cb-customer-receipt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	border-bottom: 1px solid rgba( 15, 23, 42, 0.08 );
}
.cb-customer-receipt-head-actions {
	display: flex;
	gap: 8px;
}
.cb-customer-receipt-body {
	flex: 1;
	min-height: 320px;
	overflow: auto;
	padding: 0;
	background: #f8fafc;
}
.cb-customer-receipt-frame {
	width: 100%;
	height: 60vh;
	border: 0;
	background: #ffffff;
}

/* ── Spinner ───────────────────────────────────────────────────────── */

.cb-customer-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba( 15, 23, 42, 0.12 );
	border-top-color: var( --cb-c-primary, #0ea5e9 );
	border-radius: 50%;
	animation: cb-customer-spin 0.8s linear infinite;
}
@keyframes cb-customer-spin {
	to { transform: rotate( 360deg ); }
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
	.cb-customer-main { padding: 20px 16px; }
	.cb-customer-card { padding: 20px; }
	.cb-customer-pay-amounts { grid-template-columns: 1fr; }
	.cb-customer-dl { grid-template-columns: 1fr; }
	.cb-customer-dl dt { font-size: 12px; }
	.cb-customer-dashboard-head { flex-direction: column; }
	.cb-customer-dashboard-head > button { align-self: flex-end; }
	.cb-customer-actions .cb-customer-btn { flex: 1; min-width: 130px; }
}

/* ── Print ─────────────────────────────────────────────────────────── */

@media print {
	body * { visibility: hidden !important; }
	.cb-customer-receipt-frame,
	.cb-customer-receipt-frame * { visibility: visible !important; }
	.cb-customer-receipt-frame {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}
}