/**
 * The customer dashboard: sidebar left, panel right.
 *
 * Scoped under .ct-dash. Like the sign-in forms, this renders on an ordinary
 * page inside the site's Elementor header and footer, so every rule carries its
 * own class and nothing may leak out to the theme around it.
 *
 * The palette is restated rather than inherited: this page does not load
 * tour-itinerary.css, so the properties declared on .ct-itin are out of scope.
 *
 * ICONS ARE FONT AWESOME 5, borrowed from the copy Elementor already ships. See
 * includes/dashboard-icons.php for which files and why the obvious handle is the
 * wrong one. Nothing here defines the icon font; these rules only size and space
 * whatever element carries the `fas` class.
 *
 * @package CustomTours
 */

.ct-dash {
	--d-blue: #1689CF;
	--d-blue-dark: #0F6EA8;
	--d-blue-soft: #EAF4FC;
	--d-orange: #F68B2D;
	--d-ink: #1B2733;
	--d-muted: #6B7280;
	--d-line: #E7E7E3;
	--d-soft: #F5F7FA;

	/* Requested container width. The rail keeps its 256px either way, so every
	   extra pixel here goes to the panel, which is the half that holds the
	   booking cards and payment rows. */
	--d-max: 1320px;

	display: grid;
	/* Fixed rail, fluid panel. The rail is sized to the longest label
	   ("Payments & Invoices") at this weight, so nothing wraps to two lines. */
	grid-template-columns: 256px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	max-width: var(--d-max);
	margin: 0 auto;
	padding: 36px 16px 56px;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--d-ink);
	line-height: 1.5;
	box-sizing: border-box;
}

.ct-dash *,
.ct-dash *::before,
.ct-dash *::after {
	box-sizing: inherit;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.ct-dash__side {
	padding: 18px 14px;
	border: 1px solid var(--d-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(27, 39, 51, .04), 0 8px 24px rgba(27, 39, 51, .05);
	/* Follows the reader down a long panel on desktop only. See the media
	   query, where it is released so it cannot trap a short viewport. */
	position: sticky;
	top: 24px;
}

.ct-dash__who {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 4px 6px 16px;
	border-bottom: 1px solid #EEF1F4;
}

.ct-dash__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--d-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 40px;
	text-align: center;
	letter-spacing: .02em;
}

.ct-dash__whotext { min-width: 0; }

.ct-dash__whotext strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--d-ink);
	/* Long names and long addresses both belong on one line here. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ct-dash__whotext span {
	display: block;
	font-size: 12px;
	color: var(--d-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ct-dash__nav {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ct-dash__nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-dash__link {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: 10px;
	color: var(--d-ink);
	font-size: 14px;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

/*
 * Hover wears the same colours as the current section.
 *
 * Only the colours: the weight stays normal, so the section you are actually on
 * is still the only bold one. Without that difference, hovering any row would
 * make it look like the row you were already on.
 */
.ct-dash__link:hover,
.ct-dash__link:focus {
	background: var(--d-blue-soft);
	color: var(--d-blue-dark);
}

.ct-dash__link.is-active {
	background: var(--d-blue-soft);
	color: var(--d-blue-dark);
	font-weight: 600;
}

.ct-dash__link:focus-visible {
	outline: 2px solid var(--d-blue);
	outline-offset: 1px;
}

/*
 * The icon column.
 *
 * A fixed width so every label starts at the same x, whatever the glyph is.
 * Font Awesome icons are not all the same width, and without this the labels
 * shift by a pixel or two down the list, which reads as sloppy even when nobody
 * can say why.
 *
 * font-size, not width, controls how big the glyph is: the icon font sizes off
 * the element's font-size.
 */
.ct-dash__icon {
	flex: 0 0 auto;
	width: 18px;
	font-size: 15px;
	line-height: 1;
	text-align: center;
}

.ct-dash__label {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The "nothing behind this yet" dot.
 *
 * Deliberately quiet: a note to the site owner during build-out, not a badge
 * shouting at a customer. It has an aria-label on the element itself, so it is
 * not colour-only information.
 */
.ct-dash__soon {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #C9D4DE;
}

/*
 * An unread count on a sidebar row.
 *
 * Same orange as the header bell's badge on purpose: a customer who saw "2" on
 * the bell and clicked through should find the same 2 in the same colour, not a
 * second styling of the same fact.
 *
 * The number is not the only cue, since the section it belongs to is named right
 * beside it, so this is not colour-only information either.
 */
.ct-dash__badge {
	flex: 0 0 auto;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--d-orange);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.ct-dash__navsplit {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #EEF1F4;
}

/*
 * Logout keeps its own red. It is the one row that does something rather than
 * going somewhere, and colouring it like the rest would lose that.
 */
.ct-dash__link--out { color: #8C2B2B; }

.ct-dash__link--out:hover,
.ct-dash__link--out:focus {
	background: #FDF2F2;
	color: #8C2B2B;
}

/* ==========================================================================
   Panel
   ========================================================================== */

.ct-dash__main {
	min-width: 0;
	padding: 26px 26px 28px;
	border: 1px solid var(--d-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(27, 39, 51, .04), 0 8px 24px rgba(27, 39, 51, .05);
}

.ct-dash__head { margin-bottom: 20px; }

.ct-dash__head h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--d-ink);
}

/* In a heading the icon takes the heading's size rather than the sidebar's. */
.ct-dash__head h2 .ct-dash__icon {
	width: auto;
	font-size: 19px;
	color: var(--d-blue);
}

.ct-dash__head p {
	margin: 0;
	font-size: 14px;
	color: var(--d-muted);
}

.ct-dash__h3 {
	margin: 24px 0 10px;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--d-ink);
}

/* ---- Fact grid on the landing panel ---- */

.ct-dash__facts {
	display: grid;
	/* auto-fit rather than a fixed count: four across on a wide panel, folding
	   to one on a phone, with no breakpoint of its own. */
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.ct-dash__fact {
	min-width: 0;
	padding: 13px 15px;
	border-radius: 12px;
	background: var(--d-soft);
}

.ct-dash__fact .k {
	display: block;
	margin-bottom: 3px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--d-muted);
}

.ct-dash__fact .v {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--d-ink);
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Booking cards, also used by enquiry cards
   ========================================================================== */

.ct-dash__card {
	margin-bottom: 14px;
	padding: 16px 18px;
	border: 1px solid var(--d-line);
	border-radius: 14px;
	background: #fff;
}

.ct-dash__card:last-child { margin-bottom: 0; }

.ct-dash__cardhead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.ct-dash__cardhead h4 {
	margin: 0;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
	/* min-width:0 so a long tour name wraps rather than pushing the state pill
	   off the end of the row. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.ct-dash__cardhead h4 a {
	color: var(--d-ink);
	text-decoration: none;
}

.ct-dash__cardhead h4 a:hover { color: var(--d-blue); }

/*
 * Payment state. Only "Paid" is green, and everything else is deliberately not,
 * because a customer glancing at this needs to know at once whether money has
 * actually been taken.
 */
.ct-dash__state {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}

.ct-dash__state--paid { background: #E7F6EC; color: #1E6B3E; }
.ct-dash__state--pending { background: #FFF4E5; color: #8A5300; }
.ct-dash__state--unpaid { background: #EEF1F4; color: #4A5461; }
.ct-dash__state--failed { background: #FDECEC; color: #8C2B2B; }

/*
 * Enquiry state: the same pill, a different vocabulary. An enquiry is a
 * conversation rather than a transaction, so the one that wants the customer's
 * attention is "Approved, awaiting payment", and it takes the warm colour that
 * "payment not finished" takes above. Green still means only one thing: done.
 */
.ct-dash__state--enq-new { background: var(--d-blue-soft); color: var(--d-blue-dark); }
.ct-dash__state--enq-replied { background: #EEF1F4; color: #4A5461; }
.ct-dash__state--enq-approved { background: #FFF4E5; color: #8A5300; }
.ct-dash__state--enq-booked { background: #E7F6EC; color: #1E6B3E; }
.ct-dash__state--enq-closed { background: #F3F4F6; color: #6B7280; }

.ct-dash__cardrows {
	margin: 0;
	padding: 0;
}

.ct-dash__cardrows > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px dashed #EEF1F4;
}

.ct-dash__cardrows > div:last-child { border-bottom: 0; }

.ct-dash__cardrows dt {
	flex: 0 0 auto;
	margin: 0;
	font-size: 12.5px;
	color: var(--d-muted);
}

.ct-dash__cardrows dd {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.ct-dash__away {
	font-weight: 600;
	color: var(--d-blue);
}

.ct-dash__cardnote {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--d-muted);
}

/*
 * The quoted figures on an approved enquiry, set apart by a rule. The customer
 * opening this is looking for the price; it must not read as one more line of
 * trip detail.
 */
.ct-dash__quote {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--d-line);
}

.ct-dash__quote dd {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 15px;
	color: var(--d-ink);
}

/* The actions on a card: Pay now, and the invoice. */
.ct-dash__cardpay {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

/*
 * The office's reply.
 *
 * A blue edge, matching the unread marker in Notifications, so it reads as
 * coming from us rather than as more of the customer's own submission directly
 * above it.
 */
.ct-dash__reply {
	margin-top: 12px;
	padding: 12px 15px;
	border-radius: 12px;
	background: var(--d-soft);
	box-shadow: inset 3px 0 0 var(--d-blue);
}

.ct-dash__reply strong {
	display: block;
	margin-bottom: 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--d-blue);
}

.ct-dash__reply p {
	margin: 0 0 8px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--d-ink);
	overflow-wrap: anywhere;
}

.ct-dash__reply p:last-of-type { margin-bottom: 0; }

.ct-dash__replywhen {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--d-muted);
}

/* ==========================================================================
   Payments
   ========================================================================== */

.ct-dash__table {
	border: 1px solid var(--d-line);
	border-radius: 14px;
	overflow: hidden;
}

.ct-dash__prow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-bottom: 1px solid #EEF1F4;
}

.ct-dash__prow:last-child { border-bottom: 0; }

.ct-dash__pmain {
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* align-items so the badge and the invoice button size to their content
	   rather than stretching the full width of the column. */
	align-items: flex-start;
	gap: 2px;
}

.ct-dash__pmain strong {
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ct-dash__pmeta {
	font-size: 12px;
	color: var(--d-muted);
	overflow-wrap: anywhere;
}

.ct-dash__pmeta code {
	font-size: 11.5px;
	background: var(--d-soft);
	padding: 1px 5px;
	border-radius: 4px;
}

/*
 * A test receipt has to be unmistakable. Somebody seeing a rupee figure next to
 * "Paid" will believe they paid it unless told otherwise in plain words.
 */
.ct-dash__testflag {
	margin-top: 3px;
	padding: 1px 7px;
	border-radius: 4px;
	background: #8A5300;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .4px;
}

/*
 * The invoice link.
 *
 * A bordered button rather than one more line of small text. In the first
 * version it was styled like the metadata above it and sat directly under the
 * TEST badge, so the only thing on the row you can actually DO looked like a
 * fourth line of detail. The margin is what separates the two.
 */
.ct-dash__invoice {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
	padding: 5px 13px;
	border: 1px solid var(--d-blue);
	border-radius: 16px;
	color: var(--d-blue);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: background .15s ease;
}

.ct-dash__invoice:hover,
.ct-dash__invoice:focus {
	background: var(--d-blue-soft);
	color: var(--d-blue-dark);
}

.ct-dash__invoice:focus-visible {
	outline: 2px solid var(--d-blue);
	outline-offset: 1px;
}

.ct-dash__pamt {
	flex: 0 0 auto;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--d-ink);
	white-space: nowrap;
}

/* ==========================================================================
   Notifications
   ==========================================================================
 * A plain list, not cards. These are one or two sentences each and are read in
 * a single downward sweep; boxing every line would slow that down for no gain.
 */

.ct-dash__notes {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--d-line);
	border-radius: 14px;
	overflow: hidden;
}

.ct-dash__note-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid #EEF1F4;
	list-style: none;
}

.ct-dash__note-item:last-child { border-bottom: 0; }

/*
 * Unread. A tinted background plus a blue edge, because the panel marks
 * everything read the moment it is opened. This highlight is the only thing
 * telling somebody which ones were new when they arrived, and it is gone by the
 * next visit.
 */
.ct-dash__note-item.is-new {
	background: #F4FAFE;
	box-shadow: inset 3px 0 0 var(--d-blue);
}

.ct-dash__note-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ct-dash__note-main strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--d-ink);
	overflow-wrap: anywhere;
}

.ct-dash__note-main span {
	font-size: 13px;
	line-height: 1.55;
	color: var(--d-muted);
	overflow-wrap: anywhere;
}

.ct-dash__note-main .ct-dash__inlinelink {
	align-self: flex-start;
	margin-top: 2px;
	font-size: 12.5px;
}

.ct-dash__note-when {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var(--d-muted);
	white-space: nowrap;
	/* Nudged to sit level with the title rather than the top of the box. */
	padding-top: 2px;
}

/* ---- Definition rows, used by Profile and Settings ---- */

.ct-dash__rows {
	margin: 0;
	padding: 0;
}

.ct-dash__rows > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px dashed #E3E7EC;
}

.ct-dash__rows > div:last-child { border-bottom: 0; }

.ct-dash__rows dt {
	flex: 0 0 auto;
	margin: 0;
	font-size: 13px;
	color: var(--d-muted);
}

.ct-dash__rows dd {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--d-ink);
	text-align: right;
	overflow-wrap: anywhere;
}

.ct-dash__inlinelink {
	color: var(--d-blue);
	font-weight: 600;
	text-decoration: none;
}

.ct-dash__inlinelink:hover { text-decoration: underline; }

/* ---- Notes and empty states ---- */

.ct-dash__note {
	margin-top: 18px;
	padding: 12px 15px;
	border: 1px solid #E3E7EC;
	border-radius: 12px;
	background: #FAFBFC;
}

.ct-dash__note p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--d-muted);
}

.ct-dash__empty {
	padding: 32px 22px;
	border: 1px dashed #D6DDE4;
	border-radius: 14px;
	background: #FAFBFC;
	text-align: center;
}

.ct-dash__empty-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--d-ink);
}

.ct-dash__empty-note {
	/* Held to a readable measure rather than stretching across a 1320px panel,
	   which at this size would be well past the point prose stays scannable. */
	max-width: 52ch;
	margin: 0 auto;
	font-size: 13px;
	line-height: 1.6;
	color: var(--d-muted);
}

/* ==========================================================================
   Buttons, and the signed-out gate
   ========================================================================== */

.ct-dash__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

/*
 * inline-flex rather than inline-block, because these buttons now carry an icon
 * as well as text. A gap keeps the two apart without a margin that would have to
 * be undone on the buttons that have no icon.
 */
.ct-dash__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 20px;
	height: 44px;
	border: 0;
	border-radius: 22px;
	background: var(--d-orange);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.ct-dash__btn:hover,
.ct-dash__btn:focus {
	background: #E57E1F;
	color: #fff;
}

/* The icon should not compete with the words beside it. */
.ct-dash__btn i {
	font-size: 13px;
	line-height: 1;
}

.ct-dash__btn--ghost {
	background: #fff;
	border: 1px solid var(--d-blue);
	color: var(--d-blue);
}

.ct-dash__btn--ghost:hover,
.ct-dash__btn--ghost:focus {
	background: var(--d-blue-soft);
	color: var(--d-blue);
}

.ct-dash--out {
	/* The gate is a single centred card, so the two-column grid is dropped. */
	display: block;
}

.ct-dash__gate {
	max-width: 420px;
	margin: 0 auto;
	padding: 34px 28px;
	border: 1px solid var(--d-line);
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 1px 2px rgba(27, 39, 51, .04), 0 8px 24px rgba(27, 39, 51, .05);
}

.ct-dash__gate h2 {
	margin: 0 0 6px;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--d-ink);
}

.ct-dash__gate p {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--d-muted);
}

/* ==========================================================================
   Narrow screens
   ==========================================================================
 * The rail becomes a horizontally scrolling strip above the panel rather than
 * a stack: eleven full-width rows would push the actual content most of a
 * screen down, and the whole point of the panel is that it is what you came for.
 */

@media (max-width: 860px) {

	.ct-dash {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 24px 12px 40px;
	}

	.ct-dash__side {
		position: static;
		padding: 14px 12px;
	}

	.ct-dash__nav {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		/* Momentum scrolling on iOS, and no scrollbar gutter stealing height. */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.ct-dash__nav::-webkit-scrollbar { display: none; }

	.ct-dash__nav li { flex: 0 0 auto; }

	.ct-dash__navsplit {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		/* Keeps Logout from sitting flush against Account Settings once the
		   dividing line is gone. */
		margin-left: 6px;
		padding-left: 10px;
		border-left: 1px solid #EEF1F4;
	}

	.ct-dash__link { white-space: nowrap; }

	.ct-dash__main { padding: 20px 18px 22px; }
}

@media (max-width: 480px) {

	.ct-dash__head h2 { font-size: 19px; }

	.ct-dash__rows > div,
	.ct-dash__cardrows > div {
		display: block;
	}

	.ct-dash__rows dd,
	.ct-dash__cardrows dd {
		margin-top: 3px;
		text-align: left;
	}

	/* Amount under the description rather than beside it. */
	.ct-dash__prow {
		flex-direction: column;
		gap: 8px;
	}

	/*
	 * Timestamp under the text rather than beside it. Side by side on a narrow
	 * screen, "2 hours ago" takes a third of the row from the sentence that
	 * actually carries the news.
	 */
	.ct-dash__note-item {
		flex-direction: column;
		gap: 6px;
	}

	.ct-dash__note-when { padding-top: 0; }

	/* Full width, so the actions on a card are comfortable tap targets. */
	.ct-dash__cardpay .ct-dash__btn,
	.ct-dash__quick .ct-dash__btn {
		flex: 1 1 100%;
	}
}