/**
 * CGI Immersion area — cohesive design layer.
 *
 * Covers: the Immersion Trips balance table, the trip checklists, the travel
 * documents panel, the Trip Setup wizard and its chat CTA. Loaded on My
 * Account pages and pre-departure course lessons (see immersion-intake-ui.php,
 * versioned by filemtime so deploys cache-bust automatically).
 *
 * Palette = site brand: red #d02c2f (header), dark #2c3e50, yellow #f5b335
 * (buttons), soft grays. Component base styles still print inline where each
 * module renders; this file layers the visual refinement on top with
 * higher-specificity selectors so it wins without !important wars.
 */

/* ─────────────────────────── Balance table ─────────────────────────── */

.woocommerce .cgi-balance-wrap {
	overflow-x: auto;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(44, 62, 80, .08), 0 4px 14px rgba(44, 62, 80, .06);
	margin-bottom: 34px;
	border: 1px solid #e8e8ea;
}

.woocommerce table.cgi-balance-table {
	margin: 0;
	border: none;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	font-size: 15px;
}

.woocommerce table.cgi-balance-table thead th {
	background: #2c3e50;
	color: #fff;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 13px 16px;
	border: none;
}

.woocommerce table.cgi-balance-table tbody td {
	padding: 14px 16px;
	border: none;
	border-top: 1px solid #efefef;
	background: #fff;
	vertical-align: middle;
	line-height: 1.45;
}

.woocommerce table.cgi-balance-table tbody tr:hover td {
	background: #fbfbfc;
}

.woocommerce table.cgi-balance-table td[data-title="Immersion Trip"] strong {
	color: #2c3e50;
	font-size: 15px;
}

.woocommerce table.cgi-balance-table td[data-title="Season/Duration"] {
	color: #6c7a89;
	font-size: 13.5px;
}

.woocommerce table.cgi-balance-table td[data-title="Total Paid"],
.woocommerce table.cgi-balance-table td[data-title="Total Due"] {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 600;
}

.woocommerce table.cgi-balance-table td[data-title="Total Paid"] {
	color: #2e7d32;
}

.woocommerce table.cgi-balance-table .orange-text {
	color: #d02c2f;
	font-weight: 700;
	font-size: 16px;
}

/* Status chips */
.woocommerce .cgi-balance-table .cgi-paid-in-full {
	display: inline-block;
	background: #eef7ee;
	color: #2e7d32;
	border-radius: 20px;
	padding: 4px 14px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.woocommerce .cgi-balance-table .cgi-chip-pending {
	display: inline-block;
	background: #fff6e6;
	color: #8a6d3b;
	border-radius: 20px;
	padding: 4px 14px;
	font-size: 13px;
	font-weight: 600;
	font-style: normal;
	white-space: nowrap;
}

.woocommerce .cgi-balance-table .cgi-pending-note {
	color: #8a8a8a;
	font-size: 12.5px;
	display: inline-block;
	max-width: 230px;
	line-height: 1.35;
}

/* Pay button — site yellow */
.woocommerce table.cgi-balance-table a.balance.button,
.woocommerce table.cgi-balance-table a.ui.balance.button {
	background: #f5b335 !important;
	color: #2c3e50 !important;
	border: none;
	border-radius: 6px;
	padding: 9px 18px;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	display: inline-block;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(44, 62, 80, .15);
	transition: transform .12s ease, box-shadow .12s ease;
}

.woocommerce table.cgi-balance-table a.balance.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(44, 62, 80, .2);
}

/* Add-on sub-rows */
.woocommerce table.cgi-balance-table .cgi-addon-row td {
	background: #fafbfc;
	border-top: 1px dashed #ececec;
	font-size: 13.5px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.woocommerce table.cgi-balance-table .cgi-addon-row .cgi-addon-name {
	color: #6c7a89;
	padding-left: 14px;
}

/* Mobile: stack rows into cards */
@media (max-width: 768px) {
	.woocommerce table.cgi-balance-table thead { display: none; }
	.woocommerce table.cgi-balance-table,
	.woocommerce table.cgi-balance-table tbody,
	.woocommerce table.cgi-balance-table tr,
	.woocommerce table.cgi-balance-table td { display: block; width: 100%; }
	.woocommerce table.cgi-balance-table tr {
		border-top: 4px solid #f2f2f3;
		padding: 6px 0;
	}
	.woocommerce table.cgi-balance-table td {
		border: none;
		padding: 6px 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		text-align: right;
	}
	.woocommerce table.cgi-balance-table td::before {
		content: attr(data-title);
		font-size: 11px;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: #9aa4ae;
		font-weight: 600;
		text-align: left;
	}
	.woocommerce table.cgi-balance-table td[data-title="Immersion Trip"] { padding-top: 14px; }
	.woocommerce table.cgi-balance-table td[data-title="Action"] { padding-bottom: 14px; }
	.woocommerce .cgi-balance-table .cgi-pending-note { max-width: 60%; }
}

/* ─────────────────────────── Trip checklists ───────────────────────── */

.woocommerce .trip-block,
.woocommerce-MyAccount-content .trip-block,
.learndash-wrapper ~ * .trip-block,
body .trip-block {
	border: 1px solid #e8e8ea !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 3px rgba(44, 62, 80, .08), 0 4px 14px rgba(44, 62, 80, .05);
	overflow: hidden;
}

body .trip-header-container {
	background: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%) !important;
	border-bottom: 1px solid #eceef0 !important;
	border-top: 4px solid #d02c2f;
	padding: 18px 20px !important;
}

body .trip-main-title { color: #2c3e50 !important; }

body .welcome-hub-link {
	background: #f5b335 !important;
	color: #2c3e50 !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	padding: 6px 14px !important;
	box-shadow: 0 1px 2px rgba(44, 62, 80, .15);
}
body .welcome-hub-link:hover { filter: brightness(1.05); }

body .prog-container {
	height: 14px !important;
	border-radius: 10px !important;
	background: #eef0f2 !important;
}
body .prog-bar {
	background: linear-gradient(90deg, #35b558, #2ecc71) !important;
	border-radius: 10px;
}
body .prog-text { font-size: 9px !important; line-height: 14px !important; color: #2c3e50; }

body .trip-block h4 {
	color: #2c3e50;
	border-bottom: none !important;
	padding-bottom: 6px !important;
	position: relative;
}
body .trip-block h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 3px;
	border-radius: 3px;
	background: #d02c2f;
}

body .checklist-row {
	border-radius: 8px;
	transition: background .12s ease;
	padding: 7px 8px !important;
}
body .checklist-row:hover { background: #f8f9fa; }
body .checklist-row input[type=checkbox] { accent-color: #d02c2f; width: 16px; height: 16px; }
body .checklist-link { color: #d02c2f !important; }

body .child-checklist-title { background: #2c3e50 !important; border-radius: 6px !important; }
body .checklist-wrapper.child-view { border-left-color: #2c3e50 !important; }

/* ───────────────────── Travel documents panel ──────────────────────── */

body .cgi-docs {
	border: 1px solid #e8e8ea !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(44, 62, 80, .06);
	padding: 16px 20px !important;
}
body .cgi-docs h4 { color: #2c3e50; }
body .cgi-docs .cgi-doc-row { border-top: 1px solid #f0f1f2 !important; }
body .cgi-docs .cgi-doc-chip { font-weight: 700; padding: 3px 12px !important; }
body .cgi-docs .cgi-doc-upload {
	background: #f5b335 !important;
	color: #2c3e50 !important;
	border: none !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
}
body .cgi-docs .cgi-doc-files a { color: #d02c2f; }

/* ───────────────────────── Trip Setup wizard ───────────────────────── */

body .cgi-intake {
	border: 1px solid #e8e8ea !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 3px rgba(44, 62, 80, .08), 0 4px 14px rgba(44, 62, 80, .05);
	padding: 26px 28px !important;
}
body .cgi-intake .cgi-step-label { color: #d02c2f !important; font-weight: 700; }
body .cgi-intake h3 { color: #2c3e50; }
body .cgi-intake .cgi-slot {
	background: #fbfbfc !important;
	border: 1px solid #eceef0 !important;
	border-left: 4px solid #d02c2f !important;
	border-radius: 10px !important;
}
body .cgi-intake .cgi-slot h4 { color: #2c3e50; }
body .cgi-intake input[type=text],
body .cgi-intake input[type=email],
body .cgi-intake input[type=number],
body .cgi-intake select {
	border-radius: 6px;
	border: 1px solid #d9dde1;
	padding: 8px 10px;
}
body .cgi-intake input:focus, body .cgi-intake select:focus {
	border-color: #d02c2f;
	outline: none;
	box-shadow: 0 0 0 3px rgba(208, 44, 47, .12);
}
body .cgi-intake .button.alt,
body .cgi-intake button.button.alt {
	background: #f5b335 !important;
	color: #2c3e50 !important;
	border: none;
	border-radius: 6px;
	font-weight: 700;
	padding: 11px 24px;
	box-shadow: 0 1px 2px rgba(44, 62, 80, .15);
}
body .cgi-intake .button.alt:hover { filter: brightness(1.05); }
body .cgi-intake .cgi-choice { border-radius: 8px !important; }
body .cgi-intake .cgi-choice:hover { border-color: #d02c2f !important; background: #fdf7f7; }
body .cgi-intake .cgi-review-table th {
	background: #2c3e50;
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	border: none !important;
}
body .cgi-intake .cgi-review-table td { border: none !important; border-top: 1px solid #efefef !important; }
body .cgi-intake .cgi-done .cgi-done-icon { font-size: 2.6em; }
body .cgi-intake .cgi-done a.button {
	background: #f5b335 !important;
	color: #2c3e50 !important;
	border-radius: 6px;
	font-weight: 700;
}

/* Chat CTA on Trip Setup — the Customizer's Additional CSS paints every
   .woocommerce button.button yellow with !important, so this selector needs
   the extra html/body/element weight to out-rank it. */
html body .cgi-intake-chat-cta button.button,
html body .cgi-intake-chat-cta a.button {
	background: #fff !important;
	border: 2px solid #d02c2f !important;
	color: #d02c2f !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	padding: 10px 20px !important;
	transition: all .12s ease;
}
html body .cgi-intake-chat-cta button.button:hover,
html body .cgi-intake-chat-cta a.button:hover {
	background: #d02c2f !important;
	color: #fff !important;
}