/* ==========================================================================
   Merchant app shell — phone & tablet (≤1024px): bottom tabs + "everything" sheet
   Desktop stays exactly as it is.
   ========================================================================== */

.qgrid,
.mnav,
.msheet,
.msheet-scrim{display:none}

@media (max-width:1024px){
  /* ---------- page frame ---------- */
  body.merchant-app .main{padding-bottom:112px}
  body.merchant-app .foot{margin-bottom:66px}
  body.merchant-app.m-sheet-open{overflow:hidden}

  /* compact top bar: the app's own navigation takes over */
  body.merchant-app .topbar-in{height:58px;padding:0 16px;flex-wrap:nowrap;gap:10px}
  body.merchant-app .brand{font-size:17px}
  body.merchant-app .nav{gap:12px;flex-wrap:nowrap;font-size:13px}
  body.merchant-app .nav a[href="/dashboard"],
  body.merchant-app .nav a[href="/account/password"],
  body.merchant-app .nav form{display:none}

  body.merchant-app .mhead h2{font-size:clamp(21px,5.4vw,26px)}
  body.merchant-app .mhead .head-actions .btn{padding:9px 15px;font-size:12.5px}

  /* ---------- quick access tiles (home) ---------- */
  .qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 16px}
  .qtile{
    position:relative;background:#fff;border:1px solid rgba(120,0,144,.1);border-radius:16px;
    padding:11px 5px 9px;display:grid;justify-items:center;gap:6px;
    font-size:10.8px;font-weight:800;color:var(--ink);text-align:center;line-height:1.2;
    box-shadow:var(--shadow-sm);transition:transform .16s,border-color .16s,box-shadow .16s;
  }
  .qtile:hover,.qtile:active{transform:translateY(-2px);border-color:rgba(120,0,144,.22);box-shadow:var(--shadow)}
  .qtile-ico{
    position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:13px;
    background:linear-gradient(140deg,#F7EEFD,#FFF1E8);color:var(--violet);
  }
  .qtile-badge{
    position:absolute;top:-4px;inset-inline-end:-6px;
    min-width:16px;height:16px;padding:0 4px;border-radius:999px;
    background:#FC6000;color:#fff;font-size:9.5px;font-style:normal;font-weight:800;
    display:grid;place-items:center;box-shadow:0 0 0 2px #fff;
  }
  body.merchant-app .dash-nav{display:none}

  /* ---------- bottom tab bar ---------- */
  .mnav{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:flex;align-items:stretch;justify-content:space-between;gap:6px;
    padding:9px 6px calc(9px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
            backdrop-filter:saturate(160%) blur(18px);
    border-top:1px solid rgba(120,0,144,.12);
    box-shadow:0 -16px 34px -26px rgba(60,0,70,.6);
    overflow:hidden;
  }
  .mnav-ind{
    position:absolute;top:0;left:0;height:3px;width:38px;border-radius:0 0 5px 5px;
    background:var(--grad);opacity:.95;pointer-events:none;
    transition:transform .34s cubic-bezier(.22,.72,.2,1),width .34s cubic-bezier(.22,.72,.2,1);
    animation:mnavIndIn .45s ease-out;
  }
  .mnav-tab{
    flex:1 1 0;min-width:0;position:relative;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:7px 4px 6px;border:0;background:none;cursor:pointer;
    border-radius:18px;color:#8B7A9B;text-decoration:none;
    font-size:11.2px;font-weight:800;letter-spacing:-.1px;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:color .18s,background .18s,transform .14s ease;
  }
  .mnav-ico{
    position:relative;display:grid;place-items:center;
    width:50px;height:32px;border-radius:13px;
    transition:background .2s,color .2s,transform .2s cubic-bezier(.3,.9,.4,1.2);
  }
  .mnav-ico svg{width:24px;height:24px}
  .mnav-tab.is-on{color:var(--violet)}
  .mnav-tab.is-on .mnav-ico{background:var(--violet-soft)}
  .mnav-tab:active{transform:scale(.94)}
  .mnav-tab.is-tapped .mnav-ico{animation:mnavPop .36s cubic-bezier(.3,.9,.4,1.3)}
  .mnav-ripple{
    position:absolute;border-radius:50%;pointer-events:none;
    background:rgba(120,0,144,.16);transform:scale(0);opacity:.9;
    animation:mnavRipple .5s ease-out forwards;
  }
  @keyframes mnavPop{
    0%{transform:scale(.82)}
    55%{transform:scale(1.15)}
    100%{transform:scale(1)}
  }
  @keyframes mnavRipple{
    to{transform:scale(2.8);opacity:0}
  }
  @keyframes mnavIndIn{
    from{opacity:0}
    to{opacity:.95}
  }
  .mnav-dot{
    position:absolute;top:-2px;inset-inline-end:1px;width:7px;height:7px;border-radius:50%;
    background:#FC6000;box-shadow:0 0 0 2px #fff;
  }

  /* ---------- "everything" sheet ---------- */
  .msheet-scrim{
    display:block;position:fixed;inset:0;z-index:80;
    background:rgba(35,4,44,.45);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .24s,visibility .24s;
  }
  .msheet-scrim.is-on{opacity:1;visibility:visible}

  .msheet{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;bottom:0;z-index:81;
    max-height:90vh;border-radius:26px 26px 0 0;
    background:#fff;box-shadow:0 -40px 70px -30px rgba(40,0,50,.55);
    transform:translateY(103%);visibility:hidden;
    transition:transform .32s cubic-bezier(.22,.72,.2,1),visibility .32s;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  .msheet.is-open{transform:none;visibility:visible}
  .msheet-grab{width:44px;height:4px;border-radius:999px;background:#E7DBEF;margin:8px auto 0;flex:0 0 auto}
  .msheet-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
    padding:12px 18px 8px;flex:0 0 auto;
  }
  .msheet-head b{display:block;font-size:16px;letter-spacing:-.3px;color:var(--ink)}
  .msheet-head span{font-size:11.5px;color:var(--muted);font-weight:700}
  .msheet-x{
    flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid rgba(120,0,144,.14);
    background:#FBF7FE;color:var(--violet);font-size:19px;line-height:1;cursor:pointer;
    display:grid;place-items:center;
  }
  .msheet-body{overflow-y:auto;overscroll-behavior:contain;padding:0 14px 6px}
  .msheet-title{
    margin:12px 4px 7px;font-size:10.8px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);
  }
  .msheet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-items:stretch}
  .mtile{
    position:relative;display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:15px;background:#fff;
    border:1px solid rgba(120,0,144,.1);box-shadow:var(--shadow-sm);
    font-size:12.2px;font-weight:800;color:var(--ink);text-align:start;line-height:1.3;
    transition:transform .15s,border-color .15s,background .15s;
  }
  .mtile:active{transform:scale(.98);border-color:rgba(120,0,144,.24);background:#FCF8FE}
  .mtile-ico{
    flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
    background:linear-gradient(140deg,#F7EEFD,#FFF1E8);color:var(--violet);
  }
  .mtile-ico svg{width:19px;height:19px}
  .mtile-lbl{flex:1 1 auto;min-width:0}
  .mtile-badge{
    flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
    background:#FC6000;color:#fff;font-size:10px;font-style:normal;font-weight:800;
    display:grid;place-items:center;
  }
  .msheet-out{margin:14px 0 8px}
  .msheet-out .mtile-out{
    width:100%;justify-content:center;
    background:#FDF2F1;border-color:#F7D9D5;color:#B32218;
  }
  .mtile-out .mtile-ico{background:#FBE3E0;color:#B32218}
}

/* very small phones */
@media (max-width:380px){
  .qgrid{gap:6px}
  .qtile{font-size:10px;padding:9px 3px 7px}
  .qtile-ico{width:34px;height:34px}
  .mnav-lbl{font-size:9.8px}
  .mtile{font-size:11.5px;padding:9px 10px;gap:8px}
  .mtile-ico{width:30px;height:30px}
}

/* tablets: same shell, roomier tiles and a centred sheet */
@media (min-width:600px) and (max-width:1024px){
  .qgrid{gap:10px}
  .qtile{font-size:11.5px;padding:14px 6px 12px}
  .qtile-ico{width:42px;height:42px}
  .mnav-tab{font-size:12px;padding:9px 6px 7px}
  .mnav-ico{width:56px;height:34px}
  .mnav-ico svg{width:26px;height:26px}
  .msheet{
    left:50%;right:auto;width:min(640px,94vw);
    transform:translate(-50%,103%);
  }
  .msheet.is-open{transform:translate(-50%,0)}
  .mtile{font-size:13px;padding:12px 14px}
  .mtile-ico{width:38px;height:38px}
  .mtile-ico svg{width:21px;height:21px}
  body.merchant-app .main{padding-bottom:104px}
}

@media (prefers-reduced-motion:reduce){
  .msheet,.msheet-scrim,.qtile,.mtile{transition:none}
}

/* ==========================================================================
   Site-wide back bar (all pages except each area's home)
   ========================================================================== */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.crumb{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;line-height:1;
  background:#fff;border:1px solid rgba(120,0,144,.14);color:var(--violet,#780090);
  font-size:12px;font-weight:800;
  box-shadow:0 10px 22px -22px rgba(60,0,70,.7);
  transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.crumb:hover{
  background:var(--violet-soft,#F7EEFD);border-color:#E6D3F3;
  color:var(--violet,#780090);transform:translateY(-1px);
}
.crumb svg{width:14px;height:14px;flex:0 0 auto}
.crumb-home{background:#FBF8FE}
html[dir="rtl"] .crumb-back svg{transform:scaleX(-1)}

@media (max-width:640px){
  .crumbs{margin-bottom:10px;gap:6px}
  .crumb{padding:6px 12px;font-size:11.5px}
  .crumb svg{width:13px;height:13px}
}