/* =============================================================================
   WrkMan for Business — 1:1 mirror of Figma node 19290:1979
   File: u9cbxeMghvEo4NjwXRpxn9 (WrkMan)
   Frame: 1440 × 920 (+ dark "Built for teams that need:" band)
   Design tokens, coordinates, sizes and typography taken directly from Figma.
   ========================================================================== */

/* -- Design tokens ---------------------------------------------------------- */
:root {
    --fig-card-bg:        #F3F8F9;
    --fig-black:          #0C2D52;
    --fig-black-deep:     #122E49;
    --fig-muted:          #5E758D;
    --fig-primary:        #00B7FF;
    --fig-primary-accent: #1A9BE8;
    --fig-app-blue:       #2046CB;
    --fig-white:          #FFFFFF;
    --fig-border-grey:    #D1D1D1;
    --fig-border-disab:   #CED5DC;
    --fig-cancel-grey:    #EFEFEF;
    --fig-label:          #A6C5E2;
    --fig-mid-grey:       #D0D0D0;
    --fig-light-cyan:     #B3E9FF;
    --fig-light-blue:     #D9EBFB;

    /* Landing-page section fills, exact from Figma node 19290:1978 cache */
    --fig-stats-bg:       #152D82;   /* node 19290:2403 */
    --fig-cta-bg:         #204DCB;   /* node 19290:2484 */
    --fig-footer-bg:      #0B1F45;   /* node 19290:2430 */

    --fig-avatar-a-bg: rgba(32,77,203,0.2);
    --fig-avatar-a-fg: #204DCB;
    --fig-avatar-b-bg: rgba(29,190,132,0.2);
    --fig-avatar-b-fg: #1DBE84;
    --fig-avatar-c-bg: rgba(249,208,63,0.2);
    --fig-avatar-c-fg: #F9D03F;
    --fig-avatar-d-bg: rgba(0,183,255,0.2);
    --fig-avatar-d-fg: var(--fig-primary);
}

/* -- Base ------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--fig-card-bg);
    color: var(--fig-black);
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* =============================================================================
   Hero canvas — fixed 1440 × 920 per Figma. Scaled on narrower viewports.
   ========================================================================== */
.fig-hero-canvas {
    width: 100%;
    background: var(--fig-card-bg);
    overflow-x: clip;
}

.fig-hero-body {
    position: relative;
    width: 1440px;
    height: 920px;
    margin: 0 auto;
    background: var(--fig-card-bg);
    overflow: hidden;
}

.fig-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(32,70,203,0.09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(32,70,203,0.09) 1px, transparent 1px);
    background-size: 80.69px 80.69px;
    background-position: -284.2px -144.37px;
}

/* =============================================================================
   Topbar
   ========================================================================== */
.fig-topbar {
    position: relative;
    width: 1440px;
    height: 90px;
    margin: 0 auto;
    z-index: 2;
}

/* Logo group (64, 30) 252.79 × 52.5 */
.fig-brand {
    position: absolute;
    top: 30px;
    left: 64px;
    width: 252.79px;
    height: 52.5px;
    display: block;
}
.fig-brand-logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 171.34px;
    height: 52.5px;
    object-fit: contain;
}
.fig-brand-divider {
    position: absolute;
    left: 163px;
    top: 8px;
    width: 0.5px;
    height: 36px;
    background: var(--fig-app-blue);
}
.fig-brand-tag {
    position: absolute;
    left: 171.79px;
    top: 18.15px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 12.96px;
    line-height: 1.2;
    color: var(--fig-black);
    white-space: nowrap;
}

/* Search pill (420.79, 33.13) 402.55 × 46.23 */
.fig-search {
    position: absolute;
    top: 33.13px;
    left: 420.79px;
    width: 402.55px;
    height: 46.23px;
    background: var(--fig-white);
    border: 0.81px solid var(--fig-cancel-grey);
    border-radius: 20.34px;
    box-shadow: 0 4.88px 17.9px rgba(0,0,0,0.1);
}
.fig-search-icon {
    position: absolute;
    left: 19.53px;
    top: 12.95px;
    width: 20.34px;
    height: 20.34px;
}
.fig-search-labels {
    position: absolute;
    top: 13.35px;
    left: 56.08px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fig-search-prefix {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--fig-black);
}
.fig-search-input {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--fig-black);
    background: transparent;
    border: 0;
    outline: none;
    width: 140px;
}
.fig-search-input::placeholder { color: var(--fig-label); }

/* Autocomplete dropdown under the search pill — 1:1 with wrkmanapp.com */
.fig-search-results,
#search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    scroll-behavior: smooth;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 3px 16px -5px #000;
    padding: 20px;
    z-index: 50;
    box-sizing: border-box;
}

/* Hide the actual checkbox — the whole bubble is clickable (matches live) */
#search-results .check {
    display: none;
}

/* One gray-bubble row per matching service */
#search-results .service-item {
    padding: 10px;
    margin-bottom: 5px;
    background: #d3d3d35c;
    border-radius: 8px;
    cursor: pointer;
}
#search-results .service-item:last-child { margin-bottom: 0; }

#search-results .service-item.selected {
    background: blue;
    color: white;
}
#search-results .service-item label {
    display: block;
    width: 100%;
    margin: 0;
    cursor: pointer;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    color: inherit;
    user-select: none;
}
.fig-search-btn {
    position: absolute;
    top: 3.87px;
    left: 277.21px;
    width: 121.24px;
    height: 39.2px;
    background: var(--fig-card-bg);
    border: 0.81px solid var(--fig-primary);
    border-radius: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: var(--fig-app-blue);
    text-align: left;
    padding-left: 37px;
}

/* Right nav (864, 37.05) 496.1 × 38.95 */
.fig-nav-right {
    position: absolute;
    top: 37.05px;
    left: 864px;
    width: 496.1px;
    height: 38.95px;
}
.fig-nav-links {
    position: absolute;
    top: 9.48px;
    left: 0;
    display: flex;
    gap: 32px;
    align-items: center;
}
.fig-nav-links a {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    color: var(--fig-black);
}
.fig-nav-actions {
    position: absolute;
    top: 0;
    left: 231px;
    display: flex;
    gap: 12px;
    align-items: center;
}

/* =============================================================================
   Buttons
   ========================================================================== */
.fig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 10.7px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 14.98px;
    line-height: 1.2;
}
.fig-btn-ghost-sm {
    width: 89.45px;
    height: 38.95px;
    background: var(--fig-white);
    border: 0.86px solid var(--fig-border-disab);
    color: var(--fig-black);
}
.fig-btn-primary-sm {
    width: 163.65px;
    height: 37.24px;
    background: var(--fig-primary);
    color: var(--fig-white);
    box-shadow: 0 4.28px 21.4px rgba(26,155,232,0.35);
}
.fig-btn-primary-lg {
    height: 44px;
    padding: 0 32px;
    background: var(--fig-primary);
    color: var(--fig-white);
    border-radius: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fig-btn-ghost-lg {
    height: 44px;
    padding: 0 31.8px;
    background: var(--fig-white);
    color: var(--fig-black);
    border: 1px solid var(--fig-border-grey);
    border-radius: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   Hero left column (80, 234) 787.44 × 420
   ========================================================================== */
.fig-hero-left {
    position: absolute;
    top: 234px;
    left: 80px;
    width: 787.44px;
    height: 420px;
    z-index: 1;
}
.fig-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5.8px 15.8px;
    background: rgba(179,233,255,0.33);
    border: 1px solid rgba(0,183,255,0.2);
    border-radius: 9999px;
    margin-left: 0.24px;
}
.fig-hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--fig-primary-accent);
}
.fig-hero-badge-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.333;
    color: var(--fig-primary-accent);
    white-space: nowrap;
}

/* H1 group (0.24, 53.6) 787.2 × 122.12 */
.fig-hero-heading {
    position: absolute;
    top: 53.6px;
    left: 0.24px;
    width: 787.2px;
    height: 122.12px;
}
.fig-hero-h1 {
    margin: 0;
    width: 589px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 50px;
    line-height: 1.2;
    color: var(--fig-black);
    letter-spacing: -0.01em;
}
.fig-hero-h1-accent {
    position: absolute;
    top: 118.12px;
    left: 0;
    width: 269px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(26,155,232,1) 0%, rgba(26,155,232,0) 100%);
}

.fig-hero-desc {
    position: absolute;
    top: 197.6px;
    left: 0.24px;
    width: 539px;
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5625;
    color: var(--fig-black);
}

.fig-hero-ctas {
    position: absolute;
    top: 304px;
    left: 0;
    width: 787.2px;
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.fig-hero-social {
    position: absolute;
    top: 380px;
    left: 0;
    width: 787.2px;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.fig-avatar-stack { display: flex; }
.fig-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: 1px solid var(--fig-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.333;
    margin-left: -8px;
}
.fig-avatar:first-child { margin-left: 0; }
.fig-avatar--a { background: var(--fig-avatar-a-bg); color: var(--fig-avatar-a-fg); }
.fig-avatar--b { background: var(--fig-avatar-b-bg); color: var(--fig-avatar-b-fg); }
.fig-avatar--c { background: var(--fig-avatar-c-bg); color: var(--fig-avatar-c-fg); }
.fig-avatar--d { background: var(--fig-avatar-d-bg); color: var(--fig-avatar-d-fg); }
.fig-hero-social-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4286;
    color: var(--fig-black-deep);
}

/* =============================================================================
   Hero right column (824.44, 233.77) 482.8 × 426.72
   ========================================================================== */
.fig-hero-right {
    position: absolute;
    top: 233.77px;
    left: 824.44px;
    width: 482.8px;
    height: 426.72px;
    z-index: 1;
}
.fig-hero-art {
    position: absolute;
    top: -39.39px;
    left: 21.9px;
    width: 433.21px;
    height: 466.11px;
}
.fig-hero-art-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 382.14px;
    height: 420.19px;
    background: var(--fig-light-blue);
    border-radius: 8px;
}
.fig-hero-art-border {
    position: absolute;
    top: 22.82px;
    left: 23.58px;
    width: 356.11px;
    height: 399.88px;
    border: 2.95px solid var(--fig-primary-accent);
    border-radius: 6px;
}
.fig-hero-art-img {
    position: absolute;
    top: 18.28px;
    left: 42.66px;
    width: 390.55px;
    height: 447.83px;
    object-fit: cover;
    border-radius: 6px;
}

.fig-float {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6.11px;
    padding: 9.01px;
    background: var(--fig-white);
    border-radius: 9.17px;
    box-shadow: 0 7.64px 70.43px -2.29px rgba(122,147,184,1);
}
.fig-float-ic {
    width: 22.54px;
    height: 22.54px;
    background: var(--fig-light-cyan);
    border-radius: 7.04px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
    font-size: 11.12px;
}
.fig-float-ic--sq {
    width: 24.44px;
    height: 24.44px;
    border-radius: 7.64px;
    font-size: 10.69px;
}
.fig-float-txt { display: flex; flex-direction: column; }
.fig-float-txt strong {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 8.45px;
    line-height: 1.333;
    color: var(--fig-black-deep);
}
.fig-float-txt small {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 7.04px;
    line-height: 1.5;
    color: var(--fig-muted);
}
.fig-float--1 { top: 386.86px; left: 25.19px; }
.fig-float--2 { top: 96.55px;  left: 389.79px; }
.fig-float--3 { top: 42.5px;   left: 8px; }

/* =============================================================================
   Dark band — "Built for teams that need:" + 4 pills
   ========================================================================== */
.fig-dark-band {
    position: relative;
    width: 100%;
    background: var(--fig-black-deep);
    padding: 0 80px;
}
.fig-dark-band-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 26px 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
.fig-dark-band-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 17.44px;
    line-height: 1.2;
    color: var(--fig-mid-grey);
    margin-right: 12px;
}
.fig-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(255,255,255,0.08);
    border: 1.07px solid rgba(255,255,255,0.15);
    border-radius: 134.18px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: rgba(255,255,255,0.72);
}
.fig-pill--verified { color: rgba(255,255,255,0.75); }

/* =============================================================================
   Landing-page section tokens — Figma node 19290:1978 (Business Landing pg)
   Values pulled from cached Figma data:
     - layout_76X3VU (steps)    padding 112px 80px, fill #FFFFFF
     - layout_W0E2HO (stats)    padding 112px 80px, fill #152D82
     - layout_T0JX18 (features) y 2509.5, fill #FFFFFF
     - layout_AGMQSE (CTA)      padding 80px 64px, fill #204DCB, radius 24px, inset x=80 w=1280
     - layout_BX6NC3 (footer)   padding 64px 80px 32px, fill #0B1F45
   ========================================================================== */

/* =============================================================================
   Section: Up and running in three steps — node 19290:2148
   ========================================================================== */
.fig-steps {
    background: #FFFFFF;
    padding: 112px 80px;
    width: 100%;
    box-sizing: border-box;
}
.fig-steps-inner {
    max-width: 1280px;
    margin: 0 auto;
}
.fig-steps-head { margin-bottom: 56px; }
.fig-steps-h2 {
    margin: 0 0 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.2;
    color: var(--fig-black);
    letter-spacing: -0.01em;
}
.fig-steps-sub {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fig-muted);
}
.fig-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Step card */
.fig-step {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E6EDF5;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 6px rgba(12,45,82,0.04);
    display: flex;
    flex-direction: column;
    min-height: 520px;
}
.fig-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 6px 12px;
    background: #0E2B5A;
    color: #FFFFFF;
    border-radius: 9999px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 20px;
}
.fig-step-pill span { font-size: 11px; }

.fig-step-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}
.fig-step-num--1 { color: #8A7BFF; }  /* purple */
.fig-step-num--2 { color: #E17BB7; }  /* pink  */
.fig-step-num--3 { color: #84D4AD; }  /* mint  */

.fig-step-title {
    margin: 0 0 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
    color: var(--fig-black);
}
.fig-step-desc {
    margin: 0 0 22px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.55;
    color: #6A7F97;
}

/* Illustration box */
.fig-step-art {
    margin-top: auto;
    background: #E7F1FA;
    border-radius: 12px;
    padding: 24px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   Section: Stats band — node 19290:2403
   Fill #152D82, 1440×441 fixed.
   ========================================================================== */
.fig-stats {
    position: relative;
    background: #152D82;
    width: 100%;
    height: 441px;
    overflow: hidden;
}
.fig-stats-deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 720px;
    height: 100%;
    pointer-events: none;
}
.fig-stats-dots {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 3;
}
.fig-stats-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 9999px;
    border: 1.5px solid rgba(179,233,255,0.6);
    background: transparent;
    display: block;
    cursor: pointer;
    transition: all 0.35s ease;
}
.fig-stats-dot:hover { border-color: #B3E9FF; }
.fig-stats-dot:focus-visible {
    outline: 2px solid #B3E9FF;
    outline-offset: 3px;
}
.fig-stats-dot--active {
    width: 10px;
    height: 30px;
    border-radius: 9999px;
    background: #B3E9FF;
    border-color: #B3E9FF;
}
.fig-stats-inner {
    position: relative;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    z-index: 1;
}
.fig-stats-left {
    max-width: 560px;
    display: flex;
    flex-direction: column;
}
.fig-stats-head {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.2;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}
.fig-stats-cta {
    margin-top: 28px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    background: #00B7FF;
    color: #FFFFFF;
    border-radius: 10px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0,183,255,0.35);
}
.fig-stats-cta:hover { background: #1A9BE8; }

.fig-stats-right {
    position: relative;
    width: 560px;
    min-height: 220px;
    display: block;
    flex-shrink: 0;
}
.fig-stats-slide {
    position: absolute;
    inset: 0;
    text-align: right;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: none;
}
.fig-stats-slide.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.fig-stats-value {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 140px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #B3E9FF;
    white-space: nowrap;
}
.fig-stats-label {
    margin: 16px 0 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #B3E9FF;
}

/* =============================================================================
   Section: Everything your team needs (features) — node 19290:2223
   ========================================================================== */
.fig-feats {
    background: #FFFFFF;
    padding: 112px 80px;
}
.fig-feats-inner {
    max-width: 1280px;
    margin: 0 auto;
}
.fig-feats-head { margin-bottom: 56px; }
.fig-feats-h2 {
    margin: 0 0 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.2;
    color: var(--fig-black);
    letter-spacing: -0.01em;
}
.fig-feats-sub {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fig-muted);
}

.fig-feats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}
.fig-feats-left,
.fig-feats-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fig-feats-sub-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Card base */
.fig-feat {
    background: #FFFFFF;
    border: 1px solid #E6EDF5;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 6px rgba(12,45,82,0.04);
    display: flex;
    flex-direction: column;
}
.fig-feat-title {
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--fig-black);
}
.fig-feat-desc {
    margin: 0 0 20px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.55;
    color: #6A7F97;
}

/* Analytics card */
.fig-feat--analytics { min-height: 480px; }
.fig-feat-chart {
    background: #F3F8FE;
    border-radius: 12px;
    padding: 20px;
    margin-top: auto;
}
.fig-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.fig-chart-lbl {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--fig-black);
}
.fig-chart-range {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: var(--fig-muted);
}
.fig-chart-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    height: 140px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(32,70,203,0.1);
}
.fig-chart-pair {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex: 1;
}
.fig-chart-b {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-height: 4px;
}
.fig-chart-b--l { background: #B9CFF5; }
.fig-chart-b--d { background: #204DCB; }

.fig-chart-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.fig-chart-stat {
    background: #FFFFFF;
    border: 1px solid #E6EDF5;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.fig-cs-lbl {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: var(--fig-muted);
}
.fig-cs-val {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--fig-black);
}

/* Team card */
.fig-feat--team { min-height: 240px; }
.fig-members {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}
.fig-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F3F8FE;
    border-radius: 10px;
}
.fig-mem-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.fig-mem-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.fig-mem-text strong {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--fig-black);
    line-height: 1.3;
}
.fig-mem-text small {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: var(--fig-muted);
}
.fig-mem-more {
    color: var(--fig-muted);
    font-size: 18px;
    padding: 0 4px;
}

/* Invoice card */
.fig-feat--invoice { min-height: 220px; }
.fig-invoice {
    background: #F3F8FE;
    border-radius: 10px;
    padding: 16px;
    margin-top: auto;
}
.fig-inv-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.fig-inv-lbl {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--fig-muted);
}
.fig-inv-val {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: var(--fig-black);
}
.fig-inv-bar {
    height: 8px;
    background: #DDE7F4;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 10px;
}
.fig-inv-bar-fill {
    display: block;
    height: 100%;
    background: #204DCB;
    border-radius: 9999px;
}
.fig-inv-foot {
    display: flex;
    justify-content: space-between;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: var(--fig-muted);
}

/* Recurring + Multi-Location cards */
.fig-feat--recurring,
.fig-feat--loc { min-height: 240px; }
.fig-sched,
.fig-locs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}
.fig-sched-row,
.fig-loc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F3F8FE;
    border-radius: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--fig-black);
}
.fig-sched-ic,
.fig-loc-ic {
    font-size: 14px;
    width: 18px;
    display: inline-flex;
    justify-content: center;
    flex-shrink: 0;
}
.fig-sched-day,
.fig-loc-name { flex: 1; }
.fig-sched-time,
.fig-loc-count {
    font-weight: 500;
    font-size: 11px;
    color: var(--fig-muted);
}

/* =============================================================================
   Section: CTA — node 19290:2484
   Fill #204DCB, inset w=1280 x=80, border-radius 24px, padding 80 64.
   ========================================================================== */
.fig-cta-wrap {
    background: #FFFFFF;
    padding: 0 80px 80px;
    box-sizing: border-box;
}
.fig-cta {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    background: #204DCB;
    border-radius: 24px;
    overflow: hidden;
}
.fig-cta-deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 720px;
    height: 100%;
    pointer-events: none;
}
.fig-cta-inner {
    position: relative;
    padding: 80px 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    z-index: 1;
}
.fig-cta-left { max-width: 640px; }
.fig-cta-h2 {
    margin: 0 0 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1.15;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}
.fig-cta-sub {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.55;
    color: #D2DCF5;
    max-width: 560px;
}
.fig-cta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.fig-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: #FFFFFF;
    color: var(--fig-black);
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.fig-cta-btn:hover { background: #F3F8FE; }
.fig-cta-login {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #D2DCF5;
}
.fig-cta-login a {
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =============================================================================
   Footer — node 19290:2430
   Fill #0B1F45, padding 64px 80px 32px.
   ========================================================================== */
.wm-footer {
    background: #0B1F45;
    color: #8FA0C4;
    padding: 64px 80px 32px;
}
.wm-footer-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 56px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    gap: 56px;
}

/* Brand column */
.wm-foot-brand { max-width: 360px; }
.wm-foot-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.wm-foot-logo img {
    width: 140px;
    height: auto;
    object-fit: contain;
}
.wm-foot-divider {
    width: 1px;
    height: 26px;
    background: rgba(143,160,196,0.45);
}
.wm-foot-tag {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #8FA0C4;
    line-height: 1;
}
.wm-foot-tagline {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: #B8C4DE;
}

/* Link columns */
.wm-foot-col h5 {
    margin: 0 0 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.wm-foot-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wm-foot-col ul li,
.wm-foot-col ul a {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #B8C4DE;
    transition: color 0.15s ease;
}
.wm-foot-col ul a:hover { color: #00B7FF; }

/* Contact list */
.wm-foot-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wm-foot-ic {
    width: 18px;
    display: inline-flex;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* Bottom bar */
.wm-foot-bar {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #8FA0C4;
}
.wm-foot-heart {
    font-size: 12px;
    vertical-align: middle;
}
.wm-foot-legal {
    display: flex;
    gap: 28px;
}
.wm-foot-legal a {
    color: #B8C4DE;
}
.wm-foot-legal a:hover { color: #00B7FF; }

/* =============================================================================
   Responsive — scale the 1440 canvas to keep 1:1 proportions on hero
   ========================================================================== */
@media (max-width: 1440px) {
    .fig-hero-canvas { overflow-x: hidden; }
    .fig-topbar,
    .fig-hero-body {
        transform-origin: top center;
        transform: scale(calc(100vw / 1440));
    }
    .fig-hero-body  { height: calc(920px * (100vw / 1440)); }
    .fig-topbar     { height: calc(90px  * (100vw / 1440)); }
}

/* Below-hero sections: fluid-responsive rather than scaled */
@media (max-width: 1100px) {
    .fig-steps,
    .fig-feats { padding: 80px 40px; }
    .fig-stats { height: auto; min-height: 360px; padding: 72px 40px; }
    .fig-stats-inner { padding: 0; flex-direction: column; align-items: flex-start; gap: 32px; }
    .fig-stats-right { width: 100%; min-height: 180px; }
    .fig-stats-slide { text-align: left; }
    .fig-stats-value { font-size: 96px; }
    .fig-stats-dots {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        flex-direction: row;
        gap: 10px;
        align-self: flex-start;
    }
    .fig-stats-dot--active { width: 30px; height: 10px; }
    .fig-cta-wrap { padding: 0 40px 80px; }
    .fig-cta-inner { flex-direction: column; align-items: flex-start; padding: 56px 40px; }
    .fig-cta-right { align-items: flex-start; }
    .wm-footer { padding: 56px 40px 24px; }
    .wm-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 40px; }
}
@media (max-width: 720px) {
    .fig-steps-grid,
    .fig-feats-grid,
    .fig-feats-sub-row { grid-template-columns: 1fr; }
    .fig-steps-h2,
    .fig-feats-h2,
    .fig-stats-head,
    .fig-cta-h2 { font-size: 30px; }
    .fig-stats-value { font-size: 64px; }
    .fig-stats-label { font-size: 15px; }
    .fig-stats-right { min-height: 140px; }
    .fig-cta-inner { padding: 40px 24px; }
    .wm-footer-grid { grid-template-columns: 1fr; }
    .wm-foot-bar { flex-direction: column; gap: 10px; }
}

/* =============================================================================
   Search Result page — modal overlay on top of dimmed landing hero.
   Built 1:1 from reference image copy 9.png.
   ========================================================================== */

/* Lock page scroll while modal is open (JS toggles .no-scroll on body) */
body.no-scroll { overflow: hidden; }

/* Modal overlay — covers viewport with a dark navy dim at 75% opacity,
   exactly matching wrkmanapp.com's .fade backdrop. */
.fig-sr-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 70px 24px 40px;
    overflow-y: auto;
    background: hsla(212, 74%, 18%, 0.75);
}
.fig-sr-overlay.is-open { display: flex; }
.fig-sr-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

/* Modal card — ~500px wide matches screenshot proportions */
.fig-sr-modal {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 24px 80px -12px rgba(10,28,64,0.45);
    overflow: hidden;
    box-sizing: border-box;
}

/* Decorative dark-blue top strip with diamond pattern */
.fig-sr-decor {
    position: relative;
    height: 44px;
    width: 100%;
    background: #1F3D8A;
    line-height: 0;
}
.fig-sr-decor-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Close button — white circle sitting on the right edge of the decor strip */
.fig-sr-close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background: #FFFFFF;
    color: #0C2D52;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(10,28,64,0.25);
    transition: background 0.15s ease, transform 0.15s ease;
    z-index: 2;
}
.fig-sr-close:hover { background: #F3F8FE; }
.fig-sr-close:active { transform: translateY(-50%) scale(0.94); }

/* Body (below decor) */
.fig-sr-body {
    padding: 26px 32px 32px;
}

/* Header */
.fig-sr-head { margin-bottom: 20px; }
.fig-sr-title {
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.25;
    color: #0C2D52;
    letter-spacing: -0.01em;
    max-width: 220px;   /* force 2-line wrap to match reference */
}
.fig-sr-sub {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    color: #5E758D;
}
.fig-sr-kw {
    color: #1A9BE8;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

/* Form layout */
.fig-sr-form { display: flex; flex-direction: column; gap: 16px; }

.fig-sr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
.fig-sr-field-spacer { display: block; }

.fig-sr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fig-sr-field--full { grid-column: 1 / -1; }

.fig-sr-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.3;
    color: #0C2D52;
}
.fig-sr-label em {
    font-style: normal;
    font-weight: 500;
    color: #8A9BAE;
}

.fig-sr-field input,
.fig-sr-field textarea {
    width: 100%;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    color: #0C2D52;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.fig-sr-field textarea {
    resize: vertical;
    min-height: 72px;
    font-family: inherit;
}
.fig-sr-field input::placeholder,
.fig-sr-field textarea::placeholder { color: #B0BBC9; }
.fig-sr-field input:focus,
.fig-sr-field textarea:focus {
    border-color: #00B7FF;
    box-shadow: 0 0 0 3px rgba(0,183,255,0.15);
}

/* Service checkboxes — container populated by JS with selected service's skills */
.fig-sr-choices {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fig-sr-legend {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    color: #0C2D52;
    margin-bottom: 4px;
    padding: 0;
}

/* Injected skill rows inside the modal — plain, matches image copy 9.png */
#selected-services {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 200px;
    overflow-y: auto;
    padding: 2px 0;
}
#selected-services:empty { display: none; }
#selected-services .service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border-radius: 0;
    margin: 0;
}
/* Override Bootstrap 4 .form-check-input absolute positioning so the
   checkbox stays inline and labels aren't cut off. Mirrors live site. */
#selected-services .form-check-input {
    position: unset;
    margin-left: unset;
    margin-top: 0;
    width: 16px;
    height: 16px;
    accent-color: #1A9BE8;
    cursor: pointer;
    flex-shrink: 0;
}
#selected-services .service-item label {
    margin: 0;
    cursor: pointer;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #0C2D52;
    flex: 1;
    user-select: none;
    line-height: 1.3;
}
.fig-sr-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #0C2D52;
    position: relative;
}
.fig-sr-check input { position: absolute; opacity: 0; pointer-events: none; }
.fig-sr-box {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1.4px solid #C8D2DE;
    border-radius: 3px;
    background: #FFFFFF;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.fig-sr-check input:checked + .fig-sr-box {
    background: #1A9BE8;
    border-color: #1A9BE8;
}
.fig-sr-check input:checked + .fig-sr-box::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.fig-sr-check input:focus-visible + .fig-sr-box {
    box-shadow: 0 0 0 3px rgba(0,183,255,0.25);
}

/* Submit button */
.fig-sr-submit {
    width: 100%;
    padding: 14px 24px;
    background: #1EB4F1;
    color: #FFFFFF;
    border: 0;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(30,180,241,0.28);
    transition: background 0.15s ease, transform 0.15s ease;
    margin-top: 4px;
}
.fig-sr-submit:hover { background: #1A9BE8; }
.fig-sr-submit:active { transform: translateY(1px); }

/* Responsive */
@media (max-width: 560px) {
    .fig-sr-overlay { padding: 40px 16px 24px; }
    .fig-sr-body { padding: 22px 20px 24px; }
    .fig-sr-grid { grid-template-columns: 1fr; }
    .fig-sr-field-spacer { display: none; }
    .fig-sr-title { font-size: 20px; max-width: none; }
}

/* =============================================================================
   Login / Welcome Back — 1:1 with image copy 12/2/3
   Full-viewport 50/50 split: dark-navy brand panel on the left, white form right
   ========================================================================== */

.wm-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    width: 100%;
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.wm-auth,
.wm-auth *:not(svg):not(path) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ---------------------- Left (navy brand panel) ---------------------- */
.wm-auth-left {
    position: relative;
    background: #0A1C3D;
    padding: 32px 56px 56px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    color: #FFFFFF;
    overflow: hidden;
}

/* Brand row */
.wm-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
}
.wm-auth-brand-logo {
    width: 128px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 0 0 rgba(0,0,0,0));
    /* keep logo readable on navy; real brand image has blue mark + black text */
}
.wm-auth-brand-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.35);
}
.wm-auth-brand-tag {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #8FA0C4;
    letter-spacing: 0.01em;
}

/* Hero image with decorative arc */
.wm-auth-hero {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin-top: 16px;
}
.wm-auth-hero-arc {
    position: absolute;
    left: -22px;
    top: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
}
.wm-auth-hero-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 6;
    border-radius: 18px;
    overflow: hidden;
    background: #14274C;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.wm-auth-hero-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Placeholder state if image file missing */
.wm-auth-hero-frame.is-placeholder::after {
    content: '📷 Add login-hero.jpg in public/images/auth/';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: linear-gradient(135deg, #1A3366 0%, #0E2348 100%);
    color: rgba(255,255,255,0.6);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
}

/* Copy block (heading + description + pills) */
.wm-auth-copy {
    max-width: 440px;
    margin-top: auto;
}
.wm-auth-h2 {
    margin: 0 0 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.2;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}
.wm-auth-h2-accent {
    color: #7FB4E0;
    font-weight: 800;
}
.wm-auth-desc {
    margin: 0 0 22px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: #B8C4DE;
    max-width: 380px;
}
.wm-auth-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.wm-auth-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9999px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    line-height: 1;
}
.wm-auth-pill-ic { font-size: 12px; }

/* ---------------------- Right (white form panel) --------------------- */
.wm-auth-right {
    position: relative;
    background: #FFFFFF;
    padding: 24px 56px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.wm-auth-back {
    position: absolute;
    top: 28px;
    left: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #E6EDF5;
    border-radius: 9999px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #0C2D52;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wm-auth-back:hover {
    background: #F3F8FE;
    border-color: #C9D7E6;
}

.wm-auth-form {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wm-auth-head { text-align: center; margin-bottom: 6px; }
.wm-auth-title {
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-auth-sub {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #5E758D;
}

.wm-auth-field { display: flex; flex-direction: column; gap: 8px; }
.wm-auth-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: #0C2D52;
}
.wm-auth-field input {
    width: 100%;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #0C2D52;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.wm-auth-field input::placeholder { color: #B0BBC9; }
.wm-auth-field input:focus {
    border-color: #00B7FF;
    box-shadow: 0 0 0 3px rgba(0,183,255,0.15);
}

/* Remember-me — custom green checkbox */
.wm-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.wm-auth-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wm-auth-remember-box {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1.5px solid #C8D2DE;
    border-radius: 4px;
    background: #FFFFFF;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wm-auth-remember input:checked + .wm-auth-remember-box {
    background: #22C55E;
    border-color: #22C55E;
}
.wm-auth-remember input:checked + .wm-auth-remember-box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.wm-auth-remember input:focus-visible + .wm-auth-remember-box {
    box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
}
.wm-auth-remember-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #0C2D52;
    line-height: 1.3;
}

/* Submit button — disabled state = pale blue (matches image empty state) */
.wm-auth-submit {
    width: 100%;
    padding: 14px 24px;
    background: #1EB4F1;
    color: #FFFFFF;
    border: 0;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(30,180,241,0.28);
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
    margin-top: 4px;
}
.wm-auth-submit:hover:not(:disabled) { background: #1A9BE8; }
.wm-auth-submit:active:not(:disabled) { transform: translateY(1px); }
.wm-auth-submit:disabled {
    background: #B3E9FF;
    box-shadow: none;
    color: #FFFFFF;
    cursor: not-allowed;
    opacity: 0.9;
}

.wm-auth-foot {
    margin: 4px 0 0;
    text-align: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #5E758D;
}
.wm-auth-foot a {
    color: #1A9BE8;
    font-weight: 700;
}
.wm-auth-foot a:hover { text-decoration: underline; }

/* ---------------------- Responsive: collapse to single column ---------- */
@media (max-width: 860px) {
    .wm-auth { grid-template-columns: 1fr; }
    .wm-auth-left {
        padding: 32px 28px 48px;
        gap: 28px;
        min-height: auto;
    }
    .wm-auth-hero { max-width: 320px; margin-inline: auto; }
    .wm-auth-h2 { font-size: 26px; }
    .wm-auth-right {
        padding: 48px 28px 48px;
        align-items: flex-start;
        min-height: auto;
    }
    .wm-auth-back {
        position: static;
        margin-bottom: 24px;
        align-self: flex-start;
    }
    .wm-auth-form { margin: 0 auto; }
}

/* =============================================================================
   Create Business Profile wizard — shared shell + steps
   Based on images 4/5/6/13/14.
   ========================================================================== */

.wm-cp {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: 100vh;
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* Force Plus Jakarta Sans across every descendant of the wizard so the
   mix of old Bricolage/Lato declarations doesn't leak in. */
.wm-cp,
.wm-cp *:not(svg):not(path) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ---------------------- Left navy panel ---------------------- */
.wm-cp-left {
    position: relative;
    background: #0B2547;
    color: #FFFFFF;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.wm-cp-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
}
.wm-cp-brand-logo {
    width: 118px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.wm-cp-brand-divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.30);
}
.wm-cp-brand-tag {
    font-weight: 500;
    font-size: 12px;
    color: #9AAAC8;
    letter-spacing: 0.01em;
}

.wm-cp-head { display: flex; flex-direction: column; gap: 14px; }
.wm-cp-title {
    margin: 0;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.18;
    color: #FFFFFF;
    letter-spacing: -0.015em;
}
.wm-cp-subtitle {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: #AEBDD8;
    max-width: 280px;
}

/* Vertical stepper */
.wm-cp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.wm-cp-step {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    padding: 14px 0;
}
.wm-cp-step-mark {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
/* Done — filled darker disc (lifts slightly off the navy bg) with cyan check inside.
   Matches Figma reference (image copy 15) — NOT a solid blue fill. */
.wm-cp-step.is-done .wm-cp-step-mark {
    background: #11335F;
    color: #1A9BE8;
    box-shadow: inset 0 0 0 1px #1A9BE8;
}
/* Active — hollow circle with blue ring + blue number inside.
   Uses inset box-shadow so the circle doesn't grow in size. */
.wm-cp-step.is-active .wm-cp-step-mark {
    background: transparent;
    color: #1A9BE8;
    box-shadow: inset 0 0 0 2px #1A9BE8;
}
.wm-cp-step.is-pending .wm-cp-step-mark {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px #38507A;
    color: #5C7497;
}

.wm-cp-step-text { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.wm-cp-step-text strong {
    font-weight: 700;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 1.3;
}
.wm-cp-step-text em {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    color: #9AAAC8;
    line-height: 1.35;
}
.wm-cp-step.is-pending .wm-cp-step-text strong { color: #6E85A8; }
.wm-cp-step.is-pending .wm-cp-step-text em     { color: #5C7497; }

/* Connector belongs to the step it sits inside — it's the line going
   DOWN from that step's mark toward the next step's mark.
   A "done" step's connector is solid cyan (progress reached the next step).
   Everything else stays a dim navy (progress hasn't reached yet). */
.wm-cp-step-connector {
    position: absolute;
    left: 17px;
    top: 54px;
    bottom: -4px;
    width: 2px;
    background: #2A4472;
    border-radius: 1px;
}
.wm-cp-step.is-done .wm-cp-step-connector { background: #1A9BE8; }

.wm-cp-login-row {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    font-size: 13px;
    color: #AEBDD8;
}
.wm-cp-login-btn {
    padding: 6px 18px;
    background: #FFFFFF;
    color: #0C2D52;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
}
.wm-cp-login-btn:hover { background: #F3F8FE; }

/* ---------------------- Right white panel ---------------------- */
.wm-cp-right {
    background: #FFFFFF;
    padding: 40px 56px 32px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.wm-cp-inner {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
}

.wm-cp-badge {
    align-self: flex-start;
    display: inline-block;
    padding: 4px 14px;
    background: #E6F4FF;
    color: #1A9BE8;
    border-radius: 9999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.wm-cp-h1 {
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.25;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-cp-sub {
    margin: 0 0 28px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #5E758D;
}

/* ---------------------- Form primitives ---------------------- */
.wm-cp-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.wm-cp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}
.wm-cp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.wm-cp-field--full { grid-column: 1 / -1; }
.wm-cp-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #0C2D52;
}
.wm-cp-field input,
.wm-cp-field textarea,
.wm-cp-field select {
    width: 100%;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #0C2D52;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wm-cp-field textarea {
    resize: vertical;
    min-height: 92px;
    font-family: inherit;
}
.wm-cp-field input::placeholder,
.wm-cp-field textarea::placeholder { color: #B0BBC9; }
.wm-cp-field input:focus,
.wm-cp-field textarea:focus,
.wm-cp-field select:focus {
    border-color: #00B7FF;
    box-shadow: 0 0 0 3px rgba(0,183,255,0.15);
}

/* File drop zone (Company Logo) */
.wm-cp-drop {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: #FFFFFF;
    border: 1.5px dashed #C8D2DE;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.wm-cp-drop:hover {
    border-color: #00B7FF;
    background: #F3FAFF;
}
.wm-cp-drop-ic {
    flex-shrink: 0;
    width: 56px;
    height: 44px;
    background: #F3F6FA;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wm-cp-drop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wm-cp-drop-line-1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #0C2D52;
}
.wm-cp-drop-line-1 b {
    color: #1A9BE8;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wm-cp-drop-line-2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #8696A8;
}

/* Custom select wrapper — chevron sits inside a rounded gray container
   (matches image 6 / image 9 dropdown treatment). */
.wm-cp-select {
    position: relative;
    display: block;
}
.wm-cp-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 48px;
    cursor: pointer;
    background-image: none;
}
.wm-cp-select select:invalid,
.wm-cp-select select:has(option[value=""]:checked) { color: #B0BBC9; }
.wm-cp-select-caret {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #F3F6FA;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   Custom dropdown ([data-wm-dd]) — Figma reference image copy 16.png
   Replaces native <select> with a stylable trigger + popover panel of
   rounded option pills. Used wherever a dropdown is needed.
   ========================================================================== */
.wm-dd {
    position: relative;
    display: block;
    width: 100%;
}
.wm-dd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #0C2D52;
    text-align: left;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wm-dd-trigger:focus-visible,
.wm-dd.is-open .wm-dd-trigger {
    border-color: #00B7FF;
    box-shadow: 0 0 0 3px rgba(0,183,255,0.15);
}
.wm-dd-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-dd-value.is-placeholder { color: #B0BBC9; }

.wm-dd-caret {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #F3F6FA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}
.wm-dd.is-open .wm-dd-caret { transform: rotate(180deg); }

.wm-dd-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(12, 45, 82, 0.12), 0 2px 6px rgba(12, 45, 82, 0.06);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    animation: wmDdPop 0.12s ease-out;
}
@keyframes wmDdPop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wm-dd-panel-label {
    font-weight: 600;
    font-size: 13px;
    color: #0C2D52;
    padding: 2px 4px 4px;
}
.wm-dd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wm-dd-opt {
    padding: 14px 18px;
    background: #FFFFFF;
    border: 1px solid #ECEFF5;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    color: #0C2D52;
    cursor: pointer;
    outline: none;
    transition: background 0.12s, border-color 0.12s;
}
.wm-dd-opt:hover,
.wm-dd-opt:focus-visible {
    background: #EAF6FB;
    border-color: #D6ECF7;
}
.wm-dd-opt.is-selected {
    background: #EAF6FB;
    border-color: #C3E2F2;
}

/* Phone input with NG flag + +234 prefix */
.wm-cp-phone {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #FFFFFF;
    padding-left: 10px;
}
.wm-cp-phone:focus-within {
    border-color: #00B7FF;
    box-shadow: 0 0 0 3px rgba(0,183,255,0.15);
}
.wm-cp-phone-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 0 2px;
}
.wm-cp-flag-ng {
    display: inline-flex;
    width: 22px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    border: 0.5px solid rgba(0,0,0,0.1);
}
.wm-cp-flag-bar { flex: 1; height: 100%; display: block; }
.wm-cp-flag-g1, .wm-cp-flag-g2 { background: #008751; }
.wm-cp-flag-w  { background: #FFFFFF; }
.wm-cp-phone-sep {
    width: 1px;
    height: 20px;
    background: #E2E8F0;
    margin: 0 8px;
}
.wm-cp-phone-prefix {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0C2D52;
}
.wm-cp-phone input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 12px 10px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0C2D52;
    outline: none;
}

/* Info note row */
.wm-cp-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0;
    padding: 12px 0 12px;
    border-top: 1px solid #EDF2F7;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #5E758D;
    line-height: 1.5;
}
.wm-cp-note-ic {
    flex-shrink: 0;
    margin-top: 1px;
    display: inline-flex;
}

/* "Add another …" ghost button */
.wm-cp-add-another {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    background: transparent;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #0C2D52;
}
.wm-cp-add-another:hover { color: #1A9BE8; }
.wm-cp-add-ic { display: inline-flex; }

/* Step 4 — role permissions collapsible */
.wm-cp-perms {
    background: #F3F6FA;
    border-radius: 10px;
    padding: 6px;
}
.wm-cp-perms-toggle {
    width: 100%;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #0C2D52;
    cursor: pointer;
    transition: background 0.15s ease;
}
.wm-cp-perms-toggle:hover { background: #F3F8FE; }
.wm-cp-perms.is-open .wm-cp-perms-toggle { display: none; }

.wm-cp-perms-body {
    padding: 14px 18px 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wm-cp-perms-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #0C2D52;
}
.wm-cp-perms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #0C2D52;
    line-height: 1.5;
}
.wm-cp-perms-list strong {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: #0C2D52;
}
.wm-cp-perms-close {
    width: 100%;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #0C2D52;
    cursor: pointer;
    margin-top: 4px;
}
.wm-cp-perms-close:hover { background: #F3F8FE; }

/* Invite row — email + role + Invite button 3-col */
.wm-cp-invite-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}
.wm-cp-field--btn { min-width: 80px; }
.wm-cp-invite {
    padding: 12px 24px;
    height: 42.5px;
    background: #FFFFFF;
    border: 1px solid #0C2D52;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #0C2D52;
    cursor: pointer;
    transition: background 0.15s ease;
}
.wm-cp-invite:hover { background: #F3F8FE; }

/* Footer (Back / Skip / Save & Continue) */
.wm-cp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 24px;
}
.wm-cp-footer-right { display: flex; align-items: center; gap: 24px; }
.wm-cp-back {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #0C2D52;
}
.wm-cp-back:hover { background: #F3F8FE; }
.wm-cp-skip {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #1A9BE8;
}
.wm-cp-skip:hover { text-decoration: underline; }
.wm-cp-continue {
    padding: 12px 24px;
    background: #1EB4F1;
    color: #FFFFFF;
    border: 0;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(30,180,241,0.25);
    transition: background 0.15s ease, transform 0.1s ease;
}
.wm-cp-continue:hover { background: #1A9BE8; }
.wm-cp-continue:active { transform: translateY(1px); }
.wm-cp-continue:disabled,
.wm-cp-continue.is-disabled {
    background: #B3E9FF;
    box-shadow: none;
    color: #FFFFFF;
    cursor: not-allowed;
}

/* Step 3 — Services You Need (image copy 9.png) */
.wm-cp-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.wm-cp-svc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 18px 12px 16px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    user-select: none;
}
.wm-cp-svc:hover {
    border-color: #9FD6F5;
    background: #F7FBFF;
}
.wm-cp-svc.is-selected {
    border-color: #1A9BE8;
    background: #F0F9FF;
    box-shadow: 0 0 0 3px rgba(26,155,232,0.15);
}
.wm-cp-svc-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}
.wm-cp-svc-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.35;
    color: #0C2D52;
    min-height: 34px;
}

/* "See full list" button (full-width, ghost style) */
.wm-cp-svc-more {
    display: block;
    width: 100%;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #0C2D52;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-top: -4px;
}
.wm-cp-svc-more:hover {
    background: #F3F8FE;
    border-color: #C9D7E6;
}

/* Selection checkmark badge — shown on .wm-cp-svc.is-selected (main grid + modal tiles) */
.wm-cp-svc-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0C2D52;
    color: #FFFFFF;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.wm-cp-svc.is-selected .wm-cp-svc-check {
    display: inline-flex;
}

/* Step 3 responsive — stack cards to 2 cols then 1 col */
@media (max-width: 820px) {
    .wm-cp-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .wm-cp-svc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Select-Services Modal (image copy 28)
   Opened from the "See full list" button on Step 3.
   ============================================================ */
.wm-svc-modal {
    position: fixed;
    inset: 0;
    background: rgba(11, 30, 61, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.wm-svc-modal.is-open {
    display: flex;
}
body.wm-modal-open {
    overflow: hidden;
}
.wm-svc-modal-card {
    position: relative;
    background: #FFFFFF;
    border-radius: 18px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(11, 30, 61, 0.28);
}
.wm-svc-modal-strip {
    position: relative;
    height: 64px;
    background: #1A9BE8;
    flex-shrink: 0;
    overflow: hidden;
}
.wm-svc-modal-strip::before,
.wm-svc-modal-strip::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background: #0F7DBE;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 6px;
    opacity: 0.7;
}
.wm-svc-modal-strip::before { left: 28%; }
.wm-svc-modal-strip::after  { left: 46%; }
.wm-svc-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0F7DBE;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    line-height: 0;
}
.wm-svc-modal-close:hover { background: #0C6BA7; }
.wm-svc-modal-body {
    padding: 26px 32px 18px;
    overflow-y: auto;
    flex: 1;
}
.wm-svc-modal-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    color: #0C2D52;
    margin: 0;
}
.wm-svc-modal-count {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #1A9BE8;
    margin: 6px 0 22px;
}
.wm-svc-modal-count strong {
    font-weight: 700;
}
.wm-svc-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.wm-svc-modal-footer {
    padding: 16px 24px 20px;
    flex-shrink: 0;
    background: #FFFFFF;
    border-top: 1px solid #F0F4F9;
}
.wm-svc-modal-done {
    width: 100%;
    padding: 14px;
    background: #1A9BE8;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.wm-svc-modal-done:hover {
    background: #0F8BD6;
}

@media (max-width: 520px) {
    .wm-svc-modal-body { padding: 22px 20px 16px; }
    .wm-svc-modal-grid { grid-template-columns: 1fr; }
    .wm-svc-modal-title { font-size: 20px; }
}

/* Responsive */
@media (max-width: 960px) {
    .wm-cp { grid-template-columns: 1fr; }
    .wm-cp-left { padding: 24px 24px 32px; }
    .wm-cp-right { padding: 32px 24px; }
    .wm-cp-grid { grid-template-columns: 1fr; }
    .wm-cp-invite-row { grid-template-columns: 1fr; }
}


/* ============================================================
   ================== APP SHELL (logged-in B2B) ==================
   Navy left sidebar + white main area. Used by dashboard,
   wallet, jobs & bookings, analytics, etc.
   ============================================================ */
.wm-app {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
    background: #F5F8FC;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0C2D52;
}
.wm-app *:not(svg):not(path):not(circle):not(rect):not(line):not(ellipse):not(g) {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* --- sidebar --- */
.wm-app-side {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    background: #0B2547;
    color: #FFFFFF;
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
}
.wm-app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    text-decoration: none;
}
.wm-app-brand-logo {
    width: 98px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.wm-app-brand-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.3);
}
.wm-app-brand-tag {
    font-size: 11px;
    font-weight: 500;
    color: #9AAAC8;
    letter-spacing: 0.01em;
}

.wm-app-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}
.wm-app-nav-section { display: flex; flex-direction: column; gap: 8px; }
.wm-app-nav-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #5E7AA5;
    padding: 0 10px;
    margin-bottom: 2px;
}
.wm-app-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wm-app-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #AEBDD8;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.wm-app-nav-link:hover {
    color: #FFFFFF;
    background: rgba(255,255,255,0.05);
}
.wm-app-nav-link.is-active {
    background: rgba(26,155,232,0.18);
    color: #FFFFFF;
    font-weight: 600;
}
.wm-app-nav-link.is-active .wm-app-nav-ic { color: #1A9BE8; }
.wm-app-nav-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: currentColor;
}

/* --- user card at bottom --- */
.wm-app-me {
    background: #11335F;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wm-app-me-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wm-app-me-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #243E66;
    display: inline-flex;
}
.wm-app-me-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wm-app-me-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wm-app-me-text strong {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wm-app-me-role {
    font-size: 10px;
    font-weight: 700;
    background: #D3DFFF;
    color: #3B4D8C;
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}
.wm-app-me-text em {
    font-style: normal;
    font-size: 11.5px;
    color: #9AAAC8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-app-me-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1A9BE8;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 2px 2px;
}
.wm-app-me-logout:hover { color: #50B8F0; }

/* --- main area --- */
.wm-app-main {
    padding: 28px 32px 40px;
    background: #FFFFFF;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============================================================
   =================== APP TOAST (success/error) ===============
   Used post-signup on the dashboard. Matches imgs/image.png —
   pale mint pill, centered over content, dismissible via X.
   ============================================================ */
.wm-toast {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 520px;
    max-width: 720px;
    padding: 16px 22px 16px 28px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 45, 82, 0.06);
    font-family: 'Plus Jakarta Sans', 'Lato', sans-serif;
    animation: wm-toast-drop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wm-toast.is-leaving {
    animation: wm-toast-leave 240ms ease forwards;
}

@keyframes wm-toast-drop {
    0%   { opacity: 0; transform: translate(-50%, -32px) scale(0.92); }
    60%  { opacity: 1; transform: translate(-50%, 6px)  scale(1.02); }
    100% { opacity: 1; transform: translate(-50%, 0)    scale(1); }
}
@keyframes wm-toast-leave {
    to { opacity: 0; transform: translate(-50%, -14px) scale(0.96); }
}
.wm-toast-msg {
    flex: 1 1 auto;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1px;
}
.wm-toast-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.wm-toast--success {
    background: #DAEBDA;
    border: 1px solid #C2DEC4;
    color: #2E7D32;
}
.wm-toast--success .wm-toast-close { color: #2E7D32; }

/* ============================================================
   =================== DASHBOARD PAGE =========================
   1:1 with image copy 2. Three-column card grid.
   ============================================================ */
.wm-db { position: relative; display: flex; flex-direction: column; gap: 18px; }

/* top strip — location pill + bell */
.wm-db-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wm-db-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #E5ECF3;
    font-size: 12.5px;
    font-weight: 500;
    color: #0C2D52;
}
.wm-db-bell {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.wm-db-bell-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.wm-db-bell-dot {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #EF4444;
    border: 1.5px solid #FFFFFF;
}

/* greeting + search */
.wm-db-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.wm-db-greet h1 {
    margin: 0 0 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #0C2D52;
}
.wm-db-greet p {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    color: #5E758D;
}
.wm-db-search { position: relative; }
.wm-db-search-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E5ECF3;
    border-radius: 10px;
    padding: 5px 6px 5px 14px;
    transition: box-shadow 160ms ease, border-color 160ms ease;
}
.wm-db-search.is-open .wm-db-search-row {
    border-color: #D6E3F0;
    box-shadow: 0 8px 20px rgba(15, 45, 82, 0.08);
}
.wm-db-search-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
}
.wm-db-search-field input {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    color: #0C2D52;
    width: 100%;
}
.wm-db-search-field input::placeholder { color: #8498AE; }
.wm-db-search-btn {
    background: #FFFFFF;
    color: #0C2D52;
    border: 1px solid #E5ECF3;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.wm-db-search-btn:hover { background: #F3F8FE; }
.wm-db-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-right: 2px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #5E758D;
}
.wm-db-search-clear:hover { background: #F3F6FA; }
.wm-db-search.is-open .wm-db-search-btn { display: none; }

/* Popular Searches dropdown panel (screenshot 2) */
.wm-db-search-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 100%;
    width: 340px;
    background: #FFFFFF;
    border: 1px solid #ECF1F6;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(15, 45, 82, 0.10);
    overflow: hidden;
    z-index: 30;
}
.wm-db-search-pop-inner { padding: 14px 18px 6px; }
.wm-db-search-pop-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #8A9AAB;
    margin-bottom: 4px;
}
.wm-db-search-pop-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wm-db-search-pop-list li + li { border-top: 1px solid #EEF2F7; }
.wm-db-search-pop-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
    color: #0C2D52;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.wm-db-search-pop-row:hover { color: #1A9BE8; }
.wm-db-search-pop-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.wm-db-search-pop-all {
    display: block;
    text-align: center;
    padding: 14px 18px;
    border-top: 1px solid #EEF2F7;
    color: #00B7FF;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    background: #FFFFFF;
}
.wm-db-search-pop-all:hover { background: #F7FBFF; }

/* promo banner */
.wm-db-promo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #EDF6FF;
    border: 1px solid #D7E8F7;
    border-radius: 12px;
}
.wm-db-promo-badge {
    display: inline-block;
    height: 38px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}
.wm-db-promo-text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #0C2D52;
}
.wm-db-promo-arrow { color: #1A9BE8; margin-left: 4px; letter-spacing: 0.05em; }
.wm-db-promo-cta {
    background: #1A9BE8;
    color: #FFFFFF;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}
.wm-db-promo-cta:hover { background: #0F8BD6; }
.wm-db-promo-dots {
    position: absolute;
    bottom: 6px;
    left: 70px;
    display: flex;
    gap: 4px;
}
.wm-db-promo-dots span {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: #B8D4EC;
}
.wm-db-promo-dots span.is-active { background: #1A9BE8; width: 18px; }

/* main 3-column grid */
.wm-db-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 16px;
    align-items: start;
}
.wm-db-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* generic card */
.wm-db-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #EAF0F6;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(11,37,71,0.03);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wm-db-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wm-db-card-head h3 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: #0C2D52;
}
.wm-db-card-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #F3F8FE;
    color: #1A9BE8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
}
.wm-db-card-arrow:hover { background: #E4EFFB; }

/* empty state (middle column + ongoing jobs) */
.wm-db-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 10px;
    color: #5E758D;
    text-align: center;
}
.wm-db-empty-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wm-db-empty p {
    margin: 0;
    font-size: 12.5px;
    color: #7A8CA3;
    max-width: 240px;
}

/* Info icon inside card header (Ongoing Jobs populated state) */
.wm-db-info-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    vertical-align: middle;
}

/* Populated Ongoing Jobs booking card (screenshot 110534) */
.wm-db-ongoing {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px 16px;
    background: #FFFFFF;
    border: 1px solid #EEF2F7;
    border-left: 3px solid #EDA23A;
    border-radius: 8px;
}
.wm-db-ongoing-booked {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #8A9AAB;
}
.wm-db-ongoing-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #0C2D52;
    line-height: 1.35;
}
.wm-db-ongoing-sub {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    color: #8A9AAB;
    line-height: 1.4;
}
.wm-db-ongoing-info-ic { flex-shrink: 0; padding-top: 1px; }
.wm-db-ongoing-cta {
    align-self: flex-start;
    background: transparent;
    color: #1A9BE8;
    border: 1.2px solid #1A9BE8;
    border-radius: 6px;
    padding: 5px 14px;
    margin-top: 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease;
}
.wm-db-ongoing-cta:hover { background: #F0F8FE; }

/* middle column cards are a bit taller */
.wm-db-card--mid { min-height: 170px; }

/* wallet balance card (dark) */
.wm-db-wallet {
    position: relative;
    background: #071B38;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 16px 18px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
.wm-db-wallet-wave {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
}
.wm-db-wallet-ic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.wm-db-wallet-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}
.wm-db-wallet-label {
    font-size: 12px;
    color: #AEBDD8;
    font-weight: 500;
}
.wm-db-wallet-amt {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}
.wm-db-wallet .wm-db-card-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.14);
    color: #FFFFFF;
    z-index: 2;
}
.wm-db-wallet .wm-db-card-arrow:hover { background: rgba(255,255,255,0.22); }

/* team card */
.wm-db-team { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wm-db-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #EAF0F6;
    border-radius: 10px;
}
.wm-db-team-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
}
.wm-db-team-av img { width: 100%; height: 100%; object-fit: cover; }
.wm-db-team-text { display: flex; flex-direction: column; gap: 1px; }
.wm-db-team-text strong { font-size: 13px; font-weight: 600; color: #0C2D52; }
.wm-db-team-text em { font-style: normal; font-size: 11.5px; color: #7A8CA3; }
.wm-db-team-cta {
    display: block;
    text-align: center;
    padding: 9px;
    border: 1px solid #EAF0F6;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0C2D52;
    text-decoration: none;
}
.wm-db-team-cta:hover { background: #F3F8FE; }

/* right-column stat cards */
.wm-db-stat {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #EAF0F6;
    border-radius: 12px;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(11,37,71,0.03);
    overflow: hidden;
}
.wm-db-stat-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--wm-stat-accent, #1A9BE8);
}
.wm-db-stat-ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Background tint is baked into the PNG itself, keep transparent */
    background: transparent;
}
.wm-db-stat-ic .wm-db-stat-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}
.wm-db-stat-label {
    font-size: 12.5px;
    font-weight: 500;
    color: #5E758D;
    line-height: 1.3;
    max-width: 150px;
}
.wm-db-stat-val {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: #0C2D52;
}

/* ============================================================
   =============== FIND & BOOK SERVICES PAGE ==================
   1:1 with imgs/Find and Book Service/Screenshot …110412.png
   Landing: page title + bell, promo banner, centered search,
   RECENT SEARCHES (2-col), Popular Services grid (4-col),
   + right-slide All Services drawer (task #6 completes wiring).
   ============================================================ */
.wm-find { position: relative; display: flex; flex-direction: column; gap: 20px; }

.wm-find-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wm-find-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.005em;
    color: #0C2D52;
}

/* Centered search pill */
.wm-find-search {
    display: flex;
    justify-content: center;
    margin: 8px 0 4px;
}
.wm-find-search-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 540px;
    padding: 12px 18px;
    background: #FFFFFF;
    border: 1px solid #DDE5EE;
    border-radius: 999px;
    transition: box-shadow 160ms ease, border-color 160ms ease;
}
.wm-find-search-field:focus-within {
    border-color: #BED3EA;
    box-shadow: 0 4px 14px rgba(15, 45, 82, 0.06);
}
.wm-find-search-field input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    color: #0C2D52;
}
.wm-find-search-field input::placeholder { color: #98A7B9; }

.wm-find-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wm-find-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wm-find-section-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.005em;
    color: #0C2D52;
}
.wm-find-section-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #6B7D93;
    text-transform: uppercase;
}
.wm-find-see-all {
    background: #FFFFFF;
    color: #0C2D52;
    border: 1px solid #DCE4ED;
    border-radius: 10px;
    padding: 9px 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.wm-find-see-all:hover {
    background: #F3F8FE;
    border-color: #C5D4E3;
}

/* Recent Searches — 2 column grid */
.wm-find-recent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.wm-find-recent {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #FFFFFF;
    border: 1px solid #E5ECF3;
    border-radius: 10px;
    color: #0C2D52;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wm-find-recent:hover {
    border-color: #C5D4E3;
    box-shadow: 0 2px 8px rgba(15,45,82,0.04);
}
.wm-find-recent-ic {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
}

/* Popular Services — 4 column grid */
.wm-find-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.wm-find-svc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 14px 18px;
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 14px;
    color: #0C2D52;
    text-decoration: none;
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.wm-find-svc-card:hover {
    border-color: #1A9BE8;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(26, 155, 232, 0.10);
}
.wm-find-svc-illu {
    display: flex;
    width: 100%;
    aspect-ratio: 1.8 / 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.wm-find-svc-illu .wm-svc-illu {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 88px;
    object-fit: contain;
}
.wm-find-svc-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: #0C2D52;
    line-height: 1.3;
}

/* ============================================================
   ========== ALL SERVICES RIGHT-SLIDE DRAWER =================
   Scaffolding; task #6 will refine search wiring + details.
   ============================================================ */
.wm-find-drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
}
.wm-find-drawer[hidden] { display: none; }
.wm-find-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 24, 48, 0.38);
    opacity: 0;
    transition: opacity 220ms ease;
}
.wm-find-drawer.is-open .wm-find-drawer-backdrop { opacity: 1; }

.wm-find-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(720px, 75vw);
    background: #FFFFFF;
    border-left: 1px solid #E6ECF3;
    box-shadow: -14px 0 30px rgba(15, 45, 82, 0.10);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 28px 28px;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-y: auto;
}
.wm-find-drawer.is-open .wm-find-drawer-panel { transform: translateX(0); }

.wm-find-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wm-find-drawer-head h2 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-find-drawer-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.wm-find-drawer-close:hover { opacity: 0.7; }

.wm-find-search--compact { margin: 4px 0 2px; }

.wm-find-drawer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* ============================================================
   =================== BOOK SERVICE FORM ======================
   1:1 with imgs/Find and Book Service/Screenshot …110434.png
   Two-column layout: form card (main) + Tips sidebar (right).
   ============================================================ */
.wm-book {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Breadcrumb strip + bell */
.wm-book-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: #6B7D93;
}
.wm-book-crumbs a {
    color: #6B7D93;
    text-decoration: none;
    font-weight: 500;
}
.wm-book-crumbs a:hover { color: #0C2D52; }
.wm-book-crumb-sep {
    color: #B4C2D3;
    font-size: 16px;
    line-height: 1;
}
.wm-book-crumb-current {
    color: #0C2D52;
    font-weight: 600;
}
.wm-book-bell-wrap {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

/* 2-col layout: form 1fr + tips 300px */
.wm-book-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

/* Form card */
.wm-book-card {
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 12px;
    padding: 26px 30px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.wm-book-head h1 {
    margin: 0 0 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: #0C2D52;
}
.wm-book-head p {
    margin: 0;
    font-size: 13px;
    color: #6B7D93;
}

.wm-book-row {
    display: grid;
    gap: 16px;
}
.wm-book-row--2 { grid-template-columns: 1fr 1fr; }

.wm-book-field { display: flex; flex-direction: column; gap: 8px; }
.wm-book-field--full { grid-column: 1 / -1; }

.wm-book-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #0C2D52;
    letter-spacing: 0;
}

.wm-book-input,
.wm-book-textarea,
.wm-book-select,
.wm-book-phone {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #DDE4EC;
    border-radius: 8px;
    padding: 12px 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: #0C2D52;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wm-book-input::placeholder,
.wm-book-textarea::placeholder { color: #A4B2C3; font-weight: 400; }
.wm-book-input:focus,
.wm-book-textarea:focus {
    outline: 0;
    border-color: #1A9BE8;
    box-shadow: 0 0 0 3px rgba(26,155,232,0.12);
}
.wm-book-textarea { resize: vertical; min-height: 84px; }

/* Select-looking button (custom dropdown trigger) */
.wm-book-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    text-align: left;
}
.wm-book-select-val { flex: 1; font-size: 13px; }
.wm-book-select-val.is-placeholder { color: #A4B2C3; font-weight: 400; }
.wm-book-select-ic {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* Divider line inside form */
.wm-book-divider {
    border: 0;
    border-top: 1px solid #EDF2F7;
    margin: 4px 0;
}

/* Location row: checkbox left + "Select another location" link right */
.wm-book-location-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}
.wm-book-loc-alt {
    font-size: 12.5px;
    font-weight: 600;
    color: #1A9BE8;
    text-decoration: none;
}
.wm-book-loc-alt:hover { text-decoration: underline; }

/* Checkbox (custom) */
.wm-book-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.wm-book-check--standalone { margin-top: -4px; }
.wm-book-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wm-book-check-box {
    width: 16px;
    height: 16px;
    border: 1.4px solid #C3CEDD;
    border-radius: 3.5px;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease, background 120ms ease;
}
.wm-book-check-box svg { opacity: 0; }
.wm-book-check input:checked + .wm-book-check-box {
    background: #1A9BE8;
    border-color: #1A9BE8;
}
.wm-book-check input:checked + .wm-book-check-box svg { opacity: 1; }
.wm-book-check-text {
    font-size: 12.5px;
    color: #0C2D52;
    font-weight: 500;
}

/* Phone input with flag prefix */
.wm-book-phone {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.wm-book-phone-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 100%;
    color: #0C2D52;
    font-size: 13px;
    background: transparent;
}
.wm-book-phone-sep {
    width: 1px;
    height: 22px;
    background: #E2E8F0;
}
.wm-book-phone-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: #0C2D52;
}
.wm-book-phone-input::placeholder { color: #A4B2C3; }
.wm-book-phone:focus-within {
    border-color: #1A9BE8;
    box-shadow: 0 0 0 3px rgba(26,155,232,0.12);
}

/* + Add Another Request pill */
.wm-book-add {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}
.wm-book-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    color: #1A9BE8;
    border: 1.2px solid #1A9BE8;
    border-radius: 999px;
    padding: 9px 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.wm-book-add-btn:hover { background: #F0F8FE; }
.wm-book-add-btn span { font-size: 16px; line-height: 0.9; }

/* Tips sidebar */
.wm-book-tips {
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 12px;
    padding: 18px 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.wm-book-tips-title {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0C2D52;
}
.wm-book-tips-ic { font-size: 15px; line-height: 1; }
.wm-book-tips-list {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #6B7D93;
    font-size: 12.5px;
    line-height: 1.55;
}
.wm-book-tips-list li { padding-left: 2px; }

/* Bottom actions */
.wm-book-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 0 4px;
}
.wm-book-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    color: #0C2D52;
    border: 1px solid #DDE4EC;
    border-radius: 8px;
    padding: 9px 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease;
}
.wm-book-back:hover { background: #F3F8FE; }
.wm-book-submit {
    background: #1A9BE8;
    color: #FFFFFF;
    border: 0;
    border-radius: 8px;
    padding: 10px 22px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.wm-book-submit:hover { background: #0F8BD6; }

/* ============================================================
   =============== PRIORITY LEVEL DROPDOWN ====================
   Screenshot …110451.png — compact card anchored under field.
   ============================================================ */
.wm-prio-pop {
    position: fixed;
    z-index: 40;
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 45, 82, 0.12);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.wm-prio-pop.is-open { opacity: 1; transform: translateY(0); }
.wm-prio-pop[hidden] { display: none; }
.wm-prio-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 10px 12px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #0C2D52;
    cursor: pointer;
    transition: background 100ms ease;
}
.wm-prio-opt:hover { background: #DCEAC4; }

/* ============================================================
   =============== DATE & TIME DRAWER =========================
   Screenshot …110505.png — right-slide calendar + time chips.
   ============================================================ */
.wm-dt { position: fixed; inset: 0; z-index: 70; }
.wm-dt[hidden] { display: none; }
.wm-dt-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 24, 48, 0.38);
    opacity: 0;
    transition: opacity 220ms ease;
}
.wm-dt.is-open .wm-dt-backdrop { opacity: 1; }
.wm-dt-panel {
    position: absolute;
    top: 0; right: 0;
    width: min(440px, 92vw);
    height: 100vh;
    background: #FFFFFF;
    border-left: 1px solid #E6ECF3;
    box-shadow: -14px 0 30px rgba(15, 45, 82, 0.10);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px 26px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.wm-dt.is-open .wm-dt-panel { transform: translateX(0); }

.wm-dt-head {
    display: flex; align-items: center; justify-content: space-between;
}
.wm-dt-head h2 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-dt-close {
    width: 32px; height: 32px; padding: 0; border: 0;
    background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Month navigation */
.wm-dt-month {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    padding: 6px 0 2px;
}
.wm-dt-nav {
    width: 28px; height: 28px; border: 0; border-radius: 6px;
    background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.wm-dt-nav:hover { background: #EAF4FF; }
.wm-dt-month-label {
    font-weight: 700;
    font-size: 14.5px;
    color: #1A9BE8;
}

.wm-dt-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #1A9BE8;
    padding: 6px 0 2px;
}

.wm-dt-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px 2px;
    margin-bottom: 4px;
}
.wm-dt-day {
    background: transparent; border: 0;
    height: 34px; border-radius: 50%;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #334558;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}
.wm-dt-day:hover { background: #EAF4FF; }
.wm-dt-day.is-selected {
    background: #DDE3EA;
    color: #0C2D52;
    font-weight: 600;
}
/* March 2026 starts on Sunday, so day 1 sits naturally in column 1 */

.wm-dt-divider { border: 0; border-top: 1px solid #EDF2F7; margin: 8px 0; }

.wm-dt-times {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 10px;
}
.wm-dt-time {
    background: #FFFFFF;
    border: 1px solid #BFDDF0;
    border-radius: 999px;
    padding: 8px 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #0C2D52;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.wm-dt-time:hover { background: #EAF4FF; border-color: #1A9BE8; }
.wm-dt-time.is-selected {
    background: #1A9BE8;
    color: #FFFFFF;
    border-color: #1A9BE8;
}
.wm-dt-time.is-disabled {
    color: #C6CED9;
    border-color: #E9EDF2;
    cursor: not-allowed;
    background: #FFFFFF;
}
.wm-dt-time.is-disabled:hover { background: #FFFFFF; border-color: #E9EDF2; }

.wm-dt-set-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.wm-dt-set {
    background: #FFFFFF;
    color: #1A9BE8;
    border: 1.3px solid #1A9BE8;
    border-radius: 8px;
    padding: 8px 22px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.wm-dt-set:hover { background: #F0F8FE; }

.wm-dt-summary { display: flex; flex-direction: column; gap: 6px; }
.wm-dt-summary-lbl { font-size: 12px; color: #6B7D93; font-weight: 500; }
.wm-dt-summary-val {
    min-height: 48px;
    border: 1px solid #DDE4EC;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #0C2D52;
    background: #FFFFFF;
}

.wm-dt-submit {
    margin-top: 6px;
    background: #BAE4F8;
    color: #FFFFFF;
    border: 0;
    border-radius: 8px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: not-allowed;
}

/* ============================================================
   =============== REQUEST SUBMITTED TOAST ====================
   Screenshot …110518.png — top-right popup card.
   ============================================================ */
.wm-rs-toast {
    position: fixed;
    top: 24px;
    right: 32px;
    z-index: 65;
    width: 320px;
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(15, 45, 82, 0.14);
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    opacity: 0;
    transform: translate(40px, -4px) scale(0.94);
    transition: opacity 300ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wm-rs-toast.is-in {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}
.wm-rs-toast.is-in .wm-rs-check {
    animation: wm-check-pop 520ms cubic-bezier(0.22, 1.55, 0.5, 1) 80ms both;
    transform-origin: center;
}

@keyframes wm-check-pop {
    0%   { transform: scale(0) rotate(-8deg); opacity: 0; }
    55%  { transform: scale(1.25) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.wm-rs-toast[hidden] { display: none; }
.wm-rs-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wm-rs-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 20px;
}
.wm-rs-check { flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; }
.wm-rs-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wm-rs-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #0C2D52;
}
.wm-rs-text em {
    font-style: normal;
    font-size: 12px;
    line-height: 1.45;
    color: #6B7D93;
}
.wm-rs-cta {
    align-self: flex-start;
    background: #1A9BE8;
    color: #FFFFFF;
    border: 0;
    border-radius: 8px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.wm-rs-cta:hover { background: #0F8BD6; }

/* ============================================================
   =============== REQUEST DETAILS DRAWER =====================
   Screenshot …110525.png — right-slide panel with full spec.
   ============================================================ */
.wm-rd { position: fixed; inset: 0; z-index: 68; }
.wm-rd[hidden] { display: none; }
.wm-rd-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 24, 48, 0.38);
    opacity: 0;
    transition: opacity 220ms ease;
}
.wm-rd.is-open .wm-rd-backdrop { opacity: 1; }
.wm-rd-panel {
    position: absolute;
    top: 0; right: 0;
    width: min(420px, 92vw);
    height: 100vh;
    background: #FFFFFF;
    border-left: 1px solid #E6ECF3;
    box-shadow: -14px 0 30px rgba(15, 45, 82, 0.10);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px 26px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.wm-rd.is-open .wm-rd-panel { transform: translateX(0); }

.wm-rd-head {
    display: flex; align-items: center; justify-content: space-between;
}
.wm-rd-head h2 {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-rd-close {
    width: 32px; height: 32px; padding: 0; border: 0;
    background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

.wm-rd-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wm-rd-list dt {
    font-size: 11.5px;
    font-weight: 600;
    color: #6B7D93;
    margin-bottom: 4px;
}
.wm-rd-list dd {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #0C2D52;
    line-height: 1.5;
}
.wm-rd-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
}
.wm-rd-status--pending {
    background: #FCE8A8;
    color: #8A6A13;
}
.wm-rd-status--ongoing {
    background: #D0F0D8;
    color: #1E6B33;
}
.wm-rd-status--declined {
    background: #FBD5D5;
    color: #8B2626;
}

.wm-rd-actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
    padding-top: 14px;
}
.wm-rd-cancel,
.wm-rd-edit {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.wm-rd-cancel {
    background: #EFF2F6;
    color: #6B7D93;
    border: 1px solid #E5EAF0;
}
.wm-rd-cancel:hover { background: #E5EAF0; }
.wm-rd-edit {
    background: #FFFFFF;
    color: #1A9BE8;
    border: 1.3px solid #1A9BE8;
}
.wm-rd-edit:hover { background: #F0F8FE; }

/* ============================================================
   =================== JOBS & BOOKINGS PAGE ===================
   1:1 with imgs/Find and Book Service/Screenshot …110541.png
   Main col: bookings table. Right col: jobs list + stat card.
   ============================================================ */
.wm-jobs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.wm-jobs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Shared card chrome */
.wm-jobs-card {
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 14px;
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.wm-jobs-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wm-jobs-card-head h2 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-jobs-book-cta {
    background: #1A9BE8;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease;
}
.wm-jobs-book-cta:hover { background: #0F8BD6; }

/* Toolbar: search + filter row */
.wm-jobs-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.wm-jobs-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #FFFFFF;
    border: 1px solid #DDE4EC;
    border-radius: 8px;
    min-width: 220px;
    flex: 1;
    max-width: 280px;
}
.wm-jobs-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    color: #0C2D52;
}
.wm-jobs-search input::placeholder { color: #A4B2C3; }

.wm-jobs-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.wm-jobs-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #FFFFFF;
    border: 1px solid #DDE4EC;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #0C2D52;
    cursor: pointer;
    transition: background 120ms ease;
    max-width: 170px;
    min-width: 0;
}
.wm-jobs-filter:hover { background: #F3F8FE; }
.wm-jobs-filter-val {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

/* Bookings table */
.wm-jobs-table {
    display: flex;
    flex-direction: column;
}
.wm-jobs-thead,
.wm-jobs-tr {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.4fr 1fr 1.2fr;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
}
.wm-jobs-thead {
    border-bottom: 1px solid #EDF2F7;
    padding-top: 4px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #6B7D93;
}
.wm-jobs-thead-actions { text-align: left; }
.wm-jobs-tr {
    border-top: 1px solid #F2F5F8;
    font-size: 12.5px;
    color: #0C2D52;
}
.wm-jobs-tr:first-of-type { border-top: 0; }
.wm-jobs-desc {
    color: #6B7D93;
}

.wm-jobs-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 600;
}
.wm-jobs-status {
    border: 1px solid;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
}
.wm-jobs-status--pending  { background: #FEF6D9; border-color: #F9D03F; color: #1B3751; }
.wm-jobs-status--approved { background: #DCF0E0; border-color: #50B464; color: #1B3751; }
.wm-jobs-status--ongoing  { background: #DCF0E0; border-color: #50B464; color: #1B3751; }
.wm-jobs-status--declined { background: #FFDEDE; border-color: #FF5A5A; color: #1B3751; }

.wm-jobs-actions { display: inline-flex; gap: 8px; }
.wm-jobs-act {
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 100ms ease;
}
.wm-jobs-act:hover { background: #F2F5F8; }

/* ============== RIGHT COLUMN ============== */
.wm-jobs-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.wm-jobs-card--jobs { padding-bottom: 14px; }

/* Tabs */
.wm-jobs-tabs {
    display: inline-flex;
    gap: 6px;
    background: #F3F8FE;
    padding: 4px;
    border-radius: 10px;
    align-self: flex-start;
}
.wm-jobs-tab {
    background: transparent;
    border: 0;
    padding: 7px 16px;
    border-radius: 7px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #6B7D93;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.wm-jobs-tab:hover { color: #0C2D52; }
.wm-jobs-tab.is-active {
    background: #FFFFFF;
    color: #1A9BE8;
    box-shadow: 0 1px 3px rgba(15, 45, 82, 0.06);
}

/* Job rows */
.wm-jobs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wm-jobs-row-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wm-jobs-time {
    font-size: 11px;
    font-weight: 500;
    color: #8A9AAB;
    padding-left: 54px;
}
.wm-jobs-row-main {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #EEF2F7;
    border-radius: 10px;
}
.wm-jobs-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #E8EFF7;
}
.wm-jobs-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wm-jobs-person { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; }
.wm-jobs-person strong {
    font-size: 13px;
    font-weight: 700;
    color: #0C2D52;
}
.wm-jobs-person em {
    font-style: normal;
    font-size: 11.5px;
    color: #8A9AAB;
}
.wm-jobs-msg {
    background: #F3F6FA;
    color: #0C2D52;
    border: 0;
    border-radius: 6px;
    padding: 5px 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.wm-jobs-msg:hover { background: #E5EDF5; }

/* Completed tab — "View Quote" cyan-outline button */
.wm-jobs-quote {
    background: #FFFFFF;
    color: #1A9BE8;
    border: 1.2px solid #1A9BE8;
    border-radius: 999px;
    padding: 5px 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.wm-jobs-quote:hover { background: #F0F8FE; }

/* Avatar badge (e.g. "Paid" on completed rows) */
.wm-jobs-avatar { position: relative; }
.wm-jobs-badge {
    position: absolute;
    left: -2px;
    bottom: -4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 2px solid #FFFFFF;
    line-height: 1.3;
}
.wm-jobs-badge--paid {
    background: #F6D95C;
    color: #6D5210;
}

/* Empty state row ("No ongoing jobs") */
.wm-jobs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 12px 36px;
    text-align: center;
}
.wm-jobs-empty-ic { display: inline-flex; align-items: center; justify-content: center; }
.wm-jobs-empty p {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    color: #7A8CA3;
}

.wm-jobs-unread {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1A9BE8;
    flex-shrink: 0;
}
.wm-jobs-chev {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Stat card on right column — reuses .wm-db-stat rules, just wider */
.wm-jobs-stat { width: 100%; }

/* ============================================================
   =========== FILTER DROPDOWNS (image copy.png) ===============
   Three variants: Date (wide, two groups + custom), Status &
   Type (compact single-list, with cyan check on selected).
   Generic namespace .wm-dd — reusable beyond the Jobs page.
   ============================================================ */
.wm-dd {
    position: fixed;
    z-index: 50;
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 12px;
    box-shadow: 0 18px 36px rgba(15, 45, 82, 0.14);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.wm-dd.is-open { opacity: 1; transform: translateY(0); }
.wm-dd[hidden] { display: none; }

/* Date variant is wider and has a header + two groups */
.wm-dd--date { width: 360px; padding: 10px; gap: 0; }
.wm-dd-head {
    padding: 10px 14px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #0C2D52;
    letter-spacing: -0.005em;
}
.wm-dd-group { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
.wm-dd-divider { border: 0; border-top: 1px solid #EDF2F7; margin: 6px 0; }

/* Option rows */
.wm-dd-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    color: #0C2D52;
    transition: background 120ms ease;
}
.wm-dd-opt:hover { background: #F3F8FE; }
.wm-dd-opt.is-selected {
    background: #DCE8D6;
    font-weight: 600;
}
.wm-dd-opt.is-selected:hover { background: #D2E1CC; }

.wm-dd-opt-label { font-weight: 500; color: #0C2D52; }
.wm-dd-opt.is-selected .wm-dd-opt-label { font-weight: 600; }
.wm-dd-opt-meta {
    font-size: 12px;
    font-weight: 500;
    color: #6B7D93;
}
.wm-dd-opt--range { padding: 11px 14px; }

/* Custom date footer row */
.wm-dd-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #0C2D52;
    transition: background 120ms ease;
}
.wm-dd-custom:hover { background: #F3F8FE; }

/* ============================================================
   ===================== EDIT BOOKING DRAWER ===================
   Screenshot 155218 — wide right-slide with book-form inside.
   ============================================================ */
.wm-eb { position: fixed; inset: 0; z-index: 70; font-family: 'Plus Jakarta Sans', sans-serif; }
.wm-eb[hidden] { display: none; }
.wm-eb-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 24, 48, 0.38);
    opacity: 0;
    transition: opacity 220ms ease;
}
.wm-eb.is-open .wm-eb-backdrop { opacity: 1; }
.wm-eb-panel {
    position: absolute; top: 0; right: 0;
    width: min(720px, 92vw);
    height: 100vh;
    background: #FFFFFF;
    border-left: 1px solid #E6ECF3;
    box-shadow: -14px 0 30px rgba(15, 45, 82, 0.10);
    padding: 24px 30px 26px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wm-eb.is-open .wm-eb-panel { transform: translateX(0); }
.wm-eb-head { display: flex; align-items: center; justify-content: space-between; }
.wm-eb-head h2 {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-eb-sub {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 16px;
    color: #0C2D52;
}
.wm-eb-form { border: 0; padding: 0; background: transparent; box-shadow: none; gap: 16px; }
.wm-eb-actions { display: flex; justify-content: flex-end; margin-top: 4px; }

/* Dropdowns opened from inside the Edit Booking drawer need to stack above it */
.wm-eb-dd { z-index: 76; }

/* ============================================================
   ===================== DELETE CONFIRMATION ===================
   Screenshot 155243 — centered modal.
   ============================================================ */
.wm-del {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.wm-del[hidden] { display: none; }
.wm-del-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 24, 48, 0.38);
}
.wm-del-card {
    position: relative;
    width: min(360px, 90vw);
    background: #FFFFFF;
    border-radius: 14px;
    padding: 22px 22px 20px;
    box-shadow: 0 22px 44px rgba(15, 45, 82, 0.20);
    animation: wm-modal-pop 340ms cubic-bezier(0.22, 1.5, 0.5, 1) both;
}

@keyframes wm-modal-pop {
    0%   { opacity: 0; transform: scale(0.9) translateY(8px); }
    100% { opacity: 1; transform: scale(1)   translateY(0); }
}
.wm-del-title {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 16px;
    color: #0C2D52;
    letter-spacing: -0.005em;
}
.wm-del-sub {
    margin: 0 0 16px;
    font-size: 12.5px;
    color: #6B7D93;
}
.wm-del-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.wm-del-label { font-size: 12px; font-weight: 600; color: #0C2D52; }
.wm-del-textarea {
    background: #FFFFFF;
    border: 1px solid #DDE4EC;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 12.5px;
    color: #0C2D52;
    resize: vertical;
    min-height: 68px;
}
.wm-del-textarea::placeholder { color: #A4B2C3; font-weight: 400; }
.wm-del-textarea:focus {
    outline: 0;
    border-color: #1A9BE8;
    box-shadow: 0 0 0 3px rgba(26,155,232,0.12);
}
.wm-del-actions { display: flex; gap: 10px; }
.wm-del-cancel, .wm-del-confirm {
    flex: 1;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.wm-del-cancel {
    background: #EFF2F6;
    color: #0C2D52;
}
.wm-del-cancel:hover { background: #E5EAF0; }
.wm-del-confirm {
    background: #F15B6B;
    color: #FFFFFF;
}
.wm-del-confirm:hover { background: #E44858; }

/* ============================================================
   ===================== JOB DETAILS DRAWER ====================
   Screenshots 155312, 155321, 155334 — 3 status variants.
   ============================================================ */
.wm-jd { position: fixed; inset: 0; z-index: 70; font-family: 'Plus Jakarta Sans', sans-serif; }
.wm-jd[hidden] { display: none; }
.wm-jd-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 24, 48, 0.38);
    opacity: 0;
    transition: opacity 220ms ease;
}
.wm-jd.is-open .wm-jd-backdrop { opacity: 1; }
.wm-jd-panel {
    position: absolute; top: 0; right: 0;
    width: min(440px, 92vw);
    height: 100vh;
    background: #FFFFFF;
    border-left: 1px solid #E6ECF3;
    box-shadow: -14px 0 30px rgba(15, 45, 82, 0.10);
    padding: 22px 24px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wm-jd.is-open .wm-jd-panel { transform: translateX(0); }
.wm-jd-head { display: flex; align-items: center; justify-content: space-between; }
.wm-jd-head h2 {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-jd-sec {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: #0C2D52;
    padding-bottom: 6px;
    border-bottom: 1px solid #EDF2F7;
}

.wm-jd-provider {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-left: 4px solid #1A9BE8;
    border-radius: 10px;
    padding: 12px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wm-jd-provider--ongoing   { border-left-color: #1A9BE8; background: #F2F9FF; }
.wm-jd-provider--cancelled { border-left-color: #F15B6B; background: #FFFFFF; }
.wm-jd-provider--completed { border-left-color: #28B46A; background: #FFFFFF; }

.wm-jd-info {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0C2D52;
}
.wm-jd-info-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.wm-jd-person { display: flex; align-items: center; gap: 12px; }
.wm-jd-avatar {
    position: relative;
    flex: 0 0 46px;
    width: 46px; height: 46px;
    border-radius: 50%;
    overflow: visible;
    background: #E8EFF7;
}
.wm-jd-avatar img {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.wm-jd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wm-jd-time { font-size: 11px; color: #8A9AAB; font-weight: 500; }
.wm-jd-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #0C2D52;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wm-jd-text em { font-style: normal; font-size: 12px; color: #6B7D93; }
.wm-jd-arrow { display: inline-flex; align-items: center; justify-content: center; }

.wm-jd-notes-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wm-jd-notes {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #0C2D52;
    cursor: pointer;
    transition: background 120ms ease;
}
.wm-jd-notes:hover { background: #F3F8FE; }
.wm-jd-notes-right { display: inline-flex; align-items: center; gap: 8px; }
.wm-jd-notes-count {
    background: #0C2D52;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}
.wm-jd-phone {
    width: 36px; height: 36px;
    padding: 0;
    border: 1px solid #E6ECF3;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wm-jd-phone:hover { background: #F3F8FE; }

.wm-jd-list { margin-top: 4px; }
.wm-jd-list dt { font-size: 11px; }
.wm-jd-list dd { font-size: 12.5px; }

.wm-jd-actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
    padding-top: 14px;
}

/* ============================================================
   ========== PAYMENT FLOW: SERVICE QUOTE DRAWER ==============
   Screenshot 161627 — right-slide w/ quote line items + TOTAL.
   ============================================================ */
.wm-sq, .wm-pm, .wm-mp { position: fixed; inset: 0; z-index: 74; font-family: 'Plus Jakarta Sans', sans-serif; }
.wm-sq[hidden], .wm-pm[hidden], .wm-mp[hidden] { display: none; }
.wm-sq-backdrop, .wm-pm-backdrop, .wm-mp-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 24, 48, 0.38);
    opacity: 0;
    transition: opacity 220ms ease;
}
.wm-sq.is-open .wm-sq-backdrop,
.wm-pm.is-open .wm-pm-backdrop,
.wm-mp.is-open .wm-mp-backdrop { opacity: 1; }

.wm-sq-panel, .wm-pm-panel, .wm-mp-panel {
    position: absolute; top: 0; right: 0;
    width: min(440px, 92vw);
    height: 100vh;
    background: #FFFFFF;
    border-left: 1px solid #E6ECF3;
    box-shadow: -14px 0 30px rgba(15, 45, 82, 0.10);
    padding: 22px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wm-sq.is-open .wm-sq-panel,
.wm-pm.is-open .wm-pm-panel,
.wm-mp.is-open .wm-mp-panel { transform: translateX(0); }

/* Shared header: back + title + X */
.wm-sq-head { display: flex; align-items: center; gap: 10px; }
.wm-sq-head-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wm-sq-head-text h2 {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-sq-head-text span {
    font-size: 12px;
    color: #6B7D93;
}

/* Service Quote card */
.wm-sq-card {
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 12px;
    padding: 16px 18px;
}
.wm-sq-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wm-sq-lines > li { position: relative; padding-left: 18px; }
.wm-sq-bullet {
    position: absolute; top: 7px; left: 0;
    width: 7px; height: 7px; border-radius: 50%;
    background: #1A9BE8;
}
.wm-sq-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #0C2D52;
}
.wm-sq-row strong { font-weight: 700; white-space: nowrap; }
.wm-sq-val { text-align: right; font-weight: 500; flex: 1; }
.wm-sq-num { font-weight: 700; color: #0C2D52; }
.wm-sq-sub {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wm-sq-sub li {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6B7D93;
}
.wm-sq-sub li .wm-sq-num { color: #0C2D52; }

.wm-sq-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 10px;
}
.wm-sq-total span { font-size: 13px; font-weight: 700; color: #0C2D52; letter-spacing: 0.02em; }
.wm-sq-total strong { font-size: 15px; font-weight: 800; color: #1A9BE8; }

.wm-sq-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}
.wm-sq-call, .wm-sq-pay {
    flex: 1;
    padding: 11px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
    border: 0;
}
.wm-sq-call { background: #EFF2F6; color: #0C2D52; }
.wm-sq-call:hover { background: #E5EAF0; }
.wm-sq-pay  { background: #1A9BE8; color: #FFFFFF; }
.wm-sq-pay:hover { background: #0F8BD6; }

/* ============================================================
   ========== PAYMENT FLOW: CHOOSE PAYMENT METHOD =============
   Screenshots 161633 / 161640.
   ============================================================ */
.wm-pm-options { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.wm-pm-opt {
    position: relative;
    display: flex;
    align-items: center;
    padding: 13px 18px;
    background: #FFFFFF;
    border: 1px solid #DDE4EC;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.wm-pm-opt:hover { background: #F3F8FE; }
.wm-pm-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wm-pm-opt-body { display: inline-flex; align-items: baseline; gap: 6px; flex: 1; }
.wm-pm-opt-label { font-size: 13px; font-weight: 600; color: #0C2D52; }
.wm-pm-opt-meta  { font-size: 12px; color: #6B7D93; }

/* Selected-state: cyan border + cyan checkbox on right */
.wm-pm-opt.is-selected {
    border-color: #1A9BE8;
    background: #F7FBFF;
}
.wm-pm-opt::after {
    content: "";
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 1.4px solid #C3CEDD;
    background: #FFFFFF;
    flex-shrink: 0;
    transition: background 120ms ease, border-color 120ms ease;
}
.wm-pm-opt.is-selected::after {
    background: #1A9BE8 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M3 7.5 L6 10.5 L11 4' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 12px 12px;
    border-color: #1A9BE8;
}

.wm-pm-next {
    margin-top: auto;
    padding: 14px 22px;
    background: #BAE4F8;
    color: #FFFFFF;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: not-allowed;
    transition: background 120ms ease;
}
.wm-pm-next:not(:disabled) {
    background: #1A9BE8;
    cursor: pointer;
}
.wm-pm-next:not(:disabled):hover { background: #0F8BD6; }

/* ============================================================
   ========== PAYMENT FLOW: MAKE PAYMENT (timer) ==============
   Screenshot 161646 — bank details + countdown timer.
   ============================================================ */
.wm-mp-card {
    background: #FFFFFF;
    border: 1px solid #E6ECF3;
    border-radius: 12px;
    padding: 16px 18px 18px;
}
.wm-mp-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: #0C2D52; }
.wm-mp-lead strong { color: #1A9BE8; font-weight: 700; }
.wm-mp-acct-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wm-mp-acct {
    font-size: 16px;
    font-weight: 700;
    color: #0C2D52;
    letter-spacing: 0.02em;
}
.wm-mp-copy {
    width: 28px; height: 28px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease;
}
.wm-mp-copy:hover { background: #F3F8FE; }
.wm-mp-copy.is-copied {
    background: #D0F0D8;
}
.wm-mp-bank { font-size: 13px; font-weight: 700; color: #0C2D52; }
.wm-mp-name { font-size: 13px; color: #6B7D93; }

.wm-mp-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
}
.wm-mp-wait {
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #6B7D93;
    max-width: 280px;
}
.wm-mp-timer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border: 1.3px solid #1A9BE8;
    border-radius: 999px;
    background: #FFFFFF;
}
.wm-mp-timer-ic { flex-shrink: 0; }
.wm-mp-timer-val {
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 700;
    color: #1A9BE8;
    letter-spacing: 0.08em;
}

/* ============================================================
   ===================== JOB NOTES DRAWER ======================
   Screenshot 155346.
   ============================================================ */
.wm-jn { position: fixed; inset: 0; z-index: 72; font-family: 'Plus Jakarta Sans', sans-serif; }
.wm-jn[hidden] { display: none; }
.wm-jn-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 24, 48, 0.38);
    opacity: 0;
    transition: opacity 220ms ease;
}
.wm-jn.is-open .wm-jn-backdrop { opacity: 1; }
.wm-jn-panel {
    position: absolute; top: 0; right: 0;
    width: min(460px, 92vw);
    height: 100vh;
    background: #FFFFFF;
    border-left: 1px solid #E6ECF3;
    box-shadow: -14px 0 30px rgba(15, 45, 82, 0.10);
    padding: 20px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wm-jn.is-open .wm-jn-panel { transform: translateX(0); }
.wm-jn-head { display: flex; align-items: center; gap: 8px; }
.wm-jn-head h2 {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
    color: #0C2D52;
    letter-spacing: -0.01em;
}
.wm-jn-sub {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #6B7D93;
}
.wm-jn-provider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 14px;
    border-bottom: 1px solid #EDF2F7;
}
.wm-jn-info-ic { position: absolute; top: 12px; left: 0; }
.wm-jn-avatar {
    margin-left: 22px;
    flex-shrink: 0;
    width: 40px; height: 40px;
}
.wm-jn-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.wm-jn-person { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
.wm-jn-time { font-size: 10.5px; color: #8A9AAB; }
.wm-jn-person strong { font-size: 13px; font-weight: 700; color: #0C2D52; }
.wm-jn-person em { font-style: normal; font-size: 11.5px; color: #6B7D93; }
.wm-jn-msg-ic {
    width: 28px; height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wm-jn-list {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    flex: 1;
}
.wm-jn-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F2F5F8;
}
.wm-jn-body {
    margin: 0;
    font-size: 12.5px;
    color: #0C2D52;
    line-height: 1.5;
}
.wm-jn-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #8A9AAB;
}
.wm-jn-by { color: #1A9BE8; font-weight: 600; }

.wm-jn-compose {
    padding-top: 12px;
    border-top: 1px solid #EDF2F7;
}
.wm-jn-compose-lbl {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #0C2D52;
    margin-bottom: 6px;
}
.wm-jn-compose-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #DDE4EC;
    border-radius: 10px;
    padding: 6px 10px;
}
.wm-jn-compose-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    color: #0C2D52;
    padding: 6px 4px;
}
.wm-jn-compose-input::placeholder { color: #A4B2C3; }
.wm-jn-compose-ic {
    width: 28px; height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wm-jn-compose-ic:hover { background: #F3F8FE; }

/* Compact variants (Status / Type) */
.wm-dd--compact { min-width: 180px; padding: 8px; }
.wm-dd-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* View swap inside Date dropdown (ranges ↔ custom calendar) */
.wm-dd-view[hidden] { display: none; }

/* Custom-date header row (back chevron + title) */
.wm-dd-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 10px;
}
.wm-dd-back {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.wm-dd-back:hover { background: #F3F8FE; }
.wm-dd-head-title {
    font-size: 13px;
    font-weight: 700;
    color: #0C2D52;
    letter-spacing: -0.005em;
}

/* Mini calendar inside Date dropdown custom view */
.wm-dd-cal-month {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 4px 0 6px;
}
.wm-dd-cal-nav {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wm-dd-cal-nav:hover { background: #EAF4FF; }
.wm-dd-cal-month-label {
    font-weight: 700;
    font-size: 13.5px;
    color: #1A9BE8;
}
.wm-dd-cal-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #1A9BE8;
    padding: 4px 0 2px;
}
.wm-dd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 2px 0 6px;
}
.wm-dd-cal-day {
    background: transparent;
    border: 0;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #334558;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease;
}
.wm-dd-cal-day:hover { background: #EAF4FF; }
.wm-dd-cal-day.is-selected {
    background: #D7EAF6;
    color: #0C2D52;
    font-weight: 600;
}

/* Categories dropdown — search field + scrollable list */
.wm-dd--categories {
    width: 280px;
    padding: 10px;
    gap: 6px;
}
.wm-dd-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #DDE4EC;
    border-radius: 8px;
    margin-bottom: 4px;
}
.wm-dd-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    color: #0C2D52;
    min-width: 0;
}
.wm-dd-search input::placeholder { color: #A4B2C3; }
.wm-dd-scroll {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 2px;
}
.wm-dd-scroll::-webkit-scrollbar { width: 6px; }
.wm-dd-scroll::-webkit-scrollbar-track { background: transparent; }
.wm-dd-scroll::-webkit-scrollbar-thumb { background: #DDE4EC; border-radius: 4px; }
.wm-dd-scroll::-webkit-scrollbar-thumb:hover { background: #C5D4E3; }

/* ============================================================
   ======================= RESPONSIVE =========================
   Tablet:  ≤ 1023 px — grids collapse, drawers get wider
   Mobile:  ≤ 767 px  — sidebar becomes slide-in drawer, all
                       grids stack, table → card list
   ============================================================ */

/* Hamburger + backdrop (hidden by default, shown only on mobile) */
.wm-app-burger {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 40;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #E5ECF3;
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(15, 45, 82, 0.08);
}
.wm-app-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(10, 24, 48, 0.48);
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}
.wm-app.is-side-open .wm-app-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* ============== TABLET ≤ 1023 px ============== */
@media (max-width: 1023px) {
    /* Sidebar slimmer */
    .wm-app { grid-template-columns: 220px minmax(0, 1fr); }
    .wm-app-main { padding: 22px 22px 32px; }

    /* Dashboard 3-col → 2-col; stat cards go full-width bottom row */
    .wm-db-grid {
        grid-template-columns: 1fr 1fr;
    }
    .wm-db-col:nth-child(3) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    /* Find & Book Services: 4-col → 3-col */
    .wm-find-svc-grid { grid-template-columns: repeat(3, 1fr); }
    .wm-find-drawer-grid { grid-template-columns: repeat(3, 1fr); }

    /* Book form: 2-col + tips sidebar → 1-col with tips below */
    .wm-book-layout { grid-template-columns: 1fr; }

    /* Jobs layout: stack */
    .wm-jobs-layout { grid-template-columns: 1fr; }

    /* Drawers take more viewport width */
    .wm-find-drawer-panel { width: min(640px, 92vw); }
    .wm-eb-panel          { width: min(640px, 92vw); }
}

/* ============== MOBILE ≤ 767 px ============== */
@media (max-width: 767px) {

    /* ---------- App shell: hide sidebar, show hamburger ---------- */
    .wm-app { grid-template-columns: 1fr; }
    .wm-app-burger    { display: inline-flex; }
    .wm-app-backdrop  { display: block; }

    .wm-app-side {
        position: fixed;
        top: 0;
        left: 0;
        width: min(280px, 84vw);
        height: 100vh;
        z-index: 45;
        transform: translateX(-100%);
        transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .wm-app.is-side-open .wm-app-side { transform: translateX(0); }

    .wm-app-main {
        padding: 62px 14px 28px;  /* top padding leaves room for hamburger */
    }

    /* ---------- Dashboard ---------- */
    .wm-db-top .wm-db-loc { font-size: 12px; padding: 6px 12px; }
    .wm-db-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .wm-db-greet h1 { font-size: 22px; }
    .wm-db-search, .wm-db-search-row { width: 100%; }
    .wm-db-search-field { min-width: 0; flex: 1; }
    .wm-db-search-pop { width: 100%; right: 0; left: 0; }

    .wm-db-promo {
        flex-wrap: wrap;
        gap: 10px 14px;
        padding: 14px;
    }
    .wm-db-promo-text { flex: 1 1 100%; font-size: 13px; order: 2; }
    .wm-db-promo-badge { order: 1; }
    .wm-db-promo-cta   { order: 3; width: 100%; text-align: center; padding: 10px; }
    .wm-db-promo-dots  { display: none; }

    .wm-db-grid         { grid-template-columns: 1fr; gap: 12px; }
    .wm-db-col:nth-child(3) { grid-template-columns: repeat(2, 1fr); }
    .wm-db-card         { padding: 14px; }
    .wm-db-stat         { padding: 14px; }

    .wm-toast {
        min-width: 0;
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        padding: 12px 16px;
        font-size: 13px;
    }

    /* ---------- Find & Book Services ---------- */
    .wm-find-title { font-size: 15px; }
    .wm-find-search-field { max-width: none; padding: 10px 14px; }
    .wm-find-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .wm-find-see-all { align-self: stretch; text-align: center; }
    .wm-find-svc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .wm-find-recent-grid { grid-template-columns: 1fr; }
    .wm-find-svc-illu .wm-svc-illu { max-height: 72px; }
    .wm-find-svc-name { font-size: 12px; }

    /* All Services drawer full-width */
    .wm-find-drawer-panel {
        width: 100vw;
        padding: 18px 16px 22px;
    }
    .wm-find-drawer-grid { grid-template-columns: repeat(2, 1fr); }

    /* ---------- Book Service form ---------- */
    .wm-book-card { padding: 20px 18px 18px; }
    .wm-book-head h1 { font-size: 17px; }
    .wm-book-row--2 { grid-template-columns: 1fr; }
    .wm-book-location-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .wm-book-actions { flex-direction: column-reverse; gap: 10px; }
    .wm-book-back, .wm-book-submit { width: 100%; justify-content: center; text-align: center; }

    .wm-book-tips { padding: 16px 18px; }

    /* Date/time picker drawer full-width */
    .wm-dt-panel { width: 100vw; padding: 18px 16px 22px; }
    .wm-dt-times { grid-template-columns: repeat(3, 1fr); gap: 8px; }

    /* ---------- Jobs & Bookings ---------- */
    .wm-jobs-card { padding: 16px; }
    .wm-jobs-card-head h2 { font-size: 16px; }
    .wm-jobs-toolbar { flex-direction: column; align-items: stretch; }
    .wm-jobs-search  { max-width: none; width: 100%; }
    .wm-jobs-filters { width: 100%; margin-left: 0; gap: 6px; }
    .wm-jobs-filter  { flex: 1 1 auto; min-width: 0; max-width: none; }

    /* Bookings table → card list on mobile */
    .wm-jobs-thead { display: none; }
    .wm-jobs-tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date   actions"
            "cat    cat"
            "desc   desc"
            "status status";
        gap: 4px 8px;
        padding: 14px 4px;
        border-top: 1px solid #EDF2F7;
    }
    .wm-jobs-tr > span:nth-child(1) { grid-area: date;    font-weight: 700; }
    .wm-jobs-tr > span:nth-child(2) { grid-area: cat;     color: #6B7D93; font-size: 12px; }
    .wm-jobs-tr > span:nth-child(3) { grid-area: desc;    font-size: 12px; }
    .wm-jobs-tr > span:nth-child(4) { grid-area: status;  justify-self: start; }
    .wm-jobs-tr > span:nth-child(5) { grid-area: actions; justify-self: end; }

    /* Job details / job notes / edit / quote / payment drawers full-width */
    .wm-jd-panel,
    .wm-jn-panel,
    .wm-eb-panel,
    .wm-sq-panel,
    .wm-pm-panel,
    .wm-mp-panel { width: 100vw; padding: 20px 16px 22px; }

    /* Request Submitted / Booking Deleted / Payment Successful toasts */
    .wm-rs-toast {
        top: 70px;  /* clear of the hamburger */
        right: 12px;
        left: 12px;
        width: auto;
    }

    /* ---------- Popular Searches dropdown from dashboard ---------- */
    .wm-db-search-pop { max-width: calc(100vw - 28px); }

    /* ---------- Filter dropdowns ---------- */
    .wm-dd--date { width: min(320px, calc(100vw - 24px)); }
    .wm-dd--categories { width: min(300px, calc(100vw - 24px)); }

    /* ---------- Delete modal ---------- */
    .wm-del-card { width: calc(100vw - 32px); }

    /* ---------- Tips bullets tighter ---------- */
    .wm-book-tips-list { font-size: 12px; }
}

/* ============== SMALL MOBILE ≤ 380 px ============== */
@media (max-width: 380px) {
    .wm-db-col:nth-child(3) { grid-template-columns: 1fr; }
    .wm-find-svc-grid      { grid-template-columns: 1fr; }
    .wm-find-drawer-grid   { grid-template-columns: repeat(2, 1fr); }
    .wm-dt-times           { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   =================== PUBLIC PAGES MOBILE ====================
   Landing hero (fig-*), login (wm-auth-*), profile wizard
   (wm-cp-*). Screenshots in imgs/Mobile view.
   ============================================================ */

@media (max-width: 767px) {

    /* ---------- Landing topbar: undo 1440 canvas, flex row ---------- */
    .fig-hero-canvas { overflow-x: hidden; }
    .fig-topbar {
        position: relative;
        width: 100%;
        height: auto;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        transform: none !important;
    }
    .fig-brand {
        position: static;
        width: auto;
        height: auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .fig-brand-logo {
        position: static;
        width: 84px;
        height: auto;
    }
    .fig-brand-divider {
        position: static;
        width: 1px;
        height: 18px;
        background: var(--fig-app-blue);
    }
    .fig-brand-tag {
        position: static;
        font-size: 11px;
    }

    /* Hide desktop nav + action buttons; marketing page CTAs live in the body */
    .fig-nav-right { display: none !important; }

    /* Search becomes a stacked full-width pill below the top row */
    .fig-search {
        position: absolute;
        left: 16px;
        right: 16px;
        top: 64px;
        width: auto;
        height: 44px;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .fig-search-icon { left: 16px; top: 12px; width: 18px; height: 18px; }
    .fig-search-labels { top: 11px; left: 42px; right: 90px; }
    .fig-search-prefix { font-size: 13px; }
    .fig-search-input { font-size: 13px; }
    .fig-search-btn {
        position: absolute;
        right: 4px;
        top: 4px;
        height: 36px;
        padding: 0 16px;
        border-radius: 999px;
        font-size: 12.5px;
    }

    /* ---------- Hero body: undo scale transform, re-flow ---------- */
    .fig-hero-body {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 70px 20px 32px;   /* 70px clears the stacked search pill */
        transform: none !important;
        display: flex;
        flex-direction: column;
        gap: 20px;
        overflow: visible;
    }
    .fig-hero-grid { display: none; }   /* decorative, hide on mobile */

    .fig-hero-left,
    .fig-hero-right {
        position: static;
        width: 100%;
        height: auto;
        max-width: none;
    }
    .fig-hero-left {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .fig-hero-badge { align-self: flex-start; }
    .fig-hero-heading { position: relative; }
    .fig-hero-h1 {
        width: 100%;
        font-size: 32px;
        line-height: 1.15;
    }
    .fig-hero-h1-accent {
        position: absolute;
        left: 0;
        top: 76px;
        width: 160px;
        height: 3px;
    }
    .fig-hero-desc {
        width: 100%;
        font-size: 14px;
        margin: 8px 0 0;
    }
    .fig-hero-ctas {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .fig-hero-ctas .fig-btn,
    .fig-hero-ctas .fig-btn-primary-lg,
    .fig-hero-ctas .fig-btn-ghost-lg {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .fig-hero-social {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
    }
    .fig-hero-social-text { font-size: 12.5px; }

    .fig-hero-right { order: 10; }
    .fig-hero-art { position: static; width: 100%; height: auto; }
    .fig-hero-art-bg,
    .fig-hero-art-border { position: static; width: 100%; height: auto; }
    .fig-hero-art-img {
        position: static;
        width: 100%;
        height: auto;
        max-height: 360px;
        object-fit: cover;
    }

    /* ---------- Dark band on mobile (single column of pills) ---------- */
    .fig-dark-band { padding: 40px 20px; }
    .fig-dark-band-inner {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .fig-dark-band-label { font-size: 18px; }

    /* ---------- Landing section padding tightens ---------- */
    .fig-steps, .fig-feats { padding: 48px 20px !important; }
    .fig-steps-head, .fig-feats-head { margin-bottom: 28px; }
    .fig-steps-h2, .fig-feats-h2 { font-size: 26px !important; }
    .fig-steps-sub, .fig-feats-sub { font-size: 14px; }

    .fig-stats { padding: 48px 20px !important; min-height: 0 !important; }
    .fig-stats-head { font-size: 22px !important; }
    .fig-stats-value { font-size: 56px !important; }
    .fig-stats-label { font-size: 13px !important; }

    .fig-cta-wrap { padding: 0 16px 48px !important; }
    .fig-cta-inner { padding: 36px 24px !important; }
    .fig-cta-h2 { font-size: 22px !important; line-height: 1.3; }
    .fig-cta-sub { font-size: 13px; }

    .wm-footer { padding: 40px 20px 20px !important; }
    .wm-footer-grid { gap: 28px !important; padding-bottom: 24px !important; }
    .wm-foot-tag { font-size: 16px; }
    .wm-foot-tagline { font-size: 13px; }
    .wm-foot-col h5 { font-size: 13px; }
    .wm-foot-col ul li,
    .wm-foot-col ul a { font-size: 12.5px; }

    /* ---------- Auth (login/signup) ---------- */
    .wm-auth {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .wm-auth-left {
        position: static;
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 18px 20px 8px;
    }
    .wm-auth-hero,
    .wm-auth-hero-arc,
    .wm-auth-hero-frame,
    .wm-auth-copy,
    .wm-auth-pills { display: none; }

    .wm-auth-brand { display: inline-flex; align-items: center; gap: 8px; }
    .wm-auth-brand-logo { width: 100px; height: auto; }

    .wm-auth-right {
        position: static;
        width: 100%;
        flex: 1;
        padding: 8px 20px 28px;
        display: flex;
        flex-direction: column;
    }
    .wm-auth-back {
        align-self: flex-start;
        margin-bottom: 16px;
    }
    .wm-auth-form {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
    .wm-auth-title { font-size: 26px; }
    .wm-auth-sub { font-size: 13.5px; }

    /* ---------- Profile wizard (wm-cp-*) ---------- */
    .wm-cp { padding: 20px 16px 28px; }
    .wm-cp-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
    }
    .wm-cp-brand { order: 0; }
    .wm-cp-stepper {
        order: 1;
        width: 100%;
        gap: 4px;
        overflow-x: auto;
    }
    .wm-cp-step-num {
        width: 24px; height: 24px;
        font-size: 11px;
    }
    .wm-cp-step-line { flex: 1 1 auto; min-width: 14px; }
    .wm-cp-step-label { display: none; }   /* numbers only on mobile */

    .wm-cp-container,
    .wm-cp-card {
        width: 100%;
        max-width: none;
        padding: 20px 18px 22px;
    }
    .wm-cp-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .wm-cp-h1 { font-size: 22px; }
    .wm-cp-sub { font-size: 13px; }
    .wm-cp-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .wm-cp-actions > * {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Services grid on step-3 — 2-col on mobile */
    .wm-cp-svcs { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .wm-cp-svc-text { font-size: 12px; }

    /* Phone prefix column stays narrow */
    .wm-cp-phone-prefix { padding: 12px 6px; }

    /* ---------- Inquiry / service modal fits mobile ---------- */
    .wm-svc-modal { width: calc(100vw - 24px); max-width: none; }
}

/* ============== SMALL MOBILE ≤ 380 px (public pages) ============== */
@media (max-width: 380px) {
    .fig-hero-h1 { font-size: 28px; }
    .fig-hero-h1-accent { top: 66px; width: 140px; }
    .fig-stats-value { font-size: 44px !important; }
    .fig-cta-h2 { font-size: 20px !important; }
    .wm-cp-svcs { grid-template-columns: 1fr !important; }
}