/* Final shared mobile polish for every BringAll role. */
:root{--app-header-height:68px;--app-accent:#b3189f;--app-ink:#24123d;--app-muted:#70647b;--app-line:#e8deef;--app-panel:#fff;--app-canvas:#f8f5fc}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{max-width:100%}
.button,.provider-primary,.provider-secondary,.merchant-signout{min-height:42px!important;padding:10px 15px!important;font-size:14px!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere}
.card,.section,.provider-form section,.provider-job,.merchant-order-card{min-width:0;overflow-wrap:anywhere}
.field,.field input,.field select,.field textarea,.provider-form label,.provider-form input,.provider-form select,.provider-form textarea{min-width:0;max-width:100%}
input[type=file]{width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}

.floating-cart{touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;z-index:96!important;cursor:grab}.floating-cart:active{cursor:grabbing}

.role-menu-toggle{display:none;width:42px;height:42px;flex:0 0 42px;place-content:center;gap:4px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:rgba(255,255,255,.13);color:#fff}
.role-menu-toggle span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor}
.role-menu-scrim{display:none;position:fixed;z-index:78;inset:var(--app-header-height) 0 0;border:0;background:rgba(24,7,40,.5)}
.role-drawer-heading{display:flex;align-items:center;gap:11px;padding:8px 8px 20px;margin-bottom:10px;border-bottom:1px solid var(--app-line)}
.role-drawer-heading img{width:44px;height:44px;object-fit:contain}.role-drawer-heading span{display:grid;text-align:left}.role-drawer-heading strong{color:var(--app-ink);font-size:18px}.role-drawer-heading small{margin-top:3px;color:var(--app-muted);font-size:11px}

@media(min-width:901px){
  .customer-nav.role-drawer{position:fixed!important;z-index:45!important;top:var(--app-header-height)!important;bottom:0!important;left:0!important;right:auto!important;width:248px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:6px!important;padding:20px 15px!important;border-right:1px solid var(--app-line)!important;background:#fff!important;box-shadow:none!important}
  .customer-nav.role-drawer button{flex:none!important;width:100%!important;min-height:46px!important;display:flex!important;flex-direction:row!important;justify-content:flex-start!important;gap:11px!important;padding:10px 13px!important;border-radius:12px!important;font-size:14px!important;text-align:left!important}
  .customer-nav.role-drawer button svg{width:21px!important;height:21px!important}.customer-nav.role-drawer button.active{background:#32105f!important;color:#fff!important}
  body:has(.customer-nav.role-drawer) main.container{width:auto!important;max-width:1240px!important;margin-left:248px!important}
}
@media(max-width:900px){
  .role-menu-toggle{display:grid}.topbar,.provider-topbar,.merchant-topbar{z-index:90!important}
  .customer-nav.role-drawer{position:fixed!important;z-index:80!important;top:var(--app-header-height)!important;bottom:0!important;left:0!important;right:auto!important;width:min(82vw,310px)!important;height:auto!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:6px!important;padding:18px 14px calc(18px + env(safe-area-inset-bottom))!important;border:0!important;border-right:1px solid var(--app-line)!important;background:#fff!important;box-shadow:18px 0 45px rgba(35,10,52,.2)!important;transform:translateX(-105%)!important;transition:transform .22s ease!important;overflow-y:auto!important}
  .customer-nav.role-drawer.is-open{transform:translateX(0)!important}.role-drawer-open .role-menu-scrim{display:block}
  .customer-nav.role-drawer button{display:flex!important;flex:none!important;width:100%!important;min-height:47px!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;padding:10px 13px!important;border-radius:12px!important;color:var(--app-muted)!important;font-size:14px!important;text-align:left!important}
  .customer-nav.role-drawer button svg{width:21px!important;height:21px!important}.customer-nav.role-drawer button.active{background:#32105f!important;color:#fff!important}.customer-nav.role-drawer .cart-count{margin-left:auto!important;position:static!important}
  body:has(.customer-nav.role-drawer) .container{padding-bottom:34px!important}
  .native-app .customer-nav.role-drawer{top:calc(var(--app-header-height) + max(var(--bringall-safe-top),24px))!important}
  .native-app .role-menu-scrim{top:calc(var(--app-header-height) + max(var(--bringall-safe-top),24px))!important}
}

.pull-refresh-indicator{position:fixed;z-index:120;top:calc(max(var(--bringall-safe-top),0px) + 8px);left:50%;display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 13px;border:1px solid var(--app-line);border-radius:999px;background:#fff;color:var(--app-ink);box-shadow:0 10px 28px rgba(37,11,65,.18);opacity:0;pointer-events:none;transform:translate(-50%,calc(-52px + min(var(--pull,0px),52px)));transition:opacity .14s ease}
.pull-refresh-indicator.is-visible{opacity:1}.pull-refresh-indicator i{width:15px;height:15px;border:2px solid #d9c8e4;border-top-color:var(--app-accent);border-radius:50%}.pull-refresh-indicator.is-refreshing i{animation:bringall-spin .7s linear infinite}.pull-refresh-indicator span{font-size:12px;font-weight:800;white-space:nowrap}@keyframes bringall-spin{to{transform:rotate(360deg)}}

/* Keep partner drawers below the header and preserve the common BringAll palette. */
.provider-app{--provider-accent:#b3189f;--provider-ink:#24123d;--provider-muted:#70647b;--provider-line:#e8deef;--provider-canvas:#f8f5fc;--provider-panel:#fff;--provider-soft:#f2eaf6;--provider-success:#176b4d;--provider-warning:#8a5a12;background:var(--provider-canvas)!important;color:var(--provider-ink)!important}
.provider-topbar,.merchant-topbar{background:#fff!important;color:#24123d!important}
@media(max-width:900px){
  .provider-sidebar,.merchant-sidebar{z-index:80!important;top:64px!important}.provider-menu-scrim,.merchant-menu-scrim{z-index:79!important;inset:64px 0 0!important}
  .native-app .provider-sidebar,.native-app .merchant-sidebar{top:calc(64px + max(var(--bringall-safe-top),24px))!important}
  .native-app .provider-menu-scrim,.native-app .merchant-menu-scrim{inset:calc(64px + max(var(--bringall-safe-top),24px)) 0 0!important}
  .provider-top-actions,.merchant-top-actions{min-width:0!important}.provider-signout,.merchant-signout{width:auto!important;min-width:68px!important;flex:0 0 auto!important;padding-inline:10px!important}
}

.merchant-logo-card,.merchant-logo-card form,.merchant-profile-grid>*{min-width:0!important}.merchant-logo-card h2,.merchant-logo-card p,.merchant-document-card small{max-width:100%;overflow-wrap:anywhere}.merchant-logo-card input[type=file]{display:block;width:100%}.merchant-item-actions,.merchant-order-actions,.provider-job-actions{flex-wrap:wrap}.merchant-item-actions .button,.provider-job-actions button{flex:0 1 auto;max-width:100%}
@media(max-width:520px){.merchant-logo-card{padding:16px!important}.merchant-logo-card form{width:100%}.merchant-logo-card .button,.merchant-document-card .button{width:100%!important}.merchant-item-actions .button,.provider-job-actions button{width:100%!important}.head{align-items:flex-start!important}.head>.button{flex:0 1 auto!important}}
@media(prefers-reduced-motion:reduce){.customer-nav.role-drawer,.pull-refresh-indicator{transition:none!important}.pull-refresh-indicator i{animation:none!important}}

/* Final native shell: header order is logo, delivery address, account actions.
   The menu trigger sits in its own row directly below the logo. */
@media(max-width:900px){
  .topbar.discovery-header{
    position:sticky!important;top:0!important;z-index:160!important;
    display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;
    align-items:center!important;gap:7px!important;width:100%!important;max-width:100%!important;
    min-height:64px!important;padding:8px 10px!important;overflow:visible!important
  }
  .topbar.discovery-header .brand{grid-column:1!important;min-width:0!important;margin:0!important}
  .topbar.discovery-header .brand-mark{width:36px!important;height:36px!important;max-width:36px!important}
  .topbar.discovery-header .brand span{display:none!important}
  .topbar.discovery-header .discovery-location{grid-column:2!important;justify-self:stretch!important;width:100%!important;min-width:0!important}
  .topbar.discovery-header .location-selector{display:flex!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:40px!important;padding:5px 8px!important}
  .topbar.discovery-header .location-selector span{min-width:0!important;flex:1!important}
  .topbar.discovery-header .location-selector strong{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .topbar.discovery-header .compact-actions{grid-column:3!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;min-width:max-content!important;margin:0!important}
  .topbar.discovery-header #customer-back,.topbar.discovery-header #customer-refresh{display:none!important}
  .topbar.discovery-header .nm-avatar,.topbar.discovery-header .signout-control{display:grid!important;visibility:visible!important;opacity:1!important}
  .topbar.discovery-header .role-menu-toggle{
    position:absolute!important;z-index:165!important;top:calc(100% + 8px)!important;left:10px!important;
    display:grid!important;width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;
    border:1px solid #dbc7e8!important;background:#32105f!important;color:#fff!important;
    box-shadow:0 9px 22px rgba(35,8,67,.24)!important
  }
  .topbar.discovery-header+.customer-nav.role-drawer{
    z-index:150!important;top:calc(64px + max(var(--bringall-safe-top),0px))!important;bottom:0!important;
    padding:62px 14px calc(18px + env(safe-area-inset-bottom))!important;
    background:#fff!important;pointer-events:auto!important;isolation:isolate!important
  }
  .topbar.discovery-header+.customer-nav.role-drawer .role-drawer-heading{margin-top:-50px!important;margin-left:48px!important;padding:7px 6px 14px!important}
  .role-menu-scrim{z-index:140!important;top:calc(64px + max(var(--bringall-safe-top),0px))!important;pointer-events:auto!important}
  .role-drawer-open .topbar.discovery-header+.customer-nav.role-drawer{transform:translateX(0)!important}
  .topbar.discovery-header+.customer-nav.role-drawer+.container{padding-top:66px!important;padding-bottom:34px!important}
}

/* Rider uses the same official BringAll violet and magenta shell. */
body:has(.rider-nav) .topbar{
  position:sticky!important;top:0!important;z-index:160!important;overflow:visible!important;
  background:radial-gradient(circle at 88% 15%,#314dff 0,transparent 28%),radial-gradient(circle at 38% 100%,#c622e8 0,transparent 23%),linear-gradient(120deg,#100027,#26014d 48%,#211279)!important;
  color:#fff!important;border-color:rgba(255,255,255,.14)!important;box-shadow:0 9px 28px rgba(24,0,67,.3)!important
}
body:has(.rider-nav) .topbar .brand{color:#fff!important}
body:has(.rider-nav) .topbar .icon-button{border:1px solid rgba(255,255,255,.26)!important;background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:none!important}
@media(max-width:900px){
  body:has(.rider-nav) .topbar .role-menu-toggle{position:absolute!important;z-index:165!important;top:calc(100% + 8px)!important;left:10px!important;background:#32105f!important;color:#fff!important}
  body:has(.rider-nav) .customer-nav.role-drawer{z-index:150!important;top:calc(60px + max(var(--bringall-safe-top),0px))!important;padding-top:62px!important;pointer-events:auto!important}
  body:has(.rider-nav) .role-menu-scrim{z-index:140!important;top:calc(60px + max(var(--bringall-safe-top),0px))!important}
  body:has(.rider-nav) .customer-nav.role-drawer+.container{padding-top:66px!important;padding-bottom:34px!important}
}