/**
 * Sign in / sign up forms.
 *
 * Scoped entirely under .ct-auth. These forms sit on ordinary pages inside the
 * site's Elementor header and footer, so unlike the tour template there is no
 * page-level wrapper resetting bare elements — every rule here has to carry its
 * own class, and nothing may leak out to the theme around it.
 *
 * The palette is the tour page's, restated rather than inherited: these pages do
 * not include tour-itinerary.css, so the custom properties it declares on
 * .ct-itin are not in scope here.
 *
 * @package CustomTours
 */

.ct-auth {
	--a-blue: #1689CF;
	--a-orange: #F68B2D;
	--a-ink: #1B2733;
	--a-muted: #6B7280;
	--a-line: #DCDCD7;
	--a-bg: #F5F7FA;

	display: flex;
	justify-content: center;
	padding: 40px 16px;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--a-ink);
	line-height: 1.5;
	box-sizing: border-box;
}

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

.ct-auth__card {
	width: 100%;
	/* Roughly 60 characters at this size — a form column wider than that makes
	   the eye travel further between label and field than it needs to. */
	max-width: 420px;
	padding: 30px 28px 26px;
	border: 1px solid #E7E7E3;
	border-radius: 16px;
	background: #fff;
	/* Soft, low, and only one layer: this card usually sits on a white page, and
	   a heavy shadow would read as a modal that failed to open. */
	box-shadow: 0 1px 2px rgba(27, 39, 51, .04), 0 8px 24px rgba(27, 39, 51, .06);
}

.ct-auth__card--calm {
	text-align: center;
}

.ct-auth__title {
	margin: 0 0 6px;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--a-ink);
}

.ct-auth__sub {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--a-muted);
}

/* ==========================================================================
   Messages
   ==========================================================================
 * role="alert" on the error means a screen reader announces it on arrival —
 * which is the whole point, since the visitor has just been redirected back to a
 * form that looks identical to the one they submitted.
 */

.ct-auth__msg {
	margin: 0 0 18px;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-size: 13.5px;
}

.ct-auth__msg.is-error {
	border-color: #F3C2C2;
	background: #FDF2F2;
	color: #8C2B2B;
}

.ct-auth__msg.is-ok {
	border-color: #BFE3CE;
	background: #F1FAF4;
	color: #1E6B3E;
}

/* ==========================================================================
   Fields
   ========================================================================== */

.ct-auth__form {
	margin: 0;
}

.ct-auth__label {
	display: block;
	margin: 14px 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--a-muted);
}

.ct-auth__input {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--a-line);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	/* 16px exactly. Anything smaller and iOS Safari zooms the page in when the
	   field takes focus, which on a login form looks like a layout bug. */
	font-size: 16px;
	color: var(--a-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ct-auth__input:focus {
	outline: none;
	border-color: var(--a-blue);
	box-shadow: 0 0 0 3px rgba(22, 137, 207, .16);
}

.ct-auth__hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--a-muted);
}

.ct-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.ct-auth__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--a-ink);
	cursor: pointer;
}

.ct-auth__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--a-blue);
}

/* ==========================================================================
   Buttons and links
   ========================================================================== */

.ct-auth__btn {
	display: block;
	width: 100%;
	height: 48px;
	margin-top: 20px;
	padding: 0 16px;
	border: 0;
	border-radius: 24px;
	background: var(--a-orange);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 48px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}

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

.ct-auth__btn--ghost {
	background: #fff;
	border: 1px solid var(--a-blue);
	color: var(--a-blue);
	line-height: 46px;
}

.ct-auth__btn--ghost:hover,
.ct-auth__btn--ghost:focus {
	background: #EAF4FC;
	color: var(--a-blue);
}

.ct-auth__btn:focus-visible,
.ct-auth__link:focus-visible {
	outline: 2px solid var(--a-blue);
	outline-offset: 2px;
}

.ct-auth__link {
	color: var(--a-blue);
	font-size: 13.5px;
	text-decoration: none;
}

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

.ct-auth__foot {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid #EEF1F4;
	font-size: 13.5px;
	color: var(--a-muted);
	text-align: center;
}

.ct-auth__card--calm .ct-auth__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* ==========================================================================
   The honeypot
   ==========================================================================
 * Moved off-screen rather than display:none or type=hidden. A bot that parses
 * the markup skips fields it can see are hidden, but fills one that looks like
 * an ordinary text input — which is exactly what makes this worth having.
 *
 * Not visibility:hidden either: some form-fillers skip those too. Position is
 * the one method that leaves the field entirely ordinary to a machine reading
 * the DOM and entirely absent to a person looking at the page.
 */

.ct-auth__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 480px) {

	.ct-auth {
		padding: 24px 12px;
	}

	.ct-auth__card {
		padding: 24px 18px 20px;
		border-radius: 14px;
	}

	.ct-auth__title {
		font-size: 21px;
	}

	/* The checkbox and the forgotten-password link stop fitting side by side. */
	.ct-auth__row {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}
}