/* ============================================================
   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;
}

/* PROF-464: the logo ramp for steps 1-8, the same one the public profile
   header wears.

   The fill is full width and REVEALED by a clip-path, rather than being a
   short element carrying the gradient. That distinction is the whole point: a
   gradient painted on a width-driven fill would squeeze all four stops —
   navy through gold — into an 11% sliver at step 1, so every step would end
   in golden peach and the ramp would mean nothing. Anchored to the track, the
   colour at any point is fixed and progress uncovers more of it.

   The clip inset still 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%;
    width: 100%;
    border-radius: inherit;
    background: var(--pfl-grad-logo);
    transition: clip-path .3s ease, background .3s ease;
}

/* Step 9 wears the ramp too. It used to turn success-green at 100%, which
   swapped the logo for a colour the brand does not use precisely at the moment
   the bar is finally showing the whole ramp — the gold stop was never seen.
   PROF-464: «lets apply this for step 9 as well». No done-state rule remains;
   at 100% the clip resolves to inset(0 0 0 0) and the full ramp is revealed. */

/* ── 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);
}

/* PROF-336 AC3 — a specialisation the professional already offers, shown in the
   profile's add-service dialog. Ticked and not unticked here; the x on the chip
   out on the profile is how one is dropped.

   Deliberately NOT greyed to MudBlazor's disabled colour: these are the services
   they actually sell, and washing them out reads as "unavailable" next to the
   ones they can still tick. Full-strength label, and only the control itself
   carries the not-allowed cursor to say it will not respond. */
.pfl-wiz-sub.is-locked .mud-typography {
    color: var(--pfl-text);
    font-weight: 600;
}

.pfl-wiz-sub.is-locked .mud-checkbox,
.pfl-wiz-sub.is-locked .mud-icon-button {
    cursor: not-allowed;
    opacity: 1;
}

/* "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;
}

/* PROF-306 removed the rule that pinned "Μάθετε περισσότερα" to the bottom of
   the three trader-type cards, along with the button itself. It was a flex
   spacer whose only job was to keep three buttons level; with no button to
   level, it would have left the slack behind as empty space at the foot of the
   shorter cards. The cards now size to their content, and the row still evens
   them out through the grid's own stretch. The button remains in steps 4 and 5,
   where it was never pinned. */

.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;
    /* PROF-359: label ABOVE the input at every width — her instruction, and
       the layout the sub-760px breakpoint already used. The icon anchors the
       first line, the label rides beside it, and the input drops full-width
       beneath both. The old desktop variant (icon | label | input on one
       line) is gone; one layout, no breakpoint drift. */
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    row-gap: 6px;
    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);
    grid-row: 1;
    grid-column: 1;
}

.pfl-wiz-flabel {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pfl-navy);
    grid-row: 1;
    grid-column: 2;
}

/* PROF-359: the input always sits on its own full-width line under the
   label — the placement the mobile breakpoint used, now universal. */
.pfl-wiz-finput {
    grid-row: 2;
    grid-column: 1 / -1;
}
.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) {
    /* PROF-359 made the stacked placement universal; only the compact
       sizes remain phone-specific. */
    .pfl-wiz-frow {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        padding: 14px 16px;
    }
    .pfl-wiz-ficon {
        width: 40px;
        height: 40px;
    }
}

/* ── 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;
}

/* PROF-313: was .pfl-wiz-two, a 1fr 1fr grid. Renamed rather than edited in
   place because the name would otherwise say the opposite of what the rule
   does; step 7 was its only user. Each field takes a full row, and the 24px
   gap replaces the label's own top margin (killed below), so the spacing
   between the two fields is one number instead of two that add up. */
.pfl-wiz-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.pfl-wiz-stack .pfl-wiz-seclabel {
    margin-top: 0;
}
/* The help line sits between the label and the € row, so the row needs its
   own breathing space — the label's margin-bottom no longer reaches it. */
.pfl-wiz-stack .pfl-wiz-price {
    margin-top: 10px;
}

/* PROF-369 (08/08 follow-up) — the PROF-315 divider between the studio block
   and the coverage block is gone, line and band both. What keeps the radius
   heading close to the address above it is now this: two areasections are
   adjacent ONLY when «Και τα δύο» draws both, the same condition the <hr> used
   to test. .pfl-wiz-areasection is display:contents, so it draws no box of its
   own — but it is still an element, which is what lets the sibling combinator
   reach through it to the heading inside. The other three modes draw a single
   block and keep .pfl-wiz-seclabel's own 22px. */
.pfl-wiz-areasection + .pfl-wiz-areasection .pfl-wiz-seclabel {
    margin-top: 12px;
}

/* 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;
}

/* PROF-491: this was a green bordered box, which read as «done» on a step
   where nothing has been submitted yet. Green is reserved for real success
   messages now; a statement of how saving works is a plain caption.

   The -16px bottom margin is deliberate and not stray. The note sits in
   .pfl-wiz-body (a 16px-gap flex column) while the Υποβολή button lives in
   .pfl-wiz-footer, whose 24px margin-top is shared by all nine steps and must
   not be edited for one of them. -16 + 24 leaves the 8px the ticket asks for. */
.pfl-wiz-autosave {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 24px 0 -16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pfl-text-muted);
}
.pfl-wiz-autosave .mud-icon-root {
    flex: 0 0 auto;
    color: inherit;
    font-size: 16px;
}

/* PROF-313 note: the 600px rule that collapsed .pfl-wiz-two to one column is
   gone with the class — a flex column is already one column at every width. */

/* ── 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);
}
/* PROF-269: hover is #94A3B8 and focus is 1px, matching the sitewide standard
   now in palette.css. Both values came from PROF-47 §6, which predates the
   sitewide input README (02/08) and only ever governed this card. Left as they
   were, the wizard would be the one flow that still disagreed — which is the
   complaint the newer ticket opens with. */
.pfl-wiz-card .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover > .mud-input-outlined-border {
    border-color: #94A3B8;
}
.pfl-wiz-card .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-width: 1px;
    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;
    /* PROF-305: room above for the "Δημοφιλέστερο" pill, which hangs 13px over
       the top edge. On EVERY card, not just the popular one — reserving it on
       one would push the other two out of alignment, which is the opposite of
       what this ticket asks for. Same approach the dashboard cards use. */
    margin-top: 14px;
    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;
}
/* PROF-305 — "Δημοφιλέστερο", lifted onto the card's top edge and centred.
   Absolute, so the badge row below keeps its own height and the free-month
   badges on all three cards stay on one line.

   Amber on white, not the navy pill this used to be: the dashboard's popular
   badge is amber, and the README's rule for both pages is that this element
   looks the same on each. Same brand orange (#E67E22) as .pfl-plan-popular.

   .pfl-wiz-plan is already position:relative, and every card carries the top
   margin below so the three stay aligned while one of them has a pill hanging
   over its edge. */
/* PROF-494: navy pill, matching the landing page and the dashboard — this was
   the last of the three «Πιο δημοφιλές» badges still amber and box-shaped.
   Orange is reserved for the annual-savings pill (PROF-409's rule). */
.pfl-wiz-plan-popular {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: #0F1F4B;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.pfl-wiz-plan-popular .mud-icon-root {
    font-size: 13px;
}
.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);
}

/* PROF-644 removed .pfl-wiz-plan-tagline. It had exactly one call site, this
   wizard's plan card, so the rule went with it rather than lingering as CSS
   nothing can reach. (global.css's .pfl-plan-tagline outlived it by a few
   hours — PROF-648 retired that one too when /professionals lost its subtitle.) */

.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);
}

/* PROF-310 — "Εξοικονομείτε €X/χρόνο" under the annual price. Green and semi-
   bold, so the one line on the card that is good news does not read like the
   muted note above it. Own row, like the annual total it follows.

   The struck-through old price above the headline reuses .pfl-plan-oldprice
   straight from dashboard.css, which _Layout links site-wide — same rule, not a
   copy of it, so the two pages cannot drift apart on the thing this ticket is
   about. */
.pfl-wiz-plan-saving {
    flex-basis: 100%;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pfl-success, #15803D);
}

/* PROF-305 removed .pfl-wiz-plan-trial along with the "Πρώτος μήνας δωρεάν"
   line it styled — every card now states the free month in the badge instead. */

.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). */
    /* Brand indigo per the Brand Code Reference (01/08) §2.2 — the secondary
       button is #2B2E7C on white. Was #2E4057, which AC-BTN01 bans outright. */
    background: transparent !important;
    border: 1.5px solid #2B2E7C !important;
    color: #2B2E7C !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,
/* PROF-468: the pair itself (widths, nowrap) lives in the shared
   .pfl-price-pair rule — this keeps only what is step-7-specific. */
.pfl-wiz-price {
    display: flex;
    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);
}

/* PROF-343 §4 — a section whose data stopped adding up after a category change.
   Amber rather than red, and the distinction is the point: nothing is broken and
   nothing was lost, there is simply something left to do before submitting. Red
   is kept for a section that was never filled in at all.

   The whole card is tinted, not just the message, because the reader arrives at
   this page scrolling and needs to find the section before reading the reason. */
.pfl-wiz-review-card--warn {
    border-color: #F0C36D;
    border-inline-start-color: #EA8C00;
    background: #FFFBF3;
}

.pfl-wiz-review-alert {
    margin-top: 12px;
}

/* PROF-482 — the resubmission notice. Lavender, not amber: amber on the review
   page means "you cannot submit", and a sent-back document never blocks the
   submission — the redo lives on Τα Έγγραφά μου after the wizard. */
.pfl-wiz-review-resubmit {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #F5F2FC;
    border: 1px solid #DCD2F0;
    color: #3F3577;
    font-size: 13.5px;
    line-height: 1.5;
}

.pfl-wiz-review-resubmit a {
    display: inline-block;
    margin-inline-start: 6px;
    color: #2B2E7C;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.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.
   PROF-308 added the chevron, so it lays its two children out in a row. */
.pfl-wiz-learn-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    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;
}

/* PROF-308 — the panel the trigger reveals, in place of the modal it used to
   open. Indented behind a left rule and tinted, so an open one reads as an
   aside belonging to the field above rather than as more form. */
.pfl-wiz-learn-chevron {
    display: inline-flex;
    transition: transform 0.15s ease;
}
.pfl-wiz-learn-chevron.is-open {
    transform: rotate(180deg);
}

.pfl-wiz-learn-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 14px;
    border-left: 2px solid var(--pfl-indigo);
    border-radius: 0 8px 8px 0;
    background: var(--pfl-indigo-light, #EEF2FF);
}

.pfl-wiz-learn-paneltitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--pfl-navy);
}

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

/* PROF-308 removed the learn-more modal (MkLearnMoreDialog) and with it the
   navy-header rules that dressed it, the :has() fallback for browsers without
   that selector, and .pfl-wiz-modal-body. Nothing else on the site used them —
   the other onboarding dialogs keep MudBlazor's default header. */

/* 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: #0F1F4B; }
.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;
}
/* PROF-219 §2.1 — was #BDC3C7 with WHITE text, which is the exact combination
   global.css already documents as wrong: white on mid-grey reads as broken
   rather than unavailable. It was also the last disabled button on the site
   that did not match .pfl-btn-brand:disabled, so the same state looked one way
   in a dialog and another everywhere else. Tokens now, not literals. */
.pfl-dialog-cta:disabled,
.pfl-dialog-cta.mud-button-disabled,
.pfl-dialog-cta.mud-button-root:disabled {
    background: var(--pfl-disabled-bg) !important;
    color: var(--pfl-disabled-text) !important;
    cursor: not-allowed;
}
/* 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; }

/* ── Add-service dialog (PROF-336) ─────────────────────────────────────────

   The picker inside MkServiceCategoriesDialog, where the card count is the
   professional's own categories rather than all 28. A lone card in the shared
   3-column grid sits in the left third with two empty columns next to it, which
   is what "it looks as if something is missing" was describing.

   auto-fit with a capped track instead of a fixed column count: one card takes
   one 340px track and the row centres it, two centre as a pair, and anything
   from three up fills the row exactly as before. So the rule fixes the sparse
   case without touching the full one.

   Scoped to .pfl-svcdlg. Onboarding step 1 uses the same picker and must keep
   the full-width grid — it has 28 cards and nothing to centre. Placed after
   the responsive block above so it wins on the widths those media queries set. */
.pfl-svcdlg .pfl-wiz-cats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 340px));
    justify-content: center;
}

/* PROF-360 — «Και τα δύο»: the radius select loses its own label there, because
   the section heading directly above already reads «Ακτίνα εξυπηρέτησης». An
   outlined MudSelect reserves vertical room for a floating label whether or not
   it has one, which is the extra gap she reported under the heading. */
.pfl-wiz-area-add--titled {
    margin-top: 0;
}

/* PROF-339 (β) — the mobile professional's base: a fact with a change action,
   where the editable chip list used to be. The change button is quiet — the
   base rarely changes, and a loud button would compete with the radius that
   IS the frequent edit. */
.pfl-wiz-baseline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0F1F4B;
}

.pfl-wiz-base-change {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #2B2E7C;
    text-decoration: underline;
    cursor: pointer;
}

.pfl-wiz-base-change:disabled {
    color: #94A3B8;
    cursor: not-allowed;
}

/* The universal radius heading needs its own breathing room now that a base
   line (or the picker) can sit directly above it. */
.pfl-wiz-seclabel--radius {
    display: block;
    margin-top: 4px;
}

.pfl-wiz-radius-basis {
    margin-top: 6px;
}

/* PROF-372 — the "everything in X" line on a step-8 plan card. A section
   header, not a benefit: muted, italic, no tick — matching what
   .pfl-plan-inherited already does on the other card screens. Overrides the
   flex li layout above so the line sits flush like a sentence. */
.pfl-wiz-plan-features li.pfl-wiz-plan-inherited {
    display: block;
    font-style: italic;
    font-size: 0.75rem;
    color: #64748B;
}

/* PROF-387 — the step-8 Pro card's "Coming soon" line: the reason the radio
   is disabled, said on the card (a mute disabled control reads as broken). */
.pfl-wiz-plan-soon {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #64748B;
}

/* PROF-562 §7 — the resubmission list under its own sentence: names on their
   own lines read as a checklist, which is what they are. */
.pfl-wiz-review-resubmitlist {
    margin: 6px 0 8px;
    padding-inline-start: 20px;
}

.pfl-wiz-review-resubmitlist li { margin: 2px 0; }