/* ==========================================================
   CHIRALA RESORTS
   BOOKING SUCCESS PAGE
========================================================== */

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

	--crms-success-text: #101828;
	--crms-success-muted: #667085;
	--crms-success-border: #e4e7ec;
	--crms-success-background: #eef7fb;
	--crms-success-surface: #ffffff;

	--crms-success-warning: #b54708;
	--crms-success-warning-bg: #fffaeb;
	--crms-success-warning-border: #fedf89;

	--crms-success-error: #b42318;
	--crms-success-error-bg: #fef3f2;
	--crms-success-error-border: #fecdca;

	--crms-success-shadow:
		0 18px 50px rgba(15, 23, 42, 0.08);

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

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

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

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

.crms-success-page {
	width: 100%;
	min-height: calc(100vh - 100px);
	padding: 46px 20px 80px;

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

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

.crms-success-page__container {
	width: min(1120px, 100%);
	margin: 0 auto;
}

/* Remove parent-theme page restrictions */

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

/* ==========================================================
   SUCCESS HERO
========================================================== */

.crms-success-hero {
	position: relative;

	overflow: hidden;

	margin-bottom: 28px;
	padding: 42px 34px;

	background:
		radial-gradient(
			circle at 88% 18%,
			rgba(255, 255, 255, 0.15),
			transparent 31%
		),
		linear-gradient(
			135deg,
			#064e4b 0%,
			#0f766e 58%,
			#12938a 100%
		);

	border-radius: 24px;

	color: #ffffff;
	text-align: center;

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

.crms-success-hero::before,
.crms-success-hero::after {
	position: absolute;

	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 50%;

	content: "";
	pointer-events: none;
}

.crms-success-hero::before {
	top: -120px;
	right: -75px;

	width: 300px;
	height: 300px;
}

.crms-success-hero::after {
	bottom: -180px;
	left: -100px;

	width: 360px;
	height: 360px;
}

.crms-success-hero > * {
	position: relative;
	z-index: 2;
}

.crms-success-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

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

	background: #ffffff;
	border-radius: 50%;

	color: var(--crms-success-primary);
	font-size: 38px;
	font-weight: 900;

	box-shadow:
		0 12px 30px rgba(0, 0, 0, 0.15);
}

.crms-success-hero__eyebrow {
	display: block;

	margin-bottom: 10px;

	color: rgba(255, 255, 255, 0.82);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.crms-success-hero h1 {
	margin: 0 0 12px;

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

.crms-success-hero p {
	max-width: 650px;
	margin: 0 auto;

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

.crms-success-hero__reference {
	display: inline-flex;
	align-items: center;
	gap: 12px;

	margin-top: 24px;
	padding: 12px 18px;

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

	backdrop-filter: blur(8px);
}

.crms-success-hero__reference span {
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
	font-weight: 650;
}

.crms-success-hero__reference strong {
	color: #ffffff;
	font-size: 15px;
	font-weight: 850;
	letter-spacing: 0.05em;
}

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

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

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

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

	display: grid;
	gap: 18px;

	min-width: 0;
}

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

.crms-success-card {
	overflow: hidden;

	padding: 28px;

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

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

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

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

.crms-success-card__header h2 {
	margin: 0;

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

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

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

	padding: 18px;
}

.crms-success-property__image {
	height: 135px;

	overflow: hidden;

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

.crms-success-property__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.crms-success-property__content {
	min-width: 0;
}

.crms-success-property__content > span {
	display: block;

	margin-bottom: 7px;

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

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

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

.crms-success-property__content p {
	margin: 0;

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

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

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

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

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

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

	margin-bottom: 6px;

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

.crms-success-details strong {
	display: block;

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

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

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

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

.crms-success-guest strong {
	display: block;

	overflow-wrap: anywhere;

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

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

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

.crms-success-request p {
	margin: 0;

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

/* ==========================================================
   PAYMENT SUMMARY
========================================================== */

.crms-success-payment {
	padding: 25px;
}

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

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

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

.crms-success-payment__total span {
	display: block;

	margin-bottom: 8px;

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

.crms-success-payment__total strong {
	display: block;

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

.crms-success-payment__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

	padding: 14px 0;

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

.crms-success-payment__status span {
	color: var(--crms-success-muted);
	font-size: 12px;
	font-weight: 650;
}

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

.crms-success-payment__status strong.is-success {
	padding: 6px 10px;

	background: var(--crms-success-primary-soft);
	border-radius: 999px;

	color: #067647;
}

.crms-success-payment__status strong.is-pending {
	padding: 6px 10px;

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

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

.crms-success-payment__notice {
	margin-top: 20px;
	padding: 16px;

	background: var(--crms-success-warning-bg);
	border: 1px solid var(--crms-success-warning-border);
	border-radius: 13px;
}

.crms-success-payment__notice strong {
	display: block;

	margin-bottom: 5px;

	color: var(--crms-success-warning);
	font-size: 13px;
}

.crms-success-payment__notice p {
	margin: 0;

	color: #7a2e0e;
	font-size: 12px;
	line-height: 1.55;
}

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

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

.crms-success-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-success-actions__primary {
	background: var(--crms-success-primary);
	border: 1px solid var(--crms-success-primary);

	color: #ffffff !important;

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

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

	color: #ffffff !important;

	transform: translateY(-2px);

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

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

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

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

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

	transform: translateY(-1px);
}

.crms-success-help {
	margin: 0;

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

/* ==========================================================
   INVALID BOOKING
========================================================== */

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

	background: #ffffff;
	border: 1px solid var(--crms-success-error-border);
	border-radius: 22px;

	text-align: center;

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

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

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

	background: var(--crms-success-error-bg);
	border-radius: 50%;

	color: var(--crms-success-error);
	font-size: 30px;
	font-weight: 900;
}

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

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

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

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

.crms-success-error a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 12px 22px;

	background: var(--crms-success-primary);
	border-radius: 11px;

	color: #ffffff !important;
	font-weight: 750;
	text-decoration: none !important;
}

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

@media (max-width: 950px) {

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

	.crms-success-sidebar {
		position: static;

		grid-template-columns:
			minmax(0, 1fr)
			280px;
	}

	.crms-success-actions {
		align-self: start;
	}
}

@media (max-width: 700px) {

	.crms-success-page {
		padding: 24px 14px 55px;
	}

	.crms-success-hero {
		padding: 35px 20px;
		border-radius: 19px;
	}

	.crms-success-hero__icon {
		width: 62px;
		height: 62px;

		font-size: 31px;
	}

	.crms-success-hero__reference {
		flex-direction: column;
		gap: 4px;

		border-radius: 15px;
	}

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

	.crms-success-property__image {
		height: 210px;
	}

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

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

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

@media (max-width: 420px) {

	.crms-success-hero h1 {
		font-size: 30px;
	}

	.crms-success-property__image {
		height: 180px;
	}

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