:root {
    --title-mkstyle:"normal";
    --subtitle-mkstyle:"normal";
    --paragraph-mkstyle:"normal";
    --description-mkstyle:"normal";
    --button-mkstyle:"normal";
}

.cover-screen {
    min-height: 100vh !important; /* full viewport height */
}

.m-footer {
    margin-top: auto;
}

/* ═══════════ Global header (ref: README_Header_Implementation_16072026) ═══════════ */
.pfl-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}

.pfl-header-inner {
    height: 64px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pfl-header-logo { display: inline-flex; align-items: center; }
.pfl-header-logo img { height: 36px; width: auto; display: block; }

.pfl-header-burger {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #0F1F4B;
    border-radius: 8px;
}

.pfl-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Language selector — ghost style: globe · EN / EL · chevron (spec §4) */
.pfl-header-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0F1F4B;
    padding: 8px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.pfl-header-lang:hover { color: #2B2E7C; }
.pfl-header-lang-codes .is-current { font-weight: 700; }
.pfl-header-lang-sep { margin: 0 4px; color: #94A3B8; }

/* Header buttons — Login outline, Sign Up primary gradient (spec §4) */
.pfl-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.pfl-header-btn--outline {
    background: #FFFFFF;
    border: 1px solid #2B2E7C;
    color: #2B2E7C;
}
.pfl-header-btn--outline:hover { background: #F5F7FB; color: #2B2E7C; }
.pfl-header-btn--primary {
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    border: none;
    color: #FFFFFF;
}
.pfl-header-btn--primary:hover {
    background: linear-gradient(90deg, #1A2D63, #3840A0);
    color: #FFFFFF;
}

.pfl-header-account { display: flex; align-items: center; gap: 8px; }
.pfl-header-username { font-weight: 700; color: #0F1F4B; font-size: 0.9rem; }
.pfl-header-user {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #0F1F4B;
    border-radius: 8px;
}

/* Visible focus indicators (WCAG AA, spec §7) */
.pfl-header a:focus-visible,
.pfl-header button:focus-visible {
    outline: 2px solid #2B2E7C;
    outline-offset: 2px;
}

/* Mobile header: hamburger | centered logo | user icon (spec §2) */
@media (max-width: 1023px) {
    .pfl-header-inner { height: 56px; padding: 0 12px; position: relative; }
    .pfl-header-burger { display: inline-flex; }
    .pfl-header-logo { position: absolute; left: 50%; transform: translateX(-50%); }
    .pfl-header-logo img { height: 32px; }
    .pfl-header-actions { display: none; }
    .pfl-header-account { margin-left: auto; }
    .pfl-header-username { display: none; }
    .pfl-header-user { display: inline-flex; }
}

/* Language block inside the mobile drawer (spec: language moves in-menu) */
.pfl-drawer-lang {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pfl-drawer-lang-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #64748B;
    margin-bottom: 4px;
}
.pfl-drawer-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    color: #0F1F4B;
    padding: 10px 8px;
    border-radius: 8px;
    min-height: 44px;
    text-align: left;
}
.pfl-drawer-lang-item:hover { background: #F5F7FB; }
.pfl-drawer-lang-item.is-current { font-weight: 700; }
.pfl-drawer-lang-item .mud-icon-root { margin-left: auto; color: #2B2E7C; }

/* Drawer nav link text in primary color */
.pfl-drawer-nav .mud-nav-link .mud-nav-link-text {
    color: var(--mud-palette-primary);
}

/* Admin sidebar active item. PROF-246 turned the drawer white, so the old
   bright-white rule — written for the dark drawer it no longer has — would
   read white on white. Inverted to the treatment the professional dashboard
   already uses for its active nav item (dashboard.css .pfl-dash-navlink). */
.admin-nav .mud-nav-link.active,
.admin-nav .mud-nav-link.active .mud-nav-link-text,
.admin-nav .mud-nav-link.active .mud-nav-link-icon,
.admin-nav .mud-nav-link.active .mud-icon-root {
    background: #EEF2FF;
    color: #2B2E7C !important;
    font-weight: 600;
}

/* ─── Footer v3 (ref: Footer_README_17072026) ───────────────────────── */
.pfl-footer {
    background: #0F1F4B;   /* Brand Navy */
    padding: 64px 0 0;
    width: 100%;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}

/* Matches .pfl-header-inner exactly (1440 / 32px, above). It used to be
   1280 / 40px, which put the footer wordmark 80px inside the header logo on a
   wide screen — the misalignment reported in PROF-238. The same class also
   wraps the copyright row, so that moves with it. */
.pfl-footer-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
}

.pfl-footer-columns {
    display: grid;
    /* logo · Clients · Professionals · Company · Legal · Support.
       The five link columns share the remaining width equally; Support used to
       be pinned at 220px, which made its gap read wider than the other four
       (PROF-238 "random space"). */
    grid-template-columns: 200px repeat(5, 1fr);
    gap: 40px;
    padding-bottom: 48px;
}

.pfl-footer-col { min-width: 0; }

/* Column 1 — wordmark. No SVG logo asset exists, so the dark-background
   gradient wordmark is rendered as gradient text (crisp at every size),
   using the per-letter ramp from the brand code sheet (purple → gold). */
.pfl-footer-wordmark {
    display: inline-block;
    max-width: 160px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-decoration: none;
    background: linear-gradient(90deg, #6A3797 0%, #C85C78 40%, #E89C5A 62%, #F2A35B 80%, #F5AF5D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Column headings — plain headings on desktop, accordion buttons ≤1024px */
.pfl-footer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    text-align: left;
    cursor: default;
}

/* Desktop shows the static heading; the accordion button exists only ≤1024px
   so screen readers never hear a "collapsed" button for visible content. */
.pfl-footer-heading-wrap { display: none; margin: 0; }

.pfl-footer-chevron {
    display: none;
    color: #E5E7EB;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

/* Nav links */
.pfl-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pfl-footer-links li { margin-bottom: 12px; }

.pfl-footer-links a {
    color: #E5E7EB;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.15s ease;
}

.pfl-footer-links a:hover { color: #FFFFFF; }

/* Support column — email + social icons only */
.pfl-footer-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #E5E7EB;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s ease;
}

.pfl-footer-email svg { flex: 0 0 auto; }
.pfl-footer-email:hover { color: #FFFFFF; }

.pfl-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #E5E7EB;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.20);
    transform: translateY(-2px);
    color: #E5E7EB;
}

.social-icon svg {
    width: 18px;
    height: 18px;
}

/* Bottom bar — copyright + EN | GR switcher */
.pfl-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pfl-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 24px;
    padding-bottom: 24px;
}

.pfl-footer-copy {
    color: #9CA3AF;
    font-size: 13px;
    font-weight: 400;
}

/* Visible keyboard focus on the dark background */
.pfl-footer a:focus-visible,
.pfl-footer button:focus-visible {
    outline: 2px solid #F2A35B;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Mobile (≤1024px): stacked accordion columns, Support always expanded,
   logo stays left-aligned, copyright centred. */
@media (max-width: 1024px) {
    .pfl-footer { padding-top: 40px; }
    .pfl-footer-container { padding: 0 24px; }
    .pfl-footer-columns {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 32px;
    }
    .pfl-footer-brandcol { margin-bottom: 24px; }
    .pfl-footer-navcol { border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .pfl-footer-heading--desktop { display: none; }
    .pfl-footer-heading-wrap { display: block; }
    .pfl-footer-navcol .pfl-footer-heading--mobile {
        margin: 0;
        padding: 16px 0;
        cursor: pointer;
    }
    .pfl-footer-navcol .pfl-footer-chevron { display: block; }
    .pfl-footer-navcol.is-open .pfl-footer-chevron { transform: rotate(180deg); }
    .pfl-footer-navcol .pfl-footer-links { display: none; padding-bottom: 16px; }
    .pfl-footer-navcol.is-open .pfl-footer-links { display: block; }
    .pfl-footer-supportcol {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 20px;
    }
    .pfl-footer-bottom-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}



/* .app-bar-forced — the navy gradient of the admin MudAppBar — is gone with
   the app bar itself (PROF-246). It had exactly one consumer. */

.m-full-height {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.m-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 90vh;
}

.image-container {
    overflow: hidden;
    position: relative;
    border: 2px solid black;
    /* The crop is driven by pointer events, so the browser must not claim the
       gesture first — without this a drag on a phone scrolls the page instead
       of moving the picture. */
    touch-action: none;
}

.image-container img {
    max-width: none; /* Allow scaling */
    max-height: none; /* Allow scaling */
    position: absolute; /* Required for dragging */
    cursor: grab;
}

.image-container img:active {
    cursor: grabbing;
}

/* General menu styling */
.context-menu {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.context-menu ul {
    list-style: none;
    padding: 5px;
    margin: 0;
}

.context-menu li {
    padding: 5px 10px;
    cursor: pointer;
}

.context-menu li:hover {
    background: #f0f0f0;
}

/* Styling the elements */
.box {
    width: 200px;
    height: 100px;
    margin: 20px;
    display: inline-block;
    text-align: center;
    line-height: 100px;
    background: lightgray;
    border: 1px solid #333;
}

.top-bar.dark-mode {
    background-color: #211919; /* Dark mode background */
    color: #ffffff; /* Light text for contrast */
}

.tooltip-container {
    position: relative;
    display: inline-block;
    width: 100%; /* Ensure the container takes up the full width */
}

.input-wrapper {
    display: flex;
    align-items: center; /* Vertically center the label and input */
    width: 100%; /* Allow the input to take up the full width */
    position: relative;
}

.info-icon {
    cursor: pointer;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    border: none;
}

.tooltip-text {
    position: absolute;
    bottom: 35px; /* Adjust the position if needed */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px;
    border-radius: 5px;
    font-size: 14px;
    white-space: normal; /* Allow text to wrap */
    display: block; /* Hidden by default */
    max-width: 50%; /* Tooltip will take up 50% of the input width */
    word-wrap: break-word; /* Ensure long words break and wrap within the tooltip */
}

.input-wrapper .info-icon {
    position: absolute;
    top: -10px; /* Adjust the vertical position */
    right: calc(5% + 10px);
    margin-left: 0;
}

.color-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

.b-right{
    border-right: 1px dashed black;
}

.font-box{
    margin-bottom: 20px;
    margin-top:20px;
    border: 1px solid black;
    border-radius:10px;
    min-height: 40px;
    text-align: center;
    vertical-align: central;
    padding:10px;
    height: auto;
}

.rb-corner-round{
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.mk-footer {
    width: 100%;
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    padding: 16px 0;
}

.mk-title {
    color: var(--mud-palette-appbar-text);
    font-style: var(--title-mkstyle);
}

.mk-subtitle{
    font-style: var(--subtitle-mkstyle);
}

.mk-paragraph {
    font-style: var(--subtitle-mkstyle);
}

.mk-description {
    font-style: var(--subtitle-mkstyle);
}

.mk-button-style {
    font-style: var(--subtitle-mkstyle);
}

.mk-autocomplete-list {
    max-height: 200px !important; /* Ensures dropdown doesn't get too big */
    overflow-y: scroll;
}

.mk-dropdown-content {
    display: block;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 9999;
    max-height:200px;
    overflow:scroll;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2B2E7C;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

.profile-crop .cropper-crop-box,
.profile-crop .cropper-view-box {
    border-radius: 50%;
}

.cropper-crop-box-circle .cropper-face {
    border-radius: 50%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ── Chat page ───────────────────────────────────────────────────────────── */

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ── Chat custom tab strip (replaces MudTabs) ────────────────────── */

.chat-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

/* PROF-120 AC-04: six filter tabs — wrap into two rows of three inside the
   ~280px sidebar rather than shrinking each to an unreadable sliver. */
.chat-tab-btn {
    flex: 1 1 30%;
    min-width: 72px;
    padding: 6px 4px;
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.chat-tab-btn:hover {
    background: var(--mud-palette-action-default-hover);
}

.chat-tab-btn.active {
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    color: #FFFFFF;
    border-color: transparent;
}

.chat-tab-btn .chat-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.chat-tab-btn.active .chat-tab-badge {
    background: var(--mud-palette-primary-text);
    color: var(--mud-palette-primary);
}

/* PROF-120 §5.6: quick-reply chips above the composer. */
.chat-quick-replies {
    display: flex;
    gap: 6px;
    padding: 8px 18px 0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.chat-qr {
    font-size: 11px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-divider, #E2E8F0);
    border-radius: 14px;
    padding: 5px 12px;
    color: var(--mud-palette-text-secondary, #64748B);
    cursor: pointer;
    font-family: inherit;
}

.chat-qr:hover { border-color: #2B2E7C; color: #2B2E7C; }

/* ── PROF-120 §3 / AC-15: notification strip ─────────────────────────────── */
.chat-notif-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    color: #FFFFFF;
}

.chat-notif-strip .chat-notif-label {
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
    margin-right: 2px;
}

.chat-notif-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s;
}
.chat-notif-chip:hover { filter: brightness(1.08); }
.chat-notif-chip .chat-notif-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 10px;
    background: rgba(0, 0, 0, .22);
}
.chat-notif-chip.amber  { background: #F59E0B; color: #3A2A00; }
.chat-notif-chip.red    { background: #DC2626; color: #FFFFFF; }
.chat-notif-chip.muted  { background: rgba(255, 255, 255, .18); color: #FFFFFF; }

.chat-notif-dismiss {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #FFFFFF;
    opacity: .8;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
}
.chat-notif-dismiss:hover { opacity: 1; }

/* ── PROF-120 AC-01/02/16: collapsible conversation sidebar ──────────────── */
.chat-sidebar-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}
.chat-sidebar-header .chat-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-sidebar-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 6px;
    color: var(--mud-palette-text-secondary);
}
.chat-sidebar-toggle:hover { background: var(--mud-palette-action-default-hover); }

/* ── PROF-120 §6: right task panel (Job | Request tabs) ────────────────────── */
.chat-task-panel {
    flex: 0 0 300px;
    max-width: 300px;
    height: 100%;
    border-left: 1px solid var(--mud-palette-divider);
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-taskpanel-tabs {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}
.chat-taskpanel-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: #F8FAFC;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
}
.chat-taskpanel-tab.active {
    background: #fff;
    color: #2B2E7C;
    border-bottom-color: #2B2E7C;
}
.chat-taskpanel-close {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 10px;
    color: #64748B;
}
.chat-taskpanel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-task-card {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-task-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.chat-task-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #64748B;
    font-weight: 600;
    flex-shrink: 0;
}
.chat-task-val {
    font-size: 13px;
    color: #0F172A;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.chat-task-statusbadge {
    font-size: 12px;
    font-weight: 600;
    color: #2B2E7C;
    background: #EEF2FF;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.chat-task-progresshead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-task-progress {
    height: 6px;
    background: #E2E8F0;
    border-radius: 6px;
    overflow: hidden;
}
.chat-task-progress > span {
    display: block;
    height: 100%;
    background: #F2A35B;
}
.chat-task-ms {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--mud-palette-divider);
}
.chat-task-msdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chat-task-msbody { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-task-mstitle {
    font-size: 13px; font-weight: 600; color: #0F1F4B;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-task-msstatus { font-size: 11px; color: #64748B; }
.chat-task-msamt { font-size: 13px; font-weight: 700; color: #0F1F4B; flex-shrink: 0; }
.chat-task-total {
    display: flex; justify-content: space-between;
    padding-top: 8px; border-top: 1px solid var(--mud-palette-divider);
    font-weight: 700; color: #0F1F4B;
}
.chat-task-note {
    font-size: 12px; color: #2B2E7C;
    background: #EEF2FF; border-radius: 8px; padding: 8px 10px;
}
.chat-task-copy {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    border: 1px dashed #2B2E7C; color: #2B2E7C; background: #fff;
    border-radius: 8px; padding: 6px 12px; cursor: pointer;
    font-size: 13px; font-weight: 600;
}
.chat-task-copy:hover { background: #EEF2FF; }
.chat-task-qa { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid var(--mud-palette-divider); }
.chat-task-qa:first-child { border-top: none; }
.chat-task-q { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #64748B; font-weight: 600; }
.chat-task-a { font-size: 13px; color: #0F172A; }
.chat-task-empty { font-size: 13px; color: #64748B; text-align: center; padding: 24px 8px; }

/* PROF-120 §4.2 — participants list in the right panel. */
.chat-task-people { display: flex; flex-direction: column; gap: 10px; }
.chat-task-person { display: flex; align-items: center; gap: 8px; }
.chat-task-avatar {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #E8ECF8; color: #2B2E7C;
    font-size: 12px; font-weight: 700;
}
.chat-task-personname {
    flex: 1 1 auto; min-width: 0;
    font-size: 13px; color: #0F172A;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-task-rolechip {
    flex: 0 0 auto;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 1.6;
}
.chat-task-rolechip.is-pro { background: #E8ECF8; color: #2B2E7C; }
.chat-task-rolechip.is-client { background: #E7F6EC; color: #15803D; }

/* PROF-120 §4.5 — action buttons, stacked at the foot of the panel. */
.chat-task-actions {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 4px; padding-top: 12px;
    border-top: 1px solid #E3E7F2;
}
.chat-task-btn {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px; border: none;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.chat-task-btn.is-brand { background: var(--pfl-grad-cta, linear-gradient(135deg, #2E4057 0%, #4A6FA5 100%)); color: #FFFFFF; }
.chat-task-btn.is-danger { background: #FFFFFF; color: #DC2626; border: 1.5px solid #DC2626; }
.chat-task-btn:disabled { background: #F1F3F9; color: #9AA3B5; border-color: #E3E7F2; cursor: default; }
.chat-task-link {
    display: block; text-align: center;
    padding: 6px 0;
    font-size: 13px; font-weight: 600;
    color: #2B2E7C; text-decoration: none;
}
.chat-task-link:hover { text-decoration: underline; }

/* Narrow-screen drawer toggle (hidden on desktop) */
.chat-taskpanel-toggle {
    display: none;
    position: absolute;
    top: 10px; right: 10px;
    z-index: 15;
    background: #2B2E7C; color: #fff; border: none;
    width: 36px; height: 36px; border-radius: 50%;
    align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,31,75,.25);
}

/* README §2: below 1100px the panel becomes an overlay drawer + a toggle appears */
@media (max-width: 1100px) {
    .chat-task-panel {
        position: absolute; right: 0; top: 0; height: 100%;
        transform: translateX(100%); transition: transform .22s ease;
        z-index: 30; box-shadow: -8px 0 24px rgba(15,31,75,.14);
    }
    .chat-task-panel.is-open { transform: translateX(0); }
    .chat-taskpanel-toggle { display: inline-flex; }
    .chat-taskpanel-close { display: inline-flex; align-items: center; }
}

/* Collapsed 56px avatar-only strip */
.chat-collapsed-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
}
.chat-collapsed-avatar {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    padding: 2px;
    transition: box-shadow 0.15s;
}
.chat-collapsed-avatar.selected { box-shadow: 0 0 0 2px var(--mud-palette-primary); }
.chat-collapsed-avatar .chat-collapsed-unread {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #F59E0B;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mud-palette-surface);
}

/* ── PROF-120 AC-09: in-thread offer expiry countdown ────────────────────── */
.chat-offer-countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
}
.chat-offer-countdown.live    { color: #B45309; }
.chat-offer-countdown.expired { color: #DC2626; }

/* ───────────── Landing pages (Find/Become a Professional, About, etc.) ───────────── */
.pfl-lp-hero {
    padding: 64px 0;
}
.pfl-lp-hero--clients {
    background: linear-gradient(135deg, #0F1F4B 0%, #2B2E7C 100%);
}
.pfl-lp-hero--pros-cta {
    background: linear-gradient(135deg, #0F1F4B 0%, #2B2E7C 100%);
    padding: 48px 0;
}
.pfl-lp-hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 16px;
}
.pfl-lp-hero-accent {
    color: #F2A35B;
}
.pfl-lp-hero-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.82);
    margin: 0 0 24px;
    max-width: 520px;
}
.pfl-lp-hero-btn {
    border-radius: 10px !important;
    text-transform: none;
    padding: 10px 26px !important;
}
/* /professionals hero links (ProPage hero README §7): small indigo, underline on hover */
.pfl-pros-sublink { margin: 8px 0 0; }
.pfl-pros-link {
    font-size: 0.875rem; /* 14px, 500 (§7) */
    font-weight: 500;
    color: #2B2E7C;
    text-decoration: none;
}
.pfl-pros-link:hover { text-decoration: underline; }
.pfl-lp-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.pfl-lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 20px;
    padding: 5px 12px;
}
.pfl-lp-hero-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 14px;
    max-width: 320px;
    background: #ffffff;
}
.pfl-lp-hero-visual {
    position: relative;
    width: 100%;
    max-width: 460px;
}
.pfl-lp-hero-img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 40px rgba(16, 38, 74, 0.28));
}
.pfl-lp-hero-card--float {
    position: absolute;
    left: 8px;
    bottom: -18px;
    max-width: 280px;
    box-shadow: 0 12px 30px rgba(16, 38, 74, 0.22);
}
@media (max-width: 959px) {
    .pfl-lp-hero-visual {
        margin-bottom: 28px;
    }
    .pfl-lp-hero-card--float {
        position: static;
        margin: 16px auto 0;
    }
}
.pfl-lp-feature {
    text-align: center;
    padding: 12px;
}
.pfl-lp-feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EEF2FF;
    color: #2B2E7C;
}
.pfl-lp-feature-icon .mud-icon-root {
    color: #2B2E7C;
}
.pfl-lp-faq-band {
    background: #F8FAFC;
}
@media (max-width: 600px) {
    .pfl-lp-hero-title { font-size: 2rem; }
    .pfl-lp-hero { padding: 40px 0; }
}

/* ═══════════ Legal / Policy pages (ref: legal_page_mockup.png) ═══════════ */
.pfl-legal-hub {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 20px 96px;
}
.pfl-legal-hub-head { margin-bottom: 40px; }
.pfl-legal-hub-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #2B2E7C;
    margin-bottom: 10px;
}
.pfl-legal-hub-title {
    font-size: 2.85rem;
    font-weight: 800;
    line-height: 1.05;
    color: #111827;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
.pfl-legal-hub-sub {
    font-size: 1.05rem;
    line-height: 1.55;
    color: #6B7280;
    margin: 0;
    max-width: 540px;
}
.pfl-legal-hub-group { margin-top: 34px; }
/* No uppercase — these labels are localised ("Βασικά νομικά"), and uppercase
   Greek drops its accents, so the transform rendered them misspelt as
   "ΒΑΣΙΚΆ ΝΟΜΙΚΆ". Size/weight/colour carry the eyebrow look instead. */
.pfl-legal-hub-grouplabel {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #8A93A6;
    margin: 0 0 12px 4px;
}
.pfl-legal-hub-card {
    background: #ffffff;
    border: 1px solid #EBEEF3;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 30px rgba(16,24,40,0.05);
    overflow: hidden;
}
.pfl-legal-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    text-decoration: none;
    border-top: 1px solid #F1F3F7;
    transition: background 0.15s ease;
}
.pfl-legal-row:first-child { border-top: none; }
.pfl-legal-row:hover { background: #F8FAFC; }
.pfl-legal-row-ic {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #EEF2FF;
    color: #2B2E7C;
}
.pfl-legal-row-ic .mud-icon-root { font-size: 1.35rem; }
.pfl-legal-row-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pfl-legal-row-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.pfl-legal-row-sub {
    font-size: 0.85rem;
    color: #6B7280;
    margin-top: 2px;
}
.pfl-legal-row-chev {
    flex: 0 0 auto;
    color: #C3C9D4 !important;
    font-size: 1.3rem !important;
    transition: color 0.15s ease, transform 0.15s ease;
}
.pfl-legal-row:hover .pfl-legal-row-chev { color: #2B2E7C !important; transform: translateX(2px); }
.pfl-legal-hub-note {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid #EBEEF3;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #6B7280;
}
.pfl-legal-hub-note strong { color: #111827; }

/* ── Individual policy document page ─────────────────────────────────── */
.pfl-legal-doc { max-width: 940px; margin: 0 auto; padding: 40px 20px 88px; }
.pfl-legal-doc-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2B2E7C;
    text-decoration: none;
    margin-bottom: 18px;
}
.pfl-legal-doc-back:hover { text-decoration: underline; }
.pfl-legal-doc-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #2B2E7C;
    margin-bottom: 8px;
}
.pfl-legal-doc-title {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.1;
    color: #111827;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.pfl-legal-doc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pfl-legal-doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #3A4256;
    background: #EEF2FF;
    border-radius: 20px;
    padding: 5px 13px;
}
.pfl-legal-doc-badge .mud-icon-root { font-size: 0.95rem; }
.pfl-legal-doc-divider { height: 1px; background: #EBEEF3; margin: 26px 0 8px; }

.pfl-legal-doc-grid { display: grid; grid-template-columns: 232px 1fr; gap: 40px; align-items: start; }
.pfl-legal-toc { position: sticky; top: 24px; }
/* See pfl-legal-hub-grouplabel — no uppercase on localised Greek. */
.pfl-legal-toc-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #8A93A6;
    margin: 0 0 12px 12px;
}
.pfl-legal-toc-nav { display: flex; flex-direction: column; border-left: 2px solid #EBEEF3; }
.pfl-legal-toc-link {
    display: flex;
    gap: 9px;
    align-items: baseline;
    padding: 7px 12px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: #5B6478;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.pfl-legal-toc-link:hover { color: #2B2E7C; border-left-color: #2B2E7C; }
.pfl-legal-toc-num { color: #B0B7C5; font-weight: 700; font-size: 0.78rem; min-width: 16px; }

.pfl-legal-doc-body { min-width: 0; }
.pfl-legal-section { scroll-margin-top: 20px; }
.pfl-legal-section + .pfl-legal-section { margin-top: 36px; }
.pfl-legal-h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
}
.pfl-legal-h2-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    font-size: 0.9rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #6A3797, #C85C78);
    border-radius: 8px;
}
.pfl-legal-h3 { font-size: 1.06rem; font-weight: 700; color: #2B2E7C; margin: 22px 0 4px; }
.pfl-legal-h4 { font-size: 0.98rem; font-weight: 700; color: #3A4256; margin: 16px 0 4px; }
.pfl-legal-p { color: #3F4759; line-height: 1.72; margin: 10px 0; white-space: pre-line; }
.pfl-legal-sub { margin-left: 16px; padding-left: 18px; border-left: 2px solid #F1F1F6; margin-top: 14px; }

.pfl-legal-cookie-title { font-size: 1.25rem; font-weight: 800; color: #111827; margin: 40px 0 16px; }

.pfl-legal-empty {
    text-align: center;
    padding: 60px 32px;
    background: #ffffff;
    border: 1px solid #EBEEF3;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(16,24,40,0.05);
    max-width: 620px;
    margin: 0 auto;
}
.pfl-legal-empty-ic {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px; background: #EEF2FF; color: #2B2E7C;
    margin-bottom: 16px;
}
.pfl-legal-empty-ic .mud-icon-root { font-size: 1.8rem; }
.pfl-legal-empty-title { font-size: 1.3rem; font-weight: 800; color: #111827; margin: 0 0 8px; }
.pfl-legal-empty-body { color: #6B7280; line-height: 1.6; margin: 0; }

@media (max-width: 959px) {
    .pfl-legal-doc-grid { grid-template-columns: 1fr; gap: 0; }
    .pfl-legal-toc { display: none; }
}
@media (max-width: 599px) {
    .pfl-legal-hub { padding: 32px 16px 72px; }
    .pfl-legal-hub-title { font-size: 2.1rem; }
    .pfl-legal-doc-title { font-size: 1.8rem; }
    .pfl-legal-row { padding: 15px 16px; gap: 13px; }
}

/* ── Legal policy: semantic HTML body ─────────────────────────────────── */
.pfl-legal-doc-body .pfl-legal-h2 { scroll-margin-top: 20px; margin-top: 38px; }
.pfl-legal-doc-body > .pfl-legal-h2:first-child { margin-top: 0; }
.pfl-legal-doc-body ul,
.pfl-legal-doc-body ol {
    margin: 10px 0 12px 2px;
    padding-left: 22px;
    color: #3F4759;
    line-height: 1.7;
}
.pfl-legal-doc-body li { margin: 6px 0; }
.pfl-legal-doc-body h3 { font-size: 1.06rem; font-weight: 700; color: #2B2E7C; margin: 22px 0 4px; }
.pfl-legal-doc-body h4 { font-size: 0.98rem; font-weight: 700; color: #3A4256; margin: 16px 0 4px; }
.pfl-legal-doc-body p { color: #3F4759; line-height: 1.72; margin: 10px 0; }
.pfl-legal-doc-body blockquote {
    margin: 12px 0; padding: 8px 16px;
    border-left: 3px solid #C85C78; background: #FAFAFC;
    color: #4A5060; border-radius: 0 6px 6px 0;
}
.pfl-legal-doc-body a {
    color: #2B2E7C;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.pfl-legal-doc-body a:hover { color: #0F1F4B; }
.pfl-legal-doc-body strong { color: #2A3142; font-weight: 700; }
.pfl-legal-doc-body em { font-style: italic; }
.pfl-legal-doc-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.92rem;
}
.pfl-legal-doc-body th,
.pfl-legal-doc-body td {
    border: 1px solid #E6E9F0;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.pfl-legal-doc-body th { background: #F5F7FB; font-weight: 700; color: #2A3142; }

/* Admin legal editor (Quill) */
.admin-legal-editor .ql-toolbar { border-radius: 8px 8px 0 0; }
.admin-legal-editor .ql-container { border-radius: 0 0 8px 8px; min-height: 440px; font-size: 15px; font-family: var(--pfl-font, 'Plus Jakarta Sans', 'Open Sans', sans-serif); }
.admin-legal-editor .ql-editor { min-height: 440px; }

/* ═══════════ Home hero (ref: README_Hero_Implementation_16072026) ═══════════ */
.pfl-hero {
    background: #FFFFFF;
    overflow: hidden;
}
.pfl-hero-inner {
    max-width: 1440px;
    margin: 0 auto;
    /* 80px frame (spec §5); no right padding so the map bleeds off the edge */
    padding: 80px 0 80px 80px;
    display: grid;
    grid-template-columns: 2fr 3fr; /* ~40% text / ~60% map (spec §1) */
    gap: 32px;
    align-items: center;
}
.pfl-hero-left { max-width: 560px; }
.pfl-hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem); /* 72px at 1440px+ */
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.02em;
    color: #0F1F4B;
    margin: 0 0 24px;
}
.pfl-hero-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.5rem); /* 24px at 1440px+ */
    font-weight: 400;
    line-height: 1.5;
    color: #64748B;
    margin: 0 0 24px;
}

/* Toggle (spec §3): gray container, solid #0F1F4B active — NEVER the gradient */
.pfl-hero-toggle {
    display: inline-flex;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
    margin-bottom: 16px;
}
.pfl-hero-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* minimum tap target */
    padding: 0 22px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    background: transparent;
    color: #0F1F4B;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.pfl-hero-toggle-btn.is-active {
    background: #0F1F4B;
    color: #FFFFFF;
    cursor: default;
}
a.pfl-hero-toggle-btn {
    background: #FFFFFF;
    border: 1.5px solid #0F1F4B;
    color: #0F1F4B;
}
a.pfl-hero-toggle-btn:hover { background: #F5F7FB; color: #0F1F4B; }

/* Search bar (spec §4): 56px, radius 8, #CBD5E1 border, gradient button */
.pfl-hero-search {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin-bottom: 24px;
}
.pfl-hero-search-box {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 20px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    transition: border-color 0.2s ease;
}
.pfl-hero-search-box:focus-within {
    border: 1.5px solid #2B2E7C;
    padding: 0 19.5px; /* keep the text from shifting when the border thickens */
}
.pfl-hero-search-box .mud-icon-root { color: #94A3B8; font-size: 1.25rem; flex: 0 0 auto; }
.pfl-hero-search-box input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: #0F172A;
}
.pfl-hero-search-btn {
    flex: 0 0 auto;
    height: 56px;
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    transition: opacity 0.2s ease;
}
.pfl-hero-search-btn:hover { opacity: 0.88; }

/* Trust signals (spec §6): qualitative only, navy checkmarks */
.pfl-hero-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pfl-hero-trust li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #0F172A;
}
.pfl-hero-trust .mud-icon-root { color: #0F1F4B; font-size: 1.15rem; flex: 0 0 auto; margin-top: 1px; }

/* Map — right column, bleeding off the right edge */
.pfl-hero-right { min-width: 0; }
.pfl-hero-map {
    display: block;
    width: 100%;
    max-height: 640px;
    object-fit: contain;
    object-position: right center;
}

@media (max-width: 1024px) {
    /* Tablet (spec §7): content centered, image scales down below it */
    .pfl-hero-inner {
        grid-template-columns: 1fr;
        padding: 56px 32px;
        gap: 32px;
        justify-items: center;
        text-align: center;
    }
    .pfl-hero-left { max-width: 640px; }
    .pfl-hero-search { width: 100%; margin-left: auto; margin-right: auto; }
    .pfl-hero-trust { width: fit-content; margin: 0 auto; text-align: left; }
    .pfl-hero-right { width: 100%; max-width: 620px; }
    .pfl-hero-map { margin: 0 auto; object-position: center; }
}
@media (max-width: 768px) {
    /* Mobile (spec §7): full-width layout, toggle + search full width */
    .pfl-hero-inner { padding: 40px 18px; gap: 24px; }
    .pfl-hero-toggle { display: flex; width: 100%; }
    .pfl-hero-toggle-btn { flex: 1 1 0; }
    .pfl-hero-search { flex-direction: column; }
    .pfl-hero-search-btn { width: 100%; }
}

/* ═══════════ /professionals hero (ref: ProPage_Hero_README_17072026) ═══════════ */
.pfl-hero--pros { position: relative; }
.pfl-hero--pros .pfl-hero-inner {
    /* the text column drives the height; keep room for the figure (§9) */
    min-height: 560px;
}
.pfl-hero--pros .pfl-hero-left { position: relative; z-index: 2; }
.pfl-hero-title--pros {
    font-size: 3.25rem; /* 52px desktop (§4) — a literal spec value, not a clamp */
    margin: 0 0 16px;
}
.pfl-hero-sub--pros {
    font-size: 1.0625rem; /* 17px (§4) */
    color: #374151;
    max-width: 460px;
}
/* CTA — matches the header Sign Up gradient exactly (§6): NEVER flat purple */
.pfl-pros-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    color: #FFFFFF;
    /* Grown per PROF-94 §4 — the removed sub-link left it as the only action */
    font-size: 1.0625rem;
    font-weight: 600;
    padding: 18px 44px;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.pfl-pros-cta:hover { opacity: 0.88; color: #FFFFFF; }
/* Trust ticks — vertical column, never a horizontal row or grey strip (§8) */
.pfl-pros-ticks {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pfl-pros-ticks li {
    display: flex;
    align-items: flex-start; /* keep the tick on the first line when text wraps */
    gap: 8px;
    /* PROF-94 §2: same voice as the home hero's trust list */
    font-size: 0.95rem;
    font-weight: 500;
    color: #0F172A;
}
.pfl-pros-ticks .mud-icon-root { color: #0F1F4B; font-size: 1.15rem; flex: 0 0 auto; margin-top: 1px; }
/* Figure — cutout on plain white: no circle, no glow, no shadow (§9);
   bottom-anchored to the hero edge, bleeds off the right */
.pfl-pros-figure {
    position: absolute;
    /* PROF-94 §3: pulled inboard next to the copy instead of bleeding off the
       edge — tracks the content column on wide screens, never past 4%. */
    right: max(4%, calc(50% - 435px));
    bottom: 0;
    height: 92%;
    max-height: 660px;
    width: auto;
    object-fit: contain;
    object-position: bottom right;
    /* PROF-94 §3: mirrored so he faces the text */
    transform: scaleX(-1);
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 1024px) and (min-width: 768.02px) {
    /* keep the two-column hero on tablet — the home hero's stacked-centred
       tablet rules would put the absolute figure on top of the text.
       768.02 (not 769) so no fractional-zoom width falls between the blocks */
    .pfl-hero--pros .pfl-hero-inner {
        grid-template-columns: 2fr 3fr;
        padding: 56px 0 56px 32px;
        justify-items: stretch;
        text-align: left;
        min-height: 480px;
    }
    .pfl-hero-title--pros { font-size: 2.75rem; }
    .pfl-pros-figure { max-height: 500px; right: 2%; }
}
@media (max-width: 768px) {
    /* Mobile (§11): single column, figure hidden, CTA full width, ticks centred */
    .pfl-hero--pros .pfl-hero-inner {
        min-height: 0;
        padding: 80px 24px 48px;
    }
    .pfl-hero-title--pros { font-size: 2.125rem; } /* 34px (§4/§11) */
    .pfl-hero-sub--pros { font-size: 0.9375rem; }  /* 15px (§4) */
    .pfl-pros-figure { display: none; }
    .pfl-pros-cta { display: flex; width: 100%; justify-content: center; }
    .pfl-pros-ticks { width: fit-content; margin: 20px auto 0; text-align: left; }
}

/* ═══ Browse Professional Categories (Browse_Categories_README_17072026 · B version) ═══
   3 columns in ONE bordered panel: categories 280px | subcategories 280px | info flex.
   Lucide line icons 18px; active row = light-indigo chip + 4px left border;
   CTA fixed 280x56 gradient. Colours/typography per README §9. */
.pfl-browse {
    background: #FFFFFF;
    padding: 80px 0;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}
.pfl-browse-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Pro-page variant (PROF-95): centred H2 + subtext, 64px gap to the panel. */
.pfl-browse--pros .pfl-browse-title { text-align: center; }
.pfl-browse-subtitle {
    margin: 12px auto 64px;
    max-width: 640px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    color: #64748B;
}

.pfl-browse-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0F1F4B;
    text-align: center;
    margin: 0 0 40px;
    letter-spacing: -0.02em;
}

.pfl-browse-panel {
    display: grid;
    grid-template-columns: 280px 280px 1fr;
    gap: 24px;
    align-items: start;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    background: #FFFFFF;
    padding: 24px;
}
.pfl-browse-col { min-width: 0; }
.pfl-browse-col--cats,
.pfl-browse-col--subs { border-right: 1px solid #E2E8F0; padding-right: 24px; }

.pfl-browse-list { list-style: none; margin: 0; padding: 0; }
.pfl-browse-list--scroll { max-height: 560px; overflow-y: auto; padding-right: 4px; }
.pfl-browse-list--scroll::-webkit-scrollbar { width: 6px; }
.pfl-browse-list--scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 3px; }
.pfl-browse-list--children { margin-left: 14px; }

/* column 1 — category rows: [icon] [name] ... [chevron], 56px tall */
.pfl-browse-cat {
    width: 100%;
    min-height: 56px;
    display: flex; align-items: center; gap: 10px;
    justify-content: flex-start;
    padding: 8px 12px;
    border: none;
    border-left: 4px solid transparent;   /* reserved so the active state can't shift layout */
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 0.875rem; font-weight: 500; color: #1A1F3D;
    transition: background 0.15s ease, color 0.15s ease;
}
.pfl-browse-cat .pfl-browse-icon { color: #0F1F4B; flex: 0 0 auto; transition: color 0.15s ease; }
.pfl-browse-cat .pfl-browse-caret { color: #94A3B8; flex: 0 0 auto; margin-left: auto; transition: color 0.15s ease; }
/* Greek category names run far longer than the English ones the spec was drawn
   with — wrap them instead of truncating. */
.pfl-browse-cat span { min-width: 0; line-height: 1.3; }
.pfl-browse-cat:hover { background: #F1F5FB; color: #2B2E7C; font-weight: 600; }
.pfl-browse-cat:hover .pfl-browse-icon,
.pfl-browse-cat:hover .pfl-browse-caret { color: #2B2E7C; }
.pfl-browse-cat.is-active {
    background: #EFF6FF;
    border-left-color: #2B2E7C;
    border-radius: 0 10px 10px 0;
    color: #2B2E7C; font-weight: 600;
}
.pfl-browse-cat.is-active .pfl-browse-icon,
.pfl-browse-cat.is-active .pfl-browse-caret { color: #2B2E7C; }
.pfl-browse-cat--child { min-height: 48px; }

/* column 2 — subcategory rows: text + right chevron, divider rules */
.pfl-browse-sub {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 10px;
    border: none;
    border-bottom: 1px solid #EEF2F7;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 0.875rem; font-weight: 400; color: #374151;
    transition: color 0.15s ease, background 0.15s ease;
}
.pfl-browse-sub:last-child { border-bottom: none; }
.pfl-browse-sub .pfl-browse-subcaret { color: #2B2E7C; flex: 0 0 auto; }
.pfl-browse-sub span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.pfl-browse-sub:hover { color: #2B2E7C; font-weight: 600; background: #F8FAFC; }
.pfl-browse-sub.is-active { color: #2B2E7C; font-weight: 600; }

/* column 3 — info panel: image ABOVE details (4-column layout was rejected) */
.pfl-browse-photo {
    width: 100%; aspect-ratio: 4 / 3;
    object-fit: cover; display: block;
    border-radius: 16px; background: #F8FAFC;
    margin-bottom: 18px;
}
.pfl-browse-infotitle {
    font-size: 1.25rem;             /* 20px H2 (README §5) */
    font-weight: 700;
    color: #0F1F4B;
    margin: 0 0 10px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* PROF-63: the name is a second way into the same /services page as the CTA.
   It keeps the heading's navy at rest so the panel stays calm; hover shifts
   it to the link indigo with an underline so it reads as clickable. */
.pfl-browse-infotitle-link {
    color: inherit;
    text-decoration: none;
}

.pfl-browse-infotitle-link:hover {
    color: #2B2E7C;
    text-decoration: underline;
}
.pfl-browse-infotext {
    font-size: 0.875rem; font-weight: 400; color: #64748B;
    line-height: 1.6; margin: 0 0 16px;
}
/* trust signal — inline-flex, NO pill, NO background (README §8) */
.pfl-browse-verified {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8125rem; font-weight: 500; color: #0F1F4B;
    margin-bottom: 18px;
}
.pfl-browse-verified .pfl-browse-check { color: #16A34A; flex: 0 0 auto; }
/* CTA — fixed 280x56, gradient, radius 12, left-aligned, NO stretching (README §7) */
.pfl-browse-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 280px; height: 56px;
    max-width: 100%;
    border-radius: 12px;
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    color: #FFFFFF; font-size: 1rem; font-weight: 600; text-decoration: none;
    transition: opacity 0.15s ease;
}
.pfl-browse-cta:hover { opacity: 0.88; }
/* PROF-117: the CTA is an <a>, so the browser resets its colour to link-blue on
   :active/:visited (that is why the label flashed light-blue on click). Pin white
   on every state — same approach as .pfl-btn-brand. */
.pfl-browse-cta:link,
.pfl-browse-cta:visited,
.pfl-browse-cta:hover,
.pfl-browse-cta:focus,
.pfl-browse-cta:active { color: #FFFFFF; }
.pfl-browse-cta .mud-icon-root { font-size: 18px; color: #FFFFFF; }

/* tablet — categories | subcategories, info spans underneath */
@media (max-width: 1023px) {
    .pfl-browse-panel { grid-template-columns: 1fr 1fr; }
    .pfl-browse-col--subs { border-right: none; padding-right: 0; }
    .pfl-browse-col--info { grid-column: 1 / -1; border-top: 1px solid #E2E8F0; padding-top: 24px; }
    .pfl-browse-title { font-size: 2rem; }
}
/* mobile — single column stack (full accordion spec to follow separately) */
@media (max-width: 767px) {
    .pfl-browse { padding: 56px 0; }
    .pfl-browse-inner { padding: 0 18px; }
    .pfl-browse-panel { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
    .pfl-browse-col--cats { border-right: none; padding-right: 0; }
    .pfl-browse-list--scroll { max-height: 300px; }
    .pfl-browse-title { font-size: 1.7rem; }
    .pfl-browse-infotitle { font-size: 1.15rem; }
}

/* ═══════════ Search results — /search (hero README §10) ═══════════ */
.pfl-search { background: #FFFFFF; }
.pfl-search-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 72px;
}
.pfl-search-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #0F1F4B;
    margin: 0 0 20px;
}
.pfl-search-box {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin-bottom: 36px;
}
.pfl-search-input {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 18px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    transition: border-color 0.2s ease;
}
.pfl-search-input:focus-within { border: 1.5px solid #2B2E7C; padding: 0 17.5px; }
.pfl-search-input .mud-icon-root { color: #94A3B8; font-size: 1.2rem; flex: 0 0 auto; }
.pfl-search-input input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: inherit;
    font-size: 0.98rem;
    color: #0F172A;
}
.pfl-search-btn {
    flex: 0 0 auto;
    height: 52px;
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    color: #FFFFFF;
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    transition: opacity 0.2s ease;
}
.pfl-search-btn:hover { opacity: 0.88; }

.pfl-search-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F1F4B;
    margin: 28px 0 14px;
}
.pfl-search-empty { color: #64748B; font-size: 1rem; margin: 0 0 8px; }

.pfl-search-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pfl-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #FFFFFF;
    text-decoration: none;
    transition: all 0.2s ease;
}
.pfl-search-item:hover { border-color: #2B2E7C; box-shadow: 0 4px 14px rgba(15, 31, 75, 0.08); }
.pfl-search-item-name { font-weight: 600; color: #0F1F4B; }
.pfl-search-item-cat { color: #64748B; font-size: 0.88rem; margin-left: auto; }
.pfl-search-item .mud-icon-root { color: #2B2E7C; flex: 0 0 auto; }

.pfl-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}
.pfl-search-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
    text-decoration: none;
    transition: all 0.2s ease;
}
.pfl-search-card:hover {
    border-color: #2B2E7C;
    box-shadow: 0 6px 18px rgba(15, 31, 75, 0.10);
    transform: translateY(-2px);
}
.pfl-search-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.pfl-search-card span { padding: 12px 14px; font-weight: 600; color: #0F1F4B; font-size: 0.92rem; }

@media (max-width: 640px) {
    .pfl-search-box { flex-direction: column; }
    .pfl-search-btn { width: 100%; }
    .pfl-search-item { flex-wrap: wrap; }
    .pfl-search-item-cat { margin-left: 0; width: 100%; order: 3; }
}

/* ═══ How ProfesLink Works (HowItWorks_WhyChoose_README_17072026 §3) ═══
   3-column step cards, line-style icons, plain uppercase "STEP 0X" text label
   (no badge/bubble shape — rejected in spec). Dashed connector line between
   cards at icon-circle height, hidden on mobile. */
.pfl-how {
    background: #FFFFFF;
    padding: 80px 0;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}
.pfl-how-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pfl-how-title {
    font-size: 2rem;                 /* 32px */
    font-weight: 700;
    color: #0F1F4B;
    text-align: center;
    margin: 0 0 40px;
    letter-spacing: -0.02em;
}
.pfl-how-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pfl-how-connector {
    position: absolute;
    top: 68px;                       /* icon-circle centre: 32px card padding + 28px circle radius */
    left: 160px;
    right: 160px;
    border-top: 2px dashed #E2E8F0;
    z-index: 0;
}
.pfl-how-card {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
}
.pfl-how-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15, 31, 75, 0.08);
}
.pfl-how-steplabel {
    display: block;
    font-size: 0.75rem;              /* 12px */
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2B2E7C;
    margin-bottom: 16px;
}
.pfl-how-iconcircle {
    width: 56px; height: 56px;
    background: #EEF2FF;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
}
.pfl-how-icon { color: #2B2E7C; }
.pfl-how-card h3 {
    font-size: 1.125rem;             /* 18px */
    font-weight: 600;
    color: #0F1F4B;
    margin: 0 0 8px;
}
.pfl-how-card p {
    font-size: 0.875rem;             /* 14px */
    font-weight: 400;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 1023px) {
    .pfl-how-connector { left: 100px; right: 100px; }
}
@media (max-width: 768px) {
    .pfl-how-grid { grid-template-columns: 1fr; }
    .pfl-how-connector { display: none; }
}

/* ═══ Why Choose ProfesLink (HowItWorks_WhyChoose_README_17072026 §4) ═══
   4-column feature highlights, filled/solid icons (bolder than the line icons
   above), each with its own icon colour + circle background. No card borders —
   icons carry the visual weight. 120px top padding + border-top separates this
   section from How It Works without a background colour change. */
.pfl-why {
    background: #FFFFFF;
    padding: 120px 0 80px;
    border-top: 1px solid #E2E8F0;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}
.pfl-why-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pfl-why-title {
    font-size: 2rem;                 /* 32px */
    font-weight: 700;
    color: #0F1F4B;
    text-align: center;
    margin: 0 0 48px;
    letter-spacing: -0.02em;
}
.pfl-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.pfl-why-col { text-align: center; }
.pfl-why-iconcircle {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.pfl-why-iconcircle--verified { background: #EEF2FF; color: #2B2E7C; }
.pfl-why-iconcircle--payments { background: #DCFCE7; color: #16A34A; }
.pfl-why-iconcircle--reviews { background: #FFF7ED; color: #F2A35B; }
.pfl-why-iconcircle--protection { background: #F5F3FF; color: #7C3AED; }
.pfl-why-col h3 {
    font-size: 1.125rem;             /* 18px */
    font-weight: 600;
    color: #0F1F4B;
    margin: 0 0 8px;
}
.pfl-why-col p {
    font-size: 0.875rem;             /* 14px */
    font-weight: 400;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 1023px) {
    .pfl-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .pfl-why-grid { grid-template-columns: 1fr; }
}

/* ═══ FAQ section (FAQ_Section_README_17072026) ═══
   White section, single-open accordion, 12px item gap, Q1 rich step layout.
   Expand/collapse animated with the grid-template-rows 0fr→1fr technique
   (equivalent to the spec's max-height ease, but exact-height). */
.pfl-faq {
    background: #FFFFFF;
    padding: 80px 0;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}
.pfl-faq-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pfl-faq-title {
    font-size: 2rem;                 /* 32px (README §2) */
    font-weight: 700;
    color: #0F1F4B;
    text-align: center;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}
.pfl-faq-sub {
    font-size: 1rem;
    font-weight: 400;
    color: #64748B;
    text-align: center;
    margin: 0 0 36px;
}
.pfl-faq-sub a { color: #2B2E7C; font-weight: 600; text-decoration: none; }
.pfl-faq-sub a:hover { text-decoration: underline; }

.pfl-faq-list { display: flex; flex-direction: column; gap: 12px; }
.pfl-faq-item {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;                /* keeps the answer panel inside the radius */
    transition: box-shadow 0.3s ease;
}
.pfl-faq-item.is-open { box-shadow: 0 4px 16px rgba(15, 31, 75, 0.07); }

.pfl-faq-q {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 20px 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1rem; font-weight: 600; color: #0F1F4B;
    transition: background 0.15s ease;
}
.pfl-faq-q:hover { background: #F8FAFC; }
.pfl-faq-q .pfl-faq-chevron { color: #2B2E7C; flex: 0 0 auto; transition: transform 0.3s ease; }
.pfl-faq-item.is-open .pfl-faq-chevron { transform: rotate(180deg); }

.pfl-faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.pfl-faq-item.is-open .pfl-faq-panel { grid-template-rows: 1fr; }
.pfl-faq-panelbody { overflow: hidden; min-height: 0; }
.pfl-faq-panelpad { background: #F8FAFC; padding: 4px 24px 20px; }
.pfl-faq-answer {
    font-size: 0.875rem; font-weight: 400; color: #475569;
    line-height: 1.65; margin: 12px 0 0;
}

/* Q1 — 5-step rich layout (README §5): [36px icon chip] [title + body],
   dashed connector between icon chips (decorative — hidden on mobile). */
.pfl-faq-steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pfl-faq-step { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.pfl-faq-stepicon {
    width: 36px; height: 36px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: #EEF2FF; border-radius: 8px;
    color: #2B2E7C;
}
.pfl-faq-step:not(:last-child) .pfl-faq-stepicon::after {
    content: "";
    position: absolute;
    left: 17.5px; top: 40px;
    height: calc(100% - 24px);
    border-left: 1px dashed #C7D2FE;
}
.pfl-faq-steptext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pfl-faq-steptext strong { font-size: 0.875rem; font-weight: 600; color: #0F1F4B; }
.pfl-faq-steptext span { font-size: 0.8125rem; font-weight: 400; color: #64748B; line-height: 1.5; }

/* trust note — inline-flex icon + text, no pill, no border (README §5) */
.pfl-faq-trust {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 18px 0 0;
    font-size: 0.8125rem; font-weight: 500; color: #0F1F4B;
}
.pfl-faq-trust .pfl-faq-trustlock { color: #16A34A; flex: 0 0 auto; }

.pfl-faq-viewall {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 28px;
    font-size: 0.9375rem; font-weight: 600; color: #2B2E7C;
    text-decoration: none;
}
.pfl-faq-viewall:hover { text-decoration: underline; }

/* shared plain-text link style (FAQ answers, Help Centre) */
.pfl-txtlink { color: #2B2E7C; font-weight: 600; text-decoration: none; }
.pfl-txtlink:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .pfl-faq { padding: 56px 0; }
    .pfl-faq-q { padding: 16px 18px; }
    .pfl-faq-panelpad { padding: 4px 18px 18px; }
    .pfl-faq-step:not(:last-child) .pfl-faq-stepicon::after { display: none; }
}

/* ═══ Help Centre page (HelpCentre_README_17072026) ═══
   280px sticky sidebar + accordion content panel; sidebar collapses to a
   "Jump to section" dropdown under 1024px. Icon states per README §6:
   grey default / indigo hover / white-in-indigo-circle active. */
.pfl-hc {
    background: #FFFFFF;
    padding: 80px 0;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}
.pfl-hc-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.pfl-hc-crumb { font-size: 0.8125rem; font-weight: 400; color: #64748B; margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.pfl-hc-crumbsep { color: #94A3B8; }
.pfl-hc-crumbactive { color: #0F1F4B; font-weight: 600; }
/* PROF-21: breadcrumb links (Home, Help Centre) — muted like the crumb text,
   underlined on hover/focus so they read as navigable. */
.pfl-hc-crumblink { color: inherit; text-decoration: none; }
.pfl-hc-crumblink:hover, .pfl-hc-crumblink:focus-visible { color: #0F1F4B; text-decoration: underline; }
/* PROF-113: the contact-form link sits on its own line under the email. */
.pfl-hc-supportcontact { display: inline-block; margin-top: 6px; }

.pfl-hc-title {
    font-size: 2.5rem;               /* 40px */
    font-weight: 700;
    color: #0F1F4B;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.pfl-hc-sub { font-size: 1rem; font-weight: 400; color: #64748B; line-height: 1.6; margin: 0 0 4px; }

.pfl-hc-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 36px;
    align-items: start;
    margin-top: 32px;
}

/* ── sidebar ── */
.pfl-hc-sidebar { position: sticky; top: 96px; }
.pfl-hc-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pfl-hc-navitem {
    width: 100%;
    /* PROF-115: pin the icon + label to the left. A global button reset gives
       these <button>s justify-content:center, so on the 280px-wide items each
       icon/label was offset by its own label length — a ragged left edge
       (what Eftychia bracketed). flex-start lines every icon and label up on
       one left edge (README §6: left-aligned icon menu). */
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 8px 12px;
    min-height: 48px;
    border: none;
    border-left: 3px solid transparent;  /* reserved so active can't shift layout */
    border-radius: 0 8px 8px 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 0.875rem; font-weight: 400; color: #374151;
    transition: background 0.15s ease, color 0.15s ease;
}
.pfl-hc-navicon {
    width: 32px; height: 32px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #64748B;                      /* MUST be muted grey when inactive (README §6) */
    transition: color 0.15s ease, background 0.15s ease;
}
.pfl-hc-navitem:hover { background: #F8FAFC; color: #2B2E7C; }
.pfl-hc-navitem:hover .pfl-hc-navicon { color: #2B2E7C; }
.pfl-hc-navitem.is-active {
    background: #EEF2FF;
    color: #2B2E7C;
    font-weight: 600;
    border-left-color: #2B2E7C;
}
.pfl-hc-navitem.is-active .pfl-hc-navicon { background: #2B2E7C; color: #FFFFFF; }

.pfl-hc-support {
    display: flex; gap: 12px; align-items: flex-start;
    margin-top: 24px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 16px;
}
.pfl-hc-supporticon { color: #2B2E7C; flex: 0 0 auto; }
.pfl-hc-supporttitle { font-size: 0.9375rem; font-weight: 600; color: #0F1F4B; margin: 0 0 2px; }
.pfl-hc-supportbody { font-size: 0.8125rem; font-weight: 400; color: #64748B; margin: 0 0 6px; }

/* ── mobile jump dropdown ── */
.pfl-hc-jump { display: none; margin-top: 24px; }
.pfl-hc-jump label { display: block; font-size: 0.875rem; font-weight: 600; color: #0F1F4B; margin-bottom: 6px; }
.pfl-hc-jump select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 0.9375rem; color: #0F1F4B;
}

/* ── content panel ── */
.pfl-hc-content { min-width: 0; }
.pfl-hc-sectiontitle {
    font-size: 1.375rem;             /* 22px */
    font-weight: 700;
    color: #0F1F4B;
    margin: 0 0 16px;
}
.pfl-hc-list { display: flex; flex-direction: column; gap: 12px; }
.pfl-hc-item {
    border: 1px solid #E2E8F0;
    border-left: 3px solid transparent;  /* reserved for the open state */
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.pfl-hc-item.is-open {
    border-left-color: #2B2E7C;          /* open = 3px indigo left border (README §7) */
    box-shadow: 0 4px 16px rgba(15, 31, 75, 0.07);
}
.pfl-hc-q {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1rem; font-weight: 600; color: #0F1F4B;
    transition: background 0.15s ease;
}
.pfl-hc-q:hover { background: #F8FAFC; }
.pfl-hc-q .pfl-hc-chevron { color: #2B2E7C; flex: 0 0 auto; transition: transform 0.3s ease; }
.pfl-hc-item.is-open .pfl-hc-chevron { transform: rotate(180deg); }

.pfl-hc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.pfl-hc-item.is-open .pfl-hc-panel { grid-template-rows: 1fr; }
.pfl-hc-panelbody { overflow: hidden; min-height: 0; }
.pfl-hc-panelpad { background: #F8FAFC; padding: 4px 24px 20px; }
.pfl-hc-answer {
    font-size: 0.875rem; font-weight: 400; color: #475569;
    line-height: 1.65; margin: 12px 0 0;
}
.pfl-hc-bullets { margin: 10px 0 0; padding-left: 22px; }
.pfl-hc-bullets li { font-size: 0.875rem; color: #475569; line-height: 1.65; margin-bottom: 6px; }
.pfl-hc-bullets strong { color: #0F1F4B; font-weight: 600; }

.pfl-hc-next {
    display: flex; align-items: center; gap: 8px;
    margin: 20px 0 0 auto;               /* right aligned (README §7) */
    padding: 0;
    border: none; background: transparent; cursor: pointer;
    font-family: inherit;
    font-size: 0.9375rem; font-weight: 600; color: #2B2E7C;
}
.pfl-hc-next:hover { text-decoration: underline; }

@media (max-width: 1023px) {
    .pfl-hc { padding: 48px 0; }
    .pfl-hc-layout { grid-template-columns: 1fr; margin-top: 20px; }
    .pfl-hc-sidebar { display: none; }   /* replaced by the jump dropdown */
    .pfl-hc-jump { display: block; }
    .pfl-hc-title { font-size: 2rem; }
    .pfl-hc-q { padding: 16px 18px; }
    .pfl-hc-panelpad { padding: 4px 18px 18px; }
}

/* ═══════════ About page (ref: AboutUs_README_17072026) ═══════════ */
.pfl-about {
    background: #FFFFFF;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}

.pfl-about-hero {
    padding: 72px 40px 48px;
    text-align: center;
    background: #FFFFFF;
}

.pfl-about-hero h1 {
    font-size: 40px;
    font-weight: 700;
    color: #0F1F4B;
    margin: 0 0 16px;
    line-height: 1.2;
}

.pfl-about-hero-sub {
    font-size: 18px;
    font-weight: 400;
    color: #64748B;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
}

.pfl-about-body {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px 64px;
}

.pfl-about-body p {
    font-size: 16px;
    color: #374151;
    line-height: 1.8;
    margin: 0 0 32px;
}

.pfl-about-body p:last-child { margin-bottom: 0; }

/* For Clients | For Professionals */
.pfl-about-two-col {
    background: #F8FAFC;
    padding: 64px 40px;
}

.pfl-about-two-col-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

/* 56px circle / 28px glyph — §6d icon spec added 22 Jul 2026 (PROF-66);
   was 48/22 from before the icons were formally specified. */
.pfl-about-col-lead-icon {
    width: 56px;
    height: 56px;
    background: #EEF2FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2B2E7C;
    margin-bottom: 16px;
}

.pfl-about-col-lead {
    font-size: 18px;
    font-weight: 700;
    color: #0F1F4B;
    margin: 0 0 12px;
}

.pfl-about-col-body {
    font-size: 15px;
    color: #374151;
    line-height: 1.75;
    margin: 0 0 24px;
}

.pfl-about-feature {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #E2E8F0;
}

.pfl-about-feature:last-child { border-bottom: 0; }

.pfl-about-feature-icon {
    width: 36px;
    height: 36px;
    background: #EEF2FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2B2E7C;
    flex-shrink: 0;
}

.pfl-about-feature-title {
    font-size: 15px;
    font-weight: 700;
    color: #0F1F4B;
    margin: 0 0 2px;
}

.pfl-about-feature-desc {
    font-size: 14px;
    color: #64748B;
    line-height: 1.5;
    margin: 0;
}

/* Closing belief */
.pfl-about-closing {
    max-width: 1000px;
    margin: 0 auto;
    padding: 64px 40px 0;
    text-align: center;
    background: #FFFFFF;
}

.pfl-about-closing p {
    font-size: 17px;
    font-style: italic;
    color: #374151;
    line-height: 1.8;
    margin: 0;
}

.pfl-about-divider {
    /* 96px — widened 22 Jul 2026 (PROF-66), was 48px. */
    width: 96px;
    height: 3px;
    background: linear-gradient(
        to right,
        #0F1F4B,   /* Deep Navy    — logo start */
        #2B2E7C,   /* Indigo */
        #6A3797,   /* Purple */
        #C85C78,   /* Peach-Rose */
        #F2A35B    /* Golden Peach — logo end */
    );
    margin: 24px auto 0;
}

/* CTA — contact link */
.pfl-about-cta {
    text-align: center;
    padding: 32px 40px 80px;
}

.pfl-about-cta p {
    font-size: 15px;
    color: #64748B;
    margin: 0 0 8px;
}

.pfl-about-cta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #2B2E7C;
    text-decoration: none;
    transition: color 0.15s ease;
}

.pfl-about-cta a:hover { color: #0F1F4B; }

@media (max-width: 768px) {
    .pfl-about-hero { padding: 48px 24px 32px; }
    .pfl-about-hero h1 { font-size: 32px; }
    .pfl-about-body { padding: 0 24px 48px; }
    .pfl-about-two-col { padding: 48px 24px; }
    .pfl-about-two-col-inner { grid-template-columns: 1fr; gap: 40px; }
    .pfl-about-closing { padding: 48px 24px 0; }
    .pfl-about-cta { padding: 32px 24px 64px; }
}

/* ═══════════ Contact page (ref: ContactUs_README_17072026) ═══════════ */
.pfl-contact {
    background: #FFFFFF;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
    padding: 64px 40px 96px;
}

.pfl-contact-intro {
    text-align: center;
    margin-bottom: 48px;
}

.pfl-contact-intro h1 {
    font-size: 36px;
    font-weight: 700;
    color: #0F1F4B;
    margin: 0 0 16px;
    line-height: 1.2;
}

.pfl-contact-intro p {
    font-size: 16px;
    font-weight: 400;
    color: #64748B;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}

.pfl-contact-card {
    max-width: 720px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Honeypot — hidden from humans, still fillable by naive bots */
.pfl-contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pfl-contact-field { margin-bottom: 24px; }

.pfl-contact-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0F1F4B;
    margin-bottom: 6px;
}

.pfl-contact-req { color: #C0392B; }

.pfl-contact-field input,
.pfl-contact-field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    color: #0F1F4B;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfl-contact-field input::placeholder,
.pfl-contact-field textarea::placeholder { color: #94A3B8; }

.pfl-contact-field input:focus,
.pfl-contact-field textarea:focus {
    outline: none;
    border-color: #2B2E7C;
    box-shadow: 0 0 0 3px rgba(43, 46, 124, 0.10);
}

.pfl-contact-field textarea {
    min-height: 160px;
    resize: vertical;
}

.pfl-contact-field input.is-invalid,
.pfl-contact-field textarea.is-invalid { border-color: #C0392B; }

.pfl-contact-error {
    font-size: 13px;
    color: #C0392B;
    margin: 4px 0 0;
}

/* PROF-114: subject dropdown — matches the text inputs above (AC-02). */
.pfl-contact-select {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: #0F1F4B;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfl-contact-select:focus {
    outline: none;
    border-color: #2B2E7C;
    box-shadow: 0 0 0 3px rgba(43, 46, 124, 0.10);
}

.pfl-contact-select.is-invalid { border-color: #C0392B; }

/* PROF-114 / PROF-135: client / professional toggle (AC-01) — segmented control
   matching the site hero toggle (.pfl-hero-toggle): grey container, solid navy
   #0F1F4B active with white text, NEVER the gradient. Both sides are equal width
   (flex: 1 1 0) so the two labels render the same size. */
.pfl-contact-toggle {
    display: flex;
    gap: 3px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 3px;
}

.pfl-contact-toggle-btn {
    flex: 1 1 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #0F1F4B;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pfl-contact-toggle-btn.is-active {
    color: #FFFFFF;
    background: #0F1F4B;
    cursor: default;
}

/* PROF-114: "Auto-filled" badge on prefilled fields (AC-03). */
.pfl-contact-autofill {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #16A34A;
    background: #DCFCE7;
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: middle;
}

/* PROF-114: optional attachment (AC-04). The <input type=file> is visually
   hidden; its wrapping label is the styled button. */
.pfl-contact-upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.pfl-contact-upload .pfl-contact-uploadbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2B2E7C;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pfl-contact-upload .pfl-contact-uploadbtn:hover {
    border-color: #2B2E7C;
    background: #F8FAFC;
}

.pfl-contact-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.pfl-contact-fileinfo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0F1F4B;
}

.pfl-contact-fileclear {
    background: none;
    border: 0;
    color: #64748B;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.pfl-contact-hint {
    display: block;
    font-size: 13px;
    color: #64748B;
    margin-top: 8px;
}

/* Submit — canonical Primary Button (DesignTokens_Reference_README §3.1),
   same as .pfl-header-btn--primary */
.pfl-contact-submit {
    display: inline-block;
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    padding: 14px 24px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.pfl-contact-submit:hover:not(:disabled) {
    background: linear-gradient(90deg, #1A2D63, #3840A0);
    transform: translateY(-1px);
}

.pfl-contact-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Success state */
.pfl-contact-success {
    text-align: center;
    padding: 48px 24px;
}

.pfl-contact-success-icon { color: #16A34A; }

.pfl-contact-success h2 {
    font-size: 24px;
    font-weight: 700;
    color: #0F1F4B;
    margin: 16px 0 8px;
}

.pfl-contact-success p {
    font-size: 16px;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .pfl-contact { padding: 48px 24px 64px; }
    .pfl-contact-intro h1 { font-size: 28px; }
    .pfl-contact-card { padding: 24px; }
    .pfl-contact-submit { width: 100%; }
}

/* ═══════════ Account / profile page — /user/profile ═══════════
   Brings the signed-in account page onto the same surface language as the
   public pages: soft section background, white hairline cards on the brand
   radius, indigo section icons, pill chips. Before this the page was raw
   MudBlazor — flat MudPapers with hard-coded min-heights that left large
   empty voids, and a green "+" floating to the LEFT of every heading.
   Section actions now sit on the right, where the rest of the site puts them. */
.pfl-acct {
    /* PROF-180: white, not the #F8FAFC section grey. The cards keep their
       1px border, so they still read as cards on a white page. */
    background: #FFFFFF;
    min-height: 100%;
    padding: 32px 0 72px;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}
.pfl-acct-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── identity / plan banners ── */
.pfl-acct-banner { border-radius: var(--pfl-radius, 12px) !important; margin-bottom: 16px; }

/* ── header card ── */
.pfl-acct-head {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--pfl-border, #E2E8F0);
    border-radius: var(--pfl-radius-lg, 18px);
    box-shadow: var(--pfl-shadow-sm, 0 2px 8px rgba(15, 31, 75, 0.08));
    overflow: hidden;
    margin-bottom: 24px;
}
/* Brand band — kept for any other host of .pfl-acct-head. PROF-200 §1 removed it
   from /user/profile: on a services marketplace the navy cover photo read as a
   social-network profile, and it was the reason the avatar needed a negative
   offset in the first place. */
.pfl-acct-band {
    height: 84px;
    background: var(--pfl-grad-primary, linear-gradient(135deg, #0F1F4B 0%, #2B2E7C 100%));
}

/* PROF-200 §1 — banner-less header card. The avatar no longer rises into
   anything, so the negative offset goes and the row gets its own top padding
   back; without this the photo hangs 52px above the card it belongs to. */
.pfl-acct-head--flat .pfl-acct-headbody { padding-top: 24px; }
.pfl-acct-head--flat .pfl-acct-avatarwrap { margin-top: 0; }
.pfl-acct-head--flat .pfl-acct-ident,
.pfl-acct-head--flat .pfl-acct-headactions { padding-top: 0; }

/* PROF-200 §2/§10 — the page now renders inside ProDashboardLayout's main
   column, which already applies the 1120px cap, the gutters and the white
   background. Left alone, .pfl-acct would cap a capped column and pad a padded
   one, so the content sat in a narrow strip with a double gutter. The white
   background is kept here rather than pushed into the global MudTheme (README
   §10: scoped override, do not touch other pages). */
.pfl-dash-main > .pfl-acct {
    background: #FFFFFF;
    padding: 0 0 24px;
    min-height: 0;
}
.pfl-dash-main > .pfl-acct > .pfl-acct-inner {
    max-width: none;
    padding: 0;
}

/* ONLY the avatar overlaps the band. The whole row used to be pulled up with a
   negative margin, which dragged the name onto the navy — navy text on a navy
   gradient, effectively invisible. The name/email/pills now start below it. */
.pfl-acct-headbody {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 28px 24px;
}
.pfl-acct-avatarwrap {
    position: relative;
    flex: 0 0 auto;
    margin-top: -52px;                   /* the avatar alone rises into the band */
}
.pfl-acct-avatar {
    width: 104px; height: 104px;
    border-radius: 50%;
    border: 4px solid #FFFFFF;
    background: #E2E8F0;
    box-shadow: var(--pfl-shadow-sm, 0 2px 8px rgba(15, 31, 75, 0.08));
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}
/* Layered over the initials, so a 404 avatar falls back instead of showing broken. */
.pfl-acct-avatarimg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.pfl-acct-avatarfab {
    position: absolute; right: -2px; bottom: 2px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--pfl-indigo, #2B2E7C);
    color: #FFFFFF;
    cursor: pointer;
    padding: 0;
    transition: filter .2s ease, transform .2s ease;
}
.pfl-acct-avatarfab:hover { filter: brightness(1.12); transform: translateY(-1px); }
.pfl-acct-avatarfab .mud-icon-root { font-size: 17px !important; }

.pfl-acct-ident { flex: 1 1 240px; min-width: 0; padding-top: 14px; }

/* Shown when the account has no picture — ImageUrl is nullable, and an empty
   src makes the browser refetch the page as an image and render the alt text. */
.pfl-acct-initials {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--pfl-indigo-light, #EEF2FF);
    color: var(--pfl-indigo, #2B2E7C);
    font-size: 2.125rem; font-weight: 700;
    line-height: 1;
    user-select: none;
}
.pfl-acct-name {
    font-size: 1.75rem;                  /* 28px */
    font-weight: 700;
    color: var(--pfl-navy, #0F1F4B);
    letter-spacing: -0.02em;
    margin: 0 0 2px;
    line-height: 1.25;
}
.pfl-acct-email {
    font-size: 0.9375rem;
    color: var(--pfl-text-muted, #5B6478);
    margin: 0;
    word-break: break-word;
}

/* Role pills — Professional / Customer / Affiliate / Employee. */
.pfl-acct-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pfl-acct-role {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pfl-indigo-light, #EEF2FF);
    color: var(--pfl-indigo, #2B2E7C);
    font-size: 0.8125rem; font-weight: 600;
    white-space: nowrap;
}
.pfl-acct-role .mud-icon-root { font-size: 15px !important; }

.pfl-acct-headactions { flex: 0 0 auto; padding-top: 14px; margin-left: auto; }

/* ── tabs ── */
/* The uppercase/letter-spacing reset lives globally in palette.css (.mud-tab) —
   it is not an account-page concern. Only the brand colours are set here. */
.pfl-acct-tabs .mud-tabs-toolbar {
    background: transparent !important;
    border-bottom: 1px solid var(--pfl-border, #E2E8F0);
}
.pfl-acct-tabs .mud-tab {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--pfl-text-muted, #5B6478) !important;
    min-height: 52px;
}
.pfl-acct-tabs .mud-tab:hover { color: var(--pfl-indigo, #2B2E7C) !important; }
.pfl-acct-tabs .mud-tab.mud-tab-active { color: var(--pfl-indigo, #2B2E7C) !important; }
.pfl-acct-tabs .mud-tab-slider { background-color: var(--pfl-indigo, #2B2E7C) !important; height: 2px; }
.pfl-acct-tabs .mud-tabs-panels { padding-top: 24px; }

/* ── section cards ── */
.pfl-acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pfl-acct-grid > .is-wide { grid-column: 1 / -1; }

/* PROF-180: the availability and portfolio sections carry their own internal
   layout (day chips, a two-up time row, a photo grid) but were dropped into ONE
   grid column at 526px — so their fields stacked in the left half and the right
   half of the page sat empty. That empty half is what Eftychia crossed out in
   yellow. They span the full row and drop the 860px width cap they inherit from
   the dashboard settings cards, so the fields read left-to-right across the page
   as in the mockup. Measured before/after on /user/profile: 526px → 1072px. */
.pfl-acct-grid > .pfl-acct-availsection,
.pfl-acct-grid > .pfl-set-card { grid-column: 1 / -1; }
.pfl-acct-grid > .pfl-set-card,
.pfl-acct-grid > .pfl-acct-availsection .pfl-set-card { max-width: none; }

.pfl-acct-card {
    background: #FFFFFF;
    border: 1px solid var(--pfl-border, #E2E8F0);
    border-radius: var(--pfl-radius, 12px);
    padding: 20px 22px 22px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.pfl-acct-card:hover { box-shadow: 0 4px 16px rgba(15, 31, 75, 0.07); }

.pfl-acct-cardhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pfl-acct-cardicon {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--pfl-indigo-light, #EEF2FF);
    color: var(--pfl-indigo, #2B2E7C);
}
.pfl-acct-cardicon .mud-icon-root { font-size: 19px !important; }
.pfl-acct-cardtitle {
    font-size: 1rem; font-weight: 700;
    color: var(--pfl-navy, #0F1F4B);
    margin: 0; letter-spacing: -0.01em;
}
/* Section action sits on the RIGHT of the header row, not left of the title. */
.pfl-acct-cardaction { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pfl-acct-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--pfl-border, #E2E8F0);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--pfl-indigo, #2B2E7C);
    font-family: inherit; font-size: 0.8125rem; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.pfl-acct-add:hover { background: var(--pfl-indigo-light, #EEF2FF); border-color: var(--pfl-indigo, #2B2E7C); }
.pfl-acct-add .mud-icon-root { font-size: 16px !important; }
.pfl-acct-add.is-danger { color: #B91C1C; }
.pfl-acct-add.is-danger:hover { background: #FEF2F2; border-color: #B91C1C; }

/* ── chips ── */
.pfl-acct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pfl-acct-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--pfl-indigo-light, #EEF2FF);
    color: var(--pfl-indigo, #2B2E7C);
    font-size: 0.8125rem; font-weight: 600;
}
.pfl-acct-chip.is-default { background: var(--pfl-indigo, #2B2E7C); color: #FFFFFF; }
.pfl-acct-chipx {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border: none; border-radius: 50%;
    background: transparent; color: inherit;
    cursor: pointer; opacity: .6; padding: 0;
}
.pfl-acct-chipx:hover { opacity: 1; }
.pfl-acct-chipx .mud-icon-root { font-size: 14px !important; }

/* ── empty state ── */
/* Replaces the hard-coded min-heights: a card sizes to its content and an
   empty section reads as deliberately empty rather than as a rendering gap. */
.pfl-acct-empty {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px;
    border: 1px dashed var(--pfl-border, #E2E8F0);
    border-radius: 10px;
    background: var(--pfl-section, #F8FAFC);
    color: var(--pfl-text-muted, #5B6478);
    font-size: 0.875rem;
}
.pfl-acct-empty .mud-icon-root { font-size: 18px !important; color: #94A3B8; }

/* ── plain rows (contacts, social links, sign-ins) ── */
.pfl-acct-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0;
    font-size: 0.9375rem; color: var(--pfl-text, #1A2233);
    border-bottom: 1px solid var(--pfl-border, #E2E8F0);
}
.pfl-acct-row:last-child { border-bottom: none; }
.pfl-acct-row .mud-icon-root { font-size: 18px !important; color: var(--pfl-text-muted, #5B6478); }
.pfl-acct-row a { color: var(--pfl-indigo, #2B2E7C); text-decoration: none; font-weight: 600; }
.pfl-acct-row a:hover { text-decoration: underline; }
.pfl-acct-rowtime { margin-left: auto; font-size: 0.8125rem; color: var(--pfl-text-muted, #5B6478); }

/* Inline add-form inside an account card (Contacts, Social Media). Wraps on
   narrow screens so the two fields and the button stack instead of squeezing —
   at 320px a three-across row leaves each field about 80px wide. */
.pfl-acct-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}
.pfl-acct-inline > .mud-input-control { flex: 1 1 160px; min-width: 0; }
.pfl-acct-inline > .mud-button-root { flex: 0 0 auto; }

/* Delete control on a card row. margin-left:auto pins it right; rows carrying
   one must not also give another child auto margins. */
.pfl-acct-rowdelete { margin-left: auto; }

/* Device label on a sign-in row. Sits between the date and the time, which is
   why it does NOT take margin-left:auto — that belongs to the time, and two
   auto margins would split the gap and pull the date away from its own row. */
.pfl-acct-rowdevice {
    font-size: 0.75rem;
    color: var(--pfl-text-muted, #5B6478);
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--pfl-section, #F1F5F9);
}

/* Label / value pairs for read-only account facts. */
.pfl-acct-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.pfl-acct-fact { min-width: 0; }
/* No text-transform: uppercase here. Uppercase Greek drops its accents, so
   "Όνομα Εταιρείας" would render as the misspelt "ΌΝΟΜΑ ΕΤΑΙΡΕΊΑΣ" — the same
   defect the MudTabs override above exists to undo. */
.pfl-acct-factlabel {
    display: block;
    font-size: 0.75rem; font-weight: 600; letter-spacing: .01em;
    color: var(--pfl-text-muted, #5B6478);
    margin-bottom: 3px;
}
.pfl-acct-factvalue {
    font-size: 0.9375rem; font-weight: 600;
    color: var(--pfl-navy, #0F1F4B);
    word-break: break-word;
}

/* ── subscription summary ── */
.pfl-acct-plan {
    background: var(--pfl-indigo-light, #EEF2FF);
    border-radius: 10px;
    padding: 16px 18px;
}
.pfl-acct-planhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pfl-acct-planname { font-size: 1.0625rem; font-weight: 700; color: var(--pfl-navy, #0F1F4B); }
.pfl-acct-planmeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; }

/* ── addresses table ── */
.pfl-acct-tablewrap { overflow-x: auto; }
.pfl-acct-table { width: 100%; border-collapse: collapse; }
.pfl-acct-table th {
    text-align: left;
    font-size: 0.75rem; font-weight: 600; letter-spacing: .01em;   /* see pfl-acct-factlabel — no uppercase in Greek */
    color: var(--pfl-text-muted, #5B6478);
    padding: 0 12px 10px 0;
    border-bottom: 1px solid var(--pfl-border, #E2E8F0);
    white-space: nowrap;
}
.pfl-acct-table td {
    padding: 12px 12px 12px 0;
    font-size: 0.9375rem; color: var(--pfl-text, #1A2233);
    border-bottom: 1px solid var(--pfl-border, #E2E8F0);
    vertical-align: middle;
}
.pfl-acct-table tr:last-child td { border-bottom: none; }

/* ── forms (security tab, inline account creation) ── */
.pfl-acct-formtitle { font-size: 1rem; font-weight: 700; color: var(--pfl-navy, #0F1F4B); margin: 0 0 4px; }
.pfl-acct-formhint {
    font-size: 0.875rem; color: var(--pfl-text-muted, #5B6478);
    margin: 0 0 16px; line-height: 1.6;
}
.pfl-acct-divider { height: 1px; background: var(--pfl-border, #E2E8F0); border: 0; margin: 28px 0 24px; }

@media (max-width: 900px) {
    .pfl-acct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .pfl-acct { padding: 16px 0 56px; }
    .pfl-acct-inner { padding: 0 16px; }
    .pfl-acct-band { height: 64px; }
    .pfl-acct-headbody { padding: 0 20px 20px; gap: 16px; }
    .pfl-acct-avatarwrap { margin-top: -42px; }
    .pfl-acct-avatar { width: 84px; height: 84px; }
    .pfl-acct-initials { font-size: 1.75rem; }
    .pfl-acct-name { font-size: 1.375rem; }
    .pfl-acct-headactions { margin-left: 0; width: 100%; }
    .pfl-acct-card { padding: 18px; }
}

/* ═══════════ Sign-ins page — /user/sign-ins ═══════════
   Full sign-in history for the last month. Same surface language as the
   account page and the public pages: soft section background, white hairline
   card, indigo accents. Entries are grouped by local calendar day. */
.pfl-signins {
    background: var(--pfl-section, #F8FAFC);
    min-height: 100%;
    padding: 48px 0 72px;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}
.pfl-signins-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }

.pfl-signins-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.pfl-signins-title {
    font-size: 2rem;                     /* 32px */
    font-weight: 700;
    color: var(--pfl-navy, #0F1F4B);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.pfl-signins-sub {
    font-size: 0.9375rem;
    color: var(--pfl-text-muted, #5B6478);
    margin: 0;
    line-height: 1.6;
}
.pfl-signins-back {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--pfl-border, #E2E8F0);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--pfl-indigo, #2B2E7C);
    font-size: 0.875rem; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.pfl-signins-back:hover {
    background: var(--pfl-indigo-light, #EEF2FF);
    border-color: var(--pfl-indigo, #2B2E7C);
}
.pfl-signins-back .mud-icon-root { font-size: 17px !important; }

.pfl-signins-count {
    font-size: 0.8125rem;
    color: var(--pfl-text-muted, #5B6478);
    margin: 0 0 12px 2px;
}

.pfl-signins-list { display: flex; flex-direction: column; gap: 18px; }

.pfl-signins-day {
    background: #FFFFFF;
    border: 1px solid var(--pfl-border, #E2E8F0);
    border-radius: var(--pfl-radius, 12px);
    padding: 16px 20px 6px;
}
.pfl-signins-daylabel {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pfl-indigo, #2B2E7C);
    margin: 0 0 8px;
    /* No uppercase — Greek day names would lose their accents. */
}

.pfl-signins-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--pfl-border, #E2E8F0);
    font-size: 0.9375rem;
    color: var(--pfl-text, #1A2233);
}
.pfl-signins-icon {
    width: 30px; height: 30px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--pfl-indigo-light, #EEF2FF);
    color: var(--pfl-indigo, #2B2E7C);
}
.pfl-signins-icon .mud-icon-root { font-size: 17px !important; }
.pfl-signins-label { min-width: 0; }

/* Device chip on a sign-in row. flex:0 0 auto so it never absorbs the row's
   free space — that has to reach .pfl-signins-time's margin-left:auto, which is
   what pins the time to the right edge. */
.pfl-signins-device {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--pfl-text-muted, #5B6478);
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--pfl-section, #F1F5F9);
}
.pfl-signins-device .mud-icon-root { font-size: 14px !important; }

.pfl-signins-time {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pfl-text-muted, #5B6478);
    font-variant-numeric: tabular-nums;
}

.pfl-signins-empty {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 36px 20px;
    border: 1px dashed var(--pfl-border, #E2E8F0);
    border-radius: var(--pfl-radius, 12px);
    background: #FFFFFF;
    color: var(--pfl-text-muted, #5B6478);
    font-size: 0.9375rem;
}
.pfl-signins-empty .mud-icon-root { font-size: 20px !important; color: #94A3B8; }

@media (max-width: 640px) {
    .pfl-signins { padding: 24px 0 56px; }
    .pfl-signins-inner { padding: 0 16px; }
    .pfl-signins-title { font-size: 1.5rem; }
    .pfl-signins-day { padding: 14px 16px 4px; }
}

/* ── Brand gradient for MudButtons ─────────────────────────────────────────
   Reusable equivalent of the five page-specific gradients above
   (.pfl-header-btn--primary, .pfl-hero-search-btn, .pfl-pros-cta,
   .pfl-browse-cta, .pfl-search-btn). MudBlazor's Color.Primary is a FLAT
   #2B2E7C, so a gradient cannot come from the theme — it has to be a class.

   The !important is load-bearing: MudBlazor's own
   .mud-button-filled-primary sets background-color at equal specificity and
   would otherwise win depending on stylesheet order.

   Text stays #FFFFFF on every pseudo-class. Browsers reset colour on
   :visited for anything anchor-like, and MudButton renders as <a> whenever
   Href is set, which is how these buttons lose their white text. */
.pfl-btn-brand {
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C) !important;
    border: none !important;
    color: #FFFFFF !important;
}

.pfl-btn-brand:hover {
    background: linear-gradient(90deg, #1A2D63, #3840A0) !important;
    color: #FFFFFF !important;
}

.pfl-btn-brand:active,
.pfl-btn-brand:focus,
.pfl-btn-brand:visited {
    color: #FFFFFF !important;
}

/* A disabled brand button is a solid grey, not the navy gradient faded out.
   At 45% opacity both the gradient and its white label went translucent, and
   the result reads as blurred rather than disabled (PROF-224 — reported on the
   language picker's "Αποθήκευση"). This treatment was introduced for the auth
   pages in PROF-198 and scoped to them; it is the site-wide default now. */
.pfl-btn-brand:disabled,
.pfl-btn-brand.mud-button-disabled {
    background: #BDC3C7 !important;
    color: #FFFFFF !important;
    opacity: 1;
    cursor: not-allowed;
}

/* Plain-text escape-hatch link (e.g. "Having trouble? Contact support").
   Deliberately not a button: it must read as secondary to the retry CTA. */
.pfl-link-subtle {
    font-size: 0.875rem;
    color: #2B2E7C;
    text-decoration: none;
    cursor: pointer;
}

.pfl-link-subtle:hover {
    text-decoration: underline;
    color: #0F1F4B;
}

/* ── One-time-code entry (MkOtpInput) ──────────────────────────────────────
   Spec: six 48x56 boxes, 8px apart, empty placeholders. The placeholder is
   deliberately absent — showing "0" reads as a digit the user already typed. */
.pfl-otp {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.pfl-otp-box {
    width: 48px;
    height: 56px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', 'Open Sans', sans-serif);
    font-size: 24px;
    font-weight: 700;
    color: #0F1F4B;
    text-align: center;
    caret-color: #2B2E7C;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfl-otp-box:focus {
    outline: none;
    border-color: #2B2E7C;
    box-shadow: 0 0 0 3px rgba(43, 46, 124, 0.15);
}

/* Wrong code: mark the boxes but never clear them — the user needs to see
   what they typed in order to spot the mistake. */
.pfl-otp-box--error {
    border-color: #DC2626;
}

.pfl-otp-box:disabled {
    background: #F1F5F9;
    color: #94A3B8;
}

/* Hide the number-spinner in browsers that render one for tel/numeric. */
.pfl-otp-box::-webkit-outer-spin-button,
.pfl-otp-box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Must not overflow a small screen — 6 boxes + gaps at 48px is 328px, which
   is already tight on a 360px phone once page padding is counted. */
@media (max-width: 400px) {
    .pfl-otp { gap: 6px; }
    .pfl-otp-box { width: 40px; height: 50px; font-size: 20px; }
}

/* Logo-only header (OTP page, OTPVerify_README §2): everything except the
   logo disappears — the user is mid-registration and navigation away is a
   distraction. display:none also removes it from the accessibility tree. */
.pfl-header--logo-only .pfl-header-burger,
.pfl-header--logo-only .pfl-header-actions,
.pfl-header--logo-only .pfl-header-account {
    display: none;
}

/* ── OTP verification page ─────────────────────────────────────────────── */
.pfl-otp-page {
    /* WHITE, not #F8FAFC — README §14 correction 23/07 (PROF-31): white is
       the default for all single-section pages. Column, so the copyright
       line can sit centred beneath the card. */
    background: #FFFFFF;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 16px;
}

.pfl-otp-card {
    width: 100%;
    max-width: 480px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

.pfl-otp-title {
    color: #0F1F4B;
    font-weight: 700;
    margin-bottom: 8px;
}

.pfl-otp-sub {
    color: #64748B;
    margin-bottom: 24px;
}

.pfl-otp-email {
    color: #0F1F4B;
}

.pfl-otp-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.pfl-otp-error {
    color: #DC2626;
    font-size: 13px;
    margin-top: 12px;
}

.pfl-otp-submit {
    /* 48px — README §14 correction 23/07 (was 52): matches Login and the
       registration form. */
    height: 48px;
    border-radius: 10px;
    margin-top: 24px;
}

.pfl-otp-resend {
    margin-top: 16px;
    font-size: 14px;
}

.pfl-otp-resend-q {
    color: #64748B;
    margin-right: 4px;
}

.pfl-otp-resend-in {
    color: #94A3B8;
}

/* No divider/border above this — the spec calls it out. */
.pfl-otp-back {
    margin-top: 12px;
}

/* Copyright line under the card (README addition 23/07 — in the reference
   image, previously undocumented). */
.pfl-otp-foot {
    margin: 24px 0 0;
    font-size: 12px;
    color: #94A3B8;
    text-align: center;
}

@media (max-width: 768px) {
    .pfl-otp-page { padding: 40px 12px; }
    .pfl-otp-card { padding: 24px; border: none; border-radius: 0; }
}

/* ── Profile setup (name capture after email verification) ───────────────
   Shared by the onboarding wizard shell, so two rules from the 19/07 specs
   land here for every step at once:
   - WHITE page background (UXPatterns §10, 22/07): #FFFFFF is the default
     for all single-section pages; tinted backgrounds are reserved for
     alternating multi-section pages. The old #F8FAFC here was exactly the
     undocumented tint that review found live on step 1.
   - VERTICAL CENTRING (DesignTokens §6, 21/07): the card centres in the
     viewport (header is 64px) instead of top-anchoring, so short-content
     states (step 5 Verified) stop leaving dead space below. Content taller
     than the viewport is unaffected — the container just grows. */
.pfl-setup-page {
    background: #FFFFFF;
    min-height: calc(100vh - 64px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 64px 16px;

    /* The brand font, declared on the SHELL so the native h1/p elements
       every auth card contains inherit it. Without this they fell back to
       the body's MudBlazor default (Helvetica) — the "inconsistent font"
       the ForgotPassword README 22/07 flagged, and it affected Login's own
       title identically. Mud components inside are unaffected either way. */
    font-family: var(--pfl-font, 'Plus Jakarta Sans', sans-serif);
}

.pfl-setup-card {
    width: 100%;
    max-width: 480px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Not uppercase: this label is localised into Greek, and forcing capitals
   strips the accents. */
.pfl-setup-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #2B2E7C;
    margin-bottom: 6px;
}

.pfl-setup-title {
    color: #0F1F4B;
    font-weight: 700;
    margin-bottom: 8px;
}

.pfl-setup-sub {
    color: #64748B;
}

.pfl-setup-submit {
    height: 48px;
    border-radius: 8px;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .pfl-setup-page { padding: 40px 12px; }
    .pfl-setup-card { padding: 24px; border: none; box-shadow: none; border-radius: 0; }
}

/* ── Google sign-in button (shared: chooser page + login page) ──────────── */
.pfl-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', 'Open Sans', sans-serif);
    font-size: 15px;
    font-weight: 600;
    /* Stays dark on every state. Browsers recolour visited anchors, and this
       renders as an <a>, which is how the label used to go purple. */
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pfl-btn-google:hover {
    border-color: #CBD5E1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: #374151;
    text-decoration: none;
}

.pfl-btn-google:active,
.pfl-btn-google:focus,
.pfl-btn-google:visited {
    color: #374151;
    text-decoration: none;
}

.pfl-btn-google:focus-visible {
    outline: 2px solid #2B2E7C;
    outline-offset: 2px;
}

.pfl-btn-google__icon {
    width: 20px;
    height: 20px;
    flex: none;
}

/* ── "or" divider ──────────────────────────────────────────────────────── */
.pfl-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', 'Open Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: #94A3B8;
}

.pfl-or-divider::before,
.pfl-or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}

/* ── Account-type chooser ───────────────────────────────────────────────── */
.pfl-choose {
    background: #FFFFFF;
    padding: 60px 24px 0;
}

.pfl-choose-inner {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    max-width: 1100px;
    margin: 0 auto;
    gap: 0;
}

/* ?type= narrows the page to one audience — one column, no orphan divider. */
.pfl-choose-inner--single {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

.pfl-choose-col {
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

.pfl-choose-divider {
    background: #E2E8F0;
    width: 1px;
}

/* Sentence case: these are localised into Greek, where forcing capitals
   strips the accents. */
.pfl-choose-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #2B2E7C;
    margin-bottom: 8px;
}

.pfl-choose-heading {
    font-size: 28px;
    font-weight: 700;
    color: #0F1F4B;
    margin: 0 0 8px;
    line-height: 1.2;
}

/* PROF-29: the Greek client heading wraps to a second line, pushing the two
   columns out of vertical alignment. When the columns sit side by side, keep
   every heading on a single line by scaling it to the column width — both
   headings share the formula so they stay the same size. Single-column and
   stacked (mobile) layouts have no cross-column alignment to protect, so
   they keep the wrap. */
@media (min-width: 769px) {
    .pfl-choose-inner:not(.pfl-choose-inner--single) .pfl-choose-heading {
        white-space: nowrap;
        font-size: min(28px, 5.8cqw);
    }
}

.pfl-choose-sub {
    font-size: 15px;
    color: #64748B;
    margin: 0 0 24px;
}

.pfl-choose-email {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', 'Open Sans', sans-serif);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.pfl-choose-login {
    text-align: center;
    font-size: 14px;
    color: #64748B;
    margin: 20px 0 0;
}

.pfl-choose-login a {
    color: #2B2E7C;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

.pfl-choose-login a:hover { text-decoration: underline; }

.pfl-choose-all {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
}

.pfl-choose-all a { color: #2B2E7C; text-decoration: none; }
.pfl-choose-all a:hover { text-decoration: underline; }

.pfl-choose-foot {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 48px;
    padding: 20px 40px;
    border-top: 1px solid #E2E8F0;
    font-size: 12px;
    color: #94A3B8;
}

.pfl-choose-foot a { color: #64748B; text-decoration: none; }
.pfl-choose-foot a:hover { text-decoration: underline; }

/* Stack below the tablet breakpoint: clients above, professionals below,
   with the vertical rule becoming a horizontal one. */
@media (max-width: 768px) {
    .pfl-choose { padding: 40px 0 0; }

    .pfl-choose-inner,
    .pfl-choose-inner--single {
        grid-template-columns: 1fr;
    }

    .pfl-choose-col { padding: 0 24px; }

    .pfl-choose-divider {
        width: auto;
        height: 1px;
        margin: 32px 24px;
    }

    .pfl-choose-heading { font-size: 24px; }
}

/* ── Login page (shared client + professional) ──────────────────────────
   Reuses .pfl-setup-card for the card chrome, .pfl-btn-brand for the CTA,
   .pfl-or-divider / .pfl-choose-login for the divider and sign-up line —
   only the pieces unique to this page (fields, remember/forgot row, error
   and lockout banners) get their own classes below. */
.pfl-login-card {
    max-width: 440px;
}

.pfl-login-title {
    font-size: 26px;
}

.pfl-login-sub {
    margin-bottom: 24px;
}

/* PROF-119: the login fields now reuse the sign-up page's .pfl-reg-* chrome
   (a block label above a native input), replacing the old MudBlazor floating-
   label fields that read wrongly and sat on the card border. The shared
   .pfl-reg-input--error already flags both fields equally on a failed attempt
   (anti-enumeration, see LoginErrorInvalid). Only the locked state needs a
   login-scoped tweak — a disabled input reads as greyed, not editable-white. */
.pfl-login-card .pfl-reg-input:disabled {
    background: #F8FAFC;
    color: #64748B;
    -webkit-text-fill-color: #64748B;
    cursor: not-allowed;
}

.pfl-login-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 20px;
}

/* The .pfl-login-remember rules that stood here were dropped with the
   MudCheckBox they targeted (PROF-198). One of them had never applied at all:
   it hung off .mud-checkbox-label, but MudBlazor renders the caption in a
   .mud-typography-body1 <p>, so the caption kept the 16px body scale — the
   "font too large" the client reported. The row is now .pfl-auth-remember. */
.pfl-login-forgot {
    font-size: 13px;
    font-weight: 600;
    color: #2B2E7C;
    text-decoration: none;
}

.pfl-login-forgot:hover { text-decoration: underline; }

.pfl-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', 'Open Sans', sans-serif);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 4px;
}

/* .pfl-btn-brand:disabled carries the look; this only adds the cursor for the
   plain <button>, which has no MudBlazor disabled class to hook. It used to
   restate opacity: .45 — that now fights the solid grey and, being later in
   the file at equal specificity, would win (PROF-224). */
.pfl-login-submit:disabled { cursor: not-allowed; }

.pfl-login-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.5;
}

.pfl-login-alert--error {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #B91C1C;
}

.pfl-login-alert--locked {
    background: #FEF3E2;
    border: 1px solid #FCD9A8;
    color: #B45309;
}

.pfl-login-alert .mud-icon-root {
    flex: none;
    margin-top: 1px;
}

.pfl-login-alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.pfl-login-help {
    text-align: center;
    font-size: 13px;
    color: #64748B;
    margin: 16px 0 0;
}

.pfl-login-help a {
    color: #2B2E7C;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

.pfl-login-help a:hover { text-decoration: underline; }

/* ── Registration by email (/user/signupform/{mode}, PROF-30) ────────────
   Shared template for clients, professionals and affiliates. Reuses
   .pfl-setup-card for the chrome, .pfl-btn-brand for the gradient CTA and
   .pfl-choose-login for the centred log-in line — the native inputs, the
   strength meter and the checkbox rows are the only pieces of its own. */
.pfl-reg-card {
    max-width: 480px;
}

.pfl-reg-back {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    text-decoration: none;
    margin-bottom: 14px;
}

.pfl-reg-back:hover { text-decoration: underline; }

.pfl-reg-title { font-size: 26px; }

.pfl-reg-sub {
    font-size: 14px;
    margin-bottom: 16px;
}

.pfl-reg-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0F1F4B;
    margin: 16px 0 6px;
}

.pfl-reg-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', 'Open Sans', sans-serif);
    font-size: 15px;
    color: #0F1F4B;
    background: #FFFFFF;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.pfl-reg-input::placeholder { color: #94A3B8; }

.pfl-reg-input:focus {
    outline: none;
    border-color: #2B2E7C;
    box-shadow: 0 0 0 3px rgba(43, 46, 124, 0.08);
}

/* !important: ties with the :focus rule above on an errored, focused field —
   the error colour must win either way. */
.pfl-reg-input--error { border-color: #C0392B !important; }

.pfl-reg-pw-wrap { position: relative; }

.pfl-reg-pw-wrap .pfl-reg-input { padding-right: 44px; }

.pfl-reg-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: #64748B;
    line-height: 0;
}

/* Hidden until the user starts typing (the markup only renders it then);
   3 segments, colour-coded by how many policy rules still fail. */
.pfl-reg-strength {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.pfl-reg-strength-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: #E2E8F0;
    transition: background 0.3s ease;
}

.pfl-reg-strength--weak .pfl-reg-strength-seg:nth-child(1) { background: #C0392B; }
.pfl-reg-strength--fair .pfl-reg-strength-seg:nth-child(-n+2) { background: #F59E0B; }
.pfl-reg-strength--strong .pfl-reg-strength-seg { background: #16A34A; }

.pfl-reg-strength-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

.pfl-reg-strength-label--weak { color: #C0392B; }
.pfl-reg-strength-label--fair { color: #F59E0B; }
.pfl-reg-strength-label--strong { color: #16A34A; }

.pfl-reg-field-error {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #C0392B;
    margin-top: 4px;
}

.pfl-reg-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.pfl-reg-check input[type="checkbox"] {
    accent-color: #2B2E7C;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    flex: none;
    cursor: pointer;
}

.pfl-reg-check a {
    color: #2B2E7C;
    font-weight: 600;
    text-decoration: none;
}

.pfl-reg-check a:hover { text-decoration: underline; }

.pfl-reg-check-hint {
    display: block;
    font-size: 12px;
    color: #94A3B8;
}

.pfl-reg-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    font-family: var(--pfl-font, 'Plus Jakarta Sans', 'Open Sans', sans-serif);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 24px;
    margin-bottom: 4px;
}

/* Cursor only — see .pfl-login-submit:disabled above for why the opacity that
   used to be restated here had to go (PROF-224). */
.pfl-reg-submit:disabled { cursor: not-allowed; }

/* ══ Auth pages — shared design tokens (PROF-198) ═══════════════════════════
   ONE source of truth for Login (/user/login), Sign-up (/user/signupform/{mode})
   and Forgot password (/user/forgot-password), per the Auth Pages style spec
   28/07. The three screens had drifted apart: cards were 440px vs 480px, the
   remember-me caption was a 16px MudBlazor <p> next to 13px sign-up captions,
   login used a 24px MudCheckBox where sign-up used a 16px native one, and the
   reset page's fields were MudBlazor outlined inputs while the other two used
   native .pfl-reg-input.

   Scoped to .pfl-auth — which ONLY these three pages carry — rather than to
   .pfl-setup-page, because the onboarding wizard and profile setup share that
   shell and are not in this spec's scope. Everything below therefore beats the
   generic .pfl-setup-, .pfl-login- and .pfl-reg- rules on specificity alone
   (0,2,0 vs 0,1,0) without needing !important.

   (Do not write a wildcard like .pfl-setup- followed by a star and a slash in
   these comments: the slash-star pair closes the comment early and the CSS
   parser then eats the rule that follows it.) */

/* §2 + §6 — card. 420px on all three (login was 440, sign-up 480: AC-AU-07). */
.pfl-auth .pfl-setup-card {
    max-width: 420px;
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* §2 — type. The generic .pfl-login-title/.pfl-reg-title 26px is overridden
   here so all three headings share one scale. */
.pfl-auth .pfl-setup-title {
    font-size: 24px;
    font-weight: 700;
    color: #2E4057;
}

.pfl-auth .pfl-setup-sub {
    font-size: 14px;
    font-weight: 400;
    color: #7F8C8D;
}

/* §5 — the reset heading is the longest of the three and wrapped at 24px.
   The spec asks for 22px, but that does not actually fit: inside the 420px card
   with 36px side padding the line has 346px to work in, and "Επαναφορά κωδικού
   πρόσβασης" measures 360px at 22px — still two lines. 21px (343px) fits by
   2.5px, which any font-fallback metric difference would eat, so this is set to
   20px (327px) to hold AC-AU-08 with real margin. */
.pfl-auth--reset .pfl-setup-title { font-size: 20px; }

.pfl-auth .pfl-reg-label { color: #2E4057; }

/* §2 — inputs. Native fields (login + sign-up). */
.pfl-auth .pfl-reg-input {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 14px;
    color: #1A1A1A;
}

.pfl-auth .pfl-reg-input::placeholder { color: #B0B7C3; }

.pfl-auth .pfl-reg-input:focus {
    border: 1.5px solid #2E4057;
    box-shadow: none;
}

/* §2 — inputs, continued: the reset flow's fields are MudBlazor outlined
   MudTextFields (they carry live validation for the email and the new-password
   pair), so they are restyled to the same tokens rather than rebuilt as native
   inputs — a structural swap there would mean re-implementing validated
   password logic on a security flow for a purely visual ticket. The border
   lives on MudBlazor's <fieldset>, hence the !important: its own rules set the
   same properties at equal specificity. */
.pfl-auth .pfl-login-field .mud-input-outlined fieldset,
.pfl-auth .pfl-login-field .mud-input-outlined:hover fieldset {
    border-width: 1px !important;
    border-color: #D0D5DD !important;
    border-radius: 8px !important;
}

.pfl-auth .pfl-login-field .mud-input-outlined.mud-focused fieldset {
    border-width: 1.5px !important;
    border-color: #2E4057 !important;
}

.pfl-auth .pfl-login-field .mud-input-slot {
    font-size: 14px;
    color: #1A1A1A;
}

.pfl-auth .pfl-login-field .mud-input-label { color: #7F8C8D; }
.pfl-auth .pfl-login-field .mud-input-label.mud-focused { color: #2E4057; }

/* §2 — inputs, continued: Chrome paints autofilled fields pale blue with a UA
   style that no ordinary background declaration can win, so the white set above
   survives typing but not a saved-credentials fill. The only lever is a large
   inset shadow, which paints over the UA layer; text colour needs its own
   -webkit-text-fill-color for the same reason. The transition delay is the
   standard trick to stop Chrome re-applying the tint on blur.
   Placed last so it outranks the :focus rules above, which set box-shadow at
   equal specificity; !important guards against a later reorder. Covers both the
   native login/sign-up fields and the reset flow's MudBlazor inputs. */
.pfl-auth .pfl-reg-input:-webkit-autofill,
.pfl-auth .pfl-reg-input:-webkit-autofill:hover,
.pfl-auth .pfl-reg-input:-webkit-autofill:focus,
.pfl-auth .pfl-reg-input:-webkit-autofill:active,
.pfl-auth .pfl-login-field input:-webkit-autofill,
.pfl-auth .pfl-login-field input:-webkit-autofill:hover,
.pfl-auth .pfl-login-field input:-webkit-autofill:focus,
.pfl-auth .pfl-login-field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #1A1A1A;
    caret-color: #1A1A1A;
    transition: background-color 100000s ease-in-out 0s;
}

/* §2 — primary button. The site-wide .pfl-btn-brand gradient is two near-
   identical navies (#0F1F4B → #2B2E7C) and reads as a flat block, which is the
   "flat solid dark indigo" the client reported on both the login and the reset
   CTA. The spec's stops are used here; !important is required to beat
   .pfl-btn-brand's own !important background. Scoped, so every other CTA on the
   site keeps the existing brand gradient untouched. */
.pfl-auth .pfl-btn-brand {
    background: linear-gradient(135deg, #2E4057 0%, #4A6FA5 100%) !important;
}

.pfl-auth .pfl-btn-brand:hover {
    background: linear-gradient(135deg, #26364A 0%, #3F5E8D 100%) !important;
}

/* §4 — the disabled state was the same gradient at 45% opacity, which came out
   a muted lavender that still read as "sort of active"; the client saw a filled
   form and a button that looked broken. Solid #BDC3C7 at full opacity makes the
   two states unmistakable (AC-AU-05/06). Overrides .pfl-login-submit:disabled
   and .pfl-reg-submit:disabled, which set opacity: .45. */
/* The auth-scoped copy of this rule is gone: PROF-224 promoted it to the
   global .pfl-btn-brand:disabled, so the auth pages now inherit what they
   introduced. */

/* §2 — bottom links. */
.pfl-auth .pfl-login-forgot,
.pfl-auth .pfl-choose-login a,
.pfl-auth .pfl-reg-check a {
    font-size: 13px;
    font-weight: 600;
    color: #2E4057;
}

/* §2 — checkbox, shared by login's remember-me and sign-up's two consent rows
   (AC-AU-04). Native + appearance:none rather than MudCheckBox: the spec
   pins BOTH states, and the unchecked one (white fill, 1.5px #D0D5DD border)
   cannot be reached through MudBlazor's internal SVG tick without fighting it,
   whereas this renders byte-identically on both pages. */
/* The [type="checkbox"] qualifier is load-bearing: the sign-up page's older
   .pfl-reg-check input[type="checkbox"] rule also sets width/height, and at
   (0,2,1) it outranks a plain .pfl-auth .pfl-auth-check-box (0,2,0) — which
   left sign-up's boxes at 16px while login's were 18px, i.e. exactly the
   inconsistency AC-AU-04 is about. This selector is (0,3,0), so it wins
   outright rather than by source order. */
.pfl-auth .pfl-auth-check-box[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background: #FFFFFF;
    border: 1.5px solid #D0D5DD;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pfl-auth .pfl-auth-check-box:checked {
    background: #2E4057;
    border-color: #2E4057;
}

/* The tick: a rotated two-sided border, so it needs no icon font or SVG. */
.pfl-auth .pfl-auth-check-box:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pfl-auth .pfl-auth-check-box:focus-visible {
    outline: 2px solid #2E4057;
    outline-offset: 2px;
}

.pfl-auth .pfl-auth-check-box:disabled { cursor: not-allowed; opacity: 0.5; }

/* §3 — remember-me row: 13px / 400 / grey, replacing MudBlazor's 16px body1
   paragraph (AC-AU-03). */
.pfl-auth .pfl-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.pfl-auth .pfl-auth-remember span {
    font-size: 13px;
    font-weight: 400;
    color: #7F8C8D;
}

/* §6 — mobile padding. Note that the auth cards no longer go full-bleed under
   768px the way the other .pfl-setup-card screens do: media queries add no
   specificity, so the .pfl-auth rule at the top of this block (0,2,0) keeps the
   16px radius and the shadow against the generic mobile rule (0,1,0). That is
   deliberate and matches §6, which lists one set of card dimensions for all
   breakpoints and varies only the padding. */
@media (max-width: 768px) {
    .pfl-auth .pfl-setup-card { padding: 24px 20px; }
}

/* ── Header avatar + user dropdown ─────────────────────────────────────── */
.pfl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E2E8F0;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
    flex: none;
}

.pfl-avatar:hover,
.pfl-avatar:focus-visible {
    border-color: #2B2E7C;
    outline: none;
}

.pfl-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pfl-avatar__icon {
    font-size: 18px !important;
    width: 18px;
    height: 18px;
    color: #64748B;
}

/* Larger variant for the dropdown's user block. */
.pfl-avatar--lg {
    width: 40px;
    height: 40px;
    cursor: default;
    border-color: transparent;
}

.pfl-avatar--lg:hover { border-color: transparent; }

.pfl-usermenu {
    min-width: 220px;
    padding: 8px 0;
}

.pfl-usermenu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #E2E8F0;
}

.pfl-usermenu-head__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pfl-usermenu-head__name {
    font-size: 14px;
    font-weight: 600;
    color: #0F1F4B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Emails are long and arbitrary — clip rather than let one widen the menu. */
.pfl-usermenu-head__email {
    font-size: 12px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Log out is the only destructive item, so it is the only red one. All three
   states are set explicitly: MudBlazor's own item styling wins otherwise. */
.pfl-usermenu-logout,
.pfl-usermenu-logout .mud-icon-root {
    color: #DC2626 !important;
}

.pfl-usermenu-logout:hover {
    background-color: #FEF2F2 !important;
}

.pfl-usermenu-logout:hover,
.pfl-usermenu-logout:hover .mud-icon-root {
    color: #B91C1C !important;
}

.pfl-usermenu-logout:active {
    background-color: #FEE2E2 !important;
}

/* PROF-97 §7: persistent "X/4 checks" banner shown at the top of every page
   while a submitted professional's account is still under review. */
.pfl-verif-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-height: 36px;
    padding: 8px 16px;
    margin: 0 0 16px;
    background: #EEF0F8;
    color: #2B2E7C;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
}

.pfl-verif-banner__link {
    color: #2B2E7C;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

    .pfl-verif-banner__link:hover {
        color: #0F1F4B;
    }