*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7f5;color:#14231e}a{color:#17493a;text-decoration:none}.topbar{height:68px;background:#173f33;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.topbar a{color:#fff;margin-left:18px}.badge{font-size:12px;background:#fff;color:#173f33;border-radius:999px;padding:5px 9px;margin-left:10px}.layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 68px)}.sidebar{background:#fff;border-right:1px solid #dfe6e2;padding:20px}.sidebar a{display:block;padding:11px 12px;border-radius:9px;margin-bottom:4px}.sidebar a.active,.sidebar a:hover{background:#eaf2ee}.content{padding:30px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.card,.panel,.auth-card{background:#fff;border:1px solid #dfe6e2;border-radius:14px;padding:22px}.card h2{margin-top:0;font-size:18px}.muted{color:#66756f}.auth{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(520px,100%)}.auth-card h1{color:#173f33}.page{max-width:760px;margin:30px auto;padding:18px}.panel{margin-top:18px}label{display:block;font-weight:600;margin:14px 0}input,select{width:100%;padding:12px;border:1px solid #cfd9d4;border-radius:8px;margin-top:6px;background:#fff}button{background:#173f33;color:white;border:0;border-radius:9px;padding:12px 18px;font-weight:700;cursor:pointer}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.alert{background:#fff0ef;color:#9b1c1c;padding:12px;border-radius:8px}.success{background:#eaf7ef;color:#08783f;padding:12px;border-radius:8px}.business-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 0;border-bottom:1px solid #eee}.business-row small{display:block;color:#66756f;margin-top:4px}

/* CF38_MOBILE_MENU_2026_10_07 */
/* CF38D_MOBILE_MENU_CLICK_FIX_2026_10_07 */
.mobile-menu-toggle,
.mobile-menu-close,
.mobile-menu-head,
.mobile-menu-backdrop{
    display:none
}
.topbar-brand-row{
    display:flex;
    align-items:center;
    min-width:0
}
@media(max-width:760px){
    body.mobile-menu-open{
        overflow:hidden
    }
    .layout{
        grid-template-columns:1fr
    }
    .content{
        padding:18px
    }
    .two{
        grid-template-columns:1fr
    }
    .topbar{
        min-height:68px;
        height:auto;
        padding:10px 14px;
        gap:10px
    }
    .topbar-brand-row{
        flex:1 1 auto;
        gap:8px
    }
    .topbar .badge{
        max-width:38vw;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    .topbar nav{
        display:flex;
        gap:11px;
        align-items:center;
        max-width:46vw;
        overflow-x:auto;
        white-space:nowrap;
        scrollbar-width:none
    }
    .topbar nav::-webkit-scrollbar{
        display:none
    }
    .topbar nav a{
        margin-left:0;
        font-size:13px
    }
    .mobile-menu-toggle{
        display:inline-flex;
        align-items:center;
        gap:6px;
        width:auto;
        margin:0;
        padding:8px 10px;
        border:1px solid rgba(255,255,255,.34);
        border-radius:9px;
        background:rgba(255,255,255,.10);
        color:#fff;
        font-weight:800;
        cursor:pointer
    }
    .mobile-menu-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:0 0 12px;
        margin-bottom:8px;
        border-bottom:1px solid #e4ebe7
    }
    .mobile-menu-close{
        display:inline-flex;
        width:38px;
        height:38px;
        margin:0;
        padding:0;
        align-items:center;
        justify-content:center;
        border-radius:9px;
        background:#edf4f1;
        color:#173f33;
        font-size:25px;
        line-height:1
    }
    .sidebar{
        display:block;
        position:fixed;
        z-index:1002;
        top:0;
        left:0;
        bottom:0;
        width:min(86vw,350px);
        padding:16px;
        border-right:1px solid #dfe6e2;
        background:#fff;
        overflow-y:auto;
        overscroll-behavior:contain;
        transform:translateX(-105%);
        transition:transform .18s ease;
        box-shadow:0 18px 45px rgba(0,0,0,.22)
    }
    .sidebar.open{
        transform:translateX(0)
    }
    .sidebar a{
        padding:12px 12px;
        margin-bottom:3px
    }
    .mobile-menu-backdrop{
        position:fixed;
        z-index:1001;
        inset:0;
        display:block;
        background:rgba(0,0,0,.42);
        opacity:0;
        transition:opacity .18s ease
    }
    .mobile-menu-backdrop[hidden]{
        display:none
    }
    .mobile-menu-backdrop.open{
        opacity:1
    }
}
@media(max-width:480px){
    .topbar{
        align-items:flex-start;
        flex-wrap:wrap
    }
    .topbar nav{
        width:100%;
        max-width:100%;
        padding-top:2px
    }
    .topbar .badge{
        max-width:42vw
    }
}

/* CF38D: force reliable mobile drawer interaction */
@media(max-width:760px){
    #mainBusinessMenu{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto;
        transform:translate3d(-105%,0,0);
        will-change:transform;
    }

    #mainBusinessMenu.open{
        transform:translate3d(0,0,0) !important;
    }

    #mobileMenuToggle{
        display:inline-flex !important;
        position:relative;
        z-index:1003;
        pointer-events:auto !important;
        touch-action:manipulation;
    }

    #mobileMenuClose{
        display:inline-flex !important;
        pointer-events:auto !important;
        touch-action:manipulation;
    }

    #mobileMenuBackdrop{
        position:fixed;
        inset:0;
        z-index:1001;
        background:rgba(0,0,0,.42);
        pointer-events:auto;
    }

    #mobileMenuBackdrop[hidden]{
        display:none !important;
    }

    #mobileMenuBackdrop.open{
        display:block !important;
        opacity:1 !important;
    }
}


/* CF38E_CSS_ONLY_MOBILE_MENU_2026_10_07 */

.mobile-menu-state{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
}

.mobile-notification-link,
.mobile-menu-utilities,
.mobile-business-name{
    display:none;
}

@media(max-width:760px){

    /*
    |--------------------------------------------------------------------------
    | Compact mobile header
    |--------------------------------------------------------------------------
    */
    .topbar{
        height:58px !important;
        min-height:58px !important;
        padding:0 12px !important;
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:0 !important;
        overflow:visible !important;
    }

    .topbar-brand-row{
        width:100% !important;
        min-width:0 !important;
        display:flex !important;
        align-items:center !important;
        gap:10px !important;
        flex-wrap:nowrap !important;
    }

    .cape-brand{
        display:block;
        flex:0 0 auto;
        font-size:20px !important;
        line-height:1 !important;
        letter-spacing:.02em;
        white-space:nowrap;
    }

    .desktop-business-badge{
        display:none !important;
    }

    .desktop-top-nav{
        display:none !important;
    }

    .mobile-menu-toggle{
        display:inline-flex !important;
        flex:0 0 auto !important;
        width:auto !important;
        min-height:36px !important;
        margin:0 !important;
        padding:7px 10px !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        border:1px solid rgba(255,255,255,.38) !important;
        border-radius:9px !important;
        background:rgba(255,255,255,.10) !important;
        color:#fff !important;
        font-size:14px !important;
        line-height:1 !important;
        font-weight:800 !important;
        cursor:pointer !important;
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
        user-select:none;
    }

    .mobile-menu-icon{
        font-size:17px;
        line-height:1;
    }

    .mobile-notification-link{
        margin-left:auto !important;
        display:inline-flex !important;
        flex:0 0 auto;
        min-width:37px;
        height:34px;
        padding:0 8px;
        align-items:center;
        justify-content:center;
        gap:5px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.30);
        color:#fff !important;
        text-decoration:none;
        font-size:10px;
    }

    .mobile-notification-link > span:first-child{
        width:8px;
        height:8px;
        font-size:0;
        border-radius:999px;
        background:#fff;
        opacity:.95;
    }

    .mobile-notification-count{
        font-size:13px;
        font-weight:900;
        line-height:1;
    }

    /*
    |--------------------------------------------------------------------------
    | CSS-only slide-out drawer
    |--------------------------------------------------------------------------
    */
    #mainBusinessMenu{
        display:block !important;
        position:fixed !important;
        z-index:1002 !important;
        top:0 !important;
        left:0 !important;
        bottom:0 !important;
        width:min(86vw,340px) !important;
        max-width:340px !important;
        padding:16px !important;
        background:#fff !important;
        border-right:1px solid #dfe6e2 !important;
        box-shadow:0 15px 45px rgba(0,0,0,.24) !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
        transform:translate3d(-105%,0,0) !important;
        transition:transform .18s ease !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
    }

    #capeMobileMenuState:checked ~ .layout #mainBusinessMenu{
        transform:translate3d(0,0,0) !important;
    }

    .mobile-menu-backdrop{
        display:none !important;
        position:fixed !important;
        z-index:1001 !important;
        inset:0 !important;
        margin:0 !important;
        background:rgba(0,0,0,.46) !important;
        cursor:pointer;
    }

    #capeMobileMenuState:checked ~ .mobile-menu-backdrop{
        display:block !important;
    }

    .mobile-menu-head{
        display:flex !important;
        align-items:flex-start !important;
        justify-content:space-between !important;
        gap:12px !important;
        margin:0 0 12px !important;
        padding:2px 0 13px !important;
        border-bottom:1px solid #e1e9e5 !important;
    }

    .mobile-menu-title{
        min-width:0;
        display:grid;
        gap:5px;
    }

    .mobile-menu-title strong{
        color:#173f33;
        font-size:17px;
        line-height:1.2;
    }

    .mobile-business-name{
        display:block !important;
        max-width:230px;
        color:#66756f;
        font-size:12px;
        font-weight:700;
        line-height:1.35;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .mobile-menu-close{
        display:inline-flex !important;
        flex:0 0 auto;
        width:38px !important;
        height:38px !important;
        margin:0 !important;
        padding:0 !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:9px !important;
        background:#edf4f1 !important;
        color:#173f33 !important;
        font-size:25px !important;
        line-height:1 !important;
        font-weight:600 !important;
        cursor:pointer !important;
        touch-action:manipulation;
        user-select:none;
    }

    .mobile-menu-utilities{
        display:grid !important;
        gap:3px;
        margin:0 0 12px;
        padding:0 0 12px;
        border-bottom:1px solid #e7edea;
    }

    .mobile-menu-utilities a{
        display:block !important;
        margin:0 !important;
        padding:10px 12px !important;
        border-radius:9px;
        color:#173f33 !important;
        text-decoration:none;
        font-size:14px !important;
        font-weight:800;
        background:#f5f8f6;
    }

    #mainBusinessMenu > a{
        display:block !important;
        margin:0 0 3px !important;
        padding:11px 12px !important;
        border-radius:9px;
        color:#173f33;
        font-size:14px !important;
        line-height:1.25;
        text-decoration:none;
    }

    #mainBusinessMenu > a.active{
        background:#eaf2ee;
        font-weight:900;
    }

    /*
    |--------------------------------------------------------------------------
    | Main content spacing
    |--------------------------------------------------------------------------
    */
    .layout{
        display:block !important;
        min-height:calc(100vh - 58px) !important;
    }

    .content{
        padding:22px 16px !important;
    }

    .content > h1{
        font-size:clamp(32px,10vw,45px) !important;
        line-height:1.08 !important;
        margin-top:10px !important;
        margin-bottom:18px !important;
    }
}

@media(max-width:430px){
    .topbar{
        padding:0 10px !important;
    }

    .mobile-menu-toggle{
        padding:7px 9px !important;
    }

    .cape-brand{
        font-size:19px !important;
    }
}
