/**
 * Styles for the ON1 Special Pricing page
 *
 * Three background bands. The intro sits one step up from the page on
 * --bg-800, which resolves to #282828 on dark and to a light lift on light,
 * so the band reads as a gentle step in either theme instead of a pinned
 * dark slab. The tabs and the pricing panels are the page's own dark tone,
 * and the ON1 Guarantee band that partials/footer.php appends is the light
 * section. Nothing here pins a theme - both resolve from the same tokens.
 *
 * @copyright   2026, ON1
 */

/* !- Page navigation
 *
 * Same treatment as #page-navigation on the free pages, so the two subnav
 * strips read alike. Duplicated rather than pulled from free.css - that's a
 * different page area's sheet.
 */
#page-navigation {
	padding: 0.75rem 0;
}

[data-theme="dark"] #page-navigation {
	background: var(--black);
}

[data-theme="light"] #page-navigation {
	background: var(--white);
}

#page-navigation .nav {
	flex-wrap: nowrap;
	overflow-x: auto;
}

#page-navigation .nav-item {
	margin: 0 0.75rem 0 0;
}

#page-navigation .nav-item:last-child {
	margin-right: 0;
}

#page-navigation .nav-link {
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	color: var(--text-300);
	font-size: var(--text-xs);
	font-weight: 500;
	padding: 0.25rem 0.75rem;
	white-space: nowrap;
}

#page-navigation .nav-link:hover {
	border-color: var(--bg-400);
	color: var(--text-50);
}

#page-navigation .nav-link.active {
	border-color: var(--blue-500);
	color: var(--text-50);
}

#page-navigation .nav-link img {
	border-radius: 0.25rem;
	margin-right: 0.5rem;
	vertical-align: -0.25rem;
}

/* !- Intro */
#intro {
	background: var(--bg-800);
	padding: 4rem 0;
}

#intro .eyebrow {
	margin-bottom: 0.75rem;
}

#intro h1 {
	margin-bottom: 1.25rem;
}

#intro .intro-copy {
	color: var(--text-300);
	font-size: var(--text-lg);
	line-height: 1.65;
	margin-bottom: 1rem;
}

#intro .intro-note {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

/* !- Category tabs
 *
 * Bootstrap's tab plugin drives these - it comes in with the bundle that
 * partials/foot.php loads, so the page needs no JavaScript of its own. The
 * row is the tablist; .cat-tab carries the look rather than .nav-pills,
 * which would bring its own colors to fight with.
 */
#categories {
	padding-top: 3.5rem;
}

#categories .cat-tab {
	align-items: center;
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	font-weight: 600;
	gap: 0.75rem;
	height: 100%;
	line-height: 1.3;
	padding: 1rem 1.25rem;
	text-align: left;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	width: 100%;
}

#categories .cat-tab i {
	color: var(--text-400);
	font-size: var(--text-lg);
}

#categories .cat-tab:hover {
	border-color: var(--bg-500);
	color: var(--text-50);
}

#categories .cat-tab.active {
	background: var(--blue-500);
	border-color: var(--blue-500);
	color: var(--white);
}

#categories .cat-tab.active i {
	color: var(--white);
}

/* !- Eligibility blocks */
#discounts {
	padding-top: 3.5rem;
}

#discounts .eligibility {
	margin-bottom: 3.5rem;
}

#discounts .eligibility:last-child {
	margin-bottom: 0;
}

#discounts .eligibility h2 {
	font-size: var(--text-2xl);
	margin-bottom: 0.75rem;
}

#discounts .eligibility-copy {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 1.75rem;
}

/* !- Offer cards
 *
 * The price and the button are pushed to the bottom of the card so a row of
 * cards lines them up regardless of how long each product's blurb runs.
 */
#discounts .offer {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	gap: 1.25rem;
	padding: 1.75rem;
}

#discounts .offer-icon {
	flex-shrink: 0;
	line-height: 0;
}

#discounts .offer-body {
	display: flex;
	flex-direction: column;
}

#discounts .offer-name {
	color: var(--text-50);
	font-size: var(--text-lg);
	margin-bottom: 0.5rem;
}

#discounts .offer-copy {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.55;
	margin-bottom: 1.25rem;
}

/*
 * Regular price stacked above the discounted one, the way the old page had
 * it. The pair sits at the bottom of the card rather than the price alone,
 * so the struck figure stays attached to the price it's struck against, and
 * a row of cards still lines its buttons up whatever the blurbs do.
 */
#discounts .offer-pricing {
	margin-bottom: 1.25rem;
	margin-top: auto;
}

/*
 * Empty but for the spinner until SBL fills it in on the client - the figure
 * is never rendered server-side, so the spinner is what holds the space.
 */
#discounts .offer-list-price {
	color: var(--text-500);
	font-size: var(--text-sm);
	line-height: 1.4;
	margin-bottom: 0;
}

#discounts .offer-list-price .fa-spinner {
	font-size: var(--text-mini);
}

#discounts .offer-price {
	color: var(--accent-orange);
	font-size: var(--text-2xl);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 0;
}

#discounts .offer-term {
	color: var(--text-400);
	font-size: var(--text-sm);
	font-weight: 500;
}

#discounts .offer .btn {
	align-self: flex-start;
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

@media (max-width: 575.98px) {
	#intro {
		padding: 3rem 0;
	}

	#intro h1 {
		font-size: var(--text-4xl);
	}

	#discounts .offer {
		flex-direction: column;
	}
}

/*==============================================================================
 * APPLICATION FORMS
 *
 * /landing/special-pricing/apply/ is still a WordPress page - the forms are
 * WPForms with file uploads, so that half can't be decoupled the way the
 * pricing page was. It renders through
 * wp-content/themes/on1/landing-page-templates/tpl-landing_special_pricing_form.php
 * and shares this sheet, which on1_template_stylesheets() adds for it.
 *
 * WPForms' own base styling is switched off in the plugin settings, so
 * everything below is the form's only CSS. The plugin ships nothing else here
 * but the Pro uploader's dropzone.min.css, which is why the uploader is left
 * alone below apart from matching its corners.
 =============================================================================*/

/* !- Back link */
#intro .back-to-pricing {
	margin-bottom: 0;
	margin-top: 1.5rem;
}

#intro .back-to-pricing a {
	font-size: var(--text-sm);
	text-decoration: none;
}

#intro .back-to-pricing a:hover {
	text-decoration: underline;
}

#intro .back-to-pricing i {
	margin-right: 0.375rem;
}

/* !- Checklist
 *
 * Instructions stay plain page copy above the form rather than going in a
 * panel of their own - the form is the only thing here that earns one.
 */
#application-form,
#application-picker {
	padding-top: 3.5rem;
}

#application-form h2 {
	font-size: var(--text-xl);
	margin-bottom: 1rem;
}

#application-form .apply-checklist {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 2.5rem;
	padding-left: 1.25rem;
}

#application-form .apply-checklist li {
	margin-bottom: 0.5rem;
}

#application-form .apply-checklist li:last-child {
	margin-bottom: 0;
}

/* !- Form panel
 *
 * Pinned light with data-theme in the markup. The style guide is explicit
 * that form fields never take a dark background, and painting white fields
 * one at a time onto the dark page left them reading as scattered boxes; the
 * whole panel resolving the light theme's tokens puts them on a light surface
 * the way they'd sit on a light page. --bg-950 rather than --bg-900 so the
 * panel still separates from the page when the visitor is on the light theme,
 * where --bg-900 is the page itself.
 *
 * The explicit color matters: body sets color on itself and that computed
 * value inherits straight through a pinned section - a child only re-resolves
 * the tokens it names.
 */
.apply-form {
	background: var(--bg-950);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	padding: 2.5rem;
}

.apply-form .wpforms-container {
	margin: 0;
}

/* !- Fields WPForms means to be invisible
 *
 * With the plugin's base styling switched off, nothing hides these. The
 * honeypot rendered as a real, labelled text input in the middle of the form
 * - anyone who filled it in had their application silently dropped as spam -
 * and the screen-reader element printed as visible copy. Same declarations
 * assets/css/legacy/utilities.css uses for the gallery uploaders, which is
 * where the site already solved this; that sheet just never loads here.
 */
.apply-form .wpforms-container .wpforms-field-hp {
	display: none !important;
	left: -9000px !important;
	position: absolute !important;
}

.apply-form .wpforms-container .wpforms-field-hidden {
	display: none;
}

.apply-form .wpforms-container .wpforms-screen-reader-element {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.apply-form .wpforms-field {
	margin-bottom: 1.5rem;
	padding: 0;
}

.apply-form .wpforms-field-label {
	color: var(--text-100);
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	margin-bottom: 0.375rem;
}

.apply-form .wpforms-required-label {
	color: var(--red-800);
}

/* First/Last and the like, which WPForms prints after their input */
.apply-form .wpforms-field-sublabel {
	color: var(--text-400);
	display: block;
	font-size: var(--text-mini);
	font-weight: 400;
	margin: 0.25rem 0 0;
}

.apply-form .wpforms-field-description {
	color: var(--text-400);
	font-size: var(--text-mini);
	line-height: 1.5;
	margin-top: 0.5rem;
}

/* The plugin lays these out with floats; the grid it wants is two columns */
.apply-form .wpforms-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.apply-form .wpforms-field-row-block {
	flex: 1 1 12rem;
	float: none;
	width: auto;
}

.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="number"],
.apply-form input[type="tel"],
.apply-form input[type="url"],
.apply-form select,
.apply-form textarea {
	background: var(--white);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	color: var(--text-100);
	display: block;
	font-family: var(--sans-serif);
	font-size: var(--text-base);
	line-height: 1.5;
	padding: 0.625rem 0.75rem;
	width: 100%;
}

.apply-form textarea {
	min-height: 10rem;
	resize: vertical;
}

.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
	border-color: var(--blue-500);
	box-shadow: none;
	outline: 2px solid var(--blue-transparent);
	outline-offset: 0;
}

.apply-form ::placeholder {
	color: var(--text-500);
	opacity: 1;
}

/* !- Uploader
 *
 * Dropzone brings its own sheet, so this only matches the corners and the
 * field background - the drag and progress states are left to the plugin.
 * Its own rule is div.wpforms-container div.wpforms-uploader, so the two
 * element selectors are here to outweigh it rather than to add meaning.
 */
.apply-form div.wpforms-container div.wpforms-uploader {
	background: var(--white);
	border-radius: var(--border-radius);
}

.apply-form .wpforms-uploader .dz-message {
	color: var(--text-400);
}

/* !- Validation */
.apply-form label.wpforms-error {
	color: var(--red-800);
	display: block;
	font-size: var(--text-mini);
	font-weight: 600;
	margin-top: 0.375rem;
}

.apply-form input.wpforms-error,
.apply-form select.wpforms-error,
.apply-form textarea.wpforms-error {
	border-color: var(--red-500);
}

/* !- Submit
 *
 * The button already carries btn bg-blue text-white from the form builder,
 * so this is only the house sizing. It also carries rounded-pill from the
 * same place, which is old styling - that comes off in the WPForms builder,
 * not here, because .rounded-pill is !important.
 */
.apply-form .wpforms-submit-container {
	margin-top: 2rem;
}

.apply-form .wpforms-submit {
	font-size: var(--text-sm);
	padding: 0.75rem 1.5rem;
}

/* Confirmation copy reads as page copy, not as another panel */
.apply-form .wpforms-confirmation-container-full {
	background: none;
	border: 0;
	color: var(--text-300);
	margin: 0;
	padding: 0;
}

/* !- Category picker, for /apply/ with no form in the query string */
#application-picker .picker-link {
	align-items: center;
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-200);
	display: flex;
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 1rem 1.25rem;
	text-decoration: none;
}

#application-picker .picker-link:hover {
	border-color: var(--bg-500);
	color: var(--text-50);
}

@media (max-width: 575.98px) {
	.apply-form {
		padding: 1.5rem;
	}
}