/* ==========================================================================
   NANMOW Start Flow v1.1.0 (owned by NANMOW / ARENTICO)
   Source of truth: website/pages/nm-start.css
   Deployed as:     wp-content/themes/nanmow/assets/pages/nm-start.css (/start/ only)
   The four-step "ابدأ معنا" flow. Without JS: one complete form (all steps visible).
   form.is-stepped (nm-start.js): one step at a time + progress. Docs: DESIGN-SYSTEM §21.4.
   ========================================================================== */

#nm-start-form-main > .elementor-widget { flex: 1 1 100%; inline-size: 100%; min-inline-size: 0; }
#nm-start-form-main { padding: 40px 44px 44px; border: 1px solid var(--nm-neutral-200); border-radius: 24px; background: #fff; box-shadow: 0 20px 48px rgb(11 63 74 / .06); }
.nm-form { display: flex; flex-direction: column; gap: 32px; font-family: var(--nm-font-ar), sans-serif; color: var(--nm-ink-950); scroll-margin-block-start: calc(var(--nm-header-h, 80px) + 40px); }
.nm-form__intro { margin: 0; font-size: 15px; color: var(--nm-neutral-600); }

/* Progress */
.nm-progress { position: relative; }
.nm-progress ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.nm-progress li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--nm-neutral-600); }
.nm-progress li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 8px; inset-inline-start: 9px; inline-size: 100%; block-size: 2px; background: linear-gradient(var(--nm-teal-900), var(--nm-teal-900)) no-repeat right center / 0 100%, var(--nm-neutral-200); transition: background-size .45s var(--nm-ease, ease); }
html[dir="ltr"] .nm-progress li::after { background-position: left center, 0 0; }
.nm-progress li.is-done::after { background-size: 100% 100%, auto; }
.nm-progress__node { position: relative; z-index: 1; inline-size: 18px; block-size: 18px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 2px solid var(--nm-neutral-400); transition: background-color .3s var(--nm-ease, ease), border-color .3s var(--nm-ease, ease), box-shadow .3s var(--nm-ease, ease); }
.nm-progress li.is-done { color: var(--nm-teal-900); }
.nm-progress li.is-done .nm-progress__node { background: var(--nm-teal-900); border-color: var(--nm-teal-900); }
.nm-progress li.is-current { color: var(--nm-teal-900); font-weight: 700; }
.nm-progress li.is-current .nm-progress__node { background: var(--e-global-color-accent); border-color: var(--e-global-color-accent); box-shadow: 0 0 0 6px rgb(255 90 31 / .16); }
.nm-progress__now, .nm-progress__bar { display: none; }

/* Steps */
.nm-fstep { display: flex; flex-direction: column; gap: 24px; }
.nm-form:not(.is-stepped) .nm-fstep + .nm-fstep { padding-block-start: 32px; border-block-start: 1px solid var(--nm-neutral-200); }
.nm-fstep[hidden] { display: none; }
.nm-fstep__head { display: flex; flex-direction: column; gap: 6px; }
.nm-fstep__head > * { margin: 0; }
.nm-fstep__count { font-size: 15px; font-weight: 700; color: var(--nm-orange-700); }
.nm-form.is-stepped .nm-fstep__count { display: none; }
#nm-start-form .nm-form__title { margin: 0; font-size: 26px; font-weight: 700; color: var(--nm-teal-900); line-height: 1.4; }
#nm-start-form .nm-form__title:focus { outline: none; }
.nm-fstep__intro { font-size: 17px; line-height: 1.6; color: var(--nm-neutral-600); }
.nm-fstep__summary { padding: 14px 18px; border-radius: 12px; background: #fef3f2; color: #b42318; font-size: 16px; line-height: 1.6; }
.nm-fstep__summary:focus { outline: 3px solid #b42318; outline-offset: 2px; }
@keyframes nm-step-fwd { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes nm-step-back { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
html[dir="ltr"] .nm-fstep.is-in-fwd { animation-name: nm-step-back; }
html[dir="ltr"] .nm-fstep.is-in-back { animation-name: nm-step-fwd; }
.nm-fstep.is-in-fwd { animation: nm-step-fwd .32s var(--nm-ease, ease) both; }
.nm-fstep.is-in-back { animation: nm-step-back .32s var(--nm-ease, ease) both; }

/* Fields */
.nm-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.nm-field { display: flex; flex-direction: column; gap: 8px; margin: 0; min-inline-size: 0; }
.nm-field--wide { grid-column: 1 / -1; }
fieldset.nm-field { border: 0; padding: 0; }
.nm-field__label { font-size: 16px; font-weight: 700; color: var(--nm-teal-900); line-height: 1.5; padding: 0; }
.nm-req { color: var(--nm-orange-700); }
.nm-opt { font-weight: 400; font-size: 14px; color: var(--nm-neutral-600); }
.nm-field__hint { margin: 0; font-size: 15px; color: var(--nm-neutral-600); line-height: 1.6; }
.nm-form input[type="text"], .nm-form input[type="email"], .nm-form input[type="tel"], .nm-form input[type="url"], .nm-form select, .nm-form textarea {
	inline-size: 100%;
	min-block-size: 52px;
	padding: 12px 16px;
	border: 1.5px solid #7E959A; /* supporting neutral: 3.1:1 on white (WCAG 1.4.11) */
	border-radius: 12px;
	background: #fff;
	color: var(--nm-ink-950);
	font: 400 17px/1.5 var(--nm-font-ar), sans-serif;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.nm-form input:hover, .nm-form select:hover, .nm-form textarea:hover { border-color: var(--nm-teal-700); }
/* Field states scoped to the form section: the Elementor Kit's global field rule
   (.elementor-kit-7 input:not():not(), 0-3-1) otherwise wins over the rules above. */
#nm-start-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { border-color: #7E959A; }
#nm-start-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea):hover { border-color: var(--nm-teal-700); }
#nm-start-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus { border-color: var(--nm-teal-900); }
#nm-start-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea)[aria-invalid="true"] { border-color: #b42318; }
/* Browser autofill: keep the NANMOW field surface instead of the UA yellow/blue fill. */
.nm-form input:is(:-webkit-autofill, :autofill), .nm-form select:is(:-webkit-autofill, :autofill), .nm-form textarea:is(:-webkit-autofill, :autofill) { -webkit-text-fill-color: var(--nm-ink-950); caret-color: var(--nm-ink-950); box-shadow: 0 0 0 1000px var(--nm-neutral-50) inset; transition: background-color 9999s linear 0s; }
.nm-form input:is(:-webkit-autofill, :autofill):focus { border-color: var(--nm-teal-900); box-shadow: 0 0 0 1000px var(--nm-neutral-50) inset, 0 0 0 3px rgb(11 63 74 / .12); }
.nm-form textarea { min-block-size: 104px; resize: vertical; }
.nm-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3F4A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: left 16px center; background-size: 18px 18px; background-repeat: no-repeat; padding-inline-end: 16px; padding-inline-start: 44px; }
html[dir="ltr"] .nm-form select { background-position: right 16px center; }
.nm-form input:focus, .nm-form select:focus, .nm-form textarea:focus { outline: none; border-color: var(--nm-teal-900); box-shadow: 0 0 0 3px rgb(11 63 74 / .12); }
.nm-form input:focus-visible, .nm-form select:focus-visible, .nm-form textarea:focus-visible { outline: 3px solid var(--e-global-color-accent); outline-offset: 2px; }
.nm-form [aria-invalid="true"] { border-color: #b42318; }
.nm-field__error { margin: 0; font-size: 15px; color: #b42318; line-height: 1.5; }
.nm-field__error:empty { display: none; }
.nm-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.nm-choice { position: relative; display: inline-flex; align-items: center; min-block-size: 44px; cursor: pointer; }
.nm-choice input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.nm-choice span { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 8px 16px; border: 1.5px solid var(--nm-neutral-200); border-radius: 999px; background: #fff; font-size: 16px; font-weight: 500; color: var(--nm-teal-900); transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.nm-choice:hover span { border-color: var(--nm-teal-900); }
.nm-choice input:checked + span { background: var(--nm-teal-900); border-color: var(--nm-teal-900); color: #fff; }
.nm-choice input:focus-visible + span { outline: 3px solid var(--e-global-color-accent); outline-offset: 2px; }
.nm-field--choice[aria-invalid="true"] .nm-choice span { border-color: #b42318; }
.nm-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.7; color: var(--nm-ink-950); cursor: pointer; }
.nm-consent input { flex: none; inline-size: 24px; block-size: 24px; margin-block-start: 3px; accent-color: var(--nm-teal-900); }
.nm-consent a { color: var(--nm-teal-900); text-decoration: underline; text-underline-offset: 4px; }
.nm-hp { position: absolute !important; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* Step navigation */
.nm-fstep__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-start: 8px; }
.nm-fstep__nav[hidden] { display: none; }
body.nm-page .nm-fstep__next, body.nm-page .nm-fstep__back, body.nm-page .nm-review__edit {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 52px; padding: 12px 28px; border-radius: 12px;
	font: 700 17px/1.2 var(--nm-font-ar), sans-serif; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
body.nm-page .nm-fstep__next { margin-inline-start: auto; border: 2px solid var(--nm-teal-900); background: var(--nm-teal-900); color: #fff; }
body.nm-page .nm-fstep__next:hover, body.nm-page .nm-fstep__next:focus { background: var(--nm-ink-950); border-color: var(--nm-ink-950); color: #fff; }
body.nm-page .nm-fstep__back { border: 2px solid var(--nm-neutral-200); background: #fff; color: var(--nm-teal-900); }
body.nm-page .nm-fstep__back:hover, body.nm-page .nm-fstep__back:focus { border-color: var(--nm-teal-900); background: #fff; color: var(--nm-teal-900); }
.nm-fstep__next::after, .nm-fstep__back::before { content: ""; inline-size: 16px; block-size: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center/contain no-repeat; }
.nm-fstep__back::before { transform: scaleX(-1); }
html[dir="ltr"] .nm-fstep__next::after { transform: scaleX(-1); }
html[dir="ltr"] .nm-fstep__back::before { transform: none; }

/* Review */
.nm-review { display: flex; flex-direction: column; gap: 16px; }
.nm-review[hidden] { display: none; }
.nm-review__group { padding: 18px 20px; border: 1px solid var(--nm-neutral-200); border-radius: 16px; background: var(--nm-neutral-50); }
.nm-review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 8px; }
#nm-start-form .nm-review__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--nm-teal-900); }
body.nm-page .nm-review__edit { min-block-size: 44px; padding: 8px 16px; border: 1.5px solid var(--nm-neutral-200); background: #fff; color: var(--nm-teal-900); font-size: 15px; }
body.nm-page .nm-review__edit:hover, body.nm-page .nm-review__edit:focus { border-color: var(--nm-teal-900); background: #fff; color: var(--nm-teal-900); }
.nm-review__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 20px; margin: 0; }
.nm-review__row { display: contents; }
.nm-review__row dt, .nm-review__row dd { margin: 0; padding-block: 8px; border-block-start: 1px solid var(--nm-neutral-200); font-size: 16px; line-height: 1.6; }
.nm-review__row:first-child dt, .nm-review__row:first-child dd { border-block-start: 0; }
.nm-review__row dt { color: var(--nm-neutral-600); }
.nm-review__row dd { color: var(--nm-ink-950); font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; }
.nm-review__row.is-empty dd { color: var(--nm-neutral-400); font-weight: 400; }

/* Final actions */
.nm-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.nm-form__actions .nm-fstep__nav { padding: 0; }
body.nm-page .nm-form__submit {
	min-block-size: 56px; padding: 14px 36px; border: 2px solid var(--e-global-color-accent); border-radius: 12px; margin-inline-start: auto;
	background: var(--e-global-color-accent); color: var(--nm-ink-950); font: 700 18px/1.2 var(--nm-font-ar), sans-serif; cursor: pointer;
	transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
body.nm-page .nm-form:not(.is-stepped) .nm-form__submit { margin-inline-start: 0; }
#nm-start-form .nm-form__submit:hover, #nm-start-form .nm-form__submit:focus-visible { background: var(--nm-orange-700); border-color: var(--nm-orange-700); color: #fff; }
@media (hover: hover) and (pointer: fine) { #nm-start-form .nm-form__submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(255 90 31 / .22); } }
.nm-form__after { margin: 0; font-size: 16px; color: var(--nm-neutral-600); line-height: 1.6; }
.nm-form__status { margin: 0; padding: 14px 18px; border-radius: 12px; background: var(--nm-neutral-50); border: 1px solid var(--nm-neutral-200); font-size: 16px; line-height: 1.6; color: var(--nm-teal-900); }
.nm-form__status:empty { display: none; }

/* Tablet */
@media (max-width: 1024px) {
	#nm-start-form-main { padding: 32px; }
}
/* Phones: one clean column, compact progress, listed choices */
@media (max-width: 767px) {
	#nm-start-form-main { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.nm-form { gap: 24px; }
	.nm-progress ol { display: none; }
	.nm-progress__now { display: block; margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--nm-teal-900); }
	.nm-progress__bar { display: block; position: relative; block-size: 4px; border-radius: 2px; background: var(--nm-neutral-200); overflow: hidden; }
	.nm-progress__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(25% + var(--nm-p, 0) * 75%); border-radius: 2px; background: var(--e-global-color-accent); transition: inline-size .4s var(--nm-ease, ease); }
	#nm-start-form .nm-form__title { font-size: 22px; }
	.nm-form__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.nm-choices { flex-direction: column; gap: 8px; }
	.nm-choice span { inline-size: 100%; border-radius: 12px; padding: 10px 16px; min-block-size: 48px; }
	.nm-choice span::before { content: ""; flex: none; inline-size: 18px; block-size: 18px; box-sizing: border-box; border: 2px solid var(--nm-neutral-400); border-radius: 50%; background: #fff; }
	.nm-choices--checkbox .nm-choice span::before { border-radius: 5px; }
	.nm-choice input:checked + span::before { border-color: #fff; background: radial-gradient(circle, #fff 0 4px, transparent 4.5px); }
	.nm-choices--checkbox .nm-choice input:checked + span::before { background: #fff; box-shadow: inset 0 0 0 3px var(--nm-teal-900); }
	.nm-fstep__nav { flex-wrap: wrap; }
	body.nm-page .nm-fstep__next { flex: 1 1 auto; }
	.nm-form__actions { flex-direction: column-reverse; align-items: stretch; }
	.nm-form__actions .nm-fstep__nav { order: 0; }
	body.nm-page .nm-form__submit { inline-size: 100%; margin: 0; }
	.nm-review__list { grid-template-columns: minmax(0, 1fr); }
	.nm-review__row dd { border-block-start: 0; padding-block-start: 0; }
	.nm-review__group { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.nm-fstep.is-in-fwd, .nm-fstep.is-in-back { animation: none; }
	.nm-form *, .nm-progress * { transition: none !important; }
}

/* Delivery states (live mode): sending · failure with direct contact */
.nm-form__error { padding: 16px 18px; border: 1px solid #f4c7c3; border-radius: 12px; background: #fef3f2; color: #7a271a; font-size: 16px; line-height: 1.8; }
.nm-form__error[hidden] { display: none; }
.nm-form__error:focus { outline: 3px solid #b42318; outline-offset: 2px; }
.nm-form__error-lead { display: block; margin-block-end: 4px; }
.nm-form__error a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--nm-teal-900); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
body.nm-page .nm-form.is-sending .nm-form__submit, body.nm-page .nm-form__submit:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
body.nm-page .nm-fstep__back:disabled, body.nm-page .nm-review__edit:disabled { opacity: .5; cursor: not-allowed; }

/* Forced colours (Windows contrast themes): system colours keep every control,
   selected choice and focus position visible; brand fills are dropped by the UA. */
@media (forced-colors: active) {
	.nm-form input, .nm-form select, .nm-form textarea, .nm-choice span { border-color: FieldText; }
	.nm-choice input:checked + span { border: 3px solid Highlight; background: Highlight; color: HighlightText; forced-color-adjust: none; }
	#nm-start-form :is(input, select, textarea)[aria-invalid="true"], .nm-field--choice[aria-invalid="true"] .nm-choice span { border-style: dashed; }
	.nm-form input:focus, .nm-form select:focus, .nm-form textarea:focus, .nm-choice input:focus-visible + span { outline: 3px solid Highlight; outline-offset: 2px; }
	body.nm-page .nm-fstep__next, body.nm-page .nm-fstep__back, body.nm-page .nm-review__edit, #nm-start-form .nm-form__submit { border: 2px solid ButtonText; }
	.nm-form select { appearance: auto; -webkit-appearance: menulist; background-image: none; padding-inline-start: 16px; }
}