/* ============================================================
   Welnesse landing-page reskin
   Design handoff: design_handoff_welnesse_web_reskin (2026-07)
   Scope: layouts/welnesse.blade.php pages only (wl- prefix)
   ============================================================ */

:root {
    --wl-navy: #09324A;
    --wl-navy-deep: #05243A;
    --wl-navy-hero-top: #062C46;
    --wl-navy-panel: #0A3A57;
    --wl-teal: #0BCAC4;
    --wl-teal-bright: #3BE5DF;
    --wl-teal-deep: #0E8F8A;
    --wl-wash-tile: #EAF7F6;
    --wl-wash-section: #F0FAF9;
    --wl-wash-img: #EAF4F4;
    --wl-page-bg: #FBFCFD;
    --wl-text-2: #6C757D;
    --wl-text-3: #8A959C;
    --wl-border: #E7ECEE;
    --wl-border-soft: #F0F3F4;
    --wl-star: #FFD66B;
    --wl-success: #3CAE5C;
    --wl-grad-cta: linear-gradient(135deg, #3BE5DF, #0BCAC4);
    --wl-shadow-cta: 0 8px 24px rgba(11, 202, 196, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
    --wl-shadow-rest: 0 1px 3px rgba(9, 50, 74, .04);
    --wl-shadow-hover: 0 20px 44px rgba(9, 50, 74, .12);
    --wl-shadow-hover-lg: 0 24px 50px rgba(9, 50, 74, .13);
    --wl-glass: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    --wl-font: 'Manrope', system-ui, -apple-system, sans-serif;
    --wl-serif: 'Instrument Serif', Georgia, serif;
}

.wl-page {
    font-family: var(--wl-font);
    background: var(--wl-page-bg);
    color: var(--wl-navy);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.wl-page a { text-decoration: none; transition: all .25s ease; }
.wl-page img { max-width: 100%; }
.wl-page h1, .wl-page h2, .wl-page h3, .wl-page p, .wl-page ul { margin: 0; }
.wl-page ul { padding: 0; list-style: none; }
.wl-page button { font-family: var(--wl-font); }

.wl-serif {
    font-family: var(--wl-serif);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
}

.wl-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 72px;
    padding-right: 72px;
}

/* ---------------- Buttons / pills ---------------- */
.wl-btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--wl-navy-deep) !important;
    background: var(--wl-grad-cta);
    padding: 12px 24px;
    border-radius: 99px;
    border: 0;
    box-shadow: var(--wl-shadow-cta);
    cursor: pointer;
    transition: all .25s ease;
    white-space: nowrap;
}

.wl-btn-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(11, 202, 196, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.wl-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--wl-navy) !important;
    border: 1.5px solid var(--wl-navy);
    padding: 13px 26px;
    border-radius: 99px;
    background: transparent;
    cursor: pointer;
    transition: all .25s ease;
    white-space: nowrap;
}

.wl-btn-outline:hover {
    background: var(--wl-navy);
    color: #fff !important;
}

/* ---------------- Kickers / headings ---------------- */
.wl-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--wl-teal-deep);
}

.wl-kicker::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--wl-teal);
}

.wl-kicker--center::after {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--wl-teal);
}

.wl-kicker--onnavy { color: var(--wl-teal-bright); }

.wl-h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--wl-navy);
    letter-spacing: -.02em;
    line-height: 1.15;
}

.wl-h2 .wl-serif { color: var(--wl-teal); }

.wl-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.wl-sec-head .wl-sec-head-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wl-sec-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.wl-sec-head--center .wl-sec-head-text { align-items: center; }

/* ---------------- Sections ---------------- */
.wl-section {
    padding: 110px 0;
    display: flex;
    flex-direction: column;
}

.wl-section > .wl-container {
    display: flex;
    flex-direction: column;
    gap: 52px;
    width: 100%;
}

.wl-section--white { background: #fff; }
.wl-section--gray { background: var(--wl-page-bg); }
.wl-section--mint { background: var(--wl-wash-section); }

/* ---------------- Grids ---------------- */
.wl-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.wl-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* ---------------- Header / nav ---------------- */
.wl-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background .25s ease, box-shadow .25s ease;
}

.wl-header.wl-header--stuck {
    position: fixed;
    background: var(--wl-navy-deep);
    box-shadow: 0 10px 30px rgba(2, 20, 34, .35);
}

.wl-header .wl-container {
    display: flex;
    align-items: center;
    gap: 36px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.wl-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.wl-brand-tile {
    background: #fff;
    border-radius: 12px;
    padding: 6px 8px;
    display: flex;
    box-shadow: 0 4px 14px rgba(2, 20, 34, .4);
}

.wl-brand-tile img { width: 30px; height: auto; }

.wl-brand-name {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}

.wl-nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.wl-nav-pill {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 99px;
    padding: 6px;
}

.wl-nav-pill a {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    padding: 8px 18px;
    border-radius: 99px;
}

.wl-nav-pill a:hover { color: #fff; }

.wl-nav-pill a.active {
    font-weight: 700;
    color: var(--wl-navy-deep);
    background: #fff;
}

.wl-nav-right {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
}

.wl-nav-signin {
    font-size: 14.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .85) !important;
}

.wl-nav-signin:hover { color: #fff !important; }

/* language + user dropdowns (glass) */
.wl-drop { position: relative; }

.wl-drop-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 2px;
}

.wl-drop-btn img.wl-drop-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--wl-teal);
}

.wl-drop-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 210px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(2, 20, 34, .25);
    padding: 8px 0;
    z-index: 1100;
}

.wl-drop.show .wl-drop-menu { display: block; }

.wl-drop-menu a {
    display: block;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wl-navy);
}

.wl-drop-menu a:hover { background: var(--wl-wash-tile); }

.wl-drop-menu .wl-drop-danger { color: #C0392B; }

.wl-drop-head {
    padding: 10px 18px;
    border-bottom: 1px solid var(--wl-border-soft);
    margin-bottom: 6px;
}

.wl-drop-head .name { font-size: 14px; font-weight: 800; color: var(--wl-navy); }
.wl-drop-head .mail { font-size: 12px; color: var(--wl-text-3); }

/* hamburger + drawer */
.wl-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    cursor: pointer;
    margin-left: auto;
}

.wl-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.wl-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: var(--wl-navy-deep);
    z-index: 99999;
    transition: right .3s ease;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wl-drawer.active { right: 0; }

.wl-drawer-close {
    align-self: flex-end;
    background: none;
    border: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.wl-drawer a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
}

.wl-drawer a.active,
.wl-drawer a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.wl-drawer .wl-btn-gradient { margin-top: 14px; }

.wl-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 20, 34, .6);
    z-index: 99998;
    display: none;
}

.wl-drawer-overlay.active { display: block; }

/* Language switcher inside the mobile drawer */
.wl-drawer-lang {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.wl-drawer-lang-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.wl-drawer-lang-label i,
.wl-drawer-lang-label svg { width: 15px; height: 15px; stroke-width: 2; }

.wl-drawer-lang-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wl-drawer .wl-drawer-lang-grid a {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

.wl-drawer .wl-drawer-lang-grid a:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.wl-drawer .wl-drawer-lang-grid a.active {
    background: var(--wl-teal);
    border-color: transparent;
    color: #04121f;
    font-weight: 700;
}

/* ---------------- Navy band (hero + page headers) ---------------- */
.wl-band {
    position: relative;
    background: var(--wl-navy-deep);
    overflow: hidden;
    padding-top: 112px;    /* clears the 90px absolute header for ALL band pages */
    padding-bottom: 54px;
}

@media (max-width: 991px) {
    .wl-band { padding-top: 98px; padding-bottom: 38px; }
}

.wl-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 85% 10%, rgba(11, 202, 196, .22), transparent 60%),
        radial-gradient(700px 420px at 0% 100%, rgba(11, 202, 196, .12), transparent 60%),
        linear-gradient(180deg, var(--wl-navy-hero-top) 0%, var(--wl-navy-deep) 100%);
}

.wl-band::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 229, 223, .5), transparent);
}

.wl-band > * { position: relative; z-index: 1; }

.wl-band-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .06);
    pointer-events: none;
}

/* ---------------- Hero ---------------- */
.wl-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: center;
    padding: 24px 0 64px; /* nav clearance is handled by .wl-band padding-top; just breathing room here */
}

.wl-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.wl-h1 {
    font-size: 66px;
    line-height: 1.05;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.025em;
}

.wl-h1 .wl-serif { color: var(--wl-teal-bright); }

.wl-hero-sub {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .68);
    max-width: 480px;
}

.wl-search {
    display: flex;
    align-items: center;
    background: var(--wl-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 99px;
    padding: 8px 8px 8px 26px;
    box-shadow: 0 20px 50px rgba(2, 20, 34, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    max-width: 560px;
}

.wl-search-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wl-search-field + .wl-search-field {
    border-left: 1px solid rgba(255, 255, 255, .18);
    padding-left: 20px;
}

.wl-search-field:first-child { padding-right: 20px; }

.wl-search-field label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin: 0;
    cursor: pointer;
}

.wl-search-field input {
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--wl-font);
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    padding: 0;
    width: 100%;
}

.wl-search-field input::placeholder { color: rgba(255, 255, 255, .6); }

.wl-search .wl-btn-gradient {
    padding: 14px 26px;
    margin-left: 12px;
    box-shadow: 0 8px 20px rgba(11, 202, 196, .4);
}

.wl-rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wl-rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 8px 16px;
    border-radius: 99px;
}

.wl-rating-chip .stars { color: var(--wl-star); letter-spacing: 1px; }

.wl-rating-note { font-size: 13px; color: rgba(255, 255, 255, .5); }

/* hero visual */
.wl-hero-visual {
    position: relative;
    height: 520px;
}

.wl-hero-photo {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 14px, rgba(255, 255, 255, .03) 14px 28px),
        linear-gradient(160deg, var(--wl-navy-panel), #072C44);
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 30px 80px rgba(2, 20, 34, .5), inset 0 1px 0 rgba(255, 255, 255, .15);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wl-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 18px;
    padding: 14px 18px;
    box-shadow: 0 20px 44px rgba(2, 20, 34, .4);
}

.wl-float-card--white {
    left: -34px;
    top: 56px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .85));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .7);
}

.wl-float-card--glass {
    right: -24px;
    bottom: 48px;
    background: var(--wl-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 20px 44px rgba(2, 20, 34, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.wl-float-card .t1 { font-size: 13.5px; font-weight: 800; color: var(--wl-navy); display: block; }
.wl-float-card .t2 { font-size: 11.5px; color: var(--wl-text-2); display: block; }
.wl-float-card--glass .t1 { color: #fff; }
.wl-float-card--glass .t2 { color: rgba(255, 255, 255, .6); }

.wl-float-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wl-teal);
    color: var(--wl-navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

.wl-pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wl-success);
    box-shadow: 0 0 0 4px rgba(60, 174, 92, .2);
    flex-shrink: 0;
}

/* ---------------- Trust strip ---------------- */
.wl-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wl-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 34px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.wl-trust-item:last-child { border-right: 0; }

.wl-trust-item svg { flex-shrink: 0; }

.wl-trust-item .t1 { display: block; font-size: 14.5px; font-weight: 800; color: #fff; }
.wl-trust-item .t2 { display: block; font-size: 12px; color: rgba(255, 255, 255, .5); }

/* ---------------- Category cards ---------------- */
.wl-cat-card {
    background: #fff;
    border: 1px solid var(--wl-border);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--wl-shadow-rest);
    transition: all .25s ease;
}

.wl-cat-card:hover {
    box-shadow: var(--wl-shadow-hover);
    border-color: var(--wl-teal);
}

.wl-cat-tile {
    width: 76px;
    height: 66px;
    border-radius: 18px;
    background: var(--wl-wash-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wl-cat-tile img {
    width: 56px;
    height: 48px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.wl-cat-card .name {
    font-size: 19px;
    font-weight: 800;
    color: var(--wl-navy);
}

.wl-cat-card .desc {
    font-size: 14px;
    color: var(--wl-text-2);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-cat-card .link {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--wl-teal-deep);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

/* compact variant (category-list page) */
.wl-cat-card--sm { border-radius: 22px; padding: 26px; gap: 14px; }
.wl-cat-card--sm .wl-cat-tile { width: 66px; height: 58px; border-radius: 16px; }
.wl-cat-card--sm .wl-cat-tile img { width: 48px; height: 42px; }
.wl-cat-card--sm .name { font-size: 16px; line-height: 1.3; }
.wl-cat-card--sm .desc { font-size: 13px; line-height: 1.5; -webkit-line-clamp: 1; }

/* navy CTA card (grids) */
.wl-cta-card {
    background: linear-gradient(160deg, var(--wl-navy), var(--wl-navy-deep));
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.wl-cta-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 202, 196, .3), transparent 70%);
}

.wl-cta-card .name {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    position: relative;
}

.wl-cta-card .desc {
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
    line-height: 1.55;
    position: relative;
}

.wl-cta-card .wl-btn-gradient {
    position: relative;
    align-self: flex-start;
    font-size: 13.5px;
    padding: 12px 22px;
    box-shadow: 0 8px 20px rgba(11, 202, 196, .3);
}

/* ---------------- Service cards ---------------- */
.wl-svc-card {
    background: #fff;
    border: 1px solid var(--wl-border);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--wl-shadow-rest);
    transition: all .25s ease;
}

.wl-svc-card:hover { box-shadow: var(--wl-shadow-hover); }

.wl-svc-img {
    height: 190px;
    background: var(--wl-wash-img);
    position: relative;
    display: block;
}

.wl-svc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-svc-rating-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--wl-navy-deep);
    background: #fff;
    padding: 6px 12px;
    border-radius: 99px;
    box-shadow: 0 2px 8px rgba(9, 50, 74, .15);
}

.wl-svc-rating-pill .star { color: #E8A93C; }

.wl-svc-fav {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(9, 50, 74, .15);
    color: var(--wl-teal-deep);
    padding: 0;
}

.wl-svc-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.wl-svc-body .name {
    font-size: 17px;
    font-weight: 800;
    color: var(--wl-navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-svc-provider {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wl-svc-provider .meta {
    font-size: 13px;
    font-weight: 600;
    color: var(--wl-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wl-wash-tile);
    color: var(--wl-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 10px;
    flex-shrink: 0;
    overflow: hidden;
}

.wl-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-svc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--wl-border-soft);
    padding-top: 14px;
    margin-top: auto;
    gap: 10px;
}

.wl-svc-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--wl-navy);
}

.wl-svc-price .per {
    font-size: 12px;
    font-weight: 600;
    color: var(--wl-text-3);
}

.wl-chip-duration {
    font-size: 12px;
    font-weight: 700;
    color: var(--wl-teal-deep);
    background: var(--wl-wash-tile);
    padding: 6px 12px;
    border-radius: 99px;
    white-space: nowrap;
}

/* ---------------- How it works ---------------- */
.wl-step-card {
    background: #fff;
    border-radius: 24px;
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(9, 50, 74, .05);
}

.wl-step-num {
    position: absolute;
    top: 14px;
    right: 22px;
    font-family: var(--wl-serif);
    font-size: 110px;
    line-height: 1;
    color: var(--wl-wash-tile);
}

.wl-step-card .name {
    position: relative;
    font-size: 20px;
    font-weight: 800;
    color: var(--wl-navy);
}

.wl-step-card .desc {
    position: relative;
    font-size: 14.5px;
    color: var(--wl-text-2);
    line-height: 1.6;
    max-width: 260px;
}

.wl-step-card--navy {
    background: linear-gradient(160deg, var(--wl-navy), var(--wl-navy-deep));
    box-shadow: 0 20px 44px rgba(9, 50, 74, .25);
}

.wl-step-card--navy .wl-step-num { color: rgba(11, 202, 196, .25); }
.wl-step-card--navy .name { color: #fff; }
.wl-step-card--navy .desc { color: rgba(255, 255, 255, .65); }

/* ---------------- Testimonials ---------------- */
.wl-tst-card {
    background: var(--wl-page-bg);
    border: 1px solid var(--wl-border);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
}

.wl-tst-stars {
    color: var(--wl-star);
    font-size: 15px;
    letter-spacing: 2px;
}

.wl-tst-stars .off { color: #D8DEE1; }

.wl-tst-quote {
    font-family: var(--wl-serif);
    font-size: 20px;
    line-height: 1.5;
    color: var(--wl-navy);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-tst-user {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
}

.wl-tst-user .wl-avatar {
    width: 40px;
    height: 40px;
    font-size: 12px;
}

.wl-tst-user .name {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--wl-navy);
}

.wl-tst-user .meta {
    display: block;
    font-size: 12px;
    color: var(--wl-text-3);
}

/* ---------------- App band ---------------- */
.wl-app-band-wrap { padding: 0 40px 40px; }

.wl-app-band {
    max-width: 1360px;
    margin: 0 auto;
    border-radius: 32px;
    background: linear-gradient(120deg, #062C46 0%, #09324A 55%, #0A5B63 100%);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 40px;
    padding: 72px;
    box-shadow: 0 30px 70px rgba(9, 50, 74, .3);
}

.wl-app-band::before {
    content: "";
    position: absolute;
    top: -100px;
    right: 20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 202, 196, .25), transparent 70%);
}

.wl-app-copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
}

.wl-app-copy h2 {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}

.wl-app-copy h2 .wl-serif { color: var(--wl-teal-bright); }

.wl-app-copy p {
    font-size: 16.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
    max-width: 440px;
}

.wl-store-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.wl-store-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 11px 20px;
    transition: all .25s ease;
}

.wl-store-btn:hover { background: rgba(255, 255, 255, .18); }

.wl-store-btn .s1 { display: block; font-size: 10px; color: rgba(255, 255, 255, .6); line-height: 1.2; }
.wl-store-btn .s2 { display: block; font-size: 14.5px; font-weight: 800; color: #fff; line-height: 1.2; }

.wl-phone-wrap {
    position: relative;
    height: 300px;
    display: flex;
    justify-content: center;
}

.wl-phone-mock {
    width: 230px;
    height: 420px;
    margin-top: 20px;
    border-radius: 36px;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .08) 0 12px, rgba(255, 255, 255, .03) 12px 24px), var(--wl-navy-panel);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 30px 60px rgba(2, 20, 34, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wl-phone-mock img.logo-mark {
    width: 74px;
    opacity: .35;
}

.wl-phone-mock img.screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------- Prelaunch waitlist band visual ---------------- */
.wl-wait-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    max-width: 360px;
    width: 100%;
    margin-left: auto;
}

.wl-wait-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--wl-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px;
    padding: 14px 18px;
    box-shadow: 0 20px 44px rgba(2, 20, 34, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
    transform: rotate(var(--tilt, 0deg)) translateX(var(--shift, 0px));
}

.wl-wait-chip .wl-avatar {
    width: 40px;
    height: 40px;
    font-size: 13px;
    background: var(--wl-teal);
    color: var(--wl-navy-deep);
}

.wl-wait-chip .t1 { display: block; font-size: 14px; font-weight: 800; color: #fff; }
.wl-wait-chip .t2 { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); }
.wl-wait-chip > svg { margin-left: auto; flex-shrink: 0; }

@media (max-width: 991px) {
    .wl-wait-visual { margin: 0 auto; }
}

/* ---------------- Footer ---------------- */
.wl-footer {
    background: var(--wl-navy-deep);
    position: relative;
    overflow: hidden;
}

.wl-footer::before {
    content: "";
    position: absolute;
    bottom: -140px;
    left: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 202, 196, .12), transparent 70%);
}

.wl-footer > .wl-container { position: relative; }

.wl-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding: 70px 0 56px;
}

.wl-footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wl-footer-col .wl-brand-tile {
    border-radius: 10px;
    padding: 5px 7px;
    box-shadow: none;
}

.wl-footer-col .wl-brand-tile img { width: 26px; }

.wl-footer-blurb {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .55);
    max-width: 300px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-footer-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wl-teal-bright);
    margin-bottom: 4px;
}

.wl-footer-col a {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
}

.wl-footer-col a:hover { color: #fff; }

.wl-newsletter-note {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
}

.wl-newsletter {
    display: flex;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 99px;
    padding: 5px 5px 5px 20px;
    align-items: center;
    gap: 10px;
}

.wl-newsletter input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--wl-font);
    font-size: 13.5px;
    color: #fff;
}

.wl-newsletter input::placeholder { color: rgba(255, 255, 255, .45); }

.wl-newsletter button {
    font-size: 13px;
    font-weight: 800;
    color: var(--wl-navy-deep);
    background: var(--wl-grad-cta);
    padding: 10px 20px;
    border-radius: 99px;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.wl-newsletter-msg {
    font-size: 12.5px;
    color: var(--wl-teal-bright);
    min-height: 18px;
}

.wl-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 24px 0 28px;
}

.wl-footer-bottom .copy { font-size: 12.5px; color: rgba(255, 255, 255, .4); }

.wl-footer-bottom nav { display: flex; gap: 24px; }

.wl-footer-bottom nav a {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
}

.wl-footer-bottom nav a:hover { color: #fff; }

/* slim variant (subpages) */
.wl-footer--slim::before { display: none; }
.wl-footer--slim .wl-footer-bottom { border-top: 0; padding: 24px 0; }

/* ---------------- Subpage headers ---------------- */
.wl-page-header-body {
    padding: 0; /* nav clearance now handled by .wl-band padding-top */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wl-page-header-body--center {
    align-items: center;
    text-align: center;
}

.wl-crumb {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .45);
}

.wl-crumb a { color: rgba(255, 255, 255, .45); }
.wl-crumb a:hover { color: #fff; }

.wl-page-h1 {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.025em;
}

.wl-page-h1 .wl-serif { color: var(--wl-teal-bright); }

.wl-page-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
    max-width: 560px;
}

.wl-page-body { padding: 64px 0 90px; }

/* ---------------- Filter row (caregivers) ---------------- */
.wl-filter-row {
    display: flex;
    gap: 10px;
    padding-bottom: 56px;
    margin-top: -8px;
    flex-wrap: wrap;
}

.wl-filter-search {
    flex: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    padding: 13px 18px;
    min-width: 220px;
}

.wl-filter-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--wl-font);
    font-size: 14px;
    color: #fff;
}

.wl-filter-search input::placeholder { color: rgba(255, 255, 255, .55); }

.wl-filter-chip {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
}

.wl-filter-chip select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--wl-font);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    padding: 13px 40px 13px 18px;
    cursor: pointer;
}

.wl-filter-chip select option { color: var(--wl-navy); }

.wl-filter-chip::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2.5px solid var(--wl-teal-bright);
    border-bottom: 2.5px solid var(--wl-teal-bright);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* ---------------- Provider cards ---------------- */
.wl-prov-card {
    background: #fff;
    border: 1px solid var(--wl-border);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .25s ease;
}

.wl-prov-card:hover { box-shadow: var(--wl-shadow-hover); }

.wl-prov-img {
    height: 210px;
    background: var(--wl-wash-img);
    position: relative;
    display: block;
}

.wl-prov-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-verified-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    color: var(--wl-navy-deep);
    background: #fff;
    padding: 5px 10px;
    border-radius: 99px;
    box-shadow: 0 2px 8px rgba(9, 50, 74, .15);
}

.wl-prov-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.wl-prov-body .name {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--wl-navy);
}

.wl-prov-body .type {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wl-teal-deep);
    min-height: 15px;
}

.wl-prov-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--wl-border-soft);
    padding-top: 12px;
    margin-top: auto;
    gap: 8px;
}

.wl-prov-foot .rating {
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-navy);
}

.wl-prov-foot .rating .count {
    font-weight: 600;
    color: var(--wl-text-3);
}

.wl-prov-foot .profile-btn {
    font-size: 12px;
    font-weight: 800;
    color: var(--wl-navy) !important;
    border: 1.5px solid var(--wl-navy);
    padding: 7px 14px;
    border-radius: 99px;
}

.wl-prov-foot .profile-btn:hover {
    background: var(--wl-navy);
    color: #fff !important;
}

/* ---------------- Package cards ---------------- */
.wl-pkg-card {
    background: #fff;
    border: 1px solid var(--wl-border);
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all .25s ease;
}

.wl-pkg-card:hover { box-shadow: var(--wl-shadow-hover-lg); }

.wl-pkg-img {
    height: 180px;
    background: var(--wl-wash-img);
    position: relative;
    display: block;
}

.wl-pkg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-save-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--wl-navy);
    padding: 6px 12px;
    border-radius: 99px;
}

.wl-pkg-body {
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.wl-pkg-body .name {
    font-size: 20px;
    font-weight: 800;
    color: var(--wl-navy);
}

.wl-pkg-body .desc {
    font-size: 14px;
    color: var(--wl-text-2);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-pkg-services {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.wl-pkg-services .item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wl-navy);
}

.wl-pkg-services .item svg { flex-shrink: 0; }

.wl-pkg-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-top: 1px solid var(--wl-border-soft);
    padding-top: 18px;
    margin-top: auto;
    flex-wrap: wrap;
}

.wl-pkg-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--wl-navy);
}

.wl-pkg-strike {
    font-size: 15px;
    color: var(--wl-text-3);
    text-decoration: line-through;
}

.wl-pkg-cta {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--wl-navy-deep) !important;
    background: var(--wl-grad-cta);
    padding: 14px;
    border-radius: 99px;
    box-shadow: 0 8px 20px rgba(11, 202, 196, .3);
}

.wl-pkg-cta:hover { box-shadow: 0 12px 28px rgba(11, 202, 196, .45); }

/* featured (navy) variant */
.wl-pkg-card--featured {
    background: linear-gradient(170deg, var(--wl-navy), var(--wl-navy-deep));
    border: 1px solid rgba(59, 229, 223, .3);
    box-shadow: 0 24px 50px rgba(9, 50, 74, .25);
}

.wl-pkg-card--featured .wl-pkg-img { background: var(--wl-navy-panel); }
.wl-pkg-card--featured .wl-save-chip { color: var(--wl-navy-deep); background: var(--wl-teal-bright); }
.wl-pkg-card--featured .name { color: #fff; }
.wl-pkg-card--featured .desc { color: rgba(255, 255, 255, .6); }
.wl-pkg-card--featured .wl-pkg-services .item { color: #fff; }
.wl-pkg-card--featured .wl-pkg-price-row { border-top-color: rgba(255, 255, 255, .12); }
.wl-pkg-card--featured .wl-pkg-price { color: #fff; }
.wl-pkg-card--featured .wl-pkg-strike { color: rgba(255, 255, 255, .4); }

.wl-popular-chip {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wl-navy-deep);
    background: var(--wl-grad-cta);
    padding: 6px 12px;
    border-radius: 99px;
    z-index: 1;
}

/* ---------------- Blog ---------------- */
.wl-blog-featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background: #fff;
    border: 1px solid var(--wl-border);
    border-radius: 28px;
    overflow: hidden;
    transition: all .25s ease;
}

.wl-blog-featured:hover { box-shadow: var(--wl-shadow-hover-lg); }

.wl-blog-featured-img {
    min-height: 340px;
    background: var(--wl-wash-img);
    display: block;
}

.wl-blog-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-blog-featured-body {
    padding: 44px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
}

.wl-blog-cat-chip {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wl-teal-deep);
    background: var(--wl-wash-tile);
    padding: 6px 12px;
    border-radius: 99px;
}

.wl-blog-meta { font-size: 12.5px; color: var(--wl-text-3); }

.wl-blog-featured-body .title {
    font-size: 28px;
    font-weight: 800;
    color: var(--wl-navy);
    line-height: 1.25;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-blog-featured-body .excerpt {
    font-size: 15px;
    color: var(--wl-text-2);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-blog-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-navy);
}

.wl-blog-author .wl-avatar { width: 34px; height: 34px; font-size: 11px; }
.wl-blog-author .sub { font-weight: 600; color: var(--wl-text-3); }

.wl-blog-card {
    background: #fff;
    border: 1px solid var(--wl-border);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .25s ease;
}

.wl-blog-card:hover { box-shadow: var(--wl-shadow-hover); }

.wl-blog-card-img {
    height: 180px;
    background: var(--wl-wash-img);
    display: block;
}

.wl-blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-blog-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.wl-blog-card-body .cat {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wl-teal-deep);
}

.wl-blog-card-body .title {
    font-size: 18px;
    font-weight: 800;
    color: var(--wl-navy);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-blog-card-body .wl-blog-meta { margin-top: auto; }

/* ---------------- Search input (light, page bodies) ---------------- */
.wl-input-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--wl-border);
    border-radius: 14px;
    padding: 12px 18px;
    max-width: 340px;
}

.wl-input-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    font-family: var(--wl-font);
    font-size: 14px;
    color: var(--wl-navy);
}

.wl-input-search input::placeholder { color: var(--wl-text-3); }

/* ---------------- Shimmer / empty ---------------- */
.wl-shimmer {
    background: var(--wl-wash-img);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

.wl-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: wl-shimmer 1.4s infinite;
}

@keyframes wl-shimmer {
    100% { transform: translateX(100%); }
}

.wl-empty {
    text-align: center;
    padding: 40px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--wl-text-2);
}

/* ---------------- Pagination (load more) ---------------- */
.wl-load-more {
    align-self: center;
    margin-top: 10px;
}

/* ---------------- Motion (scroll reveal + ambient) ----------------
   Reveal classes are added by js/welnesse-motion.js and removed again
   after the transition finishes, so hover transitions stay snappy and
   nothing is hidden when JS is off. Compositor-only properties. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.wl-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

.wl-reveal.wl-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .wl-float-card--white { animation: wl-bob 7s ease-in-out infinite; }
    .wl-float-card--glass { animation: wl-bob 8s ease-in-out 1.2s infinite; }
    .wl-pulse-dot { animation: wl-pulse 2.2s ease-out infinite; }
}

@keyframes wl-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes wl-pulse {
    0% { box-shadow: 0 0 0 0 rgba(60, 174, 92, .35); }
    70% { box-shadow: 0 0 0 9px rgba(60, 174, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(60, 174, 92, 0); }
}

/* ---------------- Auth screens (sign in / sign up / reset) ---------------- */
.wl-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    padding: 44px 20px 72px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--wl-navy-hero-top) 0%, var(--wl-navy-deep) 100%);
    font-family: var(--wl-font);
}

/* Language switcher for standalone auth pages (fixed, top-right, works on navy + white).
   Selector is scoped under .wl-auth-page so it beats `.wl-auth-page > * { position: relative }`
   — otherwise the switcher becomes a grid item and displaces the aside/form columns. */
.wl-auth-page .wl-auth-lang {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1200;
    font-family: var(--wl-font);
}

.wl-auth-lang > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(5, 36, 58, .1);
    box-shadow: 0 6px 18px rgba(2, 20, 34, .16);
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-navy-deep);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    backdrop-filter: blur(6px);
}

.wl-auth-lang > summary::-webkit-details-marker { display: none; }
.wl-auth-lang > summary::marker { content: ""; }
.wl-auth-lang > summary i[data-lucide="globe"] { width: 16px; height: 16px; }
.wl-auth-lang-caret { width: 13px; height: 13px; transition: transform .2s ease; opacity: .7; }
.wl-auth-lang[open] .wl-auth-lang-caret { transform: rotate(180deg); }

.wl-auth-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 168px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(5, 36, 58, .1);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(2, 20, 34, .18);
    max-height: 62vh;
    overflow-y: auto;
}

.wl-auth-lang-menu li { list-style: none; }

.wl-auth-lang-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #33454f;
    text-decoration: none;
}

.wl-auth-lang-menu a:hover { background: var(--wl-wash-tile); color: var(--wl-navy-deep); }
.wl-auth-lang-menu a.active { background: var(--wl-teal); color: var(--wl-navy-deep); }

.wl-auth-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 85% 10%, rgba(11, 202, 196, .22), transparent 60%),
        radial-gradient(700px 420px at 0% 100%, rgba(11, 202, 196, .12), transparent 60%);
}

.wl-auth-page > * { position: relative; z-index: 1; }

.wl-auth-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.wl-auth-brand .wl-brand-tile {
    background: #fff;
    border-radius: 12px;
    padding: 6px 8px;
    display: flex;
    box-shadow: 0 4px 14px rgba(2, 20, 34, .4);
}

.wl-auth-brand .wl-brand-tile img { width: 30px; height: auto; }

.wl-auth-brand .wl-brand-name {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}

.wl-auth-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 26px;
    padding: 42px 40px;
    box-shadow: 0 30px 80px rgba(2, 20, 34, .5);
}

.wl-auth-card--wide { max-width: 560px; }

.wl-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-text-2) !important;
    margin-bottom: 26px;
}

.wl-auth-back:hover { color: var(--wl-teal-deep) !important; }

.wl-auth-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--wl-navy);
    letter-spacing: -.02em;
    margin: 0 0 6px;
}

.wl-auth-title .wl-serif { color: var(--wl-teal); }

.wl-auth-sub {
    font-size: 14.5px;
    color: var(--wl-text-2);
    margin: 0 0 30px;
}

.wl-auth-page a,
.wl-auth-card a {
    color: var(--wl-teal-deep);
    font-weight: 700;
    text-decoration: none;
    transition: all .25s ease;
}

.wl-auth-card a:hover { color: var(--wl-navy); }

.wl-auth-field { margin-bottom: 22px; }

.wl-auth-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-navy);
    margin-bottom: 8px;
}

.wl-auth-field input,
.wl-auth-field select {
    width: 100%;
    height: 52px;
    border: 1px solid var(--wl-border);
    border-radius: 14px;
    padding: 0 18px;
    font-family: var(--wl-font);
    font-size: 15px;
    color: var(--wl-navy);
    background: var(--wl-page-bg);
    transition: all .25s ease;
}

.wl-auth-field input::placeholder { color: var(--wl-text-3); }

.wl-auth-field input:focus,
.wl-auth-field select:focus {
    border-color: var(--wl-teal);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 202, 196, .12);
}

.wl-auth-field .password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--wl-text-3);
    touch-action: manipulation;
}

.wl-auth-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px;
    border: 0;
    border-radius: 99px;
    font-family: var(--wl-font);
    font-size: 15px;
    font-weight: 800;
    color: var(--wl-navy-deep);
    background: var(--wl-grad-cta);
    box-shadow: var(--wl-shadow-cta);
    cursor: pointer;
    transition: all .25s ease;
}

.wl-auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(11, 202, 196, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
    color: var(--wl-navy-deep);
}

.wl-auth-submit:disabled { opacity: .7; cursor: default; transform: none; }

.wl-auth-meta {
    font-size: 13.5px;
    color: var(--wl-text-2);
}

.wl-auth-meta label { color: var(--wl-text-2); font-size: 13.5px; }

.wl-auth-divider {
    border-top: 1px solid var(--wl-border-soft);
    margin-top: 28px;
    padding-top: 22px;
    text-align: center;
}

.wl-auth-copy {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .45);
    text-align: center;
}

/* intl-tel-input inside wl inputs */
.wl-auth-field .iti { width: 100%; }
.wl-auth-field .iti__selected-flag { border-radius: 14px 0 0 14px; background: transparent; }

/* --- Split-screen auth (desktop) --- */
.wl-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    width: 100%;
}

.wl-auth-aside { display: none; }

@media (min-width: 992px) {
    .wl-auth-page {
        display: grid;
        grid-template-columns: minmax(430px, 42%) 1fr;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: var(--wl-page-bg);
    }

    .wl-auth-page::before { content: none; }

    .wl-auth-aside {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 40px;
        position: relative;
        overflow: hidden;
        padding: 48px 56px 36px;
        background: radial-gradient(700px 420px at 85% 0%, rgba(11, 202, 196, .22), transparent 60%),
            radial-gradient(600px 380px at 0% 100%, rgba(11, 202, 196, .12), transparent 60%),
            linear-gradient(180deg, var(--wl-navy-hero-top) 0%, var(--wl-navy-deep) 100%);
    }

    .wl-auth-aside > * { position: relative; z-index: 1; }

    .wl-auth-main {
        justify-content: flex-start;
        padding: 72px 48px;
        min-height: 100vh;
    }

    /* brand + copyright live in the aside on desktop */
    .wl-auth-main > .wl-auth-brand,
    .wl-auth-main > .wl-auth-copy { display: none; }

    .wl-auth-card {
        max-width: 560px;
        box-shadow: 0 24px 60px rgba(9, 50, 74, .08);
        border-color: var(--wl-border);
    }

    .wl-auth-card--wide { max-width: 700px; }
}

.wl-auth-aside .wl-band-ring { position: absolute; border-color: rgba(255, 255, 255, .07); }

.wl-auth-aside-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 420px;
}

.wl-auth-aside-title {
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
}

.wl-auth-aside-title .wl-serif { color: var(--wl-teal-bright); }

.wl-auth-aside-sub {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .6);
    margin: 0;
}

.wl-auth-bullets {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 10px;
}

.wl-auth-bullet {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wl-auth-bullet svg { flex-shrink: 0; }

.wl-auth-bullet .t1 { display: block; font-size: 14.5px; font-weight: 800; color: #fff; }
.wl-auth-bullet .t2 { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .5); }

.wl-auth-aside-copy {
    margin-top: auto; /* pin copyright to the bottom of the top-aligned aside */
    font-size: 12.5px;
    color: rgba(255, 255, 255, .4);
}

/* --- Bootstrap-form auth pages (e.g. /auth/register) skinned to brand --- */
.wl-auth-bs .card {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.wl-auth-bs .card-body { padding: 0; }

.wl-auth-bs label {
    font-family: var(--wl-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-navy) !important;
    margin-bottom: 8px;
}

.wl-auth-bs .form-control,
.wl-auth-bs .form-select {
    min-height: 52px;
    border-radius: 14px;
    border: 1px solid var(--wl-border);
    background-color: var(--wl-page-bg);
    font-family: var(--wl-font);
    font-size: 15px;
    color: var(--wl-navy);
}

.wl-auth-bs .form-control:focus,
.wl-auth-bs .form-select:focus {
    border-color: var(--wl-teal);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(11, 202, 196, .12);
}

.wl-auth-bs .select2-container--default .select2-selection--single,
.wl-auth-bs .select2-container--default .select2-selection--multiple {
    min-height: 52px;
    border-radius: 14px;
    border: 1px solid var(--wl-border);
    background-color: var(--wl-page-bg);
    padding-top: 10px;
}

.wl-auth-bs .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    border: 0;
    border-radius: 99px;
    font-family: var(--wl-font);
    font-size: 15px;
    font-weight: 800;
    color: var(--wl-navy-deep);
    background: var(--wl-grad-cta);
    box-shadow: var(--wl-shadow-cta);
    transition: all .25s ease;
}

.wl-auth-bs .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    color: var(--wl-navy-deep);
    background: var(--wl-grad-cta);
    box-shadow: 0 12px 30px rgba(11, 202, 196, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.wl-auth-bs .btn-link,
.wl-auth-bs a.btn-link {
    color: var(--wl-teal-deep);
    font-weight: 700;
    text-decoration: none;
}

.wl-auth-bs .auth-logo { display: none; }

.wl-auth-bs .iti { width: 100%; }

@media (max-width: 575px) {
    .wl-auth-card { padding: 30px 22px; border-radius: 22px; }
    .wl-auth-title { font-size: 27px; }
}

/* ---------------- Interior pages (list/detail/article/wizard) ---------------- */

/* filter chips + category pill row (service list) */
.wl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.wl-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.wl-pill {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--wl-navy);
    background: #fff;
    border: 1px solid var(--wl-border);
    padding: 9px 18px;
    border-radius: 99px;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.wl-pill:hover { border-color: var(--wl-teal); color: var(--wl-teal-deep); }
.wl-pill.active { background: var(--wl-navy); border-color: var(--wl-navy); color: #fff; }

/* generic detail two-column: content + sticky aside */
.wl-detail-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 34px;
    align-items: start;
}

.wl-detail-main { min-width: 0; display: flex; flex-direction: column; gap: 28px; }

.wl-detail-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }

.wl-panel {
    background: #fff;
    border: 1px solid var(--wl-border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--wl-shadow-rest);
}

.wl-panel-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--wl-navy);
    margin-bottom: 16px;
}

/* gallery (service/provider detail) */
.wl-gallery-hero {
    border-radius: 26px;
    overflow: hidden;
    background: var(--wl-wash-img);
    aspect-ratio: 16 / 9;
    display: block;
}

.wl-gallery-hero img { width: 100%; height: 100%; object-fit: cover; }

.wl-gallery-thumbs { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

.wl-gallery-thumb {
    width: 92px;
    height: 68px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--wl-wash-img);
    border: 2px solid transparent;
    cursor: pointer;
}

.wl-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wl-gallery-thumb.active { border-color: var(--wl-teal); }

/* included checklist */
.wl-included { display: flex; flex-direction: column; gap: 12px; }

.wl-included-item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--wl-navy);
}

.wl-included-item svg { flex-shrink: 0; }

/* caregiver mini card (in service detail aside/inline) */
.wl-provider-mini {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wl-provider-mini img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--wl-wash-tile);
}

.wl-provider-mini .name { font-size: 16px; font-weight: 800; color: var(--wl-navy); }
.wl-provider-mini .type { font-size: 12.5px; font-weight: 700; color: var(--wl-teal-deep); }

/* review card */
.wl-review {
    background: var(--wl-page-bg);
    border: 1px solid var(--wl-border);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wl-review-head { display: flex; align-items: center; gap: 12px; }

.wl-review-head img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.wl-review-head .name { font-size: 14.5px; font-weight: 800; color: var(--wl-navy); }
.wl-review-head .date { font-size: 12px; color: var(--wl-text-3); }
.wl-review-stars { color: var(--wl-star); letter-spacing: 1px; font-size: 14px; }
.wl-review-body { font-size: 14px; color: var(--wl-text-2); line-height: 1.65; }

/* sticky booking price card */
.wl-book-card .price {
    font-size: 30px;
    font-weight: 800;
    color: var(--wl-navy);
}

.wl-book-card .price .per { font-size: 13px; font-weight: 600; color: var(--wl-text-3); }
.wl-book-card .strike { font-size: 16px; color: var(--wl-text-3); text-decoration: line-through; margin-left: 8px; }

.wl-book-meta { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }

.wl-book-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
}

.wl-book-meta-row .label { color: var(--wl-text-2); display: flex; align-items: center; gap: 8px; }
.wl-book-meta-row .value { font-weight: 700; color: var(--wl-navy); }

/* article (blog detail) */
.wl-article-hero {
    height: 440px;
    background: var(--wl-wash-img);
    position: relative;
    overflow: hidden;
}

.wl-article-hero img { width: 100%; height: 100%; object-fit: cover; }

.wl-article-wrap { max-width: 760px; margin: 0 auto; }

.wl-article-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--wl-text-3);
    margin: 22px 0 28px;
}

.wl-article-meta .author { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--wl-navy); }
.wl-article-meta .author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

.wl-article-body { font-size: 17px; line-height: 1.8; color: #374151; }
.wl-article-body p { margin: 0 0 22px; }
.wl-article-body h2, .wl-article-body h3 { color: var(--wl-navy); font-weight: 800; letter-spacing: -.01em; margin: 34px 0 14px; }
.wl-article-body h2 { font-size: 27px; }
.wl-article-body h3 { font-size: 21px; }
.wl-article-body img { max-width: 100%; height: auto; border-radius: 18px; margin: 12px 0; }
.wl-article-body a { color: var(--wl-teal-deep); font-weight: 600; }
.wl-article-body ul, .wl-article-body ol { margin: 0 0 22px; padding-left: 22px; }
.wl-article-body li { margin-bottom: 8px; }

.wl-article-body blockquote {
    margin: 30px 0;
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--wl-teal);
    font-family: var(--wl-serif);
    font-style: italic;
    font-size: 24px;
    line-height: 1.5;
    color: var(--wl-navy);
}

.wl-article-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.wl-tag-chip { font-size: 12.5px; font-weight: 700; color: var(--wl-teal-deep); background: var(--wl-wash-tile); padding: 6px 14px; border-radius: 99px; }

.wl-article-nav {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid var(--wl-border);
    border-bottom: 1px solid var(--wl-border);
    padding: 28px 0;
    margin: 40px 0;
    flex-wrap: wrap;
}

.wl-article-nav a { max-width: 46%; color: var(--wl-navy); }
.wl-article-nav a:hover .t { color: var(--wl-teal-deep); }
.wl-article-nav .k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--wl-text-3); }
.wl-article-nav .t { font-size: 15px; font-weight: 800; margin-top: 6px; display: block; }
.wl-article-nav a.next { text-align: right; margin-left: auto; }

/* provider profile header (on navy band) */
.wl-prov-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.wl-prov-hero-img {
    width: 132px;
    height: 132px;
    border-radius: 26px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .2);
    flex-shrink: 0;
}

.wl-prov-hero .name { font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.wl-prov-hero .type { font-size: 15px; font-weight: 700; color: var(--wl-teal-bright); margin-top: 4px; }
.wl-prov-hero-stats { display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.wl-prov-hero-stats .stat .v { font-size: 20px; font-weight: 800; color: #fff; }
.wl-prov-hero-stats .stat .l { font-size: 12px; color: rgba(255, 255, 255, .55); }

.wl-credential {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 7px 14px;
    border-radius: 99px;
}

/* booking wizard (skin over existing markup) */
.wl-wizard-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; flex-wrap: wrap; }
.wl-wizard-step { display: flex; align-items: center; gap: 10px; }
.wl-wizard-step .dot {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    background: var(--wl-wash-tile); color: var(--wl-teal-deep);
}
.wl-wizard-step.active .dot { background: var(--wl-grad-cta); color: var(--wl-navy-deep); }
.wl-wizard-step.done .dot { background: var(--wl-navy); color: #fff; }
.wl-wizard-step .lbl { font-size: 13.5px; font-weight: 700; color: var(--wl-text-2); }
.wl-wizard-step.active .lbl { color: var(--wl-navy); }
.wl-wizard-line { flex: 1; height: 2px; background: var(--wl-border); min-width: 24px; }

/* /book-service — skin over the BookingWizard Vue (bootstrap) markup */
.wl-booking-page .booking-detail-service-box,
.wl-booking-page > .row > .col-12 > .card,
.wl-booking-page .booking-service-form,
.wl-booking-page .bg-light {
    background: #fff !important;
    border: 1px solid var(--wl-border);
    border-radius: 22px !important;
    box-shadow: var(--wl-shadow-rest);
}
.wl-booking-page .card { border: 1px solid var(--wl-border) !important; border-radius: 22px !important; box-shadow: var(--wl-shadow-rest); }
.wl-booking-page h3, .wl-booking-page h4, .wl-booking-page h5, .wl-booking-page h6 { color: var(--wl-navy); }
.wl-booking-page .text-primary { color: var(--wl-teal-deep) !important; }
.wl-booking-page .text-warning { color: var(--wl-star) !important; }
.wl-booking-page .book-service-img { border-radius: 18px !important; }
.wl-booking-page .btn-primary {
    background: var(--wl-grad-cta) !important;
    border: 0 !important;
    color: var(--wl-navy-deep) !important;
    font-weight: 800;
    border-radius: 99px;
    box-shadow: var(--wl-shadow-cta);
}
.wl-booking-page .btn-primary:hover { filter: brightness(1.03); transform: translateY(-1px); }
.wl-booking-page .btn-outline-primary {
    border: 1.5px solid var(--wl-border) !important;
    color: var(--wl-navy) !important;
    background: transparent !important;
    border-radius: 99px;
    font-weight: 700;
}
.wl-booking-page .btn-outline-primary:hover,
.wl-booking-page .btn-outline-primary.active {
    background: var(--wl-navy) !important;
    border-color: var(--wl-navy) !important;
    color: #fff !important;
}
.wl-booking-page .form-control,
.wl-booking-page .form-select {
    border-radius: 12px;
    border: 1.5px solid var(--wl-border);
    padding: 11px 14px;
    font-size: 14.5px;
}
.wl-booking-page .form-control:focus,
.wl-booking-page .form-select:focus {
    border-color: var(--wl-teal);
    box-shadow: 0 0 0 3px rgba(11, 202, 196, .12);
}
.wl-booking-page .form-check-input:checked { background-color: var(--wl-teal); border-color: var(--wl-teal); }
.wl-booking-page .booking-list-content-active { border-color: var(--wl-teal) !important; }

/* /service-list filter bar — skin over the ServicesPage.vue bootstrap + select2 markup */
.wl-svc-listing .form-select,
.wl-svc-listing .form-control {
    border-radius: 12px;
    border: 1.5px solid var(--wl-border);
    padding: 11px 14px;
    font-size: 14.5px;
    color: var(--wl-navy);
    background-color: #fff;
}
.wl-svc-listing .form-control:focus,
.wl-svc-listing .form-select:focus {
    border-color: var(--wl-teal);
    box-shadow: 0 0 0 3px rgba(11, 202, 196, .12);
}
.wl-svc-listing .btn-outline-primary {
    border: 1.5px solid var(--wl-border) !important;
    color: var(--wl-navy) !important;
    background: transparent !important;
    border-radius: 99px;
    font-weight: 700;
    padding: 9px 20px;
}
.wl-svc-listing .btn-outline-primary:hover {
    background: var(--wl-navy) !important;
    border-color: var(--wl-navy) !important;
    color: #fff !important;
}
.wl-svc-listing .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 46px;
    border: 1.5px solid var(--wl-border);
    border-radius: 12px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
}
.wl-svc-listing .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wl-navy);
    font-weight: 600;
    line-height: 1.5;
    padding-left: 6px;
}
.wl-svc-listing .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 6px; }
.wl-svc-listing .search-form .form-control { padding-right: 42px; }

/* ============================================================
   Content pages: /about-us, /faq, /help-support, /category-details
   ============================================================ */

/* sub-category pill tabs (category-details) */
.wl-subtabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.wl-subtab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 17px; border-radius: 99px;
    font-size: 13.5px; font-weight: 700; color: var(--wl-text-2);
    background: #fff; border: 1.5px solid var(--wl-border);
    cursor: pointer; transition: all .18s ease; white-space: nowrap;
}
.wl-subtab:hover { border-color: var(--wl-teal); color: var(--wl-navy); }
.wl-subtab .count {
    font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 99px;
    background: var(--wl-wash-tile); color: var(--wl-teal-deep);
}
.wl-subtab.active { background: var(--wl-navy); border-color: var(--wl-navy); color: #fff; }
.wl-subtab.active .count { background: rgba(255, 255, 255, .16); color: #fff; }

/* rich empty state */
.wl-empty-lg {
    text-align: center; padding: 56px 24px; max-width: 460px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
}
.wl-empty-lg .art {
    width: 92px; height: 92px; border-radius: 50%; margin-bottom: 18px;
    background: var(--wl-wash-tile); color: var(--wl-teal-deep);
    display: flex; align-items: center; justify-content: center;
}
.wl-empty-lg h3 { font-size: 21px; font-weight: 800; color: var(--wl-navy); margin: 0; }
.wl-empty-lg p { font-size: 14.5px; color: var(--wl-text-3); line-height: 1.65; margin: 8px 0 22px; }
.wl-empty-lg .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* help & support channel cards */
.wl-channel-card {
    background: #fff; border: 1px solid var(--wl-border); border-radius: 22px;
    padding: 30px 26px; text-align: center; box-shadow: var(--wl-shadow-rest);
    display: flex; flex-direction: column; align-items: center;
    transition: transform .18s ease, box-shadow .18s ease;
}
.wl-channel-card:hover { transform: translateY(-3px); box-shadow: var(--wl-shadow-hover); }
.wl-channel-card .ic {
    width: 58px; height: 58px; border-radius: 18px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--wl-wash-tile); color: var(--wl-teal-deep);
}
.wl-channel-card .name { font-size: 17px; font-weight: 800; color: var(--wl-navy); }
.wl-channel-card .sub { font-size: 13.5px; color: var(--wl-text-3); margin: 4px 0 12px; line-height: 1.5; }
.wl-channel-card .val { font-size: 15px; font-weight: 800; color: var(--wl-teal-deep); }

/* about-us value cards */
.wl-value { background: #fff; border: 1px solid var(--wl-border); border-radius: 22px; padding: 30px; box-shadow: var(--wl-shadow-rest); }
.wl-value .ic {
    width: 52px; height: 52px; border-radius: 15px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--wl-navy); color: var(--wl-teal-bright);
}
.wl-value .name { font-size: 18px; font-weight: 800; color: var(--wl-navy); margin-bottom: 8px; }
.wl-value .desc { font-size: 14.5px; color: var(--wl-text-2); line-height: 1.7; }

/* popular topics list (help/faq) */
.wl-topic {
    display: flex; align-items: center; gap: 13px; padding: 16px 18px;
    background: #fff; border: 1px solid var(--wl-border); border-radius: 16px;
    font-size: 14.5px; font-weight: 700; color: var(--wl-navy);
    text-decoration: none; transition: all .18s ease;
}
.wl-topic:hover { border-color: var(--wl-teal); transform: translateX(3px); color: var(--wl-navy); }
.wl-topic svg { color: var(--wl-teal-deep); flex-shrink: 0; }

/* topic filter pills (faq) */
.wl-topic-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px;
    border-radius: 99px; font-size: 13.5px; font-weight: 700;
    background: #fff; border: 1.5px solid var(--wl-border); color: var(--wl-text-2);
    cursor: pointer; transition: all .18s ease; text-decoration: none;
}
.wl-topic-pill:hover, .wl-topic-pill.active { background: var(--wl-navy); border-color: var(--wl-navy); color: #fff; }

/* reusable accordion (faq) */
.wl-acc { display: flex; flex-direction: column; gap: 12px; }
.wl-acc-item { border: 1px solid var(--wl-border); border-radius: 16px; background: #fff; overflow: hidden; }
.wl-acc-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 20px 22px; cursor: pointer; font-size: 15.5px; font-weight: 700; color: var(--wl-navy);
    list-style: none;
}
.wl-acc-head .ico { flex-shrink: 0; color: var(--wl-teal-deep); transition: transform .2s ease; }
.wl-acc-item.open .ico { transform: rotate(45deg); }
.wl-acc-body { max-height: 0; overflow: hidden; transition: max-height .28s ease, padding .28s ease; padding: 0 22px; }
.wl-acc-item.open .wl-acc-body { max-height: 600px; padding: 0 22px 20px; }
.wl-acc-body p { margin: 0; font-size: 14.5px; color: var(--wl-text-2); line-height: 1.72; }

/* legal / policy prose (terms, privacy, refund, data-deletion) — force welnesse
   typography over the WordPress-exported inline styles in the stored content */
.wl-legal, .wl-legal * { font-family: var(--wl-font) !important; }
.wl-legal { font-size: 15.5px; line-height: 1.78; color: var(--wl-text-2); }
.wl-legal p { margin: 0 0 16px !important; color: var(--wl-text-2) !important; font-size: 15.5px !important; line-height: 1.78 !important; background: transparent !important; }
.wl-legal span { color: inherit !important; background: transparent !important; font-size: inherit !important; }
.wl-legal h1, .wl-legal h2, .wl-legal h3, .wl-legal h4, .wl-legal h5, .wl-legal strong, .wl-legal b {
    color: var(--wl-navy) !important; font-weight: 800 !important;
}
.wl-legal h1, .wl-legal h2, .wl-legal h3, .wl-legal h4 { margin: 30px 0 12px !important; line-height: 1.3 !important; }
.wl-legal h2 { font-size: 22px !important; }
.wl-legal h3 { font-size: 18px !important; }
.wl-legal a { color: var(--wl-teal-deep) !important; font-weight: 600; }
.wl-legal ul, .wl-legal ol { margin: 0 0 18px; padding-left: 22px; }
.wl-legal li { margin-bottom: 9px; color: var(--wl-text-2) !important; line-height: 1.7; }
.wl-legal img { max-width: 100%; height: auto; border-radius: 14px; }

@media (max-width: 991px) {
    .wl-value, .wl-channel-card { padding: 24px; }
}

@media (max-width: 991px) {
    .wl-detail-grid { grid-template-columns: 1fr; }
    .wl-detail-aside { position: static; }
    .wl-article-hero { height: 300px; }
    .wl-article-body { font-size: 16px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1399px) {
    .wl-h1 { font-size: 56px; }
}

@media (max-width: 1199px) {
    .wl-container { padding-left: 40px; padding-right: 40px; }
    .wl-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .wl-h1 { font-size: 48px; }
    .wl-hero { gap: 40px; }
    .wl-nav-pill a { padding: 8px 13px; }
}

@media (max-width: 991px) {
    .wl-section { padding: 72px 0; }
    .wl-nav-center, .wl-nav-right { display: none; }
    .wl-burger { display: flex; }
    .wl-hero {
        grid-template-columns: 1fr;
        padding-top: 20px;
        padding-bottom: 44px;
    }
    .wl-hero-visual { height: 420px; }
    /* One floating card on tablet/phone — the 2nd ("Verified & vetted") duplicated
       the trust strip below. Move the live-visit card to the bottom so it never
       covers faces in the photo. */
    .wl-float-card--white { left: 14px; right: 14px; top: auto; bottom: 14px; }
    .wl-float-card--glass { display: none; }
    .wl-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .wl-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .wl-trust-strip { grid-template-columns: repeat(2, 1fr); }
    .wl-trust-item:nth-child(2n) { border-right: 0; }
    .wl-trust-item { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .wl-trust-item:nth-last-child(-n+2) { border-bottom: 0; }
    .wl-app-band { grid-template-columns: 1fr; padding: 48px 36px; }
    .wl-phone-wrap { height: auto; }
    .wl-phone-mock { height: 340px; margin-top: 0; }
    .wl-footer-grid { grid-template-columns: 1fr 1fr; padding: 56px 0 40px; }
    .wl-blog-featured { grid-template-columns: 1fr; }
    .wl-blog-featured-img { min-height: 240px; }
    .wl-page-h1 { font-size: 38px; }
    .wl-h2 { font-size: 34px; }
}

@media (max-width: 767px) {
    .wl-container { padding-left: 20px; padding-right: 20px; }
    .wl-h1 { font-size: 38px; }
    .wl-search {
        flex-direction: column;
        align-items: stretch;
        border-radius: 26px;
        padding: 18px;
        gap: 14px;
    }
    .wl-search-field + .wl-search-field { border-left: 0; padding-left: 0; }
    .wl-search .wl-btn-gradient { margin-left: 0; }
    .wl-grid-3, .wl-grid-4 { grid-template-columns: 1fr; }
    .wl-trust-strip { grid-template-columns: 1fr; }
    .wl-trust-item { border-right: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .wl-trust-item:last-child { border-bottom: 0; }
    .wl-sec-head { flex-direction: column; align-items: flex-start; }
    .wl-sec-head--center { align-items: center; }
    .wl-app-band-wrap { padding: 0 16px 24px; }
    .wl-footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .wl-footer-bottom { justify-content: center; text-align: center; }
    .wl-hero-visual { height: 340px; }
    .wl-blog-featured-body { padding: 26px; }
    .wl-page-h1 { font-size: 32px; }
    .wl-filter-row { flex-direction: column; }
    /* tighten generous panel padding on phones (legal/about use inline 44px) */
    .wl-panel { padding: 22px !important; }
    .wl-legal { font-size: 15px; }
    .wl-prov-hero-img { width: 104px; height: 104px; }
    .wl-prov-hero .name { font-size: 27px; }
    .wl-subtabs { gap: 8px; }
    .wl-detail-grid { gap: 22px; }
}


/* ===== merged:c1.css ===== */
/* ============================================================
   Welnesse — Booking detail (chapter c1) glue styles
   Consumed by: landing-page/BookingDetail.blade.php
   wl- prefixed; no redefinition of existing welnesse-reskin.css classes.
   ============================================================ */

/* ---- Status / payment chip (solid, colour-coded via inline bg/fg) ---- */
.wl-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 99px;
    white-space: nowrap;
    line-height: 1;
    text-transform: capitalize;
}

.wl-status-chip i,
.wl-status-chip svg { width: 15px; height: 15px; flex-shrink: 0; }

/* header "check status" link on the navy band */
.wl-band-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-teal-bright) !important;
}

.wl-band-link:hover { color: #fff !important; }
.wl-band-link i, .wl-band-link svg { width: 14px; height: 14px; }

/* ---- Booking summary card (image + title/date) ---- */
.wl-booking-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.wl-booking-summary-img {
    width: 132px;
    height: 100px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--wl-wash-img);
    flex-shrink: 0;
}

.wl-booking-summary-img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 575px) {
    .wl-booking-summary-img { width: 100%; height: 160px; }
}

/* ---- Visual status stepper / timeline ---- */
.wl-stepper {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.wl-stepper-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    position: relative;
    min-width: 0;
}

/* connector line between dots */
.wl-stepper-item::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -50%;
    width: 100%;
    height: 3px;
    background: var(--wl-border);
    z-index: 0;
}

.wl-stepper-item:first-child::before { display: none; }

.wl-stepper-item.done::before,
.wl-stepper-item.active::before { background: var(--wl-teal); }

.wl-stepper-dot {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-wash-tile);
    color: var(--wl-text-3);
    border: 3px solid var(--wl-page-bg);
    box-shadow: 0 0 0 1px var(--wl-border);
    transition: all .25s ease;
}

.wl-stepper-item.done .wl-stepper-dot {
    background: var(--wl-navy);
    color: #fff;
    box-shadow: 0 0 0 1px var(--wl-navy);
}

.wl-stepper-item.active .wl-stepper-dot {
    background: var(--wl-grad-cta);
    color: var(--wl-navy-deep);
    box-shadow: 0 0 0 4px rgba(11, 202, 196, .18);
}

.wl-stepper-dot i, .wl-stepper-dot svg { width: 16px; height: 16px; }

.wl-stepper-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wl-text-3);
    line-height: 1.3;
    text-transform: capitalize;
}

.wl-stepper-item.done .wl-stepper-label,
.wl-stepper-item.active .wl-stepper-label { color: var(--wl-navy); }

/* cancelled / terminal banner (replaces the stepper) */
.wl-status-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
}

.wl-status-banner i, .wl-status-banner svg { flex-shrink: 0; }

.wl-status-banner--cancelled {
    background: #FDEBEC;
    color: #C0392B;
}

/* ---- Action button row (status-dependent buttons) ---- */
.wl-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.wl-action-row:empty { margin-top: 0; }

/* button variants layered over wl-btn-gradient / wl-btn-outline */
.wl-btn-success { background: linear-gradient(135deg, #4FD37A, #3CAE5C) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(60, 174, 92, .3) !important; }
.wl-btn-danger-outline { color: #C0392B !important; border-color: #C0392B !important; }
.wl-btn-danger-outline:hover { background: #C0392B !important; color: #fff !important; }
.wl-btn-warning-outline { color: #B26A00 !important; border-color: #E7B15A !important; }
.wl-btn-warning-outline:hover { background: #B26A00 !important; border-color: #B26A00 !important; color: #fff !important; }

.wl-inline-note {
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--wl-teal-deep);
    background: var(--wl-wash-tile);
    padding: 8px 16px;
    border-radius: 99px;
}

/* ---- Line-item list (package services / add-ons) ---- */
.wl-line-list { display: flex; flex-direction: column; gap: 0; }

.wl-line-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--wl-border-soft);
}

.wl-line-item:last-child { border-bottom: 0; padding-bottom: 0; }
.wl-line-item:first-child { padding-top: 0; }

.wl-line-item > img {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--wl-wash-img);
    flex-shrink: 0;
}

.wl-line-item .name { font-size: 15.5px; font-weight: 800; color: var(--wl-navy); }

.wl-line-item .meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--wl-text-3);
}

.wl-line-item .price {
    font-size: 15px;
    font-weight: 800;
    color: var(--wl-navy);
    flex-shrink: 0;
    margin-left: auto;
}

/* ---- Shop block ---- */
.wl-shop-block {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.wl-shop-img {
    width: 200px;
    height: 180px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--wl-wash-img);
    flex-shrink: 0;
    display: block;
}

.wl-shop-img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 575px) {
    .wl-shop-img { width: 100%; height: 200px; }
}

.wl-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 575px) {
    .wl-info-grid { grid-template-columns: 1fr; }
}

.wl-info-tile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--wl-wash-section);
    border-radius: 12px;
    font-size: 13.5px;
    color: var(--wl-text-2);
    line-height: 1.5;
}

.wl-info-tile i, .wl-info-tile svg { color: var(--wl-teal-deep); flex-shrink: 0; margin-top: 1px; }

/* ---- Care team (caregiver + care aide) ---- */
.wl-care-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

@media (max-width: 767px) {
    .wl-care-grid { grid-template-columns: 1fr; gap: 24px; }
}

.wl-care-person { min-width: 0; }

.wl-contact-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--wl-border-soft);
    padding-top: 14px;
}

.wl-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--wl-text-2) !important;
    padding: 4px 0;
    word-break: break-word;
}

.wl-contact-row:hover { color: var(--wl-teal-deep) !important; }
.wl-contact-row i, .wl-contact-row svg { color: var(--wl-teal-deep); flex-shrink: 0; }

/* ---- Mini inline badge (remaining amount pending/paid) ---- */
.wl-mini-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 99px;
    text-transform: capitalize;
    vertical-align: 1px;
}

/* ---- Booking history timeline (status modal) ---- */
.wl-history {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wl-history-item {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 0 0 22px 0;
}

/* vertical connector */
.wl-history-item::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 26px;
    bottom: -4px;
    width: 2px;
    background: var(--wl-border);
}

.wl-history-item:last-child { padding-bottom: 0; }
.wl-history-item:last-child::before { display: none; }

.wl-history-dot {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wl-grad-cta);
    color: var(--wl-navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--wl-wash-section);
}

.wl-history-dot i, .wl-history-dot svg { width: 12px; height: 12px; }

.wl-history-body { flex: 1; min-width: 0; padding-top: 2px; }

.wl-history-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.wl-history-head .title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--wl-navy);
    text-transform: capitalize;
}

.wl-history-head .when {
    font-size: 12px;
    color: var(--wl-text-3);
    text-transform: capitalize;
    white-space: nowrap;
}

.wl-history-body .desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--wl-text-2);
    line-height: 1.55;
}


/* ===== merged:c2.css ===== */
/* ============================================================
   C2 — Customer helpdesk reskin (reusable wl- classes)
   Canonical copies of the glue classes shipped inline in:
     - resources/js/sections/HelpdeskPage.vue   (modal/form, global <style>)
     - resources/js/sections/HelpdeskTable.vue  (ticket list + modal, global <style>)
     - resources/views/landing-page/HelpdeskDetail.blade.php (thread + reply, @section after_script <style>)
   Promote into public/css/welnesse-reskin.css when that file is next
   editable. Uses design tokens from its :root. No redefinitions of
   existing wl- classes. (Inline Vue copies use hex literals because
   components can mount outside the .wl-page var scope.)
   ============================================================ */

/* ---------------- Ticket list (HelpdeskTable) ---------------- */
.wl-helpdesk-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.wl-helpdesk-tabs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wl-seg {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: 99px;
    font-size: 13.5px; font-weight: 700; color: var(--wl-text-2);
    background: #fff; border: 1.5px solid var(--wl-border);
    cursor: pointer; transition: all .18s ease; white-space: nowrap;
}
.wl-seg:hover { border-color: var(--wl-teal); color: var(--wl-navy); }
.wl-seg.active { background: var(--wl-navy); border-color: var(--wl-navy); color: #fff; }
.wl-helpdesk-toolbar-end { display: flex; align-items: center; }

/* DataTables chrome reset so server-rendered .helpdesk-card rows stack as cards */
.wl-helpdesk-datatable,
.wl-helpdesk-datatable thead,
.wl-helpdesk-datatable thead th { border: 0 !important; background: transparent !important; }
.wl-helpdesk-datatable thead { display: none; }
.wl-helpdesk-datatable,
.wl-helpdesk-datatable tbody,
.wl-helpdesk-datatable tbody tr,
.wl-helpdesk-datatable tbody td {
    display: block; width: 100%; padding: 0 !important;
    border: 0 !important; background: transparent !important;
}
.wl-helpdesk-datatable tbody td { margin-bottom: 16px; }

/* ticket card (markup: helpdesk/datatable-card.blade.php -> .helpdesk-card) */
.wl-helpdesk-datatable .helpdesk-card {
    position: relative; background: #fff; border: 1px solid var(--wl-border);
    border-radius: 20px; padding: 22px 24px; box-shadow: var(--wl-shadow-rest);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wl-helpdesk-datatable .helpdesk-card:hover {
    transform: translateY(-2px); box-shadow: var(--wl-shadow-hover);
    border-color: rgba(11, 202, 196, .5);
}
.wl-helpdesk-datatable .helpdesk-card strong.text-primary {
    color: var(--wl-teal-deep) !important; font-size: 13px !important; font-weight: 800; margin: 0 !important;
}
.wl-helpdesk-datatable .helpdesk-card h6 {
    font-size: 16.5px; font-weight: 800; color: var(--wl-navy);
    margin: 4px 0 8px; text-transform: capitalize;
}
.wl-helpdesk-datatable .helpdesk-card .line-count-2 {
    font-size: 14px !important; color: var(--wl-text-2); line-height: 1.6; margin: 0 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* status chip — recolour the piku booking-date pill */
.wl-helpdesk-datatable .helpdesk-card .booking-date {
    top: 22px !important; right: 24px; left: auto;
    padding: 5px 13px 5px 11px; border-radius: 99px;
    font-size: 12px; font-weight: 800; letter-spacing: .01em;
    display: inline-flex; align-items: center; gap: 6px; box-shadow: none;
}
.wl-helpdesk-datatable .helpdesk-card .booking-date::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.wl-helpdesk-datatable .helpdesk-card .booking-date.bg-success { background: var(--wl-wash-tile) !important; color: var(--wl-teal-deep) !important; }
.wl-helpdesk-datatable .helpdesk-card .booking-date.bg-danger { background: #F1F4F6 !important; color: var(--wl-text-2) !important; }
.wl-helpdesk-datatable .helpdesk-card hr.dropdown-divider { border-top: 1px solid var(--wl-border-soft); margin: 16px 0 12px !important; opacity: 1; }
.wl-helpdesk-datatable .helpdesk-card .text-success { color: var(--wl-teal-deep) !important; }
.wl-helpdesk-datatable .helpdesk-card > a[href] {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
    font-size: 13.5px; font-weight: 800; color: var(--wl-teal-deep) !important;
}
.wl-helpdesk-datatable .helpdesk-card > a[href]:hover { color: var(--wl-navy) !important; }

/* ---------------- New-ticket modal + form (shared) ---------------- */
.wl-modal .wl-modal-content { border: 0; border-radius: 24px; box-shadow: var(--wl-shadow-hover-lg); overflow: hidden; }
.wl-modal .wl-modal-header { border: 0; padding: 26px 28px 6px; align-items: flex-start; }
.wl-modal .wl-modal-title { font-size: 20px; font-weight: 800; color: var(--wl-navy); text-transform: capitalize; margin: 0; }
.wl-modal .wl-modal-close {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--wl-border); background: var(--wl-page-bg); color: var(--wl-text-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .2s ease; flex-shrink: 0; margin-left: auto;
}
.wl-modal .wl-modal-close:hover { background: var(--wl-navy); border-color: var(--wl-navy); color: #fff; }
.wl-modal .wl-modal-body { padding: 8px 28px 28px; }
.wl-modal .wl-modal-lead { font-size: 14px; color: var(--wl-text-2); margin: 0 0 22px; line-height: 1.6; }
.wl-req { color: #E5484D; }
.wl-field-error { color: #E5484D; font-size: 12.5px; margin-top: 5px; list-style: none; padding: 0; }
.wl-modal textarea,
.wl-reply-textarea {
    width: 100%; min-height: 110px; border: 1px solid var(--wl-border); border-radius: 14px;
    padding: 14px 18px; font-family: var(--wl-font); font-size: 15px; color: var(--wl-navy);
    background: var(--wl-page-bg); transition: all .25s ease; resize: vertical;
}
.wl-modal textarea::placeholder,
.wl-reply-textarea::placeholder { color: var(--wl-text-3); }
.wl-modal textarea:focus,
.wl-reply-textarea:focus { border-color: var(--wl-teal); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(11, 202, 196, .12); }
.wl-char-count { display: flex; justify-content: flex-end; margin-top: 6px; }
.wl-char-count small { color: var(--wl-text-3); font-size: 12px; }
.wl-modal .wl-modal-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.wl-modal .wl-modal-actions .wl-btn-gradient { min-width: 130px; }

/* branded file picker (hidden native input) */
.wl-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.wl-file-drop {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 14px;
    border: 1px dashed #CDD8DC; background: var(--wl-page-bg); color: var(--wl-teal-deep);
    font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .2s ease;
}
.wl-file-drop:hover { border-color: var(--wl-teal); background: var(--wl-wash-tile); }

/* ---------------- Detail: header chips ---------------- */
.wl-hd-ticket-id {
    display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 99px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    color: #fff; font-size: 13px; font-weight: 800;
}
.wl-hd-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 99px; font-size: 12.5px; font-weight: 800; }
.wl-hd-status--open { background: var(--wl-teal); color: var(--wl-navy-deep); }
.wl-hd-status--closed { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); }

/* ---------------- Detail: chat thread ---------------- */
.wl-thread { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.wl-msg { display: flex; gap: 12px; max-width: 78%; }
.wl-msg--mine { margin-left: auto; flex-direction: row-reverse; }
.wl-msg--support { margin-right: auto; }
.wl-msg-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--wl-wash-tile); color: var(--wl-teal-deep);
    display: flex; align-items: center; justify-content: center;
}
.wl-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wl-msg-bubble { border-radius: 20px; padding: 15px 18px; box-shadow: var(--wl-shadow-rest); min-width: 0; }
.wl-msg--mine .wl-msg-bubble { background: var(--wl-wash-tile); border: 1px solid #D4EEEC; border-bottom-right-radius: 6px; }
.wl-msg--support .wl-msg-bubble { background: #fff; border: 1px solid var(--wl-border); border-bottom-left-radius: 6px; }
.wl-msg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.wl-msg-author { font-size: 13.5px; font-weight: 800; color: var(--wl-navy); }
.wl-msg-time { font-size: 11.5px; color: var(--wl-text-3); }
.wl-msg-body { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--wl-text-2); white-space: pre-line; word-break: break-word; }
.wl-msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wl-msg-attachment {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px;
    background: rgba(255, 255, 255, .6); border: 1px solid var(--wl-border);
    font-size: 12.5px; font-weight: 700; color: var(--wl-teal-deep) !important; transition: all .2s ease;
}
.wl-msg-attachment:hover { border-color: var(--wl-teal); background: #fff; }
.wl-thread-system { display: flex; justify-content: center; }
.wl-thread-system span {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 99px;
    background: var(--wl-wash-tile); color: var(--wl-teal-deep); font-size: 12.5px; font-weight: 800;
}

/* ---------------- Detail: reply composer ---------------- */
.wl-reply-trigger { display: flex; }
.wl-reply-box { padding: 22px; }
.wl-reply-label { display: block; font-size: 13px; font-weight: 700; color: var(--wl-navy); margin-bottom: 8px; }
.wl-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.wl-reply-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-reply-actions .wl-btn-outline { padding: 11px 20px; font-size: 13.5px; }
.wl-reply-hint { display: flex; align-items: center; gap: 8px; margin: 16px 2px 0; font-size: 13px; color: var(--wl-text-3); }
.wl-reply-hint svg { color: var(--wl-teal-deep); flex-shrink: 0; }

@media (max-width: 575.98px) {
    .wl-helpdesk-toolbar { flex-direction: column; align-items: stretch; }
    .wl-helpdesk-toolbar-end .wl-btn-gradient { width: 100%; }
    .wl-helpdesk-datatable .helpdesk-card .booking-date { position: static !important; margin-bottom: 10px; }
    .wl-msg { max-width: 92%; }
    .wl-reply-foot { flex-direction: column; align-items: stretch; }
    .wl-reply-actions { justify-content: flex-end; }
}


/* ===== merged:c3.css ===== */
/* ============================================================
   Welnesse — "Request care" (post-job rebrand) glue styles
   Chapter c3. wl- prefixed, no redefinitions of existing classes.
   Consumed by: post-job.blade, post-job-detail.blade, post-job-show.blade,
   BookPostJob.blade + PostJobForm.vue / PostJobPage.vue / BookingPostJob.vue
   ============================================================ */

/* ---- Care-request form (PostJobForm) ---- */
.wl-req-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}

@media (max-width: 991px) {
    .wl-req-grid { grid-template-columns: 1fr; }
}

/* textarea sizing inside a wl-auth-field */
.wl-field-textarea textarea {
    width: 100%;
    min-height: 130px;
    border: 1px solid var(--wl-border);
    border-radius: 14px;
    padding: 14px 18px;
    font-family: var(--wl-font);
    font-size: 15px;
    color: var(--wl-navy);
    background: var(--wl-page-bg);
    resize: vertical;
    transition: all .25s ease;
}

.wl-field-textarea textarea::placeholder { color: var(--wl-text-3); }

.wl-field-textarea textarea:focus {
    border-color: var(--wl-teal);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 202, 196, .12);
}

.wl-field-error { color: #C0392B; font-size: 12.5px; margin-top: 6px; }

/* aside header (care types) */
.wl-req-aside-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* care-type row (selectable) */
.wl-care-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--wl-border);
    border-radius: 16px;
    background: #fff;
    transition: all .2s ease;
}

.wl-care-type:hover { border-color: var(--wl-teal); }

.wl-care-type .id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wl-care-type img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--wl-wash-tile);
}

.wl-care-type .name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--wl-navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-care-type .tools { display: inline-flex; gap: 10px; }

.wl-care-type .tool { cursor: pointer; display: inline-flex; }
.wl-care-type .tool--edit { color: var(--wl-teal-deep); }
.wl-care-type .tool--del { color: #C0392B; }

/* stack of care types */
.wl-care-type-list { display: flex; flex-direction: column; gap: 12px; }

/* ---- Care offers / assigned caregiver (post-job-detail) ---- */
.wl-offer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--wl-border);
    flex-wrap: wrap;
}

.wl-offer-row:last-child { border-bottom: 0; }

.wl-offer-id { display: flex; align-items: center; gap: 14px; min-width: 0; }

.wl-offer-id img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--wl-wash-tile);
}

.wl-offer-id .name { font-size: 16px; font-weight: 800; color: var(--wl-navy); }
.wl-offer-id .role { font-size: 12.5px; font-weight: 700; color: var(--wl-teal-deep); }

.wl-offer-end { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wl-offer-price { font-size: 18px; font-weight: 800; color: var(--wl-navy); }

/* status badge */
.wl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 99px;
    background: var(--wl-wash-tile);
    color: var(--wl-teal-deep);
    white-space: nowrap;
}

.wl-status-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.wl-status-badge--assigned { background: rgba(60, 174, 92, .12); color: var(--wl-success); }

/* care-needed thumbnail strip */
.wl-care-strip { display: flex; flex-wrap: wrap; gap: 16px; }

.wl-care-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 108px;
    text-align: center;
}

.wl-care-thumb img {
    width: 108px;
    height: 108px;
    border-radius: 18px;
    object-fit: cover;
    background: var(--wl-wash-img);
}

.wl-care-thumb .cap {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wl-navy);
    line-height: 1.35;
}

/* request hero panel (title + description + price on detail page) */
.wl-req-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: center;
}

.wl-req-hero-img {
    border-radius: 22px;
    overflow: hidden;
    background: var(--wl-wash-img);
    aspect-ratio: 4 / 3;
}

.wl-req-hero-img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
    .wl-req-hero { grid-template-columns: 1fr; }
}

/* ---- List page: welnesse card wrapper around controller-rendered rows ---- */
.wl-req-list { display: flex; flex-direction: column; gap: 20px; }

/* ---- Actions row ---- */
.wl-req-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}


/* ===== merged:c4.css ===== */
/*
 * C4 restyle manifest — informational only.
 *
 * All new CSS for this task was written as <style scoped> blocks inside each
 * of the 5 target .vue files (Payment.vue, LocationSearch.vue, BookingCard.vue,
 * Wallet.vue, HandymanRating.vue). welnesse-reskin.css was NOT edited (out of
 * scope per task constraints), so every component declares its own local
 * :root-level wl- custom-property fallbacks (--wl-navy, --wl-teal, etc.,
 * matching the values in welnesse-reskin.css exactly) at the top of its
 * scoped style block. This keeps each component visually correct whether or
 * not the page shell has loaded welnesse-reskin.css (most current host pages
 * — BookingDetail.blade.php via landing-page.layouts.piku — do not).
 *
 * No rules below are meant to be pasted into welnesse-reskin.css; nothing
 * here redefines a shared selector. Listed for review/audit convenience only.
 *
 * New scoped classes introduced, by file:
 *
 * Payment.vue
 *   .wl-pay, .wl-pay-title, .wl-pay-subtitle, .wl-pay-methods, .wl-pay-tile,
 *   .wl-pay-tile-icon, .wl-pay-tile-label, .wl-pay-tile.is-selected,
 *   .wl-pay-balance, .wl-pay-submit
 *
 * LocationSearch.vue
 *   .wl-locsearch, .wl-locsearch-row, .wl-locsearch-block, .wl-locsearch-pin,
 *   .wl-locsearch-pin-label, .wl-locsearch-field-wrap, .wl-locsearch-input,
 *   .wl-locsearch-dropdown, .wl-locsearch-close, .wl-locsearch-results,
 *   .wl-locsearch-list, .wl-locsearch-item, .wl-locsearch-item-img,
 *   .wl-locsearch-item-name, .wl-locsearch-empty, .wl-locsearch-btn-wrap,
 *   .wl-locsearch-popular, .wl-locsearch-chips, .wl-locsearch-chips-title,
 *   .wl-locsearch-modal
 *   (reuses shared .wl-input-search, .wl-btn-gradient, .wl-btn-outline,
 *   .wl-tag-chip, .wl-empty class names already defined in
 *   welnesse-reskin.css — declared via :deep() since those elements are
 *   plain HTML tags styled from the global sheet when present)
 *
 * BookingCard.vue
 *   .wl-bkg-card, .wl-bkg-img, .wl-bkg-status-pill (+ is-completed /
 *   is-pending / is-cancelled / is-default), .wl-bkg-body, .wl-bkg-provider,
 *   .wl-avatar, .wl-bkg-meta-row, .wl-bkg-meta-item, .wl-bkg-rating,
 *   .wl-bkg-rating-count, .wl-bkg-foot, .wl-bkg-price, .wl-bkg-pay-chip
 *
 * Wallet.vue
 *   .wl-wallet, .wl-wallet-balance-card, .wl-wallet-balance-icon,
 *   .wl-wallet-subtitle, .wl-wallet-hint, .wl-wallet-amount-group,
 *   .wl-wallet-amount-input, .wl-wallet-presets, .wl-wallet-method-tile,
 *   .wl-pay-tile / .wl-pay-tile-icon / .wl-pay-tile-label / .wl-pay-submit
 *   (local copies, scoped — see note above), .wl-wallet-history,
 *   .wl-wallet-txn-list, .wl-wallet-txn, .wl-wallet-txn-icon
 *   (+ is-credit / is-debit), .wl-wallet-txn-body, .wl-wallet-txn-amount,
 *   .wl-wallet-empty
 *
 * HandymanRating.vue
 *   .wl-hrate, .wl-hrate-trigger, .wl-hrate-list, .wl-review (local scoped
 *   copy mirroring the shared .wl-review card in welnesse-reskin.css),
 *   .wl-review-head, .wl-review-avatar, .wl-review-stars, .wl-review-body,
 *   .wl-avatar, .wl-hrate-empty, .wl-hrate-modal, .wl-hrate-close,
 *   .wl-pay-submit (local scoped copy), .wl-hrate-delete
 */


/* ===== merged:p2b.css ===== */
/* ============================================================
   P2b — Welnesse customer dashboard (dashboard/user-dashboard.blade.php)
   Reusable classes for the reskinned customer home.

   NOTE: welnesse-reskin.css (the .wl-page landing tokens) is NOT
   loaded on the backend master-layout, only welnesse-admin-theme.css.
   So these classes are self-contained (hard-coded brand values that
   mirror --wa-* tokens) and do NOT depend on --wl-* variables.
   Prefix: wl-udash- (welnesse user dashboard).

   The live blade currently inlines the equivalent styles so the page
   renders without this file. If an integrator adds this file to the
   backend head, the inline styles can be swapped for these classes.
   ============================================================ */

/* Warm welcome header ---------------------------------------- */
.wl-udash-hero {
    background: linear-gradient(135deg, #09324A 0%, #05243A 100%);
    border-radius: 18px;
    padding: 28px 32px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(9, 50, 74, .18);
}
.wl-udash-hero h1 {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
    margin: 0 0 4px;
}
.wl-udash-hero p {
    color: rgba(255, 255, 255, .72);
    margin: 0;
    font-size: .95rem;
}

/* Stat cards -------------------------------------------------- */
.wl-udash-stat {
    display: block;
    background: #fff;
    border: 1px solid #E7ECEE;
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(9, 50, 74, .04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.wl-udash-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(9, 50, 74, .10);
    border-color: rgba(11, 202, 196, .5);
    text-decoration: none;
}
.wl-udash-stat__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 202, 196, .12);
    color: #0E8F8A;
    margin-bottom: 14px;
}
.wl-udash-stat__icon svg { width: 22px; height: 22px; }
.wl-udash-stat__value {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1.1;
    color: #09324A;
    margin: 0;
}
.wl-udash-stat__label {
    color: #6C757D;
    font-size: .85rem;
    margin: 4px 0 0;
}

/* Generic white welnesse card (recent bookings, quick actions) */
.wl-udash-card {
    background: #fff;
    border: 1px solid #E7ECEE;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(9, 50, 74, .04);
    overflow: hidden;
}
.wl-udash-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid #F0F3F4;
}
.wl-udash-card__title {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #09324A;
    margin: 0;
}
.wl-udash-viewall {
    color: #0E8F8A;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}
.wl-udash-viewall:hover { color: #05243A; text-decoration: underline; }

/* Recent bookings list --------------------------------------- */
.wl-udash-blist { list-style: none; margin: 0; padding: 6px 0; }
.wl-udash-blist li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid #F0F3F4;
}
.wl-udash-blist li:last-child { border-bottom: 0; }
.wl-udash-bthumb {
    width: 44px; height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: #F0F3F4;
    flex-shrink: 0;
}
.wl-udash-bmeta { min-width: 0; flex: 1; }
.wl-udash-bmeta h5 {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: #09324A;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wl-udash-bmeta span { color: #8A959C; font-size: .82rem; }

/* Status pills ----------------------------------------------- */
.wl-udash-pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}
.wl-udash-pill--completed { background: rgba(60, 174, 92, .12); color: #2E8B4A; }
.wl-udash-pill--pending   { background: rgba(255, 179, 0, .14);  color: #B77800; }
.wl-udash-pill--cancelled { background: rgba(220, 53, 69, .10);  color: #C0392B; }
.wl-udash-pill--default   { background: rgba(11, 202, 196, .12); color: #0E8F8A; }

/* Empty state ------------------------------------------------ */
.wl-udash-empty {
    text-align: center;
    padding: 34px 22px;
    color: #8A959C;
    font-size: .9rem;
}

/* Quick-action tiles ----------------------------------------- */
.wl-udash-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid #E7ECEE;
    background: #fff;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.wl-udash-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(9, 50, 74, .10);
    border-color: rgba(11, 202, 196, .5);
    text-decoration: none;
}
.wl-udash-action__icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 202, 196, .12);
    color: #0E8F8A;
    flex-shrink: 0;
}
.wl-udash-action__icon svg { width: 20px; height: 20px; }
.wl-udash-action--primary {
    background: linear-gradient(135deg, #0BCAC4 0%, #0E8F8A 100%);
    border-color: transparent;
}
.wl-udash-action--primary .wl-udash-action__icon {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.wl-udash-action--primary .wl-udash-action__t { color: #fff; }
.wl-udash-action--primary .wl-udash-action__s { color: rgba(255, 255, 255, .85); }
.wl-udash-action__t {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: #09324A;
    margin: 0;
}
.wl-udash-action__s { color: #8A959C; font-size: .8rem; margin: 0; }