/**
 * Caribico Unified — Bookings shell (v0.3.2)
 * Integrates into the existing Caribico Booking section visual language.
 * Owned by caribico-unified. No WebBeds CSS dependency / class coupling.
 */

/* Page shell: match Hotels bookings portal surface */
body.caribico-un-page {
	background: #f6f8fa !important;
}

body.caribico-un-page .entry-header,
body.caribico-un-page .page-header,
body.caribico-un-page .wp-block-post-title,
body.caribico-un-page h1.entry-title,
body.caribico-un-page .entry-title {
	display: none !important;
}

body.caribico-un-page .entry-content,
body.caribico-un-page .wp-block-post-content,
body.caribico-un-page article,
body.caribico-un-page .site-main {
	background: transparent !important;
	max-width: none !important;
}

.caribico-un {
	--cu-primary: #1b5a7a;
	--cu-primary-hover: #164a65;
	--cu-primary-light: #eaf3f7;
	--cu-primary-border: #c9dde7;
	--cu-page: #f6f8fa;
	--cu-surface: #ffffff;
	--cu-border: #e4e9ed;
	--cu-border-strong: #d0d5dd;
	--cu-text: #101828;
	--cu-text-secondary: #344054;
	--cu-text-muted: #667085;
	--cu-success: #027a48;
	--cu-success-soft: #ecfdf3;
	--cu-success-border: #abefc6;
	--cu-warning: #b54708;
	--cu-warning-soft: #fffaeb;
	--cu-warning-border: #fedf89;
	--cu-neutral-soft: #f2f4f7;
	--cu-max: 1180px;
	--cu-gap: 16px;
	--cu-control-h: 36px;
	--cu-radius: 10px;
	--cu-radius-sm: 8px;
	--cu-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	/* Hotels row grid minus one payment column: type lives in Reference */
	--cu-row-cols: minmax(118px, 0.55fr) minmax(300px, 2.4fr) minmax(140px, 1.1fr) minmax(84px, 0.6fr) 44px 84px;

	box-sizing: border-box;
	max-width: var(--cu-max);
	margin: 0 auto;
	padding: 12px 20px 48px;
	font-family: var(--cu-font);
	color: var(--cu-text);
	background: transparent;
}

.caribico-un *,
.caribico-un *::before,
.caribico-un *::after {
	box-sizing: border-box;
}

.caribico-un .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Active Bookings / History — Hotels lifecycle */
.caribico-un-lifecycle {
	display: flex;
	gap: 0;
	margin: 0 0 14px;
	border: 1px solid var(--cu-border);
	border-radius: var(--cu-radius);
	background: var(--cu-surface);
	overflow: hidden;
	width: fit-content;
	max-width: 100%;
}

.caribico-un-lifecycle-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	border-right: 1px solid var(--cu-border);
	background: transparent;
	color: var(--cu-text-muted);
	font: 650 13px/1.2 var(--cu-font);
	cursor: pointer;
}

.caribico-un-lifecycle-tab:last-child {
	border-right: 0;
}

.caribico-un-lifecycle-tab:hover,
.caribico-un-lifecycle-tab:focus-visible {
	background: #f8fafb;
	color: var(--cu-text);
	outline: none;
}

.caribico-un-lifecycle-tab.is-active {
	background: var(--cu-primary-light);
	color: var(--cu-primary);
}

.caribico-un-lifecycle-count {
	display: inline-flex;
	min-width: 20px;
	justify-content: center;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--cu-neutral-soft);
	color: #475467;
	font-size: 11px;
	font-weight: 700;
}

.caribico-un-lifecycle-tab.is-active .caribico-un-lifecycle-count {
	background: #fff;
	color: var(--cu-primary);
}

/* Hotels-style toolbar */
.caribico-un-toolbar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 var(--cu-gap);
	padding: 14px 16px;
	border: 1px solid var(--cu-border);
	border-radius: var(--cu-radius);
	background: var(--cu-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.caribico-un-toolbar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.caribico-un-toolbar #caribico-un-search {
	flex: 1 1 260px;
	min-width: 220px;
	min-height: var(--cu-control-h);
	border: 1px solid var(--cu-border-strong);
	border-radius: var(--cu-radius-sm);
	padding: 0 12px;
	background: #fff;
	color: var(--cu-text);
	font-size: 13px;
	font-family: inherit;
}

.caribico-un-toolbar select {
	min-width: 140px;
	min-height: var(--cu-control-h);
	border: 1px solid var(--cu-border-strong);
	border-radius: var(--cu-radius-sm);
	padding: 0 10px;
	background: #fff;
	color: var(--cu-text);
	font-size: 13px;
	font-family: inherit;
}

.caribico-un-filter-label {
	color: var(--cu-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.caribico-un-clear {
	appearance: none;
	margin-left: auto;
	min-height: var(--cu-control-h);
	padding: 0 14px;
	border: 1px solid var(--cu-primary);
	border-radius: var(--cu-radius-sm);
	background: #fff;
	color: var(--cu-primary);
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.caribico-un-clear:hover,
.caribico-un-clear:focus-visible {
	background: var(--cu-primary-light);
	outline: none;
}

.caribico-un-state {
	min-height: 80px;
}

.caribico-un-message {
	padding: 28px;
	border: 1px dashed var(--cu-border-strong);
	border-radius: 12px;
	background: #fff;
	text-align: center;
	color: var(--cu-text-muted);
	font-size: 14px;
	line-height: 1.45;
}

.caribico-un-message p {
	margin: 0;
}

.caribico-un-message.is-error {
	color: #b42318;
	border-color: #fda29b;
	border-style: solid;
}

.caribico-un-list {
	display: block;
}

.caribico-un-table {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.caribico-un-table-head,
.caribico-un-row {
	display: grid;
	grid-template-columns: var(--cu-row-cols);
	gap: 10px;
	align-items: center;
}

.caribico-un-table-head {
	padding: 0 14px 6px;
	color: var(--cu-text-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Hotels booking row */
.caribico-un-row {
	padding: 12px 14px;
	border: 1px solid var(--cu-border);
	border-radius: 9px;
	background: var(--cu-surface);
}

.caribico-un-row[data-status-bucket="cancelled"] .caribico-un-row-ref,
.caribico-un-row[data-status-bucket="cancelled"] .caribico-un-row-service,
.caribico-un-row[data-status-bucket="cancelled"] .caribico-un-row-dates,
.caribico-un-row[data-status-bucket="cancelled"] .caribico-un-row-amount,
.caribico-un-row[data-status-bucket="cancelled"] .caribico-un-row-agency {
	opacity: 0.55;
}

.caribico-un-table.has-agency-col .caribico-un-table-head,
.caribico-un-table.has-agency-col .caribico-un-row {
	grid-template-columns: minmax(68px, 0.36fr) minmax(100px, 0.5fr) minmax(260px, 2.25fr) minmax(130px, 1fr) minmax(80px, 0.55fr) 44px 84px;
}

.caribico-un-row-agency {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
}

.caribico-un-agency-line {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
}

.caribico-un-agency-sub {
	display: block;
	margin: 3px 0 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--cu-text-muted);
}

.caribico-un-row-ref {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.caribico-un-type {
	display: inline-block;
	margin: 0 0 4px;
	padding: 2px 6px;
	border-radius: 4px;
	border: 1px solid var(--cu-border);
	background: var(--cu-page);
	color: var(--cu-text-muted);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.caribico-un-type.is-transfer {
	background: var(--cu-primary-light);
	border-color: var(--cu-primary-border);
	color: var(--cu-primary);
}

.caribico-un-ref-code {
	display: block;
	color: var(--cu-text-secondary);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caribico-un-ref-agency {
	display: block;
	margin: 3px 0 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--cu-text-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

.caribico-un-row-service {
	min-width: 0;
}

.caribico-un-service-title {
	display: block;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--cu-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caribico-un-service-sub {
	margin: 3px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--cu-text-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

.caribico-un-row-dates {
	min-width: 0;
}

.caribico-un-dates-primary {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--cu-text);
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caribico-un-dates-sub {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--cu-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caribico-un-row-amount {
	text-align: right;
	justify-self: end;
	min-width: 0;
}

.caribico-un-row-amount strong {
	display: block;
	color: var(--cu-text);
	font-size: 13px;
}

.caribico-un-amount-review {
	margin: 0;
	color: var(--cu-text);
	font-size: 13px;
	font-weight: 600;
}
	font-weight: 500;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.caribico-un-row-status {
	justify-self: end;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.caribico-un-status-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 28px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--cu-border);
	background: var(--cu-page);
	color: var(--cu-text-muted);
	position: relative;
}

.caribico-un-status-pill svg {
	width: 16px;
	height: 16px;
	display: block;
}

.caribico-un-status-pill.is-confirmed {
	background: var(--cu-success-soft);
	color: var(--cu-success);
	border-color: var(--cu-success-border);
}

.caribico-un-status-pill.is-pending {
	background: var(--cu-warning-soft);
	color: var(--cu-warning);
	border-color: var(--cu-warning-border);
}

.caribico-un-status-pill.is-cancelled {
	background: var(--cu-neutral-soft);
	color: #475467;
	border-color: #d0d5dd;
}

@media (hover: hover) and (pointer: fine) {
	.caribico-un-status-pill[data-tooltip]:not([data-tooltip=""])::after {
		content: attr(data-tooltip);
		position: absolute;
		left: 50%;
		bottom: calc(100% + 6px);
		transform: translateX(-50%) translateY(2px);
		z-index: 40;
		box-sizing: border-box;
		max-width: 160px;
		padding: 4px 8px;
		border-radius: 6px;
		background: #101828;
		color: #fff;
		font-size: 11px;
		font-weight: 500;
		line-height: 1.3;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.12s ease, transform 0.12s ease;
	}

	.caribico-un-status-pill[data-tooltip]:not([data-tooltip=""]):hover::after,
	.caribico-un-status-pill[data-tooltip]:not([data-tooltip=""]):focus-visible::after {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.caribico-un-row-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	justify-self: end;
}

.caribico-un-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 72px;
	min-height: 30px;
	height: 30px;
	width: 84px;
	padding: 0 10px;
	border: 1px solid var(--cu-primary);
	border-radius: var(--cu-radius-sm);
	background: #fff;
	color: var(--cu-primary);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
}

.caribico-un-open:hover,
.caribico-un-open:focus-visible {
	background: var(--cu-primary-light);
	outline: none;
}

/* Status legend — Hotels pattern */
.caribico-un-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 16px auto 12px;
	padding: 0 2px;
}

.caribico-un-legend-title {
	color: var(--cu-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.caribico-un-legend-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}

.caribico-un-legend-list li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cu-text-secondary);
	font-size: 12px;
	white-space: nowrap;
}

@media (max-width: 960px) {
	.caribico-un-table-head {
		display: none;
	}

	.caribico-un-row {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.caribico-un-row-ref,
	.caribico-un-row-service {
		grid-column: 1 / -1;
	}

	.caribico-un-row-dates {
		grid-column: 1;
	}

	.caribico-un-row-amount {
		grid-column: 2;
		justify-self: end;
		text-align: right;
	}

	.caribico-un-row-status {
		grid-column: 1;
		justify-self: start;
	}

	.caribico-un-row-actions {
		grid-column: 2;
		justify-content: flex-end;
	}

	.caribico-un-service-title,
	.caribico-un-service-sub,
	.caribico-un-dates-primary {
		white-space: normal;
	}
}

@media (max-width: 800px) {
	.caribico-un {
		padding: 12px 14px 40px;
	}

	.caribico-un-toolbar-row {
		flex-direction: column;
		align-items: stretch;
	}

	.caribico-un-toolbar #caribico-un-search,
	.caribico-un-toolbar select,
	.caribico-un-clear {
		width: 100%;
		margin-left: 0;
	}

	.caribico-un-lifecycle {
		width: 100%;
	}

	.caribico-un-lifecycle-tab {
		flex: 1;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.caribico-un-row {
		grid-template-columns: 1fr;
	}

	.caribico-un-row-amount,
	.caribico-un-row-status,
	.caribico-un-row-actions {
		grid-column: 1;
		justify-self: start;
		text-align: left;
	}

	.caribico-un-open {
		width: 110px;
	}

	.caribico-un-legend-list {
		flex-wrap: wrap;
	}
}