/* OnDuty - Premium Modern Theme Stylesheet */

:root {
    --primary-yellow: #FFC107;
    --primary-yellow-hover: #e0a800;
    --dark-bg: #111111;
    --light-bg: #F7F7F7;
    --card-border: #EBEBEB;
    --text-dark: #111111;
    --text-muted: #6C757D;
    --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
}

body {
    font-family: var(--font-main);
    background-color: #FAFAFA;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.max-mw {
    max-width: 1440px;
}

.fs-7 { font-size: 0.875rem; }
.fs-8 { font-size: 0.775rem; }
.fw-extrabold { font-weight: 800; }

.btn-warning {
    background-color: var(--primary-yellow);
    border-color: var(--primary-yellow);
    color: #111;
    font-weight: 700;
}
.btn-warning:hover {
    background-color: var(--primary-yellow-hover);
    border-color: var(--primary-yellow-hover);
    color: #111;
}

.btn-rounded {
    border-radius: 50px;
}

.rounded-4 { border-radius: var(--radius-lg) !important; }
.rounded-3 { border-radius: var(--radius-md) !important; }

.shadow-soft {
    box-shadow: var(--shadow-soft);
}

/* Homepage Layout & Sidebars */
.hero-yellow-panel {
    background-color: #FFD54F;
    border-radius: var(--radius-lg);
    padding: 24px;
}

.popular-services-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    padding: 20px;
}

.category-item-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: #F9F9F9;
    color: #111;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}
.category-item-btn:hover, .category-item-btn.active {
    background: #FFF8E1;
    border: 1px solid var(--primary-yellow);
}

/* Map Styling */
/* Exact height is set by fitMapContainerHeight() in assets/js/map.js, which
   measures the real space available below the header (and above any fixed
   mobile bottom bar) so the homepage never forces a page scroll. This is
   just the pre-JS fallback to avoid a flash of an unsized map. */
#main-map {
    width: 100%;
    height: 70vh;
    min-height: 340px;
    border-radius: var(--radius-lg);
    z-index: 1;
}

.map-booking-bar {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 78px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: min(420px, calc(100% - 32px));
    padding: 10px 12px 10px 18px;
    border: 1px solid rgba(255, 193, 7, 0.55);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.map-booking-bar[hidden] {
    display: none;
}

.map-booking-details {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.map-booking-label {
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
}

#map-booking-category {
    overflow: hidden;
    color: #1f2937;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-detail-list {
    display: grid;
    gap: 8px;
}

.request-detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 7px;
    border-bottom: 1px solid #f1f3f5;
    font-size: 0.82rem;
}

.request-detail-list span {
    color: #6b7280;
}

.request-detail-list strong {
    color: #1f2937;
    text-align: right;
    overflow-wrap: anywhere;
}

.two-wheeler-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.two-wheeler-vehicle-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-wheeler-choice-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.two-wheeler-choice-grid label {
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.two-wheeler-choice-grid span {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
    color: #1f2937;
    font-size: .79rem;
    font-weight: 700;
    text-align: center;
}

.two-wheeler-choice-grid input:checked + span {
    border-color: #f4b400;
    background: #fff1c4;
    box-shadow: inset 0 0 0 1px rgba(244, 180, 0, .22);
}

.two-wheeler-estimate {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.two-wheeler-estimate div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 11px 8px;
    text-align: center;
}

.two-wheeler-estimate div + div {
    border-left: 1px solid #e2e8f0;
}

.two-wheeler-estimate span {
    color: #6b7280;
    font-size: .68rem;
    font-weight: 600;
}

.two-wheeler-estimate strong {
    color: #111827;
    font-size: .92rem;
}

.two-wheeler-payment {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.two-wheeler-payment label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 13px;
    cursor: pointer;
}

.two-wheeler-payment input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #f4b400;
    flex: 0 0 auto;
}

.two-wheeler-payment label + label {
    border-top: 1px solid #e2e8f0;
}

.two-wheeler-payment span {
    display: flex;
    flex-direction: column;
    font-size: .79rem;
}

.two-wheeler-payment small {
    color: #6b7280;
    font-size: .7rem;
}


/* Custom Pin Icons */
.custom-provider-pin {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #FFC107;
    background-color: #FFFFFF;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    position: relative;
}

.provider-service-map-icon {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    font-size: 1.65rem;
    line-height: 1;
}
.custom-provider-pin::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background-color: #FFC107;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
}

.custom-provider-pin.online-pulse {
    animation: pulseGlow 2s infinite;
}

.custom-provider-pin.provider-pin-live {
    border-color: #22c55e;
}

.custom-provider-pin.provider-pin-offline {
    border-color: #9ca3af;
    filter: grayscale(1);
}

.custom-provider-pin.provider-pin-live::after {
    background-color: #22c55e;
}

.custom-provider-pin.provider-pin-offline::after {
    background-color: #9ca3af;
}

.provider-pin-status {
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    min-width: max-content;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}

.provider-pin-live .provider-pin-status {
    color: #15803d;
}

.provider-list-status {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
}

.provider-list-status-live {
    background: #22c55e;
}

.provider-list-status-offline {
    background: #9ca3af;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* Provider Details Right Drawer */
.provider-right-drawer {
    position: fixed;
    top: 80px;
    right: -420px;
    width: 400px;
    height: calc(100vh - 100px);
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: 24px;
}
.provider-right-drawer.open {
    right: 20px;
}

/* Dashboard Sidebar Styling */
.dashboard-sidebar {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    padding: 24px;
}

.dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    color: #444;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}
.dashboard-nav-item:hover, .dashboard-nav-item.active {
    background: #FFF8E1;
    color: #111;
}

.provider-mode-bar {
    gap: 16px;
}

.provider-mode-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.provider-online-card {
    min-width: 255px;
}

.provider-online-switch {
    width: 48px !important;
    height: 24px;
    cursor: pointer;
}

.provider-dashboard-shell .dashboard-sidebar {
    position: sticky;
    top: 20px;
}

.provider-dashboard-shell .card {
    min-width: 0;
}

.public-provider-cover {
    height: 130px;
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
}

.public-provider-avatar {
    margin-top: -72px;
    background: #ffffff;
}

.public-provider-map {
    height: 380px;
    background: #eef2f7;
}

/* Admin Panel Dark Theme Sidebar */
.admin-sidebar {
    background: #111827;
    min-height: 100vh;
    color: #9CA3AF;
}
.admin-sidebar .nav-link {
    color: #9CA3AF;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
}
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active {
    background: #1F2937;
    color: #FFC107;
}

/* Toggle Switch Styling */
.form-check-input:checked {
    background-color: var(--primary-yellow);
    border-color: var(--primary-yellow);
}


/* User Live Location Blue Dot Indicator */
.user-live-dot-pulse {
    width: 18px;
    height: 18px;
    background-color: #2563EB;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.9);
    position: relative;
}

.user-live-dot-pulse::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(37, 99, 235, 0.35);
    animation: userPulse 1.8s infinite ease-out;
}

@keyframes userPulse {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2.0); opacity: 0; }
}


/* Header Blue Dot Indicator */
.user-live-dot-pulse-sm {
    width: 10px;
    height: 10px;
    background-color: #2563EB;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.8);
    position: relative;
}

.user-live-dot-pulse-sm::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(37, 99, 235, 0.35);
    animation: userPulseSm 1.8s infinite ease-out;
}

@keyframes userPulseSm {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.0); opacity: 0; }
}


/* Mobile Specific Homepage UI (Matching Homepage Mobile UI.png) */

/* Mobile homepage: keep the map locked to the viewport while the service drawer
   slides over it. The page itself must not scroll behind the drawer. */
@media (max-width: 767.98px) {
    html:has(body.homepage-mobile),
    body.homepage-mobile {
        height: 100%;
        overflow: hidden !important;
    }

    body.homepage-mobile .homepage-map-column {
        position: static !important;
    }

    body.homepage-mobile #main-map {
        position: fixed !important;
        z-index: 1 !important;
        left: 12px;
        right: 12px;
        top: var(--onduty-home-map-top, 280px);
        bottom: 0;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 22px 22px 0 0;
    }

    body.homepage-mobile .mobile-home-banner {
        position: relative;
        z-index: 20;
    }

    body.homepage-mobile .mobile-service-sheet {
        z-index: 1100;
    }
}

@media (max-width: 767.98px) {
    .public-provider-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .public-provider-cover {
        height: 100px;
    }
    .public-provider-avatar {
        margin-top: -62px;
    }
    .public-provider-map {
        height: 300px;
    }
    .provider-mode-bar {
        align-items: stretch !important;
        flex-direction: column;
        padding: 12px 16px !important;
    }
    .provider-mode-actions {
        justify-content: space-between;
        gap: 8px !important;
    }
    .provider-mode-actions > * {
        flex: 1 1 auto;
    }
    .provider-mode-actions .btn {
        justify-content: center;
        white-space: nowrap;
    }
    .provider-exit-card > .d-flex {
        align-items: stretch !important;
        flex-direction: column;
        gap: 12px;
    }
    .provider-exit-card .btn {
        width: 100%;
    }
    .provider-online-card {
        width: 100%;
        justify-content: space-between;
    }
    .provider-dashboard-shell {
        padding: 16px 12px !important;
    }
    .provider-dashboard-shell .dashboard-sidebar {
        position: static;
        padding: 12px;
        overflow-x: auto;
        white-space: nowrap;
    }
    .provider-dashboard-shell .dashboard-nav-item {
        display: inline-flex;
        margin: 0 4px 0 0;
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    .provider-dashboard-shell .dashboard-nav-item i {
        font-size: 1rem !important;
    }
    .provider-dashboard-shell .hero-yellow-panel {
        display: none;
    }
    .provider-dashboard-shell .card {
        padding: 16px !important;
    }
    .provider-dashboard-shell .row.g-3 > [class*="col-"] {
        min-width: 0;
    }
    .provider-dashboard-shell .card .d-flex.justify-content-between {
        gap: 10px;
    }
    #main-map {
        border-radius: 20px;
    }
    .provider-right-drawer {
        width: 100% !important;
        right: -100% !important;
        top: 0 !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
    .provider-right-drawer.open {
        right: 0 !important;
    }
    .scrollbar-none::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-none {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

@media (min-width: 768px) {
    .category-filter-btn.active {
        background-color: #1f2937 !important;
        border-color: #1f2937 !important;
        color: #ffffff !important;
        box-shadow: 0 5px 14px rgba(31, 41, 55, .22);
    }

    .category-filter-btn.active i {
        color: #ffc107 !important;
    }

    .category-item-btn.active {
        background: #ffc107 !important;
        border: 1px solid #ffc107 !important;
        color: #111827 !important;
        box-shadow: 0 7px 16px rgba(217, 119, 6, .25);
    }

    .category-item-btn.active .bg-light {
        background: #ffffff !important;
    }

    .category-item-btn.active .text-muted,
    .category-item-btn.active .text-dark {
        color: #111827 !important;
    }

    .category-item-btn.active .bi-chevron-right {
        color: #111827 !important;
    }
}

.footer-service-link {
    transition: color .2s ease, padding-left .2s ease;
}

.footer-service-link:hover,
.footer-service-link.active {
    color: #ffc107 !important;
    padding-left: 4px;
}

.site-search-form {
    width: min(250px, 100%);
}

.site-search-form .form-control {
    border-radius: 999px 0 0 999px;
    background: #f8fafc;
    border-color: #e2e8f0;
    font-size: .78rem;
}

.site-search-form .btn {
    border-radius: 0 999px 999px 0;
}

.service-list-emoji {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 12px;
    background: #fff8e1;
    font-size: 1.2rem;
    line-height: 1;
}

.service-tab-emoji {
    margin-right: 4px;
}

.notification-bell {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #111827;
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

.notification-bell:hover {
    background: #fff8e1;
    border-color: #ffc107;
}

.notification-count {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 17px;
    padding: 3px 5px;
    font-size: .58rem;
}

.notification-menu {
    width: min(330px, calc(100vw - 24px));
    max-height: 390px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    font-size: .75rem;
}

.notification-item.unread {
    background: #fff8e1;
}

.notification-item strong { color: #111827; font-size: .8rem; }
.notification-empty { padding: 20px 10px; color: #64748b; text-align: center; font-size: .8rem; }
.notification-empty i { display: block; margin-bottom: 6px; font-size: 1.4rem; }

.left-service-search .form-control {
    border-radius: 12px 0 0 12px;
    background: #f8fafc;
    border-color: #e2e8f0;
    font-size: .78rem;
}

.left-service-search .btn {
    border-radius: 0 12px 12px 0;
}

@media (max-width: 991.98px) {
    .site-search-form {
        width: 100%;
        padding: 4px 0 8px;
    }
}

.service-catalog-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-catalog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .12) !important;
}

.service-catalog-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #fff8e1;
    color: #d97706;
    font-size: 1.7rem;
}

/* ============================================================
   Service Request Modal — ported from OnDuty_Request_Service_Clean_Aligned.html
   All selectors are scoped under #serviceRequestModal so nothing here
   can leak out and affect Bootstrap .card / inputs / textareas elsewhere
   on the site.
   ============================================================ */
#serviceRequestModal {
    --yellow: #ffc400;
    --yellow-light: #fff8df;
    --text: #111827;
    --muted: #69707d;
    --border: #e8e9ed;
    --shadow: 0 5px 14px rgba(16, 24, 40, .07);
}

#serviceRequestModal .modal-content {
    border: 0;
    border-radius: 23px;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, sans-serif;
    color: var(--text);
}

#serviceRequestModal .modal-body {
    padding: 0;
}

#serviceRequestModal .screen {
    padding: 10px 14px 22px;
}

/* HEADER */
#serviceRequestModal .header {
    height: 58px;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

#serviceRequestModal .header-btn {
    width: 46px;
    height: 46px;
    border: 1px solid #ead27b;
    border-radius: 15px;
    background: linear-gradient(145deg, #fffdf5, #ffd13b);
    box-shadow: 0 4px 9px rgba(16, 24, 40, .10);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    cursor: pointer;
}

#serviceRequestModal .header-btn.help {
    background: #fff;
    border-color: #e5e7eb;
    font-size: 20px;
}

#serviceRequestModal .header-title {
    text-align: center;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.6px;
}

/* HERO */
#serviceRequestModal .hero {
    min-height: 108px;
    position: relative;
    overflow: hidden;
    border: 1px solid #f0d67c;
    border-radius: 23px;
    background: linear-gradient(120deg, #fffdf6, #fff1c6);
    box-shadow: 0 6px 15px rgba(176, 130, 0, .12);
    display: flex;
    align-items: center;
    padding: 18px;
}

#serviceRequestModal .hero-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 19px;
    background: linear-gradient(145deg, #ffd94f, #ffba00);
    box-shadow: 0 7px 12px rgba(170, 115, 0, .20);
    display: grid;
    place-items: center;
    margin-right: 16px;
    position: relative;
    z-index: 3;
    font-size: 28px;
    color: #7a4a00;
}

#serviceRequestModal .hero-copy {
    position: relative;
    z-index: 3;
}

#serviceRequestModal .hero-copy h1 {
    margin: 0 0 5px;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -.5px;
}

#serviceRequestModal .hero-copy p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.35;
    color: #303743;
}

/* Small CSS illustration — shown only for the Graphic Designer category */
#serviceRequestModal .monitor {
    position: absolute;
    right: -2px;
    bottom: -9px;
    width: 200px;
    height: 132px;
    z-index: 1;
    opacity: .9;
    transform: scale(.86);
    transform-origin: right bottom;
}

#serviceRequestModal .monitor-screen {
    position: absolute;
    right: 27px;
    top: 5px;
    width: 162px;
    height: 103px;
    border: 5px solid #f7bd0b;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 9px rgba(0, 0, 0, .13);
}

#serviceRequestModal .toolbar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 23px;
    background: #252b32;
    border-radius: 5px 0 0 5px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    font-size: 11px;
}

#serviceRequestModal .big-t {
    position: absolute;
    left: 66px;
    top: 12px;
    font-size: 46px;
    font-weight: 900;
}

#serviceRequestModal .photo {
    position: absolute;
    right: 11px;
    bottom: 12px;
    width: 48px;
    height: 35px;
    border-radius: 6px;
    background: linear-gradient(135deg, #fff, #f3f4f6);
    box-shadow: 0 2px 5px #bbb;
}

#serviceRequestModal .photo::before {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffc400;
    top: 7px;
    left: 8px;
}

#serviceRequestModal .stand {
    position: absolute;
    right: 74px;
    bottom: 0;
    width: 70px;
    height: 45px;
    background: linear-gradient(#e2e5e8, #adb4bc);
    clip-path: polygon(31% 0, 69% 0, 100% 74%, 0 74%);
}

#serviceRequestModal .base {
    position: absolute;
    right: 43px;
    bottom: 0;
    width: 128px;
    height: 10px;
    border-radius: 50%;
    background: #cdd2d8;
}

#serviceRequestModal .pencils {
    position: absolute;
    right: 2px;
    bottom: 1px;
    font-size: 33px;
    transform: rotate(-8deg);
}

/* SECTIONS */
/* LOGIN GATE — shown at the top of the request form for guests */
#serviceRequestModal .request-auth-gate {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #f0d67c;
    border-radius: 18px;
    background: linear-gradient(135deg, #fffdf6, #fff7dc);
    box-shadow: 0 5px 12px rgba(176, 130, 0, .10);
}

#serviceRequestModal .request-auth-copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

#serviceRequestModal .request-auth-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #ffd94e, #ffbf00);
    color: #5f4300;
    font-size: 20px;
    box-shadow: 0 4px 8px rgba(184, 128, 0, .15);
}

#serviceRequestModal .request-auth-copy strong,
#serviceRequestModal .request-auth-copy span {
    display: block;
}

#serviceRequestModal .request-auth-copy strong {
    font-size: 13.5px;
    line-height: 1.25;
}

#serviceRequestModal .request-auth-copy span {
    margin-top: 3px;
    color: #69707d;
    font-size: 11.5px;
    line-height: 1.3;
}

#serviceRequestModal .request-auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

#serviceRequestModal .request-auth-btn {
    min-height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 800;
    transition: transform .15s ease, box-shadow .15s ease;
}

#serviceRequestModal .request-auth-btn:hover {
    transform: translateY(-1px);
}

#serviceRequestModal .request-auth-btn-primary {
    background: linear-gradient(180deg, #ffd33f, #ffbd00);
    border: 1px solid #e3ae00;
    color: #101828;
    box-shadow: 0 4px 9px rgba(184, 128, 0, .16);
}

#serviceRequestModal .request-auth-btn-secondary {
    background: #fff;
    border: 1px solid #e1e4e8;
    color: #111827;
    box-shadow: 0 3px 8px rgba(16, 24, 40, .06);
}

#serviceRequestModal .request-auth-gate-inline {
    margin-top: 12px;
}

#serviceRequestModal .section {
    margin-top: 19px;
}

#serviceRequestModal .section-title {
    margin: 0 0 11px 4px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.3px;
}

/* SERVICE OPTIONS (icon grid) */
#serviceRequestModal .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 8px;
}

#serviceRequestModal .service {
    height: 116px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: #fff;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    cursor: pointer;
}

#serviceRequestModal .service.selected {
    border: 1.5px solid #f0bd00;
    background: #fff9e8;
    box-shadow: 0 6px 13px rgba(214, 155, 0, .12);
}

#serviceRequestModal .service-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(16, 24, 40, .09);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 9px;
}

#serviceRequestModal .service.selected .service-icon {
    background: linear-gradient(145deg, #ffd94e, #ffbf00);
}

#serviceRequestModal .service-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.12;
    text-align: center;
}

/* INPUT CARDS */
#serviceRequestModal .card {
    border: 1px solid var(--border);
    border-radius: 19px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 14px;
}

#serviceRequestModal textarea,
#serviceRequestModal input,
#serviceRequestModal select {
    width: 100%;
    border: 1px solid #eceef1;
    border-radius: 15px;
    background: #fff;
    color: var(--text);
    font: inherit;
    outline: none;
}

#serviceRequestModal textarea {
    height: 90px;
    padding: 15px;
    resize: none;
    font-size: 15px;
    line-height: 1.45;
}

#serviceRequestModal input,
#serviceRequestModal select {
    height: 48px;
    padding: 0 13px;
    font-size: 15px;
}

#serviceRequestModal textarea::placeholder,
#serviceRequestModal input::placeholder {
    color: #8a909b;
}

#serviceRequestModal .input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

#serviceRequestModal .input-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #fff6da);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

#serviceRequestModal .half-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* DATE + TIME */
#serviceRequestModal .date-time {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#serviceRequestModal .field-label {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 9px 4px;
}

#serviceRequestModal .date-field {
    height: 60px;
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: #fff;
}

#serviceRequestModal .date-field .input-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
}

#serviceRequestModal .date-field input {
    height: 46px;
    border: 0;
    padding: 0 3px;
    min-width: 0;
    box-shadow: none;
}

/* BUTTON */
#serviceRequestModal .cta {
    width: 100%;
    height: 58px;
    margin-top: 18px;
    border: 1px solid #e3ae00;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffd33f, #ffbd00);
    box-shadow: 0 6px 12px rgba(184, 128, 0, .20), inset 0 2px 0 rgba(255, 255, 255, .60);
    color: #101828;
    font-size: 16px;
    font-weight: 850;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
}

#serviceRequestModal .cta:disabled {
    opacity: .75;
    cursor: default;
}

#serviceRequestModal .cta-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 7px rgba(16, 24, 40, .13);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: 0 0 auto;
}

#serviceRequestModal .note {
    text-align: center;
    color: #727987;
    font-size: 13px;
    margin-top: 8px;
}

/* Touch feedback */
#serviceRequestModal .service:active,
#serviceRequestModal .cta:not(:disabled):active,
#serviceRequestModal .header-btn:active {
    transform: translateY(1px);
}

@media (max-width: 480px) {
    #serviceRequestModal .header-title { font-size: 19px; }
    #serviceRequestModal .hero { padding: 15px; }
    #serviceRequestModal .hero-copy h1 { font-size: 19px; }
    #serviceRequestModal .hero-icon { width: 52px; height: 52px; flex-basis: 52px; margin-right: 11px; font-size: 24px; }
    #serviceRequestModal .service { height: 106px; border-radius: 17px; }
    #serviceRequestModal .service-icon { width: 44px; height: 44px; font-size: 22px; }
    #serviceRequestModal .service-label { font-size: 11.5px; }
    #serviceRequestModal .section-title { font-size: 16px; }
}


/* Mobile Clean-Up Rules (Matching User Screenshots) */
@media (max-width: 767.98px) {
    body {
        padding-top: max(16px, env(safe-area-inset-top, 0px));
    }

    .navbar {
        min-height: 76px;
        padding: 10px 14px !important;
    }

    .navbar .container-fluid {
        flex-wrap: wrap;
    }

    .mobile-menu-toggle {
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 14px;
        background: #fff8e1;
        box-shadow: inset 0 0 0 1px rgba(255, 193, 7, .45), 0 3px 10px rgba(17, 17, 17, .08);
    }

    .mobile-menu-lines {
        display: inline-flex;
        width: 19px;
        height: 16px;
        flex-direction: column;
        justify-content: space-between;
    }

    .mobile-menu-lines span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 10px;
        background: #1f2937;
        transition: transform .2s ease, opacity .2s ease;
    }

    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-lines span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-lines span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-lines span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    #navbarMain {
        width: 100%;
        margin-top: 10px;
        padding: 10px 12px;
        border: 1px solid #f0e1ae;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(17, 17, 17, .10);
    }

    #navbarMain .navbar-nav {
        gap: 2px;
    }

    #navbarMain .nav-link {
        padding: 10px 12px;
        border-radius: 12px;
    }

    #navbarMain .nav-link:hover,
    #navbarMain .nav-link.active {
        background: #fff8e1;
        color: #111 !important;
    }

    .category-mobile-pill > div {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        color: #111 !important;
        transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .category-mobile-pill.active > div {
        background: #1f2937 !important;
        border-color: #1f2937 !important;
        color: #fff !important;
        box-shadow: 0 7px 15px rgba(31, 41, 55, .24) !important;
        transform: translateY(-3px);
    }

    .category-mobile-pill.active > div i {
        color: #ffc107 !important;
    }

    .category-mobile-pill.active > span {
        color: #111 !important;
    }

    /* Hide footer on mobile view */
    footer {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    :root {
        --onduty-mobile-safe-top: max(16px, env(safe-area-inset-top, 0px));
        --onduty-mobile-safe-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    .navbar.sticky-top,
    .sticky-top {
        top: var(--onduty-mobile-safe-top) !important;
    }

    .fixed-top {
        top: var(--onduty-mobile-safe-top) !important;
    }

    .fixed-bottom {
        padding-bottom: var(--onduty-mobile-safe-bottom) !important;
    }

    .modal {
        padding-top: var(--onduty-mobile-safe-top) !important;
    }

    .modal-dialog {
        margin-top: max(1rem, var(--onduty-mobile-safe-top)) !important;
        margin-bottom: var(--onduty-mobile-safe-bottom) !important;
    }

    .modal-dialog-centered {
        min-height: calc(100% - var(--onduty-mobile-safe-top) - var(--onduty-mobile-safe-bottom)) !important;
    }

    body.service-request-open .mobile-service-sheet,
    body.service-request-open .mobile-web-service-strip {
        visibility: hidden;
        pointer-events: none;
    }

    #serviceRequestModal {
        z-index: 1300;
        padding: 0 !important;
    }

    #serviceRequestModal + .modal-backdrop,
    .modal-backdrop {
        z-index: 1290;
    }

    #serviceRequestModal .modal-dialog {
        height: calc(100dvh - var(--onduty-mobile-safe-top) - var(--onduty-mobile-safe-bottom)) !important;
        margin: var(--onduty-mobile-safe-top) 12px var(--onduty-mobile-safe-bottom) !important;
    }

    #serviceRequestModal .modal-content {
        max-height: 100%;
    }

    #serviceRequestModal .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(24px + var(--onduty-mobile-safe-bottom));
    }

    .provider-right-drawer {
        top: var(--onduty-mobile-safe-top) !important;
        height: calc(100dvh - var(--onduty-mobile-safe-top)) !important;
    }

    .mobile-service-sheet {
        display: block !important;
        position: fixed;
        z-index: 1100;
        right: 0;
        bottom: 0;
        left: 0;
        height: 238px;
        overflow: hidden;
        padding: 7px 14px calc(10px + var(--onduty-mobile-safe-bottom));
        border: 1px solid #e5e7eb;
        border-bottom: 0;
        border-radius: 28px 28px 0 0;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -12px 30px rgba(15, 23, 42, .14);
        transition: height .3s ease;
        backdrop-filter: blur(16px);
    }

    .mobile-service-sheet.is-expanded {
        height: min(72dvh, 680px);
    }

    /* First screen: keep the map dominant while showing the search, title and
       exactly one row of services. Swiping upward expands the full tray. */
    .mobile-service-sheet:not(.is-expanded) .mobile-service-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-height: 104px;
        overflow: hidden;
        padding-bottom: 0;
    }

    /* The compact home tray always shows the first row of services. */
    .mobile-service-sheet:not(.is-expanded) #mobile-service-grid[hidden] {
        display: grid !important;
    }

    .mobile-service-sheet:not(.is-expanded) .mobile-service-button {
        min-height: 92px;
    }

    .mobile-service-search-wrap {
        position: relative;
        display: flex;
        align-items: center;
        height: 46px;
        margin: 0 2px 2px;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #f8fafc;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
    }

    .mobile-service-search-icon {
        margin-left: 14px;
        color: #64748b;
        font-size: .95rem;
    }

    .mobile-service-search {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0 40px 0 10px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #111827;
        font-size: .88rem;
        font-weight: 600;
    }

    .mobile-service-search::placeholder { color: #94a3b8; font-weight: 500; }

    .mobile-service-search-clear {
        position: absolute;
        right: 8px;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        background: #ffffff;
        color: #64748b;
    }

    .mobile-service-no-results {
        grid-column: 1 / -1;
        padding: 24px 10px;
        color: #64748b;
        font-size: .82rem;
        font-weight: 700;
        text-align: center;
    }

    .mobile-web-service-strip {
        display: none !important;
        position: fixed;
        z-index: 1100;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 9px 12px calc(9px + var(--onduty-mobile-safe-bottom));
        border-top: 1px solid #e5e7eb;
        border-radius: 24px 24px 0 0;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -10px 24px rgba(15, 23, 42, .12);
        backdrop-filter: blur(14px);
    }

    .mobile-web-service-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 3px 2px 2px;
        scroll-behavior: smooth;
    }

    .mobile-web-service-pill {
        display: flex;
        width: 66px;
        min-width: 66px;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 3px 0;
        color: #1f2937;
        border: 0;
        background: transparent;
        font-size: .66rem;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
    }

    .mobile-web-service-icon {
        display: grid;
        width: 50px;
        height: 50px;
        place-items: center;
        border: 1px solid #e5e7eb;
        border-radius: 15px;
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        box-shadow: 0 3px 8px rgba(15, 23, 42, .06);
        font-size: 1.55rem;
        line-height: 1;
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .mobile-web-service-pill.active .mobile-web-service-icon {
        border-color: #f59e0b;
        background: #fff8e1;
        box-shadow: 0 5px 12px rgba(245, 158, 11, .2);
        transform: translateY(-2px);
    }

    .mobile-web-service-pill .all-services-icon {
        color: #ffffff;
        background: #1f2937;
        font-size: 1.25rem;
    }

    .mobile-web-service-pill.active .all-services-icon {
        background: #f59e0b;
        color: #111827;
    }

    .mobile-service-sheet-handle {
        display: grid;
        width: 100%;
        grid-template-columns: 32px 1fr 32px;
        align-items: center;
        gap: 8px;
        min-height: 56px;
        padding: 0 8px;
        color: #111827;
        border: 0;
        background: transparent;
        text-align: left;
    }

    .mobile-service-sheet-grabber {
        position: absolute;
        top: 8px;
        left: 50%;
        width: 56px;
        height: 5px;
        border-radius: 999px;
        background: #cbd5e1;
        transform: translateX(-50%);
    }

    .mobile-service-sheet-title {
        grid-column: 2;
        font-size: 1rem;
        font-weight: 800;
    }

    .mobile-service-sheet-chevron {
        grid-column: 3;
        justify-self: end;
        transition: transform .25s ease;
    }

    .mobile-service-sheet.is-expanded .mobile-service-sheet-chevron {
        transform: rotate(180deg);
    }

    .mobile-service-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px 8px;
        max-height: calc(min(72dvh, 680px) - 132px);
        padding: 2px 2px 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }


    .mobile-service-button[hidden] {
        display: none !important;
    }

    .mobile-service-button {
        display: flex;
        min-width: 0;
        min-height: 96px;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        gap: 6px;
        padding: 8px 3px;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #ffffff;
        color: #1f2937;
        font-size: .68rem;
        font-weight: 700;
        line-height: 1.12;
        text-align: center;
        transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .mobile-service-icon {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 13px;
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        box-shadow: inset 0 0 0 1px #f1f5f9;
        font-size: 1.65rem;
        line-height: 1;
    }

    .all-services-icon {
        color: #ffffff;
        background: #1f2937;
        font-size: 1.25rem;
    }

    .mobile-service-button.active {
        border-color: #f59e0b;
        background: #fff8e1;
        box-shadow: 0 6px 14px rgba(245, 158, 11, .18);
        transform: translateY(-2px);
    }

    .mobile-service-button.active .all-services-icon {
        background: #f59e0b;
        color: #111827;
    }

    .map-booking-bar {
        bottom: calc(238px + var(--onduty-mobile-safe-bottom));
        gap: 10px;
        min-width: calc(100% - 28px);
        padding: 9px 10px 9px 14px;
    }

    .map-booking-bar .btn {
        flex-shrink: 0;
        font-size: 0.82rem;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* =========================================================
   OnDuty First-launch Mobile/App Onboarding
   ========================================================= */
.onduty-onboarding { display:none; }
.onduty-onboarding-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(5px); }
.onduty-onboarding-card { position:relative; width:min(92vw, 430px); max-height:min(88dvh, 720px); overflow:hidden; border-radius:28px; background:#fff; box-shadow:0 28px 80px rgba(15,23,42,.28); padding:18px 18px 16px; z-index:2; }
.onduty-onboarding-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.onduty-onboarding-brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.05rem; color:#111827; }
.onduty-onboarding-brand > span:last-child > span { color:#f59e0b; }
.onduty-onboarding-logo { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#ffc107; color:#111827; box-shadow:0 6px 15px rgba(245,158,11,.25); }
.onduty-onboarding-skip { border:0; background:transparent; color:#6b7280; font-size:.78rem; font-weight:700; padding:8px; }
.onduty-onboarding-slides { position:relative; min-height:390px; }
.onduty-onboarding-slide { display:none; min-height:390px; text-align:center; align-items:center; justify-content:center; flex-direction:column; padding:10px 7px 0; animation:ondutySlideIn .28s ease; }
.onduty-onboarding-slide.active { display:flex; }
.onduty-onboarding-illustration { width:132px; height:132px; border-radius:38px; display:grid; place-items:center; position:relative; margin:10px auto 22px; background:linear-gradient(145deg,#fff8db,#fff); border:1px solid #f6d56b; box-shadow:0 18px 40px rgba(15,23,42,.10); color:#111827; font-size:3.4rem; }
.onduty-onboarding-illustration::after { content:""; position:absolute; width:52px; height:52px; border-radius:50%; background:#ffc107; right:-12px; bottom:-8px; z-index:-1; opacity:.95; }
.onduty-onboarding-illustration .pulse-ring { position:absolute; inset:20px; border:2px solid rgba(255,193,7,.38); border-radius:32px; animation:ondutyPulse 1.8s infinite; }
.onduty-onboarding-kicker { font-size:.67rem; letter-spacing:.11em; font-weight:800; color:#d28b00; margin-bottom:8px; }
.onduty-onboarding-slide h1,.onduty-onboarding-slide h2 { font-size:1.48rem; line-height:1.22; font-weight:800; color:#111827; margin:0 auto 10px; max-width:350px; }
.onduty-onboarding-slide p { font-size:.88rem; line-height:1.55; color:#6b7280; max-width:350px; margin:0 auto; }
.onduty-onboarding-dots { display:flex; justify-content:center; gap:6px; margin:8px 0 13px; }
.onduty-onboarding-dots button { width:7px; height:7px; padding:0; border:0; border-radius:99px; background:#d1d5db; transition:.2s ease; }
.onduty-onboarding-dots button.active { width:22px; background:#ffc107; }
.onduty-onboarding-actions { display:grid; grid-template-columns:1fr 1.15fr; gap:9px; }
.onduty-onboarding-actions .btn { min-height:46px; border-radius:14px; font-size:.8rem; font-weight:800; }
.onduty-onboarding-login { border-color:#e5e7eb; }
.onduty-onboarding-next { background:#111827; }
@keyframes ondutySlideIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@keyframes ondutyPulse { 0%,100% { transform:scale(.94); opacity:.45; } 50% { transform:scale(1.08); opacity:0; } }

/* Network / technical recovery overlay */
.onduty-network-overlay { display:none; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; padding:22px; background:rgba(248,250,252,.97); }
.onduty-network-overlay.is-visible { display:flex; }
.onduty-network-card { width:min(92vw,420px); text-align:center; background:#fff; border:1px solid #e5e7eb; border-radius:28px; padding:34px 24px 28px; box-shadow:0 24px 70px rgba(15,23,42,.12); }
.onduty-network-icon { width:76px; height:76px; display:grid; place-items:center; margin:0 auto 20px; border-radius:24px; background:#fff7e0; color:#111827; font-size:2rem; }
.onduty-network-card h2 { font-size:1.45rem; font-weight:800; color:#111827; margin:0 0 8px; }
.onduty-network-card p { color:#6b7280; font-size:.9rem; line-height:1.55; margin:0 auto 20px; max-width:320px; }
.onduty-network-card .btn { min-height:46px; }

@media (max-width: 767.98px) {
    .onduty-onboarding { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:12px; }
    body.onduty-onboarding-open { overflow:hidden; }
    .onduty-onboarding-card { width:min(100%, 430px); max-height:calc(100dvh - 24px); }
    .onduty-onboarding-slides,.onduty-onboarding-slide { min-height:370px; }
}

/* On Android WebView, show onboarding regardless of viewport size. */
html.onduty-android-app .onduty-onboarding { display:flex; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; padding:12px; }

/* Service request dispatch animation */
.service-request-dispatch-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 22px;
}
.service-request-dispatch-overlay[hidden] { display: none; }
.service-request-dispatch-card {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(440px, calc(100% - 28px));
    padding: 10px 16px 10px 11px;
    border: 1px solid rgba(255,193,7,.55);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 35px rgba(15,23,42,.18);
    backdrop-filter: blur(12px);
    animation: dispatchCardIn .45s cubic-bezier(.2,.9,.2,1) both;
}
.service-request-dispatch-card strong,
.service-request-dispatch-card span { display:block; }
.service-request-dispatch-card strong { font-size:.88rem; color:#111827; line-height:1.2; }
.service-request-dispatch-card span { margin-top:2px; font-size:.72rem; color:#6b7280; line-height:1.25; }
.dispatch-orbit-icon {
    position:relative;
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(145deg,#ffd84d,#ffb703);
    box-shadow:0 6px 18px rgba(245,158,11,.28);
}
.dispatch-core { color:#111827; font-size:17px; transform:translateX(1px); }
.dispatch-orbit-icon i {
    position:absolute;
    inset:5px;
    border:1px solid rgba(17,24,39,.18);
    border-radius:50%;
    animation:dispatchOrbit 1.6s linear infinite;
}
.dispatch-orbit-icon i:nth-child(2){animation-delay:-.53s;}
.dispatch-orbit-icon i:nth-child(3){animation-delay:-1.06s;}

.request-dispatch-line {
    stroke:#f59e0b;
    stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:8 10;
    opacity:.9;
    animation:dispatchDash .7s linear infinite;
}
.request-dispatch-halo {
    fill:none;
    stroke:#fbbf24;
    stroke-width:3;
    opacity:.65;
    animation:dispatchHalo 1.1s ease-out infinite;
}
.request-dispatch-packet {
    width:20px;
    height:20px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#111827;
    color:#fff;
    border:3px solid #fff;
    box-shadow:0 0 0 4px rgba(245,158,11,.25), 0 7px 18px rgba(15,23,42,.28);
    font-size:9px;
    font-weight:900;
}
.request-dispatch-destination {
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    color:#111827;
    border:3px solid #22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,.42), 0 5px 18px rgba(15,23,42,.22);
    font-size:15px;
    animation:dispatchDestination 1.35s ease-out infinite;
}
.request-dispatch-origin {
    width:26px;
    height:26px;
    border-radius:50%;
    background:#2563eb;
    border:4px solid #fff;
    box-shadow:0 0 0 5px rgba(37,99,235,.18), 0 5px 15px rgba(37,99,235,.3);
}

@keyframes dispatchCardIn { from { opacity:0; transform:translateY(-12px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes dispatchOrbit { from { transform:rotate(0deg) scale(.6); opacity:.1; } 50% { opacity:.8; } to { transform:rotate(360deg) scale(1.08); opacity:.1; } }
@keyframes dispatchDash { to { stroke-dashoffset:-18; } }
@keyframes dispatchHalo { 0% { r:8; opacity:.75; } 100% { r:30; opacity:0; } }
@keyframes dispatchDestination { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,.42), 0 5px 18px rgba(15,23,42,.22); } 45% { transform:scale(1.12); box-shadow:0 0 0 12px rgba(34,197,94,0), 0 5px 18px rgba(15,23,42,.22); } }

@media (prefers-reduced-motion: reduce) {
    .service-request-dispatch-card,
    .dispatch-orbit-icon i,
    .request-dispatch-line,
    .request-dispatch-halo,
    .request-dispatch-destination { animation:none !important; }
}

/* Service-request option cards: native buttons keep every option tappable on mobile/WebView. */
#serviceRequestModal .service-grid .service {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    margin: 0;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
#serviceRequestModal .service-grid .service:focus-visible {
    outline: 3px solid rgba(255, 193, 7, .45);
    outline-offset: 2px;
}
#serviceRequestModal .service-grid .service-icon,
#serviceRequestModal .service-grid .service-label {
    pointer-events: none;
}
#serviceRequestModal .date-field select {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

/* Language menu: keep it inside the viewport on mobile/off-canvas layouts. */
#language-menu {
    min-width: 190px;
    z-index: 3000 !important;
}
@media (max-width: 991.98px) {
    #language-menu.onduty-language-fixed {
        position: fixed !important;
        margin: 0 !important;
        left: auto !important;
        right: 14px !important;
        width: min(190px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
        transform: none !important;
        z-index: 3000 !important;
    }
    #language-menu.onduty-language-fixed .dropdown-item {
        white-space: nowrap;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 767.98px) {
    .mobile-web-service-strip { display: none !important; }
    .mobile-service-sheet {
        display: block !important;
    }
    .mobile-service-sheet:not(.is-expanded) .mobile-service-sheet-handle {
        min-height: 68px;
    }
}


/* Accepted-request live tracking overlay */
.customer-live-tracking-card {
    position:absolute;
    z-index: 900;
    top: 18px;
    right: 18px;
    width: min(390px, calc(100% - 36px));
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(34,197,94,.25);
    border-radius: 22px;
    box-shadow: 0 16px 45px rgba(15,23,42,.18);
    overflow:hidden;
    backdrop-filter: blur(10px);
}
.customer-live-tracking-card[hidden] { display:none !important; }
.customer-live-tracking-head { padding:14px 16px 10px; display:flex; align-items:center; gap:11px; }
.customer-live-tracking-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:3px solid #22c55e; flex-shrink:0; }
.customer-live-tracking-title { font-weight:800; color:#111827; line-height:1.15; }
.customer-live-tracking-subtitle { color:#64748b; font-size:.72rem; margin-top:3px; }
.customer-live-tracking-live { margin-left:auto; background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; border-radius:999px; padding:4px 8px; font-size:.68rem; font-weight:800; white-space:nowrap; }
.customer-live-tracking-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 14px 12px; }
.customer-live-tracking-stat { background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; padding:9px 7px; text-align:center; }
.customer-live-tracking-stat strong { display:block; font-size:.95rem; color:#15803d; font-weight:800; }
.customer-live-tracking-stat span { display:block; font-size:.63rem; color:#64748b; margin-top:2px; }
.customer-live-tracking-actions { display:flex; gap:8px; padding:0 14px 14px; }
.customer-live-tracking-actions a { flex:1; }
.customer-live-tracking-route { stroke-dasharray: 9 8; animation: ondutyRouteDash 1.2s linear infinite; }
@keyframes ondutyRouteDash { to { stroke-dashoffset:-17; } }
.customer-live-provider-marker .live-provider-orbit { width:52px; height:52px; border-radius:50%; background:#fff; border:4px solid #22c55e; box-shadow:0 0 0 8px rgba(34,197,94,.15), 0 8px 20px rgba(15,23,42,.2); display:flex; align-items:center; justify-content:center; font-size:25px; }
.customer-live-provider-marker .live-provider-pulse { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(34,197,94,.55); animation:ondutyProviderPulse 1.6s ease-out infinite; }
@keyframes ondutyProviderPulse { 0% { transform:scale(.8); opacity:.9 } 80%,100% { transform:scale(1.65); opacity:0 } }
@media (max-width: 767.98px) {
    .customer-live-tracking-card { top:10px; right:10px; width:calc(100% - 20px); border-radius:18px; }
    .customer-live-tracking-head { padding:11px 12px 8px; }
    .customer-live-tracking-avatar { width:42px; height:42px; }
    .customer-live-tracking-stats { padding:0 10px 9px; }
    .customer-live-tracking-actions { padding:0 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .customer-live-tracking-route, .customer-live-provider-marker .live-provider-pulse { animation:none; }
}

/* ========================================================================
   Cross-device mobile fit hardening
   Keeps the homepage usable on narrow phones, tall phones, tablets and
   Android WebView without changing the intended OnDuty visual hierarchy.
   ======================================================================== */
html, body { width: 100%; max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

@media (max-width: 767.98px) {
    :root {
        --onduty-safe-top: env(safe-area-inset-top, 0px);
        --onduty-safe-bottom: env(safe-area-inset-bottom, 0px);
        --onduty-header-height: 76px;
        --onduty-home-banner-gap: 14px;
        --onduty-tray-collapsed: 300px;
    }

    html { width: 100%; min-height: 100%; overflow-x: hidden; }
    body { width: 100%; min-width: 0; overflow-x: hidden; }

    /* Never let Bootstrap's wrapping navbar create a wider-than-screen row. */
    body.homepage-mobile .navbar > .container-fluid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: nowrap !important;
        overflow: visible;
    }

    body.homepage-mobile .navbar {
        width: 100%;
        max-width: 100vw;
        min-height: var(--onduty-header-height);
        padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
        box-sizing: border-box;
    }

    body.homepage-mobile .mobile-menu-toggle {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        margin-right: 8px !important;
    }

    body.homepage-mobile .navbar-brand {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 31vw;
        margin-right: 7px !important;
        gap: 3px !important;
        font-size: clamp(1.15rem, 5vw, 1.5rem) !important;
        white-space: nowrap;
        overflow: hidden;
    }

    body.homepage-mobile .navbar-brand .brand-badge {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0 !important;
    }

    body.homepage-mobile .navbar-brand .brand-badge i { font-size: 1.05rem !important; }

    body.homepage-mobile .location-badge {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 5px !important;
    }

    body.homepage-mobile #location-picker-btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 5px 8px !important;
        gap: 6px !important;
        overflow: hidden;
    }

    body.homepage-mobile #location-picker-btn > div { min-width: 0; }
    body.homepage-mobile #location-picker-btn > div > div { max-width: 100% !important; }
    body.homepage-mobile #location-picker-btn .text-primary { font-size: clamp(.55rem, 2.4vw, .65rem) !important; }
    body.homepage-mobile #current-location-text { font-size: clamp(.68rem, 3vw, .78rem) !important; }

    body.homepage-mobile .navbar .dropdown.d-lg-none { flex: 0 0 46px; margin-right: 0 !important; }
    body.homepage-mobile .notification-bell {
        width: 44px;
        height: 44px;
        padding: 0;
        display: grid;
        place-items: center;
    }

    /* Banner scales with width instead of forcing a fixed text/icon layout. */
    body.homepage-mobile .mobile-home-banner {
        width: 100%;
        box-sizing: border-box;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: var(--onduty-home-banner-gap) !important;
    }
    body.homepage-mobile .mobile-home-banner .card { margin-bottom: 0 !important; }
    body.homepage-mobile .mobile-home-banner h5 { font-size: clamp(.88rem, 4.1vw, 1rem) !important; line-height: 1.2; }
    body.homepage-mobile .mobile-home-banner p { font-size: clamp(.68rem, 3.1vw, .82rem) !important; line-height: 1.2; }

    /* The map is always bounded by the actual viewport and never creates a
       document-sized scroll area. map.js supplies the exact top coordinate. */
    body.homepage-mobile .homepage-map-column {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 12px !important;
    }
    body.homepage-mobile #main-map {
        left: 12px;
        right: 12px;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: clamp(18px, 5vw, 24px) clamp(18px, 5vw, 24px) 0 0;
    }

    /* Service sheet always fits inside the viewport width, including phones
       with 320–360px CSS widths and display cutouts. */
    body.homepage-mobile .mobile-service-sheet {
        width: 100vw;
        max-width: 100vw;
        left: 0;
        right: 0;
        box-sizing: border-box;
        padding-left: clamp(8px, 3vw, 14px);
        padding-right: clamp(8px, 3vw, 14px);
        padding-bottom: calc(10px + var(--onduty-safe-bottom));
        height: min(var(--onduty-tray-collapsed), 42dvh);
        border-radius: clamp(22px, 7vw, 30px) clamp(22px, 7vw, 30px) 0 0;
    }

    body.homepage-mobile .mobile-service-sheet.is-expanded {
        height: min(78dvh, 720px);
    }

    body.homepage-mobile .mobile-service-search-wrap { height: clamp(44px, 11vw, 52px); border-radius: 16px; }
    body.homepage-mobile .mobile-service-sheet-handle {
        min-height: clamp(54px, 14vw, 68px) !important;
        padding-left: clamp(4px, 2vw, 8px);
        padding-right: clamp(4px, 2vw, 8px);
    }
    body.homepage-mobile .mobile-service-sheet-title { font-size: clamp(.9rem, 4.2vw, 1.05rem); }
    body.homepage-mobile .mobile-service-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: clamp(7px, 2vw, 10px) clamp(5px, 1.8vw, 8px);
    }
    body.homepage-mobile .mobile-service-button {
        min-height: clamp(84px, 23vw, 98px);
        padding-left: 2px;
        padding-right: 2px;
        border-radius: clamp(13px, 4vw, 17px);
        font-size: clamp(.59rem, 2.6vw, .72rem);
    }
    body.homepage-mobile .mobile-service-icon {
        width: clamp(38px, 11vw, 46px);
        height: clamp(38px, 11vw, 46px);
        border-radius: clamp(11px, 3.5vw, 14px);
        font-size: clamp(1.35rem, 6vw, 1.7rem);
    }

    /* Leaflet controls and badges stay within the map on narrow devices. */
    body.homepage-mobile .leaflet-control-container .leaflet-top { top: 8px; }
    body.homepage-mobile .leaflet-control-container .leaflet-right { right: 6px; }
    body.homepage-mobile .leaflet-control-container .leaflet-left { left: 6px; }
    body.homepage-mobile .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; }
    body.homepage-mobile .homepage-map-column > .position-absolute.top-0.start-0 {
        margin: 10px !important;
        max-width: calc(100% - 20px);
        overflow: hidden;
        white-space: nowrap;
    }
}

/* Very narrow phones: give the location pill and brand enough room without
   allowing the notification icon to fall onto a second line. */
@media (max-width: 359.98px) {
    body.homepage-mobile .navbar-brand { max-width: 28vw; font-size: 1.08rem !important; }
    body.homepage-mobile .navbar-brand .brand-badge { width: 36px; height: 36px; }
    body.homepage-mobile .mobile-menu-toggle { flex-basis: 42px; width: 42px; height: 42px; }
    body.homepage-mobile .navbar .dropdown.d-lg-none { flex-basis: 42px; }
    body.homepage-mobile .notification-bell { width: 40px; height: 40px; }
    body.homepage-mobile #location-picker-btn .text-primary { display: none; }
    body.homepage-mobile #current-location-text { font-size: .68rem !important; }
    body.homepage-mobile .mobile-service-button { min-height: 78px; font-size: .56rem; }
    body.homepage-mobile .mobile-service-icon { width: 36px; height: 36px; font-size: 1.25rem; }
}

/* Short landscape phones: prioritize map height and keep the service drawer
   usable without covering the entire screen. */
@media (max-width: 767.98px) and (orientation: landscape) {
    body.homepage-mobile .mobile-service-sheet { height: min(190px, 58dvh); }
    body.homepage-mobile .mobile-service-sheet.is-expanded { height: min(82dvh, 430px); }
    body.homepage-mobile .mobile-service-button { min-height: 72px; }
    body.homepage-mobile .mobile-service-icon { width: 34px; height: 34px; font-size: 1.2rem; }
    body.homepage-mobile .mobile-home-banner .card { padding: 9px 12px !important; }
}

/* Tablets running the mobile-style Android WebView get the same compact
   interaction while using the extra width gracefully. */
@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) {
    body.homepage-mobile .mobile-service-sheet { width: min(760px, 100vw); left: 50%; right: auto; transform: translateX(-50%); }
}

/* When the Android keyboard opens, keep the service tray above the resized
   visual viewport instead of being pushed off-screen. */
@supports (height: 100dvh) {
    @media (max-width: 767.98px) {
        body.homepage-mobile .mobile-service-sheet { max-height: 92dvh; }
        body.homepage-mobile .mobile-service-sheet.is-expanded { max-height: 92dvh; }
    }
}

/* ========================================================================
   FINAL MOBILE APP SHELL — DEVICE INDEPENDENT
   The homepage is a viewport-locked app shell. Header + banner are fixed,
   the map fills the remaining viewport, and the service sheet overlays it.
   This prevents large blank gaps / vertical drift on Realme and other phones.
   ======================================================================== */
@media (max-width: 767.98px) {
    :root {
        --onduty-safe-top: env(safe-area-inset-top, 0px);
        --onduty-safe-bottom: env(safe-area-inset-bottom, 0px);
        --onduty-app-header: clamp(68px, 19vw, 78px);
        --onduty-app-side: clamp(8px, 3vw, 16px);
        --onduty-banner-height: clamp(92px, 25vw, 122px);
    }

    html:has(body.homepage-mobile),
    body.homepage-mobile {
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none;
        background: #fff;
    }

    body.homepage-mobile .navbar {
        position: fixed !important;
        top: var(--onduty-safe-top) !important;
        left: 0;
        right: 0;
        width: 100%;
        height: var(--onduty-app-header);
        min-height: var(--onduty-app-header);
        z-index: 1250;
        margin: 0 !important;
        padding: 8px var(--onduty-app-side) !important;
        box-sizing: border-box;
        background: rgba(255,255,255,.98) !important;
        backdrop-filter: blur(14px);
    }

    body.homepage-mobile .navbar > .container-fluid {
        height: 100%;
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
        gap: 0;
    }

    body.homepage-mobile .mobile-menu-toggle {
        flex: 0 0 clamp(42px, 12vw, 48px);
        width: clamp(42px, 12vw, 48px) !important;
        height: clamp(42px, 12vw, 48px) !important;
        margin: 0 clamp(6px, 2vw, 10px) 0 0 !important;
    }

    body.homepage-mobile .navbar-brand {
        flex: 0 1 auto;
        width: auto;
        max-width: clamp(112px, 31vw, 175px);
        min-width: 0;
        margin: 0 clamp(5px, 1.5vw, 9px) 0 0 !important;
        font-size: clamp(1.05rem, 5.2vw, 1.45rem) !important;
        white-space: nowrap;
        overflow: hidden;
    }

    body.homepage-mobile .navbar-brand .brand-badge {
        width: clamp(36px, 10vw, 44px);
        height: clamp(36px, 10vw, 44px);
        flex: 0 0 auto;
        padding: 0 !important;
    }

    body.homepage-mobile .location-badge {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin: 0 clamp(4px, 1.5vw, 8px) 0 0 !important;
    }

    body.homepage-mobile #location-picker-btn {
        width: 100%;
        min-width: 0;
        height: clamp(44px, 12vw, 52px);
        min-height: 44px;
        padding: 4px clamp(6px, 2vw, 10px) !important;
        gap: 5px !important;
        overflow: hidden;
    }

    body.homepage-mobile #location-picker-btn > div { min-width: 0; overflow: hidden; }
    body.homepage-mobile #location-picker-btn > div > div { max-width: 100% !important; overflow: hidden; white-space: nowrap; }
    body.homepage-mobile #location-picker-btn .text-primary { font-size: clamp(.5rem, 2.3vw, .65rem) !important; }
    body.homepage-mobile #current-location-text { font-size: clamp(.62rem, 3vw, .78rem) !important; }

    body.homepage-mobile .navbar .dropdown.d-lg-none {
        flex: 0 0 clamp(42px, 12vw, 48px);
        width: clamp(42px, 12vw, 48px);
        margin: 0 !important;
    }

    body.homepage-mobile .notification-bell {
        width: 100%;
        height: clamp(42px, 12vw, 48px);
        padding: 0;
    }

    /* Mobile menu is an overlay below the fixed header, never part of layout. */
    body.homepage-mobile #navbarMain {
        position: fixed !important;
        top: calc(var(--onduty-safe-top) + var(--onduty-app-header) + 8px) !important;
        left: var(--onduty-app-side) !important;
        right: var(--onduty-app-side) !important;
        width: auto !important;
        max-height: calc(100dvh - var(--onduty-safe-top) - var(--onduty-app-header) - 20px);
        margin: 0 !important;
        overflow-y: auto;
        z-index: 1249;
    }

    /* Yellow banner is fixed directly under the header. */
    body.homepage-mobile .mobile-home-banner {
        position: fixed !important;
        top: calc(var(--onduty-safe-top) + var(--onduty-app-header) + 10px) !important;
        left: var(--onduty-app-side);
        right: var(--onduty-app-side);
        width: auto !important;
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1200;
    }

    body.homepage-mobile .mobile-home-banner .card {
        width: 100%;
        min-height: var(--onduty-banner-height);
        margin: 0 !important;
        padding: clamp(12px, 3.5vw, 18px) !important;
        box-sizing: border-box;
    }

    body.homepage-mobile .mobile-home-banner h5 {
        max-width: 72vw;
        font-size: clamp(.86rem, 4.2vw, 1.08rem) !important;
        line-height: 1.2;
    }

    body.homepage-mobile .mobile-home-banner p {
        max-width: 72vw;
        font-size: clamp(.68rem, 3.1vw, .84rem) !important;
        line-height: 1.2;
    }

    /* Fixed map shell: its parent owns the overlay coordinate system too,
       preventing the Live Providers badge from jumping to the document top. */
    body.homepage-mobile .container-fluid.max-mw.py-3.px-3 {
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0;
        padding: 0 !important;
    }

    body.homepage-mobile .homepage-map-column {
        position: fixed !important;
        top: var(--onduty-home-map-top, calc(var(--onduty-safe-top) + var(--onduty-app-header) + var(--onduty-banner-height) + 24px));
        left: var(--onduty-app-side) !important;
        right: var(--onduty-app-side) !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2;
    }

    body.homepage-mobile #main-map {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        border-radius: clamp(18px, 5vw, 26px) clamp(18px, 5vw, 26px) 0 0 !important;
        z-index: 1 !important;
    }

    body.homepage-mobile .homepage-map-column > .position-absolute.top-0.start-0 {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        margin: 0 !important;
        z-index: 8 !important;
        max-width: calc(100% - 20px);
    }

    body.homepage-mobile .customer-live-tracking-card {
        position: absolute !important;
        top: 56px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 9 !important;
    }

    /* Service drawer remains the only scrollable surface on the homepage. */
    body.homepage-mobile .mobile-service-sheet {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        z-index: 1100 !important;
        padding-left: max(10px, var(--onduty-safe-left, 0px));
        padding-right: max(10px, var(--onduty-safe-right, 0px));
        padding-bottom: calc(10px + var(--onduty-safe-bottom));
    }

    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) {
        height: clamp(286px, 38dvh, 330px) !important;
    }

    body.homepage-mobile .mobile-service-sheet.is-expanded {
        height: min(82dvh, 720px) !important;
        max-height: calc(100dvh - 8px) !important;
    }

    body.homepage-mobile .mobile-service-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: clamp(6px, 1.8vw, 10px);
    }

    body.homepage-mobile .mobile-service-button {
        min-width: 0;
        min-height: clamp(82px, 23vw, 98px);
        padding: 7px 2px;
        overflow: hidden;
    }

    body.homepage-mobile .mobile-service-button > span:last-child {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Very narrow phones: 4 columns gives labels enough width instead of
   producing tiny, wrapped cards. */
@media (max-width: 359.98px) {
    body.homepage-mobile .navbar-brand { max-width: 29vw; }
    body.homepage-mobile .location-badge { margin-right: 3px !important; }
    body.homepage-mobile .mobile-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) { height: clamp(300px, 43dvh, 340px) !important; }
    body.homepage-mobile .mobile-service-button { min-height: 84px; font-size: .64rem; }
}

/* Short landscape phones: retain the app shell but reduce the banner and
   drawer so the map remains useful. */
@media (max-width: 900px) and (orientation: landscape) {
    body.homepage-mobile .mobile-home-banner .card { min-height: 74px; padding: 8px 12px !important; }
    body.homepage-mobile .mobile-home-banner h5 { font-size: .88rem !important; }
    body.homepage-mobile .mobile-home-banner p { font-size: .68rem !important; }
    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) { height: 190px !important; }
    body.homepage-mobile .mobile-service-sheet.is-expanded { height: 86dvh !important; }
    body.homepage-mobile .mobile-service-button { min-height: 70px; }
}

/* ================================================================
   Premium mobile navigation drawer + direct account dashboard link
   ================================================================ */
.mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 0 !important;
    border-radius: 14px !important;
    background: #fff8e1 !important;
    color: #171717 !important;
    box-shadow: inset 0 0 0 1px rgba(245, 183, 0, .45), 0 5px 14px rgba(17,17,17,.08);
}
.mobile-menu-toggle i { font-size: 23px; line-height: 1; display: block; }
.mobile-menu-toggle:focus { box-shadow: 0 0 0 3px rgba(255,193,7,.22), inset 0 0 0 1px rgba(245,183,0,.55); }

.header-account-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 10px 4px 5px;
    border: 1px solid #e7e7e7;
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.header-account-link:hover { border-color: #f1c40f; box-shadow: 0 5px 16px rgba(17,17,17,.08); transform: translateY(-1px); }
.header-account-link i { font-size: 12px; }

.mobile-sidebar-head,
.mobile-sidebar-account,
.mobile-sidebar-footer,
.nav-menu-icon { display: none; }

@media (max-width: 767.98px) {
    body.onduty-menu-open { overflow: hidden !important; }

    /* The nav remains a compact header. The menu itself is an off-canvas panel. */
    body.homepage-mobile .navbar,
    .navbar { z-index: 1060; }

    #navbarMain {
        position: fixed !important;
        z-index: 1085;
        top: 0;
        left: 0;
        width: min(88vw, 330px) !important;
        height: 100dvh;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff !important;
        border: 0 !important;
        border-radius: 0 24px 24px 0 !important;
        box-shadow: 18px 0 48px rgba(15,23,42,.18) !important;
        transform: translateX(-105%);
        visibility: hidden;
        opacity: 0;
        transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s ease, visibility 0s linear .28s;
    }
    #navbarMain.onduty-sidebar-open {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
        transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
    }
    .mobile-sidebar-backdrop {
        position: fixed; inset: 0; z-index: 1080; background: rgba(15,23,42,.42);
        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
        opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s;
    }
    .mobile-sidebar-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease; }
    #navbarMain.onduty-sidebar-open ~ .mobile-sidebar-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease; }

    .mobile-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: max(18px, env(safe-area-inset-top)) 18px 16px;
        border-bottom: 1px solid #f1f1f1;
        flex: 0 0 auto;
    }
    .mobile-sidebar-brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:800; letter-spacing:-.5px; }
    .mobile-sidebar-logo {
        width: 40px; height: 40px; border-radius: 12px; display:grid; place-items:center;
        background:#ffc107; color:#111; box-shadow:0 5px 14px rgba(255,193,7,.22);
    }
    .mobile-sidebar-logo i { font-size:19px; }
    .mobile-sidebar-close {
        width:40px; height:40px; border:0; border-radius:12px; background:#f7f7f7; color:#1f2937;
        display:grid; place-items:center; font-size:16px;
    }
    .mobile-sidebar-close:active { transform: scale(.96); }

    .mobile-sidebar-account { display:block; padding:16px 14px 10px; }
    .mobile-account-link {
        display:flex; align-items:center; gap:11px; padding:12px; border-radius:16px;
        background:linear-gradient(135deg,#fff9df,#fff); border:1px solid #f1df9d;
        text-decoration:none; color:#111; box-shadow:0 5px 15px rgba(17,17,17,.05);
    }
    .mobile-account-link img,
    .mobile-account-icon { width:44px; height:44px; flex:0 0 44px; border-radius:50%; object-fit:cover; }
    .mobile-account-icon { display:grid; place-items:center; background:#ffc107; color:#111; font-size:20px; }
    .mobile-account-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
    .mobile-account-copy strong { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mobile-account-copy small { font-size:11px; color:#6b7280; }
    .mobile-account-link > i { font-size:13px; color:#9ca3af; }

    #navbarMain > .navbar-nav {
        display:flex !important;
        flex-direction:column;
        gap:4px !important;
        width:100%;
        margin:4px 0 0 !important;
        padding:8px 12px 0;
    }
    #navbarMain .nav-item { width:100%; }
    #navbarMain .nav-link {
        display:flex; align-items:center; gap:13px; width:100%; min-height:48px;
        padding:11px 13px !important; border-radius:13px; color:#30343b !important;
        font-size:14px; text-decoration:none;
    }
    #navbarMain .nav-link .nav-menu-icon {
        display:grid; place-items:center; width:23px; font-size:17px; color:#7b8490;
    }
    #navbarMain .nav-link.active,
    #navbarMain .nav-link:hover,
    #navbarMain .nav-link:focus {
        background:#fff7d9; color:#111 !important;
    }
    #navbarMain .nav-link.active .nav-menu-icon,
    #navbarMain .nav-link:hover .nav-menu-icon { color:#d79e00; }

    /* Hide the desktop utility controls inside the drawer; account/language are represented by the drawer footer. */
    #navbarMain > .d-flex { display:none !important; }
    .mobile-sidebar-footer {
        display:flex; flex-direction:column; gap:3px; margin-top:auto; padding:14px 14px max(18px, env(safe-area-inset-bottom));
        border-top:1px solid #f0f0f0;
    }
    .mobile-sidebar-footer-link {
        display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 12px; border-radius:12px;
        text-decoration:none; color:#374151; font-size:13px; font-weight:600;
    }
    .mobile-sidebar-footer-link i { width:22px; text-align:center; font-size:16px; }
    .mobile-sidebar-footer-link:hover { background:#f8fafc; }
    .mobile-sidebar-footer-link.danger { color:#dc2626; }
    .mobile-sidebar-language { display:flex; align-items:center; gap:12px; padding:12px; color:#6b7280; font-size:12px; }
    .mobile-sidebar-language i { width:22px; text-align:center; font-size:15px; }

    /* Ensure the trigger is visually centered even with the home-page width rules. */
    body.homepage-mobile .mobile-menu-toggle { width:46px; height:46px; padding:0 !important; display:inline-flex !important; align-items:center; justify-content:center; }
}

/* ========================================================================
   MOBILE SIDEBAR STACKING FIX — FINAL OVERRIDE
   The homepage banner and service sheet use their own high z-index layers.
   Because #navbarMain lives inside the <nav>, raising only the drawer's
   z-index is not enough: the parent navbar is a stacking context. When the
   drawer opens, lift the entire navbar above the homepage overlays so the
   sidebar is never visually cut by the yellow hero/banner or service tray.
   ======================================================================== */
@media (max-width: 767.98px) {
    body.homepage-mobile .navbar:has(#navbarMain.onduty-sidebar-open) {
        z-index: 2500 !important;
    }

    body.homepage-mobile #navbarMain {
        z-index: 2510 !important;
        top: 0 !important;
        bottom: 0 !important;
        max-height: 100dvh !important;
    }

    body.homepage-mobile #navbarMain.onduty-sidebar-open {
        z-index: 2510 !important;
    }

    body.homepage-mobile .mobile-sidebar-backdrop {
        z-index: 2505 !important;
    }

    /* Keep the drawer itself above the backdrop and all homepage surfaces. */
    body.homepage-mobile #navbarMain.onduty-sidebar-open ~ .mobile-sidebar-backdrop {
        z-index: 2505 !important;
    }
}

/* ========================================================================
   MOBILE SERVICE SHEET — COMPACT COLLAPSED HEIGHT
   Keep the service tray anchored to the bottom while reducing the unused
   vertical area on tall phones. The content remains fully tappable.
   ======================================================================== */
@media (max-width: 767.98px) {
    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) {
        height: 300px !important;
        min-height: 300px !important;
        padding-bottom: max(6px, var(--onduty-safe-bottom, 0px)) !important;
    }

    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) .mobile-service-search-wrap {
        margin-top: 0 !important;
    }

    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) .mobile-service-sheet-handle {
        min-height: 58px !important;
    }
}

@media (max-width: 359.98px) {
    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) {
        height: 300px !important;
        min-height: 300px !important;
    }
}

/* ========================================================================
   MOBILE SERVICE SHEET — SCROLL CUE / BOTTOM FADE
   Keep the compact tray visually filled, expose additional services through
   vertical scrolling, and use a transparent-to-black fade to indicate that
   more service cards continue below the fold.
   ======================================================================== */
@media (max-width: 767.98px) {
    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) {
        height: 300px !important;
        min-height: 300px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, .94) !important;
    }

    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) .mobile-service-search-wrap {
        flex: 0 0 46px !important;
    }

    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) .mobile-service-sheet-handle {
        flex: 0 0 58px !important;
        min-height: 58px !important;
    }

    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) .mobile-service-grid {
        position: relative;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 2px 2px 54px !important;
        margin: 0 !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    body.homepage-mobile .mobile-service-sheet:not(.is-expanded) .mobile-service-grid::-webkit-scrollbar {
        display: none;
    }

    /* Fade only the lower edge of the service list. It does not block touch
       or scrolling, and the cards remain visible underneath the gradient. */
    body.homepage-mobile .mobile-service-sheet:not(.is-expanded)::after {
        content: '';
        position: absolute;
        z-index: 5;
        left: max(10px, var(--onduty-safe-left, 0px));
        right: max(10px, var(--onduty-safe-right, 0px));
        bottom: 0;
        height: 62px;
        pointer-events: none;
        border-radius: 0 0 28px 28px;
        background: linear-gradient(
            to bottom,
            rgba(15, 23, 42, 0),
            rgba(15, 23, 42, .34)
        );
    }
}

/* ========================================================================
   HOMEPAGE MOBILE HERO — COMPACT, HOMEPAGE-ONLY
   Keep the yellow trust banner confined to the homepage app shell and
   make it a compact header above the map. Do not let the banner establish
   a large fixed block that can visually intrude into other page layouts.
   ======================================================================== */
@media (max-width: 767.98px) {
    /* This component exists only on index.php. The selector is additionally
       scoped to the homepage body class so it can never style another page. */
    body.homepage-mobile .mobile-home-banner {
        position: fixed !important;
        top: calc(var(--onduty-safe-top) + var(--onduty-app-header) + 8px) !important;
        left: var(--onduty-app-side) !important;
        right: var(--onduty-app-side) !important;
        width: auto !important;
        height: 104px !important;
        min-height: 104px !important;
        max-height: 104px !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 10 !important;
        overflow: hidden !important;
        pointer-events: auto;
    }

    body.homepage-mobile .mobile-home-banner .card {
        width: 100% !important;
        height: 104px !important;
        min-height: 104px !important;
        max-height: 104px !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        border-radius: 22px !important;
    }

    body.homepage-mobile .mobile-home-banner .card > .d-flex {
        width: 100%;
        min-height: 0;
    }

    body.homepage-mobile .mobile-home-banner h5 {
        margin-bottom: 3px !important;
        font-size: clamp(.92rem, 4vw, 1.06rem) !important;
        line-height: 1.15 !important;
    }

    body.homepage-mobile .mobile-home-banner p {
        font-size: clamp(.68rem, 3vw, .8rem) !important;
        line-height: 1.15 !important;
    }

    body.homepage-mobile .mobile-home-banner .bg-white {
        padding: 8px !important;
    }

    /* Keep the map directly below the compact banner. map.js calculates the
       final top from the banner's real rendered bottom, so this also remains
       correct on different Android WebView viewport sizes. */
    body.homepage-mobile .homepage-map-column {
        z-index: 2 !important;
    }

    /* Never allow homepage overlays to escape the homepage stacking context. */
    body:not(.homepage-mobile) .mobile-home-banner {
        display: none !important;
    }
}

/* ========================================================================
   HOMEPAGE MOBILE TRUST BANNER — EXTRA COMPACT
   Keep only the headline/tagline row. Remove the unused yellow space below
   the content and let the map begin immediately after the banner.
   ======================================================================== */
@media (max-width: 767.98px) {
    :root {
        --onduty-banner-height: 82px !important;
    }

    body.homepage-mobile .mobile-home-banner {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        overflow: visible !important;
    }

    body.homepage-mobile .mobile-home-banner .card {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        padding: 10px 14px !important;
        border-radius: 20px !important;
        display: flex !important;
        align-items: center !important;
    }

    body.homepage-mobile .mobile-home-banner .card > .d-flex {
        min-height: 0 !important;
        height: auto !important;
        align-items: center !important;
    }

    body.homepage-mobile .mobile-home-banner h5 {
        margin: 0 0 2px !important;
        font-size: clamp(.84rem, 4vw, 1rem) !important;
        line-height: 1.12 !important;
    }

    body.homepage-mobile .mobile-home-banner p {
        margin: 0 !important;
        font-size: clamp(.64rem, 3vw, .78rem) !important;
        line-height: 1.12 !important;
    }

    body.homepage-mobile .mobile-home-banner .bg-white {
        padding: 7px !important;
    }

    body.homepage-mobile .mobile-home-banner .bi-tools {
        font-size: 1.15rem !important;
    }

    body.homepage-mobile .homepage-map-column {
        top: calc(var(--onduty-safe-top) + var(--onduty-app-header) + var(--onduty-banner-height) + 12px) !important;
    }
}

/* ========================================================================
   HOMEPAGE MOBILE TRUST BANNER — FINAL TIGHT SPACING
   Match top/bottom padding to the actual two-line content. The previous
   fixed banner height left unused yellow space underneath the tagline.
   ======================================================================== */
@media (max-width: 767.98px) {
    :root {
        --onduty-banner-height: 64px !important;
    }

    body.homepage-mobile .mobile-home-banner {
        top: calc(var(--onduty-safe-top) + var(--onduty-app-header) + 10px) !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.homepage-mobile .mobile-home-banner .card {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding: 7px 14px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.homepage-mobile .mobile-home-banner .card > .d-flex {
        height: 100% !important;
        min-height: 0 !important;
        align-items: center !important;
    }

    body.homepage-mobile .mobile-home-banner h5 {
        margin: 0 0 1px !important;
        font-size: clamp(.82rem, 3.9vw, 1rem) !important;
        line-height: 1.08 !important;
    }

    body.homepage-mobile .mobile-home-banner p {
        margin: 0 !important;
        font-size: clamp(.63rem, 2.9vw, .77rem) !important;
        line-height: 1.08 !important;
    }

    body.homepage-mobile .mobile-home-banner .bg-white {
        padding: 6px !important;
    }

    body.homepage-mobile .mobile-home-banner .bi-tools {
        font-size: 1.05rem !important;
    }

    body.homepage-mobile .homepage-map-column {
        top: calc(var(--onduty-safe-top) + var(--onduty-app-header) + var(--onduty-banner-height) + 8px) !important;
    }
}

/* ========================================================================
   FINAL MOBILE GLOBAL HEADER ALIGNMENT
   Keep the public header identical across homepage, services, auth,
   customer/provider dashboards and other mobile pages.  The Android
   WebView already lays the document viewport below the system status bar,
   so adding an artificial 16px top floor creates the inconsistent blank
   space seen on some screens.
   ======================================================================== */
@media (max-width: 767.98px) {
    :root {
        --onduty-mobile-header-height: 76px;
        --onduty-mobile-safe-top: env(safe-area-inset-top, 0px);
    }

    /* One source of truth for the mobile document's top spacing. */
    body:not(.homepage-mobile) {
        padding-top: 0 !important;
    }

    /* Non-home pages keep the header in normal document flow via sticky-top. */
    body:not(.homepage-mobile) .navbar {
        position: sticky !important;
        top: 0 !important;
        height: var(--onduty-mobile-header-height) !important;
        min-height: var(--onduty-mobile-header-height) !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        box-sizing: border-box;
        z-index: 1250 !important;
    }

    /* Homepage keeps its fixed app-shell behavior, but uses the exact same
       header dimensions so it does not visually jump between pages. */
    body.homepage-mobile .navbar {
        top: 0 !important;
        height: var(--onduty-mobile-header-height) !important;
        min-height: var(--onduty-mobile-header-height) !important;
    }

    /* Same inner geometry everywhere. */
    body:not(.homepage-mobile) .navbar > .container-fluid,
    body.homepage-mobile .navbar > .container-fluid {
        height: 100%;
        min-height: 0;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    body:not(.homepage-mobile) .mobile-menu-toggle,
    body.homepage-mobile .mobile-menu-toggle {
        align-self: center;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Never apply the global safe-area offset to the normal sticky header.
       If a genuine browser safe area exists, the browser/WebView viewport
       already accounts for it; the sidebar remains a full-screen overlay. */
    body:not(.homepage-mobile) .navbar.sticky-top,
    body:not(.homepage-mobile) .sticky-top,
    body:not(.homepage-mobile) .fixed-top {
        top: 0 !important;
    }

    /* Keep the mobile sidebar independent of header geometry. */
    body:not(.homepage-mobile) #navbarMain {
        top: 0 !important;
        max-height: 100dvh !important;
    }
}

/* ========================================================================
   MOBILE SERVICE SHEET — CONTINUOUS DRAGGING
   The tray behaves like a true bottom sheet: users can drag it upward or
   downward and release it at any height. No forced snap point is applied.
   ======================================================================== */
@media (max-width: 767.98px) {
    body.homepage-mobile .mobile-service-sheet {
        /* JS controls the live height while dragging. */
        min-height: 148px;
        max-height: calc(100dvh - var(--onduty-mobile-safe-top) - 8px);
    }

    body.homepage-mobile .mobile-service-sheet.is-dragging {
        transition: none !important;
        user-select: none;
        -webkit-user-select: none;
    }

    body.homepage-mobile .mobile-service-sheet-handle {
        touch-action: none;
        cursor: grab;
    }

    body.homepage-mobile .mobile-service-sheet.is-dragging .mobile-service-sheet-handle {
        cursor: grabbing;
    }
}

/* ========================================================================
   FINAL HOMEPAGE HEADER + FREEFORM SERVICE SHEET OVERRIDES
   Restore the homepage header's original safe-area position while keeping
   the same 76px geometry used by the other mobile pages. The service tray
   is intentionally user-sized after a drag; it must not be forced back to
   the collapsed/expanded CSS heights.
   ======================================================================== */
@media (max-width: 767.98px) {
    body.homepage-mobile .navbar {
        top: max(env(safe-area-inset-top, 0px), 24px) !important;
        height: 76px !important;
        min-height: 76px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body.homepage-mobile .mobile-home-banner {
        top: calc(max(env(safe-area-inset-top, 0px), 24px) + 76px + 10px) !important;
    }

    body.homepage-mobile .homepage-map-column {
        top: var(--onduty-home-map-top, calc(max(env(safe-area-inset-top, 0px), 24px) + 76px + var(--onduty-banner-height) + 8px)) !important;
    }

    body.homepage-mobile .mobile-service-sheet.is-user-sized {
        height: auto !important;
        min-height: 148px !important;
        max-height: calc(100dvh - max(env(safe-area-inset-top, 0px), 24px) - 8px) !important;
        /* The inline height/min/max set by JS are restored below with !important. */
    }

    body.homepage-mobile .mobile-service-sheet.is-dragging {
        transition: none !important;
    }

    body.homepage-mobile .mobile-service-sheet-handle {
        touch-action: none !important;
        -webkit-user-select: none;
        user-select: none;
    }
}


/* ========================================================================
   SERVICE SELECTION: expose Request Service action on mobile.
   Once a category is selected, the tray intentionally becomes a short
   150px dock so the map booking action above it is never obscured.
   ======================================================================== */
@media (max-width: 767.98px) {
    body.homepage-mobile .mobile-service-sheet.has-category-selection {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
    }
    body.homepage-mobile .mobile-service-sheet.has-category-selection.is-dragging {
        height: var(--onduty-service-sheet-drag-height, 150px) !important;
        min-height: var(--onduty-service-sheet-drag-height, 150px) !important;
        max-height: var(--onduty-service-sheet-drag-height, 150px) !important;
    }
    body.homepage-mobile .map-booking-bar {
        bottom: calc(158px + var(--onduty-mobile-safe-bottom)) !important;
    }
}

/* =========================================================
   OnDuty Modern Customer + Provider Dashboards
   Mobile-first: surface the primary action immediately.
   ========================================================= */
.dashboard-modern{background:linear-gradient(180deg,#f8fafc 0%,#f4f5f7 100%);min-height:calc(100vh - 76px);padding:18px 0 42px;color:#20242b}
.dashboard-container{width:min(1180px,calc(100% - 28px));margin:0 auto}
.dashboard-hero{border-radius:26px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 14px 36px rgba(25,32,45,.09);margin-bottom:14px}
.provider-hero{background:linear-gradient(135deg,#121a29,#202b3c);color:#fff}
.customer-hero{background:linear-gradient(135deg,#fffdf0,#fff);border:1px solid rgba(245,190,20,.35)}
.dashboard-hero-main{display:flex;align-items:center;gap:14px;min-width:0}
.dashboard-avatar-wrap{position:relative;flex:0 0 auto}
.dashboard-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid #ffc107;background:#fff}
.dashboard-live-dot{position:absolute;right:1px;bottom:3px;width:14px;height:14px;border-radius:50%;background:#98a0aa;border:3px solid #202b3c}
.dashboard-live-dot.is-online{background:#22a06b}
.dashboard-hero-copy{min-width:0}
.dashboard-eyebrow,.dashboard-kicker{display:block;font-size:10px;letter-spacing:.13em;font-weight:800;text-transform:uppercase;color:#b77c00;margin-bottom:4px}
.provider-hero .dashboard-eyebrow{color:#ffc107}
.dashboard-hero h1{font-size:clamp(21px,3vw,31px);line-height:1.08;margin:0;font-weight:850;letter-spacing:-.03em}
.dashboard-hero p{margin:7px 0 0;font-size:13px;line-height:1.4;color:#68717d}
.provider-hero p{color:rgba(255,255,255,.67)}
.provider-status-control{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);flex:0 0 auto}
.provider-status-copy{display:flex;flex-direction:column;text-align:right}
.provider-status-copy strong{font-size:13px}.provider-status-copy span{font-size:10px;color:rgba(255,255,255,.6);margin-top:2px}
.provider-switch{width:44px;height:25px;position:relative;display:block}.provider-switch input{position:absolute;opacity:0}.provider-switch span{display:block;width:44px;height:25px;background:#69717c;border-radius:99px;transition:.2s}.provider-switch span:before{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 5px rgba(0,0,0,.2)}.provider-switch input:checked+span{background:#ffc107}.provider-switch input:checked+span:before{transform:translateX(19px)}
.hero-primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#ffc107;color:#111;border-radius:14px;padding:12px 16px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:0 8px 20px rgba(255,193,7,.2)}
.dashboard-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.dashboard-action-card{min-height:76px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:13px;display:flex;align-items:center;gap:10px;text-decoration:none;color:#20242b;box-shadow:0 5px 18px rgba(25,32,45,.05);transition:transform .16s,box-shadow .16s,border-color .16s}
.dashboard-action-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(25,32,45,.09);color:#20242b;border-color:#d9dde4}.dashboard-action-card.action-primary{background:#fff9df;border-color:#f3d77a}.dashboard-action-card>span:nth-child(2){min-width:0;flex:1}.dashboard-action-card strong,.dashboard-action-card small{display:block}.dashboard-action-card strong{font-size:13px;font-weight:800}.dashboard-action-card small{font-size:10px;color:#77808c;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#ffc107;color:#111;flex:0 0 auto;font-size:16px}.action-green{background:#e1f4ec;color:#168255}.action-blue{background:#e8f0ff;color:#2563c9}.action-yellow{background:#fff2bf;color:#a66d00}.action-arrow{color:#98a0aa;margin-left:auto}
.dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.dashboard-stat{background:#fff;border:1px solid #e7e9ed;border-radius:18px;padding:14px;display:flex;align-items:center;gap:11px;min-width:0}.stat-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto}.stat-icon.green{background:#e3f5ed;color:#168255}.stat-icon.blue{background:#e8f0ff;color:#2563c9}.stat-icon.yellow{background:#fff3c6;color:#b77c00}.stat-icon.purple{background:#eee8ff;color:#7047c8}.dashboard-stat strong{display:block;font-size:21px;line-height:1;font-weight:850}.dashboard-stat span:last-child{display:block;font-size:10px;color:#747c87;margin-top:4px}
.dashboard-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px}.dashboard-panel{background:#fff;border:1px solid #e6e8ec;border-radius:22px;padding:18px;box-shadow:0 7px 24px rgba(25,32,45,.05)}.dashboard-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}.dashboard-panel-head.compact{margin-bottom:10px}.dashboard-panel h2{font-size:18px;margin:0;font-weight:850;letter-spacing:-.02em}.dashboard-panel-head p{font-size:11px;color:#7b838e;margin:4px 0 0}.dashboard-link{font-size:11px;font-weight:800;color:#ad7600;text-decoration:none;white-space:nowrap}.dashboard-link:hover{text-decoration:underline}.dashboard-side-stack{display:flex;flex-direction:column;gap:14px}.mini-profile{display:flex;align-items:center;gap:10px;margin-bottom:16px}.mini-profile img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #ffc107}.mini-profile strong,.mini-profile span{display:block}.mini-profile strong{font-size:13px}.mini-profile span{font-size:10px;color:#7b838e;margin-top:2px}.progress-label{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin-bottom:7px}.progress-label strong{color:#168255}.dashboard-progress{height:7px;background:#edf0f3;border-radius:99px;overflow:hidden;margin-bottom:13px}.dashboard-progress span{height:100%;display:block;background:#ffc107;border-radius:inherit}.dashboard-outline-btn{display:flex;align-items:center;justify-content:space-between;border:1px solid #dedfe3;border-radius:12px;padding:10px 12px;color:#20242b;text-decoration:none;font-size:11px;font-weight:800}.tip-panel{display:flex;gap:10px;background:#fffaf0;border-color:#f6e5ad}.tip-icon{width:38px;height:38px;border-radius:12px;background:#ffc107;display:grid;place-items:center;flex:0 0 auto}.tip-panel strong{font-size:13px}.tip-panel p{font-size:10px;color:#737b86;line-height:1.4;margin:4px 0 0}.dashboard-mode-card{display:flex;align-items:center;gap:11px;background:#182131;color:#fff;border-radius:18px;padding:14px;text-decoration:none}.dashboard-mode-card>span{width:38px;height:38px;border-radius:12px;background:#ffc107;color:#111;display:grid;place-items:center}.dashboard-mode-card div{min-width:0;flex:1}.dashboard-mode-card strong,.dashboard-mode-card small{display:block}.dashboard-mode-card strong{font-size:12px}.dashboard-mode-card small{font-size:10px;color:rgba(255,255,255,.6);margin-top:3px}.dashboard-mode-card>i{color:#ffc107}.customer-mode-card{margin-top:14px}
.customer-list{display:flex;flex-direction:column;gap:7px}.customer-row{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid #eceef1;border-radius:14px;background:#fafbfc}.customer-avatar{width:36px;height:36px;border-radius:50%;background:#ffc107;color:#111;display:grid;place-items:center;font-size:10px;font-weight:850;flex:0 0 auto}.customer-avatar.big{width:44px;height:44px;font-size:12px}.customer-avatar.photo{object-fit:cover}.customer-info{min-width:0;flex:1}.customer-info strong,.customer-info span{display:block}.customer-info strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-info span{font-size:10px;color:#7b838e;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-row time{font-size:9px;color:#8a929d;white-space:nowrap}.row-arrow{color:#adb4bd;font-size:11px}.row-action{width:32px;height:32px;border-radius:10px;background:#fff3c6;color:#8f6200;display:grid;place-items:center;text-decoration:none}.saved-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.saved-mini{border:1px solid #eceef1;border-radius:14px;padding:10px;text-decoration:none;color:#20242b;min-width:0}.saved-mini img{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;margin-bottom:6px}.saved-mini strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-mini span{display:block;font-size:10px;color:#b77c00;margin-top:3px}
.dashboard-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;color:#77808c}.dashboard-empty i{font-size:28px;color:#c2c8cf;margin-bottom:3px}.dashboard-empty strong{font-size:13px;color:#30353c}.dashboard-empty span{font-size:10px}.dashboard-empty.small{min-height:90px}
.request-dashboard-list{display:flex;flex-direction:column;gap:10px}.request-dashboard-card{border:1px solid #e6e8ec;border-radius:18px;padding:14px;background:#fff}.request-dashboard-card.is-highlighted{border-color:#f0c84f;box-shadow:0 0 0 3px rgba(255,193,7,.12)}.request-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.request-category{display:inline-flex;background:#fff3c6;color:#765400;border:1px solid #f3dfa0;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:800}.request-card-top h3{font-size:14px;margin:7px 0 2px;font-weight:850}.request-card-top time{font-size:9px;color:#8b939d}.request-status{border-radius:999px;padding:5px 9px;font-size:9px;font-weight:800;white-space:nowrap}.request-status.active{background:#e1f4ec;color:#168255}.request-status.waiting{background:#e8f0ff;color:#2563c9}.request-status.complete{background:#eef0f2;color:#626b76}.request-provider{margin-top:12px;padding:11px;border-radius:15px;background:#f8fafb;border:1px solid #e9ebee;display:flex;justify-content:space-between;align-items:center;gap:10px}.request-provider-main{display:flex;align-items:center;gap:9px;min-width:0}.request-provider-main span,.request-provider-main strong,.request-provider-main small{display:block}.request-provider-main span{font-size:9px;color:#168255}.request-provider-main strong{font-size:12px;margin-top:2px}.request-provider-main small{font-size:9px;color:#7c848f;margin-top:2px}.request-stage{display:flex;flex-direction:column;align-items:flex-end;text-align:right}.request-stage i{color:#168255}.request-stage span{font-size:8px;color:#7c848f;margin-top:2px}.request-stage strong{font-size:10px;color:#20242b;margin-top:2px}.request-meta,.request-note{display:flex;gap:7px;align-items:flex-start;font-size:10px;color:#69717d;margin-top:9px}.request-meta i{color:#b77c00}.request-note{padding:9px;border-radius:10px;background:#fffaf0}.request-note i{color:#b77c00}.request-timeline{margin-top:11px}.request-timeline>strong{font-size:10px}.timeline-scroll{display:flex;gap:9px;overflow-x:auto;padding:8px 1px 2px}.timeline-item{display:flex;gap:6px;min-width:125px}.timeline-item>span{width:7px;height:7px;background:#ffc107;border-radius:50%;margin-top:4px;flex:0 0 auto}.timeline-item b,.timeline-item small{display:block}.timeline-item b{font-size:9px}.timeline-item small{font-size:8px;color:#858d97;margin-top:2px}.request-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.request-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;padding:9px 11px;font-size:10px;font-weight:800;text-decoration:none;border:1px solid transparent}.request-btn.dark{background:#1f2530;color:#fff}.request-btn.green{background:#e3f5ed;color:#168255;border-color:#bde5d3}.request-btn.yellow{background:#ffc107;color:#111}.request-btn.outline{background:#fff;color:#765400;border-color:#e1c35b}.request-waiting,.request-empty-state{margin-top:12px;border-radius:14px;background:#f7f9fb;border:1px solid #e7eaee;padding:12px;display:flex;align-items:center;gap:10px}.request-waiting i,.request-empty-state i{font-size:19px;color:#b77c00}.request-waiting strong,.request-waiting span{display:block}.request-waiting strong{font-size:11px}.request-waiting span{font-size:9px;color:#7d858f;margin-top:3px}

@media (max-width: 991.98px){.dashboard-layout{grid-template-columns:1fr}.dashboard-side-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.customer-mode-card{grid-column:1/-1}.dashboard-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 767.98px){.dashboard-modern{padding:12px 0 28px}.dashboard-container{width:min(100% - 18px,680px)}.dashboard-hero{padding:15px;border-radius:20px;align-items:flex-start;flex-direction:column}.dashboard-hero-main{width:100%}.dashboard-avatar{width:50px;height:50px}.dashboard-hero h1{font-size:21px}.dashboard-hero p{font-size:11px}.provider-status-control{width:100%;justify-content:space-between}.provider-status-copy{text-align:left}.hero-primary-btn{width:100%}.dashboard-quick-grid{gap:8px}.dashboard-action-card{min-height:68px;padding:10px;border-radius:15px}.action-icon{width:34px;height:34px;border-radius:10px}.dashboard-action-card strong{font-size:11px}.dashboard-action-card small{font-size:9px}.dashboard-stat{padding:11px;border-radius:15px}.stat-icon{width:35px;height:35px}.dashboard-stat strong{font-size:18px}.dashboard-stat span:last-child{font-size:9px}.dashboard-panel{padding:14px;border-radius:18px}.dashboard-panel h2{font-size:16px}.dashboard-panel-head p{font-size:10px}.dashboard-side-stack{display:flex}.request-provider{align-items:flex-start;flex-direction:column}.request-stage{align-items:flex-start;text-align:left;width:100%;padding-top:7px;border-top:1px solid #e7eaee}.request-actions .request-btn{flex:1 1 auto}.customer-row time{display:none}}
@media (max-width: 420px){.dashboard-action-card{gap:7px}.dashboard-action-card .action-arrow{display:none}.dashboard-action-card small{white-space:normal}.dashboard-stat-grid{gap:7px}.dashboard-stat{gap:8px}.dashboard-panel-head{gap:8px}.dashboard-link{font-size:10px}.request-card-top{flex-direction:column}.request-status{align-self:flex-start}.saved-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ========================================================================
   WEBVIEW MOBILE HEADER — MATCH HOMEPAGE POSITION
   The homepage header intentionally begins below the Android status-bar
   region. Keep every non-home page on the same visual baseline without
   adding a second content offset or changing the header's 76px geometry.
   ======================================================================== */
@media (max-width: 767.98px) {
    body:not(.homepage-mobile) .navbar {
        position: sticky !important;
        top: max(env(safe-area-inset-top, 0px), 24px) !important;
        margin-top: max(env(safe-area-inset-top, 0px), 24px) !important;
        height: 76px !important;
        min-height: 76px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        box-sizing: border-box !important;
        z-index: 1250 !important;
    }

    /* Keep the first content block naturally below the header; do not add
       another padding-top to the page, which was the source of the large
       blank gaps seen in earlier versions. */
    body:not(.homepage-mobile) {
        padding-top: 0 !important;
    }
}

/* ========================================================================
   PROVIDER JOB MANAGEMENT — clear, mobile-first work pipeline
   ======================================================================== */
.provider-work-pipeline{background:#fff;border:1px solid #e6e8ec;border-radius:22px;padding:16px;margin-bottom:14px;box-shadow:0 7px 24px rgba(25,32,45,.05)}
.provider-pipeline-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px}.provider-pipeline-head h2{font-size:17px;margin:0;font-weight:850}.provider-pipeline-head p{font-size:10px;color:#7b838e;margin:4px 0 0}.provider-pipeline-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.provider-pipeline-card{display:flex;align-items:center;gap:9px;min-width:0;padding:10px;border:1px solid #e7e9ed;border-radius:15px;background:#fafbfc;text-decoration:none;color:#20242b}.provider-pipeline-card:hover{color:#20242b;transform:translateY(-1px);box-shadow:0 7px 18px rgba(25,32,45,.07)}.pipeline-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;background:#fff3c6;color:#a66d00}.provider-pipeline-card.waiting .pipeline-icon{background:#fff3c6;color:#b77c00}.provider-pipeline-card.pending .pipeline-icon{background:#fff7dc;color:#9b7300}.provider-pipeline-card.ongoing .pipeline-icon{background:#e3f5ed;color:#168255}.provider-pipeline-card.completed .pipeline-icon{background:#e8f0ff;color:#2563c9}.provider-pipeline-card div{min-width:0;flex:1}.provider-pipeline-card strong,.provider-pipeline-card span,.provider-pipeline-card small{display:block}.provider-pipeline-card strong{font-size:18px;line-height:1;font-weight:850}.provider-pipeline-card span{font-size:10px;font-weight:800;margin-top:3px}.provider-pipeline-card small{font-size:8px;color:#818995;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.provider-pipeline-card>i{color:#aeb4bc;font-size:11px}

.provider-jobs-page{background:linear-gradient(180deg,#f8fafc 0%,#f3f5f7 100%);min-height:calc(100vh - 76px);color:#20242b}.provider-jobs-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:14px}.provider-back-link{display:inline-flex;align-items:center;gap:6px;color:#69717d;text-decoration:none;font-size:11px;margin-bottom:8px}.provider-back-link:hover{color:#20242b}.provider-jobs-eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#b77c00;font-weight:850;margin-bottom:3px}.provider-jobs-hero h1{font-size:27px;letter-spacing:-.03em;margin:0;font-weight:900}.provider-jobs-hero p{font-size:11px;color:#747d88;margin:5px 0 0;max-width:600px}.provider-jobs-dashboard{display:inline-flex;align-items:center;gap:7px;border:1px solid #dfe2e6;background:#fff;border-radius:999px;padding:9px 14px;color:#20242b;text-decoration:none;font-size:10px;font-weight:800;white-space:nowrap}.provider-jobs-dashboard:hover{border-color:#ffc107;color:#20242b}.provider-job-alert{font-size:11px;margin-bottom:12px}.provider-job-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:10px}.provider-job-tabs a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border:1px solid #e2e5e9;border-radius:15px;background:#fff;color:#555e69;text-decoration:none;font-size:10px;font-weight:800;box-shadow:0 4px 14px rgba(25,32,45,.03)}.provider-job-tabs a span{display:flex;align-items:center;gap:6px;min-width:0}.provider-job-tabs a b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#f1f3f5;font-size:9px;color:#606974}.provider-job-tabs a.is-active{background:#fff8df;border-color:#efcc55;color:#765400;box-shadow:0 5px 16px rgba(255,193,7,.10)}.provider-job-tabs a.waiting.is-active{background:#fff8df}.provider-job-tabs a.pending.is-active{background:#fffaf0}.provider-job-tabs a.ongoing.is-active{background:#edf9f4;border-color:#bfe4d2;color:#167a52}.provider-job-tabs a.completed.is-active{background:#eef4ff;border-color:#cadbf8;color:#2563c9}.provider-job-tabs a.is-active b{background:#fff;color:inherit}
.provider-job-guide{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e6e8ec;border-radius:17px;padding:9px 11px;margin-bottom:14px;overflow:auto;box-shadow:0 5px 18px rgba(25,32,45,.03)}.guide-step{display:flex;align-items:center;gap:7px;min-width:max-content}.guide-step>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff3c6;color:#916500;font-size:9px;font-weight:850}.guide-step strong,.guide-step small{display:block}.guide-step strong{font-size:9px}.guide-step small{font-size:8px;color:#838b95;margin-top:1px}.provider-job-guide>i{color:#c1c6cc;font-size:9px;flex:0 0 auto}.provider-job-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.provider-job-card{background:#fff;border:1px solid #e5e8ec;border-radius:22px;padding:15px;box-shadow:0 7px 24px rgba(25,32,45,.05);min-width:0}.provider-job-card.is-highlighted{border-color:#efc94c;box-shadow:0 0 0 3px rgba(255,193,7,.13),0 9px 26px rgba(25,32,45,.06)}.provider-job-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.provider-job-category{display:inline-flex;align-items:center;gap:5px;background:#fff4c8;border:1px solid #f0dda1;color:#765400;border-radius:999px;padding:5px 9px;font-size:9px;font-weight:850}.provider-job-title-wrap h2{font-size:16px;margin:8px 0 1px;font-weight:900}.provider-job-time{font-size:9px;color:#8a929c}.provider-job-status{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:850;white-space:nowrap}.status-waiting{background:#fff3c6;color:#8c6200}.status-pending{background:#fff7df;color:#9a7200}.status-ongoing{background:#e3f5ed;color:#168255}.status-completed{background:#e8f0ff;color:#2563c9}.status-declined{background:#f0f1f3;color:#6c747e}.provider-job-customer{display:flex;align-items:center;gap:10px;margin-top:13px;padding:11px;border-radius:16px;background:#f8fafb;border:1px solid #e9ebee}.provider-customer-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ffc107;color:#111;font-size:11px;font-weight:900;flex:0 0 auto}.provider-customer-main{min-width:0;flex:1}.provider-customer-main span,.provider-customer-main strong,.provider-customer-main small{display:block}.provider-customer-main span{font-size:8px;letter-spacing:.1em;color:#168255;font-weight:850}.provider-customer-main strong{font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.provider-customer-main small{font-size:9px;color:#7e8690;margin-top:2px}.provider-customer-actions{display:flex;gap:5px}.provider-customer-actions a{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;text-decoration:none;background:#fff;color:#168255;border:1px solid #cfe6db}.provider-customer-actions a:first-child{color:#20242b;border-color:#dfe2e6}.provider-job-current{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:11px;padding:11px 12px;border-radius:14px;background:#fffaf0;border:1px solid #f3e3b3}.provider-job-current-label{display:block;font-size:8px;letter-spacing:.1em;color:#9a7200;font-weight:850}.provider-job-current strong{display:block;font-size:12px;margin-top:2px}.provider-next-pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;background:#fff;color:#8d6500;border:1px solid #edd58b;font-size:8px;font-weight:850;text-align:right}.provider-next-pill.done{color:#2563c9;border-color:#cbdcf7;background:#eef4ff}.provider-job-progress{display:flex;gap:0;margin:12px 0 2px;padding:1px 0 3px;overflow-x:auto}.provider-progress-step{position:relative;display:flex;flex-direction:column;align-items:center;min-width:72px;flex:1;color:#a4abb4}.provider-progress-step:not(:last-child):after{content:"";position:absolute;top:10px;left:50%;width:100%;height:2px;background:#e6e9ec}.provider-progress-step>span{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#edf0f3;color:#8a929c;font-size:8px;font-weight:850;border:2px solid #fff}.provider-progress-step small{font-size:7px;line-height:1.2;text-align:center;margin-top:4px;max-width:70px}.provider-progress-step.done{color:#168255}.provider-progress-step.done>span{background:#e1f4ec;color:#168255}.provider-progress-step.done:after{background:#bfe4d2}.provider-progress-step.current{color:#8d6500}.provider-progress-step.current>span{background:#ffc107;color:#111;box-shadow:0 0 0 3px rgba(255,193,7,.15)}.provider-job-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.provider-job-info-grid>div{display:flex;align-items:flex-start;gap:7px;min-width:0;padding:9px;border:1px solid #eceef1;border-radius:12px;background:#fafbfc}.provider-job-info-grid>div>i{color:#b77c00;font-size:12px;margin-top:1px}.provider-job-info-grid span{min-width:0;flex:1}.provider-job-info-grid small,.provider-job-info-grid strong{display:block}.provider-job-info-grid small{font-size:8px;color:#858d97}.provider-job-info-grid strong{font-size:9px;margin-top:2px;word-break:break-word}.provider-job-info-grid a{align-self:center;font-size:8px;font-weight:850;color:#765400;text-decoration:none}.provider-job-note{display:flex;gap:8px;padding:9px 10px;margin-top:9px;border-radius:12px;background:#f7f9fb;border:1px solid #e7eaee}.provider-job-note>i{color:#b77c00}.provider-job-note small,.provider-job-note strong{display:block}.provider-job-note small{font-size:8px;color:#858d97}.provider-job-note strong{font-size:9px;margin-top:2px;line-height:1.35}.provider-job-actions{border-top:1px solid #eceef1;margin-top:12px;padding-top:12px}.provider-response-form textarea,.provider-stage-form textarea{width:100%;border:1px solid #e1e4e8;background:#fafbfc;border-radius:11px;padding:9px;font-size:10px;resize:vertical;min-height:58px;outline:none}.provider-response-form textarea:focus,.provider-stage-form textarea:focus{border-color:#e0b72e;box-shadow:0 0 0 3px rgba(255,193,7,.1)}.provider-response-form>div,.provider-secondary-actions{display:flex;gap:7px;margin-top:7px}.provider-response-form .request-btn,.provider-secondary-actions .request-btn{flex:1}.provider-stage-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.provider-stage-select-wrap{display:flex;flex-direction:column;gap:4px}.provider-stage-select-wrap span{font-size:8px;font-weight:850;color:#777f89}.provider-stage-select-wrap select{height:37px;border:1px solid #e1e4e8;border-radius:10px;background:#fff;padding:0 9px;font-size:9px;font-weight:700}.provider-stage-form textarea{grid-column:1/-1}.provider-stage-form .request-btn{grid-column:1/-1;width:100%}.provider-complete-banner,.provider-declined-banner{display:flex;align-items:center;gap:9px;padding:11px;border-radius:13px}.provider-complete-banner{background:#e9f7f0;border:1px solid #c9e9d9;color:#168255}.provider-declined-banner{background:#f4f5f6;border:1px solid #e3e5e8;color:#707781}.provider-complete-banner>i,.provider-declined-banner>i{font-size:19px}.provider-complete-banner strong,.provider-complete-banner span,.provider-declined-banner strong,.provider-declined-banner span{display:block}.provider-complete-banner strong,.provider-declined-banner strong{font-size:10px}.provider-complete-banner span,.provider-declined-banner span{font-size:8px;margin-top:2px}.provider-job-empty{background:#fff;border:1px solid #e5e8ec;border-radius:22px;padding:38px 18px;text-align:center;box-shadow:0 7px 24px rgba(25,32,45,.05)}.provider-job-empty-icon{width:52px;height:52px;border-radius:16px;background:#fff3c6;color:#b77c00;display:grid;place-items:center;margin:0 auto 10px;font-size:22px}.provider-job-empty h2{font-size:17px;font-weight:850;margin:0}.provider-job-empty p{font-size:10px;color:#7b838e;max-width:420px;margin:5px auto 13px}
@media (max-width:991.98px){.provider-pipeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.provider-job-list{grid-template-columns:1fr}}
@media (max-width:767.98px){.provider-jobs-page .container{padding-top:14px}.provider-jobs-hero{align-items:flex-start;flex-direction:column;gap:10px}.provider-jobs-hero h1{font-size:23px}.provider-jobs-dashboard{align-self:stretch;justify-content:center}.provider-job-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.provider-job-tabs a:last-child{grid-column:1/-1}.provider-job-guide{border-radius:15px}.provider-job-card{padding:13px;border-radius:19px}.provider-job-progress{margin-left:-2px;margin-right:-2px}.provider-job-info-grid{grid-template-columns:1fr}.provider-stage-form{grid-template-columns:1fr}.provider-stage-form .request-btn{grid-column:auto}.provider-response-form>div{flex-direction:column}.provider-secondary-actions .request-btn{min-width:0}.provider-pipeline-head{flex-direction:column;gap:5px}.provider-work-pipeline{padding:13px;border-radius:19px}.provider-pipeline-card{padding:9px}.provider-pipeline-card small{white-space:normal}.provider-pipeline-card strong{font-size:17px}}
@media (max-width:420px){.provider-pipeline-grid{gap:6px}.provider-pipeline-card{gap:6px}.pipeline-icon{width:32px;height:32px}.provider-pipeline-card strong{font-size:16px}.provider-pipeline-card span{font-size:9px}.provider-pipeline-card small{font-size:7px}.provider-job-tabs a{padding:10px 9px}.provider-job-card-head{gap:7px}.provider-job-status{padding:5px 7px}.provider-job-current{align-items:flex-start;flex-direction:column}.provider-next-pill{text-align:left}.provider-progress-step{min-width:68px}}

/* Professional provider profile drawer */
.provider-drawer-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.provider-drawer-live-copy{font-size:.72rem;color:#6b7280;font-weight:600}
.provider-drawer-close{width:42px;height:42px;border:1px solid #e5e7eb;background:#fff;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#111827;font-size:1rem;box-shadow:0 3px 12px rgba(15,23,42,.05)}
.provider-drawer-close:active{transform:scale(.97)}
.provider-drawer-last-seen{text-align:left;margin:2px 0 16px;padding-left:2px}
.provider-profile-hero{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid #ececec;border-radius:22px;background:linear-gradient(145deg,#fffdf4,#fff);box-shadow:0 8px 24px rgba(17,24,39,.05);margin-bottom:14px}
.provider-profile-avatar-wrap{position:relative;flex:0 0 auto}
.provider-profile-avatar{display:block;border-radius:50%;border:4px solid #ffc107;background:#f8fafc;box-shadow:0 5px 18px rgba(17,24,39,.12)}
.provider-profile-online-dot{position:absolute;right:4px;bottom:6px;width:17px;height:17px;border-radius:50%;background:#9ca3af;border:3px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.15)}
.provider-profile-online-dot.is-online{background:#22c55e}
.provider-profile-heading{min-width:0}
.provider-profile-eyebrow{font-size:.64rem;letter-spacing:.16em;font-weight:800;color:#a57900;margin-bottom:3px}
.provider-profile-heading h3{font-size:1.2rem;line-height:1.2;word-break:break-word}
.provider-profile-rating-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:.72rem}
.provider-rating-pill{display:inline-flex;align-items:center;gap:5px;background:#fff7d6;color:#8a6500;border:1px solid #f4df8a;border-radius:999px;padding:5px 9px;font-weight:800}
.provider-exp-pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#f5f6f8;border:1px solid #e5e7eb;color:#374151;font-weight:700}
.provider-profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.provider-profile-actions button{min-height:46px;border-radius:15px!important}
.provider-secondary-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:20px}
.provider-secondary-btn{min-height:42px;padding:8px 7px;border:1px solid #e5e7eb;background:#fff;border-radius:13px;color:#374151;font-weight:700;font-size:.74rem;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px;transition:.18s ease}
.provider-secondary-btn:hover{background:#fafafa;color:#111827}
.provider-secondary-btn.is-saved{background:#fff8dc;border-color:#f2d66d;color:#8a6500}
.provider-secondary-btn:disabled{opacity:.65}
.provider-section-title{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a57900;margin-bottom:7px}
.provider-info-grid{background:#f8fafc;border:1px solid #e5e7eb;border-radius:18px;padding:13px}
.provider-info-grid>div{padding:7px 0}
.provider-info-grid>div+div{border-top:1px solid #e5e7eb}
@media(max-width:767.98px){
 .provider-right-drawer{padding:16px 15px calc(24px + env(safe-area-inset-bottom));}
 .provider-profile-hero{align-items:flex-start;padding:16px;gap:13px;border-radius:20px}
 .provider-profile-avatar{width:78px;height:78px}
 .provider-profile-heading h3{font-size:1.08rem}
 .provider-profile-eyebrow{font-size:.58rem}
 .provider-secondary-actions{grid-template-columns:1fr 1fr 1fr}
}

/* ========================================================================
   PUBLIC PROVIDER PROFILE — PROFESSIONAL MOBILE / APP LAYOUT
   ======================================================================== */
.public-provider-page { max-width: 1180px; }
.public-provider-layout { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(320px, .65fr); gap:20px; align-items:start; }
.public-provider-card,.public-provider-location-card,.public-provider-share-card { background:#fff; border:1px solid #e7e9ed; border-radius:28px; box-shadow:0 12px 35px rgba(17,24,39,.07); overflow:hidden; }
.public-provider-hero { position:relative; background:linear-gradient(145deg,#111827 0%,#1f2937 100%); color:#fff; padding:26px; overflow:hidden; }
.public-provider-hero-glow { position:absolute; width:230px; height:230px; right:-80px; top:-120px; background:rgba(255,193,7,.18); border-radius:50%; filter:blur(4px); }
.public-provider-hero-row { position:relative; display:flex; gap:20px; align-items:center; }
.public-provider-avatar-wrap { position:relative; flex:0 0 auto; }
.public-provider-avatar { width:104px; height:104px; object-fit:cover; border-radius:50%; border:4px solid #ffc107; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.24); margin:0; }
.public-provider-presence { position:absolute; right:3px; bottom:5px; width:20px; height:20px; border-radius:50%; border:3px solid #1f2937; background:#9ca3af; }
.public-provider-presence.is-online { background:#22c55e; }
.public-provider-hero-copy { min-width:0; }
.public-provider-eyebrow,.public-provider-side-kicker,.public-provider-section-heading span { color:#ffc107; font-size:.72rem; font-weight:800; letter-spacing:.16em; }
.public-provider-hero h1 { margin:5px 0 5px; color:#fff; font-size:clamp(1.55rem,3vw,2.2rem); line-height:1.1; font-weight:800; letter-spacing:-.035em; }
.public-provider-category { color:#d1d5db; font-size:1rem; display:flex; gap:7px; align-items:center; }
.public-provider-category i { color:#ffc107; }
.public-provider-rating-row { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:13px; color:#cbd5e1; font-size:.84rem; }
.public-provider-rating { color:#111827; background:#fff4c2; border-radius:999px; padding:6px 10px; font-weight:800; }
.public-provider-rating i { color:#d99d00; }
.public-provider-verified { color:#b9f3d2; }
.public-provider-availability { position:relative; margin-top:22px; padding:12px 15px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); border-radius:16px; display:flex; gap:10px; align-items:center; }
.public-provider-availability strong { display:block; font-size:.9rem; }
.public-provider-availability small { display:block; color:#aeb7c4; margin-top:2px; }
.public-provider-live-dot { width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:#94a3b8; }
.public-provider-live-dot.is-online { background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.12); }
.public-provider-body { padding:24px; }
.public-provider-actions { display:grid; gap:10px; }
.primary-actions { grid-template-columns:1fr 1fr; }
.provider-action { min-height:54px; border-radius:15px; display:flex; justify-content:center; align-items:center; gap:9px; font-weight:800; text-decoration:none; font-size:.98rem; transition:transform .15s ease,box-shadow .15s ease; }
.provider-action:hover { transform:translateY(-1px); }
.provider-action-call { background:#ffc107; color:#111827; box-shadow:0 7px 18px rgba(255,193,7,.18); }
.provider-action-whatsapp { background:#22c55e; color:#fff; box-shadow:0 7px 18px rgba(34,197,94,.15); }
.secondary-actions { grid-template-columns:1fr 1fr; margin-top:10px; }
.provider-secondary-action { min-height:48px; border:1px solid #e2e5ea; border-radius:14px; background:#fff; color:#374151; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; text-decoration:none; cursor:pointer; }
.provider-secondary-action:hover { background:#f8fafc; }
.provider-secondary-action.is-saved { color:#9a7100; border-color:#f3d36b; background:#fff9df; }
.public-provider-section { margin-top:28px; }
.public-provider-section-heading { margin-bottom:8px; }
.public-provider-about { color:#596273; font-size:.98rem; line-height:1.75; margin:0; }
.public-provider-stats { margin-top:20px; padding:5px; background:#f7f8fa; border:1px solid #e8eaee; border-radius:18px; display:grid; grid-template-columns:repeat(3,1fr); }
.public-provider-stats>div { padding:13px 12px; min-width:0; }
.public-provider-stats>div+div { border-left:1px solid #e3e6eb; }
.public-provider-stats i { display:block; color:#d49c00; margin-bottom:6px; }
.public-provider-stats span { display:block; color:#7a8390; font-size:.72rem; }
.public-provider-stats strong { display:block; color:#1f2937; font-size:.9rem; margin-top:2px; overflow-wrap:anywhere; }
.public-provider-section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.public-provider-section-title h2 { font-size:1.05rem; margin:0; font-weight:800; color:#1f2937; }
.public-provider-section-title>span { color:#9a7100; font-size:.8rem; font-weight:800; }
.public-provider-section-title>span i { color:#d99d00; }
.public-provider-service-list { display:flex; flex-wrap:wrap; gap:8px; }
.public-provider-service-list span { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #e5e7eb; background:#fafafa; border-radius:999px; color:#303846; font-weight:700; font-size:.82rem; }
.public-provider-service-list i { color:#d49c00; }
.public-provider-review-list { display:flex; flex-direction:column; gap:10px; }
.public-provider-review { display:flex; gap:11px; padding:13px; border:1px solid #e8eaee; border-radius:16px; background:#fafbfc; }
.review-avatar { width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:#fff1bd; color:#9a7100; display:grid; place-items:center; font-weight:800; }
.review-content { min-width:0; flex:1; }
.review-top { display:flex; justify-content:space-between; gap:8px; font-size:.84rem; }
.review-top span { color:#a27700; font-weight:800; white-space:nowrap; }
.review-top i { color:#d99d00; }
.review-content p { color:#667085; margin:4px 0 0; font-size:.8rem; line-height:1.55; }
.public-provider-empty-reviews { display:flex; align-items:center; gap:12px; padding:16px; background:#f8fafc; border:1px dashed #dce1e8; border-radius:16px; color:#667085; }
.public-provider-empty-reviews>i { font-size:1.5rem; color:#d6a400; }
.public-provider-empty-reviews strong { color:#374151; display:block; }
.public-provider-empty-reviews p { margin:2px 0 0; font-size:.8rem; }
.public-provider-side { display:flex; flex-direction:column; gap:14px; position:sticky; top:94px; }
.public-provider-location-card { padding:16px; }
.public-provider-side-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:13px; }
.public-provider-side-head h2 { font-size:1.1rem; font-weight:800; margin:3px 0 0; }
.public-provider-location-status { padding:6px 10px; border-radius:999px; background:#f1f3f5; color:#687180; font-size:.72rem; font-weight:800; }
.public-provider-location-status.is-online { background:#e3f7ec; color:#188452; }
.public-provider-map { height:330px; background:#eef2f7; border-radius:18px; overflow:hidden; }
.public-provider-map-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#7b8490; text-align:center; }
.public-provider-map-empty i { font-size:2rem; color:#d7a400; }
.public-provider-map-empty strong { color:#4b5563; }
.public-provider-location-meta { display:flex; align-items:center; gap:7px; color:#7a8390; font-size:.78rem; margin-top:11px; }
.public-provider-share-card { padding:18px; background:linear-gradient(145deg,#fffdf2,#fff); }
.public-provider-share-card h3 { margin:5px 0 14px; font-size:.98rem; line-height:1.4; }
.public-provider-share-card button { width:100%; border:1px solid #f0d37c; background:#fff4c2; color:#6e5200; border-radius:13px; padding:11px 12px; font-weight:800; }

@media (max-width: 767.98px) {
    .public-provider-page { padding:10px 12px 28px !important; }
    .public-provider-layout { display:block; }
    .public-provider-card,.public-provider-location-card,.public-provider-share-card { border-radius:22px; }
    .public-provider-hero { padding:20px 18px 16px; }
    .public-provider-hero-row { gap:14px; align-items:flex-start; }
    .public-provider-avatar { width:82px; height:82px; border-width:3px; }
    .public-provider-presence { width:17px; height:17px; right:0; bottom:3px; border-width:2px; }
    .public-provider-eyebrow { font-size:.62rem; }
    .public-provider-hero h1 { font-size:1.4rem; }
    .public-provider-category { font-size:.86rem; }
    .public-provider-rating-row { margin-top:9px; gap:6px; font-size:.72rem; }
    .public-provider-rating { padding:5px 8px; }
    .public-provider-availability { margin-top:15px; padding:10px 12px; }
    .public-provider-availability small { font-size:.72rem; }
    .public-provider-body { padding:18px; }
    .provider-action { min-height:52px; }
    .public-provider-stats { grid-template-columns:repeat(3,1fr); }
    .public-provider-stats>div { padding:11px 8px; }
    .public-provider-stats strong { font-size:.78rem; }
    .public-provider-side { position:static; margin-top:14px; }
    .public-provider-map { height:250px; }
}

/* ========================================================================
   MAP PROVIDER PROFILE — premium contact sheet
   ======================================================================== */
.provider-right-drawer{
    background:#fbfcfe;
    border:1px solid #e7e9ed;
    border-radius:26px;
    padding:18px;
    box-shadow:-18px 0 50px rgba(15,23,42,.16);
}
.provider-drawer-handle{display:none;width:42px;height:4px;border-radius:99px;background:#cfd5dc;margin:0 auto 12px}
.provider-drawer-topbar{margin-bottom:5px}
.provider-presence-copy{display:flex;align-items:center;gap:9px;min-width:0}
.provider-drawer-status{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;background:#e6f6ee;color:#188158;border:1px solid #bde2d0;font-size:.74rem;font-weight:850;white-space:nowrap}
.provider-drawer-status i{font-size:.42rem}
.provider-drawer-status.is-offline{background:#f1f3f5;color:#69717c;border-color:#e1e4e8}
.provider-drawer-live-copy{font-size:.76rem;color:#6f7782;font-weight:650}
.provider-drawer-close{width:44px;height:44px;border-radius:15px;border:1px solid #e3e6ea;background:#fff;box-shadow:0 5px 16px rgba(15,23,42,.06);font-size:1rem}
.provider-drawer-last-seen{font-size:.76rem;color:#6f7782!important;margin:3px 0 13px;padding-left:2px}
.provider-profile-hero{position:relative;display:flex;align-items:center;gap:15px;padding:18px;border:1px solid #eadfae;border-radius:22px;background:linear-gradient(135deg,#fffdf4 0%,#fff 65%);box-shadow:0 10px 28px rgba(15,23,42,.06);margin-bottom:12px}
.provider-profile-avatar{border-width:4px!important;box-shadow:0 8px 20px rgba(15,23,42,.12)!important}
.provider-profile-heading h3{margin:2px 0 4px!important;font-size:1.25rem;line-height:1.15;font-weight:850;letter-spacing:-.025em}
.provider-profile-heading p{margin:0 0 8px!important;font-size:.9rem;color:#5f6772;font-weight:600}
.provider-profile-heading p i{color:#b37b00;margin-right:5px}
.provider-profile-eyebrow{font-size:.61rem!important;letter-spacing:.18em!important;color:#9a7200!important}
.provider-profile-rating-row{gap:6px!important}
.provider-rating-pill{padding:6px 10px!important}
.provider-review-count{font-size:.72rem;color:#6f7782;font-weight:650}
.provider-exp-pill{padding:6px 10px!important;font-size:.7rem}
.provider-profile-contact-card{background:#fff;border:1px solid #e5e8ec;border-radius:20px;padding:13px;box-shadow:0 7px 22px rgba(15,23,42,.045);margin-bottom:9px}
.provider-contact-intro{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 10px}
.provider-contact-intro strong{font-size:.78rem;color:#20242b}
.provider-contact-intro span{font-size:.62rem;color:#89919b;text-align:right}
.provider-profile-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0!important}
.provider-contact-btn{min-height:50px;border:0;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:.9rem;font-weight:850;transition:transform .15s ease,box-shadow .15s ease}
.provider-contact-btn:active{transform:scale(.985)}
.provider-contact-call{background:#ffc107;color:#111827;box-shadow:0 7px 17px rgba(255,193,7,.2)}
.provider-contact-whatsapp{background:#25c96a;color:#fff;box-shadow:0 7px 17px rgba(37,201,106,.17)}
.provider-contact-btn i{font-size:1rem}
.provider-secondary-actions{display:grid!important;grid-template-columns:1.15fr 1fr 1fr!important;gap:7px!important;margin:0 0 15px!important}
.provider-secondary-btn{min-height:42px!important;border-radius:13px!important;background:#fff!important;border:1px solid #e1e5e9!important;box-shadow:0 3px 12px rgba(15,23,42,.025);font-size:.7rem!important;color:#454d58!important}
.provider-secondary-btn:hover{background:#f8fafc!important;border-color:#d5dae0!important}
.provider-secondary-btn.is-saved{background:#fff8dc!important;border-color:#f0d36a!important;color:#8a6500!important}
.provider-drawer-section{background:#fff;border:1px solid #e5e8ec;border-radius:19px;padding:15px;margin-bottom:10px;box-shadow:0 5px 18px rgba(15,23,42,.035)}
.provider-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:9px}
.provider-section-heading span{display:block;font-size:.78rem;font-weight:850;color:#20242b;letter-spacing:.01em}
.provider-section-heading small{display:block;font-size:.62rem;color:#8a929c;margin-top:2px}
.provider-about-copy{font-size:.78rem!important;line-height:1.55!important;color:#68717d!important;margin:0!important}
.provider-info-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;background:transparent!important;border:0!important;padding:0!important;margin-bottom:10px!important}
.provider-info-item{display:flex;align-items:center;gap:9px;padding:11px 10px!important;border:1px solid #e5e8ec!important;border-radius:15px;background:#fff!important;min-width:0}
.provider-info-item+div{border-top:0!important}
.provider-info-wide{grid-column:1/-1}
.provider-info-icon{width:32px;height:32px;border-radius:10px;background:#fff5d0;color:#a87400;display:grid;place-items:center;flex:0 0 auto}
.provider-info-item small,.provider-info-item strong{display:block}
.provider-info-item small{font-size:.6rem;color:#89919b}
.provider-info-item strong{font-size:.72rem;color:#252a31;margin-top:2px;word-break:break-word}
.provider-services-section{margin-bottom:10px}
.provider-service-tags{display:flex;flex-wrap:wrap;gap:7px}
.provider-service-tag{display:inline-flex;align-items:center;gap:5px;padding:8px 11px;border-radius:999px;background:#f7f8fa;border:1px solid #e1e5e9;color:#353b44;font-size:.68rem;font-weight:750}
.provider-service-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:#ffc107;flex:0 0 auto}
.provider-reviews-section{margin-bottom:4px}
.provider-review-heading{align-items:center}
.provider-review-summary{display:inline-flex!important;align-items:center;gap:5px;background:#fff7d6;border:1px solid #f1df9a;border-radius:999px;padding:6px 9px!important;color:#8a6500!important;font-size:.7rem!important;white-space:nowrap}
.provider-review-summary i{color:#d59d00}
.provider-reviews-container{display:flex;flex-direction:column;gap:7px}
.provider-empty-review{display:flex;align-items:center;gap:10px;padding:11px;border-radius:14px;background:#f8fafb;border:1px dashed #dfe4e9}
.provider-empty-review>i{width:34px;height:34px;border-radius:10px;background:#fff5d0;color:#a87400;display:grid;place-items:center;flex:0 0 auto}
.provider-empty-review strong,.provider-empty-review span{display:block}
.provider-empty-review strong{font-size:.7rem;color:#343a42}
.provider-empty-review span{font-size:.61rem;color:#89919b;margin-top:2px;line-height:1.35}

@media(max-width:767.98px){
    .provider-right-drawer{
        top:auto!important;right:0!important;bottom:0!important;width:100%!important;height:auto!important;max-height:88vh!important;
        border-radius:28px 28px 0 0!important;padding:9px 16px calc(18px + env(safe-area-inset-bottom))!important;
        box-shadow:0 -18px 50px rgba(15,23,42,.18)!important;overflow-y:auto!important;
        transition:transform .28s cubic-bezier(.16,1,.3,1)!important;transform:translateY(105%);
    }
    .provider-right-drawer.open{right:0!important;transform:translateY(0)}
    .provider-drawer-handle{display:block}
    .provider-profile-hero{padding:15px;border-radius:20px;gap:12px}
    .provider-profile-avatar{width:76px!important;height:76px!important}
    .provider-profile-heading h3{font-size:1.08rem}
    .provider-profile-heading p{font-size:.82rem!important}
    .provider-profile-contact-card{padding:11px}
    .provider-contact-intro{align-items:flex-start;flex-direction:column;gap:2px;margin-bottom:8px}
    .provider-contact-intro span{text-align:left}
    .provider-contact-btn{min-height:48px}
    .provider-secondary-actions{grid-template-columns:1.15fr 1fr 1fr!important}
    .provider-drawer-section{padding:13px;border-radius:17px}
}
@media(max-width:390px){
    .provider-right-drawer{padding-left:13px!important;padding-right:13px!important}
    .provider-profile-hero{padding:13px}
    .provider-profile-avatar{width:70px!important;height:70px!important}
    .provider-profile-rating-row{gap:4px!important}
    .provider-exp-pill,.provider-rating-pill{padding:5px 8px!important}
    .provider-secondary-btn{font-size:.65rem!important;padding-left:4px!important;padding-right:4px!important}
}



/* Contextual mode switch prompt — shown only when an action requires another account mode. */
.onduty-mode-prompt{position:fixed;inset:0;z-index:12050;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(15,23,42,.28);backdrop-filter:blur(3px)}
.onduty-mode-prompt-card{position:relative;width:min(520px,100%);display:grid;grid-template-columns:auto 1fr;gap:12px 14px;padding:16px;border:1px solid rgba(17,24,39,.08);border-radius:22px;background:#fff;box-shadow:0 20px 55px rgba(15,23,42,.22);animation:ondutyModePromptIn .22s ease-out}
.onduty-mode-prompt-icon{width:42px;height:42px;border-radius:14px;background:#fff5cc;color:#a97800;display:grid;place-items:center;font-size:18px}
.onduty-mode-prompt-copy{padding-right:20px}.onduty-mode-prompt-kicker{font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:#a97800}.onduty-mode-prompt-copy h3{margin:2px 0 4px;font-size:15px;font-weight:850;color:#182131}.onduty-mode-prompt-copy p{margin:0;color:#6b7280;font-size:11px;line-height:1.45}.onduty-mode-prompt-close{position:absolute;right:11px;top:10px;border:0;background:transparent;color:#7b838e;font-size:12px}.onduty-mode-prompt-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:8px}.onduty-mode-prompt-actions .btn{min-height:40px;border-radius:12px;font-size:11px;font-weight:800}.onduty-mode-prompt-actions .btn-light{border:1px solid #e5e7eb;background:#fff}
@keyframes ondutyModePromptIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:767.98px){.onduty-mode-prompt{padding:12px}.onduty-mode-prompt-card{border-radius:20px;padding:15px}.onduty-mode-prompt-copy h3{font-size:14px}}

/* Dual-role separation: each dashboard is a dedicated workspace, not a shared control panel. */
.provider-dashboard-shell .provider-work-pipeline{background:linear-gradient(135deg,#111827,#1f2937);border:1px solid rgba(255,193,7,.16);border-radius:22px;padding:18px;color:#fff;box-shadow:0 10px 28px rgba(17,24,39,.12)}
.provider-dashboard-shell .provider-work-pipeline .dashboard-kicker{color:#f6c63a}.provider-dashboard-shell .provider-work-pipeline h2{color:#fff}.provider-dashboard-shell .provider-work-pipeline p{color:#aeb8c7}.provider-dashboard-shell .provider-pipeline-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff}.provider-dashboard-shell .provider-pipeline-card small,.provider-dashboard-shell .provider-pipeline-card span:not(.pipeline-icon){color:#b8c1ce}.customer-dashboard-shell .customer-hero{background:linear-gradient(135deg,#fffdf3 0%,#fff 68%);border-color:#f2df9a}.customer-dashboard-shell .dashboard-main-panel{box-shadow:0 10px 30px rgba(36,45,60,.06)}
.notification-audience{display:inline-flex;align-items:center;gap:5px;width:max-content;margin:0 0 5px;padding:3px 7px;border-radius:999px;font-size:8px;font-weight:800;letter-spacing:.02em}.notification-audience.provider{background:#eef2ff;color:#4056a6}.notification-audience.customer{background:#eaf8f1;color:#16734b}.notification-audience.general{background:#f3f4f6;color:#667085}.notification-item strong{display:block}.notification-item span{display:block}
@media (max-width:767.98px){.provider-dashboard-shell .provider-work-pipeline{padding:14px;border-radius:18px}.notification-audience{font-size:7.5px}}

/* Compact dual-role workspace switch: visible only inside the dashboard hero. */
.dashboard-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}.dashboard-mode-switch{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:7px 10px;border:1px solid rgba(17,24,39,.09);border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 5px 16px rgba(25,32,45,.07);color:#20242b;text-align:left;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.dashboard-mode-switch:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(25,32,45,.1);border-color:rgba(255,193,7,.45)}.dashboard-mode-switch:focus-visible{outline:3px solid rgba(255,193,7,.35);outline-offset:2px}.dashboard-mode-switch-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#fff3cd;color:#9a6b00;flex:0 0 auto}.dashboard-mode-switch strong,.dashboard-mode-switch small{display:block}.dashboard-mode-switch strong{font-size:11px;line-height:1.1;font-weight:800}.dashboard-mode-switch small{font-size:9px;line-height:1.2;color:#7b8490;margin-top:2px}.dashboard-mode-switch>.bi-arrow-right-short{font-size:18px;color:#8a929d;margin-left:1px}.provider-hero-actions{margin-left:auto}.provider-hero{flex-wrap:wrap}.provider-hero .provider-status-control{margin-left:auto}@media(max-width:767.98px){.dashboard-hero-actions{width:100%;justify-content:stretch;gap:7px}.dashboard-mode-switch{flex:1;min-width:0}.dashboard-mode-switch strong{font-size:10px}.dashboard-mode-switch small{font-size:8px}.customer-hero .dashboard-hero-actions{order:2}.provider-hero-actions{order:2}.provider-hero .provider-status-control{width:100%;margin-left:0;order:3}}

/* Professional dual-role workspace switch */
.workspace-switch-bar{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid rgba(17,24,39,.10);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,250,252,.96));box-shadow:0 6px 20px rgba(15,23,42,.06)}
.workspace-switch-copy{display:flex;align-items:center;gap:11px;min-width:0}.workspace-switch-copy>span:last-child{display:flex;flex-direction:column;min-width:0}.workspace-switch-copy strong{font-size:13px;line-height:1.2;color:#172033}.workspace-switch-copy small{margin-top:3px;font-size:10px;color:#697386;line-height:1.35}.workspace-switch-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:#fff5cc;color:#8a6700;border:1px solid rgba(255,193,7,.28);font-size:16px}.workspace-switch-btn{min-height:42px;padding:0 14px;border:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-weight:800;font-size:12px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.workspace-switch-btn.provider-target{background:#ffc107;color:#111;box-shadow:0 5px 14px rgba(255,193,7,.24)}.workspace-switch-btn.user-target{background:#1f2937;color:#fff;box-shadow:0 5px 14px rgba(31,41,55,.18)}.workspace-switch-btn:hover{transform:translateY(-1px)}.workspace-switch-btn:active{transform:translateY(0)}.workspace-switch-btn:disabled{opacity:.65;cursor:wait;transform:none}
@media(max-width:767.98px){.workspace-switch-bar{margin-top:12px;padding:11px 12px;gap:10px;border-radius:16px}.workspace-switch-icon{width:36px;height:36px;flex-basis:36px}.workspace-switch-copy strong{font-size:12px}.workspace-switch-copy small{font-size:9.5px}.workspace-switch-btn{min-height:40px;padding:0 11px;font-size:11px}.workspace-switch-btn i{font-size:14px}}
@media(max-width:430px){.workspace-switch-bar{align-items:stretch}.workspace-switch-copy{flex:1}.workspace-switch-btn{flex:0 0 auto}.workspace-switch-copy small{max-width:145px}}