/* ==========================================
   Client portal: visual layer

   The hmt-client-portal plugin ships layout only and loads this file on the
   portal page through its hmt_client_portal_enqueue hook. Colors are the
   Avada global colors (awb-color1-8).
   ========================================== */

body .hmt-portal {
	--hmtp-white: #ffffff;
	--hmtp-gray-light: #f2f3f5;
	--hmtp-gray: #dcdcda;
	--hmtp-aqua-light: #aeddda;
	--hmtp-aqua: #89d3cf;
	--hmtp-pink: #f1877f;
	--hmtp-pink-hover: #f2756f;
	--hmtp-pink-dark: #d9655c;
	--hmtp-blue: #1082a0;
	--hmtp-blue-dark: #0c6f8a;
	--hmtp-navy: #003d51;
	--hmtp-muted: #4d6b77;
	--hmtp-on-dark: #cfe9ec;
	--hmtp-line: #e2e8e9;
	--hmtp-input: #cfd6d8;
	--hmtp-pink-tint: #fdeceb;
	--hmtp-aqua-tint: #eaf6f5;
	--hmtp-error: #b3261e;
	--hmtp-error-tint: #fcebea;
	--hmtp-shadow: 0 10px 30px -14px rgba(0, 61, 81, 0.22);
	--hmtp-band: linear-gradient(180deg, #003d51 0%, #0b5f78 55%, #1082a0 100%);

	color: var(--hmtp-navy);
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

/* The trip views sit on light gray so the white cards read as cards. The
   empty band below the hero carries the same gray to the footer. */
body .hmt-portal--trip,
body .hmt-portal--empty {
	position: relative;
	isolation: isolate;
}

body .hmt-portal--trip::before,
body .hmt-portal--empty::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hmtp-gray-light);
}

/* The portal page's Avada container pads the bottom, which shows as a white
   strip between the portal and the footer. */
body .fusion-fullwidth:has(.hmt-portal) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body .fusion-text:has(> .hmt-portal),
body .fusion-column-wrapper:has(.hmt-portal),
body .fusion-layout-column:has(.hmt-portal) {
	margin-bottom: 0 !important;
}

body .hmt-portal__band {
	background: var(--hmtp-band);
	color: var(--hmtp-white);
}

body .hmt-portal__eyebrow {
	color: var(--hmtp-aqua) !important;
	font-family: "Cinzel", Georgia, serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.07em !important;
	line-height: 1.3 !important;
	text-transform: uppercase;
}

body .hmt-portal__card .hmt-portal__eyebrow {
	color: var(--hmtp-blue) !important;
}

body .hmt-portal__card {
	border-radius: 6px;
	background: var(--hmtp-white);
	box-shadow: var(--hmtp-shadow);
	color: var(--hmtp-navy);
}

/* ------------------------------------------------------------------ login --- */

body .hmt-portal__login-title {
	color: var(--hmtp-white) !important;
	font-size: clamp(32px, 4.4vw, 48px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.15 !important;
	text-wrap: balance;
}

body .hmt-portal__login-title em {
	color: var(--hmtp-pink);
	font-style: normal;
}

body .hmt-portal__login-lede {
	max-width: 46ch;
	color: var(--hmtp-on-dark);
	font-size: 16px;
}

body .hmt-portal__inside-icon {
	background: var(--hmtp-pink);
	color: var(--hmtp-white);
}

body .hmt-portal__inside-text strong {
	font-size: 16px;
	font-weight: 700;
}

body .hmt-portal__inside-text span {
	color: var(--hmtp-on-dark);
	font-size: 14px;
}

body .hmt-portal__card-title {
	color: var(--hmtp-navy) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.3 !important;
}

body .hmt-portal__card-intro {
	color: var(--hmtp-muted);
}

body .hmt-portal__error {
	border: 1.5px solid var(--hmtp-error);
	border-radius: 6px;
	background: var(--hmtp-error-tint);
	color: var(--hmtp-error);
	font-size: 14px;
	font-weight: 600;
}

body .hmt-portal__field label {
	color: var(--hmtp-navy);
	font-size: 15px;
	font-weight: 700;
}

body .hmt-portal__field input[type="text"],
body .hmt-portal__field input[type="email"],
body .hmt-portal__field input[type="password"] {
	min-height: 48px;
	padding: 11px 14px;
	border: 1.5px solid var(--hmtp-input);
	border-radius: 6px;
	background: var(--hmtp-white);
	color: var(--hmtp-navy);
	font-size: 16px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body .hmt-portal__field input[type="text"]:focus,
body .hmt-portal__field input[type="email"]:focus,
body .hmt-portal__field input[type="password"]:focus {
	outline: none;
	border-color: var(--hmtp-blue);
	box-shadow: 0 0 0 4px rgba(174, 221, 218, 0.7);
}

body .hmt-portal__field--inline label {
	font-weight: 600;
}

body .hmt-portal__field--inline input {
	width: 18px;
	height: 18px;
	accent-color: var(--hmtp-blue);
}

body .hmt-portal__help {
	border-top: 1px solid var(--hmtp-line);
	color: var(--hmtp-muted);
	font-size: 14px;
}

body .hmt-portal__help a {
	color: var(--hmtp-blue);
	font-weight: 700;
}

/* ------------------------------------------------------------------- hero --- */

body .hmt-portal__trip-title {
	color: var(--hmtp-white) !important;
	font-size: clamp(30px, 4.2vw, 46px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.15 !important;
	text-wrap: balance;
}

body .hmt-portal__dates {
	color: var(--hmtp-on-dark);
	font-size: 17px;
	font-weight: 600;
}

body .hmt-portal__dates .hmt-portal__icon {
	color: var(--hmtp-aqua);
}

body .hmt-portal__countdown {
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--hmtp-white);
}

body .hmt-portal__countdown-big {
	color: var(--hmtp-pink);
	font-size: 52px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

body .hmt-portal__countdown--now .hmt-portal__countdown-big,
body .hmt-portal__countdown--past .hmt-portal__countdown-big {
	font-size: 26px;
	line-height: 1.3;
}

body .hmt-portal__countdown-small {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------- body --- */

body .hmt-portal__note-mark {
	background: var(--hmtp-pink-tint);
	color: var(--hmtp-pink);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

body .hmt-portal__welcome p {
	margin: 0;
}

body .hmt-portal__section-title {
	color: var(--hmtp-blue) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.3 !important;
}

body .hmt-portal__count {
	color: var(--hmtp-muted);
	font-size: 13px;
	font-weight: 600;
}

body .hmt-portal__link {
	border: 1.5px solid var(--hmtp-line);
	border-radius: 6px;
	background: var(--hmtp-white);
	color: var(--hmtp-navy) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body .hmt-portal__link:hover {
	border-color: var(--hmtp-aqua);
	box-shadow: 0 8px 18px -12px rgba(0, 61, 81, 0.35);
	transform: translateY(-1px);
}

body .hmt-portal__link:focus-visible,
body .hmt-portal__switcher-link:focus-visible,
body .hmt-portal__logout a:focus-visible {
	outline: 3px solid var(--hmtp-aqua);
	outline-offset: 3px;
}

body .hmt-portal__link-icon {
	border-radius: 6px;
	background: var(--hmtp-aqua-tint);
	color: var(--hmtp-blue);
}

body .hmt-portal__section--info .hmt-portal__link-icon {
	background: var(--hmtp-pink-tint);
	color: var(--hmtp-pink-dark);
}

body .hmt-portal__link-text strong {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

body .hmt-portal__link-text span {
	color: var(--hmtp-muted);
	font-size: 12.5px;
}

body .hmt-portal__link-go {
	color: var(--hmtp-blue);
}

body .hmt-portal__link:hover .hmt-portal__link-go {
	color: var(--hmtp-pink);
}

/* ---------------------------------------------------------------- sidebar --- */

body .hmt-portal__side-title {
	color: var(--hmtp-navy) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.3 !important;
}

body .hmt-portal__switcher-heading {
	font-size: 12.5px !important;
}

body .hmt-portal__switcher-group + .hmt-portal__switcher-group {
	border-top: 1px solid var(--hmtp-line);
}

body .hmt-portal__switcher-link {
	border: 1.5px solid transparent;
	border-radius: 6px;
	color: var(--hmtp-navy) !important;
}

body .hmt-portal__switcher-link:hover {
	background: var(--hmtp-aqua-tint);
}

body .hmt-portal__switcher-link[aria-current="page"] {
	border-color: var(--hmtp-blue);
	background: var(--hmtp-aqua-tint);
}

body .hmt-portal__switcher-link strong {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
}

body .hmt-portal__switcher-group--past .hmt-portal__switcher-link strong {
	font-weight: 600;
}

body .hmt-portal__switcher-link span {
	color: var(--hmtp-muted);
	font-size: 12.5px;
}

body .hmt-portal__help-card {
	background: var(--hmtp-pink-tint);
	box-shadow: none;
}

body .hmt-portal__help-card p {
	font-size: 14px;
}

/* "Contact us" is the blue secondary button, like "Meet Elliott" */
body .hmt-portal .hmt-portal__help-button.fusion-button {
	--button_gradient_top_color: var(--hmtp-blue);
	--button_gradient_bottom_color: var(--hmtp-blue);
	--button_gradient_top_color_hover: var(--hmtp-blue-dark);
	--button_gradient_bottom_color_hover: var(--hmtp-blue-dark);
	background: var(--hmtp-blue);
}

body .hmt-portal .hmt-portal__help-button.fusion-button:hover {
	background: var(--hmtp-blue-dark);
}

body .hmt-portal__logout a {
	color: var(--hmtp-blue) !important;
	font-size: 14px;
	font-weight: 700;
}

body .hmt-portal__logout a:hover {
	color: var(--hmtp-navy) !important;
}

body .hmt-portal__logout .hmt-portal__icon {
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------------------------ empty --- */

body .hmt-portal__empty-badge {
	background: var(--hmtp-aqua-tint);
	color: var(--hmtp-blue);
}

body .hmt-portal__empty-card > p {
	max-width: 46ch;
	color: var(--hmtp-muted);
}

body .hmt-portal__step {
	border-radius: 6px;
	background: var(--hmtp-gray-light);
	font-size: 14px;
}

body .hmt-portal__step strong {
	font-size: 14.5px;
	font-weight: 700;
}

body .hmt-portal__step-number {
	background: var(--hmtp-pink);
	color: var(--hmtp-white);
	font-size: 14px;
	font-weight: 700;
}

body .hmt-portal__step--done .hmt-portal__step-number {
	background: var(--hmtp-pink-tint);
	color: var(--hmtp-pink);
}

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 820px) {
	body .hmt-portal__countdown-big {
		font-size: 34px;
	}

	body .hmt-portal__countdown--now .hmt-portal__countdown-big,
	body .hmt-portal__countdown--past .hmt-portal__countdown-big {
		font-size: 20px;
	}
}

@media (max-width: 640px) {
	body .hmt-portal__note-mark {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .hmt-portal * {
		transition: none !important;
	}
}