/* Apply forms wizard
------------------------------------- */

.apply-form-page { padding: 40px 0 60px; }

.apply-form-intro { max-width: 760px; margin: 0 auto 30px; }
.apply-form-intro p { font-size: 16px; line-height: 1.6; }

/* Заголовок + подзаголовок страницы - они же og:title/og:description превью ссылки
   (см. ORG_ID_PAGE/MICROCHIP_PROGRAM_PAGE в controllers/ApplyFormsController.js) */
.apply-form-hero { margin-bottom: 22px; }
.apply-form-intro .apply-form-subtitle {
	max-width: 640px;
	margin: 0 auto;
	font-size: 20px;
	line-height: 1.5;
}
@media (max-width: 767px) {
	.apply-form-intro .apply-form-subtitle { font-size: 18px; }
}

.apply-form-benefits {
	background-color: #fcfcfc;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 20px 25px;
	margin: 20px 0;
}
.apply-form-benefits h4 { margin: 0 0 10px; }
.apply-form-benefits ul { margin: 0; padding-left: 20px; }
.apply-form-benefits li { line-height: 1.8; }

.apply-wizard {
	max-width: 760px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 0 12px rgba(0,0,0,0.08);
	padding: 35px 40px 40px;
}
@media (max-width: 767px) {
	.apply-wizard { padding: 25px 18px 30px; }
}

/* Progress indicator */
.wizard-progress {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 35px;
	position: relative;
}
.wizard-progress-step {
	flex: 1;
	text-align: center;
	position: relative;
	cursor: default;
}
.wizard-progress-step:not(:last-child):after {
	content: '';
	position: absolute;
	top: 15px;
	left: 50%;
	width: 100%;
	height: 2px;
	background-color: #e6e6e6;
	z-index: 0;
}
.wizard-progress-step.done:not(:last-child):after { background-color: #01b9ff; }

.wizard-progress-step .dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #fff;
	border: 2px solid #d8d8d8;
	color: #999;
	font-weight: 600;
	font-size: 14px;
	position: relative;
	z-index: 1;
	transition: all 0.2s ease-in-out;
}
.wizard-progress-step.active .dot {
	border-color: #01b9ff;
	color: #01b9ff;
	background-color: #fff;
}
.wizard-progress-step.done .dot {
	border-color: #01b9ff;
	background-color: #01b9ff;
	color: #fff;
	cursor: pointer;
}
.wizard-progress-step.done .dot .num { display: none; }
/* a plain ✓, as the success screen's: the site's icon font has no fa-check */
.wizard-progress-step.done .dot:after { content: '\2713'; font-weight: 700; }

.wizard-progress-step .label {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: #999;
	font-weight: 600;
}
.wizard-progress-step.active .label,
.wizard-progress-step.done .label { color: #333; }

/* Steps */
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: wizardFadeIn 0.25s ease-in-out; }

@keyframes wizardFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.wizard-step h3 {
	margin: 0 0 4px;
	font-weight: 400;
}
.wizard-step .step-hint {
	color: #777;
	font-size: 15px;
	margin-bottom: 22px;
}

.wizard-step .form-row { margin-bottom: 18px; }
.wizard-step .form-row > label:not(.radio-inline-label) {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
	font-size: 15px;
	color: #777;
}
.wizard-step .form-row .hint {
	display: block;
	font-weight: 400;
	color: #777;
	font-size: 14px;
	line-height: 1.4em;
	margin-top: 3px;
}
.wizard-step .required-star { color: #f00; margin-left: 2px; }

.wizard-step input.input-text,
.wizard-step textarea.input-text,
.wizard-step select.input-text { width: 100%; }
/* the theme's input:focus (style.css), for a select too: the theme gives it none */
.wizard-step select.input-text:focus {
	border-color: #d8d8d8;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.07);
}
.wizard-step textarea.input-text { resize: vertical; }

/* Варианты ответа - строго по одному на строку на любой ширине экрана: вперемешку
   в строку короткие и длинные варианты читаются плохо, а на мобиле ещё и мелко
   прокликиваются. Кликабельна вся строка варианта - label блочный (глобальный
   label {display: block} из style.css), а .radio/.checkbox-opt растянуты на ширину. */
.wizard-options { display: flex; flex-direction: column; gap: 8px; }
.wizard-options .checkbox-opt label {
	position: relative;
	padding-left: 29px;
	cursor: pointer;
	line-height: 25px;
}
.wizard-options .checkbox-opt input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}
.wizard-options .checkbox-opt .cb-label {
	position: absolute;
	left: 0;
	top: 3px;
	box-sizing: border-box;
	width: 19px;
	height: 19px;
	border: 2px solid #b4b4b4;
	border-radius: 4px;
	background-color: #fff;
}
.wizard-options .checkbox-opt input[type="checkbox"]:checked + label .cb-label {
	background-color: #01b9ff;
	border-color: #01b9ff;
}
.wizard-options .checkbox-opt input[type="checkbox"]:checked + label .cb-label:after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wizard-conditional {
	margin-top: 12px;
	padding: 14px 16px;
	background-color: #fcfcfc;
	border-radius: 4px;
	border: 1px solid #eee;
}
.wizard-conditional > label.apply-sub-label { display: block; font-size: 15px; color: #777; margin-bottom: 8px; }

/* FR-293: the «Found-pet alerts» block (views/parts/apply-found-pet-alerts.ejs) — the panel above,
   its title as the theme's h4; the consent's fine print sits under the box in line with the
   label's text (box 19px + 10px gap, as .checkbox-opt label's padding), not under the box */
.apply-alerts h4 { margin: 0 0 6px; }
.apply-alerts .form-row:last-child { margin-bottom: 0; }
/* ui-review UI-S-4: the field after the panel keeps the form's row gap (18px), not stuck to the panel */
.wizard-step .apply-alerts { margin-bottom: 18px; }
.apply-alerts .apply-consent .hint { padding-left: 29px; }

.wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #eee;
}
.wizard-nav .btn-back { visibility: visible; }
.wizard-nav .btn-back.is-hidden { visibility: hidden; }
.wizard-nav .nav-spacer { flex: 1; }

/* Success screen */
.wizard-success,
.apply-registered-success {
	display: none;
	text-align: center;
	padding: 30px 10px 10px;
}
.wizard-success .icon-ok,
.apply-registered-success .icon-ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: #ebf6e0;
	color: #5f9025;
	font-size: 28px;
	margin-bottom: 18px;
}
.wizard-success h3,
.apply-registered-success h3 { margin-bottom: 10px; }
.wizard-success p,
.apply-registered-success p { max-width: 480px; margin: 0 auto; }

/* FR-293 (REQ-44, REQ-44a): the hint under a field and the advice on the success screen are the old
   theme's notice (.notification.notice, style.css) — only their place and the hidden state are here:
   the theme's right padding is for a close button they don't have */
.apply-dup-hint[hidden],
.apply-dup-advice[hidden] { display: none; }
.apply-dup-hint,
.apply-dup-advice { padding-right: 26px; }
.apply-dup-hint { margin: 12px 0 0; }
.apply-dup-advice { max-width: 480px; margin: 22px auto 0; text-align: left; }

/* FR-293 (REQ-53, AC-94): the text of a failed submission, above the buttons — the theme's
   .notification.error (style.css), only its place and the hidden state are here */
.apply-submit-error[hidden] { display: none; }
.apply-submit-error { margin: 22px 0 0; padding-right: 26px; }
.apply-submit-error p { margin: 0; }

/* FR-217: the optional tax-exemption certificate (views/parts/apply-tax-certificate.ejs) */
.apply-tax-cert .apply-tax-cert-file { padding: 10px; height: auto; line-height: normal; cursor: pointer; }
.apply-tax-cert-fields { display: flex; gap: 14px; margin-top: 12px; }
.apply-tax-cert-fields label { font-size: 15px; color: #777; display: block; margin-bottom: 6px; }
.apply-tax-cert-state { flex: 0 0 140px; }
.apply-tax-cert-state input { text-transform: uppercase; }
.apply-tax-cert-number { flex: 1 1 auto; min-width: 0; }
/* FR-238: the block is in step 3 with the organization's (partly public) data — it says it isn't public */
.wizard-step .form-row .hint.apply-private-note { color: #5f9025; font-weight: 600; }
/* FR-245: what the certificate changes (sales tax) — read before the file is chosen */
.wizard-step .form-row .hint.apply-tax-note { font-weight: 600; }
@media (max-width: 480px) {
	.apply-tax-cert-fields { flex-direction: column; gap: 10px; }
	.apply-tax-cert-state { flex-basis: auto; }
}

/* FR-228: "Already registered?" on the program form (apply-registered.js) */
.apply-registered {
	max-width: 760px;
	margin: 0 auto 24px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 0 12px rgba(0,0,0,0.08);
	padding: 28px 40px 24px;
}
@media (max-width: 767px) {
	.apply-registered { padding: 22px 18px 18px; }
}
.apply-registered .wizard-step > .form-row:first-child { margin-bottom: 0; }
.apply-registered-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.apply-registered [hidden] { display: none !important; }
.apply-registered-check { display: flex; gap: 10px; align-items: stretch; }
.apply-registered-check .input-text { flex: 1; min-width: 0; margin: 0; }
/* secondary button of the site (Dan, 2026-10-07; FR-340: a.button.border of the theme) */
.apply-registered .apply-registered-check .button.border {
	flex: none;
	margin: 0;
	padding: 0 20px;
	border: 1px solid #01b9ff;
	border-radius: 50px;
	background-color: #fff;
	color: #01b9ff;
	font-weight: 600;
	line-height: 1.2;
}
@media (hover: hover) {
	.apply-registered .apply-registered-check .button.border:hover:not([disabled]) { background-color: #01b9ff; color: #fff; }
}
.apply-registered .apply-registered-check .button.border[disabled] { background-color: #ccc; border-color: #ccc; color: #fff; cursor: default; }
/* the answer of a check is a message of the field above it: an error — red text under the
   field and a red field (FR-340, the user 2026-10-16), the rest — the theme's notifications */
.apply-registered-msg { margin-top: 6px; font-size: 13px; line-height: 1.4; }
.apply-registered-msg:empty { display: none; }
.apply-registered-msg.ok { color: #5f9025; }
.apply-registered-msg.ok:before { content: '\2713'; font-weight: 700; margin-right: 6px; }
.apply-registered-msg.warn { font-size: 15px; color: #8f872e; background-color: #fbfadd; border-radius: 3px; padding: 20px 26px; }
.apply-registered-msg.err { color: #c62828; }
/* a value the check answered is wrong (no such Org ID, not an address): the field's red too —
   its own class (apply-registered.js wrongValue), which only typing takes away */
.wizard-step input.input-text.apply-wrong,
.wizard-step input.input-text.apply-wrong:focus { border-color: #c62828; }
.apply-registered .wizard-nav { margin-top: 10px; }

/* FR-238: /register-organization is two forms in one (apply-wizard.js) — the parts of the
   one that's off are hidden; on /Free-Microchip-Program a store or a distributor is
   pointed to /wholesale */
.apply-wizard .variant-off { display: none !important; }
/* the theme's .notification: its padding too (style.css:10338–10345) */
.apply-trade-hint { font-size: 15px; line-height: 1.45; color: #3184ae; background-color: #e9f7fe; border: none; border-radius: 3px; padding: 20px 26px; }
.apply-trade-hint a { color: #3184ae; font-weight: 600; }
/* ui-review UI-S-7: the e-mail in the hint and the advice reads as a link, as in the forms' other notices */
.apply-dup-hint a, .apply-dup-advice a { font-weight: 600; text-decoration: underline; }
.apply-trade-hint.apply-closed-hint { color: #8f872e; background-color: #fbfadd; }
.apply-trade-hint.apply-closed-hint a { color: #8f872e; }

/* FR-245: the field checks (apply-checks.js) — the message under the field */
.apply-field-error {
	display: block;
	margin-top: 6px;
	font-style: normal;
	font-size: 13px;
	line-height: 1.4;
	color: #c62828;
}
.apply-field-error:empty { display: none; }
/* a field straight in its row keeps the theme's margin under it (16px): its message comes up to
   6px under the field, as under a phone, an address part or a row with a button */
.wizard-step .form-row > .input-text + .apply-field-error,
.wizard-step .wizard-conditional > .input-text + .apply-field-error { margin-top: -10px; }
.wizard-step input.input-text.has-error,
.wizard-step select.input-text.has-error,
.wizard-step textarea.input-text.has-error,
.wizard-step input.input-text.has-error:focus,
.wizard-step select.input-text.has-error:focus,
.wizard-step textarea.input-text.has-error:focus { border-color: #c62828; }
.apply-wizard [hidden] { display: none !important; }

/* the phone mask: the flag and the code inside the field, the field as wide as the others;
   intl-tel-input's grey box of the code (.iti--show-selected-dial-code) is square — rounded as
   the theme's field (radius 20) and kept inside its 1px border */
.apply-wizard .iti { display: block; width: 100%; }
/* intl-tel-input's own padding (--iti-border-width) keeps the box inside the field's 1px border */
.apply-wizard .iti__selected-country { border-radius: 19px 0 0 19px; }
.apply-wizard .iti input.input-text { margin-bottom: 0; }

/* the address by its parts (views/parts/apply-address.ejs) */
.apply-address-grid { display: flex; flex-direction: column; gap: 10px; }
.apply-address-field > label {
	display: block;
	font-size: 15px;
	color: #777;
	margin-bottom: 5px;
}
.apply-address-field .input-text { margin-bottom: 0; }
/* «(optional)» after a field's label (FR-245: Dan 2026-10-12 — the website, the SMS number, the
   public address aren't required, and it should be seen); #767676 — readable (AA) on white */
.apply-optional { font-weight: 400; color: #767676; }
.wizard-step .apply-address-field .hint.apply-address-pick-hint { margin-top: 5px; }
.apply-address-row { display: flex; gap: 10px; }
.apply-address-row .apply-address-city { flex: 1 1 45%; min-width: 0; }
.apply-address-row .apply-address-state { flex: 1 1 30%; min-width: 0; }
.apply-address-row .apply-address-zip { flex: 0 1 25%; min-width: 0; }
@media (max-width: 600px) {
	.apply-address-row { flex-wrap: wrap; }
	.apply-address-row .apply-address-city { flex-basis: 100%; }
	.apply-address-row .apply-address-state,
	.apply-address-row .apply-address-zip { flex: 1 1 calc(50% - 5px); }
}
.apply-address-status { margin: 8px 0 0; font-size: 13px; color: #777; }
.apply-address-status:empty { display: none; }
.apply-address-status[data-status="found"] { color: #5f9025; }
.apply-address-status[data-status="found"]:before { content: '\2713'; font-weight: 700; margin-right: 6px; }
.apply-address-status[data-status="notfound"] { display: none; }
/* ui-review UI-S-6: no green «found on the map» next to a part of the address the form asks to fix */
.apply-address-fix .apply-address-status[data-status="found"] { display: none; }
/* Google's suggestion list over the form and the page's header */
.pac-container { z-index: 10050; }

/* links one per field (views/parts/apply-links.ejs) */
.apply-links-list { display: flex; flex-direction: column; gap: 8px; }
.apply-link-row { display: flex; gap: 8px; align-items: center; }
.apply-link-row .input-text { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.apply-link-remove {
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid #66676b;
	border-radius: 50%;
	background-color: #fff;
	color: #66676b;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
/* no hover, as the theme's neutral button.button.border */
.apply-links-list .apply-field-error { margin-top: -2px; }

/* secondary buttons of the site (Dan, 2026-10-07): blue outline, blue text — over the
   site's grey button.button.border (style.css); FR-340: as a.button.border of the theme */
.apply-wizard button.button.border.apply-link-add,
.apply-wizard button.button.border.apply-logo-remove {
	margin: 10px 0 0;
	border: 1px solid #01b9ff;
	border-radius: 50px;
	background-color: #fff;
	color: #01b9ff;
}
@media (hover: hover) {
	.apply-wizard button.button.border.apply-link-add:hover,
	.apply-wizard button.button.border.apply-logo-remove:hover { background-color: #01b9ff; color: #fff; }
}

/* the logo (views/parts/apply-logo.ejs) */
.apply-logo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.apply-logo-pick .apply-logo-file { flex: 1 1 260px; min-width: 0; padding: 10px; height: auto; line-height: normal; cursor: pointer; margin-bottom: 0; }
.apply-logo-preview {
	flex: none;
	width: 72px;
	height: 72px;
	object-fit: contain;
	border: 1px solid #dbdbdb;
	border-radius: 4px;
	background-color: #fafafa;
}
.apply-wizard .apply-logo-pick button.button.border.apply-logo-remove { margin-top: 0; }

/* FR-278: the software block — ShelterManager's note (where to type the Org ID) is read, not a fine-print hint */
.wizard-step .apply-software-note { margin: 0; font-size: 15px; line-height: 1.5; color: #777; }
.wizard-step .apply-software .apply-software-key-label { display: block; font-weight: 700; font-size: 15px; color: #777; margin-bottom: 6px; }
.wizard-step .apply-software .apply-software-key-label .hint { margin-bottom: 4px; }

/* FR-274: the edit page of an application (views/parts/apply-edit.ejs, apply-wizard.js
   edit mode): the form shows once the application has filled it */
.apply-edit-intro [hidden] { display: none !important; }
.apply-wizard[data-mode="edit"]:not(.is-loaded) .wizard-body,
.apply-wizard[data-mode="edit"]:not(.is-loaded) .wizard-progress { display: none; }
.apply-edit-loading { color: #777; }
.apply-edit-closed {
	text-align: left;
	margin: 10px auto 0;
	padding: 20px 26px;
	border: none;
	border-radius: 3px;
	background-color: #fbfadd;
	color: #8f872e;
}
.apply-edit-closed h3 { margin: 0 0 8px; font-size: 18px; color: #8f872e; }
.apply-edit-closed p { margin: 0; color: #8f872e; }
.apply-edit-closed a { color: #8f872e; font-weight: 600; }
/* FR-293 ui-review UI-S-1: the form the person typed in stays readable under «changed», nothing can be sent from it */
.apply-edit-closed .apply-edit-reload { margin-top: 12px; }
.apply-edit-stale .btn-submit { display: none !important; }
.apply-edit-stale input, .apply-edit-stale textarea, .apply-edit-stale select { opacity: .75; }
.apply-edit-current {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 15px;
}
.apply-edit-current img {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: contain;
	border: 1px solid #dbdbdb;
	border-radius: 4px;
	background-color: #fafafa;
}
.apply-edit-trade-note { margin-top: 6px; }