/* ============================================================
   ProfesLink — professional onboarding wizard (steps 1-9)
   Implements every pfl-wiz-* class declared by
   Pages/Components/Onboarding/* and Pages/User/Onboarding/*.

   LOAD ORDER: after global.css, BEFORE palette.css.
     - after global.css, because the wizard extends .pfl-setup-card and
       .pfl-btn-brand, which live there and would otherwise win on source order;
     - before palette.css, because palette.css owns the --pfl-* tokens AND the
       text-transform backstop, and must keep the last word on both. Four
       classes here (pfl-wiz-progress-label, pfl-wiz-chip-label,
       pfl-wiz-choice-needs-label, pfl-wiz-choice-profiles-label) match its
       [class*="pfl-"][class*="label"]
       guard, so loading this file later would let an !important rule slip
       uppercase past it and ship misspelt Greek.
     - Consuming var(--pfl-*) does NOT require loading after palette.css:
       custom properties resolve where they are USED, against the element's
       final computed value, not where the var() is parsed.

   Design values: PROF-47 Design Tokens Reference (19 Jul 2026) via the pack
   contracts. Layout for step 1: PROF-37 §4.

   NO text-transform in this file. Uppercasing Greek strips its accents
   ("Βήμα" → "ΒΉΜΑ"), which is misspelt — see palette.css for the full note.
   ============================================================ */

/* ── Page + card shell ─────────────────────────────────────────────────────

   The wizard borrows .pfl-setup-page / .pfl-setup-card from the profile-setup
   screen so it is visually continuous with the page the user arrives from. Both
   predate palette.css and carry literal hexes; restating them in tokens here is
   what makes a palette move actually reach the wizard.

   :has() is the only handle on the PAGE element — the shell puts pfl-wiz-card
   on the card, not on the wrapper — and it is also how step 1 earns its extra
   width. Where :has() is unsupported the wizard simply keeps .pfl-setup-page's
   own gutters and the 480px column: narrower than intended, never broken. */
.pfl-setup-page:has(.pfl-wiz-card) {
    padding: 48px 16px; /* page padding, mobile */
}

.pfl-wiz-card {
    background: var(--pfl-bg);
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius);
    max-width: 480px; /* "Max content width — onboarding wizard content column" */
}

/* Step 1 is the one screen the 480px column cannot hold: its category grid is
   3 columns on desktop (PROF-37 §4.1), and 480px minus the card padding leaves
   about 130px a column. The signed-off mockup shows this step wide. The card
   widens only when one of these classes is actually inside it, so the shell
   never needs to know which step it is rendering.
   A `Wide` parameter on MkWizardShell would say this without :has(), but that
   component belongs to another unit — recorded as a follow-up.

   Steps 5 (.pfl-wiz-state / .pfl-wiz-checklist), 6 (.pfl-wiz-docs), 7
   (.pfl-wiz-photocard) and 9 (.pfl-wiz-review) carry none of the three
   patterns below on their own and used to fall through to the 480px
   default, reading as noticeably narrower than step 1 mid-wizard. They are
   single-column content with no wide-input risk (unlike the step 3/4 forms
   below), so they widen to the full 1080px rather than the 820px form
   column. */
.pfl-wiz-card:has(.pfl-wiz-cats),
.pfl-wiz-card:has(.pfl-wiz-choices:not(.pfl-wiz-choices-compact)),
.pfl-wiz-card:has(.pfl-wiz-state),
.pfl-wiz-card:has(.pfl-wiz-checklist),
.pfl-wiz-card:has(.pfl-wiz-docs),
.pfl-wiz-card:has(.pfl-wiz-photocard),
.pfl-wiz-card:has(.pfl-wiz-review) {
    max-width: 1080px;
}

/* Form steps (3, 4, 7) need room for the horizontal field row — icon tile +
   label column + input — that the 480px column cannot give. 820px, not the
   1080px above: an input any wider than ~450px is a name box the length of the
   card, which reads as a mistake. The label column auto-sizes (max-content), so
   this only has to hold the widest variant's label plus a comfortable input. */
.pfl-wiz-card:has(.pfl-wiz-form) {
    max-width: 820px;
}

/* H3 type scale: 22-24px / 600 / navy. Deliberately not .pfl-setup-title, which
   is weight 700 and carries no font-size at all. */
/* Centred and enlarged to the prominence the signed-off mockups give it. This
   runs a little past the token reference's 22-24px / 600 step-heading spec (the
   mockups render it heavier and larger, and they are what the client approved);
   the mobile step below pulls it back to 20px. */
.pfl-wiz-title {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
    color: var(--pfl-navy);
}

/* Body style (#0F172A), not the muted helper text of .pfl-setup-sub. */
.pfl-wiz-sub {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--pfl-text);
}

/* Centred under the heading. Scoped to the <p> on purpose: the subtitle and the
   step-1 specialisation checkboxes both carry .pfl-wiz-sub, and centring the
   shared class would drag the checkbox rows to the middle too. Only the subtitle
   is a paragraph. */
p.pfl-wiz-sub {
    text-align: center;
}

/* ── Back link row, above the progress bar ─────────────────────────────── */

.pfl-wiz-topbar {
    display: flex;
    align-items: center;
    margin: 0 0 16px;
}

/* Owns the vertical rhythm between the subtitle and the footer, so each step
   page lays out its own fields without also negotiating with the chrome. */
.pfl-wiz-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Progress bar ──────────────────────────────────────────────────────── */

.pfl-wiz-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 20px;
}

/* Centred above the bar, as the signed-off mockups show. */
.pfl-wiz-progress-label {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: var(--pfl-text-muted);
}

/* Bar + percentage on one line: the track grows and the caption pins to its
   right end. */
.pfl-wiz-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pfl-wiz-progress-track {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--pfl-border);
    overflow: hidden;
}

/* The completion figure. Indigo to match the mockups (NOT the orange the token
   reference allows for percentages — the sheets paint it indigo). Tabular
   figures so it does not shuffle width as the number grows across steps. */
.pfl-wiz-progress-percent {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--pfl-indigo);
    font-variant-numeric: tabular-nums;
}

/* Indigo for steps 1-8. The width comes from an inline style computed off
   MkWizardProgressComponent.TotalSteps — never a value in this file, or the
   step count would live in two places again. */
.pfl-wiz-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--pfl-indigo);
    transition: width .3s ease, background-color .3s ease;
}

/* Green only at step 9 / 100%. #16A34A via the token — the mockups paint this
   #10B981, a hex PROF-47 §7 explicitly bans. */
.pfl-wiz-progress-fill-done {
    background: var(--pfl-success);
}

/* ── Notices, loading, gate/hint captions ──────────────────────────────── */

.pfl-wiz-error {
    margin: 16px 0 0;
    border-radius: 8px;
    font-size: 14px;
}

/* No margin of its own: it sits inside .pfl-wiz-body, whose gap already spaces
   it. A margin here would double up against that gap. */
.pfl-wiz-notice {
    margin: 0;
    border-radius: 8px;
    font-size: 14px;
}

.pfl-wiz-notice-link {
    margin-inline-start: 4px;
    color: var(--pfl-indigo);
    font-weight: 600;
    text-decoration: none; /* PROF-47 §4: links carry no underline in any state */
}
.pfl-wiz-notice-link:hover {
    color: var(--pfl-indigo-hover);
}

/* Double duty: a flex row of spinner + text on steps 1 and 2, but on step 3 the
   same class lands on a MudProgressLinear, whose root is a 4px bar. Turning
   that into a padded flex container would destroy it, so the layout rules are
   withheld from the MudBlazor root and it only gets spacing. */
.pfl-wiz-loading:not(.mud-progress-linear) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 0;
    font-size: 14px;
    color: var(--pfl-text-muted);
}
.pfl-wiz-loading.mud-progress-linear {
    margin: 8px 0 16px;
}

/* Step 1's "why the Continue button is dead" caption. Info-banner tint, because
   it is guidance rather than a failure — the user has not done anything wrong
   yet. */
.pfl-wiz-gate {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--pfl-info-bg);
    color: var(--pfl-info-text);
    font-size: 14px;
    line-height: 1.5;
}
.pfl-wiz-gate-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Step 2's reassurance line, directly above the shell's footer. */
.pfl-wiz-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pfl-text-muted);
}
.pfl-wiz-hint-icon {
    flex: 0 0 auto;
    color: var(--pfl-success);
}

/* Step 3's equivalent. Caption scale — it repeats what the field errors already
   say, so it must not compete with them. */
.pfl-wiz-cta-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--pfl-text-muted);
}

/* Visually hidden but still read and still focusable. Never display:none or
   visibility:hidden — both drop the element out of the accessibility tree,
   which is the whole point of the class. */
.pfl-wiz-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Footer: primary CTA + back link ───────────────────────────────────── */

.pfl-wiz-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

/* Bar layout: a light panel with a shield-led helper on the left and the CTA,
   sized to its content, on the right — the footer the signed-off mockups (steps
   1, 2, 8) share. Only applied when a step supplies footer-helper copy; steps
   that do not keep the plain centred full-width button above. */
.pfl-wiz-footer-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius);
    background: var(--pfl-section);
}

.pfl-wiz-footer-help {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* The shield badge: a soft indigo disc, the glyph centred by flex (a viewBox
   does not lay out inside CSS padding). */
.pfl-wiz-footer-help-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pfl-indigo-light);
    color: var(--pfl-indigo);
}

.pfl-wiz-footer-help-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pfl-wiz-footer-help-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pfl-navy);
}

.pfl-wiz-footer-help-sub {
    font-size: 13px;
    line-height: 1.4;
    color: var(--pfl-text-muted);
}

/* In the bar the CTA is sized to content and never stretches. */
.pfl-wiz-footer-bar .pfl-wiz-cta.mud-button-root {
    flex: 0 0 auto;
    min-width: 190px;
}

/* The forward arrow after the label. currentColor → white on the gradient. */
.pfl-wiz-cta-arrow {
    margin-inline-start: 8px;
    color: inherit;
}

/* The gradient, the white text on every pseudo-class and the hover pair all
   come from .pfl-btn-brand (global.css). Only the box metrics are set here. */
.pfl-wiz-cta.mud-button-root {
    min-height: 48px;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
}

/* PROF-47 §3.1: the disabled CTA is a flat slate fill with slate text — not the
   brand gradient at 45% opacity, which .pfl-btn-brand falls back to and which
   still reads as a live button.

   `background` (shorthand) rather than background-color: it has to clear
   .pfl-btn-brand's !important background-image, and a background-color alone
   would leave the gradient painted on top.

   pointer-events is restored because .mud-button-root:disabled sets it to none,
   and cursor is never shown on an element that receives no pointer events. A
   native <button disabled> cannot be activated regardless, so this changes the
   cursor and nothing else. */
.pfl-wiz-cta.mud-button-root:disabled,
.pfl-wiz-cta.mud-button-root.mud-button-disabled {
    background: var(--pfl-disabled-bg) !important;
    color: var(--pfl-disabled-text) !important;
    box-shadow: none !important;
    opacity: 1;
    pointer-events: auto;
    cursor: not-allowed;
}

.pfl-wiz-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--pfl-text-muted);
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}
.pfl-wiz-back:hover:not(:disabled) {
    background: var(--pfl-section);
    color: var(--pfl-indigo);
}
.pfl-wiz-back:disabled {
    color: var(--pfl-disabled-text);
    cursor: not-allowed;
}
.pfl-wiz-back:focus-visible {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 2px;
}

/* ── Selection chips ───────────────────────────────────────────────────────

   Two callers, one pill: step 1's removable specialisation chips and step 3's
   read-only trader-type chip. Both are the same 20px pill from PROF-37 §4.4, so
   they share the class rather than each inventing one. */
.pfl-wiz-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* The caret on the "+N more" pill, rotating when the overflow is expanded. */
.pfl-wiz-chip-more-caret {
    color: inherit;
    transition: transform .2s ease;
}
.pfl-wiz-chip-more[aria-expanded="true"] .pfl-wiz-chip-more-caret {
    transform: rotate(180deg);
}

.pfl-wiz-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--pfl-indigo);
    border-radius: 20px;
    background: var(--pfl-indigo-light);
    color: var(--pfl-indigo);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    /* Step 3 drops this chip straight into .pfl-wiz-body, a stretch-aligned
       flex column, where an inline-flex child would otherwise be blown out to
       the full card width. Centred to match the PROF-39 mockup, which sits it
       under the (centred) title rather than flush against the card's left edge. */
    align-self: center;
}
/* …but inside the chip row it must sit on the row's centre line again. */
.pfl-wiz-chips .pfl-wiz-chip {
    align-self: center;
}

.pfl-wiz-chip-label,
.pfl-wiz-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pfl-wiz-chip-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.pfl-wiz-chip-remove .mud-icon-root {
    font-size: 16px;
}
.pfl-wiz-chip-remove:hover:not(:disabled) {
    background: rgba(43, 46, 124, .12); /* --pfl-indigo at 12%; no token carries an alpha */
}
.pfl-wiz-chip-remove:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.pfl-wiz-chip-remove:focus-visible {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 1px;
}

/* The "+N more" / "fewer" toggle. Same pill, hollow, so it reads as a control
   rather than as one more selection. */
.pfl-wiz-chip-more {
    background: var(--pfl-bg);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.pfl-wiz-chip-more:hover:not(:disabled) {
    background: var(--pfl-indigo-light);
}
.pfl-wiz-chip-more:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.pfl-wiz-chip-more:focus-visible {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 2px;
}

/* Step 3's "change this" link inside the trader-type chip. */
.pfl-wiz-chip-change {
    margin-inline-start: 2px;
    color: var(--pfl-indigo);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.pfl-wiz-chip-change:hover {
    color: var(--pfl-indigo-hover);
    text-decoration: underline;
}

/* Trader-type chip (steps 3 + 4). The PROF-40 mockup draws THIS chip as the
   Primary-Button navy pill — brand gradient, white icon and text, the
   "(Αλλάξτε)" link in light indigo with a permanent underline — not as the
   light selection chip. The base class stays untouched so step 1's category
   chips keep their light look. */
.pfl-wiz-chip--trader {
    border: 0;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--pfl-grad-cta);
    color: #FFFFFF;
    font-weight: 600;
}

.pfl-wiz-chip--trader .pfl-wiz-chip-change {
    color: #C7D2FE;
    text-decoration: underline;
}

.pfl-wiz-chip--trader .pfl-wiz-chip-change:hover {
    color: #FFFFFF;
}

/* ── Step 1: category grid ─────────────────────────────────────────────── */

.pfl-wiz-picker {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 1 column on mobile, 2 on tablet, 3 on desktop (PROF-37 §4.1 / §10).
   align-items:start so an expanded card grows on its own and does not drag its
   row-mates to the same height. minmax(0,1fr) rather than 1fr because a long
   unbroken category name would otherwise set the column's min-content width and
   push the grid wider than the card. */
.pfl-wiz-cats {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
}

.pfl-wiz-cat {
    min-width: 0;
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius);
    background: var(--pfl-bg);
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pfl-wiz-cat:hover {
    border-color: var(--pfl-indigo-hover);
    box-shadow: var(--pfl-shadow-sm);
}

/* Selected: 2px indigo + soft indigo fill. The second pixel is an inset shadow
   rather than border-width:2px, so selecting a card cannot reflow the grid row
   by a pixel. Colour is never the only signal — the card also swaps its
   subcategory count for a selected count. */
.pfl-wiz-cat.is-selected {
    border-color: var(--pfl-indigo);
    box-shadow: inset 0 0 0 1px var(--pfl-indigo);
    background: var(--pfl-indigo-light);
}

.pfl-wiz-cat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 80px;
    padding: 16px;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.pfl-wiz-cat-head:disabled {
    opacity: .6;
    cursor: not-allowed;
}
/* Inset, because the card clips its overflow — an outset ring would be cut off
   on all four sides. */
.pfl-wiz-cat-head:focus-visible {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: -3px;
}

/* Tinted circular badge behind the category icon. The glyph is centred by the
   flex badge, not by padding on the <svg> (a viewBox does not lay out inside CSS
   padding), which is why the icon lives in this wrapper rather than carrying a
   background itself. Colour comes from the tint modifier below and the glyph
   inherits it. */
.pfl-wiz-cat-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* LucideIcon renders a bare <svg stroke="currentColor">; it inherits the badge's
   tint colour. */
.pfl-wiz-cat-icon {
    color: inherit;
}

/* Eight pastel tints, cycled by category (see MkCategoryPickerComponent.TintIndex).
   The first four match the mockup's home-repairs / cleaning / construction /
   gardening cards. Each is a soft fill with a saturated glyph. */
.pfl-wiz-cat-badge-t0 { background: #EEF2FF; color: #2B2E7C; } /* indigo */
.pfl-wiz-cat-badge-t1 { background: #F3EEFF; color: #6D28D9; } /* violet */
.pfl-wiz-cat-badge-t2 { background: #FFF1E6; color: #C2410C; } /* orange */
.pfl-wiz-cat-badge-t3 { background: #E9F9EF; color: #15803D; } /* green  */
.pfl-wiz-cat-badge-t4 { background: #FEF6E7; color: #B45309; } /* amber  */
.pfl-wiz-cat-badge-t5 { background: #FDECEC; color: #DC2626; } /* rose   */
.pfl-wiz-cat-badge-t6 { background: #E6F7F6; color: #0F766E; } /* teal   */
.pfl-wiz-cat-badge-t7 { background: #FCEBF3; color: #BE185D; } /* pink   */

/* On a selected card the fill is already indigo-light, so the badge steps back
   to white to keep the glyph readable — the same move the step-2 choice tiles
   make. The glyph keeps its tint colour. */
.pfl-wiz-cat.is-selected .pfl-wiz-cat-badge {
    background: var(--pfl-bg);
}

.pfl-wiz-cat-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pfl-wiz-cat-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pfl-navy);
}

.pfl-wiz-cat-meta {
    font-size: 12px;
    line-height: 1.4;
    color: var(--pfl-text-muted);
}
/* Once something is picked this line is the selected count, i.e. it is carrying
   the card's state in words for anyone who cannot see the indigo border. */
.pfl-wiz-cat.is-selected .pfl-wiz-cat-meta {
    font-weight: 500;
    color: var(--pfl-indigo);
}

.pfl-wiz-cat-caret {
    flex: 0 0 auto;
    color: var(--pfl-text-muted);
    transition: transform .2s ease;
}
.pfl-wiz-cat.is-open .pfl-wiz-cat-caret {
    transform: rotate(180deg);
}

/* Scrollable, because the largest category carries 30-odd specialisations and
   an unbounded panel would push the rest of the grid off the screen. */
.pfl-wiz-subs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
    padding: 8px 16px 16px;
    border-top: 1px solid var(--pfl-border);
}

/* MudCheckBox carries a -4px margin of its own for dense toolbars; inside a
   list it just makes the rows overlap their own gap. */
.pfl-wiz-sub,
.pfl-wiz-sub .mud-checkbox {
    margin: 0;
}
.pfl-wiz-sub .mud-icon-button {
    padding: 6px;
}
.pfl-wiz-sub .mud-typography {
    font-size: 14px;
    line-height: 1.4;
    color: var(--pfl-text);
}

/* "I offer something not listed" — the category's catch-all specialisation.
   It is a checkbox like the ones above it (PROF-229): as a link-button there
   was no tick to show it was on and no obvious way to turn it back off, which
   mattered because the gate holds Continue until a ticked Other has text.
   The link-button styling is gone; what remains is the rule above it, which
   still reads as "escape hatch at the foot of the list", and the indigo
   emphasis on the label. */
.pfl-wiz-sub-other {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--pfl-border);
}
.pfl-wiz-sub-other .mud-typography {
    font-weight: 600;
    color: var(--pfl-indigo);
}

/* ── Step 2: trader-type choice cards ──────────────────────────────────── */

/* Browser default fieldset styling, removed. min-width:0 is the long-standing
   fix for a fieldset refusing to shrink below its content inside a flex or grid
   parent. */
.pfl-wiz-choices {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pfl-wiz-choices-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.pfl-wiz-choice {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 16px;
    /* Constant, not applied only when selected: the tick badge is absolutely
       placed in this gutter, and reserving it only on the selected card would
       reflow the text the instant the user picks one. */
    padding-inline-end: 44px;
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius);
    background: var(--pfl-bg);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pfl-wiz-choice:hover {
    border-color: var(--pfl-indigo-hover);
    box-shadow: var(--pfl-shadow-sm);
}
.pfl-wiz-choice.is-selected {
    border-color: var(--pfl-indigo);
    box-shadow: inset 0 0 0 1px var(--pfl-indigo);
    background: var(--pfl-indigo-light);
}

/* The label is the hit target and the radio inside it is invisible, so the
   focus ring has to be drawn on the card. :has() is the only way to reach a
   parent from a child's state; there is no selector-only fallback. */
.pfl-wiz-choice:has(.pfl-wiz-choice-input:focus-visible) {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 2px;
}
.pfl-wiz-choice:has(.pfl-wiz-choice-input:disabled) {
    opacity: .65;
    cursor: not-allowed;
}

/* Hidden VISUALLY ONLY. display:none or visibility:hidden would take the radio
   out of the tab order and the arrow-key group with it — the native grouping is
   the entire reason this is a real <input type="radio">.
   Absolutely positioned inside the card so focusing it cannot scroll the page
   to a stray 1px box somewhere else in the document. */
.pfl-wiz-choice-input {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.pfl-wiz-choice-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--pfl-indigo-light);
    color: var(--pfl-indigo);
}
/* The card's own fill is already indigo-light at that point, so the tile has to
   step back to white or it disappears into the card. */
.pfl-wiz-choice.is-selected .pfl-wiz-choice-icon {
    background: var(--pfl-bg);
}

.pfl-wiz-choice-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    /* Fills the card so the auto margin below has room to push into. The grid
       already stretches the cards to a common height per row; without this the
       body would only be as tall as its own content. */
    flex: 1 1 auto;
}

/* "Learn more" is the last child of the body, and the three trader-type cards
   have different amounts of text above it, so it landed at a different height
   on each one. An auto top margin absorbs the slack and pins it to the bottom,
   level across the row. Scoped to .pfl-wiz-choice on purpose: the same button
   appears in steps 4 and 5, where it follows the text and should stay there. */
.pfl-wiz-choice .pfl-wiz-learn-more {
    margin-top: auto;
    padding-top: 10px;
}

.pfl-wiz-choice-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pfl-navy);
}

.pfl-wiz-choice-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--pfl-text-muted);
}

/* A column, not an inline flow: the approved PROF-38 mockup (and the 24 Jul
   design note) puts the label on a line of its own with the chips wrapping
   beneath it, the whole section fenced off from the description by a hairline. */
.pfl-wiz-choice-needs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--pfl-border);
    font-size: 12px;
    line-height: 1.4;
}
.pfl-wiz-choice-needs-label {
    font-weight: 600;
    color: var(--pfl-navy);
}
.pfl-wiz-choice-needs-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* One requirement per box, PROF-38's "Θα χρειαστείς" list — same pill language
   as .pfl-wiz-chip (indigo border + light-indigo fill) but sized down for a
   list that sits inside the card body rather than standing on its own. */
.pfl-wiz-needs-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--pfl-indigo);
    border-radius: 12px;
    background: var(--pfl-indigo-light);
    color: var(--pfl-indigo);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

/* PROF-118 (Eftychia's revised spec of 26/07, supersedes PROF-107): the "Other"
   field and its Add button share one flex row at the SAME 44px height. The input
   flexes to fill the remaining width (no fixed width); the Add button is a fixed
   110px primary CTA carrying the .pfl-btn-brand navy→indigo gradient. */
.pfl-wiz-other-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pfl-wiz-other-input {
    flex: 1 1 auto;
}
.pfl-wiz-other-input .mud-input.mud-input-outlined,
.pfl-wiz-other-input .mud-input-slot {
    height: 44px;
}
.pfl-wiz-other-add.mud-button-root {
    width: 110px;
    min-width: 110px;
    height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* "Τυπικά προφίλ" — example occupations under a dashed rule (dashed where the
   needs divider is solid, exactly as the mockup draws them). Plain muted text
   rather than chips: these are illustrations, not requirements, and boxing
   them would put them in visual competition with the document list above. */
.pfl-wiz-choice-profiles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--pfl-border);
    font-size: 12px;
    line-height: 1.5;
}
.pfl-wiz-choice-profiles-label {
    font-weight: 600;
    color: var(--pfl-navy);
}
.pfl-wiz-choice-profiles-text {
    color: var(--pfl-text-muted);
}

/* Card 3's "Για Εταιρείες" tag, PROF-38 §3: indigo-light fill, indigo ink.
   Squarer than the needs chips so it reads as a badge on the card, not as one
   more requirement that drifted out of its list. */

.pfl-wiz-choice-check {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pfl-indigo);
    color: var(--pfl-on-dark);
}
.pfl-wiz-choice-check .mud-icon-root {
    font-size: 15px;
}

/* ── Step 3: form fields ───────────────────────────────────────────────── */

.pfl-wiz-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pfl-wiz-field {
    width: 100%;
    position: relative;
}

/* PROF-41 (i) tooltip anchored to the top-right of an outlined field. The floating
   label sits top-LEFT, the start adornment sits left, and short tax/date values
   never reach the right edge — so this corner is clear. */
.pfl-wiz-field-tip {
    position: absolute;
    top: 6px;
    inset-inline-end: 10px;
    z-index: 3;
    line-height: 0;
}

/* The one field that appears mid-form, when step 2's answer was sole trader or
   company. The scroll margin keeps it clear of the sticky site header if
   anything ever scrolls it into view after that branch flips. */
.pfl-wiz-field-business {
    scroll-margin-top: 96px;
}

.pfl-wiz-phone-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pfl-wiz-phone-code {
    flex: 0 0 150px;
    max-width: 150px;
}
/* min-width:0 or the autocomplete's intrinsic width would keep this from
   shrinking and push the row past the card edge. */
.pfl-wiz-phone-number {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Field rows (PROF-39 mockup): icon tile · numbered label · input ───────
   A three-column grid on desktop. The MudBlazor input chrome (8px radius, 1px
   border, 2px indigo focus, 16px value, 48px height) is already themed by the
   .pfl-wiz-card rules further down, so these classes own ONLY the layout and
   the icon/label furniture the mockup draws around each field. */
.pfl-wiz-form {
    display: flex;
    flex-direction: column;
    background: var(--pfl-bg);
    border: 1px solid var(--pfl-border);
    border-radius: 16px;
    overflow: hidden;
}

.pfl-wiz-frow {
    display: grid;
    /* max-content, not a fixed width: the label column then fits the widest
       label in whichever trader-type variant is on screen (an "independent"
       label is ~200px, a company's "Ημερομηνία Γέννησης Διευθύνοντος" ~287px),
       so no label wraps and every input still lines up. minmax(0,1fr) lets the
       input take the rest and shrink rather than overflow the card. */
    grid-template-columns: 44px max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    padding: 14px 20px;
    /* #F1F5F9 is the mockup's row hairline — one step lighter than the card's
       own --pfl-border, so the rows read as one group, not eight boxes. */
    border-bottom: 1px solid #F1F5F9;
}
.pfl-wiz-frow:last-child {
    border-bottom: none;
}

/* Same tile as the step-2 choice cards: 44px, indigo-light fill, indigo glyph. */
.pfl-wiz-ficon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pfl-indigo-light);
    color: var(--pfl-indigo);
}

.pfl-wiz-flabel {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pfl-navy);
}
.pfl-wiz-fnum {
    margin-inline-end: 2px;
}
.pfl-wiz-freq {
    color: var(--pfl-error);
    margin-inline-start: 2px;
}

/* The input cell. min-width:0 so a long value cannot widen the grid past the
   card; position:relative so the address field's (i) tooltip can anchor here. */
.pfl-wiz-finput {
    min-width: 0;
    position: relative;
}
.pfl-wiz-finput > .mud-input-control,
.pfl-wiz-finput .pfl-wiz-phone-row {
    width: 100%;
}

/* PROF-41 (i) on the address field, re-anchored for the horizontal row: the
   value sits left and the field carries no end adornment, so the top-right
   corner of the input is clear. Overrides the top:6px used by the older
   floating-label layout still in play on steps 4 and 7. */
.pfl-wiz-finput-tip .pfl-wiz-field-tip {
    top: 12px;
    inset-inline-end: 12px;
}

/* Phones and small viewports: below the widened card, the label column and a
   usable input no longer fit side by side, so the label rides on the icon's
   line and the input drops full-width beneath both. Breakpoint at 760px, not
   600px, so the input never gets squeezed thin in the last stretch before it. */
@media (max-width: 760px) {
    .pfl-wiz-frow {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 6px;
        padding: 14px 16px;
    }
    .pfl-wiz-ficon {
        width: 40px;
        height: 40px;
        grid-row: 1;
        grid-column: 1;
    }
    .pfl-wiz-flabel {
        grid-row: 1;
        grid-column: 2;
    }
    .pfl-wiz-finput {
        grid-row: 2;
        grid-column: 1 / -1;
    }
}

/* ── Step 4: tax identity (PROF-40) — rich field rows ──────────────────────
   Same card as step 3, but each row carries a title + subtitle + hint in the
   label column (no numbers here — PROF-40's mockup labels them by name), and
   the VAT question is itself a row whose "input" is a pair of radio options.
   The label column is fixed, not max-content: the subtitles are sentences that
   are meant to wrap, and max-content would let the longest one own the row. */
.pfl-wiz-securebox {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--pfl-indigo-light);
    border-radius: 14px;
    padding: 16px 18px;
}
.pfl-wiz-securebox-icon {
    flex: 0 0 auto;
    color: var(--pfl-indigo);
    margin-top: 1px;
}
.pfl-wiz-securebox-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--pfl-navy);
}
.pfl-wiz-securebox-text {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pfl-text-muted);
    margin-top: 2px;
}

.pfl-wiz-taxrow {
    display: grid;
    grid-template-columns: 52px 250px minmax(0, 1fr);
    align-items: start;
    column-gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid #F1F5F9;
}
.pfl-wiz-taxrow:last-child {
    border-bottom: none;
}
.pfl-wiz-taxicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--pfl-indigo-light);
    color: var(--pfl-indigo);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
}
.pfl-wiz-taxlabel-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pfl-navy);
}
.pfl-wiz-taxlabel-sub {
    font-size: 14px;
    line-height: 1.4;
    color: var(--pfl-text-muted);
    margin-top: 4px;
}
.pfl-wiz-taxlabel-help {
    font-size: 13px;
    line-height: 1.4;
    color: var(--pfl-placeholder);
    margin-top: 6px;
}
.pfl-wiz-taxinput {
    min-width: 0;
    position: relative;
}
.pfl-wiz-taxvalid {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pfl-success);
}
.pfl-wiz-taxinvalid {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pfl-error);
}
/* The derived VAT number's "pending" state — muted, with an info glyph, so it
   reads as a computed value that is waiting on the ΑΦΜ, not an empty input. */
.pfl-wiz-derived-icon {
    flex: 0 0 auto;
    color: var(--pfl-indigo);
}
.pfl-wiz-derived-hint {
    font-size: 13px;
    line-height: 1.4;
    color: var(--pfl-text-muted);
}

/* VAT registration, as radio options inside the VAT row's input column. Own
   radio styling rather than the .pfl-wiz-choice card: PROF-40 draws a visible
   radio dot, not a card with a trailing check. */
.pfl-wiz-vopts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pfl-wiz-vopt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--pfl-border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--pfl-text);
}
.pfl-wiz-vopt.is-selected {
    border-color: var(--pfl-indigo);
    background: var(--pfl-indigo-light);
    box-shadow: inset 0 0 0 1px var(--pfl-indigo);
}
.pfl-wiz-vopt:has(.pfl-wiz-vradio-input:focus-visible) {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 2px;
}
.pfl-wiz-vopt:has(.pfl-wiz-vradio-input:disabled) {
    opacity: .65;
    cursor: not-allowed;
}
.pfl-wiz-vradio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.pfl-wiz-vradio {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--pfl-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pfl-wiz-vopt.is-selected .pfl-wiz-vradio {
    border-color: var(--pfl-indigo);
}
.pfl-wiz-vopt.is-selected .pfl-wiz-vradio::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pfl-indigo);
}

/* "Why we need your ΑΦΜ" panel below the card. */
.pfl-wiz-why {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--pfl-indigo-light);
    border-radius: 16px;
    padding: 18px 20px;
}
.pfl-wiz-why-l {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.pfl-wiz-why-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pfl-bg);
    color: var(--pfl-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pfl-wiz-why-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--pfl-navy);
}
.pfl-wiz-why-text {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pfl-text-muted);
    margin-top: 3px;
}
.pfl-wiz-why .pfl-wiz-learn-more {
    white-space: nowrap;
}

/* Tax rows stack on small viewports, like the step-3 field rows. */
@media (max-width: 760px) {
    .pfl-wiz-taxrow {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 10px;
        padding: 18px 16px;
    }
    .pfl-wiz-taxicon {
        width: 44px;
        height: 44px;
        grid-row: 1;
        grid-column: 1;
    }
    .pfl-wiz-taxrow > .pfl-wiz-taxlabel {
        grid-row: 1;
        grid-column: 2;
    }
    .pfl-wiz-taxinput {
        grid-row: 2;
        grid-column: 1 / -1;
    }
    .pfl-wiz-why {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Step 7: professional profile (PROF-44) — section cards + chips ─────────
   This step's mockup is deliberately NOT the icon-row card of steps 3/4: it is
   a photo card, a bio, a two-up experience/price, and chip sets for areas and
   languages. So these classes are its own, and the card does not widen. */
.pfl-wiz-seclabel {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--pfl-text-muted);
    margin: 22px 0 10px;
}
.pfl-wiz-seclabel-note {
    font-weight: 600;
    color: var(--pfl-placeholder);
}

.pfl-wiz-photocard {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--pfl-bg);
    border: 1px solid var(--pfl-border);
    border-radius: 16px;
    padding: 16px 18px;
}
.pfl-wiz-photocard-avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pfl-indigo-light);
    color: var(--pfl-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pfl-wiz-photocard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pfl-wiz-photocard-body {
    flex: 1;
    min-width: 0;
}
.pfl-wiz-photocard-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pfl-navy);
}
.pfl-wiz-photocard-sub {
    font-size: 14px;
    color: var(--pfl-text-muted);
    margin-top: 2px;
    margin-bottom: 10px;
}

.pfl-wiz-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.pfl-wiz-two .pfl-wiz-seclabel {
    margin-top: 0;
}

/* Chips: service areas (indigo) and languages (green toggle). */
.pfl-wiz-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.pfl-wiz-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--pfl-indigo);
    background: var(--pfl-indigo-light);
    color: var(--pfl-indigo);
    border-radius: 999px;
    padding: 7px 8px 7px 14px;
    font-size: 14px;
    font-weight: 600;
}
.pfl-wiz-tag-radius {
    font-weight: 500;
    color: var(--pfl-text-muted);
}
.pfl-wiz-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--pfl-indigo);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
}
.pfl-wiz-tag-remove:hover:not(:disabled) {
    background: rgba(43, 46, 124, .12);
}
.pfl-wiz-tag-remove:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.pfl-wiz-tag-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed var(--pfl-border);
    background: var(--pfl-bg);
    color: var(--pfl-text-muted);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.pfl-wiz-tag-add:hover:not(:disabled) {
    border-color: var(--pfl-indigo);
    color: var(--pfl-indigo);
}
.pfl-wiz-langchip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--pfl-border);
    background: var(--pfl-bg);
    color: var(--pfl-text-muted);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
/* #16A34A at ~12% is the verified-state tint; no palette token carries it. */
.pfl-wiz-langchip.is-selected {
    border-color: var(--pfl-success);
    background: rgba(22, 163, 74, .10);
    color: #15803D;
}
.pfl-wiz-langchip:has(.pfl-wiz-langchip-input:focus-visible) {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 2px;
}
.pfl-wiz-langchip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── Service delivery type cards (PROF-110) ─────────────────────────────
   Four selectable cards. Each type carries its own accent (mobile=indigo,
   fixed=green, both=orange, online=purple) on its icon, badge and selected
   border, matching ServiceDeliveryType_Mockup_27072026. */
.pfl-wiz-delivery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 4px 0 8px;
}
.pfl-wiz-delivery-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    font-family: inherit;
    border: 1.5px solid var(--pfl-border);
    background: var(--pfl-bg);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pfl-wiz-delivery-card:hover:not(:disabled) {
    border-color: var(--pfl-indigo);
}
.pfl-wiz-delivery-card:focus-visible {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 2px;
}
.pfl-wiz-delivery-card:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.pfl-wiz-delivery-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #FFFFFF;
    margin-bottom: 4px;
}
.pfl-wiz-delivery-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pfl-text, #0F1F4B);
    line-height: 1.25;
}
.pfl-wiz-delivery-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    border-radius: 999px;
    padding: 2px 9px;
}
.pfl-wiz-delivery-desc {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--pfl-text-muted);
    line-height: 1.45;
}

/* Per-type accent — icon + badge fill, and the selected border/tint. */
.pfl-wiz-delivery-card.delivery-mobile .pfl-wiz-delivery-ico,
.pfl-wiz-delivery-card.delivery-mobile .pfl-wiz-delivery-badge { background: #2B2E7C; }
.pfl-wiz-delivery-card.delivery-fixed .pfl-wiz-delivery-ico,
.pfl-wiz-delivery-card.delivery-fixed .pfl-wiz-delivery-badge { background: #16A34A; }
.pfl-wiz-delivery-card.delivery-both .pfl-wiz-delivery-ico,
.pfl-wiz-delivery-card.delivery-both .pfl-wiz-delivery-badge { background: #EA580C; }
.pfl-wiz-delivery-card.delivery-online .pfl-wiz-delivery-ico,
.pfl-wiz-delivery-card.delivery-online .pfl-wiz-delivery-badge { background: #7C3AED; }

.pfl-wiz-delivery-card.delivery-mobile.is-selected { border-color: #2B2E7C; background: rgba(43, 46, 124, .06); }
.pfl-wiz-delivery-card.delivery-fixed.is-selected  { border-color: #16A34A; background: rgba(22, 163, 74, .07); }
.pfl-wiz-delivery-card.delivery-both.is-selected   { border-color: #EA580C; background: rgba(234, 88, 12, .07); }
.pfl-wiz-delivery-card.delivery-online.is-selected { border-color: #7C3AED; background: rgba(124, 58, 237, .07); }

.pfl-wiz-areasection {
    display: contents;
}

.pfl-wiz-area-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.pfl-wiz-autosave {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(22, 163, 74, .10);
    border: 1px solid rgba(22, 163, 74, .25);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.4;
    color: #15803D;
    font-weight: 500;
}
.pfl-wiz-autosave .mud-icon-root {
    flex: 0 0 auto;
    color: var(--pfl-success);
}

@media (max-width: 600px) {
    .pfl-wiz-two {
        grid-template-columns: 1fr;
    }
}

/* ── MudBlazor input chrome, scoped to the wizard card ─────────────────────

   Scoped, never global: these selectors reach into MudBlazor internals and the
   rest of the site is not signed up to the onboarding token set. */

/* 8px radius / 1px border, 2px indigo on focus (PROF-47 §6). Each rule carries
   one class more than the MudBlazor rule it replaces, so it wins on specificity
   rather than on stylesheet order. */
.pfl-wiz-card .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--pfl-border);
}
.pfl-wiz-card .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover > .mud-input-outlined-border {
    border-color: var(--pfl-indigo-hover);
}
.pfl-wiz-card .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--pfl-indigo);
}
.pfl-wiz-card .mud-input-error > .mud-input-outlined-border {
    border-color: var(--pfl-error) !important;
}

/* 48px standard input height. Set on the flex row, not on the inner <input>:
   the outlined border is an absolutely positioned overlay at height:100%, so it
   follows the row and the notch stays aligned. */
.pfl-wiz-card .mud-input.mud-input-outlined {
    min-height: 48px;
}

/* 16px input value. Also the reason it is not 14px: iOS Safari zooms the
   viewport on focus for any input under 16px, and the wizard is a phone-first
   flow. */
.pfl-wiz-card .mud-input-root {
    font-size: 16px;
    color: var(--pfl-text);
}
.pfl-wiz-card .mud-input-root::placeholder {
    color: var(--pfl-disabled-text);
    opacity: 1; /* Firefox dims placeholders to .54 by default */
}

/* Field-label typography is deliberately NOT overridden. PROF-47 puts field
   labels at 14px/500, which is correct for a label rendered ABOVE its input —
   but MudBlazor's outlined variant floats the label into the border and cuts
   the notch from a <legend> pinned at .75rem. Changing the label's font-size
   moves the label without moving the notch, so the text ends up straddling the
   border. The theme already gives it the right colour. */
.pfl-wiz-card .mud-input-helper-text {
    font-size: 12px;
    line-height: 1.4;
}
.pfl-wiz-card .mud-input-helper-text.mud-input-error {
    color: var(--pfl-error) !important;
}

/* ── Step 8: membership plan ───────────────────────────────────────────── */

/* Billing cycle toggle. A pill on a slate trough, with the active option lifted
   out in white — PROF-49 §2.1. */
.pfl-wiz-cycle {
    min-width: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    display: flex;
    justify-content: center;
}

.pfl-wiz-cycle-pill {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--pfl-section);
}

.pfl-wiz-cycle-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 10px block padding on a 14px line puts the hit target just over 40px,
       which is what makes this usable with a thumb — it is two small words
       side by side and would otherwise be a 20px strip. */
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pfl-text-muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.pfl-wiz-cycle-opt.is-selected {
    background: var(--pfl-bg);
    color: var(--pfl-navy);
    box-shadow: var(--pfl-shadow-sm);
}

/* Same :has() trick as the choice cards: the label is the hit target and the
   radio inside it is invisible, so the ring has to be drawn on the label. */
.pfl-wiz-cycle-opt:has(.pfl-wiz-choice-input:focus-visible) {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 2px;
}
.pfl-wiz-cycle-opt:has(.pfl-wiz-choice-input:disabled) {
    opacity: .65;
    cursor: not-allowed;
}

/* Green, because it is a saving. Deliberately NOT the orange accent: the token
   reference reserves #F2A35B for ratings and numeric emphasis. */
.pfl-wiz-cycle-save {
    font-size: 12px;
    font-weight: 700;
    color: var(--pfl-success);
}

/* One column by default and up to three on desktop — see the responsive block.
   align-items:stretch so three cards with unequal feature lists still square
   off at the bottom. */
.pfl-wiz-plans {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 16px;
}

.pfl-wiz-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 16px 18px;
    /* Constant, like the choice cards': the tick badge is absolutely placed in
       this gutter, and reserving it only when selected would reflow the card
       the instant the professional picks one. */
    padding-inline-end: 44px;
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius-lg);
    background: var(--pfl-bg);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pfl-wiz-plan:hover {
    border-color: var(--pfl-indigo-hover);
    box-shadow: var(--pfl-shadow-sm);
}
.pfl-wiz-plan.is-selected {
    border-color: var(--pfl-indigo);
    box-shadow: inset 0 0 0 1px var(--pfl-indigo);
    background: var(--pfl-indigo-light);
}
.pfl-wiz-plan:has(.pfl-wiz-choice-input:focus-visible) {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 2px;
}
.pfl-wiz-plan:has(.pfl-wiz-choice-input:disabled) {
    opacity: .65;
    cursor: not-allowed;
}

.pfl-wiz-plan-badges {
    display: flex;
    min-height: 22px;
    margin-bottom: 2px;
}

.pfl-wiz-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    /* No text-transform. Greek loses its accents under uppercase, and
       palette.css carries a backstop for exactly this. */
}
.pfl-wiz-plan-badge .mud-icon-root {
    font-size: 13px;
}
.pfl-wiz-plan-badge-popular {
    background: var(--pfl-navy);
    color: var(--pfl-on-dark);
}
.pfl-wiz-plan-badge-free {
    background: var(--pfl-chip-verified-bg);
    color: var(--pfl-chip-verified-text);
}

.pfl-wiz-plan-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--pfl-navy);
}

.pfl-wiz-plan-tagline {
    font-size: 13px;
    color: var(--pfl-text-muted);
}

.pfl-wiz-plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 8px;
}

.pfl-wiz-plan-amount {
    font-size: 30px;
    font-weight: 700;
    color: var(--pfl-navy);
    /* Tabular figures so the three headline prices sit on the same optical
       baseline width and do not shuffle when the cycle toggle flips. */
    font-variant-numeric: tabular-nums;
}

.pfl-wiz-plan-per {
    font-size: 14px;
    color: var(--pfl-text-muted);
}

/* The annual total, on its own line under the per-month headline: it is the
   figure actually charged, and it must not be mistaken for the big number. */
.pfl-wiz-plan-yearly {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--pfl-text-muted);
}

.pfl-wiz-plan-trial {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pfl-success);
}

.pfl-wiz-plan-features {
    /* margin-top:auto pins the list to the bottom of the card, which is what
       keeps the three CTAs-worth of content aligned across unequal lists. */
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pfl-wiz-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: var(--pfl-text);
}

.pfl-wiz-plan-tick.mud-icon-root {
    flex: 0 0 auto;
    font-size: 15px;
    /* 1px of optical nudge: the tick's glyph box sits high against a 13px line. */
    margin-top: 1px;
    color: var(--pfl-success);
}

.pfl-wiz-plan-check {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pfl-indigo);
    color: var(--pfl-on-dark);
}
.pfl-wiz-plan-check .mud-icon-root {
    font-size: 15px;
}

/* The merit-only ranking note under the cards. */
.pfl-wiz-plan-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pfl-text-muted);
    text-align: center;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Tablet: category grid and choice cards go to 2 columns. */
@media (min-width: 640px) {
    .pfl-wiz-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pfl-wiz-choices-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop: 3-column category grid, and the wider page gutter. */
@media (min-width: 1024px) {
    .pfl-wiz-cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* Step 2's three trader-type cards go three-across on desktop (PROF-38 §4.4).
       Scoped away from the compact VAT cards on step 4, which stay two-up. */
    .pfl-wiz-choices:not(.pfl-wiz-choices-compact) .pfl-wiz-choices-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* Plans go to three across only here, never at the 640px tablet step: at
       two columns the third card wraps alone onto a second row, which reads as
       an afterthought rather than as the top of the range. One column until
       all three fit. */
    .pfl-wiz-plans {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 769px) {
    .pfl-setup-page:has(.pfl-wiz-card) {
        padding: 48px 24px; /* page padding, desktop */
    }
}

@media (max-width: 768px) {
    .pfl-wiz-title {
        font-size: 20px;
    }
    /* Slimmer bar on mobile (PROF-37 §10). */
    .pfl-wiz-progress-track {
        height: 4px;
    }
    /* A comfortable thumb target — this is the only control on most steps. */
    .pfl-wiz-cta.mud-button-root {
        min-height: 52px;
    }
    /* The footer bar stacks: helper above, full-width CTA below — a 190px button
       beside the helper does not fit a phone. */
    .pfl-wiz-footer-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .pfl-wiz-footer-bar .pfl-wiz-cta.mud-button-root {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    /* The dial-code selector and the number stack rather than share a row:
       side by side at this width the number field is too narrow to read back a
       full mobile number. */
    .pfl-wiz-phone-row {
        flex-direction: column;
        gap: 0;
    }
    .pfl-wiz-phone-code {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

/* ── Step 4: tax identity ────────────────────────────────────────────────── */

/* The stack of fields on step 4. Step 3 lays its own out with bare
   .pfl-wiz-field children and no wrapper, which works there because every field
   is full width; step 4 mixes fields with a fieldset, so the gap has to be
   owned by a container rather than by margins that would collapse against it. */
.pfl-wiz-fields {
    display: grid;
    gap: 20px;
}

/* Reassurance above the form. Deliberately quiet — it is there for the
   professional who hesitates before typing a tax number, not to shout. */
.pfl-wiz-secure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pfl-text-muted);
}

.pfl-wiz-secure-icon {
    flex: 0 0 auto;
    color: var(--pfl-success);
}

/* A fieldset's legend, styled to match the labels MudBlazor renders for the
   text fields above it so the VAT question does not read as a heading. */
.pfl-wiz-field-legend {
    padding: 0;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pfl-navy);
}

.pfl-wiz-field-help {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pfl-text-muted);
}

/* The VAT cards carry a one-line label and nothing else, so they do not need
   the generous padding the trader-type cards use for their description and
   document list. */
.pfl-wiz-choices-compact .pfl-wiz-choice {
    padding: 12px 44px 12px 16px;
    align-items: center;
}

/* The derived VAT number. Read-only by construction — there is no input here,
   because the number is computed from the tax number and never collected. */
.pfl-wiz-derived {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--pfl-indigo-light);
    border-radius: var(--pfl-radius);
}

.pfl-wiz-derived-label {
    font-size: 13px;
    color: var(--pfl-text-muted);
}

.pfl-wiz-derived-value {
    /* Tabular figures so the placeholder underscores and the real digits occupy
       the same width — without it the box visibly jumps as the number is typed. */
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pfl-navy);
}

/* ── Step 5: identity verification ───────────────────────────────────────── */

/* The result panels. One block for all four states, tinted by a modifier —
   they differ in colour and icon, never in layout, so a professional who fails
   and retries does not watch the page reflow around them. */
.pfl-wiz-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius);
}

.pfl-wiz-state-icon {
    width: 44px;
    height: 44px;
    font-size: 44px;
}

.pfl-wiz-state-ok {
    border-color: var(--pfl-success);
    background: var(--pfl-chip-verified-bg);
}

.pfl-wiz-state-ok .pfl-wiz-state-icon {
    color: var(--pfl-success);
}

.pfl-wiz-state-wait {
    background: var(--pfl-chip-pending-bg);
}

.pfl-wiz-state-wait .pfl-wiz-state-icon {
    color: var(--pfl-chip-pending-text);
}

.pfl-wiz-state-bad {
    border-color: var(--pfl-error);
    background: var(--pfl-chip-error-bg);
}

.pfl-wiz-state-bad .pfl-wiz-state-icon {
    color: var(--pfl-error);
}

.pfl-wiz-state-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--pfl-navy);
}

.pfl-wiz-state-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pfl-text);
}

.pfl-wiz-state-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pfl-text-muted);
}

.pfl-wiz-checklist {
    padding: 20px;
    background: var(--pfl-section);
    border-radius: var(--pfl-radius);
}

.pfl-wiz-checklist-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pfl-navy);
}

.pfl-wiz-checklist-items {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pfl-wiz-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--pfl-text);
}

.pfl-wiz-checklist-icon {
    flex: 0 0 auto;
    color: var(--pfl-indigo);
}

/* Sits directly under the launch button, quiet by design: it is an attribution,
   not a selling point. */
.pfl-wiz-powered {
    margin: 8px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--pfl-text-muted);
}

/* ── Step 6: category documents ──────────────────────────────────────────── */

.pfl-wiz-docs-progress {
    margin-bottom: 20px;
}

.pfl-wiz-docs-progress-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pfl-navy);
}

.pfl-wiz-docs-progress-bar {
    height: 6px;
    border-radius: 999px;
}

.pfl-wiz-docs {
    display: grid;
    gap: 16px;
}

.pfl-wiz-doc {
    padding: 16px;
    border: 1px solid var(--pfl-border);
    border-radius: var(--pfl-radius);
    /* The left edge carries the state so a rejected card is findable by colour
       on a long page without reading every heading. */
    border-inline-start-width: 4px;
}

.pfl-wiz-doc.is-required {
    border-inline-start-color: var(--pfl-indigo);
}

.pfl-wiz-doc.is-pending {
    border-inline-start-color: var(--pfl-chip-pending-text);
}

.pfl-wiz-doc.is-approved {
    border-inline-start-color: var(--pfl-success);
}

.pfl-wiz-doc.is-rejected {
    border-inline-start-color: var(--pfl-error);
}

.pfl-wiz-doc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pfl-wiz-doc-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--pfl-navy);
}

.pfl-wiz-doc-badge {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    color: var(--pfl-on-dark);
}

.pfl-wiz-doc-badge-required {
    background: var(--pfl-error);
}

.pfl-wiz-doc-badge-optional {
    background: var(--pfl-text-muted);
}

.pfl-wiz-doc-help,
.pfl-wiz-doc-why {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pfl-text-muted);
}

.pfl-wiz-doc-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
}

.pfl-wiz-doc-status-ok {
    color: var(--pfl-success);
}

.pfl-wiz-doc-status-wait {
    color: var(--pfl-chip-pending-text);
}

.pfl-wiz-doc-status-bad {
    color: var(--pfl-error);
}

/* The filename is evidence, not a heading — kept quiet next to the status and
   allowed to wrap, because uploaded names are frequently very long. */
.pfl-wiz-doc-file {
    font-weight: 400;
    color: var(--pfl-text-muted);
    overflow-wrap: anywhere;
}

/* The admin's own words. Shown verbatim: a rejection reason the professional
   cannot act on is a rejection they will simply earn again. */
.pfl-wiz-doc-reason {
    margin: 8px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pfl-chip-error-text);
    background: var(--pfl-chip-error-bg);
    border-radius: var(--pfl-radius);
}

.pfl-wiz-doc-upload {
    margin-top: 12px;
    /* PROF-195: brand indigo OUTLINE — this is a secondary "upload/replace"
       action, not the primary CTA. A file may already be uploaded and under
       review, so it must not compete with «Συνέχεια» (grey reads off-brand, a
       gradient reads too urgent for a replacement). */
    background: transparent !important;
    border: 1.5px solid #2E4057 !important;
    color: #2E4057 !important;
    font-weight: 500;
}

/* ── Step 7: profile ─────────────────────────────────────────────────────── */

.pfl-wiz-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pfl-wiz-photo-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pfl-section);
    border: 1px solid var(--pfl-border);
}

/* Dashed edge only while empty, so it reads as a drop target before a photo is
   there and as a finished avatar afterwards. */
.pfl-wiz-photo-avatar.is-empty {
    border-style: dashed;
    color: var(--pfl-text-muted);
}

.pfl-wiz-photo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pfl-wiz-bio-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-top: 6px;
}

.pfl-wiz-counter {
    flex: 0 0 auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--pfl-text-muted);
}

/* A warning, not a limit — the field still accepts input up to the max. */
.pfl-wiz-counter.is-warn {
    color: var(--pfl-error);
    font-weight: 600;
}

.pfl-wiz-areas {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.pfl-wiz-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--pfl-section);
    border-radius: var(--pfl-radius);
}

.pfl-wiz-area-body {
    display: flex;
    flex-direction: column;
}

.pfl-wiz-area-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pfl-navy);
}

.pfl-wiz-area-radius {
    font-size: 12px;
    color: var(--pfl-text-muted);
}

.pfl-wiz-area-add,
.pfl-wiz-price {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.pfl-wiz-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chip toggles, native checkbox hidden but kept in the tab order — same
   accessibility reasoning as the choice cards on steps 2 and 4. */
.pfl-wiz-lang {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
    border: 1px solid var(--pfl-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}

.pfl-wiz-lang.is-selected {
    border-color: var(--pfl-indigo);
    background: var(--pfl-indigo-light);
    color: var(--pfl-navy);
    font-weight: 600;
}

.pfl-wiz-lang-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── Step 9: review & submit ─────────────────────────────────────────────── */

.pfl-wiz-review {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* One card per step, left edge in brand indigo — the membership card overrides
   it to green so the new §0 card reads as distinct (PROF-45 §3 Card 8 note). */
.pfl-wiz-review-card {
    padding: 16px 18px;
    border: 1px solid var(--pfl-border);
    border-inline-start: 4px solid var(--pfl-indigo);
    border-radius: var(--pfl-radius);
    background: var(--pfl-bg);
}
.pfl-wiz-review-card-plan {
    border-inline-start-color: var(--pfl-success);
}

.pfl-wiz-review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pfl-wiz-review-badge {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--pfl-indigo-light);
    color: var(--pfl-indigo);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.pfl-wiz-review-title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--pfl-navy);
}
.pfl-wiz-review-change {
    flex: 0 0 auto;
    padding: 5px 14px;
    border: 1px solid var(--pfl-indigo);
    border-radius: 8px;
    color: var(--pfl-indigo);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none; /* PROF-47 §4: links carry no underline */
    white-space: nowrap;
}
.pfl-wiz-review-change:hover {
    background: var(--pfl-indigo-light);
}

.pfl-wiz-review-rows {
    display: flex;
    flex-direction: column;
}
.pfl-wiz-review-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--pfl-section);
}
.pfl-wiz-review-row:last-child {
    border-bottom: 0;
}
.pfl-wiz-review-k {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--pfl-text-muted);
}
.pfl-wiz-review-v {
    text-align: end;
    font-size: 13px;
    font-weight: 600;
    color: var(--pfl-text);
    overflow-wrap: anywhere;
}
.pfl-wiz-review-ok {
    color: var(--pfl-success);
}

/* The three terms/consent checkboxes, above the shell's submit bar. */
.pfl-wiz-tc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--pfl-border);
}
.pfl-wiz-tc-box .mud-typography {
    font-size: 13px;
    line-height: 1.5;
    color: var(--pfl-text);
}

/* ── PROF-41: Learn-more links, modals, info tooltips ─────────────────────── */

/* The "Μάθετε περισσότερα" trigger (MkLearnMore). A borderless link-button so it
   reads as secondary to the card it sits inside; underline only on hover. */
.pfl-wiz-learn-more {
    align-self: flex-start;
    margin-top: 8px;
    padding: 2px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--pfl-indigo);
    cursor: pointer;
    text-decoration: none;
}
.pfl-wiz-learn-more:hover {
    color: var(--pfl-indigo-hover);
    text-decoration: underline;
}
.pfl-wiz-learn-more:focus-visible {
    outline: 2px solid var(--pfl-indigo);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The modal body (MkLearnMoreDialog). Title styled for the MudDialog header,
   paragraphs on the body scale (PROF-41 §2 modal spec).

   UXPatterns Table 1 (19/07): the modal HEADER is navy with white title text
   and a white X. Scoped with :has() so only the learn-more dialog is
   restyled — every other MudDialog on the site keeps its default header. On
   a browser without :has() this degrades to the old white header with a
   navy title, which is readable, just off-brand. */
.mud-dialog:has(.pfl-wiz-modal-title) .mud-dialog-title {
    background: var(--pfl-navy);
    border-radius: 12px 12px 0 0;
}

.mud-dialog:has(.pfl-wiz-modal-title) .mud-dialog-title .mud-icon-button {
    color: #FFFFFF;
}

.pfl-wiz-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
}

/* The white-title fallback would be invisible on the default white header
   when :has() is unsupported — repaint it navy only in that case. */
@supports not selector(:has(*)) {
    .pfl-wiz-modal-title {
        color: var(--pfl-navy);
    }
}

/* PROF-193: the onboarding upload modals (step-6 document modal + step-7 photo
   modal) rendered in a different typeface from the rest of the page. Make the
   dialog inherit the page font and give the title/content consistent sizing.
   Scoped to onboarding.css so it only affects the wizard's dialogs. */
.mud-dialog { font-family: inherit; }
.mud-dialog .mud-dialog-title { font-family: inherit; font-weight: 600; font-size: 18px; color: #2E4057; }
.mud-dialog .mud-dialog-content { font-family: inherit; font-size: 14px; }

/* PROF-193: the primary CTA buttons inside the upload modals — «Επιλέξτε αρχείο»
   and the «Ανέβασμα Εγγράφου» footer action — use the brand gradient (like every
   other primary button), and read clearly GREY when disabled (no file selected)
   instead of looking like plain inactive text. «Άκυρο» stays plain text. */
.pfl-dialog-cta {
    background: var(--pfl-grad-cta) !important;
    color: #FFFFFF !important;
    border-radius: 8px;
    font-weight: 500;
}
.pfl-dialog-cta:disabled,
.pfl-dialog-cta.mud-button-disabled,
.pfl-dialog-cta.mud-button-root:disabled {
    background: #BDC3C7 !important;
    color: #FFFFFF !important;
    cursor: not-allowed;
}
.pfl-wiz-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pfl-wiz-modal-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pfl-text);
}

/* The (i) tooltip trigger (MkInfoTooltip). */
.pfl-wiz-info-icon {
    display: inline-flex;
    align-items: center;
    color: var(--pfl-text-muted);
    cursor: help;
    vertical-align: middle;
}
.pfl-wiz-info-icon:hover {
    color: var(--pfl-indigo);
}

/* Every transition above is decoration. Honour the OS setting rather than
   animating a wizard for somebody who asked us not to. */
@media (prefers-reduced-motion: reduce) {
    .pfl-wiz-progress-fill,
    .pfl-wiz-cat,
    .pfl-wiz-cat-caret,
    .pfl-wiz-choice,
    .pfl-wiz-plan,
    .pfl-wiz-cycle-opt,
    .pfl-wiz-back {
        transition: none;
    }
}

/* ── Portfolio photos (PROF-192) ───────────────────────────────────────────
   The "Φωτογραφίες εργασιών" uploader, shared by onboarding step 7 and the
   profile tab. Every tile carries its moderation badge, because a photo that
   is uploaded but not yet approved is NOT on the public profile and the pro
   must be able to see that at a glance. */
.pfl-portfolio {
    margin: 4px 0 18px;
}
.pfl-portfolio-sub {
    margin: 2px 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pfl-text-muted);
}
.pfl-portfolio-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #DCE3F7;
    border-radius: 8px;
    background: #F4F7FF;
    font-size: 13px;
    line-height: 1.5;
    color: #2B2E7C;
}
.pfl-portfolio-uploadbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.pfl-portfolio-counter {
    font-size: 13px;
    font-weight: 600;
    color: var(--pfl-text-muted);
}
.pfl-portfolio-counter.is-full {
    color: var(--mud-palette-error);
}
.pfl-portfolio-empty {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--pfl-text-muted);
}
.pfl-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.pfl-portfolio-tile {
    position: relative;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #F1F3F9;
    border: 1px solid #E3E7F2;
}
.pfl-portfolio-tile img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
}
.pfl-portfolio-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    color: #FFFFFF;
}
.pfl-portfolio-badge.is-pending {
    background: #D97706;
}
.pfl-portfolio-badge.is-approved {
    background: #16A34A;
}
.pfl-portfolio-badge.is-rejected {
    background: #DC2626;
}
.pfl-portfolio-del {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #DC2626;
    cursor: pointer;
}
.pfl-portfolio-del:hover {
    background: #FFFFFF;
}
.pfl-portfolio-reason {
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.45;
    color: #B91C1C;
    background: #FEF2F2;
}
.pfl-portfolio-move {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 0;
    background: #FFFFFF;
}
.pfl-portfolio-move button {
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid #E3E7F2;
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--pfl-indigo);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.pfl-portfolio-move button:disabled {
    color: #C7CBD8;
    cursor: default;
}

/* PROF-204: the shared language section inside the wizard. The chips themselves
   reuse the profile page's .pfl-acct-chip* rules (global.css) so both pages
   render identically; only the wizard spacing is set here. */
.pfl-lang-section { margin: 4px 0 6px; }
.pfl-lang-section .pfl-acct-chips { margin-bottom: 10px; }
.pfl-lang-section .pfl-acct-empty { margin-bottom: 10px; }
.pfl-lang-add { margin-top: 2px; }