/* ==========================================================
   CHIRALA RESORTS
   BOOKING DETAILS PAGE
========================================================== */

:root {
	--crms-details-primary: #0f766e;
	--crms-details-primary-dark: #0b5f59;
	--crms-details-primary-soft: #ecfdf5;

	--crms-details-text: #101828;
	--crms-details-muted: #667085;
	--crms-details-subtle: #98a2b3;

	--crms-details-border: #e4e7ec;
	--crms-details-surface: #ffffff;
	--crms-details-background: #eef7fb;

	--crms-details-success: #067647;
	--crms-details-success-bg: #ecfdf3;
	--crms-details-warning: #b54708;
	--crms-details-warning-bg: #fffaeb;
	--crms-details-danger: #b42318;
	--crms-details-danger-bg: #fef3f2;

	--crms-details-shadow:
		0 16px 42px rgba(15, 23, 42, 0.08);

	--crms-details-radius: 20px;
}

/* ==========================================================
   PAGE SHELL
========================================================== */

body.page-booking-details {
	background: var(--crms-details-background);
}

.crms-booking-details-page,
.crms-booking-details-page * {
	box-sizing: border-box;
}

.crms-booking-details-page {
	width: 100%;
	min-height: calc(100vh - 100px);
	padding: 42px 20px 76px;

	background:
		radial-gradient(
			circle at 88% 8%,
			rgba(15, 118, 110, 0.08),
			transparent 30%
		),
		var(--crms-details-background);

	color: var(--crms-details-text);
}

.crms-booking-details-page__container {
	width: min(1180px, 100%);
	margin: 0 auto;
}

/* Remove parent-theme width restrictions */

body.page-booking-details .site-content,
body.page-booking-details .container,
body.page-booking-details .content-area,
body.page-booking-details .site-main,
body.page-booking-details .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================================
   HEADER
========================================================== */

.crms-booking-details-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;

	margin-bottom: 26px;
	padding: 30px 32px;

	background:
		linear-gradient(
			135deg,
			#064e4b 0%,
			#0f766e 62%,
			#12938a 100%
		);

	border-radius: 22px;
	color: #ffffff;

	box-shadow:
		0 22px 58px rgba(15, 118, 110, 0.2);
}

.crms-booking-details-header > div:first-child {
	min-width: 0;
}

.crms-booking-details-header__eyebrow {
	display: inline-flex;

	margin-bottom: 10px;
	padding: 7px 11px;

	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;

	color: rgba(255, 255, 255, 0.88);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.crms-booking-details-header h1 {
	margin: 0 0 10px;

	color: #ffffff;
	font-size: clamp(32px, 5vw, 46px);
	font-weight: 850;
	letter-spacing: -0.04em;
	line-height: 1.08;
}

.crms-booking-details-header p {
	max-width: 620px;
	margin: 0;

	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	line-height: 1.7;
}

.crms-booking-details-header__status {
	flex: 0 0 auto;

	min-width: 185px;
	padding: 16px 18px;

	background: rgba(255, 255, 255, 0.11);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;

	backdrop-filter: blur(8px);
}

.crms-booking-details-header__status span {
	display: block;

	margin-bottom: 7px;

	color: rgba(255, 255, 255, 0.72);
	font-size: 10px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.crms-booking-details-header__status strong {
	display: inline-flex;
	align-items: center;

	padding: 7px 11px;
	border-radius: 999px;

	font-size: 12px;
	font-weight: 800;
}

.crms-booking-details-header__status strong.is-active {
	background: rgba(236, 253, 243, 0.16);
	color: #d1fadf;
}

.crms-booking-details-header__status strong.is-cancelled {
	background: rgba(254, 243, 242, 0.15);
	color: #fecaca;
}

/* ==========================================================
   MAIN LAYOUT
========================================================== */

.crms-booking-details-layout {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		350px;
	gap: 26px;
	align-items: start;
}

.crms-booking-details-main {
	display: grid;
	gap: 22px;
	min-width: 0;
}

.crms-booking-details-sidebar {
	position: sticky;
	top: 24px;

	display: grid;
	gap: 18px;

	min-width: 0;
}

/* ==========================================================
   CARDS
========================================================== */

.crms-booking-details-card {
	overflow: hidden;

	padding: 28px;

	background: var(--crms-details-surface);
	border: 1px solid var(--crms-details-border);
	border-radius: var(--crms-details-radius);

	box-shadow: var(--crms-details-shadow);
}

.crms-booking-details-card__header {
	margin-bottom: 22px;
	padding-bottom: 16px;

	border-bottom: 1px solid var(--crms-details-border);
}

.crms-booking-details-card__header h2 {
	margin: 0;

	color: var(--crms-details-text);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.25;
}

/* ==========================================================
   PROPERTY CARD
========================================================== */

.crms-booking-details-property {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 22px;
	align-items: center;

	padding: 18px;
}

.crms-booking-details-property__image {
	height: 148px;

	overflow: hidden;

	background: #f2f4f7;
	border-radius: 14px;
}

.crms-booking-details-property__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.crms-booking-details-property__content {
	min-width: 0;
}

.crms-booking-details-property__content > span {
	display: block;

	margin-bottom: 7px;

	color: var(--crms-details-primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.crms-booking-details-property__content h2 {
	margin: 0 0 8px;

	color: var(--crms-details-text);
	font-size: 27px;
	font-weight: 820;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.crms-booking-details-property__content p {
	margin: 0 0 15px;

	color: var(--crms-details-muted);
	font-size: 14px;
	font-weight: 650;
}

.crms-booking-details-property__content a {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	color: var(--crms-details-primary);
	font-size: 13px;
	font-weight: 750;
	text-decoration: none;
}

.crms-booking-details-property__content a:hover {
	color: var(--crms-details-primary-dark);
}

/* ==========================================================
   STAY DETAILS
========================================================== */

.crms-booking-details-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.crms-booking-details-grid > div {
	padding: 18px;

	background: #f8fafc;
	border: 1px solid #edf0f3;
	border-radius: 14px;
}

.crms-booking-details-grid span,
.crms-booking-details-guest span,
.crms-booking-details-request > span {
	display: block;

	margin-bottom: 6px;

	color: var(--crms-details-muted);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.crms-booking-details-grid strong {
	display: block;

	color: var(--crms-details-text);
	font-size: 15px;
	font-weight: 780;
	line-height: 1.45;
}

/* ==========================================================
   GUEST DETAILS
========================================================== */

.crms-booking-details-guest {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.crms-booking-details-guest > div {
	min-width: 0;
}

.crms-booking-details-guest strong {
	display: block;

	overflow-wrap: anywhere;

	color: var(--crms-details-text);
	font-size: 14px;
	font-weight: 720;
	line-height: 1.5;
}

.crms-booking-details-request {
	margin-top: 22px;
	padding: 17px;

	background: #f8fafc;
	border: 1px solid #edf0f3;
	border-radius: 13px;
}

.crms-booking-details-request p {
	margin: 0;

	color: var(--crms-details-muted);
	font-size: 13px;
	line-height: 1.65;
}

/* ==========================================================
   TIMELINE
========================================================== */

.crms-booking-timeline {
	position: relative;
	display: grid;
	gap: 0;
}

.crms-booking-timeline::before {
	position: absolute;
	top: 22px;
	bottom: 22px;
	left: 20px;

	width: 2px;

	background: #e4e7ec;

	content: "";
}

.crms-booking-timeline > div {
	position: relative;
	z-index: 1;

	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 14px;
	align-items: flex-start;

	padding: 0 0 24px;
}

.crms-booking-timeline > div:last-child {
	padding-bottom: 0;
}

.crms-booking-timeline > div > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	background: #ffffff;
	border: 2px solid #d0d5dd;
	border-radius: 50%;

	color: var(--crms-details-muted);
	font-size: 13px;
	font-weight: 850;
}

.crms-booking-timeline > div.is-complete > span {
	background: var(--crms-details-primary);
	border-color: var(--crms-details-primary);

	color: #ffffff;
}

.crms-booking-timeline > div.is-current > span {
	background: var(--crms-details-primary-soft);
	border-color: var(--crms-details-primary);

	color: var(--crms-details-primary);
	box-shadow:
		0 0 0 5px rgba(15, 118, 110, 0.1);
}

.crms-booking-timeline strong {
	display: block;

	margin: 4px 0 4px;

	color: var(--crms-details-text);
	font-size: 14px;
	font-weight: 760;
}

.crms-booking-timeline small {
	display: block;

	color: var(--crms-details-muted);
	font-size: 12px;
	line-height: 1.5;
}

/* ==========================================================
   PAYMENT SIDEBAR
========================================================== */

.crms-booking-details-payment {
	padding: 25px;
}

.crms-booking-details-payment__total {
	margin-bottom: 20px;
	padding: 20px;

	background:
		linear-gradient(
			135deg,
			#ecfdf5,
			#f7fffd
		);

	border: 1px solid #b7e5dc;
	border-radius: 15px;
}

.crms-booking-details-payment__total span {
	display: block;

	margin-bottom: 8px;

	color: var(--crms-details-muted);
	font-size: 12px;
	font-weight: 700;
}

.crms-booking-details-payment__total strong {
	display: block;

	color: var(--crms-details-primary);
	font-size: 32px;
	font-weight: 850;
	letter-spacing: -0.04em;
	line-height: 1;
}

.crms-booking-details-payment__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	padding: 14px 0;

	border-bottom: 1px solid var(--crms-details-border);
}

.crms-booking-details-payment__row span {
	color: var(--crms-details-muted);
	font-size: 12px;
	font-weight: 650;
}

.crms-booking-details-payment__row strong {
	color: var(--crms-details-text);
	font-size: 13px;
	font-weight: 780;
	text-align: right;
}

.crms-booking-details-payment__row strong.is-paid {
	padding: 6px 10px;

	background: var(--crms-details-success-bg);
	border-radius: 999px;

	color: var(--crms-details-success);
}

.crms-booking-details-payment__row strong.is-pending {
	padding: 6px 10px;

	background: var(--crms-details-warning-bg);
	border-radius: 999px;

	color: var(--crms-details-warning);
}

.crms-booking-details-pay {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 52px;
	margin-top: 20px;
	padding: 13px 18px;

	background: var(--crms-details-primary);
	border: 0;
	border-radius: 12px;

	color: #ffffff;
	font-size: 14px;
	font-weight: 800;

	box-shadow:
		0 10px 24px rgba(15, 118, 110, 0.22);
}

.crms-booking-details-pay:disabled {
	background: #cbd5d9;
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.86;
}

.crms-booking-details-payment__note {
	margin: 10px 0 0;

	color: var(--crms-details-muted);
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}

/* ==========================================================
   ACTIONS
========================================================== */

.crms-booking-details-actions {
	display: grid;
	gap: 12px;
}

.crms-booking-details-actions a {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 50px;
	padding: 13px 18px;

	border-radius: 12px;

	font-size: 14px;
	font-weight: 780;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;

	transition:
		transform 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.crms-booking-details-actions__primary {
	background: var(--crms-details-primary);
	border: 1px solid var(--crms-details-primary);

	color: #ffffff !important;

	box-shadow:
		0 10px 24px rgba(15, 118, 110, 0.22);
}

.crms-booking-details-actions__primary:hover {
	background: var(--crms-details-primary-dark);
	border-color: var(--crms-details-primary-dark);

	color: #ffffff !important;

	transform: translateY(-2px);

	box-shadow:
		0 14px 28px rgba(15, 118, 110, 0.28);
}

.crms-booking-details-actions__secondary {
	background: #ffffff;
	border: 1px solid var(--crms-details-border);

	color: var(--crms-details-text) !important;
}

.crms-booking-details-actions__secondary:hover {
	background: #f8fafc;
	border-color: #b7c0ca;

	color: var(--crms-details-text) !important;

	transform: translateY(-1px);
}

/* ==========================================================
   INVALID / UNAUTHORIZED PAGE
========================================================== */

.crms-booking-details-error {
	width: min(580px, 100%);
	margin: 70px auto;
	padding: 44px 34px;

	background: #ffffff;
	border: 1px solid #fecdca;
	border-radius: 22px;

	text-align: center;

	box-shadow: var(--crms-details-shadow);
}

.crms-booking-details-error__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 66px;
	height: 66px;
	margin-bottom: 20px;

	background: var(--crms-details-danger-bg);
	border-radius: 50%;

	color: var(--crms-details-danger);
	font-size: 30px;
	font-weight: 900;
}

.crms-booking-details-error h1 {
	margin: 0 0 12px;

	color: var(--crms-details-text);
	font-size: 31px;
	font-weight: 820;
	letter-spacing: -0.03em;
}

.crms-booking-details-error p {
	margin: 0 0 24px;

	color: var(--crms-details-muted);
	font-size: 14px;
	line-height: 1.65;
}

.crms-booking-details-error__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.crms-booking-details-error__actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 46px;
	padding: 12px 20px;

	border-radius: 11px;

	font-size: 13px;
	font-weight: 750;
	text-decoration: none !important;
}

.crms-booking-details-error__actions a:first-child {
	background: var(--crms-details-primary);
	color: #ffffff !important;
}

.crms-booking-details-error__actions a:last-child {
	background: #ffffff;
	border: 1px solid var(--crms-details-border);
	color: var(--crms-details-text) !important;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 980px) {

	.crms-booking-details-layout {
		grid-template-columns: 1fr;
	}

	.crms-booking-details-sidebar {
		position: static;
		grid-template-columns: minmax(0, 1fr) 280px;
	}

	.crms-booking-details-actions {
		align-self: start;
	}
}

@media (max-width: 760px) {

	.crms-booking-details-page {
		padding: 24px 14px 56px;
	}

	.crms-booking-details-header {
		flex-direction: column;
		padding: 26px 22px;
		border-radius: 18px;
	}

	.crms-booking-details-header__status {
		width: 100%;
		min-width: 0;
	}

	.crms-booking-details-property {
		grid-template-columns: 1fr;
	}

	.crms-booking-details-property__image {
		height: 220px;
	}

	.crms-booking-details-grid,
	.crms-booking-details-guest {
		grid-template-columns: 1fr;
	}

	.crms-booking-details-sidebar {
		grid-template-columns: 1fr;
	}

	.crms-booking-details-card {
		padding: 21px 18px;
		border-radius: 17px;
	}
}

@media (max-width: 430px) {

	.crms-booking-details-header h1 {
		font-size: 30px;
	}

	.crms-booking-details-property__image {
		height: 185px;
	}

	.crms-booking-details-payment__total strong {
		font-size: 28px;
	}

	.crms-booking-details-error {
		padding: 36px 22px;
	}
}