/* ============================================================
   help — South Africa's Local Services Marketplace
   Custom styles (Bootstrap 5 + custom CSS, no Tailwind)
   ============================================================ */

:root {
    --orange: #f47a20;
    --orange-dark: #e85f00;
    --orange-soft: #fff7ed;
    --blue: #0b2a8f;
    --blue-2: #1c31a6;
    --blue-deep: #01147a;
    --blue-soft: #eef2ff;
    --ink: #10152b;
    --ink2: #0f172a;
    --green: #22c55e;
    --body: #5c6478;
    --muted: #64748b;
    --line: #e9ebf2;
    --bg-soft: #f6f7fb;
    --bg-soft2: #f8f9fb;
    --white: #ffffff;
    --footer: #0d0d0d;
    --star: #ffb200;
    --shadow-sm: 0 6px 18px rgba(160, 163, 172, 0.2);
    --shadow-md: 0 14px 40px rgba(160, 163, 172, 0.2);
    --radius: 16px;
    --radius-lg: 20px;
    --form-bg: #f8f5ef;
    --form-border: #e8e3d9;
    --form-color: #7a7260;
    --h50: 50px;
    --h40: 40px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    color: var(--body);
    background: var(--white);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display,
.section-title {
    font-family: "DM Sans", sans-serif;
    color: var(--footer);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.h50 {
    height: var(--h50) !important;
}
.h40 {
    height: var(--h40) !important;
}
.min-w-300 {
    min-width: 300px;
}
.opacity-50 {
    opacity: 0.5 !important;
}
a {
    text-decoration: none;
    color: inherit;
}
@media (min-width: 1299.98px) and (max-width: 1440px) {
    .container {
        max-width: 1200px;
    }
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 600;
    border-radius: 10px;
    padding: 9px 21px;
    font-size: 14px;
    transition: all 0.18s ease;
}
.btn-orange {
    background: var(--orange);
    border: 1px solid var(--orange);
    color: #fff;
}
.btn-orange:hover {
    background: var(--orange-dark);
    border-color: var(--orange-dark);
    color: #fff;
}
.btn-outline-orange {
    background: transparent;
    border: 1px solid var(--orange);
    color: var(--orange);
}
.btn-outline-orange:hover {
    background: var(--orange);
    color: #fff;
}
.btn-blue {
    background: var(--blue);
    border: 1px solid var(--blue);
    color: #fff;
}
.btn-blue:hover {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    color: #fff;
}
.btn-outline-blue {
    background: transparent;
    border: 1px solid var(--blue);
    color: var(--blue);
}
.btn-outline-blue:hover {
    background: var(--blue);
    color: #fff;
}
.btn-light-solid {
    background: #fff;
    border: 1px solid #fff;
    color: var(--orange);
}
.btn-light-solid:hover {
    background: #f1f1f1;
    color: var(--orange-dark);
}
.btn-ghost-white {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
}
.btn-ghost-white:hover {
    background: #fff;
    color: var(--orange);
}
/* Neutral secondary — for dismiss actions that shouldn't compete with the
   primary button beside them (e.g. Cancel next to Apply). */
.btn-quiet {
    background: #fff;
    border: 1px solid #d8dee9;
    color: #475569;
}
.btn-quiet:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

/* ---------- Section helpers ---------- */
section {
    position: relative;
}
.eyebrow {
    color: var(--orange) !important;
    font-weight: 500;
    font-size: 14px;
    /* letter-spacing: 0.16em; */
    text-transform: uppercase;
    margin-bottom: 0;
}
/* Common section heading — used by every section title */
.section-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;
    color: var(--ink);
}
/* dark sections invert the heading colour only */
.story .section-title,
.cta-card .section-title {
    color: #fff;
}
.section-sub {
    color: var(--muted);
    max-width: 620px;
    font-size: 16px;
}
.py-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    background: #fff;
    border-bottom: 1px solid rgba(177, 187, 219, 0.3); /* #B1BBDB / 30% */
    padding: 20px 0;
}
.navbar .navbar-brand img {
    height: 34px;
}
.navbar .nav-link {
    color: #2b3040;
    font-weight: 500;
    font-size: 14.4px;
    padding: 6.4px 14.4px !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--blue);
}
/* "Sign In" beside the header CTAs. A third button would crowd the bar at the
   lg breakpoint, so it reads as a quiet link and matches the nav-link type. */
.nav-signin {
    display: inline-flex;
    align-items: center;
    padding: 6.4px 8px;
    color: #2b3040;
    font-weight: 600;
    font-size: 14.4px;
    text-decoration: none;
    white-space: nowrap;
}
.nav-signin:hover,
.nav-signin.active {
    color: var(--blue);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    background: #ffffff;
    padding: 90px 0 90px;
    text-align: center;
    overflow: hidden;
}
.hero .badge-pill {
    display: inline-block;
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 500;
    font-size: 14px;
    padding: 6.4px 16px;
    border-radius: 30px;
    margin-bottom: 19.2px;
}
.hero h1 {
    font-size: 64px;
    line-height: 1.12;
    margin-bottom: 16px;
}
.hero .lead {
    color: var(--muted);
    max-width: 680px;
    margin: 0 auto 32px;
    font-size: 18px;
}

/* Search bar */
.search-bar {
    background: #fff;
    /* border: 1px solid var(--line); */
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 24px;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5' fill='none'%3e%3cpath d='M0 0L5 5L10 0H0Z' fill='%230D0D0D'/%3e%3c/svg%3e");
    background-size: 10px 5px;
}
.search-bar .form-select {
    border: 1px solid var(--form-border);
    background-color: var(--form-bg);
    border-radius: 9px;
    font-size: 14px;
    color: var(--form-color);
    padding: 11.2px 32px 11.2px 14.4px; /* extra right space for the caret icon */
    /* equal basis (not 0) so fields with different padding still end equal */
    flex: 1 1 200px;
    min-width: 140px;
}
.search-bar .form-select:focus {
    border-color: var(--form-border);
    box-shadow: none;
    outline: none;
}
.search-bar .btn {
    flex: 0 0 auto;
    padding-left: 25.6px;
    padding-right: 25.6px;
}

.hero-meta {
    display: flex;
    gap: 10px 60px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25.6px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 500;
}
.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7.2px;
}
.hero-meta iconify-icon {
    color: var(--blue);
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats {
    background: var(--blue);
    color: #fff;
    padding: 48px 0;
}
.stats .stat-num {
    font-size: 40px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.stats .stat-star {
    color: #fff;
    font-size: 24px;
    vertical-align: -0.15em;
}
.stats .stat-label {
    color: #fff;
    font-size: 16px;
    margin-top: 5.6px;
}

/* ============================================================
   POPULAR SERVICES
   ============================================================ */
.services {
    background: var(--bg-soft);
}
.service-card {
    display: block; /* cards are links */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 25.6px 19.2px;
    text-align: center;
    transition: all 0.2s ease;
    height: 100%;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.service-ic {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23.2px;
    margin: 0 auto 16px;
}
.service-ic.orange {
    background: var(--orange-soft);
    color: var(--orange);
}
.service-ic.blue {
    background: var(--blue-soft);
    color: var(--blue);
}
.service-card h5 {
    font-size: 18px;
    color: var(--footer);
    margin-bottom: 3.2px;
}
.service-card p {
    font-size: 16px;
    color: var(--muted);
    margin: 0;
}

.nav-round {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid var(--blue);
    background: #fff;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    font-size: 24px;
    box-shadow: 0px 10px 40px rgba(160, 163, 172, 0.2);
}
.nav-round.carousel-prev {
    margin-right: -20px;
}
.nav-round.carousel-next {
    margin-left: -20px;
}
.nav-round:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
.nav-round:disabled {
    cursor: default;
}

/* ---------- Popular Services carousel ---------- */
.services-carousel {
    display: flex;
    align-items: center;
    gap: 0px;
}
.services-track {
    display: flex;
    gap: 16px;
    flex: 1 1 auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.services-track::-webkit-scrollbar {
    display: none;
} /* Chrome/Safari */
.service-slide {
    flex: 0 0 calc((100% - 48px) / 4); /* 4 cards per view (3 gaps) */
    scroll-snap-align: start;
}
/* Responsive breakpoints → assets/css/mediaquery.css */

/* ============================================================
   OUR STORY
   ============================================================ */
.story {
    background: var(--blue);
    color: #fff;
    overflow: hidden;
    z-index: 1;
}
.story .story-shape {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.story .story-shape img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}
.story p {
    color: #fff;
}
.story-img-wrap {
    position: relative;
}
.story-img-wrap img {
    width: 100%;
    border-radius: 30px;
    object-fit: cover;
}
.story-badge {
    position: absolute;
    right: 24px;
    bottom: 24px;
    background: #fff;
    color: var(--ink);
    border-radius: 24px 24px 0px 24px;
    padding: 16px 20px;
    box-shadow: var(--shadow-md);
    text-align: left;
}
.story-badge .yr {
    font-weight: 700;
    font-size: 28px;
    color: var(--footer);
    line-height: 1;
}
.story-badge .lb {
    font-size: 16px;
    color: var(--muted);
}

/* ============================================================
   HOW WE WORK
   ============================================================ */
/* split header: heading left, subtitle right */
.how-sub {
    max-width: 340px;
}

.work-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px;
    height: 100%;
    box-shadow: var(--shadow-sm);
}
.work-card .work-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 20.8px;
    border-bottom: 1px solid var(--form-border);
}
.work-card .work-head h4 {
    font-size: 28px;
    margin: 0;
}

/* light pill button in card header */
.pill-btn {
    background: var(--blue-soft);
    color: var(--blue);
    border: none;
    border-radius: 30px;
    font-size: 12.8px;
    font-weight: 600;
    padding: 7px 16px;
    white-space: nowrap;
    transition: all 0.18s;
}
.pill-btn:hover {
    background: var(--blue);
    color: #fff;
}

/* step: bordered box with light bg — icon on top, content below */
.step {
    background: var(--bg-soft2);
    /* border: 1px solid #edeff4; */
    border-radius: 20px;
    padding: 20px;
    height: 100%;
}
.step-ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    margin-bottom: 14.4px;
}
.step-ic.orange {
    background: #f47a20;
    color: #fff;
}
.step-ic.blue {
    background: var(--blue);
    color: #fff;
}
.step .step-no {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 1.92px;
}
.work-card.consumers {
    border: 1px solid rgba(244, 120, 32, 0.35);
}
.work-card.providers {
    border: 1px solid rgba(11, 42, 143, 0.35);
}
.work-card.consumers .step-no {
    color: var(--orange);
}
.work-card.providers .step-no {
    color: var(--blue);
}
.step h6 {
    font-size: 18px;
    margin: 0 0 3.2px;
    color: var(--footer);
    font-weight: 600;
}
.step p {
    font-size: 16px;
    margin: 0;
    color: var(--muted);
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why {
    background: var(--bg-soft);
}
.why-card {
    background: #fff;
    border: 1px solid var(--form-border);
    border-radius: var(--radius-lg);
    padding: 28.8px 24px;
    height: 100%;
    transition: all 0.2s;
}
.why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.why-ic {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--orange-soft);
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20.8px;
    margin-bottom: 17.6px;
}
.why-card h5 {
    font-size: 18px;
    margin-bottom: 6.4px;
}
.why-card p {
    font-size: 16px;
    margin: 0;
}

/* ============================================================
   FEATURED PROVIDERS
   ============================================================ */
.provider-card {
    background: #fff;
    border: 1px solid var(--form-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    transition: all 0.2s;
}
.provider-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* gray header band with avatar + category + name */
.provider-head {
    background: var(--bg-soft2);
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 15.2px;
}
.provider-avatar {
    position: relative;
    flex: 0 0 auto;
}
.provider-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}
.provider-avatar .verified {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.provider-tag {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--orange);
}
.provider-head h5 {
    font-size: 18px;
    font-weight: 600;
    margin: 1.92px 0 0;
}

/* white body */
.provider-body {
    padding: 30px;
}
.provider-loc {
    font-size: 16px;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 6.4px;
    margin-bottom: 13.6px;
}
.provider-loc iconify-icon {
    color: var(--blue);
}
.provider-body .desc {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 18.4px;
    min-height: 80px;
}
.provider-rate {
    display: flex;
    align-items: center;
    gap: 6.4px;
    font-size: 13.44px;
    margin-bottom: 18.4px;
}
.provider-rate .stars {
    color: var(--orange);
    display: flex;
    align-items: center;
    gap: 0;
}
.provider-rate .rev {
    color: var(--muted);
    font-size: 14px;
}
.provider-rate .num {
    font-weight: 600;
    font-size: 16px;
    color: var(--footer);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-wrap {
    position: relative;
}
.cta-photo {
    height: 695px;
    background:
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url("../img/img1.jpg") center/cover;
}
.cta-card {
    background: var(--orange);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 60px 20px 40px;
    text-align: center;
    box-shadow: var(--shadow-md);
    max-width: 100%;
    margin: -223px auto 0;
    position: relative;
    z-index: 2;
}
.cta-card p {
    color: rgba(255, 255, 255, 0.92);
    max-width: 560px;
    margin: 0 auto 25.6px;
}
.cta-perks {
    display: flex;
    gap: 28.8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25.6px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    font-weight: 500;
}
.cta-perks span {
    display: inline-flex;
    align-items: center;
    gap: 7.2px;
}

/* ============================================================
   PRICING
   ============================================================ */
.price-card {
    background: #fff;
    border: 1px solid var(--form-border);
    border-radius: 30px;
    padding: 40px;
    height: 100%;
    position: relative;
    transition: all 0.2s;
}
.price-card:hover {
    box-shadow: var(--shadow-md);
}
.price-card.featured {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}
.price-card.featured h4,
.price-card.featured .amount {
    color: #fff;
}
.price-card.featured .per,
.price-card.featured .tagline {
    color: rgba(255, 255, 255, 0.6);
}
.price-card.featured .feat iconify-icon {
    color: #fff !important;
}
.price-tag {
    position: absolute;
    top: 22.4px;
    right: 22.4px;
    font-size: 10.56px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 4.8px 11.2px;
    border-radius: 30px;
}
.tag-limited {
    background: #e9ecfb;
    color: var(--blue);
}
.tag-popular {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 500;
}
.tag-value {
    background: var(--blue-soft);
    color: var(--blue);
}
.price-card.featured .tag-popular {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.price-card h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}
.price-card .amount {
    font-size: 54px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
}
.price-card .amount.free {
    color: var(--blue);
}
.price-card .per {
    font-size: 14px;
    color: #8b97a8;
    font-weight: 400;
    margin-left: 5.6px;
}
.price-card .tagline {
    font-size: 16px;
    color: var(--muted);
    margin: 11.2px 0 20.8px;
}
.price-card .feat {
    min-height: 210px;
    list-style: none;
    padding: 21.6px 0 0;
    margin: 0 0 25.6px;
    border-top: 1px solid rgba(11, 42, 143, 0.3);
}
.price-card.featured .feat {
    border-top-color: rgba(255, 255, 255, 0.3);
}
.price-card.featured .feat li {
    color: #fff;
}
.price-card .feat li {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--footer);
    display: flex;
    align-items: center;
    gap: 8.8px;
}
.price-card .feat iconify-icon {
    color: var(--orange);
}
/* free & annual cards: navy amount + navy checks */
.price-card.annual .amount {
    color: var(--blue);
}
.price-card.starter .feat iconify-icon,
.price-card.annual .feat iconify-icon {
    color: var(--blue);
}

/* ============================================================
   COVERAGE
   ============================================================ */
.coverage-note {
    color: var(--orange);
    font-size: 13.44px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20.8px;
}
.province {
    padding: 16px;
    background-color: #fff;
    border-radius: var(--radius);
}
.province .p-name {
    font-weight: 600;
    color: var(--ink2);
    font-size: 18px;
    display: block;
}
.coverage-graph {
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--blue);
    font-weight: 500;
}
.coverage-graph svg {
    min-width: 14px;
}
.province .p-count {
    color: var(--muted);
    font-weight: 500;
    font-size: 14px;
    display: block;
}
.map-box {
    background: #fff;
    border: 1px solid var(--form-border);
    border-radius: 30px;
    padding: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-search {
    background: var(--bg-soft2);
}
/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: var(--footer);
    color: rgba(255, 255, 255, 0.6);
    padding: 60px 0 40px;
}
.footer .brand img {
    height: 38px;
}
.footer p {
    font-size: 13.6px;
    color: #8890a6;
    max-width: 260px;
}
.footer h6 {
    color: #fff;
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom: 17.6px;
    font-weight: 600;
}
.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer ul li {
    margin-bottom: 9.6px;
}
.footer ul li a {
    font-size: 14px;
}
.footer ul li a:hover {
    color: var(--orange);
}
.footer .social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #000000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    transition: all 0.18s;
}
.footer .social a:hover {
    background: var(--orange);
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    margin-top: 40px;
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 9.6px;
    font-size: 14px;
}
.footer-bottom a {
    font-size: 14px;
    margin-left: 19.2px;
}
.footer-bottom a:hover {
    color: var(--orange);
}

/* ============================================================
   CATEGORY PAGE  —  resources/views/categories.blade.php
   ============================================================ */
.cat-page {
    padding: 64px 0 80px;
}

/* ---------- Breadcrumb ---------- */
.crumb {
    display: flex;
    align-items: center;
    gap: 9.6px;
    font-size: 13.6px;
    font-weight: 500;
    margin-bottom: 28.8px;
}
.crumb a {
    color: var(--blue);
}
.crumb a:hover {
    color: var(--orange);
}
.crumb iconify-icon {
    color: var(--muted);
    font-size: 12px;
}
.crumb .current {
    color: var(--blue);
    font-weight: 600;
}

/* ---------- Page heading ---------- */
.page-title {
    font-size: 40px;
    line-height: 1.12;
    margin-bottom: 12px;
    color: var(--footer);
}
.page-sub {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 36px;
}

/* ---------- Group filter tabs ---------- */
.cat-tabs-wrap {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-bottom: 30px;
}
.cat-tabs {
    display: flex;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 20px;
    padding-top: 14px;
    scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar {
    display: none;
}
/* scroll arrows — reuse .nav-round, sized down for the tab strip */
.cat-tabs-nav {
    width: 28px;
    height: 28px;
    font-size: 16px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.cat-tabs-nav.left {
    margin-right: -8px;
}
.cat-tabs-nav.right {
    margin-left: -8px;
}
/* nothing to scroll → no arrows */
.cat-tabs-wrap.fits .cat-tabs-nav {
    display: none;
}
/* overflow-x clips the tab shadows at the strip's left/right edges. When every
   tab already fits there is nothing to scroll, so drop the clipping box. */
.cat-tabs-wrap.fits .cat-tabs {
    overflow: visible;
}
.cat-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 152px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 16px 27px;
    font-weight: 600;
    font-size: 18px;
    color: var(--footer);
    box-shadow: 0px 6px 30px rgba(160, 163, 172, 0.14);
    transition: all 0.18s ease;
}
.cat-tab:hover {
    border-color: var(--orange);
}
.cat-tab-ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 18px;
    flex: 0 0 auto;
    transition: all 0.18s ease;
}
.cat-tab.active {
    border-color: var(--orange);
}
.cat-tab.active .cat-tab-ic {
    background: var(--orange);
    color: #fff;
}
/* solid caret under the selected tab — filled to match the tab border */
.cat-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--orange);
    transform: translateX(-50%);
}

/* ---------- Category cards (reuses .service-card) ---------- */
.cat-card:hover {
    border-color: var(--orange);
}

/* ============================================================
   AUTHENTICATION PAGES  (Sign In  +  Get Started)
   ============================================================ */

/* Shared page wrapper: soft grey background + vertical spacing.
   Sits between the sticky navbar and the footer. */
.auth-wrap {
    background: var(--bg-soft);
    padding: 100px 0;
}

/* ----------  SIGN IN  (Welcome Back)  ---------- */

/* The centred white card that holds the login form */
.auth-card {
    max-width: 624px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.08);
    padding: 40px;
}
.auth-card .auth-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--footer);
    margin-bottom: 6px;
}
.auth-card .auth-sub {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 28px;
}

/* Field group: label + input */
.auth-form .form-group {
    margin-bottom: 20px;
}
.auth-form label {
    display: flex;
    font-weight: 500;
    font-size: 14px;
    color: var(--footer);
    margin-bottom: 3px;
}
/* Inputs use the same cream style as the hero search bar */
.auth-form .form-control {
    background: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: 10px;
    padding: 13.5px 16px;
    font-size: 14px;
    color: var(--form-color);
    height: auto;
}
.auth-form .form-control::placeholder {
    color: var(--form-color);
}
.auth-form .form-control:focus {
    border-color: var(--orange);
    box-shadow: none;
    outline: none;
}

/* Password field + show/hide (eye) toggle button */
.auth-pw {
    position: relative;
}
.auth-pw .form-control {
    padding-right: 44px; /* room for the eye button */
}
.auth-pw .pw-toggle {
    position: absolute;
    top: 50%;
    /* 12px of padding turns a 20px icon into a 44px tap target; the smaller
       `right` keeps the icon itself where it was. */
    right: 2px;
    padding: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--form-color);
    font-size: 18px;
    display: flex;
    cursor: pointer;
}

/* "Remember me"  ↔  "Forgot Password?" row */
.auth-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 24px;
}
.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--body);
    margin: 0;
    cursor: pointer;
}
.auth-remember input {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
    cursor: pointer;
}
.auth-forgot {
    font-size: 14px;
    font-weight: 500;
    color: var(--orange);
    text-decoration: none;
}
.auth-forgot:hover {
    color: var(--orange-dark);
}
.br-ra-6 {
    border-radius: 6px !important;
}
/* Make the full-width action buttons a consistent height */
.auth-form .btn,
.auth-card .btn-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.auth-card .btn-create {
    border: 1px solid rgba(1, 20, 122, 0.2);
}
/* "OR" divider with a rule on each side */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* "Don't have an account yet?" prompt above Create Account */
.auth-switch {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 14px;
}

/* Reassurance line below the card */
.auth-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-weight: 500;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.25;
}

/* ----------  GET STARTED  (role chooser)  ---------- */

/* White intro band: badge + heading + subtitle */
.gs-hero {
    text-align: center;
    padding: 100px 0;
    background: #fff;
}
.gs-badge {
    display: inline-block;
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 500;
    font-size: 14px;
    padding: 6.4px 16px;
    border-radius: 30px;
    margin-bottom: 20px;
}
.gs-title {
    font-size: 64px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
}
.gs-title span {
    color: var(--orange); /* the "help" word */
}
.gs-sub {
    color: var(--muted);
    font-size: 18px;
    max-width: 620px;
    margin: 0 auto;
}

/* Soft-grey band holding the two choice cards */
.gs-choices {
    background: var(--bg-soft);
    padding: 64px 0 72px;
}

/* A single choice card: image on top, content below */
.choice-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden; /* clip the image to the rounded top */
    height: 100%;
}
.choice-card .choice-img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
    object-position: top;
}
.choice-body {
    padding: 28px;
}
.choice-body h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--footer);
    margin-bottom: 10px;
}
.choice-body > p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 20px;
}

/* Ticked feature list inside each card */
.choice-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}
.choice-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--footer);
    margin-bottom: 12px;
}
.choice-list iconify-icon {
    color: var(--ink2);
    font-size: 18px;
    flex: 0 0 auto;
}
.choice-card .btn {
    height: var(--h40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 6px !important;
}

/* "Already have an account? Sign In" */
.gs-signin {
    text-align: center;
    margin-top: 36px;
    color: var(--muted);
    font-size: 14px;
}
.gs-signin a {
    color: var(--orange);
    font-weight: 600;
    text-decoration: none;
}
.gs-signin a:hover {
    color: var(--orange-dark);
}

/* ============================================================
   SHARED — star rating (search results + provider profile)
   ============================================================ */
.rating {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rating .stars {
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0;
}
/* Suburb autocomplete slot in the search bars — the flex field itself, sized
   to match the neighbouring .form-select boxes. The combobox fills it. */
.search-bar .gplaces-slot {
  flex: 1 1 200px;   /* same basis as .form-select → identical final widths */
  min-width: 140px;
  height: 45.6px;
  border-radius: 9px;
  /* NO overflow:hidden — the suggestions panel must extend below the field */
  display: flex;
  align-items: stretch;
  position: relative;
}
/* while suggesting, paint above neighbouring sections */
.search-bar .gplaces-slot:focus-within { z-index: 60; }
/* release section clipping so the panel isn't cut off (hero has overflow:hidden) */
.hero:has(.gplaces-slot:focus-within),
section:has(.gplaces-slot:focus-within) { overflow: visible; }
.search-bar .gplaces-slot .sac-field { border-radius: 9px; }

/* ---- Map button + picked-area chips in the search bar ---- */
.search-bar .btn-map {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid var(--blue);
  color: var(--blue);
  padding: 0 18px;
  font-weight: 600;
}
.search-bar .btn-map:hover { background: var(--blue); color: #fff; }
.picked-areas { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.picked-areas:empty { display: none; }
.picked-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--orange-soft, #fff3e8); color: #c2570b;
  border: 1px solid #f7d9bd; border-radius: 30px;
  padding: 5px 8px 5px 12px; font-size: 13px; font-weight: 600;
}
.picked-chip button { background: none; border: 0; color: inherit; font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .7; }
.picked-chip button:hover { opacity: 1; }

/* ---- Area picker modal ---- */
.area-picker[hidden] { display: none; }
.area-picker { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 24px; }
.area-picker-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.area-picker-dialog {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; width: 100%; max-width: 1080px;
  max-height: 88vh; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  text-align: left;   /* don't inherit the hero's centred text */
}
.area-picker-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 26px; border-bottom: 1px solid #eef1f6; }
.area-picker-head h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #0f172a; }
.area-picker-head p { margin: 0; font-size: 14px; color: var(--muted); max-width: 640px; }
.area-picker-x { background: none; border: 0; color: #94a3b8; cursor: pointer; line-height: 0; padding: 4px; }
.area-picker-x:hover { color: #0f172a; }

.area-picker-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.area-picker-side { padding: 20px 22px; border-right: 1px solid #eef1f6; overflow-y: auto; }
.area-picker-side .field-label { display: block; margin-bottom: 8px; }

/* Search floats over the map rather than sitting in the sidebar — on mobile the
   sidebar is below the map, and the search has to stay reachable. */
.ap-map-search {
  position: absolute; z-index: 6;
  top: 12px; left: 12px; right: 12px; max-width: 340px;
}
.ap-map-search .sac-field {
  background: #fff;
  border-color: #d8dee9;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
}
.area-picker-selected .aps-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.aps-clear { background: none; border: 0; color: var(--orange); font-size: 12px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; }
.aps-clear:hover { text-decoration: underline; }
.aps-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aps-empty { margin: 0; font-size: 13px; color: #94a3b8; }
.aps-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff3e8; color: #c2570b; border: 1px solid #f7d9bd; border-radius: 30px; padding: 5px 8px 5px 12px; font-size: 13px; font-weight: 600; }
.aps-chip button { background: none; border: 0; color: inherit; font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .7; }
.aps-chip button:hover { opacity: 1; }
.aps-chip-count { font-weight: 500; color: #94a3b8; }
.aps-chip-count--empty { color: #d9736a; }

/* Providers covering the selected areas, listed under the chips. */
.ap-providers[hidden] { display: none; }
.ap-providers { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eef1f6; }
.app-head { margin-bottom: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.app-note { margin: 0; font-size: 13px; color: #94a3b8; }
.app-note + .app-note, .app-row + .app-note { margin-top: 10px; }
.app-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit; }
.app-row:hover { background: #f8fafc; }
.app-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.app-row > div { min-width: 0; }
.app-name { display: block; font-size: 13px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-meta { display: block; font-size: 12px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-picker-map { position: relative; min-height: 420px; }
#areaPickerMap { width: 100%; height: 100%; min-height: 420px; background: #eef1f6; }

.area-picker-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 26px; border-top: 1px solid #eef1f6; }
.ap-count { font-size: 14px; font-weight: 600; color: #475569; }
.ap-actions { display: flex; gap: 10px; }

@media (max-width: 860px) {
  .area-picker { padding: 0; }
  .area-picker-dialog {
    max-width: none; border-radius: 0;
    height: 100vh; max-height: 100vh;
    height: 100dvh; max-height: 100dvh;   /* discount the browser chrome */
  }

  /* The subtitle ran to three lines and pushed everything off-screen. */
  .area-picker-head { padding: 14px 16px; }
  .area-picker-head h3 { font-size: 17px; }
  .area-picker-head p { display: none; }

  /* Map first — it carries the search box — with the selection scrolling below.
     The desktop grid can't do this: its 420px map min-height left the sidebar
     41px tall on a small phone. */
  .area-picker-body { display: flex; flex-direction: column; }
  .area-picker-map { order: -1; flex: 0 0 42vh; min-height: 0; }
  #areaPickerMap { height: 100%; min-height: 0; }
  .area-picker-side {
    flex: 1 1 auto; min-height: 0; max-height: none;
    padding: 14px 16px;
    border-right: 0; border-top: 1px solid #eef1f6;
  }
  .ap-map-search { max-width: none; top: 10px; left: 10px; right: 10px; }

  .area-picker-foot { padding: 12px 16px; gap: 10px; }
  /* Let the count shrink and ellipsise rather than wrap onto a second line. */
  .ap-count { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ap-actions { flex: 0 0 auto; gap: 8px; }
  .area-picker-foot .btn { padding: 9px 14px; }
}

/* ---- Service Area map (provider profile) ---- */
.area-map-card { margin-top: 24px; }
.area-map-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.area-map-sub { margin: 0; font-size: 14px; color: var(--muted); }
.area-map-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 60%; }
.area-map-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--form-bg); border: 1px solid var(--form-border); color: var(--footer); border-radius: 30px; padding: 5px 12px; font-size: 13px; font-weight: 500; }
.area-map-chip iconify-icon { color: var(--orange); }
#serviceAreaMap { width: 100%; height: 360px; border-radius: 14px; background: #eef1f6; }

/* ---- Search results: list + sticky map ---- */
.results-layout.has-map { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.results-map-panel { position: sticky; top: 96px; }
#resultsMap { width: 100%; height: calc(100vh - 150px); min-height: 420px; border-radius: 16px; background: #eef1f6; box-shadow: var(--shadow-md); }
.map-toggle { display: none; }

/* map info card (pin click) */
.map-card { font-family: 'DM Sans', system-ui, sans-serif; max-width: 240px; padding: 4px 2px; }
.map-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.map-card-top img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.map-card-cat { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--orange); }
.map-card-name { font-size: 15px; font-weight: 700; color: #0f172a; }
.map-card-meta { font-size: 13px; color: #475569; margin-bottom: 8px; }
.map-card-link { display: inline-block; font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; }
.map-card-link:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
  .results-layout.has-map { display: flex; flex-direction: column; }
  .results-map-panel { display: none; position: static; margin-bottom: 20px; order: -1; } /* map above the list when opened */
  .results-layout.map-open .results-map-panel { display: block; }
  #resultsMap { height: 340px; min-height: 0; }
  .map-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 16px; padding: 10px 18px;
    background: #fff; border: 1px solid var(--blue); color: var(--blue);
    border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer;
  }
}

/* clamped description + read-more toggle */
.desc-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-toggle {
  background: none; border: 0; padding: 0; margin: -6px 0 12px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--orange);
  cursor: pointer;
}
.desc-toggle:hover { text-decoration: underline; }

/* proportional star fill: grey track + orange overlay clipped to --fill */
.stars-fill { position: relative; display: inline-flex; line-height: 0; }
.stars-fill-track { display: inline-flex; white-space: nowrap; color: #d9dde6; }
.stars-fill-on {
  position: absolute; top: 0; left: 0;
  display: inline-flex; white-space: nowrap; overflow: hidden;
  width: var(--fill, 0%); color: var(--orange, #f47a20);
}
.rating .rating-num {
  font-weight: 600;
  font-size: 16px;
  color: var(--footer);
}
.rating .rating-rev {
  font-size: 14px;
  color: var(--muted);
}

/* ============================================================
   SEARCH RESULTS  —  resources/views/search-results.blade.php
   ============================================================ */
.search-page { padding: 64px 0 80px; }

/* full-width search bar (reuses .search-bar from the hero) */
.search-page .search-bar {
  max-width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 0 0 40px;
}

/* results header: title left, sort control right */
.results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.results-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--footer);
  margin: 2px 0 8px;
}
.results-sub {
  font-size: 16px;
  color: var(--muted);
  margin: 0;
}
.sort-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sort-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.sort-select.form-select {
  border: 1px solid var(--form-border);
  background-color: var(--form-bg);
  border-radius: 10px;
  font-size: 14px;
  color: var(--footer);
  padding: 13px 40px 13px 16px;
  width: auto;
  min-width: 150px;
}
.sort-select.form-select:focus { border-color: var(--form-border); box-shadow: none; }

/* results list */
.result-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}
.result-card {
  display: flex;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
}
.result-card:hover {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.result-media {
  flex: 0 0 300px;
  background: var(--bg-soft2) center/cover no-repeat;
  min-height: 262px;
  display: block;
}
.result-body {
  flex: 1 1 auto;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.result-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.result-identity {
  display: flex;
  align-items: center;
  gap: 16px;
}
.result-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--footer);
  margin: 2px 0 0;
}
.result-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue);
  white-space: nowrap;
}
.result-desc {
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
  margin: 0;
}
.result-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
}
.result-quote {
  height: var(--h40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}

/* pagination */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  background: #fff;
  color: var(--footer);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s ease;
}
.page-btn:hover { border-color: var(--blue); color: var(--blue); }
.page-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.page-arrow { color: var(--blue); font-weight: 500; }

/* ============================================================
   PROVIDER PROFILE  —  resources/views/provider-profile.blade.php
   ============================================================ */
.profile-page { padding: 64px 0 80px; }

/* verified check badge (green circle) */
.check-badge {
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.check-badge.lg {
  width: 34px;
  height: 34px;
  font-size: 18px;
  position: absolute;
  right: 2px;
  bottom: 2px;
  border: 3px solid #fff;
}
.check-badge.sm {
  width: 28px;
  height: 28px;
  font-size: 15px;
}

/* hero card */
.profile-hero {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-lg);
  padding: 30px;
  margin-bottom: 30px;
}
.profile-hero-top {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.profile-avatar-lg {
  position: relative;
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
}
.profile-avatar-lg img {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-identity {
  flex: 1 1 280px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-name {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--footer);
  margin: 0;
}
.profile-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-left: auto;
}
.profile-price {
  font-size: 30px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
}
.profile-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 184px;
}
.profile-buttons .btn {
  height: var(--h50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-divider {
  border: 0;
  border-top: 1px solid var(--form-border);
  margin: 30px 0;
  opacity: 1;
}
.profile-bio {
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
  margin: 0;
}

/* generic content card (about / gallery / reviews) */
.profile-card {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.card-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--footer);
  margin-bottom: 20px;
}
.card-text {
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
  margin-bottom: 24px;
}

/* about — info tiles */
.info-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-tile {
  background: var(--bg-soft2);
  border-radius: var(--radius);
  padding: 16px;
}
.info-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--orange);
  margin-bottom: 6px;
}
.info-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--footer);
}

/* work gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-item {
  aspect-ratio: 1 / 0.9;
  border-radius: 12px;
  background: var(--bg-soft2) center/cover no-repeat;
}
.gallery-more {
  position: relative;
  overflow: hidden;
  display: block;
}
.gallery-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 42, 143, 0.72);
}
.gallery-more-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  z-index: 1;
}

/* customer reviews */
.profile-reviews { margin-top: 30px; }
.reviews-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.reviews-head .btn {
  height: var(--h50);
  padding: 0 18px;
}
.review-card {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  height: 100%;
}
.review-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.review-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.review-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--footer);
}
.review-time {
  font-size: 14px;
  color: var(--muted);
}
.review-divider {
  border: 0;
  border-top: 1px solid var(--form-border);
  margin: 16px 0;
  opacity: 1;
}
.review-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 16px;
}

/* ============================================================
   RESPONSIVE  →  assets/css/mediaquery.css (+ inline below)
   ============================================================ */
@media (max-width: 767.98px) {
  .result-card { flex-direction: column; }
  .result-media { flex-basis: auto; width: 100%; min-height: 180px; }
  .results-title { font-size: 30px; }
  .profile-name { font-size: 30px; }
  .profile-cta { margin-left: 0; width: 100%; }
  .profile-buttons { flex: 1 1 auto; }
}

/* ============================================================
   SHARED — form fields (request quote + contact)
   ============================================================ */
.field { display: flex; flex-direction: column; }
.field-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--footer);
  margin-bottom: 8px;
  display: block;
}

/* ---- customer review form (client quote details) ---- */
/* CSS-only star picker: radios reversed so hover/checked fills left-to-right */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label { color: #d9dde6; cursor: pointer; line-height: 0; transition: color .12s; }
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--orange); }
.star-input input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

.review-form .btn { min-width: 160px; }
.mt-3 { margin-top: 16px; }

.review-done .rating { margin-bottom: 8px; }
.review-done-text { font-style: italic; color: var(--footer); margin: 0 0 10px; }
.review-status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin: 0; }
.review-status--approved { color: #1a7f37; }
.review-status--pending  { color: #b26a00; }
.review-status--rejected { color: #d93025; }
.field-control {
  width: 100%;
  background: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: 10px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--footer);
  transition: border-color 0.18s ease;
}
.field-control::placeholder { color: var(--form-color); }
.field-control:focus { outline: none; border-color: var(--orange); }
textarea.field-control { resize: vertical; min-height: 108px; line-height: 1.5; }
select.field-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5' fill='none'%3e%3cpath d='M0 0L5 5L10 0H0Z' fill='%230D0D0D'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 5px;
  padding-right: 36px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Inline opt-in under a field (e.g. "this is my WhatsApp number"). */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--body);
  cursor: pointer;
}
.field-check input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: #25d366;   /* WhatsApp green */
  cursor: pointer;
}
.field-check iconify-icon { color: #25d366; vertical-align: -3px; margin-right: 2px; }
.field-check small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* "WhatsApp" pill beside a confirmed number. Duplicated in portal.css, which
   the provider portal loads instead of this file (same as .req). */
.wa-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; padding: 1px 8px;
  background: #e7f9ee; color: #128c47;
  border-radius: 30px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.wa-tag iconify-icon { color: #25d366; }   /* WhatsApp brand green */

/* dashed upload dropzone */
.upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--form-bg);
  border: 2px dashed var(--form-border);
  border-radius: 10px;
  padding: 28px 16px;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.upload-drop:hover { border-color: var(--orange); }
.upload-drop iconify-icon { color: var(--orange); font-size: 24px; }
.upload-drop .upload-main { font-size: 14px; color: var(--form-color); }
.upload-drop .upload-note { font-size: 12px; color: var(--form-color); }

/* ============================================================
   REQUEST A QUOTE  —  resources/views/request-quote.blade.php
   ============================================================ */
.quote-page { padding: 64px 0 80px; }
.quote-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 50px;
  align-items: start;
}

/* provider summary (left) */
.quote-summary {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: 100px;
}
.quote-summary-head {
  background: var(--bg-soft2);
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.quote-summary-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--footer);
  margin: 2px 0 0;
}
.quote-summary-body { padding: 30px; }
.quote-summary-desc {
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
  margin: 14px 0 16px;
  white-space: pre-line; /* keep the provider's line breaks */
}
/* preserve line breaks typed into descriptions */
.text-prewrap { white-space: pre-line; }
.quote-summary-divider {
  border: 0;
  border-top: 1px solid var(--form-border);
  margin: 20px 0;
  opacity: 1;
}
.quote-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.quote-privacy iconify-icon { color: var(--green); flex: 0 0 auto; margin-top: 2px; }

/* form (right) */
.quote-form-head { margin-bottom: 30px; }
.quote-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--footer);
  margin-bottom: 8px;
}
.quote-sub { font-size: 16px; color: var(--muted); margin: 0; }
.quote-form {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-soft2);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.quote-account-top { font-size: 14px; color: var(--form-color); }
.quote-account-sub { font-size: 14px; font-weight: 500; color: var(--footer); }
.quote-account-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  white-space: nowrap;
}
.quote-account-link:hover { color: var(--orange-dark); }

/* ============================================================
   QUOTE REQUEST SENT  —  resources/views/quote-sent.blade.php
   ============================================================ */
.sent-card {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 90px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sent-icon { color: var(--green); line-height: 0; margin-bottom: 20px; }
.sent-title { font-size: 40px; font-weight: 700; color: var(--footer); margin: 0; }
.sent-text {
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 500px;
  margin: 0 0 20px;
}
.sent-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.sent-actions .btn { padding-left: 32px; padding-right: 32px; }

/* ============================================================
   SUPPORT / LEGAL HERO BAND (contact, terms, privacy)
   ============================================================ */
.support-hero {
  background: var(--bg-soft2);
  padding: 60px 0;
  text-align: center;
}
.badge-soft {
  display: inline-block;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 24px;
  margin-bottom: 20px;
}
.support-hero-title {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--footer);
  margin-bottom: 16px;
}
.support-hero-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto;
}

/* ============================================================
   CONTACT SUPPORT  —  resources/views/contact.blade.php
   ============================================================ */
.eyebrow-orange {
  color: var(--orange);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* help topics */
.help-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.help-card {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-lg);
  padding: 25px;
  height: 100%;
  transition: all 0.2s ease;
}
.help-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.help-ic {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.help-card h5 { font-size: 18px; font-weight: 600; color: var(--footer); margin-bottom: 8px; }
.help-card p { font-size: 16px; color: var(--muted); margin: 0; line-height: 1.6; }

/* get in touch */
.getintouch { background: var(--bg-soft2); padding: 80px 0; }
.contact-info-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 40px;
}
.contact-row { display: flex; align-items: flex-start; gap: 20px; }
.contact-ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.contact-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.contact-value { font-size: 18px; font-weight: 600; color: var(--footer); }
.contact-note { font-size: 16px; color: var(--muted); margin-top: 4px; }
.contact-divider {
  border: 0;
  border-top: 1px solid var(--form-border);
  margin: 24px 0;
  opacity: 1;
}
.contact-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 40px;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }

/* support CTA band */
.support-cta {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.support-cta-content { position: relative; z-index: 1; max-width: 640px; }
.support-cta-title { font-size: 40px; font-weight: 700; color: #fff; margin: 6px 0 12px; }
.support-cta-text { font-size: 16px; color: rgba(255, 255, 255, 0.9); margin: 0; }
.support-cta .btn { position: relative; z-index: 1; }
.support-cta-blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.support-cta-blob.blob-1 { width: 360px; height: 360px; top: -190px; right: 60px; }
.support-cta-blob.blob-2 { width: 360px; height: 360px; top: 40px; right: 280px; }

/* ============================================================
   LEGAL PAGES  —  terms.blade.php + privacy.blade.php
   ============================================================ */
.container-narrow {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 12px;
}
.legal-page { padding: 64px 0 80px; }
.legal-callout {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--blue-soft);
  border: 1px solid rgba(11, 42, 143, 0.12);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 40px;
}
.legal-callout-ic {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.legal-callout-title { font-size: 18px; font-weight: 600; color: var(--blue); margin-bottom: 8px; }
.legal-callout-text { font-size: 16px; line-height: 1.62; color: var(--muted); margin: 0; }
.legal-sections { display: flex; flex-direction: column; gap: 24px; }
.legal-card {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px 36px;
}
.legal-card-title { font-size: 18px; font-weight: 600; color: var(--footer); margin-bottom: 14px; }
.legal-card-text { font-size: 16px; line-height: 1.62; color: var(--muted); margin: 0; }
.legal-foot {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  margin: 40px 0 0;
}

/* ============================================================
   RESPONSIVE — new pages
   ============================================================ */
@media (max-width: 991.98px) {
  .quote-layout { grid-template-columns: 1fr; gap: 30px; }
  .quote-summary { position: static; }
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .support-hero-title { font-size: 48px; }
}
@media (max-width: 767.98px) {
  .field-row { grid-template-columns: 1fr; }
  .quote-form, .contact-info-card, .contact-form-card { padding: 24px; }
  .quote-title, .sent-title, .support-cta-title { font-size: 30px; }
  .support-hero-title { font-size: 36px; }
  .support-hero-sub { font-size: 16px; }
  .help-grid { grid-template-columns: 1fr; }
  .sent-card { padding: 56px 20px; }
  .support-cta { padding: 30px; }
  .support-cta-title { font-size: 28px; }
  .legal-callout { padding: 22px; }
  .legal-card { padding: 24px; }
}

/* ============================================================
   CLIENT PORTAL — header (partials/client-header.blade.php)
   ============================================================ */
.client-nav { padding: 16px 0; }
.client-nav .navbar-nav .nav-link { color: #2b3040; }
.client-utils {
  display: flex;
  align-items: center;
  gap: 12px;
}
.client-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  padding: 0 16px;
  height: 48px;
  min-width: 260px;
}
.client-search iconify-icon { color: var(--muted); }
.client-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: var(--footer);
  width: 100%;
}
.client-search input::placeholder { color: var(--muted); }
.client-icon-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  background: #fff;
  color: var(--footer);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.client-badge {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  border: 1.5px solid #fff;
}
.client-user {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  padding: 6px 6px 6px 6px;
  cursor: pointer;
}
.client-user > img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}
.client-user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.client-user-name { font-size: 14px; font-weight: 600; color: var(--footer); }
.client-user-role { font-size: 12px; font-weight: 500; color: var(--orange); text-align: left; }
.client-user { font-family: inherit; text-align: left; }
.client-user > iconify-icon { color: var(--footer); transition: transform 0.18s ease; }
.client-user[aria-expanded="true"] > iconify-icon { transform: rotate(180deg); }

/* user dropdown menu */
.client-user-dropdown { position: relative; }
.client-user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  display: none;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  padding: 8px;
  min-width: 210px;
  box-shadow: var(--shadow-md);
  margin-top: 8px;
  background: #fff;
  list-style: none;
  z-index: 1000;
}
.client-user-menu.show { display: block; }
.client-user-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--footer);
  border-radius: 8px;
  padding: 10px 12px;
}
.client-user-menu .dropdown-item iconify-icon { color: var(--muted); }
.client-user-menu .dropdown-item:hover,
.client-user-menu .dropdown-item:focus { background: var(--bg-soft2); color: var(--footer); }
.client-user-menu .dropdown-item.item-danger,
.client-user-menu .dropdown-item.item-danger iconify-icon { color: #cf1919; }
.client-user-menu .dropdown-item.item-danger:hover,
.client-user-menu .dropdown-item.item-danger:focus { background: #fdecec; color: #cf1919; }
.client-user-menu .dropdown-divider { margin: 6px 4px; border-color: var(--form-border); }

/* ============================================================
   CLIENT PORTAL — shared page shell
   ============================================================ */
.portal-section {
  background: var(--bg-soft2);
  padding: 40px 0 80px;
}
.portal-hero,
.portal-head,
.stat-row { margin-bottom: 30px; }

.eyebrow-orange {          /* also used by contact page */
  color: var(--orange);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* hero */
.portal-hero {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.portal-hero-content { position: relative; z-index: 1; max-width: 560px; }
.portal-hero-title { font-size: 40px; font-weight: 700; color: #fff; margin: 6px 0 12px; }
.portal-hero-text { font-size: 16px; color: rgba(255,255,255,0.9); margin: 0; }
.portal-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 200px;
}
.portal-hero-actions .btn { padding-left: 24px; padding-right: 24px; }
.portal-hero-blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.portal-hero-blob.blob-1 { width: 367px; height: 367px; top: -250px; right: 40px; }
.portal-hero-blob.blob-2 { width: 367px; height: 367px; top: 40px; right: 220px; }

/* stat cards */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.stat-card {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.stat-label { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.stat-value { font-size: 18px; font-weight: 600; color: var(--footer); }
.stat-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--form-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.stat-ic.tone-green  { color: #0b891e; }
.stat-ic.tone-orange { color: var(--orange); }
.stat-ic.tone-red    { color: #cf1919; }
.stat-ic.tone-blue   { color: var(--blue); }

/* generic panel */
.panel {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius);
  padding: 24px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.panel-title { font-size: 18px; font-weight: 600; color: var(--footer); margin: 0; }
.panel-sub { font-size: 14px; color: var(--muted); margin: 0; }
.panel-link { font-size: 14px; font-weight: 600; color: var(--orange); }
.panel-link:hover { color: var(--orange-dark); }
.panel-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.panel-icon-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.panel-ic {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* portal page head (back + title + control) */
.portal-head {
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.portal-back {
  width: 48px;
  height: 48px;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  flex: 0 0 auto;
}
.portal-back:hover { background: var(--orange-soft); color: var(--orange); }
.portal-head-titles { flex: 1 1 auto; min-width: 0; }
.portal-head-title { font-size: 28px; font-weight: 700; color: var(--footer); margin: 0; }
.portal-head-sub { font-size: 14px; color: #6b7280; margin: 4px 0 0; }
.portal-head-sub .dot { color: var(--muted); margin: 0 4px; }
.portal-head-control { display: flex; align-items: center; gap: 10px; }
.control-label { font-size: 14px; font-weight: 500; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.portal-select.field-control { width: auto; min-width: 130px; height: 48px; padding-top: 0; padding-bottom: 0; }
.head-status { margin-left: auto; }

.portal-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  padding: 0 16px;
  height: 48px;
  min-width: 260px;
}
.portal-search iconify-icon { color: var(--muted); }
.portal-search input { border: 0; outline: 0; background: transparent; font-size: 14px; width: 100%; color: var(--footer); }
.portal-search input::placeholder { color: var(--muted); }

/* requests table */
.table-scroll { overflow-x: auto; }
.req-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.req-table thead th {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  text-align: left;
  padding: 16px;
  background: var(--bg-soft2);
}
.req-table thead th:first-child { border-radius: 10px 0 0 10px; }
.req-table thead th:last-child { border-radius: 0 10px 10px 0; }
.req-table tbody td {
  font-size: 14px;
  color: var(--footer);
  padding: 16px;
  border-bottom: 1px solid var(--form-border);
}
.req-table .ta-end { text-align: right; }
.req-provider { display: flex; align-items: center; gap: 10px; }
.req-provider img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.status { font-size: 14px; font-weight: 500; }
/* One per value Lead::clientStatusClass() can return — a missing variant
   leaves the label in the default body colour. */
.status-accepted  { color: #14af3e; }
.status-rejected  { color: #cf1919; }
.status-pending   { color: var(--orange); }
.status-completed { color: #0b891e; }   /* same green the "Completed" stat uses */
.req-action { color: var(--muted); display: inline-flex; }
.req-action:hover { color: var(--blue); }

/* empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 80px 24px;
}
.empty-ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e8e8e8;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.empty-title { font-size: 18px; font-weight: 600; color: var(--footer); margin: 0; }
.empty-text { font-size: 14px; color: var(--muted); max-width: 400px; margin: 0 0 8px; }

/* quote request details */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 386px;
  gap: 20px;
  align-items: start;
}
.detail-main { display: flex; flex-direction: column; gap: 20px; }
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.detail-grid.two { grid-template-columns: 1fr 1fr; }
.detail-field { background: var(--bg-soft2); border-radius: var(--radius); padding: 16px; }
.detail-label { font-size: 14px; color: var(--form-color); margin-bottom: 6px; }
.detail-value { font-size: 14px; font-weight: 500; color: var(--footer); line-height: 1.5; }
.upload-gallery { display: flex; gap: 14px; flex-wrap: wrap; }
.upload-gallery img { width: 160px; height: 120px; border-radius: 10px; object-fit: cover; }
.side-provider {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-soft2);
  border-radius: var(--radius);
  padding: 16px;
}
.side-provider-name { font-size: 18px; font-weight: 600; color: var(--footer); margin: 2px 0 0; }
.side-provider-desc { font-size: 16px; color: var(--muted); line-height: 1.6; margin: 10px 0 14px; }
.side-divider { border: 0; border-top: 1px solid var(--form-border); margin: 20px 0; opacity: 1; }

/* ---- responsive ---- */
@media (max-width: 1199.98px) {
  .client-search { display: none; }
}
@media (max-width: 991.98px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .detail-layout { grid-template-columns: 1fr; }
  .portal-hero-actions { flex-direction: row; width: 100%; }
  .portal-hero-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 767.98px) {
  .portal-hero { padding: 28px; }
  .portal-hero-title { font-size: 28px; }
  .portal-head-title { font-size: 22px; }
  .portal-head-control { width: 100%; }
  .portal-select.field-control { flex: 1 1 auto; }
  .head-status { margin-left: 0; }
  .panel-tools { width: 100%; }
  .portal-search { min-width: 0; flex: 1 1 auto; }
  .detail-grid.two { grid-template-columns: 1fr; }
  .client-user-meta { display: none; }
}
@media (max-width: 575.98px) {
  .stat-row { grid-template-columns: 1fr; }
  .upload-gallery img { width: 100%; height: 160px; }
}

/* ============================================================
   AUTH — sign-up + provider wizard (extends the auth styles above)
   ============================================================ */
.auth-wrap { padding: 64px 0 80px; }
.auth-card.auth-card--md { max-width: 760px; }
.auth-card.auth-card--lg { max-width: 900px; }
.auth-title.mb-0, .auth-sub.mb-0 { margin-bottom: 0; }

/* 2-column form row */
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.auth-row .form-group { margin-bottom: 0; }

/* select + textarea share the cream input look */
.auth-form select.form-control,
.auth-form input.form-control,
.auth-form textarea.form-control { width: 100%; }
.auth-form select.form-control {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5' fill='none'%3e%3cpath d='M0 0L5 5L10 0H0Z' fill='%230D0D0D'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 10px 5px; padding-right: 40px;
}
.auth-form textarea.form-control { min-height: 100px; resize: vertical; line-height: 1.5; }

/* password strength */
.pw-strength { display: flex; gap: 4px; margin-top: 10px; }
.pw-seg { flex: 1; height: 6px; border-radius: 20px; background: var(--line); }
.pw-seg.on { background: #f97316; }
.pw-hint { font-size: 12px; font-weight: 500; color: #f97316; margin: 8px 0 0; }

/* terms checkbox line */
.auth-terms { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--body); margin: 4px 0 24px; cursor: pointer; }
.auth-terms input { width: 18px; height: 18px; accent-color: var(--blue); margin-top: 1px; flex: 0 0 auto; cursor: pointer; }
.auth-terms a { color: var(--orange); font-weight: 500; }

/* step head */
.step-head { margin-bottom: 24px; }
.step-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #f97316; margin: 0 0 8px; }

/* step indicator */
.auth-steps { display: flex; align-items: flex-start; margin-bottom: 28px; }
.auth-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; text-align: center; }
.auth-step-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.auth-step-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.auth-step.active .auth-step-num, .auth-step.done .auth-step-num { background: #f97316; border-color: #f97316; color: #fff; }
.auth-step.active .auth-step-label, .auth-step.done .auth-step-label { color: #f97316; }
.auth-step-line { flex: 1 1 auto; height: 2px; background: var(--line); margin-top: 18px; }
.auth-step-line.done { background: #f97316; }

/* service-area chips */
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.area-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--orange-soft); color: var(--orange); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 60px; }
.area-chip button { border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }

/* working hours */
.wh-section { margin-top: 8px; }
.wh-title { font-size: 20px; font-weight: 700; color: var(--footer); margin-bottom: 16px; }
.wh-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.wh-day { display: flex; align-items: center; gap: 10px; min-width: 150px; font-size: 18px; font-weight: 600; color: var(--ink2); margin: 0; cursor: pointer; }
.wh-day input { width: 22px; height: 22px; accent-color: var(--blue); cursor: pointer; }
.wh-times { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; }
.wh-time { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 0; background: var(--form-bg); border: 1px solid var(--form-border); border-radius: 10px; padding: 13px 16px; font-size: 14px; color: var(--form-color); white-space: nowrap; }
.wh-time iconify-icon { color: var(--form-color); }
.wh-dash { color: var(--ink2); font-weight: 600; }

/* identity type toggle (wizard step 1) — custom-drawn radios */
.idtype-toggle { display: flex; gap: 22px; margin-bottom: 10px; }
.idtype-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--footer); cursor: pointer; margin: 0; position: relative; }
.idtype-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.idtype-opt .radio-mark {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #cbd5e1; background: #fff; position: relative;
  transition: border-color .15s;
}
.idtype-opt input:checked + .radio-mark { border-color: var(--orange); }
.idtype-opt input:checked + .radio-mark::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--orange);
}
.idtype-opt input:focus-visible + .radio-mark { outline: 2px solid var(--orange); outline-offset: 2px; }
.idtype-opt:hover .radio-mark { border-color: var(--orange); }
.optional-tag { font-size: 12px; font-weight: 400; color: var(--muted); }

/* profile photo / logo upload (wizard step 1) */
.logo-upload { display: flex; align-items: center; gap: 14px; }
.logo-upload-preview { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; background: var(--form-bg); border: 1px dashed #b7a47f; display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; }
.logo-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.logo-upload .btn-browse { margin-top: 0; cursor: pointer; }

/* gallery dropzone */
.gallery-drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--form-bg); border: 1px dashed #b7a47f; border-radius: 14px; padding: 28px 20px; margin-bottom: 20px; cursor: pointer; }
.gallery-drop-ic { width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--form-color); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.gallery-drop-title { font-size: 14px; font-weight: 700; color: var(--form-color); }
.gallery-drop-sub { font-size: 12px; color: var(--muted); max-width: 340px; }
.btn-browse { margin-top: 10px; background: var(--form-bg); border: 1px solid var(--blue); color: var(--blue); border-radius: 6px; height: 40px; padding: 0 16px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.btn-browse:hover { background: var(--blue); color: #fff; }

/* gallery thumbnails */
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.gallery-thumb { position: relative; width: 100px; height: 100px; }
.gallery-thumb img { width: 100px; height: 100px; object-fit: cover; border-radius: 13px; display: block; }
.gallery-remove { position: absolute; top: -8px; right: -8px; border: 0; background: transparent; color: var(--orange); line-height: 0; cursor: pointer; padding: 0; }
.gallery-remove iconify-icon { background: #fff; border-radius: 50%; }

/* wizard nav */
.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.wizard-nav--end { justify-content: flex-end; }
.wizard-nav .btn { min-width: 160px; }
.wizard-nav--end .wizard-continue { width: 100%; }
.wizard-back, .wizard-continue { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }

/* review */
.review-list { display: flex; flex-direction: column; gap: 12px; }
.review-block { background: var(--bg-soft2); border-radius: 16px; padding: 16px; }
.review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.review-title { font-size: 16px; font-weight: 700; color: var(--footer); margin: 0; }
.review-edit { font-size: 15px; font-weight: 600; color: var(--orange); background: none; border: 0; padding: 4px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.review-edit:hover { background: var(--orange-soft); }
.review-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; font-size: 16px; color: var(--footer); padding: 6px 0; }
.review-label { flex: 0 0 auto; white-space: nowrap; }
.review-value { text-align: right; overflow-wrap: anywhere; }
/* long free-text values (About) stack: label on top, text left-aligned below */
.review-row--stack { flex-direction: column; align-items: stretch; gap: 4px; }
.review-row--stack .review-label { font-weight: 600; }
.review-row--stack .review-value { text-align: left; }

/* responsive */
@media (max-width: 767.98px) {
  .auth-wrap { padding: 40px 0 64px; }
  .auth-card { padding: 28px 22px; }
  .gs-hero { padding: 56px 0; }
  .gs-title { font-size: 38px; }
  .auth-row { grid-template-columns: 1fr; }
  .auth-steps { overflow-x: auto; padding-bottom: 6px; }
  .auth-step-label { white-space: nowrap; }
  .wh-day { min-width: 0; width: 100%; }
  .wh-times { width: 100%; }
  .wizard-nav .btn { min-width: 0; flex: 1 1 0; }
}

/* ============================ FORM VALIDATION ============================ */
.form-error {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #d93025;
}
.form-control.is-invalid,
select.is-invalid {
  border-color: #d93025 !important;
  background-color: #fff5f5;
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(217, 48, 37, .12);
}
.auth-alert {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
.auth-alert--success {
  background: #e7f6ec;
  color: #1a7f37;
  border: 1px solid #b7e4c7;
}
.auth-alert--error {
  background: #fdecea;
  color: #d93025;
  border: 1px solid #f5c2c0;
}
.auth-alert-list { margin: 6px 0 0; padding-left: 20px; font-weight: 400; }
.auth-alert-list li { margin: 2px 0; }

/* ============================ SEARCH / QUOTE EXTRAS ============================ */
.result-empty {
  text-align: center;
  padding: 64px 20px;
  color: #64748b;
}
.result-empty iconify-icon { color: var(--orange); }
.result-empty h2 { margin: 16px 0 8px; font-size: 22px; color: #0f172a; }
.result-empty p { margin: 0 0 20px; }
.page-btn.disabled { opacity: .45; pointer-events: none; }
.sent-ref { margin: -6px 0 18px; color: #64748b; font-size: 15px; }
.sent-ref strong { color: var(--orange); letter-spacing: .3px; }

/* ============================ WIZARD EXTRAS ============================ */
.wh-input {
  border: 0; background: transparent; outline: none;
  font-size: 14px; color: var(--form-color); width: 100%;
  font-family: inherit; cursor: pointer;
}
/* Hide the native picker indicator — the whole field opens the picker (JS showPicker). */
.wh-input::-webkit-calendar-picker-indicator { display: none; }
.wh-time { cursor: pointer; }
.gallery-drop.drag { border-color: var(--orange); background: var(--orange-soft); }

/* Required-field asterisk */
.req { color: #e11d48; margin-left: 3px; font-weight: 700; }
.wizard-panel[hidden] { display: none; }
.upload-drop.drag { border-color: var(--orange); background: var(--orange-soft); }

/* ============================ GALLERY LIGHTBOX ============================ */
.gallery-item { border: 0; padding: 0; cursor: pointer; width: 100%; font: inherit; display: block; transition: transform .15s, box-shadow .15s; }
.gallery-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }

.lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(8,12,24,.92); padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox-stage { margin: 0; position: relative; max-width: min(1000px, 92vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-stage img { max-width: 100%; max-height: 82vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); object-fit: contain; }
.lightbox-counter { margin-top: 14px; color: #e5e7eb; font-size: 14px; font-weight: 600; letter-spacing: .5px; }
.lightbox-close { position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lightbox-close:hover { background: rgba(255,255,255,.22); }
.lightbox-nav { flex: 0 0 auto; width: 54px; height: 54px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.lightbox-nav:hover { background: rgba(255,255,255,.24); }
@media (max-width: 640px) {
  .lightbox { padding: 12px; gap: 6px; }
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* Customer reviews: hide extras until "View All" expands the grid */
.review-hidden { display: none; }
.review-grid.reviews-expanded .review-hidden { display: block; }

/* ============================================================
   Suburb autocomplete (google-places.js) — our own combobox over the
   Places API. Google's PlaceAutocompleteElement renders into a CLOSED
   shadow root, so its rows can't carry a type label, can't inherit our
   type properly, and can't be driven in tests. We draw the list.
   ============================================================ */
.sac { position: relative; width: 100%; }
.sac-field {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 100%; min-height: 45px;
  background: var(--form-bg, #faf7f2);
  border: 1px solid var(--form-border, #e5dcc9);
  border-radius: 10px;
  padding: 0 12px;
}
.sac-field:focus-within { border-color: var(--orange, #f47a20); }
.sac-search-ic { color: var(--form-color, #7a7260); flex: 0 0 auto; }
.sac-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: inherit; font-size: 14px; color: var(--body, #0d0d0d);
  padding: 11px 0;
}
.sac-input::placeholder { color: var(--form-color, #7a7260); }
.sac-clear {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  color: var(--form-color, #7a7260); font-size: 20px; line-height: 1;
  padding: 4px 2px;
}
.sac-clear:hover { color: var(--body, #0d0d0d); }

.sac-panel[hidden] { display: none; }
.sac-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1250;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .16);
  overflow: hidden;
}
.sac-list { max-height: 288px; overflow-y: auto; }
.sac-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; cursor: pointer;
}
.sac-opt + .sac-opt { border-top: 1px solid #f1f5f9; }
.sac-opt:hover, .sac-opt.is-active { background: #f8fafc; }
.sac-pin { color: #94a3b8; flex: 0 0 auto; margin-top: 1px; }
.sac-text { min-width: 0; }
.sac-main {
  display: block; font-size: 14px; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sac-main b { font-weight: 700; }
.sac-sub {
  display: block; margin-top: 1px; font-size: 12px; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Required by the Places API terms wherever no Google Map is on screen. */
.sac-attr {
  display: flex; justify-content: flex-end;
  padding: 6px 12px; border-top: 1px solid #f1f5f9; background: #fff;
}
.sac-attr img { display: block; width: 120px; height: 14px; }

/* ============================================================
   Shared user menu (partials/user-menu.blade.php) — avatar/initials + name
   + caret, with a role-aware dropdown. Used by the public header and both
   portal topbars, so it lives in BOTH stylesheets (see .req / .wa-tag).
   ============================================================ */
.um-wrap { display: inline-flex; }
.um-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  border-radius: 999px; font-family: inherit;
}
.um-chip:hover { background: rgba(15, 23, 42, .04); }
.um-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto;
}
.um-initials {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.um-blue { background: #0b2a8f; }
.um-orange { background: #ff6d0c; }
.um-green { background: #0b891e; }

.um-meta { display: flex; flex-direction: column; line-height: 1.25; text-align: left; min-width: 0; }
.um-name {
  font-size: 14px; font-weight: 600; color: #0f172a;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.um-role { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #f47a20; }
.um-caret { color: #64748b; flex: 0 0 auto; }
.um-chip[aria-expanded="true"] .um-caret { transform: rotate(180deg); }

.um-menu { min-width: 214px; margin-top: 10px; padding: 8px; border: 1px solid #e8e3d9; border-radius: 12px; box-shadow: 0 14px 40px rgba(160, 163, 172, .22); }
.um-menu .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border: 0; background: none;
  border-radius: 8px; font-size: 14px; font-weight: 500; color: #64748b;
  text-align: left; cursor: pointer;
}
.um-menu .dropdown-item iconify-icon { color: #94a3b8; flex: 0 0 auto; }
.um-menu .dropdown-item:hover,
.um-menu .dropdown-item:focus { background: #fff3e9; color: #f47a20; }
.um-menu .dropdown-item:hover iconify-icon { color: #f47a20; }
.um-menu form { margin: 0; }
.um-menu .um-logout, .um-menu .um-logout iconify-icon { color: #cf1919; }
.um-menu .um-logout:hover, .um-menu .um-logout:focus { background: #fdecec; color: #cf1919; }
.um-menu .um-logout:hover iconify-icon { color: #cf1919; }

@media (max-width: 575px) {
  .um-name { max-width: 120px; }
}

/* ============================================================
   Consumer notifications (client/notifications.blade.php)
   ============================================================ */
.cn-flash {
  background: #e7f9ee; color: #0b891e; border: 1px solid #b9ebcd;
  border-radius: 10px; padding: 12px 16px; margin-bottom: 18px;
  font-size: 14px; font-weight: 500;
}
.cn-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px; border-top: 1px solid var(--form-border);
  text-decoration: none; color: inherit;
}
.cn-item:first-of-type { border-top: 0; }
.cn-item:hover { background: #f8fafc; }
.cn-item.is-unread { background: #fffaf5; }
.cn-item.is-unread:hover { background: #fff3e8; }
.cn-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
}
.cn-blue { background: #eaf0ff; color: var(--blue); }
.cn-green { background: #e9f9ef; color: #0b891e; }
.cn-red { background: #fdecec; color: #cf1919; }
.cn-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cn-msg { font-size: 14.5px; font-weight: 600; color: var(--footer); }
.cn-meta { font-size: 12.5px; color: var(--muted); }
.cn-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--orange);
  flex: 0 0 auto; margin: 6px 0 0 auto;
}
.cn-empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.cn-empty iconify-icon { color: #cbd5e1; }
.cn-empty p { margin: 12px auto 0; max-width: 380px; font-size: 14px; }

/* The bell is a link now, not a dead button. */
.client-search-go {
  display: inline-flex; align-items: center; border: 0; background: none;
  padding: 0; color: var(--form-color); cursor: pointer;
}
.client-search-go:hover { color: var(--blue); }