/* ═══════════════════════════════════════════════════════════════════════════
   IronNest — client portal
   ---------------------------------------------------------------------------
   Light, calm, and phone-first: most customers will open this from the email
   with the code in it, on the same phone. Inputs are 16px so iOS does not
   zoom, and every tap target is at least 44px.
   ═══════════════════════════════════════════════════════════════════════════ */

.in-portal__band {
	padding: 48px 0 80px;
	background: linear-gradient(180deg, var(--clr-blue-lt) 0%, var(--clr-off-wh) 320px, var(--clr-off-wh) 100%);
	min-height: 70vh;
}

.in-portal__wrap {
	max-width: 880px;
}

/* ── Sign-in cards ──────────────────────────────────────────────────────── */

.in-portal__card {
	max-width: 480px;
	margin: 0 auto;
	padding: 32px 24px;
	border: 1px solid var(--clr-gray-2);
	border-radius: var(--radius-lg);
	background: var(--clr-white);
	box-shadow: 0 18px 50px rgba(13, 38, 59, .10);
}

.in-portal__kicker {
	display: inline-block;
	font-size: 12px;
	font-weight: var(--fw-7);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--clr-blue);
}

.in-portal__h1 {
	margin: 8px 0 10px;
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: var(--fw-6);
	line-height: 1.2;
	color: var(--clr-text);
}

.in-portal__lead {
	margin: 0 0 22px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--clr-gray-7);
}

.in-portal__form {
	display: grid;
	gap: 14px;
}

.in-portal__field {
	display: grid;
	gap: 6px;
}

.in-portal__field span {
	font-size: 14px;
	font-weight: var(--fw-6);
	color: var(--clr-gray-8);
}

.in-portal__field input {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 1.5px solid var(--clr-gray-3);
	border-radius: 11px;
	background: #fff;
	font: inherit;
	font-size: 16px;               /* 16px: stops iOS zooming into the field */
	color: var(--clr-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.in-portal__field input:focus {
	outline: none;
	border-color: var(--clr-blue);
	box-shadow: 0 0 0 4px rgba(0, 108, 181, .14);
}

.in-portal__code {
	text-align: center;
	letter-spacing: .5em;
	font-size: 24px !important;
	font-weight: var(--fw-7);
	font-variant-numeric: tabular-nums;
}

.in-portal__btn {
	width: 100%;
	justify-content: center;
	min-height: 52px;
}

.in-portal__btn.is-loading {
	opacity: .65;
	pointer-events: none;
}

.in-portal__msg {
	margin: 0;
	padding: 11px 13px;
	border-radius: 10px;
	background: var(--clr-blue-lt);
	font-size: 14px;
	line-height: 1.5;
	color: var(--clr-blue-dk);
}

.in-portal__msg.is-bad {
	background: #fdecec;
	color: #a12626;
}

.in-portal__trust {
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--clr-gray-1);
	list-style: none;
	display: grid;
	gap: 9px;
}

.in-portal__trust li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--clr-gray-5);
}

.in-portal__trust svg {
	flex: 0 0 15px;
	color: var(--clr-green);
}

.in-portal__alt {
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--clr-gray-5);
	text-align: center;
}

.in-portal__link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--clr-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.in-portal__loading {
	margin: 60px 0;
	text-align: center;
	color: var(--clr-gray-5);
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

.in-portal__dash-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}

.in-portal__who {
	margin: 0;
	font-size: 14px;
	color: var(--clr-gray-5);
	word-break: break-all;
}

.in-portal__balance {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	padding: 18px 20px;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--clr-blue-br), var(--clr-blue-dk));
	color: #fff;
	box-shadow: 0 12px 30px rgba(0, 108, 181, .25);
}

.in-portal__balance span {
	font-size: 14px;
	font-weight: var(--fw-6);
	opacity: .9;
}

.in-portal__balance strong {
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: var(--fw-6);
}

.in-portal__grid {
	display: grid;
	gap: 16px;
}

.in-portal__sec {
	padding: 20px 18px;
	border: 1px solid var(--clr-gray-2);
	border-radius: var(--radius-lg);
	background: var(--clr-white);
}

.in-portal__sec-h {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: var(--fw-7);
	color: var(--clr-text);
}

.in-portal__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--clr-gray-1);
	font-size: 12px;
	color: var(--clr-gray-5);
}

.in-portal__empty {
	margin: 0;
	font-size: 14.5px;
	color: var(--clr-gray-5);
}

.in-portal__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.in-portal__row {
	display: grid;
	gap: 10px;
	padding: 14px 0;
	border-top: 1px solid var(--clr-gray-1);
}

.in-portal__row:first-child {
	border-top: 0;
	padding-top: 4px;
}

.in-portal__row-main {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.in-portal__row-title {
	font-size: 15px;
	font-weight: var(--fw-6);
	color: var(--clr-text);
	overflow-wrap: anywhere;
}

.in-portal__row-meta {
	font-size: 13px;
	color: var(--clr-gray-5);
}

.in-portal__row-side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.in-portal__row-amount {
	font-size: 15px;
	font-weight: var(--fw-7);
	color: var(--clr-text);
	font-variant-numeric: tabular-nums;
}

.in-portal__chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: var(--fw-6);
	white-space: nowrap;
}

.in-portal__chip--ok    { background: #e7f6ee; color: #11794a; }
.in-portal__chip--warn  { background: #fff4e0; color: #9a5b00; }
.in-portal__chip--bad   { background: #fdecec; color: #a12626; }
.in-portal__chip--info  { background: var(--clr-blue-lt); color: var(--clr-blue-dk); }
.in-portal__chip--muted { background: var(--clr-gray-1); color: var(--clr-gray-6); }

.in-portal__row-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1.5px solid var(--clr-blue);
	border-radius: 10px;
	font-size: 14px;
	font-weight: var(--fw-7);
	color: var(--clr-blue);
	text-decoration: none;
}

.in-portal__row-link.is-primary {
	background: var(--clr-blue);
	color: #fff;
}

.in-portal__row-link:hover {
	background: var(--clr-blue-dk);
	border-color: var(--clr-blue-dk);
	color: #fff;
}

.in-portal__help {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: var(--radius);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-2);
	font-size: 14px;
	color: var(--clr-gray-7);
}

.in-portal__help a {
	font-weight: var(--fw-7);
	color: var(--clr-blue);
	text-decoration: none;
}

/* ── Wider screens ──────────────────────────────────────────────────────── */

@media (min-width: 720px) {
	.in-portal__band { padding: 72px 0 96px; }

	.in-portal__card { padding: 40px 38px; }

	.in-portal__h1 { font-size: 32px; }

	.in-portal__sec { padding: 24px 26px; }

	.in-portal__row {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 16px;
	}

	.in-portal__row-side { justify-content: flex-end; }
}

/* ── Send a new code ────────────────────────────────────────────────────── */
.in-portal__resend { display: grid; gap: 10px; margin-top: 16px; }
.in-portal__resend-btn { width: 100%; justify-content: center; min-height: 46px; }
.in-portal__resend-btn:disabled { opacity: .55; cursor: not-allowed; }
.in-portal__resend-btn span { font-variant-numeric: tabular-nums; margin-left: 4px; }

/* ── Invoice, opened in place ───────────────────────────────────────────── */
.in-inv {
	grid-column: 1 / -1;
	margin-top: 6px;
	padding: 20px 18px;
	border: 1px solid var(--clr-gray-2);
	border-radius: 12px;
	background: #fbfcfd;
}
.in-inv__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.in-inv__from, .in-inv__meta { display: grid; gap: 3px; font-size: 13px; color: var(--clr-gray-5); }
.in-inv__from strong, .in-inv__meta strong { font-size: 16px; color: var(--clr-text); }
.in-inv__meta { justify-items: end; text-align: right; }
.in-inv__subject { margin: 0 0 12px; font-weight: 600; color: var(--clr-text); }
.in-inv__scroll { overflow-x: auto; }
.in-inv__lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.in-inv__lines th {
	padding: 8px 6px; border-bottom: 2px solid var(--clr-gray-2);
	font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--clr-gray-5); text-align: right;
}
.in-inv__lines th:first-child { text-align: left; }
.in-inv__lines td { padding: 10px 6px; border-bottom: 1px solid var(--clr-gray-1); vertical-align: top; }
.in-inv__item strong { display: block; color: var(--clr-text); }
.in-inv__desc { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--clr-gray-6); white-space: pre-line; }
.in-inv__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-inv__sums { margin: 14px 0 0 auto; max-width: 320px; display: grid; gap: 6px; font-size: 14px; }
.in-inv__sums div { display: flex; justify-content: space-between; gap: 16px; }
.in-inv__sums dt { color: var(--clr-gray-6); }
.in-inv__sums dd { margin: 0; font-variant-numeric: tabular-nums; }
.in-inv__sums .is-total { padding-top: 8px; border-top: 1px solid var(--clr-gray-2); font-weight: 700; }
.in-inv__sums .is-balance { padding: 8px 10px; border-radius: 8px; background: var(--clr-blue-lt); font-weight: 800; color: var(--clr-blue-dk); }
.in-inv__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.in-inv__actions button.in-portal__row-link { background: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.in-inv__paynote { flex-basis: 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--clr-gray-5); }
.in-portal__row-side button.in-portal__row-link { background: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.in-portal__row-side button.in-portal__row-link.is-primary { background: var(--clr-blue); color: #fff; }

/* Printing happens in a separate Jobber-style document (portal.js,
   printInvoice), so the page itself needs no print rules. */

.in-inv[hidden] { display: none; }

/* ── Ways to pay (online, check) ────────────────────────────────────────── */
.in-inv__ways {
	margin-top: 18px; padding: 16px 18px;
	border-radius: 10px; background: #fff; border: 1px solid var(--clr-gray-2);
	display: grid; gap: 12px;
}
.in-inv__ways-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--clr-text); }
.in-inv__way { display: grid; gap: 3px; font-size: 14px; line-height: 1.55; color: var(--clr-gray-7); }
.in-inv__way strong { color: var(--clr-text); }
.in-inv__addr {
	display: grid; margin-top: 6px; padding: 10px 12px;
	border-left: 3px solid var(--clr-blue); background: var(--clr-blue-lt);
	font-style: normal; font-weight: 600; color: var(--clr-text);
}

/* ── Ways to pay (online, check) ────────────────────────────────────────── */
.in-inv__ways {
	margin-top: 18px; padding: 16px 18px;
	border-radius: 10px; background: #fff; border: 1px solid var(--clr-gray-2);
	display: grid; gap: 12px;
}
.in-inv__ways-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--clr-text); }
.in-inv__way { display: grid; gap: 3px; font-size: 14px; line-height: 1.55; color: var(--clr-gray-7); }
.in-inv__way strong { color: var(--clr-text); }
.in-inv__addr {
	display: grid; margin-top: 6px; padding: 10px 12px;
	border-left: 3px solid var(--clr-blue); background: var(--clr-blue-lt);
	font-style: normal; font-weight: 600; color: var(--clr-text);
}

/* ── Quote message and refer-a-friend ───────────────────────────────────── */
.in-inv__msg { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #f6f8fb; color: #41505d; line-height: 1.6; white-space: pre-line; }
.in-ref { background: linear-gradient(180deg, #fff 0%, #f3f8fd 100%); }
.in-ref__lead { margin: 0 0 14px; color: var(--clr-gray-7); line-height: 1.6; }
.in-ref__lead strong { color: #11794a; }
.in-ref__box { display: flex; gap: 8px; }
.in-ref__link {
	flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border: 1.5px solid var(--clr-gray-3); border-radius: 10px;
	font: inherit; font-size: 15px; color: var(--clr-text); background: #fff;
}
.in-ref__box .in-portal__row-link, .in-ref__share .in-portal__row-link, .in-ref__share button { min-height: 46px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.in-ref__share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.in-ref__share button.in-portal__row-link { background: #fff; }
.in-ref__tiers { margin: 14px 0 0; padding-left: 18px; color: #41505d; font-size: 14px; line-height: 1.7; }
.in-ref__h3 { margin: 18px 0 6px; font-size: 15px; color: var(--clr-text); }
.in-ref__terms { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--clr-gray-5); }
@media (max-width: 520px) {
	.in-ref__box { flex-direction: column; }
	.in-ref__share .in-portal__row-link { flex: 1 1 45%; justify-content: center; }
}

/* Referral code shown big, to read out or copy */
.in-ref__box { align-items: center; flex-wrap: wrap; }
.in-ref__code-label { font-size: 13px; color: #5f7085; }
.in-ref__code { font: 800 26px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .18em; color: #0b3a66; background: #eef5fc; border: 1px dashed #9cc3e6; border-radius: 10px; padding: 10px 14px; }
.in-ref__optin { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 4px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.in-ref__optin input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.in-ref__optin-msg { display: block; font-size: 13px; color: #0f5132; min-height: 1em; }
.in-portal__balance[hidden] { display: none; }