/* MARQ Customer Portal form. Scoped to .mqp-root so the theme's styles don't leak in or out. */

/* The Marq brand type, bundled with the plugin (no Google Fonts request, so visitors' IPs stay on this site).
   Merriweather for headings, Poppins for text, Noto Sans Arabic for Arabic (used only for Arabic letters). */
@font-face { font-family: "MQP Merriweather"; src: url(fonts/merriweather-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MQP Poppins"; src: url(fonts/poppins-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MQP Poppins"; src: url(fonts/poppins-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "MQP Poppins"; src: url(fonts/poppins-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "MQP Poppins"; src: url(fonts/poppins-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MQP Arabic"; src: url(fonts/noto-sans-arabic-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "MQP Arabic"; src: url(fonts/noto-sans-arabic-arabic-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "MQP Arabic"; src: url(fonts/noto-sans-arabic-arabic-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "MQP Arabic"; src: url(fonts/noto-sans-arabic-arabic-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
#mqp-root {
	--mqp-brand: #044053;
	--mqp-brand-2: #0a5a73;
	--mqp-brand-soft: #e7f0f3;
	--mqp-text: #13232b;
	--mqp-muted: #5a6a72;
	--mqp-border: #cfd9de;
	--mqp-surface: #f5f8f9;
	--mqp-bg: #ffffff;
	--mqp-ok: #17784a;
	--mqp-ok-soft: #e8f5ee;
	--mqp-warn: #8a5a00;
	--mqp-warn-soft: #fff6e0;
	--mqp-err: #b42318;
	--mqp-err-soft: #fdecea;
	--mqp-focus: 0 0 0 3px rgba(4, 64, 83, .28);
	--mqp-radius: 12px;
	--mqp-mist: #eef3f5;
	--mqp-deep: #05303d;
	--mqp-texture: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 420' preserveAspectRatio='xMidYMax slice'><g fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1.2'><path d='M-20 231 Q-20 231 -10 240 Q0 250 10 260 Q20 269 30 275 Q40 280 50 281 Q60 281 70 277 Q80 273 90 268 Q100 264 110 262 Q120 259 130 260 Q140 261 150 263 Q160 265 170 264 Q180 264 190 259 Q200 255 210 247 Q220 238 230 230 Q240 221 250 216 Q260 211 270 212 Q280 213 290 219 Q300 225 310 233 Q320 241 330 247'/><path d='M-20 253 Q-20 253 -10 260 Q0 267 10 276 Q20 285 30 293 Q40 301 50 305 Q60 308 70 305 Q80 302 90 296 Q100 289 110 282 Q120 275 130 271 Q140 267 150 266 Q160 266 170 267 Q180 268 190 268 Q200 267 210 264 Q220 260 230 253 Q240 247 250 241 Q260 235 270 233 Q280 231 290 235 Q300 239 310 248 Q320 256 330 266'/><path d='M-20 281 Q-20 281 -10 283 Q0 286 10 291 Q20 297 30 305 Q40 312 50 317 Q60 323 70 323 Q80 323 90 317 Q100 311 110 302 Q120 293 130 285 Q140 276 150 272 Q160 267 170 267 Q180 267 190 269 Q200 272 210 273 Q220 274 230 273 Q240 271 250 267 Q260 263 270 260 Q280 257 290 257 Q300 258 310 264 Q320 270 330 280'/><path d='M-20 312 Q-20 312 -10 310 Q0 308 10 309 Q20 310 30 313 Q40 317 50 322 Q60 327 70 329 Q80 331 90 329 Q100 326 110 318 Q120 310 130 300 Q140 290 150 282 Q160 274 170 271 Q180 267 190 269 Q200 272 210 276 Q220 281 230 284 Q240 288 250 289 Q260 290 270 288 Q280 286 290 285 Q300 284 310 286 Q320 288 330 295'/><path d='M-20 339 Q-20 339 -10 336 Q0 333 10 329 Q20 325 30 324 Q40 322 50 323 Q60 325 70 327 Q80 329 90 330 Q100 330 110 325 Q120 321 130 313 Q140 305 150 295 Q160 286 170 280 Q180 274 190 273 Q200 273 210 278 Q220 283 230 290 Q240 298 250 304 Q260 309 270 312 Q280 314 290 313 Q300 313 310 312 Q320 311 330 313'/><path d='M-20 357 Q-20 357 -10 356 Q0 354 10 348 Q20 343 30 336 Q40 330 50 326 Q60 322 70 322 Q80 321 90 323 Q100 324 110 323 Q120 323 130 319 Q140 315 150 308 Q160 301 170 294 Q180 287 190 284 Q200 281 210 284 Q220 286 230 294 Q240 302 250 311 Q260 321 270 327 Q280 334 290 336 Q300 339 310 337 Q320 336 330 334'/><path d='M-20 364 Q-20 364 -10 365 Q0 366 10 361 Q20 357 30 348 Q40 340 50 332 Q60 323 70 318 Q80 314 90 313 Q100 313 110 315 Q120 316 130 317 Q140 318 150 316 Q160 313 170 309 Q180 304 190 300 Q200 296 210 296 Q220 296 230 301 Q240 306 250 316 Q260 325 270 335 Q280 345 290 350 Q300 356 310 357 Q320 358 330 354'/><path d='M-20 359 Q-20 359 -10 363 Q0 366 10 364 Q20 362 30 355 Q40 348 50 338 Q60 328 70 319 Q80 311 90 307 Q100 303 110 304 Q120 305 130 309 Q140 313 150 316 Q160 319 170 319 Q180 319 190 317 Q200 315 210 313 Q220 311 230 313 Q240 315 250 321 Q260 328 270 337 Q280 346 290 355 Q300 363 310 366 Q320 370 330 368'/><path d='M-20 349 Q-20 349 -10 352 Q0 355 10 356 Q20 357 30 353 Q40 349 50 341 Q60 333 70 323 Q80 313 90 306 Q100 299 110 298 Q120 296 130 300 Q140 304 150 310 Q160 317 170 322 Q180 328 190 330 Q200 332 210 331 Q220 330 230 330 Q240 329 250 331 Q260 333 270 338 Q280 344 290 352 Q300 359 310 365 Q320 370 330 371'/></g></svg>");
	--mqp-on-deep: #e9f1f3;
	--mqp-on-deep-2: rgba(233, 241, 243, .72);
	--mqp-brass: #c9a46a;
	--mqp-brass-light: #e2c99d;
	--mqp-brass-ink: #86672f;
	--mqp-mist-hover: #e6edf0;
	--mqp-line: #dbe4e8;
	--mqp-ring: 0 0 0 3px rgba(4, 64, 83, .13);
	--mqp-font: "MQP Poppins", "MQP Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mqp-font-display: "MQP Merriweather", "MQP Arabic", Georgia, serif;
	font-family: var(--mqp-font) !important;
	color: var(--mqp-text);
	font-size: 16px;
	line-height: 1.55;
	max-width: 1120px;
	margin: 0 auto;
	text-align: start;
	-webkit-text-size-adjust: 100%;
}
#mqp-root *, #mqp-root *::before, #mqp-root *::after { box-sizing: border-box; }

/* Theme-proof resets: themes (Salient, WPBakery, Twenty*) style every button and input. */
#mqp-root button, #mqp-crop button { background: none; border: 0; border-radius: 0; box-shadow: none; text-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; min-width: 0; width: auto; height: auto; margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; text-decoration: none; opacity: 1; }
#mqp-root input, #mqp-root select, #mqp-root textarea { box-shadow: none; margin: 0; max-width: 100%; }
#mqp-root a { box-shadow: none; }
#mqp-root dl, #mqp-root dt, #mqp-root dd { margin: 0; padding: 0; float: none; width: auto; }
/* Salient (and other themes) set their own font, capitals, tracking and paragraph spacing on
   p / span / label / strong. Inside the form everything inherits the form's type instead.
   Headings re-apply Merriweather with more specific rules further down. */
#mqp-root *, #mqp-crop * { font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; font-style: normal; }
#mqp-root p, #mqp-crop p { padding-top: 0; padding-bottom: 0; }
#mqp-root .mqp-ref strong { letter-spacing: .08em !important; }
/* An empty <p><code></code></p> appears when the shortcode was formatted as "code" in the page editor. */
p:has(> code:empty:only-child):has(~ #mqp-root), #mqp-root ~ p:has(> code:empty:only-child) { display: none !important; }
/* Lists: themes add their own numbers/bullets (list-style, ::marker, or li::before counters). Ours are drawn by us. */
#mqp-root ol, #mqp-root ul { list-style: none !important; counter-reset: none; }
#mqp-root li { list-style: none !important; counter-increment: none; float: none; background-image: none; }
#mqp-root li::marker { content: none !important; }
#mqp-root .mqp-steps, #mqp-root .mqp-photos { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; text-indent: 0; }
#mqp-root li::before, #mqp-root li::after { content: none !important; display: none !important; }
#mqp-root .mqp-step { display: block !important; position: static; padding: 0 !important; margin: 0 !important; width: auto !important; }
#mqp-root .mqp-tips ul { padding-inline-start: 20px !important; }
#mqp-root .mqp-tips li { list-style: disc outside !important; display: list-item !important; }
#mqp-root .mqp-tips li::marker { content: normal !important; color: var(--mqp-brand); }
#mqp-root button, #mqp-root label, #mqp-root summary, #mqp-root a, #mqp-crop button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(4, 64, 83, .12); }
#mqp-root input, #mqp-root select, #mqp-root textarea { scroll-margin-top: calc(var(--mqp-top, 16px) + 64px); scroll-margin-bottom: 110px; }
#mqp-root[dir="rtl"] { line-height: 1.7; }
/* Arabic page: Latin values keep their own reading order but stay aligned with the Arabic labels. */
#mqp-root[dir="rtl"] [dir="auto"], #mqp-root[dir="rtl"] dd[dir="ltr"] { text-align: right; }
#mqp-root button, #mqp-root input, #mqp-root select, #mqp-root textarea { font: inherit; font-family: var(--mqp-font) !important; color: inherit; letter-spacing: normal; text-transform: none; }
#mqp-root .mqp-boot { display: flex; justify-content: center; padding: 48px 0; }
#mqp-root .mqp-noscript { padding: 16px; border: 1px solid var(--mqp-border); border-radius: var(--mqp-radius); }

/* The card: the client's profile panel (petrol, with faint survey lines of the land) beside the
   form. Laid out by the space the theme gives the form, not by screen width. */
#mqp-root { container-type: inline-size; container-name: mqp; }
#mqp-root .mqp-wrap { background: var(--mqp-bg); border: 1px solid var(--mqp-line); border-radius: 20px; padding: 0; box-shadow: 0 1px 2px rgba(4, 64, 83, .06), 0 28px 56px -32px rgba(4, 64, 83, .45); }
#mqp-root .mqp-panel { position: relative; background-color: var(--mqp-deep);  background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; color: var(--mqp-on-deep); border-start-start-radius: 19px; border-start-end-radius: 19px; padding: 20px 20px 16px; }
#mqp-root .mqp-main { padding: 24px 20px 26px; min-width: 0; }

/* Header (inside the panel) */
#mqp-root .mqp-header { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin: 0 0 18px; }
#mqp-root .mqp-title { margin: 0 0 6px; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--mqp-brand); text-transform: none; }
#mqp-root .mqp-panel .mqp-title { color: #fff !important; }
#mqp-root .mqp-sub { margin: 0; color: var(--mqp-muted); font-size: 14.5px; line-height: 1.55; }
#mqp-root .mqp-panel .mqp-sub { color: var(--mqp-on-deep-2) !important; }
#mqp-root .mqp-lang { flex: none; border: 1px solid rgba(255, 255, 255, .28); background: transparent; border-radius: 999px; padding: 6px 16px; min-height: 44px; font-size: 14px; cursor: pointer; color: #fff !important; font-weight: 600; transition: background-color .15s, border-color .15s; }
#mqp-root .mqp-lang:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
#mqp-root .mqp-panel .mqp-lang:focus-visible, #mqp-root .mqp-panel button:focus-visible { box-shadow: 0 0 0 3px var(--mqp-brass); }

#mqp-root .mqp-restored { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--mqp-brand-soft); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 18px; }

/* Progress, phones and narrow columns: "Step 2 of 6", six bars, and the full list on request. */
#mqp-root .mqp-progress-nav { margin: 0; }
#mqp-root .mqp-stepof { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin: 0 0 10px; font-size: 14px; color: var(--mqp-on-deep-2) !important; }
#mqp-root .mqp-stepof strong { color: #fff !important; font-weight: 600; }
#mqp-root .mqp-segs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
#mqp-root .mqp-seg { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .16); transform-origin: left center; }
#mqp-root[dir="rtl"] .mqp-seg { transform-origin: right center; }
#mqp-root .mqp-seg.is-done { background: var(--mqp-brass); }
#mqp-root .mqp-seg.is-current { background: #fff; }
#mqp-root .mqp-steps-toggle { display: inline-flex !important; align-items: center; gap: 4px; margin: 10px 0 0 !important; padding: 8px 0 !important; min-height: 40px; color: var(--mqp-brass-light) !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; }
#mqp-root .mqp-steps-toggle .mqp-ic { width: 18px; height: 18px; transition: transform .2s; }
#mqp-root .mqp-progress-nav.is-open .mqp-steps-toggle .mqp-ic { transform: rotate(180deg); }
#mqp-root .mqp-track { display: none; position: relative; margin: 8px 0 0; }
#mqp-root .mqp-progress-nav.is-open .mqp-track { display: block; }
#mqp-root .mqp-steps { display: block !important; list-style: none; margin: 0 !important; padding: 0 !important; }

/* The list: one dot per step on a line that grows as the client moves on; under a finished
   step, what they gave in it (their name, "2 children", "3 units"). */
#mqp-root .mqp-rail { position: absolute; top: 14px; bottom: 14px; inset-inline-start: 13px; width: 2px; margin-inline-start: -1px; background: rgba(255, 255, 255, .14); border-radius: 2px; pointer-events: none; }
#mqp-root .mqp-rail-fill { position: absolute; top: 0; inset-inline: 0; height: 0; background: var(--mqp-brass); border-radius: 2px; }
#mqp-root .mqp-step { position: relative; margin: 0 !important; padding: 0 0 6px !important; min-width: 0; }
#mqp-root .mqp-step:last-of-type { padding-bottom: 0 !important; }
#mqp-root .mqp-step-btn-nav { display: flex !important; align-items: flex-start; gap: 14px; width: 100% !important; margin: 0 !important; padding: 0 8px 8px 0 !important; color: var(--mqp-on-deep-2) !important; font-size: 15px !important; line-height: 1.35 !important; text-align: start; border-radius: 10px; }
#mqp-root[dir="rtl"] .mqp-step-btn-nav { padding: 0 0 8px 8px !important; }
#mqp-root button.mqp-step-btn-nav { cursor: pointer; }
#mqp-root button.mqp-step-btn-nav:hover .mqp-step-label { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); }
#mqp-root .mqp-step-dot { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255, 255, 255, .3); background: var(--mqp-deep); color: var(--mqp-on-deep-2); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; transition: background-color .3s, border-color .3s, color .3s; }
#mqp-root .mqp-step-dot .mqp-ic { width: 15px; height: 15px; }
#mqp-root .mqp-step.is-done .mqp-step-dot { background: var(--mqp-brass); border-color: var(--mqp-brass); color: var(--mqp-deep); }
#mqp-root .mqp-step.is-current .mqp-step-dot { background: #fff; border-color: #fff; color: var(--mqp-deep); box-shadow: 0 0 0 5px rgba(201, 164, 106, .28); }
#mqp-root .mqp-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
#mqp-root .mqp-step-label { color: inherit; }
#mqp-root .mqp-step.is-done .mqp-step-label { color: rgba(255, 255, 255, .86) !important; }
#mqp-root .mqp-step.is-current .mqp-step-label { color: #fff !important; font-weight: 600; }
#mqp-root .mqp-step-sum { font-size: 13px; color: var(--mqp-brass-light) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wide: the panel becomes a column that stays in view; the list is always open. */
#mqp-root .mqp-panel { background-image: none; }
@container mqp (min-width: 860px) {
	#mqp-root .mqp-wrap { display: grid; grid-template-columns: 296px minmax(0, 1fr); }
	#mqp-root .mqp-panel { background-image: var(--mqp-texture); border-start-end-radius: 0; border-end-start-radius: 19px; padding: 34px 28px 40px; }
	#mqp-root .mqp-panel-in { position: sticky; top: calc(var(--mqp-top, 0px) + 28px); }
	#mqp-root .mqp-header { flex-direction: column-reverse; gap: 14px; margin-bottom: 30px; }
	#mqp-root .mqp-panel .mqp-title { font-size: 25px; line-height: 1.3; }
	#mqp-root .mqp-lang { min-height: 38px; padding: 4px 14px; font-size: 13.5px; }
	#mqp-root .mqp-stepof, #mqp-root .mqp-segs, #mqp-root .mqp-steps-toggle { display: none !important; }
	#mqp-root .mqp-track { display: block; margin: 0; }
	#mqp-root .mqp-step { padding-bottom: 14px !important; }
	#mqp-root .mqp-main { padding: 40px 48px 40px; }
	#mqp-root .mqp-step-title { font-size: 30px !important; }
}
@container mqp (min-width: 1000px) {
	#mqp-root .mqp-wrap { grid-template-columns: 320px minmax(0, 1fr); }
	#mqp-root .mqp-main { padding: 48px 60px 44px; }
}

/* Form */
#mqp-root .mqp-step-title { margin: 0 0 8px; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--mqp-brand); text-transform: none; letter-spacing: 0; }
#mqp-root .mqp-step-title:focus { outline: none; }
#mqp-root .mqp-lead { margin: 0 0 26px; color: var(--mqp-muted); max-width: 60ch; }
#mqp-root .mqp-step-title + .mqp-field, #mqp-root .mqp-step-title + .mqp-row, #mqp-root .mqp-step-title + .mqp-alert { margin-top: 22px; }
#mqp-root .mqp-field { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
#mqp-root fieldset.mqp-field { margin-inline: 0; }
#mqp-root .mqp-field > * { min-width: 0; max-width: 100%; }

/* Labels: themes often force capitals, tracking, colour or size on <label>/<legend>. These win. */
#mqp-root .mqp-label, #mqp-root legend.mqp-label { display: block !important; margin: 0 0 8px !important; padding: 0 !important; float: none; width: auto; font-size: 15px !important; line-height: 1.4 !important; font-weight: 600 !important; color: var(--mqp-text) !important; text-transform: none !important; letter-spacing: normal !important; font-family: var(--mqp-font) !important; }
#mqp-root .mqp-opt { margin-inline-start: 6px; font-weight: 400; color: var(--mqp-muted); }
#mqp-root .mqp-hint { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mqp-muted); }
#mqp-root .mqp-option, #mqp-root .mqp-card-title, #mqp-root .mqp-check, #mqp-root .mqp-link, #mqp-root .mqp-hint, #mqp-root .mqp-error { text-transform: none !important; letter-spacing: normal !important; }

/* Button shapes: themes round, pad or capitalise every <button>; ours keep their own look. */
#mqp-root .mqp-btn, #mqp-crop .mqp-btn { border-radius: 12px !important; text-transform: none !important; letter-spacing: normal !important; }
#mqp-root .mqp-link { border-radius: 6px !important; background: none !important; }
#mqp-root .mqp-link:hover { text-decoration: underline; }
#mqp-root .mqp-prefilled .mqp-link, #mqp-root .mqp-restored .mqp-link { text-decoration: underline; }
#mqp-root .mqp-lang { border-radius: 999px !important; }
#mqp-root .mqp-photo-x { border-radius: 50% !important; padding: 0 !important; }
#mqp-root .mqp-icon-btn { border-radius: 12px !important; padding: 0 !important; }
#mqp-root .mqp-step-btn-nav { border-radius: 8px !important; background: none; }

/* Text inputs and selects: a soft filled field that turns white with a teal edge while typing. */
#mqp-root .mqp-input { display: block; width: 100%; min-height: 52px; margin: 0; padding: 14px 16px; border: 1.5px solid transparent; border-radius: 10px; background: var(--mqp-mist); color: var(--mqp-text); font-size: 16px; line-height: 1.4; box-shadow: none; transition: background-color .15s, border-color .15s, box-shadow .15s; }
#mqp-root .mqp-input::placeholder { color: #8d9da4; opacity: 1; }
#mqp-root .mqp-input:hover { background-color: var(--mqp-mist-hover); }
#mqp-root .mqp-input:focus { outline: none; background-color: #fff; border-color: var(--mqp-brand); box-shadow: var(--mqp-ring); }
#mqp-root textarea.mqp-input { min-height: 100px; resize: vertical; }
#mqp-root select.mqp-input { appearance: none; -webkit-appearance: none; height: 52px; padding-block: 0; padding-inline-end: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23044053' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
#mqp-root[dir="rtl"] select.mqp-input:not([dir="ltr"]) { background-position: left 14px center; }
#mqp-root select.mqp-input[dir="ltr"] { padding-right: 40px; background-position: right 10px center; }
#mqp-root .mqp-input.is-prefilled { background-color: #fff7e0; border-color: #ecd08a; }
#mqp-root .mqp-input.is-prefilled:focus { background-color: #fff; border-color: var(--mqp-brand); }
#mqp-root .mqp-field.has-error .mqp-input, #mqp-root .mqp-input[aria-invalid="true"] { background-color: #fff6f5; border-color: #e5a29b; }
#mqp-root .mqp-field.has-error .mqp-input:focus, #mqp-root .mqp-input[aria-invalid="true"]:focus { border-color: var(--mqp-err); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
#mqp-root .mqp-error { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; color: var(--mqp-err); font-size: 14px; font-weight: 500; }
#mqp-root .mqp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
#mqp-root .mqp-ic { display: inline-flex; width: 18px; height: 18px; flex: none; }
#mqp-root .mqp-ic svg { width: 100%; height: 100%; display: block; }
#mqp-root .mqp-error .mqp-ic { margin-top: 2px; }

#mqp-root .mqp-prefilled { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 0; padding: 0; background: none; color: #855c00; font-size: 13.5px; }
#mqp-root .mqp-prefilled .mqp-ic { width: 15px; height: 15px; }

/* Choices: one segmented track; the chosen answer lifts out in white with a small tick. */
#mqp-root .mqp-options { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--mqp-mist); border-radius: 12px; }
#mqp-root .mqp-choices.is-inline .mqp-options { max-width: 340px; }
#mqp-root .mqp-option { position: relative; flex: 1 1 0; display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 0 !important; padding: 10px 14px !important; border: 0; border-radius: 9px; background: transparent; color: var(--mqp-muted) !important; font-size: 15.5px !important; font-weight: 500 !important; line-height: 1.25; text-align: center; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color .15s, color .15s, box-shadow .15s; }
#mqp-root .mqp-option::before, #mqp-root .mqp-option::after { content: none !important; display: none !important; }
#mqp-root .mqp-option:hover { color: var(--mqp-text) !important; background: rgba(255, 255, 255, .55); }
#mqp-root .mqp-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
#mqp-root .mqp-option-mark { display: none; color: var(--mqp-brand); }
#mqp-root .mqp-option-mark .mqp-ic { width: 16px; height: 16px; }
#mqp-root .mqp-option.is-checked { background: #fff; color: var(--mqp-brand) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 10px rgba(16, 24, 40, .06); }
#mqp-root .mqp-option.is-checked .mqp-option-mark { display: inline-flex; }
#mqp-root .mqp-option:focus-within { box-shadow: inset 0 0 0 2px var(--mqp-brand); }
#mqp-root .mqp-option.is-checked:focus-within { box-shadow: inset 0 0 0 2px var(--mqp-brand), 0 2px 10px rgba(16, 24, 40, .06); }
#mqp-root .mqp-field.has-error .mqp-options { box-shadow: inset 0 0 0 1.5px #e5a29b; background: #fff6f5; }

/* Checkbox */
#mqp-root .mqp-check { display: flex !important; gap: 12px; align-items: flex-start; cursor: pointer; margin: -8px 0 22px; padding: 4px 0; font-size: 15px !important; font-weight: 500 !important; line-height: 1.45; color: var(--mqp-text) !important; }
#mqp-root .mqp-check input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0 !important; border: 1.5px solid #a9bac2; border-radius: 6px; cursor: pointer; transition: background-color .15s, border-color .15s; }
#mqp-root .mqp-check input::before, #mqp-root .mqp-check input::after { content: none !important; display: none !important; }
#mqp-root .mqp-check input:not(:checked) { background-image: none !important; background-color: #fff !important; }
#mqp-root .mqp-check input:checked { background-color: var(--mqp-brand) !important; border-color: var(--mqp-brand) !important; background-size: 14px !important; background-position: center !important; background-repeat: no-repeat !important; 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='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") !important; }
#mqp-root .mqp-check input:focus-visible { outline: none; box-shadow: var(--mqp-ring); }
#mqp-root .mqp-field.has-error .mqp-check input { border-color: var(--mqp-err); }

/* Stepper: same track as the choices, with white − / + keys. */
#mqp-root .mqp-stepper { display: inline-flex; align-items: center; gap: 4px; height: 52px; padding: 4px; border: 1.5px solid transparent; border-radius: 12px; background: var(--mqp-mist); }
#mqp-root .mqp-stepper:focus-within { border-color: var(--mqp-brand); box-shadow: var(--mqp-ring); }
#mqp-root .mqp-stepper .mqp-input { border: 0 !important; width: 64px; min-height: 0; height: 100%; padding: 0 4px; background: transparent !important; box-shadow: none !important; text-align: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
#mqp-root .mqp-stepper .mqp-step-btn { flex: none; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 9px !important; background: #fff !important; color: var(--mqp-brand) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; }
#mqp-root .mqp-stepper .mqp-step-btn:hover:not([disabled]) { background: var(--mqp-brand) !important; color: #fff !important; }
#mqp-root .mqp-stepper .mqp-step-btn:focus-visible { box-shadow: 0 0 0 2px var(--mqp-brand) !important; }
#mqp-root .mqp-stepper .mqp-step-btn[disabled] { background: transparent !important; color: #a9b7bd !important; box-shadow: none !important; cursor: not-allowed; }
#mqp-root .mqp-stepper .mqp-step-btn .mqp-ic { width: 20px; height: 20px; }
#mqp-root .mqp-field.has-error .mqp-stepper { border-color: #e5a29b; background: #fff6f5; }

/* Phone */
#mqp-root .mqp-phone { display: flex; gap: 8px; }
#mqp-root .mqp-phone .mqp-cc { width: 132px; flex: none; padding-left: 14px; padding-right: 34px; background-position: right 10px center; background-size: 18px; }

/* Buttons */
#mqp-root .mqp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: 16px; cursor: pointer; border: 1.5px solid transparent; text-decoration: none; line-height: 1.2; text-transform: none; letter-spacing: 0; box-shadow: none; transition: background .15s, border-color .15s; }
#mqp-root .mqp-btn-primary { background: var(--mqp-brand) !important; color: #fff !important; border-color: var(--mqp-brand) !important; }
#mqp-root .mqp-btn-primary:hover { background: var(--mqp-brand-2) !important; }
#mqp-root .mqp-btn-primary[disabled] { opacity: .75; cursor: progress; }
#mqp-root .mqp-btn-ghost { background: #fff !important; color: var(--mqp-brand) !important; border-color: var(--mqp-border) !important; }
#mqp-root .mqp-btn-ghost:hover { border-color: var(--mqp-brand) !important; background: var(--mqp-brand-soft) !important; }
#mqp-root .mqp-btn:focus-visible, #mqp-root .mqp-link:focus-visible, #mqp-root .mqp-lang:focus-visible, #mqp-root button:focus-visible { outline: none; box-shadow: var(--mqp-focus); }
#mqp-root .mqp-link { background: none; border: 0; padding: 10px 6px; margin: -10px -6px; min-height: 44px; color: var(--mqp-brand); text-decoration: none; text-underline-offset: 3px; cursor: pointer; font-weight: 600; font-size: inherit; display: inline-flex; gap: 4px; align-items: center; }
#mqp-root .mqp-icon-btn { flex: none; width: 44px; height: 48px; border: 1.5px solid var(--mqp-border); border-radius: 10px; background: #fff; cursor: pointer; color: var(--mqp-muted); display: flex; align-items: center; justify-content: center; }

#mqp-root .mqp-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--mqp-border); }
#mqp-root .mqp-nav .mqp-next { min-width: 160px; }
#mqp-root .mqp-nav-ph { display: none; }
#mqp-root .mqp-nav-ph[style*="height"] { display: block; margin-top: 20px; }
#mqp-root .mqp-nav.is-floating { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--mqp-border); box-shadow: 0 -8px 24px rgba(16, 24, 40, .1); animation: mqp-up .18s ease-out; }
@keyframes mqp-up { from { transform: translateY(100%); } to { transform: none; } }

#mqp-root .mqp-alert { display: flex; gap: 8px; align-items: flex-start; background: var(--mqp-err-soft); color: var(--mqp-err); border-radius: 10px; padding: 12px 14px; margin: 0 0 20px; font-weight: 500; }
#mqp-root .mqp-alert:focus { outline: 2px solid var(--mqp-err); outline-offset: 2px; }

/* Document type */
#mqp-root .mqp-doctype-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#mqp-root .mqp-doctype-card { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; border: 1.5px solid var(--mqp-border); border-radius: var(--mqp-radius); cursor: pointer; background: #fff; margin: 0; }
#mqp-root .mqp-doctype-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#mqp-root .mqp-doctype-card.is-checked { border-color: var(--mqp-brand); background: var(--mqp-brand-soft); box-shadow: inset 0 0 0 1px var(--mqp-brand); }
#mqp-root .mqp-doctype-card:focus-within { box-shadow: var(--mqp-focus); }
#mqp-root .mqp-doctype-ic { width: 44px; height: 36px; color: var(--mqp-brand); }
#mqp-root .mqp-doctype-text { display: flex; flex-direction: column; }
#mqp-root .mqp-doctype-card { font-size: 16px !important; line-height: 1.35 !important; color: var(--mqp-text) !important; }
#mqp-root .mqp-doctype-text strong { font-size: 16px; font-weight: 600; color: var(--mqp-text); }
#mqp-root .mqp-doctype-text span { font-size: 14px; color: var(--mqp-muted); margin-top: 2px; }

/* Document boxes */
#mqp-root .mqp-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
#mqp-root .mqp-docs:has(> :only-child) { grid-template-columns: 1fr; max-width: 420px; }
#mqp-root .mqp-doc { border: 1px solid var(--mqp-line); border-radius: 14px; padding: 16px; background: #fff; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#mqp-root .mqp-doc.is-drop .mqp-doc-frame.is-empty { border-color: var(--mqp-brand); background: var(--mqp-brand-soft); transform: scale(1.015); }
#mqp-root .mqp-doc.has-error { border-color: var(--mqp-err); border-style: solid; }
#mqp-root .mqp-doc-head { display: flex; gap: 12px; align-items: center; }
#mqp-root .mqp-doc-ic { width: 40px; height: 32px; color: var(--mqp-brand); }
#mqp-root .mqp-doc-title { margin: 0; font-weight: 700; }
#mqp-root .mqp-doc-hint { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--mqp-muted); }
#mqp-root .mqp-doc-body { display: flex; flex-direction: column; gap: 10px; }
#mqp-root .mqp-doc-thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background: #e3eaed; }
#mqp-root .mqp-doc-thumb.is-placeholder { display: flex; align-items: center; justify-content: center; color: var(--mqp-brand); }
#mqp-root .mqp-doc-thumb.is-placeholder .mqp-ic { width: 56px; height: 40px; }
#mqp-root .mqp-doc-status { display: flex; flex-direction: column; gap: 8px; }
#mqp-root .mqp-state { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-weight: 600; font-size: 15px; }
#mqp-root .mqp-state .mqp-ic { margin-top: 2px; }
#mqp-root .mqp-state.is-ok { color: var(--mqp-ok); }
#mqp-root .mqp-state.is-warn { color: var(--mqp-warn); font-weight: 500; }
#mqp-root .mqp-state.is-error { color: var(--mqp-err); font-weight: 500; }
#mqp-root .mqp-state.is-busy { color: var(--mqp-brand); font-weight: 500; }
#mqp-root .mqp-note { margin: 0; padding: 8px 10px; background: var(--mqp-brand-soft); color: var(--mqp-brand); border-radius: 8px; font-size: 14px; }
#mqp-root .mqp-progress { height: 6px; background: #dfe7ea; border-radius: 999px; overflow: hidden; }
#mqp-root .mqp-progress span { display: block; height: 100%; background: var(--mqp-brand); transition: width .2s; }
#mqp-root .mqp-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#mqp-root .mqp-pick .mqp-btn { flex: 1 1 auto; }
#mqp-root .mqp-drop-hint { font-size: 13px; color: var(--mqp-muted); flex-basis: 100%; text-align: center; }
#mqp-root .mqp-doc-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
#mqp-root .mqp-doc-actions .mqp-pick { flex: 1 1 auto; }
#mqp-root .mqp-doc-actions .mqp-btn { min-height: 40px; padding: 6px 14px; font-size: 15px; }
#mqp-root .mqp-remove { color: var(--mqp-muted) !important; font-weight: 500 !important; }
#mqp-root .mqp-file { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }

#mqp-root .mqp-tips { margin: 0 0 16px; border: 1px solid var(--mqp-border); border-radius: 10px; padding: 10px 14px; }
#mqp-root .mqp-tips { padding: 0 14px; }
#mqp-root .mqp-tips summary { cursor: pointer; font-weight: 600; color: var(--mqp-brand); padding: 12px 0; min-height: 44px; }
#mqp-root .mqp-tips[open] { padding-bottom: 12px; }
#mqp-root .mqp-tips ul { margin: 0; padding-inline-start: 20px; }
#mqp-root .mqp-tips li { margin: 2px 0; }
#mqp-root .mqp-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: 14px; color: var(--mqp-muted); }
#mqp-root .mqp-privacy .mqp-ic { color: var(--mqp-ok); margin-top: 2px; }

/* Repeaters */
#mqp-root .mqp-rows { display: flex; flex-direction: column; gap: 0; margin: 4px 0 18px; border-bottom: 1px solid var(--mqp-line); }
#mqp-root .mqp-card { padding: 18px 0 0; border: 0; border-top: 1px solid var(--mqp-line); border-radius: 0; background: none; }
#mqp-root .mqp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; }
#mqp-root .mqp-card-head .mqp-card-title { margin: 0 !important; }
#mqp-root h3.mqp-card-title { margin: 0 0 14px !important; padding: 0 !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 600 !important; color: var(--mqp-brand) !important; }
#mqp-root .mqp-card .mqp-field { margin-bottom: 18px; }
#mqp-root .mqp-list-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
#mqp-root .mqp-list-row { display: flex; gap: 8px; flex-wrap: wrap; }
#mqp-root .mqp-list-row .mqp-input { flex: 1 1 200px; width: auto; min-width: 0; }
#mqp-root .mqp-input { min-width: 0; }
#mqp-root .mqp-list-row .mqp-error { flex-basis: 100%; }

/* Photos */
#mqp-root .mqp-photos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
#mqp-root .mqp-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--mqp-surface); border: 1px solid var(--mqp-border); margin: 0; }
#mqp-root .mqp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mqp-root .mqp-photo.has-error { border-color: var(--mqp-err); }
#mqp-root .mqp-photo-ph, #mqp-root .mqp-photo-busy, #mqp-root .mqp-photo-err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#mqp-root .mqp-photo-busy { background: rgba(255, 255, 255, .6); }
#mqp-root .mqp-photo-err { background: rgba(253, 236, 234, .85); color: var(--mqp-err); }
#mqp-root .mqp-photo-ph { color: var(--mqp-ok); }
#mqp-root .mqp-photo-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(19, 35, 43, .75); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
#mqp-root .mqp-photo-x .mqp-ic { width: 14px; height: 14px; }

/* Review */
#mqp-root .mqp-review-sec { border: 1px solid var(--mqp-border); border-radius: var(--mqp-radius); padding: 14px 16px; margin-bottom: 14px; }
#mqp-root .mqp-review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#mqp-root .mqp-review-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--mqp-brand); text-transform: none; letter-spacing: 0; }
#mqp-root .mqp-review-sec dl { margin: 0; }
#mqp-root .mqp-review-row { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid #eef2f4; }
#mqp-root .mqp-review-row:first-child { border-top: 0; }
#mqp-root .mqp-review-row dt { color: var(--mqp-muted); font-size: 14px; margin: 0; font-weight: 400; }
#mqp-root .mqp-review-row dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#mqp-root .mqp-review-docs { display: flex; gap: 10px; padding-top: 8px; }
#mqp-root .mqp-review-doc { width: 120px; border-radius: 8px; border: 1px solid var(--mqp-border); }
#mqp-root .mqp-consent { background: var(--mqp-surface); border-radius: var(--mqp-radius); padding: 16px; }
#mqp-root .mqp-consent .mqp-check { margin: 0 0 6px; }

/* Done */
#mqp-root .mqp-done { text-align: center; padding: 24px 0 8px; }
#mqp-root .mqp-done:focus { outline: none; }
#mqp-root .mqp-done-ic { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: var(--mqp-ok-soft); color: var(--mqp-ok); display: flex; align-items: center; justify-content: center; }
#mqp-root .mqp-done-ic .mqp-ic { width: 40px; height: 40px; }
#mqp-root .mqp-done .mqp-lead { max-width: 520px; margin-inline: auto; }
#mqp-root .mqp-ref { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 20px; border-radius: 10px; background: var(--mqp-brand-soft); margin-bottom: 8px; }
#mqp-root .mqp-ref span { font-size: 13px; color: var(--mqp-muted); }
#mqp-root .mqp-ref strong { font-size: 22px; letter-spacing: .08em; color: var(--mqp-brand); }

/* Honeypot */
#mqp-root .mqp-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Spinner */
#mqp-root .mqp-spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mqp-spin .8s linear infinite; flex: none; vertical-align: middle; }
#mqp-root .mqp-boot .mqp-spinner { width: 28px; height: 28px; color: var(--mqp-brand); }
@keyframes mqp-spin { to { transform: rotate(360deg); } }

/* Crop dialog */
#mqp-crop { position: fixed; inset: 0; z-index: 2147483000; background: rgba(10, 20, 25, .8); display: flex; align-items: center; justify-content: center; padding: 12px; }
#mqp-crop .mqp-crop-panel { background: #fff; border-radius: 16px; width: 100%; max-width: 640px; max-height: 100%; overflow: auto; padding: 18px; color: #13232b; font-size: 15px; line-height: 1.45; text-align: start; }
#mqp-crop .mqp-crop-title { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: #044053; text-transform: none; letter-spacing: 0; }
#mqp-crop .mqp-crop-hint { margin: 0 0 12px; color: #5a6a72; font-size: 14px; }
#mqp-crop .mqp-crop-stage { position: relative; width: 100%; height: 300px; background: #0d1418; overflow: hidden; border-radius: 10px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#mqp-crop .mqp-crop-stage.is-dragging { cursor: grabbing; }
#mqp-crop .mqp-crop-img { position: absolute; left: 50%; top: 50%; max-width: none !important; max-height: none !important; transform-origin: 0 0; pointer-events: none; }
#mqp-crop .mqp-crop-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2.5px solid #fff; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); pointer-events: none; }
#mqp-crop .mqp-crop-frame.is-passport { border-radius: 6px; }
#mqp-crop .mqp-crop-tools { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; flex-wrap: wrap; }
#mqp-crop .mqp-crop-zl { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; font-size: 14px; }
#mqp-crop .mqp-crop-zl input { flex: 1; min-width: 120px; accent-color: #044053; }
#mqp-crop .mqp-crop-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
#mqp-crop .mqp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; border: 1.5px solid transparent; }
#mqp-crop .mqp-btn-primary { background: #044053; color: #fff; }
#mqp-crop .mqp-btn-ghost { background: #fff; color: #044053; border-color: #cfd9de; }

/* Phones */
@media (max-width: 640px) {
	#mqp-root .mqp-wrap { border-radius: 16px; }
	#mqp-root .mqp-panel { border-start-start-radius: 15px; border-start-end-radius: 15px; padding: 16px 16px 10px; }
	#mqp-root .mqp-main { padding: 22px 16px 22px; }
	#mqp-root .mqp-title { font-size: 22px; }
	#mqp-root .mqp-row, #mqp-root .mqp-doctype-options, #mqp-root .mqp-docs { grid-template-columns: 1fr; }
	#mqp-root .mqp-header { flex-direction: column-reverse; gap: 10px; margin-bottom: 16px; }
	#mqp-root .mqp-lang { align-self: flex-end; }
	#mqp-root .mqp-nav { margin-top: 20px; padding-top: 16px; }
	#mqp-root .mqp-nav .mqp-next { flex: 1; min-width: 0; }
	#mqp-root .mqp-nav .mqp-btn-ghost { flex: 0 0 auto; padding-inline: 16px; }
	#mqp-root .mqp-header.is-compact { flex-direction: row; align-items: center; margin-bottom: 14px; }
	#mqp-root .mqp-header.is-compact .mqp-title { font-size: 18px; margin: 0; }
	#mqp-root .mqp-header.is-compact .mqp-sub { display: none; }
	#mqp-root .mqp-header.is-compact .mqp-lang { align-self: center; }
	#mqp-root .mqp-restored { padding: 4px 12px; margin-bottom: 12px; }
	#mqp-root .mqp-photo-x { width: 36px; height: 36px; top: 4px; inset-inline-end: 4px; }
	#mqp-root .mqp-review-row { padding: 9px 0; }
	#mqp-root .mqp-review-docs { flex-wrap: wrap; }
	#mqp-root .mqp-review-doc { width: calc(50% - 5px); }
	#mqp-root .mqp-doc-actions .mqp-btn { min-height: 44px; }
	#mqp-root .mqp-choices.is-inline .mqp-options { max-width: none; }
	#mqp-root .mqp-step-title { font-size: 23px; }
	#mqp-root .mqp-review-row { grid-template-columns: 1fr; gap: 0; }
	#mqp-root .mqp-phone .mqp-cc { width: 124px; padding-left: 12px; }
	#mqp-crop .mqp-crop-actions .mqp-btn { flex: 1; }
	#mqp-crop { padding: 0; align-items: stretch; }
	#mqp-crop .mqp-crop-panel { border-radius: 0; max-width: none; height: 100%; display: flex; flex-direction: column; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
	#mqp-crop .mqp-crop-stage { flex: 1 1 auto; height: auto; min-height: 260px; }
}
@media (max-width: 560px) {
	#mqp-root .mqp-options.is-grid .mqp-option { flex: 1 1 calc(50% - 2px); }
}
@media (max-width: 640px) and (max-height: 560px) {
	#mqp-crop .mqp-crop-stage { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
	#mqp-root *, #mqp-crop * { transition: none !important; animation-duration: 1.5s !important; }
}

/* Headings in Merriweather (Arabic headings use the Arabic face). */
#mqp-root .mqp-title, #mqp-root .mqp-step-title, #mqp-root h3.mqp-card-title, #mqp-root .mqp-review-head h3, #mqp-root .mqp-done h2, #mqp-crop .mqp-crop-title { font-family: var(--mqp-font-display) !important; font-weight: 700 !important; letter-spacing: -.005em !important; }
#mqp-crop { font-family: "MQP Poppins", "MQP Arabic", system-ui, sans-serif; }
#mqp-crop button { font-family: inherit !important; }
#mqp-root[dir="rtl"] .mqp-title, #mqp-root[dir="rtl"] .mqp-step-title, #mqp-root[dir="rtl"] h3.mqp-card-title, #mqp-root[dir="rtl"] .mqp-review-head h3 { letter-spacing: 0 !important; line-height: 1.5; }

/* Email typo suggestion */
#mqp-root .mqp-suggest { display: block; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--mqp-brand-soft); color: var(--mqp-text); font-size: 14px; }
#mqp-root .mqp-suggest bdi { font-weight: 600; }
#mqp-root .mqp-suggest .mqp-link { display: inline; min-height: 0; padding: 4px 2px; margin: 0 0 0 4px; text-decoration: underline; }
#mqp-root[dir="rtl"] .mqp-suggest .mqp-link { margin: 0 4px 0 0; }

/* Reference number: copy button */
#mqp-root .mqp-ref { align-items: center; }
#mqp-root .mqp-ref .mqp-copy { margin: 4px 0 -6px; font-size: 14px; }
#mqp-root .mqp-ref .mqp-copy .mqp-ic { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ */
/* Feedback and motion. Everything here answers something the client  */
/* did; nothing moves by itself. Reduced motion turns it all off.     */
/* ------------------------------------------------------------------ */

/* A new step slides in from the side the client moved towards (mirrored in Arabic). */
#mqp-root { --mqp-dir: 1; }
#mqp-root[dir="rtl"] { --mqp-dir: -1; }
#mqp-root .mqp-step-body.is-enter-fwd, #mqp-root .mqp-done.is-enter-fwd { animation: mqp-in-fwd .38s cubic-bezier(.2, .7, .2, 1) both; }
#mqp-root .mqp-step-body.is-enter-back { animation: mqp-in-back .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mqp-in-fwd { from { opacity: 0; transform: translateX(calc(28px * var(--mqp-dir))); } to { opacity: 1; transform: none; } }
@keyframes mqp-in-back { from { opacity: 0; transform: translateX(calc(-28px * var(--mqp-dir))); } to { opacity: 1; transform: none; } }

/* Fields, rows and photos that appear because of an answer unfold in place. */
#mqp-root .is-new { animation: mqp-unfold .32s cubic-bezier(.2, .7, .2, 1) both; }
#mqp-root .mqp-photo.is-new { animation: mqp-pop .3s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes mqp-unfold { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes mqp-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* Text fields: a tick draws itself when the client leaves a field that is fine. */
#mqp-root .mqp-control { position: relative; }
/* Physical sides on purpose: a field's own direction can differ from the page's (an English email
   on the Arabic page), and the tick must never sit on top of the text. */
#mqp-root .mqp-control .mqp-input { padding-left: 16px; padding-right: 46px; }
#mqp-root[dir="rtl"] .mqp-control .mqp-input { padding-left: 46px; padding-right: 16px; }
#mqp-root .mqp-tick { position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; opacity: 0; pointer-events: none; transition: opacity .15s; }
#mqp-root .mqp-control.is-multi .mqp-tick { top: 15px; margin-top: 0; }
#mqp-root[dir="rtl"] .mqp-tick { right: auto; left: 14px; }
#mqp-root .mqp-tick svg { display: block; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#mqp-root .mqp-tick circle { fill: var(--mqp-ok-soft); stroke: none; }
#mqp-root .mqp-tick path { stroke: var(--mqp-ok); stroke-width: 2.4; stroke-dasharray: 16; stroke-dashoffset: 0; }
#mqp-root .mqp-control.is-ok .mqp-tick { opacity: 1; }
#mqp-root .mqp-control.is-just-ok .mqp-tick circle { animation: mqp-pop .28s cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: center; transform-box: fill-box; }
#mqp-root .mqp-control.is-just-ok .mqp-tick path { animation: mqp-draw .34s .1s ease-out both; }
#mqp-root .mqp-control:focus-within .mqp-tick { opacity: 0; }
@keyframes mqp-draw { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }

/* Choices: the white highlight glides from the old answer to the new one. */
#mqp-root .mqp-options { position: relative; }
#mqp-root .mqp-option { z-index: 1; }
#mqp-root .mqp-glide { position: absolute; z-index: 0; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 10px rgba(16, 24, 40, .06); transform-origin: 0 0; pointer-events: none; }
#mqp-root .mqp-option.is-gliding { background: transparent !important; box-shadow: none !important; }
#mqp-root .mqp-option.is-checked .mqp-option-mark { animation: mqp-pop .3s .12s cubic-bezier(.3, 1.4, .5, 1) both; }
#mqp-root .mqp-doctype-card { transition: border-color .2s, background-color .2s, box-shadow .2s, transform .12s; }
#mqp-root .mqp-doctype-card:active { transform: scale(.985); }
#mqp-root .mqp-doctype-card.is-checked .mqp-doctype-ic { animation: mqp-pop .3s cubic-bezier(.3, 1.4, .5, 1) both; }

/* Stepper: the number rolls the way it changed. */
#mqp-root .mqp-stepper { overflow: hidden; }
#mqp-root .mqp-num.is-roll-up { animation: mqp-roll-up .24s cubic-bezier(.2, .7, .2, 1) both; }
#mqp-root .mqp-num.is-roll-down { animation: mqp-roll-down .24s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mqp-roll-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mqp-roll-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* Buttons give under the finger. */
#mqp-root .mqp-btn { transition: background-color .15s, border-color .15s, transform .1s, box-shadow .15s; }
#mqp-root .mqp-btn:active:not([disabled]) { transform: scale(.97); }
#mqp-root .mqp-btn-primary:hover:not([disabled]) { box-shadow: 0 6px 16px -8px rgba(4, 64, 83, .7); }

/* ID documents: a card-shaped slot to drop or tap; then the photo, a scan line while it is
   read, and a seal pressed onto it once verified. */
#mqp-root .mqp-doc-frame { position: relative; display: block; width: 100%; aspect-ratio: 1.586; border-radius: 12px; overflow: hidden; background: #e3eaed; }
#mqp-root .mqp-doc[data-role="passport"] .mqp-doc-frame { aspect-ratio: 1.42; }
#mqp-root .mqp-doc-frame.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: var(--mqp-mist); border: 1.5px dashed #b4c5cc; cursor: pointer; color: var(--mqp-brand); transition: background-color .15s, border-color .15s, transform .15s; }
#mqp-root .mqp-doc-frame.is-empty:hover { background: var(--mqp-mist-hover); border-color: var(--mqp-brand); }
#mqp-root .mqp-doc-art { width: 34%; max-width: 120px; height: auto; opacity: .85; }
#mqp-root .mqp-doc[data-role="passport"] .mqp-doc-art { width: 22%; }
#mqp-root .mqp-doc-art svg { width: 100%; height: auto; }
#mqp-root .mqp-doc-drop { font-size: 13.5px; line-height: 1.4; color: var(--mqp-muted); text-align: center; max-width: 26ch; }
#mqp-root .mqp-doc-frame.is-read { box-shadow: inset 0 0 0 2px var(--mqp-ok); }
#mqp-root .mqp-doc-frame.is-error { box-shadow: inset 0 0 0 2px var(--mqp-err); }
#mqp-root .mqp-doc-veil { position: absolute; inset: 0; background: rgba(5, 48, 61, .45); }
#mqp-root .mqp-doc-veil::after { content: "" !important; display: block !important; position: absolute; inset-inline-start: 0; bottom: 0; height: 4px; width: calc(var(--p, 0) * 100%); background: var(--mqp-brass); transition: width .2s; }
#mqp-root .mqp-doc-scan { position: absolute; inset: 0; background: rgba(5, 48, 61, .18); overflow: hidden; }
#mqp-root .mqp-doc-scan::before { content: "" !important; display: block !important; position: absolute; left: 0; right: 0; height: 38%; top: -38%; background: linear-gradient(to bottom, rgba(226, 201, 157, 0), rgba(226, 201, 157, .45) 85%, #f3e3c3); border-bottom: 2px solid #f3e3c3; animation: mqp-scan 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes mqp-scan { to { top: 100%; } }
#mqp-root .mqp-seal { position: absolute; inset-inline-end: 10px; bottom: 10px; width: 46px; height: 46px; filter: drop-shadow(0 3px 6px rgba(4, 64, 83, .35)); }
#mqp-root .mqp-seal svg { display: block; width: 100%; height: 100%; }
#mqp-root .mqp-seal circle { fill: var(--mqp-deep); stroke: var(--mqp-brass); stroke-width: 2.5; }
#mqp-root .mqp-seal path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; }
#mqp-root .mqp-seal.is-stamp { animation: mqp-stamp .42s cubic-bezier(.3, 1.5, .5, 1) both; }
#mqp-root .mqp-seal.is-stamp path { animation: mqp-draw24 .36s .25s ease-out both; }
@keyframes mqp-stamp { from { opacity: 0; transform: scale(1.8) rotate(-14deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes mqp-draw24 { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* Thank-you: the seal draws itself once. */
#mqp-root .mqp-done { text-align: center; padding: 28px 0 8px; }
#mqp-root .mqp-done-seal { width: 96px; height: 96px; margin: 0 auto 20px; }
#mqp-root .mqp-done-seal svg { display: block; width: 100%; height: 100%; fill: none; }
#mqp-root .mqp-done-seal .mqp-ring { stroke: var(--mqp-brass); stroke-width: 2; stroke-dasharray: 277; animation: mqp-ring 0.9s cubic-bezier(.5, 0, .3, 1) both; }
#mqp-root .mqp-done-seal .mqp-disc { fill: var(--mqp-deep); transform-origin: center; transform-box: fill-box; animation: mqp-pop .45s .35s cubic-bezier(.3, 1.4, .5, 1) both; }
#mqp-root .mqp-done-seal .mqp-mark { stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; animation: mqp-draw50 .4s .7s ease-out both; }
@keyframes mqp-ring { from { stroke-dashoffset: 277; } to { stroke-dashoffset: 0; } }
@keyframes mqp-draw50 { from { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } }
#mqp-root .mqp-done .mqp-title { font-size: 30px; }
#mqp-root .mqp-ref { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 28px 10px; border-radius: 14px; background: var(--mqp-mist); border: 1px solid var(--mqp-line); margin: 6px 0 10px; }
#mqp-root .mqp-ref strong { font-size: 26px; font-variant-numeric: tabular-nums; }
#mqp-root .mqp-copy.is-copied { color: var(--mqp-ok) !important; }

/* The error banner shakes once when Continue finds something missing. */
#mqp-root .mqp-alert { border: 1px solid #f3c1bb; }

@media (prefers-reduced-motion: reduce) {
	#mqp-root .is-new, #mqp-root .is-enter-fwd, #mqp-root .is-enter-back, #mqp-root .mqp-num, #mqp-root .mqp-seal, #mqp-root .mqp-seal path, #mqp-root .mqp-done-seal *, #mqp-root .mqp-tick *, #mqp-root .mqp-option-mark, #mqp-root .mqp-doctype-ic { animation: none !important; }
	#mqp-root .mqp-doc-scan::before { animation: none !important; top: 0; height: 100%; background: rgba(226, 201, 157, .25); }
	#mqp-root .mqp-btn:active, #mqp-root .mqp-doctype-card:active { transform: none; }
}

/* Themes draw their own focus outline on click; ours shows for the keyboard only. */
#mqp-root button:focus:not(:focus-visible), #mqp-root summary:focus:not(:focus-visible), #mqp-root a:focus:not(:focus-visible) { outline: none !important; }