/*
 * UI v2 — first-run wizard (spec V2_VARAZSLO_IMPORT_SPEC_2026-10-09; design-v3
 * 01-Varazslo-szakma, 02-Varazslo-dijak; V3 Behozás). Served and injected only
 * with QQ_UI_V2; every selector is scoped under html.ui-v2
 * (tools/ui-v2-flag-contract_test). The components (mg-wizard__*, mg-select,
 * mg-seg, mg-check, mg-card--button) come from mg.css; this file holds the
 * full-screen layer and what mg.css has no component for (fee rows, import cards).
 *
 * Money is never animated: no rule here transitions or animates an amount.
 */

/* ---- the layer: a full screen over the app while the wizard is open ---- */
html.ui-v2 body.v2-ob-open { overflow: hidden; }
/* Above every mg layer (sheet 46) and the established save dialog (50), below the
   OCR check and the ask dialog (58, 60). The DS has no level for a full-screen
   wizard over the app, so it is derived from the sheet token. */
html.ui-v2 .v2-ob { position: fixed; inset: 0; z-index: var(--mg-z-wizard); overflow-y: auto; overscroll-behavior: contain; background: var(--mg-bg-page); }
html.ui-v2 .v2-ob[hidden] { display: none; }
html.ui-v2 .v2-ob-scr { min-height: 100%; max-width: var(--mg-content-max); margin: 0 auto; display: flex; flex-direction: column; color: var(--mg-text-primary); }
html.ui-v2 .v2-ob h1[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
html.ui-v2 .v2-ob-wm { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--mg-text-primary); }
html.ui-v2 .v2-ob-wm span { color: var(--mg-done); }
/* The established global label rule (block, muted, 12px top margin) stays out. */
html.ui-v2 .v2-ob label { margin: 0; font-weight: inherit; }
html.ui-v2 .v2-ob label.mg-select { display: flex; color: var(--mg-text-primary); font-size: inherit; }
html.ui-v2 .v2-ob label.mg-check { display: flex; color: var(--mg-text-primary); font-size: 15px; }
html.ui-v2 .v2-ob-center { align-self: center; text-align: center; }
html.ui-v2 .v2-ob-fs { border: none; margin-left: 0; margin-right: 0; min-width: 0; }
html.ui-v2 .v2-ob-fs + .v2-ob-fs { margin-top: var(--mg-space-24); }
html.ui-v2 .v2-ob-legend--tight { margin-bottom: var(--mg-space-4); }
html.ui-v2 .v2-ob-hint { margin: 0 0 var(--mg-space-4); padding: 0 var(--mg-space-4); }
html.ui-v2 .v2-ob .mg-select--tile { padding: 0 var(--mg-space-8); }
html.ui-v2 .v2-ob .mg-select--row { min-height: 56px; font-size: 16px; }

/* "Más szakma": the remaining trades, one tap away. */
html.ui-v2 .v2-ob-more { display: flex; flex-direction: column; gap: var(--mg-space-10); }
html.ui-v2 .v2-ob-more > summary { list-style: none; }
html.ui-v2 .v2-ob-more > summary::-webkit-details-marker { display: none; }
/* The established disclosure chevron and "Megnyitom" hint are not this design's. */
html.ui-v2 .v2-ob-more > summary::before, html.ui-v2 .v2-ob-more > summary::after { content: none; display: none; }
html.ui-v2 .v2-ob-more[open] > summary { margin-bottom: var(--mg-space-10); }

/* ---- V2 Díjak: fee rows inside one card ---- */
html.ui-v2 .v2-ob-fees { padding: 0; overflow: hidden; }
html.ui-v2 .v2-ob-fee { display: flex; align-items: center; gap: var(--mg-space-12); padding: var(--mg-space-14) var(--mg-space-16); }
html.ui-v2 .v2-ob-fee + .v2-ob-fee { border-top: 1px solid var(--mg-divider); }
html.ui-v2 .v2-ob-fee__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--mg-space-4); }
html.ui-v2 .v2-ob .v2-ob-fee__label { display: block; margin: 0; font-size: 15px; font-weight: 700; color: var(--mg-text-primary); }
html.ui-v2 .v2-ob-fee__field { position: relative; width: 150px; flex: none; }
html.ui-v2 .v2-ob-fee__input { text-align: right; padding-right: 40px; font-size: 18px; font-weight: 800; }
html.ui-v2 .v2-ob-fee__unit { position: absolute; right: var(--mg-space-14); top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--mg-text-muted); pointer-events: none; }
html.ui-v2 .v2-ob-fee--vat { flex-direction: column; align-items: stretch; gap: var(--mg-space-10); padding-bottom: var(--mg-space-16); }
html.ui-v2 .v2-ob-fee--vat .mg-hint { margin: 0; line-height: 1.4; }
html.ui-v2 .v2-ob-company { margin: 0; padding: 0 var(--mg-space-4); line-height: 1.4; }
/* D1: the ink border marks the card once it is ticked, not before. */
html.ui-v2 .v2-ob-privacy { font-size: 15px; line-height: 1.5; }
html.ui-v2 .v2-ob-privacy:has(.mg-check__input:checked) { border: 2px solid var(--mg-selected); padding: calc(var(--mg-space-16) - 1px); }
html.ui-v2 .v2-ob-privacy:has(.mg-check__input[aria-invalid="true"]) { border: 2px solid var(--mg-review); padding: calc(var(--mg-space-16) - 1px); }
html.ui-v2 .v2-ob-rv { width: 20px; height: 20px; font-size: 13px; flex: none; }
html.ui-v2 .mg-wizard__why[hidden], html.ui-v2 .v2-ob .mg-error[hidden] { display: none; }

/* ---- V3 Behozás: import cards ---- */
html.ui-v2 .v2-ob-saved { align-self: flex-start; }
html.ui-v2 .v2-ob-saved svg { width: 12px; height: 12px; }
html.ui-v2 .v2-ob-imp { display: flex; align-items: center; gap: var(--mg-space-14); min-height: var(--mg-bigopt-min); }
html.ui-v2 .v2-ob-imp__icon { width: 44px; height: 44px; flex: none; border-radius: var(--mg-radius-input); background: var(--mg-bg-sunken); color: var(--mg-text-secondary); display: inline-flex; align-items: center; justify-content: center; }
html.ui-v2 .v2-ob-imp__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--mg-space-4); }
html.ui-v2 .v2-ob-imp__text b { font-size: 16px; font-weight: 700; }
html.ui-v2 .v2-ob-imp__text small { font-size: 14px; line-height: 1.4; color: var(--mg-text-muted); }
html.ui-v2 .v2-ob-later { padding: var(--mg-space-14) var(--mg-space-16); border: 1.5px dashed var(--mg-border-card); border-radius: var(--mg-radius-card); align-items: flex-start; }
html.ui-v2 .v2-ob-later .v2-ob-imp__text b { color: var(--mg-text-on-tint); }
html.ui-v2 .v2-ob-usage { display: flex; flex-direction: column; gap: var(--mg-space-8); }
html.ui-v2 .v2-ob-usage ul { margin: 0; padding: 0 0 0 var(--mg-space-20); font-size: 14px; line-height: 1.5; color: var(--mg-text-on-tint); }
html.ui-v2 .v2-ob-foot { margin: 0; padding: var(--mg-space-4) var(--mg-space-12); }

/* ---- the established invite-request card, shown inside the layer ---- */
html.ui-v2 .v2-ob #invite-request { margin: 0; background: var(--mg-bg-card); border: 2px solid var(--mg-review); border-radius: var(--mg-radius-card); box-shadow: none; padding: var(--mg-space-14) var(--mg-space-16); color: var(--mg-text-primary); }
html.ui-v2 .v2-ob #invite-request.hidden { display: none; }
html.ui-v2 .v2-ob #invite-request h3 { font-size: 18px; font-weight: 800; }
html.ui-v2 .v2-ob #invite-request label { font-size: 13px; font-weight: 600; color: var(--mg-text-secondary); }
html.ui-v2 .v2-ob #invite-request input:not([type="checkbox"]) { min-height: var(--mg-touch-min); border: 1.5px solid var(--mg-border-control); border-radius: var(--mg-radius-input); padding: 0 var(--mg-space-14); font-size: 16px; width: 100%; background: var(--mg-bg-card); }
html.ui-v2 .v2-ob #invite-request .btn.cta { min-height: var(--mg-cta-height); width: 100%; border: none; border-radius: var(--mg-radius-control); background: var(--mg-action); color: var(--mg-on-action); font-size: 17px; font-weight: 700; }

/* Desktop: the wizard stays a readable column in the middle. */
@media (min-width: 900px) {
  html.ui-v2 .v2-ob-scr { max-width: 560px; padding-top: var(--mg-space-24); }
}
@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .v2-ob * { transition: none !important; animation: none !important; }
}