/*
 * A.I. Reports – Custom Login styles
 * ------------------------------------------------------------
 * Everything below is driven by the CSS variables in :root.
 * To match your exact site design, just change the values here —
 * you don't need to touch anything else in this file.
 */

:root {
	/* Sampled directly from ai-reports.co.uk (orange accent + dark header, from your
	   Packages page screenshot) — change any of these if your brand colours differ. */
	--airl-accent: #ff5722;         /* primary brand / button colour (site's orange)     */
	--airl-accent-hover: #e64a19;   /* button hover colour (darker orange)               */
	--airl-teal: #009688;           /* site's teal — available if you want to use it too */
	--airl-text: #1d1d22;           /* main text colour (site's dark header colour)      */
	--airl-muted: #6b7280;          /* secondary/help text colour               */
	--airl-border: #d8dce3;         /* input field border colour                */
	--airl-card-border: #000000;    /* border around the whole login/portal card */
	--airl-card-border-width: 2px;
	--airl-bg: #ffffff;             /* form card background                     */
	--airl-submit-text: #ffffff;    /* "Log in" / "Save" button text colour     */
	--airl-error-bg: #fdecea;
	--airl-error-text: #b3261e;
	--airl-success-bg: #eaf7ef;
	--airl-success-text: #1e7e34;
	--airl-radius: 10px;
	--airl-font: inherit;           /* set to your theme's font-family if you want an exact match */
}

.airl-form-wrap {
	max-width: 420px;
	margin: 2.5rem auto;
	padding: 2rem;
	background: var(--airl-bg);
	border: var(--airl-card-border-width) solid var(--airl-card-border);
	border-radius: var(--airl-radius);
	font-family: var(--airl-font);
	color: var(--airl-text);
	box-sizing: border-box;
}

.airl-form-wrap * {
	box-sizing: border-box;
}

.airl-title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	line-height: 1.3;
}

.airl-subtitle {
	margin: 0 0 1.25rem;
	color: var(--airl-muted);
	font-size: 0.95rem;
}

.airl-notice {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 0.9rem;
}

.airl-notice--error {
	background: var(--airl-error-bg);
	color: var(--airl-error-text);
}

.airl-notice--success {
	background: var(--airl-success-bg);
	color: var(--airl-success-text);
}

.airl-field {
	margin-bottom: 1.1rem;
	position: relative;
}

.airl-field label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.airl-field input[type="email"],
.airl-field input[type="password"],
.airl-field input[type="text"] {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--airl-border);
	border-radius: 6px;
	font-size: 1rem;
	background: #fff;
	color: var(--airl-text);
}

.airl-field input:focus {
	outline: none;
	border-color: var(--airl-accent);
	box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.airl-field--password {
	position: relative;
}

.airl-toggle-visibility {
	position: absolute;
	right: 0.6rem;
	top: 2.25rem;
	background: none;
	border: none;
	color: var(--airl-muted);
	font-size: 0.8rem;
	cursor: pointer;
	padding: 0.2rem 0.3rem;
}

.airl-toggle-visibility:hover {
	color: var(--airl-accent);
}

.airl-field--inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: -0.3rem;
}

.airl-checkbox {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--airl-muted);
	cursor: pointer;
}

.airl-checkbox {
	position: relative;
}

.airl-checkbox-input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
}

.airl-checkbox-mark {
	display: inline-flex;
	flex: 0 0 19px;
	width: 19px;
	height: 19px;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--airl-muted);
	border-radius: 4px;
	background: #fff;
}

.airl-checkbox-input:checked + .airl-checkbox-mark {
	background: #009b8f;
	border-color: #00796f;
}

.airl-checkbox-input:checked + .airl-checkbox-mark::after {
	content: "";
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.airl-checkbox-input:focus-visible + .airl-checkbox-mark {
	outline: 3px solid rgba(0, 155, 143, 0.35);
	outline-offset: 2px;
}

.airl-link {
	color: var(--airl-accent);
	font-size: 0.9rem;
	text-decoration: none;
}

.airl-link:hover {
	text-decoration: underline;
}

/* !important here on purpose: this site's theme applies its own default button
   styling (we saw it override the background colour before this was added), so
   these two rules need to win regardless of theme CSS load order. */
.airl-form-wrap .airl-submit {
	width: 100%;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 6px;
	background: var(--airl-accent) !important;
	color: var(--airl-submit-text) !important;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.airl-form-wrap .airl-submit:hover {
	background: var(--airl-accent-hover) !important;
}

.airl-hint {
	margin: -0.5rem 0 1rem;
	font-size: 0.8rem;
	color: var(--airl-muted);
}

.airl-footnote {
	margin: 1.25rem 0 0;
	font-size: 0.9rem;
	color: var(--airl-muted);
	text-align: center;
}

.airl-already {
	font-size: 1rem;
}

/* ------------------------------------------------------------
 * PayPal subscribe button block
 * ---------------------------------------------------------- */

.airl-subscribe-wrap {
	max-width: 320px;
	min-height: 260px;
	margin: 1.5rem auto;
	padding: 1.5rem;
	background: var(--airl-bg);
	border: var(--airl-card-border-width) solid var(--airl-card-border);
	border-radius: var(--airl-radius);
	font-family: var(--airl-font);
	color: var(--airl-text);
	text-align: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* If a Subscribe box sits inside a WordPress "Columns" block (the Block
 * Editor's side-by-side layout tool), stop that Columns block stretching
 * each column to an equal, wide share of the row — that's what pushes two
 * boxes far apart, since each one centers itself inside its own oversized
 * column. Instead, shrink the row and each column down to fit the boxes
 * themselves, and pull them together in the middle with a small, fixed
 * gap. This only changes columns that actually contain a Subscribe box —
 * any other Columns block on your site is unaffected. (Uses the CSS :has()
 * selector, supported in all current browsers.) */
.wp-block-columns:has(.airl-subscribe-wrap) {
	justify-content: center;
	gap: 1.5rem;
}

.wp-block-columns:has(.airl-subscribe-wrap) > .wp-block-column {
	flex: 0 0 auto !important;
	width: auto !important;
}

.airl-subscribe-label {
	font-weight: 600;
	font-size: 0.95rem;
	margin: 0 0 0.75rem;
}

.airl-tier-select {
	width: 100%;
	margin: 0 0 0.9rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--airl-border);
	border-radius: 6px;
	font-size: 0.95rem;
	font-family: var(--airl-font);
	background: #fff;
	color: var(--airl-text);
	box-sizing: border-box;
}

.airl-tier-select:focus {
	outline: none;
	border-color: var(--airl-accent);
	box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.airl-paypal-button {
	min-height: 45px;
}

.airl-subscribe-status {
	margin-top: 0.75rem;
	font-size: 0.9rem;
	color: var(--airl-muted);
	min-height: 1.2em;
}

/* ------------------------------------------------------------
 * [air_dashboard] — logged-in member's personal tools page
 * ---------------------------------------------------------- */

.airl-dashboard-wrap {
	width: calc(100% - 2rem) !important;
	max-width: 1200px !important;
	margin: 1rem auto 0 !important;
	padding: 2rem !important;
	background: #fff !important;
	border: 2px solid #111 !important;
	border-radius: 10px !important;
	font-family: var(--airl-font);
	color: var(--airl-text);
	box-sizing: border-box;
}

.airl-dashboard-inner {
	background: #0d0d0d;
	padding: 2rem;
	min-height: 170px;
	box-sizing: border-box;
}

/* The site's older homepage rules force the first child of this Group to be
   full-width and black. Keep the welcome card aligned with the tool frame. */
body .air-free-trial-suite:has(> .airl-dashboard-wrap) {
	background: transparent !important;
	background-color: transparent !important;
}

body .air-free-trial-suite > .airl-dashboard-wrap.airl-dashboard-wrap {
	width: calc(100% - 2rem) !important;
	max-width: 1200px !important;
	margin: 1rem auto 0 !important;
	padding: 2rem !important;
	background: #fff !important;
	background-color: #fff !important;
}

.airl-dashboard-title {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
	line-height: 1.3;
	text-align: center;
}

.airl-dashboard-wrap--guest {
	text-align: center;
}

.airl-dashboard-wrap--guest .airl-dashboard-inner {
	min-height: 0;
	padding: 1.4rem;
}

@media (max-width: 700px) {
	.airl-dashboard-wrap {
		width: 100% !important;
		padding: 1rem !important;
	}
	body .air-free-trial-suite > .airl-dashboard-wrap.airl-dashboard-wrap {
		width: 100% !important;
		padding: 1rem !important;
	}
	.airl-dashboard-inner {
		padding: 1.25rem;
	}
}

.airl-guest-question {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
}

.airl-guest-signin {
	display: inline-block;
	padding: 0.7rem 1.5rem;
	border-radius: 999px;
	background: var(--airl-accent);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.airl-guest-signin:hover,
.airl-guest-signin:focus-visible {
	background: var(--airl-teal);
	color: #fff !important;
}

.airl-dashboard-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin: 0;
}

.airl-dashboard-tab {
	padding: 0.7rem 1.3rem;
	border: var(--airl-card-border-width) solid var(--airl-card-border);
	border-radius: 999px;
	background: #fff;
	color: var(--airl-text);
	font-size: 0.95rem;
	font-weight: 600;
	font-family: var(--airl-font);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.airl-dashboard-tab:hover {
	background: var(--airl-teal);
	color: #fff;
	border-color: var(--airl-teal);
}

.airl-dashboard-tab.is-active {
	background: var(--airl-accent);
	color: var(--airl-submit-text);
	border-color: var(--airl-accent);
}

/* The tools themselves — appended as real page content alongside
   [air_dashboard] (see inject_pro_tool_shortcodes() in
   class-ai-reports-login.php), not nested inside .airl-dashboard-wrap, so
   this is a second card sitting directly under the tabs. */
.airl-inline-tools {
	max-width: 1200px;
	margin: 1rem auto 2rem !important;
	margin-block-start: 1rem !important;
	padding: 2rem;
	background: var(--airl-bg);
	border: var(--airl-card-border-width) solid var(--airl-card-border);
	border-radius: var(--airl-radius);
	font-family: var(--airl-font);
	color: var(--airl-text);
	box-sizing: border-box;
}

/* Match the 16px gap above the welcome card on the homepage. */
body .air-free-trial-suite:has(> .airl-dashboard-wrap) + .airl-inline-tools {
	margin-top: 1rem !important;
	margin-block-start: 1rem !important;
}

.airl-inline-tool + .airl-inline-tool {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--airl-border);
}


/* FREE and PRO are compound tool views: the main tool plus its template
   downloader. Keep both shortcodes on one continuous dark background. */
.airl-inline-tool[data-tool="free"],
.airl-inline-tool[data-tool="pro"] {
	background: #0d0d0d;
	padding: 0 0 2rem;
	overflow: hidden;
}

/* v1.11.1 — PRO package frame.
   The login/dashboard plugin owns the compound PRO view, so the border lives
   here and wraps BOTH the PRO Tool and the PRO Templates shortcode output. */
.airl-inline-tool[data-tool="pro"] {
	border: 3px solid #2FB5A0;
	border-radius: 10px;
	box-sizing: border-box;
}

/* If the standalone PRO Tool plugin also has its own package border, suppress
   that inner frame when it is displayed inside the login dashboard. This keeps
   one clean teal outline around PRO Tool + PRO Templates rather than a double border. */
.airl-inline-tool[data-tool="pro"] .air-pro-tool-plugin-wrap {
	border: 0 !important;
	border-radius: 0 !important;
}


/* v1.10.5 – Tier 2 future Client CRM / Client Dashboard navigation buttons. */
.airl-dashboard-link{
    text-decoration:none !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}


/* v1.12.14 — FREE account PRO upgrade CTA */
.airl-dashboard-tab.airl-dashboard-upgrade {
	background: var(--airl-accent);
	color: #fff;
	border-color: var(--airl-accent);
}
.airl-dashboard-tab.airl-dashboard-upgrade:hover,
.airl-dashboard-tab.airl-dashboard-upgrade:focus {
	background: var(--airl-teal);
	color: #fff;
	border-color: var(--airl-teal);
}
/* Lite signup uses the established account form styling. */
.airl-lite-trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.airl-lite-signup .airl-lite-consent{display:flex;align-items:flex-start;gap:12px;margin:22px 0;line-height:1.55;color:#263840!important;cursor:pointer}
.airl-lite-signup .airl-lite-consent input[type="checkbox"]{appearance:none!important;-webkit-appearance:none!important;display:grid!important;place-items:center!important;flex:none;width:20px!important;height:20px!important;margin:2px 0 0!important;border:2px solid #126c69!important;border-radius:2px!important;background:#fff!important;cursor:pointer;opacity:1!important}
.airl-lite-signup .airl-lite-consent input[type="checkbox"]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10l5 5L17 5' fill='none' stroke='%23087f78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-position:center!important;background-repeat:no-repeat!important;background-size:16px 16px!important}
.airl-lite-signup .airl-lite-consent input[type="checkbox"]::before,.airl-lite-signup .airl-lite-consent input[type="checkbox"]::after{content:none!important;display:none!important}
.airl-lite-signup .airl-lite-consent input[type="checkbox"]:focus-visible{outline:2px solid #087f78;outline-offset:3px}
.airl-lite-signup .airl-lite-submit{display:none}
.airl-lite-signup .airl-form:has(.airl-lite-consent input:checked) .airl-lite-submit{display:inline-flex}
.airl-lite-link{display:inline-block;text-decoration:none;text-align:center}