/* ==========================================================================
   Crown Office Supplies — /net30-application/ (page 7006)

   Presentation only. This page is a striking-distance search target for
   "net 30 application" (see the SEO notes), so NOT ONE WORD of the copy is
   removed or reordered — it is restyled so the form, which is the entire point
   of the page, stops being pushed below three screens of prose.

   Loads after cos-home.css, which owns the tokens and primitives. Scoped to
   body.page-id-7006 throughout.
   ========================================================================== */

/* Electro's #primary is a Bootstrap 75% column wherever a sidebar is expected. */
body.page-id-7006 .content-area {
	flex: 0 0 100%;
	max-width: 100%;
}

body.page-id-7006 {
	overflow-x: clip;
}

body.page-id-7006 .site-main {
	font-family: var(--cos-font-body, "Inter", system-ui, sans-serif);
}

/* The tokens live on .cos-page, which this page's content never gets — it is
   WPBakery output. Declare them on the page wrapper instead. */
body.page-id-7006 .site-main .entry-content,
body.page-id-7006 .site-main > .container {
	--cos-yellow: #fed700;
	--cos-yellow-600: #e5c000;
	--cos-navy: #2e094e;
	--cos-navy-700: #4d1c7d;
	--cos-ink: #16091f;
	--cos-text: #4a4155;
	--cos-muted: #7a7188;
	--cos-line: #ece8f0;
	--cos-line-strong: #ddd6e4;
	--cos-surface-2: #faf8fc;
	--cos-surface-3: #f4f1f7;
	--cos-r-sm: 10px;
	--cos-r: 16px;
	--cos-r-lg: 24px;
	--cos-shadow: 0 2px 4px rgba(22, 9, 31, .04), 0 8px 24px rgba(22, 9, 31, .07);
	--cos-ease: cubic-bezier(.22, 1, .36, 1);
	--cos-font-display: "Poppins", "Inter", system-ui, sans-serif;
	--cos-font-body: "Inter", system-ui, sans-serif;
	color: var(--cos-text);
}

/* --------------------------------------------------------------------------
   1 — Intro copy
   -------------------------------------------------------------------------- */
body.page-id-7006 .entry-content h1 {
	font-family: var(--cos-font-display);
	font-size: clamp(2rem, 4.2vw, 3rem);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.08;
	color: var(--cos-ink);
	margin: 0 0 14px;
	max-width: 20ch;
}

/* The bold line under the headline is a standfirst, not a heading. */
body.page-id-7006 .entry-content > .vc_row:first-child .wpb_text_column p:first-of-type strong,
body.page-id-7006 .cos-appintro__lead strong {
	font-weight: 600;
}

body.page-id-7006 .cos-appintro__lead {
	font-size: 1.12rem;
	line-height: 1.6;
	color: var(--cos-ink);
	max-width: 62ch;
	margin: 0 0 10px;
}

body.page-id-7006 .entry-content p {
	max-width: 68ch;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   2 — The three explainer blocks, as a step strip.

   Each was an <h3> followed by a one-item <ul>; the pairs are wrapped into
   .cos-appstep by the PHP filter so they can sit side by side instead of
   stacking into ~350px of scrolling before the form.
   -------------------------------------------------------------------------- */
body.page-id-7006 .cos-appsteps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 30px 0 26px;
	padding: 0;
	counter-reset: cos-step;
}

body.page-id-7006 .cos-appstep {
	position: relative;
	padding: 22px 22px 18px;
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r-lg);
	background: var(--cos-surface-2);
	counter-increment: cos-step;
}

body.page-id-7006 .cos-appstep::before {
	content: counter(cos-step, decimal-leading-zero);
	display: block;
	font-family: var(--cos-font-display);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--cos-yellow-600);
	margin-bottom: 8px;
}

body.page-id-7006 .cos-appstep h3 {
	font-family: var(--cos-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--cos-ink);
	margin: 0 0 8px;
}

body.page-id-7006 .cos-appstep ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.page-id-7006 .cos-appstep li {
	margin: 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--cos-text);
}

/* The lead-in "New Applications:" etc. reads as a mini-label. */
body.page-id-7006 .cos-appstep li > strong:first-child {
	display: block;
	font-family: var(--cos-font-display);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cos-muted);
	margin-bottom: 4px;
}

@media (max-width: 900px) {
	body.page-id-7006 .cos-appsteps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* --------------------------------------------------------------------------
   3 — The form shell

   RegistrationMagic ships a bare table-ish layout: a label column, an input
   column, and a solid BLACK bar reading "Page 1". None of it matches the site.
   -------------------------------------------------------------------------- */
/* The form's WPBakery row has NO [vc_column] — the page content is literally
   `[vc_row][vc_column_text][member_app][/vc_column_text][/vc_row]`. WPBakery
   rows carry `margin: 0 -15px` for gutters, which a column's 15px padding
   normally cancels; with no column, that negative margin is left exposed, so
   the whole form rendered 15px off the left edge and 30px wider than the
   viewport. Invisible at desktop width, but at 485px it clipped the labels
   ("mail", "sername", "assword"). Pre-existing, not introduced here.

   Fixed on the row rather than on .rmagic, so the desktop centring
   (margin-inline: auto) still works. */
body.page-id-7006 .entry-content .vc_row:has(.rmagic) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* RegistrationMagic draws an 8px SOLID BLACK top border on .rmcontent — the
   slab that sat above the form. (Found by probing computed styles; it is not
   in any class name you would guess.) */
body.page-id-7006 .rmcontent {
	border-top: 0 !important;
}

body.page-id-7006 .rmagic,
body.page-id-7006 .rmcontent {
	float: none !important;
	width: 100% !important;
}

body.page-id-7006 .rmagic-form,
body.page-id-7006 .rm_form_container {
	max-width: 880px;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

/* "Page 1" is a <legend> inside fieldset.rmfieldset — not a div with a
   findable class. Restyled as a quiet step label. */
body.page-id-7006 .rmfieldset > legend,
body.page-id-7006 form.rmagic-form fieldset.rmfieldset legend {
	width: 100%;
	background: transparent !important;
	color: var(--cos-muted) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cos-line) !important;
	border-radius: 0 !important;
	padding: 0 0 12px !important;
	margin: 0 0 26px !important;
	font-family: var(--cos-font-display);
	font-size: .74rem !important;
	font-weight: 700 !important;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* The form's own "Business Information" heading — demoted from <h1> to <h2> by
   the PHP filter, because the page already has one. */
body.page-id-7006 .rm_form_field_type_heading {
	font-family: var(--cos-font-display);
	font-size: 1.3rem !important;
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--cos-ink) !important;
	margin: 2.2em 0 .2em !important;
	padding-top: 1.1em;
	border-top: 1px solid var(--cos-line);
}

body.page-id-7006 hr.rm_divider {
	display: none;
}

/* --------------------------------------------------------------------------
   4 — Rows and fields

   The stock layout is a narrow label column beside a very wide input, so long
   labels wrap while the input runs on for 600px. Balanced, and stacked on
   narrow screens.
   -------------------------------------------------------------------------- */
body.page-id-7006 .rmrow {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 6px 26px;
	align-items: start;
	margin: 0 0 18px;
	padding: 0;
	/* RM sets min-height:60px on every row, so the rows holding only the hidden
	   divider and the password meter left two empty grey bands mid-form. */
	min-height: 0 !important;
	background: transparent !important;
	float: none !important;
	width: auto !important;
}

/* The divider row has nothing left to show once the <hr> is hidden. */
body.page-id-7006 .rmrow.rm-full-width:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(.rm_form_field_type_richtext)) {
	display: none;
}

body.page-id-7006 .rmrow.rm-full-width {
	grid-template-columns: minmax(0, 1fr);
}

/* RM sizes the two halves with `float: left` + `width: 40%/60%` (and
   `.rmfield { max-width: 250px }`). Those survive inside a grid container —
   the percentages then apply WITHIN each track, so the input rendered at 60%
   of its own column and the whole form looked half-empty. The grid owns the
   sizing now, so the old widths have to go. */
body.page-id-7006 .rmfield,
body.page-id-7006 .rminput {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	display: block;
	padding: 0;
}

/* Rows that carry no label — the compliance notice, dividers, the button bar —
   have .rminput as their only child, and would otherwise be squeezed into the
   260px label track. */
body.page-id-7006 .rmrow > .rminput:only-child {
	grid-column: 1 / -1;
}

body.page-id-7006 .rmfield {
	padding-top: 10px;
}

body.page-id-7006 .rmfield label {
	font-family: var(--cos-font-display);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cos-ink);
	margin: 0;
}

body.page-id-7006 .rmfield sup.required {
	color: #c0392b;
	font-weight: 700;
}

body.page-id-7006 .rminput {
	min-width: 0;
}

body.page-id-7006 .rminput input[type="text"],
body.page-id-7006 .rminput input[type="email"],
body.page-id-7006 .rminput input[type="password"],
body.page-id-7006 .rminput input[type="tel"],
body.page-id-7006 .rminput input[type="number"],
body.page-id-7006 .rminput input[type="url"],
body.page-id-7006 .rminput select,
body.page-id-7006 .rminput textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cos-line-strong);
	border-radius: var(--cos-r-sm);
	background: #fff;
	font-family: var(--cos-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--cos-ink);
	box-shadow: none;
	transition: border-color .18s var(--cos-ease), box-shadow .18s var(--cos-ease);
}

body.page-id-7006 .rminput input:focus,
body.page-id-7006 .rminput select:focus,
body.page-id-7006 .rminput textarea:focus {
	outline: none;
	border-color: var(--cos-navy);
	box-shadow: 0 0 0 3px rgba(46, 9, 78, .12);
}

body.page-id-7006 .rminput input::placeholder {
	color: #b3aabd;
}

/* --------------------------------------------------------------------------
   5 — The address block

   RegistrationMagic renders each sub-input with its label AFTER it in the
   source, so every box sat above its own caption and read as if it belonged to
   the field above. `order` puts the caption back on top without touching the
   markup.
   -------------------------------------------------------------------------- */
body.page-id-7006 .rm_address_type_ca .rm_ad_container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}

body.page-id-7006 .rm_address_type_ca .slimField,
body.page-id-7006 .rm_address_type_ca .wideField {
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: auto !important;
	float: none !important;
	padding: 0 !important;
}

/* Address lines 1 and 2 span the full width; city/state/country/zip pair up. */
body.page-id-7006 .rm_address_type_ca .rm-address-fw {
	grid-column: 1 / -1;
}

body.page-id-7006 .rm_address_type_ca .label {
	order: -1;
	margin: 0 0 5px;
	font-family: var(--cos-font-display);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--cos-muted);
}

body.page-id-7006 .rm_address_type_ca input,
body.page-id-7006 .rm_address_type_ca select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cos-line-strong);
	border-radius: var(--cos-r-sm);
	background: #fff;
	font-size: 1rem;
	color: var(--cos-ink);
}

body.page-id-7006 .rm_address_type_ca input:focus,
body.page-id-7006 .rm_address_type_ca select:focus {
	outline: none;
	border-color: var(--cos-navy);
	box-shadow: 0 0 0 3px rgba(46, 9, 78, .12);
}

@media (max-width: 640px) {
	body.page-id-7006 .rm_address_type_ca .rm_ad_container {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Inline correction notice from cos-net30app.js. */
body.page-id-7006 .cos-appform__hint {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin-top: 0;
	font-size: .82rem;
	line-height: 1.45;
	color: #9a6b00;
	transition: opacity .2s var(--cos-ease), max-height .2s var(--cos-ease), margin-top .2s var(--cos-ease);
}

body.page-id-7006 .cos-appform__hint.is-visible {
	max-height: 4em;
	opacity: 1;
	margin-top: 6px;
}

/* Shape advice ("an EIN is 9 digits") is informational, not a correction that
   just happened — cooler colour so the two read differently. */
body.page-id-7006 .cos-appform__hint.is-advice {
	color: var(--cos-navy-700);
}

/* EIN and DUNS are identifiers, not quantities: the spinner offers to
   increment someone's tax ID, and the arrows steal width from a 9-digit
   value. (Their maxlength never worked either — see cos-net30app.js.) */
body.page-id-7006 .rminput input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

body.page-id-7006 .rminput input[type="number"]::-webkit-outer-spin-button,
body.page-id-7006 .rminput input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   6 — Help notes and the compliance preamble
   -------------------------------------------------------------------------- */
body.page-id-7006 .rmnote {
	background: transparent !important;
	margin-top: 5px;
}

body.page-id-7006 .rmprenote {
	display: none !important;
}

body.page-id-7006 .rmnotecontent {
	padding: 0 !important;
	background: transparent !important;
	color: var(--cos-muted) !important;
	font-size: .82rem;
	line-height: 1.5;
}

/* The Beneficial-Owner notice: a legal preamble, not body copy. */
body.page-id-7006 .rm_form_field_type_richtext {
	padding: 20px 22px;
	border: 1px solid var(--cos-line-strong);
	border-left: 3px solid var(--cos-yellow);
	border-radius: var(--cos-r);
	background: var(--cos-surface-2);
	font-size: .92rem;
	line-height: 1.65;
	color: var(--cos-text);
}

/* --------------------------------------------------------------------------
   6b — Net 30 FAQ (HFCM snippet 12)

   The accordion itself is the shared .cos-faq__* component from cos-home.css —
   the PHP filter swaps the snippet's inline-styled markup onto those classes,
   so only the section framing lives here.
   -------------------------------------------------------------------------- */
body.page-id-7006 .cos-net30-faq {
	max-width: 900px;
	margin: 56px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--cos-line);
}

body.page-id-7006 .cos-net30-faq__title {
	font-family: var(--cos-font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.2;
	color: var(--cos-ink);
	margin: 0 0 20px;
	text-align: center;
}

/* The shared component centres its own list at 860px; nothing else to add. */
body.page-id-7006 .cos-net30-faq .cos-faq__list {
	max-width: 100%;
}

@media (max-width: 640px) {
	body.page-id-7006 .cos-net30-faq {
		margin-top: 36px;
		padding-top: 28px;
	}

	body.page-id-7006 .cos-net30-faq .cos-faq__q { padding: 16px 18px; }
	body.page-id-7006 .cos-net30-faq .cos-faq__a { padding: 0 18px 18px; }
}

/* --------------------------------------------------------------------------
   7 — Buttons
   -------------------------------------------------------------------------- */
body.page-id-7006 .rm-btn,
body.page-id-7006 .rmagic-form input[type="submit"],
body.page-id-7006 .rmagic-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: var(--cos-yellow);
	color: #2b0a45;
	font-family: var(--cos-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(254, 215, 0, .35);
	transition: transform .18s var(--cos-ease), box-shadow .18s var(--cos-ease), background-color .18s var(--cos-ease);
}

body.page-id-7006 .rm-btn:hover,
body.page-id-7006 .rmagic-form input[type="submit"]:hover {
	background: var(--cos-yellow-600);
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(254, 215, 0, .42);
}

/* The "Previous" control is secondary and should not compete. */
body.page-id-7006 .rm-btn-secondary,
body.page-id-7006 [id^="rm_prev_form_page_button"] {
	background: transparent;
	color: var(--cos-navy);
	border: 1px solid var(--cos-line-strong);
	box-shadow: none;
}

body.page-id-7006 .rm-btn-secondary:hover,
body.page-id-7006 [id^="rm_prev_form_page_button"]:hover {
	background: var(--cos-surface-3);
	border-color: var(--cos-navy);
	box-shadow: none;
	transform: none;
}

body.page-id-7006 .rmagic-form-btn-center {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--cos-line);
}

/* Password strength meter */
body.page-id-7006 .pass-graybar {
	border-radius: 999px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   8 — Narrow screens: the two-column row is unusable below ~760px.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	body.page-id-7006 .rmrow {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
		margin-bottom: 16px;
	}

	body.page-id-7006 .rmfield {
		padding-top: 0;
	}

	body.page-id-7006 .rmagic-form,
	body.page-id-7006 .rm_form_container {
		max-width: 100%;
	}

}