/*
 * Plan Builder account box. Originally from snippet 5628 (CSS half); rebuilt
 * 2026-09-14 against the app demo form, which is the house reference for what
 * a form looks like on this site.
 *
 * The values below are the same ones in assets/css/tm-forms.css - they cannot
 * simply reuse it, because this block is not an Elementor field group. It is
 * markup injected by tm-plan-account.js, so it carries no .elementor-field-*
 * classes and nothing in that stylesheet reaches it. Keeping the numbers
 * identical is what makes the two look like one form; if the house look
 * changes, both files move together.
 *
 *   20px box, 5px radius, 2px border   checkbox
 *   10px radius, 1px #eee, white       text input
 *   #283071 / 14px / 500               label
 */

/*
 * NO CARD. This is a checkbox row, exactly like the marketing opt-in directly
 * below it, and the two must read as the same control twice.
 *
 * The grey card comes from the orphaned legacy copy at
 * uploads/tm-css/tm-planbuilder.css:
 *
 *   .tm-pb5 .tm-q-wrap .tm-acct{background:#f7f7f7;border:1.5px solid #eee;
 *                               border-radius:12px;padding:15px 18px}
 *
 * That is 0-3-0, so the plain `.tm-pb5 .tm-acct` rule here (0-2-0) loses to it.
 * tm-plan-optin.css already had to do this same override for .tm-optin, which
 * is why the opt-in row escaped the card and this one did not.
 *
 * See the note in tm-plan-builder.css: the orphan is not in git, is still
 * enqueued, and wants dequeuing properly rather than out-shouting rule by rule.
 */
.tm-pb5 .tm-q-wrap .tm-acct,
.tm-pb5.elementor-widget-form .tm-q-wrap .tm-acct{
	background:none!important;
	border:0!important;
	border-radius:0!important;
	padding:0!important;
}

.tm-pb5 .tm-acct{
	margin:10px 0 0;
	font-family:Poppins,sans-serif;
}

.tm-pb5 .tm-acct label.tm-acct-check{
	display:flex;
	align-items:flex-start;
	gap:12px;
	cursor:pointer;
	font-size:14px;
	color:#3F4150;
	line-height:1.625;
	margin:0;
}

/* Drawn, not tinted - see the note in tm-forms.css for why accent-color lost. */
.tm-pb5 .tm-acct input[type=checkbox]{
	appearance:none;
	-webkit-appearance:none;
	width:20px;
	height:20px;
	margin:2px 0 0;
	flex:0 0 auto;
	background-color:#fff;
	border:2px solid #e1e4ed;
	border-radius:5px;
	cursor:pointer;
	transition:background-color .12s ease,border-color .12s ease;
}

.tm-pb5 .tm-acct input[type=checkbox]:checked{
	background-color:#f57b20;
	border-color:#f57b20;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:center;
	background-size:12px 12px;
}

.tm-pb5 .tm-acct input[type=checkbox]:focus-visible{
	outline:3px solid rgba(245,123,32,.35);
	outline-offset:2px;
}

/*
 * Hidden until the box is ticked. The 32px indent lines the block up with the
 * checkbox LABEL rather than the checkbox: 20px box + 12px gap.
 */
.tm-pb5 .tm-acct .tm-acct-pw-wrap{
	display:none;
	margin:12px 0 0 32px;
}

.tm-pb5 .tm-acct .tm-acct-pw-wrap.is-open{
	display:block;
}

.tm-pb5 .tm-acct .tm-acct-pw-label{
	display:block;
	font-size:14px;
	font-weight:500;
	color:#283071;
	margin-bottom:6px;
}

.tm-pb5 .tm-acct input.tm-acct-pw{
	width:100%;
	max-width:340px;
	box-sizing:border-box;
	border:1px solid #e1e4ed;
	border-radius:10px;
	padding:13px 16px;
	font-size:15px;
	font-family:Poppins,sans-serif;
	color:#3F4150;
	background:#ECF0FB;
	transition:background .15s,border-color .15s,box-shadow .15s;
}

.tm-pb5 .tm-acct input.tm-acct-pw::placeholder{
	color:#6b7090;
	opacity:1;
}

.tm-pb5 .tm-acct input.tm-acct-pw:focus{
	background:#fff;
	border-color:#f57b20;
	box-shadow:0 0 0 3px rgba(245,123,32,.18);
	outline:none;
}

/*
 * No :disabled styling any more. The field is only on screen when it is
 * enabled, so a greyed-out state would never be seen - and leaving the rule in
 * would be a small lie about how the control behaves.
 */

.tm-pb5 .tm-acct .tm-acct-note{
	display:block;
	font-size:13px;
	color:#6b7090;
	margin:8px 0 0;
	line-height:1.625;
}